fixing controlled states for custom made fields 4h

Author: cblanquera

packages/frui-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frui-core",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "license": "MIT",
   "description": "Core library of FRUI",
   "author": "Chris <chris@incept.asia>",

packages/frui-core/src/hooks/useCountry.ts

@@ -4,7 +4,7 @@ import type { CountryOption, CountryConfig } from '../types/fields';
 import countries from '../data/countries.json';
 
 export default function useSelectCountry(config: CountryConfig) {
-  const { value, map } = config;
+  const { value, defaultValue, map } = config;
   //generate options
   const options = countries
     .filter(country => country.currencyType === 'fiat')
@@ -15,7 +15,12 @@ export default function useSelectCountry(config: CountryConfig) {
         option => option.value?.countryCode === value
       )[0] as CountryOption
     : undefined;
-
-  return { selected, options };
 
+  const selectedDefault = typeof defaultValue === 'string' 
+    ? options.filter(
+        option => option.value?.countryCode === defaultValue
+      )[0] as CountryOption
+    : undefined;
+
+  return { selected, selectedDefault, options };
 };

packages/frui-core/src/hooks/useCurrency.ts

@@ -4,7 +4,7 @@ import type { CurrencyOption, CurrencyConfig } from '../types/fields';
 import countries from '../data/countries.json';
 
 export default function useSelectCurrency(config: CurrencyConfig) {
-  const { value, map } = config;
+  const { value, defaultValue, map } = config;
   //generate options
   const options = countries
     .filter(country => country.currencyType === 'fiat')
@@ -17,5 +17,11 @@ export default function useSelectCurrency(config: CurrencyConfig) {
       )[0] as CurrencyOption
     : undefined;
 
-  return { selected, options };
+  const selectedDefault = typeof defaultValue === 'string' 
+    ? options.filter(
+        option => option.value?.currencyCode === defaultValue
+      )[0] as CurrencyOption
+    : undefined;
+
+  return { selected, selectedDefault, options };
 };

packages/frui-core/src/hooks/useFieldset.ts

@@ -1,20 +1,21 @@
 import type { FieldsetConfig } from '../types/components';
 //hooks
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function useFieldset<ValueType = any>(
   config: FieldsetConfig<ValueType>
 ) {
   //extract props
   const { 
     value, 
+    defaultValue,
     emptyValue, 
     onChange, 
     onUpdate
   } = config;
 
   //make sure we have an array
-  const safeValues: (ValueType|undefined)[] = Array.isArray(value) ? value : [];
+  const safeValues: (ValueType|undefined)[] = Array.isArray(defaultValue) ? [ ...defaultValue ] : [];
   //hooks
   const [ values, setValues ] = useState(safeValues);
   //handlers
@@ -35,7 +36,13 @@ export default function useFieldset<ValueType = any>(
       }
     },
     add: () => handlers.set(values.concat([emptyValue]))
-  }
-
+  };
+  //for controlled states we should update 
+  //the values when the value prop changes
+  useEffect(() => {
+    if (!Array.isArray(value)) return;
+    handlers.set([ ...value ]);
+  }, [ value ]);
+  
   return { values, handlers };
 }

packages/frui-core/src/hooks/useNumber.ts

@@ -148,6 +148,7 @@ function getFormatsFromInput(
 export default function useNumber(config: NumberProps) {
   //expand props
   const {
+    value,
     defaultValue,
     min,
     max,      
@@ -219,6 +220,14 @@ export default function useNumber(config: NumberProps) {
       input.selectionEnd = cursor;
     } 
   }, [ cursor ]);
+  //for controlled states we should update 
+  //the values when the value prop changes
+  useEffect(() => {
+    if (value === undefined) return;
+    const newValue = getFormats(String(value || ''), options);
+    setHiddenValue(newValue.value);
+    setDisplayValue(newValue.display);
+  }, [ value ]);
 
   return { displayValue, handlers };
 }

packages/frui-core/src/hooks/useSelect.ts

