reworked dropdown

coingaming · May 24, 2022 · b04c6f8 · b04c6f8
1 parent 24ee61f
commit b04c6f8
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 93 deletions.
diff --git a/lib/moon/components/select/dropdown.ex b/lib/moon/components/select/dropdown.ex
@@ -128,6 +128,7 @@ defmodule Moon.Components.Select.Dropdown do
 
   use Moon.StatelessComponent
   alias Moon.Components.ListItems.SingleLineItem
+  alias Moon.Components.Select.Icon
   alias Moon.Components.Select.Dropdown.Option
   alias Moon.Components.Select.Helpers, as: SelectHelpers
   alias Surface.Components.Context
@@ -139,6 +140,8 @@ defmodule Moon.Components.Select.Dropdown do
   prop options, :any
   prop value, :any
   prop is_multi, :boolean
+  prop mode, :string, values: ~w(icon logo flag)
+  prop icon_class, :string
 
   slot default
   slot option_filters
@@ -175,9 +178,18 @@ defmodule Moon.Components.Select.Dropdown do
               value={"#{option.value}"}
               :let={is_selected: is_selected}
             >
-              <SingleLineItem current={is_selected}>
-                {option.label}
-              </SingleLineItem>
+              {#if @mode}
+                <SingleLineItem current={is_selected}>
+                  <:left_icon>
+                    <Icon {=option} {=@mode} {=@icon_class} />
+                  </:left_icon>
+                  {option.label}
+                </SingleLineItem>
+              {#else}
+                <SingleLineItem current={is_selected}>
+                  {option.label}
+                </SingleLineItem>
+              {/if}
             </Option>
           {/for}
         {/if}

diff --git a/lib/moon/components/select/icon.ex b/lib/moon/components/select/icon.ex
@@ -0,0 +1,26 @@
+defmodule Moon.Components.Select.Icon do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Assets.Logo
+  alias Moon.Icon
+
+  prop option, :any
+  prop mode, :string
+  prop icon_class, :string
+
+  def render(assigns) do
+    ~F"""
+    {#case @mode}
+      {#match "icon"}
+        <Icon class={@icon_class} name={@option.icon} />
+      {#match "logo"}
+        <Logo class={@icon_class} name={@option.icon} />
+      {#match "flag"}
+        <span class={"flag-icon #{@option.icon} flag-icon-squared rounded-md #{@icon_class}"} />
+      {#match _}
+    {/case}
+    """
+  end
+end
diff --git a/lib/moon/components/select/multi_select.ex b/lib/moon/components/select/multi_select.ex
@@ -1,30 +1,3 @@
-defmodule Moon.Components.Select.MultiSelect.LabelPic do
-  @moduledoc false
-
-  use Moon.StatelessComponent
-
-  alias Moon.Assets.Logo
-  alias Moon.Icon
-
-  prop option, :any
-  prop mode, :string
-  prop pic_class, :string
-
-  def render(assigns) do
-    ~F"""
-    {#case @mode}
-      {#match "icon"}
-        <Icon class={@pic_class} name={@option.icon} />
-      {#match "logo"}
-        <Logo class={@pic_class} name={@option.icon} />
-      {#match "flag"}
-        <span class={"flag-icon #{@option.icon} flag-icon-squared rounded-md #{@pic_class}"} />
-      {#match _}
-    {/case}
-    """
-  end
-end
-
 defmodule Moon.Components.Select.MultiSelect.Labels.SelectedLabel do
   @moduledoc false
 
@@ -125,8 +98,6 @@ defmodule Moon.Components.Select.MultiSelect do
   alias Moon.Components.Popover
   alias Moon.Components.Select.Dropdown
   alias Moon.Components.Select.Helpers, as: SelectHelpers
-  alias Moon.Components.ListItems.SingleLineItem
-  alias __MODULE__.LabelPic
   alias __MODULE__.Labels
   alias Surface.Components.Form.Input.InputContext
 
@@ -143,7 +114,7 @@ defmodule Moon.Components.Select.MultiSelect do
   prop prompt_text_size_class, :string, default: "text-xs"
   prop prompt_text_color_class, :string, default: "text-trunks-100"
   prop mode, :string, values: ~w(icon logo flag)
-  prop pic_class, :string
+  prop icon_class, :string
   prop label_text_size_class, :string, default: "text-sm"
   prop label_text_color_class, :string, default: "white-100"
   prop label_background_color_class, :string, default: "hit-100"
@@ -187,18 +158,15 @@ defmodule Moon.Components.Select.MultiSelect do
               class="overflow-y-scroll rounded box-border border border-solid border-beerus-100"
               style="min-height: 20px; max-height: 200px"
             >
-              <Dropdown class="w-auto" id={"#{@id}-dropdown"} select_id={@id} {=@options} is_multi>
-                {#for option <- @options}
-                  <Dropdown.Option value={option.value} :let={is_selected: is_selected}>
-                    <SingleLineItem current={is_selected}>
-                      {#if @mode}
-                        <LabelPic {=option} {=@mode} {=@pic_class} />
-                      {/if}
-                      {option.label}
-                    </SingleLineItem>
-                  </Dropdown.Option>
-                {/for}
-              </Dropdown>
+              <Dropdown
+                class="w-auto"
+                id={"#{@id}-dropdown"}
+                select_id={@id}
+                {=@options}
+                {=@mode}
+                {=@icon_class}
+                is_multi
+              />
             </div>
           </TopToDown>
         </:content>

diff --git a/lib/moon/components/select/single_select.ex b/lib/moon/components/select/single_select.ex
@@ -1,43 +1,16 @@
-defmodule Moon.Components.Select.SingleSelect.LabelPic do
-  @moduledoc false
-
-  use Moon.StatelessComponent
-
-  alias Moon.Assets.Logo
-  alias Moon.Icon
-
-  prop option, :any
-  prop mode, :string
-  prop pic_class, :string
-
-  def render(assigns) do
-    ~F"""
-    {#case @mode}
-      {#match "icon"}
-        <Icon class={@pic_class} name={@option.icon} />
-      {#match "logo"}
-        <Logo class={@pic_class} name={@option.icon} />
-      {#match "flag"}
-        <span class={"flag-icon #{@option.icon} flag-icon-squared rounded-md #{@pic_class}"} />
-      {#match _}
-    {/case}
-    """
-  end
-end
-
 defmodule Moon.Components.Select.SingleSelect.Value.SelectedValue do
   @moduledoc false
 
   use Moon.StatelessComponent
 
   alias Phoenix.LiveView.JS
-  alias Moon.Components.Select.SingleSelect.LabelPic
+  alias Moon.Components.Select.Icon
 
   prop select_id, :string
   prop option, :any
   prop prompt, :string
   prop mode, :string
-  prop pic_class, :string
+  prop icon_class, :string
   prop prompt_text_size_class, :string
   prop prompt_text_color_class, :string
   prop label_text_size_class, :string
@@ -49,7 +22,7 @@ defmodule Moon.Components.Select.SingleSelect.Value.SelectedValue do
       <div>
         {#if @mode}
           <div class="relative top-2 flex items-center">
-            <LabelPic {=@option} {=@mode} {=@pic_class} />
+            <Icon {=@option} {=@mode} {=@icon_class} />
           </div>
         {/if}
         <div class={@prompt_text_size_class, @prompt_text_color_class, "relative left-6 bottom-4": not is_nil(@mode)}>
@@ -83,7 +56,7 @@ defmodule Moon.Components.Select.SingleSelect.Value do
   prop value, :any
   prop prompt, :string
   prop mode, :string
-  prop pic_class, :string
+  prop icon_class, :string
   prop prompt_text_size_class, :string
   prop prompt_text_color_class, :string
   prop label_text_size_class, :string
@@ -97,7 +70,7 @@ defmodule Moon.Components.Select.SingleSelect.Value do
           {=@select_id}
           option={get_option(@options, @value)}
           {=@mode}
-          {=@pic_class}
+          {=@icon_class}
           {=@prompt}
           {=@prompt_text_size_class}
           {=@prompt_text_color_class}
@@ -130,8 +103,6 @@ defmodule Moon.Components.Select.SingleSelect do
   alias Moon.Components.Popover
   alias Moon.Components.Select.Dropdown
   alias Moon.Components.Select.Helpers, as: SelectHelpers
-  alias Moon.Components.ListItems.SingleLineItem
-  alias __MODULE__.LabelPic
   alias __MODULE__.Value
   alias Surface.Components.Form.Input.InputContext
 
@@ -146,7 +117,7 @@ defmodule Moon.Components.Select.SingleSelect do
   prop class, :string
   prop popover_placement, :string, default: "bottom-start"
   prop mode, :string, values: ~w(icon logo flag)
-  prop pic_class, :string
+  prop icon_class, :string
   prop prompt_text_size_class, :string, default: "text-xs"
   prop prompt_text_color_class, :string, default: "text-trunks-100"
   prop label_text_size_class, :string, default: "text-sm"
@@ -173,7 +144,7 @@ defmodule Moon.Components.Select.SingleSelect do
                 {=@options}
                 value={SelectHelpers.get_normalized_value(form, field, false, value: @value)}
                 {=@mode}
-                {=@pic_class}
+                {=@icon_class}
                 {=@prompt}
                 {=@prompt_text_size_class}
                 {=@prompt_text_color_class}
@@ -192,18 +163,14 @@ defmodule Moon.Components.Select.SingleSelect do
               class="overflow-y-scroll rounded box-border border border-solid border-beerus-100"
               style="min-height: 20px; max-height: 200px"
             >
-              <Dropdown class="w-auto" id={"#{@id}-dropdown"} select_id={@id} {=@options}>
-                {#for option <- @options}
-                  <Dropdown.Option value={option.value} :let={is_selected: is_selected}>
-                    <SingleLineItem current={is_selected}>
-                      {#if @mode}
-                        <LabelPic {=option} {=@mode} {=@pic_class} />
-                      {/if}
-                      {option.label}
-                    </SingleLineItem>
-                  </Dropdown.Option>
-                {/for}
-              </Dropdown>
+              <Dropdown
+                class="w-auto"
+                id={"#{@id}-dropdown"}
+                select_id={@id}
+                {=@options}
+                {=@mode}
+                {=@icon_class}
+              />
             </div>
           </TopToDown>
         </:content>