Remove unused props from collapsible

surface-ui · Aug 30, 2023 · c15294e · c15294e
1 parent ef8a9c7
commit c15294e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 39 deletions.
diff --git a/lib/surface_bulma/collapsible.ex b/lib/surface_bulma/collapsible.ex
@@ -3,23 +3,23 @@ defmodule SurfaceBulma.Collapsible do
   alias Phoenix.LiveView.JS
   alias SurfaceBulma.Icon.FontAwesome, as: FA
 
+  use SurfaceBulma.ClassProp
   prop id, :string, required: true
-  prop class, :css_class, default: []
   prop header_class, :css_class
   prop collapsed, :boolean, default: true
-  prop collapsible?, :boolean, default: true
   prop shadow, :boolean, default: false
   prop body_class, :css_class, default: []
   prop remove, :event
   prop title, :string
   prop icon, :string
   prop toggle_icon, :any
-  prop sortable?, :boolean, default: false
   prop is_collapsed?, :boolean
+  prop hook, :string
 
   slot default, required: true
   slot header
   slot header_icon
+  slot footer
 
   def update(assigns, socket) do
     {:ok,
@@ -32,49 +32,27 @@ defmodule SurfaceBulma.Collapsible do
 
   def render(assigns) do
     ~F"""
-    <div id={@id} class={["card", "is-shadowless": !@shadow, sortable: @sortable?] ++ @class}>
-      <div class={"is-clickable", "card-header", "flex", @header_class}>
+    <div id={@id} class={classes(assigns, ["card", "is-shadowless": !@shadow])}>
+      <div class={"card-header", @header_class}>
         <div class="card-header-title">
-          <div :if={@sortable?} class="sortable-handle">
-            <FA icon="sort" />
-          </div>
-          <!--div :on-click={JS.toggle(to: "##{@id} .card-content")}>
-            <FA icon={toggle_icon(assigns)} />
-          </div-->
-          <div
-            :if={@collapsible?}
-            :on-click={JS.toggle(to: "##{@id} .card-content")
-            |> JS.toggle(to: "##{@id} .angle-down")
-            |> JS.toggle(to: "##{@id} .angle-up")}
-          >
+          <#slot {@header} />
+        </div>
+        <div class="card-header-icon">
+          <div :on-click={JS.toggle(to: "##{@id} .card-content")
+          |> JS.toggle(to: "##{@id} .angle-down")
+          |> JS.toggle(to: "##{@id} .angle-up")}>
             <span class={"angle-down", hidden: !@collapsed}><FA icon="angle-down" /></span>
             <span class={"angle-up", hidden: @collapsed}><FA icon="angle-up" /></span>
           </div>
-          <span>{@title}</span>
-          <#slot {@header} />
         </div>
-        {#if slot_assigned?(:header_icon)}
-          {#for item <- @header_icon}
-            <Context put={SurfaceBulma.Button, context_class: "card-header-icon"}>
-              <#slot {item} />
-            </Context>
-          {/for}
-        {#else}
-          <div class="card-header-icon">
-            <div :if={@remove} class="has-text-danger is-clickable" :on-click={@remove}>
-              <FA icon="trash" />
-            </div>
-          </div>
-        {/if}
       </div>
-      <div class={["card-content", hidden: @collapsed == @collapsible?] ++ @body_class}>
+      <div class={["card-content", hidden: @collapsed] ++ @body_class}>
         <#slot />
       </div>
+      <div :if={slot_assigned?(:footer)} class="card-footer">
+        <#slot {@footer} />
+      </div>
     </div>
     """
   end
 end
-
-defmodule SurfaceBulma.Collapsible.Header do
-  use Surface.Component, slot: "header"
-end
diff --git a/test/surface_bulma/table_test.exs b/test/surface_bulma/table_test.exs
@@ -9,9 +9,10 @@ defmodule Surface.Components.TableTest do
   defmodule View do
     use Surface.LiveView
 
-    alias SurfaceBulma.Table
+    alias SurfaceBulma.{Button, Table}
     alias SurfaceBulma.Table.Column
 
+    data residents_hidden, :boolean, default: false
     data props, :map,
       default: %{
         data: [
@@ -25,6 +26,7 @@ defmodule Surface.Components.TableTest do
 
     def render(assigns) do
       ~F"""
+      <Button click="toggle-residents">Toggle residents column</Button>
       <Table id="foo" data={person <- @props.data} {...@props}>
         <Column label="Id" sort_by="id">
           {person.id}
@@ -35,12 +37,17 @@ defmodule Surface.Components.TableTest do
         <Column label="Street" sort_by={[:address, :street]}>
           {person.address.street}
         </Column>
-        <Column label="Residents" sort_by={{[:address, :residents, 0], &Kernel.>=/2}}>
+        <Column label="Residents" show={@residents_hidden != true} sort_by={{[:address, :residents, 0], &Kernel.>=/2}}>
           {person.address.residents |> Enum.join(", ")}
         </Column>
       </Table>
       """
     end
+
+    @impl true
+    def handle_event("toggle-residents", _,socket ) do
+    	{:noreply, assign(socket, :residents_hidden, socket.assigns.residents_hidden != true)}
+    end
   end
 
   describe "static tables are rendered and sorted correctly" do
@@ -180,6 +187,14 @@ defmodule Surface.Components.TableTest do
              |> element("table tr:nth-child(1) td:nth-child(2)")
              |> render() =~ "Jane"
     end
+
+    test "hiding columns works", %{view: view} do
+      view
+      |> element("button")
+      |> render_click()
+
+      refute render(view) =~ "Residents"
+    end
   end
 
   describe "Tables can be updated and sorted again" do