Refactor number input to currency input

Author: Flo0807

assets/js/hooks/_masked_number_input.js renamed to assets/js/hooks/_currency_input.js

@@ -36,15 +36,14 @@ export default {
   },
   handleMaskChange () {
     this.hiddenInput.value = this.rawValue(this.mask.value)
-    this.hiddenInput.dispatchEvent(new Event('input', { bubbles: true }))
+  },
+  destroyed () {
+    this.mask.destroy()
   },
   rawValue (value) {
     return value
       .replace(this.el.dataset.unit || '', '')
       .trim()
       .replace(new RegExp(`\\${this.el.dataset.thousandsSeparator}`, 'g'), '')
-  },
-  destroyed () {
-    this.mask.destroy()
   }
 }

assets/js/hooks/index.js

@@ -4,4 +4,4 @@ export { default as BackpexSidebarSections } from './_sidebar_sections'
 export { default as BackpexStickyActions } from './_sticky_actions'
 export { default as BackpexThemeSelector } from './_theme_selector'
 export { default as BackpexTooltip } from './_tooltip'
-export { default as BackpexMaskedNumberInput } from './_masked_number_input'
+export { default as BackpexCurrencyInput } from './_currency_input'

lib/backpex/fields/currency.ex

@@ -84,24 +84,23 @@ defmodule Backpex.Fields.Currency do
 
   @impl Backpex.Field
   def render_form(assigns) do
-    assigns = assign(assigns, :mask_pattern, build_mask_pattern(assigns.field_options))
-
     ~H"""
     <div>
       <Layout.field_container>
         <:label align={Backpex.Field.align_label(@field_options, assigns)}>
           <Layout.input_label text={@field_options[:label]} />
         </:label>
-        <BackpexForm.masked_number_input
+        <BackpexForm.currency_input
           type="text"
           field={@form[@name]}
           translate_error_fun={Backpex.Field.translate_error_fun(@field_options, assigns)}
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
           radix={@field_options[:radix]}
-          mask_pattern={@mask_pattern}
           thousands_separator={@field_options[:thousands_separator]}
+          unit={@field_options[:unit]}
+          unit_position={@field_options[:unit_position]}
         />
       </Layout.field_container>
     </div>
@@ -115,7 +114,4 @@ defmodule Backpex.Fields.Currency do
       ilike(fragment("CAST(? AS TEXT)", field(schema_name, ^field_name)), ^search_string)
     )
   end
-
-  defp build_mask_pattern(%{unit_position: :before} = field_option), do: "#{field_option.unit} num"
-  defp build_mask_pattern(%{unit_position: :after} = field_option), do: "num #{field_option.unit}"
 end

lib/backpex/html/form.ex

@@ -172,8 +172,8 @@ defmodule Backpex.HTML.Form do
 
   ## Examples
 
-    <.masked_number_input field={@form[:amount]} unit="€" />
-    <.masked_number_input id="amount-input" name="amount" value="20" unit="€" readonly />
+    <.currency_input field={@form[:amount]} unit="€" unit_position={:after} />
+    <.currency_input id="amount-input" name="amount" value="20" unit="$" unit_position={:before} readonly />
   """
   attr :id, :any, default: nil
   attr :name, :any
@@ -197,33 +197,37 @@ defmodule Backpex.HTML.Form do
   attr :translate_error_fun, :any, default: &Function.identity/1, doc: "a custom function to map form errors"
   attr :hide_errors, :boolean, default: false, doc: "if errors should be hidden"
 
+  attr :unit, :string, required: true
+  attr :unit_position, :atom, required: true, values: ~w(before after)a
   attr :radix, :string, default: "."
   attr :thousands_separator, :string, default: ","
-  attr :mask_pattern, :string, default: "num"
 
   attr :rest, :global, include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
               multiple pattern placeholder readonly required rows size step)
 
-  def masked_number_input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+  def currency_input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
 
     assigns
     |> assign(field: nil, id: assigns.id || field.id)
     |> assign(:errors, translate_form_errors(errors, assigns.translate_error_fun))
     |> assign_new(:name, fn -> field.name end)
     |> assign_new(:value, fn -> field.value end)
-    |> masked_number_input()
+    |> currency_input()
   end
 
-  def masked_number_input(assigns) do
+  def currency_input(assigns) do
+    assigns = assign(assigns, :mask_pattern, build_mask_pattern(assigns.unit_position, assigns.unit))
+
     ~H"""
     <div class={["fieldset py-0", @class]}>
       <span :if={@label} class="label mb-1">{@label}</span>
       <div
         id={@id}
-        phx-hook="BackpexMaskedNumberInput"
+        phx-hook="BackpexCurrencyInput"
         data-radix={@radix}
         data-thousands-separator={@thousands_separator}
+        data-unit={@unit}
         data-mask-pattern={@mask_pattern}
       >
         <%!-- As the input ignores updates, we need to wrap it in a span to apply the styles correctly --%>
@@ -241,6 +245,9 @@ defmodule Backpex.HTML.Form do
     """
   end
 
+  defp build_mask_pattern(:before = _unit_position, unit), do: "#{unit} num"
+  defp build_mask_pattern(:after = _unit_position, unit), do: "num #{unit}"
+
   @doc """
   Generates a generic error message.
   """