@@ -2,11 +2,12 @@
 import type { KeyboardEvent } from 'react';
 import type { SelectOption, SelectConfig } from '../types/fields';
 //hooks
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function useSelect(config: SelectConfig) {
   const { 
     value,
+    defaultValue,
     onDropdown,
     onSelected,
     onUpdate
@@ -15,7 +16,7 @@ export default function useSelect(config: SelectConfig) {
   //search query string
   const [ query, setQuery ] = useState('');
   //selected option
-  const [ selected, setSelected ] = useState(value);
+  const [ selected, setSelected ] = useState(defaultValue);
   //whether to show dropdown
   const [ showing, show ] = useState(false);
   //handlers
@@ -65,6 +66,13 @@ export default function useSelect(config: SelectConfig) {
     }
   };
 
+  //for controlled states we should update 
+  //the values when the value prop changes
+  useEffect(() => {
+    if (!value) return;
+    setSelected(value)
+  }, [ value ]);
+
   return { selected, showing, handlers };
 
 };

packages/frui-core/src/types/components.ts

@@ -80,6 +80,7 @@ export type ControlProps = {
 // Fieldset component
 export type FieldsetConfig<ValueType = any> = {
   value?: ValueType[],
+  defaultValue?: ValueType[],
   emptyValue?: ValueType,
   onChange?: (values: ValueType[]) => void,
   onUpdate?: (values: ValueType[]) => void
@@ -90,6 +91,7 @@ export type FieldsetProps<ValueType = any> = ExtendsType<ButtonProps, {
   add?: string,
   data?: Record<string, any>,
   value?: ValueType[],
+  defaultValue?: ValueType[],
   emptyValue?: ValueType,
   error?: boolean,
   errorColor?: string,

packages/frui-core/src/types/fields.ts

@@ -72,7 +72,8 @@ export type CountryData = {
 };
 export type CountryOption = SelectOption<CountryData>;
 export type CountryConfig = {
-  value: string | CountryOption | undefined,
+  value?: string | CountryOption | undefined,
+  defaultValue?: string | CountryOption | undefined,
   map: (country: CountryData) => CountryOption
 };
 export type CountryProps = ExtendsType<SelectProps, {
@@ -85,7 +86,8 @@ export type CurrencyOption = SelectOption<CountryData>;
 export type CurrencyConfig = CountryConfig;
 export type CurrencyProps = ExtendsType<SelectProps, {
   options?: undefined,
-  value?: CurrencyOption|string
+  value?: CurrencyOption|string,
+  defaultValue?: CurrencyOption|string
 }>;
 
 // date component
@@ -240,6 +242,7 @@ export type SelectOption<T = any> = {
 };
 export type SelectConfig = {
   value?: SelectOption,
+  defaultValue?: SelectOption,
   onDropdown?: (show: boolean) => void,
   onSelected?: (value: SelectOption) => void,
   onUpdate?: (value: string|number) => void
@@ -257,6 +260,7 @@ export type SelectDropdownProps = {
 };
 export type SelectProps = {
   value?: SelectOption,
+  defaultValue?: SelectOption,
   options: SelectOption[]|Record<string, string>,
   searchable?: boolean,
   placeholder?: string,

packages/frui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frui-react",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "license": "MIT",
   "description": "A collection of vanilla react components written in typescript.",
   "author": "Chris <chris@incept.asia>",
@@ -19,7 +19,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "frui-core": "0.0.24",
+    "frui-core": "0.0.25",
     "inputmask": "5.0.8",
     "markdown-to-jsx": "7.2.0",
     "moment": "2.29.4"

packages/frui-react/src/Fieldset.tsx

@@ -21,6 +21,7 @@ export default function make<ValueType = any>(
       add,
       data,
       value, 
+      defaultValue,
       emptyValue, 
       error,
       errorColor = '#DC3545',
@@ -33,6 +34,7 @@ export default function make<ValueType = any>(
 
     const { values, handlers } = useFieldset({
       value, 
+      defaultValue,
       emptyValue, 
       onChange, 
       onUpdate