@nolwenture/formik-jsonschema-form 1.0.0-beta.56 → 1.0.0-beta.58

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/cjs/Form/fields/FilesUploadField/FilesUploadField.js +22 -14
  2. package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js +22 -14
  3. package/package.json +1 -1
package/dist/cjs/Form/fields/FilesUploadField/FilesUploadField.js CHANGED
@@ -14,19 +14,21 @@ const FilesUploadField = (props) => {
14
14
  const { name, uiSchema } = props;
15
15
  const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
16
16
  const { setFieldValue, values } = (0, formik_1.useFormikContext)();
17
- const value = (0, formik_1.getIn)(values, name);
17
+ const value = (0, formik_1.getIn)(values, name) ?? [];
18
18
  const { uploadFiles, removeFile } = (0, react_1.useContext)(FilesUploadContext_1.FilesUploadContext);
19
19
  const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
20
20
  const [uploadProgress, setUploadProgress] = (0, react_1.useState)({});
21
21
  (0, react_1.useEffect)(() => {
22
- setUploadedFiles(value.map(f => ({
23
- name: f.name,
24
- id: f.id,
25
- progressId: f.id,
26
- mimeType: f.mimeType,
27
- size: f.size
28
- })));
29
- value.forEach(f => setUploadProgress((prev) => ({ ...prev, [f.id]: 100 })));
22
+ if (Array.isArray(value)) {
23
+ setUploadedFiles(() => value.map((f) => ({
24
+ name: f.name,
25
+ id: f.id,
26
+ progressId: f.id,
27
+ mimeType: f.mimeType,
28
+ size: f.size,
29
+ })));
30
+ value.forEach((f) => setUploadProgress((prev) => ({ ...prev, [f.id]: 100 })));
31
+ }
30
32
  }, []);
31
33
  const handleFileUpload = async (files, setFieldValue) => {
32
34
  const filesWithIds = [];
@@ -34,7 +36,13 @@ const FilesUploadField = (props) => {
34
36
  for (const file of files) {
35
37
  const progressId = file.name + file.size + file.lastModified + Math.random();
36
38
  filesWithIds.push({ data: file, progressId });
37
- newFiles.push({ name: file.name, size: file.size, progressId, mimeType: file.type, id: null });
39
+ newFiles.push({
40
+ name: file.name,
41
+ size: file.size,
42
+ progressId,
43
+ mimeType: file.type,
44
+ id: null,
45
+ });
38
46
  }
39
47
  setUploadedFiles((f) => f.concat(newFiles));
40
48
  try {
@@ -51,8 +59,8 @@ const FilesUploadField = (props) => {
51
59
  // remove progressId values for adding to form data
52
60
  const newFormValues = result.map(({ progressId, ...rest }) => rest);
53
61
  // update ids for uploaded files
54
- setUploadedFiles(prev => prev.map(item => {
55
- const match = result.find(f => f.progressId === item.progressId);
62
+ setUploadedFiles((prev) => prev.map((item) => {
63
+ const match = result.find((f) => f.progressId === item.progressId);
56
64
  return match ? { ...item, id: match.id } : item;
57
65
  }));
58
66
  const newValue = (Array.isArray(value) ? value : []).concat(newFormValues);
@@ -69,8 +77,8 @@ const FilesUploadField = (props) => {
69
77
  const { [file.progressId]: _, ...rest } = prev;
70
78
  return rest;
71
79
  });
72
- setUploadedFiles((prev) => prev.filter(f => f.id !== file.id));
73
- setFieldValue(name, (prev) => (prev || []).filter((f) => f.id !== file.id));
80
+ setUploadedFiles((prev) => prev.filter((f) => f.id !== file.id));
81
+ setFieldValue(name, (value || []).filter((f) => f.id !== file.id));
74
82
  }
75
83
  };
76
84
  const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js CHANGED
@@ -11,19 +11,21 @@ export const FilesUploadField = (props) => {
11
11
  const { name, uiSchema } = props;
12
12
  const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
13
13
  const { setFieldValue, values } = useFormikContext();
14
- const value = getIn(values, name);
14
+ const value = getIn(values, name) ?? [];
15
15
  const { uploadFiles, removeFile } = useContext(FilesUploadContext);
16
16
  const [uploadedFiles, setUploadedFiles] = useState([]);
17
17
  const [uploadProgress, setUploadProgress] = useState({});
18
18
  useEffect(() => {
19
- setUploadedFiles(value.map(f => ({
20
- name: f.name,
21
- id: f.id,
22
- progressId: f.id,
23
- mimeType: f.mimeType,
24
- size: f.size
25
- })));
26
- value.forEach(f => setUploadProgress((prev) => ({ ...prev, [f.id]: 100 })));
19
+ if (Array.isArray(value)) {
20
+ setUploadedFiles(() => value.map((f) => ({
21
+ name: f.name,
22
+ id: f.id,
23
+ progressId: f.id,
24
+ mimeType: f.mimeType,
25
+ size: f.size,
26
+ })));
27
+ value.forEach((f) => setUploadProgress((prev) => ({ ...prev, [f.id]: 100 })));
28
+ }
27
29
  }, []);
28
30
  const handleFileUpload = async (files, setFieldValue) => {
29
31
  const filesWithIds = [];
@@ -31,7 +33,13 @@ export const FilesUploadField = (props) => {
31
33
  for (const file of files) {
32
34
  const progressId = file.name + file.size + file.lastModified + Math.random();
33
35
  filesWithIds.push({ data: file, progressId });
34
- newFiles.push({ name: file.name, size: file.size, progressId, mimeType: file.type, id: null });
36
+ newFiles.push({
37
+ name: file.name,
38
+ size: file.size,
39
+ progressId,
40
+ mimeType: file.type,
41
+ id: null,
42
+ });
35
43
  }
36
44
  setUploadedFiles((f) => f.concat(newFiles));
37
45
  try {
@@ -48,8 +56,8 @@ export const FilesUploadField = (props) => {
48
56
  // remove progressId values for adding to form data
49
57
  const newFormValues = result.map(({ progressId, ...rest }) => rest);
50
58
  // update ids for uploaded files
51
- setUploadedFiles(prev => prev.map(item => {
52
- const match = result.find(f => f.progressId === item.progressId);
59
+ setUploadedFiles((prev) => prev.map((item) => {
60
+ const match = result.find((f) => f.progressId === item.progressId);
53
61
  return match ? { ...item, id: match.id } : item;
54
62
  }));
55
63
  const newValue = (Array.isArray(value) ? value : []).concat(newFormValues);
@@ -66,8 +74,8 @@ export const FilesUploadField = (props) => {
66
74
  const { [file.progressId]: _, ...rest } = prev;
67
75
  return rest;
68
76
  });
69
- setUploadedFiles((prev) => prev.filter(f => f.id !== file.id));
70
- setFieldValue(name, (prev) => (prev || []).filter((f) => f.id !== file.id));
77
+ setUploadedFiles((prev) => prev.filter((f) => f.id !== file.id));
78
+ setFieldValue(name, (value || []).filter((f) => f.id !== file.id));
71
79
  }
72
80
  };
73
81
  const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.0.0-beta.56",
3
+ "version": "1.0.0-beta.58",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [