make DateField format and mask reactive to locale changes (#206)

* make DateField format and mask reactive to locale changes

* Make Input component reactive to changes in mask

Author: dimfeld

packages/svelte-ux/src/lib/components/DateField.svelte

@@ -13,11 +13,14 @@
   const { format: format_ux } = getSettings();
 
   export let value: Date | null = null;
-  export let format = $format_ux.settings.formats.dates.baseParsing ?? 'MM/dd/yyyy';
-  export let mask = format.toLowerCase();
+  export let format: string | undefined = undefined;
+  export let mask: string | undefined = undefined;
   export let replace = 'dmyh';
   export let picker = false;
 
+  $: actualFormat = format ?? $format_ux.settings.formats.dates.baseParsing ?? 'MM/dd/yyyy';
+  $: actualMask = mask ?? actualFormat.toLowerCase();
+
   // Field props
   export let label = '';
   export let error = '';
@@ -38,7 +41,7 @@
   function onInputChange(e: any) {
     inputValue = e.detail.value;
     const lastValue = value;
-    const parsedValue = parseDate(inputValue ?? '', format, new Date());
+    const parsedValue = parseDate(inputValue ?? '', actualFormat, new Date());
     value = isNaN(parsedValue.valueOf()) ? null : parsedValue;
     if (value != lastValue) {
       dispatch('change', { value });
@@ -65,8 +68,8 @@
   let:id
 >
   <Input
-    value={value ? $format_ux(value, PeriodType.Day, { custom: format }) : inputValue}
-    {mask}
+    value={value ? $format_ux(value, PeriodType.Day, { custom: actualFormat }) : inputValue}
+    mask={actualMask}
     {replace}
     {id}
     on:change={onInputChange}

packages/svelte-ux/src/lib/components/Input.svelte

@@ -24,9 +24,12 @@
   export let mask = '';
   export let replace = '_';
   export let accept: string | RegExp = '\\d';
-  export let placeholder = mask;
+  let placeholderProp: string | undefined = undefined;
+  export { placeholderProp as placeholder };
   export let disabled = false;
 
+  $: placeholder = placeholderProp ?? mask;
+
   const settingsClasses = getComponentClasses('Input');
 
   let isFocused = false;
@@ -61,7 +64,11 @@
 
   function onInput(e: Event & { currentTarget: HTMLInputElement }) {
     const el = e.currentTarget;
+    applyMask(el, mask);
+    dispatch('change', { value });
+  }
 
+  function applyMask(el: HTMLInputElement, mask: string) {
     if (mask) {
       // For selection (including just cursor position), ...
       const [i, j] = [el.selectionStart, el.selectionEnd].map((i) => {
@@ -75,10 +82,10 @@
     } else {
       value = el.value;
     }
-
-    dispatch('change', { value });
   }
 
+  $: if (inputEl) applyMask(inputEl, mask);
+
   onMount(() => {
     // Format on initial to handle partial values as well as different (but compatible) formats (ex. phone numbers)
     if (mask) {