@homefile/components-v2 2.24.7 → 2.24.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/hooks/forms/useDynamicForm.js +39 -42
  2. package/package.json +1 -1
  3. package/src/hooks/forms/useDynamicForm.ts +52 -63
package/dist/hooks/forms/useDynamicForm.js CHANGED
@@ -3,59 +3,56 @@ import { useForm } from 'react-hook-form';
3
3
  import { dynamicFormProxy } from '../../proxies';
4
4
  export const useDynamicForm = ({ fields, onUpload }) => {
5
5
  const [stateFields, setStateFields] = useState(fields);
6
- const visibleFields = stateFields.filter((field) => field.visible || field.visible === undefined);
7
- const hiddenFields = stateFields.filter((field) => field.visible === false);
8
6
  const form = useForm();
9
- const { watch, setValue } = form;
7
+ const { watch, setValue, reset } = form;
8
+ useEffect(() => {
9
+ const setDefaults = (fields) => {
10
+ fields.forEach((field) => {
11
+ setValue(field.id, field.value);
12
+ if (field.children)
13
+ setDefaults(field.children);
14
+ });
15
+ };
16
+ setDefaults(fields);
17
+ setStateFields(fields);
18
+ dynamicFormProxy.setFields(fields);
19
+ }, [fields, setValue]);
20
+ useEffect(() => {
21
+ const subscription = watch((fieldValues) => {
22
+ const updateFields = (fields) => fields.map((field) => (Object.assign(Object.assign({}, field), { value: field.type === 'currency'
23
+ ? parseCurrencyValue(fieldValues[field.id])
24
+ : fieldValues[field.id], children: field.children ? updateFields(field.children) : undefined })));
25
+ const updatedFields = updateFields(stateFields);
26
+ dynamicFormProxy.setFields(updatedFields);
27
+ });
28
+ return () => subscription.unsubscribe();
29
+ }, [stateFields, watch]);
30
+ useEffect(() => {
31
+ return () => {
32
+ dynamicFormProxy.setFields([]);
33
+ reset();
34
+ };
35
+ }, [reset]);
36
+ const visibleFields = stateFields.filter((field) => field.visible !== false);
37
+ const hiddenFields = stateFields.filter((field) => field.visible === false);
10
38
  const handleAddAll = () => {
11
- const newFields = stateFields.map((field) => (Object.assign(Object.assign({}, field), { visible: true })));
12
- setStateFields(newFields);
39
+ setStateFields(stateFields.map((field) => (Object.assign(Object.assign({}, field), { visible: true }))));
13
40
  };
14
41
  const handleAdd = (id) => {
15
- const newFields = stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: true }) : field);
16
- setStateFields(newFields);
42
+ setStateFields(stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: true }) : field));
17
43
  };
18
44
  const handleRemove = (id) => {
19
- const newFields = stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: false }) : field);
20
- setStateFields(newFields);
45
+ setStateFields(stateFields.map((field) => field.id === id ? Object.assign(Object.assign({}, field), { visible: false }) : field));
46
+ };
47
+ const handleFilesUpload = ({ id, files }) => {
48
+ onUpload === null || onUpload === void 0 ? void 0 : onUpload({ [id]: files });
21
49
  };
22
- const parseCurrenyValue = (value) => {
50
+ function parseCurrencyValue(value) {
23
51
  if (typeof value === 'number')
24
52
  return value;
25
53
  const justNumbers = value === null || value === void 0 ? void 0 : value.replace(/[^0-9.]/g, '');
26
54
  return parseFloat(justNumbers);
27
- };
28
- const handleUpdateFields = (field, fieldValues) => {
29
- var _a;
30
- const value = fieldValues[field.id];
31
- const isCurrency = field.type === 'currency';
32
- const parsedValue = isCurrency ? parseCurrenyValue(value) : value;
33
- return Object.assign(Object.assign({}, field), { value: parsedValue, children: (_a = field === null || field === void 0 ? void 0 : field.children) === null || _a === void 0 ? void 0 : _a.map((child) => handleUpdateFields(child, fieldValues)) });
34
- };
35
- const fieldValues = watch();
36
- const updatedFields = stateFields.map((field) => {
37
- return handleUpdateFields(field, fieldValues);
38
- });
39
- const handleFilesUpload = ({ id, files }) => {
40
- const filesByField = {
41
- [id]: files,
42
- };
43
- onUpload === null || onUpload === void 0 ? void 0 : onUpload(filesByField);
44
- };
45
- dynamicFormProxy.setFields(updatedFields);
46
- const handleSetDefaultValues = (fields) => {
47
- fields.forEach((field) => {
48
- setValue(field.id, field.value);
49
- handleSetDefaultValues(field.children || []);
50
- });
51
- };
52
- useEffect(() => {
53
- handleSetDefaultValues(fields);
54
- setStateFields(fields);
55
- return () => {
56
- dynamicFormProxy.setFields([]);
57
- };
58
- }, [fields]);
55
+ }
59
56
  return {
60
57
  form,
61
58
  visibleFields,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.24.7",
3
+ "version": "2.24.9",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/hooks/forms/useDynamicForm.ts CHANGED
@@ -15,89 +15,78 @@ interface UseDynamicFormI {
15
15
 
16
16
  export const useDynamicForm = ({ fields, onUpload }: UseDynamicFormI) => {
17
17
  const [stateFields, setStateFields] = useState(fields)
18
- const visibleFields = stateFields.filter(
19
- (field) => field.visible || field.visible === undefined
20
- )
18
+ const form = useForm()
19
+ const { watch, setValue, reset } = form
21
20
 
22
- const hiddenFields = stateFields.filter((field) => field.visible === false)
21
+ useEffect(() => {
22
+ const setDefaults = (fields: ReportI[]) => {
23
+ fields.forEach((field) => {
24
+ setValue(field.id, field.value)
25
+ if (field.children) setDefaults(field.children)
26
+ })
27
+ }
28
+ setDefaults(fields)
29
+ setStateFields(fields)
30
+ dynamicFormProxy.setFields(fields)
31
+ }, [fields, setValue])
23
32
 
24
- const form = useForm()
33
+ useEffect(() => {
34
+ const subscription = watch((fieldValues: FieldValues) => {
35
+ const updateFields = (fields: ReportI[]): ReportI[] =>
36
+ fields.map((field) => ({
37
+ ...field,
38
+ value:
39
+ field.type === 'currency'
40
+ ? parseCurrencyValue(fieldValues[field.id])
41
+ : fieldValues[field.id],
42
+ children: field.children ? updateFields(field.children) : undefined,
43
+ }))
44
+ const updatedFields = updateFields(stateFields)
45
+ dynamicFormProxy.setFields(updatedFields)
46
+ })
47
+ return () => subscription.unsubscribe()
48
+ }, [stateFields, watch])
25
49
 
26
- const { watch, setValue } = form
50
+ useEffect(() => {
51
+ return () => {
52
+ dynamicFormProxy.setFields([])
53
+ reset()
54
+ }
55
+ }, [reset])
56
+
57
+ const visibleFields = stateFields.filter((field) => field.visible !== false)
58
+ const hiddenFields = stateFields.filter((field) => field.visible === false)
27
59
 
28
60
  const handleAddAll = () => {
29
- const newFields = stateFields.map((field) => ({ ...field, visible: true }))
30
- setStateFields(newFields)
61
+ setStateFields(stateFields.map((field) => ({ ...field, visible: true })))
31
62
  }
32
63
 
33
64
  const handleAdd = (id: string) => {
34
- const newFields = stateFields.map((field) =>
35
- field.id === id ? { ...field, visible: true } : field
65
+ setStateFields(
66
+ stateFields.map((field) =>
67
+ field.id === id ? { ...field, visible: true } : field
68
+ )
36
69
  )
37
- setStateFields(newFields)
38
70
  }
39
71
 
40
72
  const handleRemove = (id: string) => {
41
- const newFields = stateFields.map((field) =>
42
- field.id === id ? { ...field, visible: false } : field
73
+ setStateFields(
74
+ stateFields.map((field) =>
75
+ field.id === id ? { ...field, visible: false } : field
76
+ )
43
77
  )
44
- setStateFields(newFields)
45
- }
46
-
47
- const parseCurrenyValue = (value: string | number): number => {
48
- if (typeof value === 'number') return value
49
- const justNumbers = value?.replace(/[^0-9.]/g, '')
50
- return parseFloat(justNumbers)
51
78
  }
52
79
 
53
- const handleUpdateFields = (
54
- field: ReportI,
55
- fieldValues: FieldValues
56
- ): ReportI => {
57
- const value = fieldValues[field.id]
58
- const isCurrency = field.type === 'currency'
59
- const parsedValue = isCurrency ? parseCurrenyValue(value) : value
60
-
61
- return {
62
- ...field,
63
- value: parsedValue,
64
- children: field?.children?.map((child) =>
65
- handleUpdateFields(child, fieldValues)
66
- ),
67
- }
68
- }
69
-
70
- const fieldValues = watch()
71
-
72
- const updatedFields = stateFields.map((field) => {
73
- return handleUpdateFields(field, fieldValues)
74
- })
75
-
76
80
  const handleFilesUpload = ({ id, files }: FilesUploadI) => {
77
- const filesByField = {
78
- [id]: files,
79
- }
80
- onUpload?.(filesByField)
81
+ onUpload?.({ [id]: files })
81
82
  }
82
83
 
83
- dynamicFormProxy.setFields(updatedFields)
84
-
85
- const handleSetDefaultValues = (fields: ReportI[]) => {
86
- fields.forEach((field) => {
87
- setValue(field.id, field.value)
88
- handleSetDefaultValues(field.children || [])
89
- })
84
+ function parseCurrencyValue(value: string | number): number {
85
+ if (typeof value === 'number') return value
86
+ const justNumbers = value?.replace(/[^0-9.]/g, '')
87
+ return parseFloat(justNumbers)
90
88
  }
91
89
 
92
- useEffect(() => {
93
- handleSetDefaultValues(fields)
94
- setStateFields(fields)
95
-
96
- return () => {
97
- dynamicFormProxy.setFields([])
98
- }
99
- }, [fields])
100
-
101
90
  return {
102
91
  form,
103
92
  visibleFields,