@nolwenture/formik-jsonschema-form 1.0.7 → 1.0.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 (12) hide show
  1. package/dist/cjs/Form/fields/FilesUploadField/FilesUploadField.js +6 -2
  2. package/dist/cjs/Form/fields/FilesUploadField/FilesUploadFieldInput.js +13 -5
  3. package/dist/cjs/Form/fields/FilesUploadField/styledComponents.js +8 -7
  4. package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js +6 -2
  5. package/dist/esm/Form/fields/FilesUploadField/FilesUploadFieldInput.js +13 -5
  6. package/dist/esm/Form/fields/FilesUploadField/styledComponents.js +8 -7
  7. package/dist/types/Form/components/index.d.ts +7 -3
  8. package/dist/types/Form/fields/FilesUploadField/FilesUploadFieldInput.d.ts +2 -1
  9. package/dist/types/Form/fields/FilesUploadField/index.d.ts +7 -3
  10. package/dist/types/Form/fields/FilesUploadField/styledComponents.d.ts +6 -2
  11. package/dist/types/Form/fields/index.d.ts +7 -3
  12. package/package.json +1 -1
package/dist/cjs/Form/fields/FilesUploadField/FilesUploadField.js CHANGED
@@ -11,10 +11,14 @@ const FormRegistry_1 = require("../../FormRegistry");
11
11
  const FilesUploadField = (props) => {
12
12
  const { templates, components: { FilesUploadFieldInput }, formLocalization, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
13
13
  (0, hooks_1.useSetDefault)(props);
14
- const { name, uiSchema } = props;
14
+ const { name, uiSchema, schema } = 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
17
  const value = (0, react_1.useMemo)(() => (0, formik_1.getIn)(values, name) ?? [], [values, name]);
18
+ const readOnly = schema.readOnly ?? false;
19
+ if (readOnly && (!value || value.length === 0)) {
20
+ return null;
21
+ }
18
22
  const { uploadFiles, removeFile } = (0, react_1.useContext)(FilesUploadContext_1.FilesUploadContext);
19
23
  const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
20
24
  const [uploadProgress, setUploadProgress] = (0, react_1.useState)({});
@@ -93,6 +97,6 @@ const FilesUploadField = (props) => {
93
97
  ...(formLocalization?.fields?.FilesUploadField ?? {}),
94
98
  ...(uiSchema["ui:localization"] ?? {}),
95
99
  };
96
- return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FilesUploadFieldInput, { ...inputProps, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
100
+ return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FilesUploadFieldInput, { ...inputProps, readOnly: readOnly, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
97
101
  };
98
102
  exports.FilesUploadField = FilesUploadField;
package/dist/cjs/Form/fields/FilesUploadField/FilesUploadFieldInput.js CHANGED
@@ -62,11 +62,13 @@ const getFileIcon = (mimeType) => {
62
62
  }
63
63
  return (0, jsx_runtime_1.jsx)(fa_1.FaFile, {});
64
64
  };
65
- const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
65
+ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
66
66
  const { components: { Divider, DividerText, DragOverlay, FileInfoText, FileInfoTextMinimized, FileItemContainer, FileSize, FileTypeIcon, FileUploadButton, FileUploadFieldContainer, FileUploadText, HiddenFileInput, InfoText, ProgressBar, ProgressBarContainer, RemoveButton, RemoveButtonIcon, UploadedFileInfoContainer, UploadedFileItemContainer, UploadedFileName, UploadedFileWrapper, UploadIcon, UploadingFileName, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
67
67
  const [isDragging, setIsDragging] = (0, react_1.useState)(false);
68
68
  const dragCounter = (0, react_1.useRef)(0);
69
69
  const handleDragEnter = (e) => {
70
+ if (readOnly)
71
+ return;
70
72
  e.preventDefault();
71
73
  e.stopPropagation();
72
74
  dragCounter.current++;
@@ -75,6 +77,8 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
75
77
  }
76
78
  };
77
79
  const handleDragLeave = (e) => {
80
+ if (readOnly)
81
+ return;
78
82
  e.preventDefault();
79
83
  e.stopPropagation();
80
84
  dragCounter.current--;
@@ -83,10 +87,14 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
83
87
  }
84
88
  };
85
89
  const handleDragOver = (e) => {
90
+ if (readOnly)
91
+ return;
86
92
  e.preventDefault();
87
93
  e.stopPropagation();
88
94
  };
89
95
  const handleDrop = (e) => {
96
+ if (readOnly)
97
+ return;
90
98
  e.preventDefault();
91
99
  e.stopPropagation();
92
100
  setIsDragging(false);
@@ -143,10 +151,10 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
143
151
  e.dataTransfer.clearData();
144
152
  }
145
153
  };
146
- const defaultRenderFile = (file, progress, onDelete) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progress === 100 ? ((0, jsx_runtime_1.jsxs)(UploadedFileItemContainer, { children: [(0, jsx_runtime_1.jsxs)(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && ((0, jsx_runtime_1.jsx)(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), (0, jsx_runtime_1.jsxs)(UploadedFileName, { children: [file.name, !hideFileSize && ((0, jsx_runtime_1.jsx)(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && file.id && ((0, jsx_runtime_1.jsx)(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? (0, jsx_runtime_1.jsx)(RemoveButtonIcon, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(FileItemContainer, { children: [(0, jsx_runtime_1.jsx)(UploadingFileName, { children: file.name }), (0, jsx_runtime_1.jsx)(ProgressBarContainer, { children: (0, jsx_runtime_1.jsx)(ProgressBar, { "$progress": progress }) })] })) }));
154
+ const defaultRenderFile = (file, progress, onDelete) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: progress === 100 ? ((0, jsx_runtime_1.jsxs)(UploadedFileItemContainer, { "$readOnly": readOnly, children: [(0, jsx_runtime_1.jsxs)(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && ((0, jsx_runtime_1.jsx)(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), (0, jsx_runtime_1.jsxs)(UploadedFileName, { children: [file.name, !hideFileSize && ((0, jsx_runtime_1.jsx)(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && !readOnly && file.id && ((0, jsx_runtime_1.jsx)(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? (0, jsx_runtime_1.jsx)(RemoveButtonIcon, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(FileItemContainer, { children: [(0, jsx_runtime_1.jsx)(UploadingFileName, { children: file.name }), (0, jsx_runtime_1.jsx)(ProgressBarContainer, { children: (0, jsx_runtime_1.jsx)(ProgressBar, { "$progress": progress }) })] })) }));
147
155
  const uploadedFile = renderFile ?? defaultRenderFile;
148
156
  const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
149
- const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0;
157
+ const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0 || readOnly;
150
158
  const acceptedFiletypesValue = react_1.default.useMemo(() => {
151
159
  if (!acceptedFiletypes)
152
160
  return undefined;
@@ -154,8 +162,8 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
154
162
  ? acceptedFiletypes.join(',')
155
163
  : acceptedFiletypes;
156
164
  }, [acceptedFiletypes]);
157
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(FileUploadFieldContainer, { className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && ((0, jsx_runtime_1.jsx)(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
158
- uploadedFiles.map((file) => ((0, jsx_runtime_1.jsx)(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideUploadIcon && (0, jsx_runtime_1.jsx)(UploadIcon, {}), infoText && ((0, jsx_runtime_1.jsx)(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), (0, jsx_runtime_1.jsx)(Divider, { children: (0, jsx_runtime_1.jsx)(DividerText, { children: orText ?? "or" }) }), (0, jsx_runtime_1.jsx)(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && (0, jsx_runtime_1.jsx)(FileInfoText, { children: fileInfoText })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [infoText && !hideUpload && ((0, jsx_runtime_1.jsxs)(InfoText, { children: [`${infoText} ${orText ?? "or"} `, (0, jsx_runtime_1.jsx)(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && ((0, jsx_runtime_1.jsx)(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && ((0, jsx_runtime_1.jsx)(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", onChange: (event) => {
165
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(FileUploadFieldContainer, { "$readOnly": readOnly, className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && ((0, jsx_runtime_1.jsx)(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
166
+ uploadedFiles.map((file) => ((0, jsx_runtime_1.jsx)(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideUploadIcon && (0, jsx_runtime_1.jsx)(UploadIcon, {}), infoText && ((0, jsx_runtime_1.jsx)(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), (0, jsx_runtime_1.jsx)(Divider, { children: (0, jsx_runtime_1.jsx)(DividerText, { children: orText ?? "or" }) }), (0, jsx_runtime_1.jsx)(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", disabled: readOnly, onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && (0, jsx_runtime_1.jsx)(FileInfoText, { children: fileInfoText })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [infoText && !hideUpload && ((0, jsx_runtime_1.jsxs)(InfoText, { children: [`${infoText} ${orText ?? "or"} `, (0, jsx_runtime_1.jsx)(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && ((0, jsx_runtime_1.jsx)(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && ((0, jsx_runtime_1.jsx)(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", disabled: readOnly, onChange: (event) => {
159
167
  const files = event.target.files;
160
168
  if (files) {
161
169
  handleFileUpload(files, setFieldValue);
package/dist/cjs/Form/fields/FilesUploadField/styledComponents.js CHANGED
@@ -10,18 +10,19 @@ const fa_1 = require("react-icons/fa");
10
10
  const component_library_1 = require("@nolwenture/component-library");
11
11
  exports.FileUploadFieldContainer = styled_components_1.default.div `
12
12
  align-items: center;
13
- background-color: ${(props) => props.theme.color.background.input};
14
- border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
13
+ background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
14
+ border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  gap: ${(props) => props.theme.spacing.m};
18
18
  justify-content: center;
19
- padding: ${(props) => props.theme.spacing.xxl};
19
+ padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
20
+ margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
20
21
  position: relative;
21
22
  transition: 0.3s filter ease;
22
23
 
23
24
  &:hover {
24
- filter: brightness(110%);
25
+ filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
25
26
  }
26
27
  `;
27
28
  exports.HiddenFileInput = styled_components_1.default.input `
@@ -98,15 +99,15 @@ exports.FileItemContainer = styled_components_1.default.div `
98
99
  `;
99
100
  exports.UploadedFileItemContainer = styled_components_1.default.div `
100
101
  align-items: center;
101
- background-color: ${(props) => props.theme.color.background.default};
102
- border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
102
+ background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
103
+ border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
103
104
  display: flex;
104
105
  flex-direction: row;
105
106
  font-family: ${(props) => props.theme.typography.fontFamily.base};
106
107
  gap: ${(props) => props.theme.spacing.m};
107
108
  justify-content: space-between;
108
109
  margin: 0;
109
- padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
110
+ padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
110
111
  width: 100%;
111
112
  `;
112
113
  exports.UploadedFileInfoContainer = styled_components_1.default.div `
package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js CHANGED
@@ -8,10 +8,14 @@ import { FormRegistry } from "../../FormRegistry";
8
8
  export const FilesUploadField = (props) => {
9
9
  const { templates, components: { FilesUploadFieldInput }, formLocalization, } = useContext(FormRegistry);
10
10
  useSetDefault(props);
11
- const { name, uiSchema } = props;
11
+ const { name, uiSchema, schema } = props;
12
12
  const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
13
13
  const { setFieldValue, values } = useFormikContext();
14
14
  const value = useMemo(() => getIn(values, name) ?? [], [values, name]);
15
+ const readOnly = schema.readOnly ?? false;
16
+ if (readOnly && (!value || value.length === 0)) {
17
+ return null;
18
+ }
15
19
  const { uploadFiles, removeFile } = useContext(FilesUploadContext);
16
20
  const [uploadedFiles, setUploadedFiles] = useState([]);
17
21
  const [uploadProgress, setUploadProgress] = useState({});
@@ -90,5 +94,5 @@ export const FilesUploadField = (props) => {
90
94
  ...(formLocalization?.fields?.FilesUploadField ?? {}),
91
95
  ...(uiSchema["ui:localization"] ?? {}),
92
96
  };
93
- return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FilesUploadFieldInput, { ...inputProps, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
97
+ return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FilesUploadFieldInput, { ...inputProps, readOnly: readOnly, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
94
98
  };
package/dist/esm/Form/fields/FilesUploadField/FilesUploadFieldInput.js CHANGED
@@ -26,11 +26,13 @@ const getFileIcon = (mimeType) => {
26
26
  }
27
27
  return _jsx(FaFile, {});
28
28
  };
29
- export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
29
+ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
30
30
  const { components: { Divider, DividerText, DragOverlay, FileInfoText, FileInfoTextMinimized, FileItemContainer, FileSize, FileTypeIcon, FileUploadButton, FileUploadFieldContainer, FileUploadText, HiddenFileInput, InfoText, ProgressBar, ProgressBarContainer, RemoveButton, RemoveButtonIcon, UploadedFileInfoContainer, UploadedFileItemContainer, UploadedFileName, UploadedFileWrapper, UploadIcon, UploadingFileName, }, } = useContext(FormRegistry);
31
31
  const [isDragging, setIsDragging] = useState(false);
32
32
  const dragCounter = useRef(0);
33
33
  const handleDragEnter = (e) => {
34
+ if (readOnly)
35
+ return;
34
36
  e.preventDefault();
35
37
  e.stopPropagation();
36
38
  dragCounter.current++;
@@ -39,6 +41,8 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
39
41
  }
40
42
  };
41
43
  const handleDragLeave = (e) => {
44
+ if (readOnly)
45
+ return;
42
46
  e.preventDefault();
43
47
  e.stopPropagation();
44
48
  dragCounter.current--;
@@ -47,10 +51,14 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
47
51
  }
48
52
  };
49
53
  const handleDragOver = (e) => {
54
+ if (readOnly)
55
+ return;
50
56
  e.preventDefault();
51
57
  e.stopPropagation();
52
58
  };
53
59
  const handleDrop = (e) => {
60
+ if (readOnly)
61
+ return;
54
62
  e.preventDefault();
55
63
  e.stopPropagation();
56
64
  setIsDragging(false);
@@ -107,10 +115,10 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
107
115
  e.dataTransfer.clearData();
108
116
  }
109
117
  };
110
- const defaultRenderFile = (file, progress, onDelete) => (_jsx(_Fragment, { children: progress === 100 ? (_jsxs(UploadedFileItemContainer, { children: [_jsxs(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && (_jsx(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), _jsxs(UploadedFileName, { children: [file.name, !hideFileSize && (_jsx(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && file.id && (_jsx(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? _jsx(RemoveButtonIcon, {}) }))] })) : (_jsxs(FileItemContainer, { children: [_jsx(UploadingFileName, { children: file.name }), _jsx(ProgressBarContainer, { children: _jsx(ProgressBar, { "$progress": progress }) })] })) }));
118
+ const defaultRenderFile = (file, progress, onDelete) => (_jsx(_Fragment, { children: progress === 100 ? (_jsxs(UploadedFileItemContainer, { "$readOnly": readOnly, children: [_jsxs(UploadedFileInfoContainer, { children: [!hideFileTypeIcon && (_jsx(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), _jsxs(UploadedFileName, { children: [file.name, !hideFileSize && (_jsx(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && !readOnly && file.id && (_jsx(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? _jsx(RemoveButtonIcon, {}) }))] })) : (_jsxs(FileItemContainer, { children: [_jsx(UploadingFileName, { children: file.name }), _jsx(ProgressBarContainer, { children: _jsx(ProgressBar, { "$progress": progress }) })] })) }));
111
119
  const uploadedFile = renderFile ?? defaultRenderFile;
112
120
  const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
113
- const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0;
121
+ const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0 || readOnly;
114
122
  const acceptedFiletypesValue = React.useMemo(() => {
115
123
  if (!acceptedFiletypes)
116
124
  return undefined;
@@ -118,8 +126,8 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
118
126
  ? acceptedFiletypes.join(',')
119
127
  : acceptedFiletypes;
120
128
  }, [acceptedFiletypes]);
121
- return (_jsx(_Fragment, { children: _jsxs(FileUploadFieldContainer, { className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && (_jsx(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
122
- uploadedFiles.map((file) => (_jsx(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? (_jsxs(_Fragment, { children: [!hideUploadIcon && _jsx(UploadIcon, {}), infoText && (_jsx(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), _jsx(Divider, { children: _jsx(DividerText, { children: orText ?? "or" }) }), _jsx(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && _jsx(FileInfoText, { children: fileInfoText })] })) : (_jsxs(_Fragment, { children: [infoText && !hideUpload && (_jsxs(InfoText, { children: [`${infoText} ${orText ?? "or"} `, _jsx(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && (_jsx(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && (_jsx(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", onChange: (event) => {
129
+ return (_jsx(_Fragment, { children: _jsxs(FileUploadFieldContainer, { "$readOnly": readOnly, className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && (_jsx(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
130
+ uploadedFiles.map((file) => (_jsx(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? (_jsxs(_Fragment, { children: [!hideUploadIcon && _jsx(UploadIcon, {}), infoText && (_jsx(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), _jsx(Divider, { children: _jsx(DividerText, { children: orText ?? "or" }) }), _jsx(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", disabled: readOnly, onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && _jsx(FileInfoText, { children: fileInfoText })] })) : (_jsxs(_Fragment, { children: [infoText && !hideUpload && (_jsxs(InfoText, { children: [`${infoText} ${orText ?? "or"} `, _jsx(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && (_jsx(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && (_jsx(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", disabled: readOnly, onChange: (event) => {
123
131
  const files = event.target.files;
124
132
  if (files) {
125
133
  handleFileUpload(files, setFieldValue);
package/dist/esm/Form/fields/FilesUploadField/styledComponents.js CHANGED
@@ -4,18 +4,19 @@ import { FaCloudUploadAlt, FaTrash } from "react-icons/fa";
4
4
  import { Button } from "@nolwenture/component-library";
5
5
  export const FileUploadFieldContainer = styled.div `
6
6
  align-items: center;
7
- background-color: ${(props) => props.theme.color.background.input};
8
- border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
7
+ background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
8
+ border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  gap: ${(props) => props.theme.spacing.m};
12
12
  justify-content: center;
13
- padding: ${(props) => props.theme.spacing.xxl};
13
+ padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
14
+ margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
14
15
  position: relative;
15
16
  transition: 0.3s filter ease;
16
17
 
17
18
  &:hover {
18
- filter: brightness(110%);
19
+ filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
19
20
  }
20
21
  `;
21
22
  export const HiddenFileInput = styled.input `
@@ -92,15 +93,15 @@ export const FileItemContainer = styled.div `
92
93
  `;
93
94
  export const UploadedFileItemContainer = styled.div `
94
95
  align-items: center;
95
- background-color: ${(props) => props.theme.color.background.default};
96
- border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
96
+ background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
97
+ border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
97
98
  display: flex;
98
99
  flex-direction: row;
99
100
  font-family: ${(props) => props.theme.typography.fontFamily.base};
100
101
  gap: ${(props) => props.theme.spacing.m};
101
102
  justify-content: space-between;
102
103
  margin: 0;
103
- padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
104
+ padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
104
105
  width: 100%;
105
106
  `;
106
107
  export const UploadedFileInfoContainer = styled.div `
package/dist/types/Form/components/index.d.ts CHANGED
@@ -185,8 +185,10 @@ export declare const components: {
185
185
  MultipleChoiceFieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, "ref"> & {
186
186
  ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
187
187
  }, never>> & string;
188
- FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("../fields/FilesUploadField").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
189
- FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
188
+ FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("../fields/FilesUploadField").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
189
+ FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
190
+ $readOnly?: boolean;
191
+ }>> & string;
190
192
  HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
191
193
  UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
192
194
  InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -197,7 +199,9 @@ export declare const components: {
197
199
  FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
198
200
  FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
199
201
  FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
200
- UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
202
+ UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
203
+ $readOnly?: boolean;
204
+ }>> & string;
201
205
  UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
202
206
  UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
203
207
  FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/dist/types/Form/fields/FilesUploadField/FilesUploadFieldInput.d.ts CHANGED
@@ -36,6 +36,7 @@ export type FilesUploadFieldInputProps = {
36
36
  hideFileSize: boolean;
37
37
  acceptedFiletypes?: string | string[];
38
38
  allowMultipleFiles?: boolean;
39
+ readOnly?: boolean;
39
40
  };
40
- export declare const FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
41
+ export declare const FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
41
42
  export {};
package/dist/types/Form/fields/FilesUploadField/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  export * as fields from "./FilesUploadField";
2
2
  declare const components: {
3
- FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("./FilesUploadFieldInput").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
4
- FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
+ FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: import("./FilesUploadFieldInput").FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
4
+ FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
5
+ $readOnly?: boolean;
6
+ }>> & string;
5
7
  HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
6
8
  UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
7
9
  InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -12,7 +14,9 @@ declare const components: {
12
14
  FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
13
15
  FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
14
16
  FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
- UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
17
+ UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
18
+ $readOnly?: boolean;
19
+ }>> & string;
16
20
  UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
17
21
  UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
18
22
  FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/dist/types/Form/fields/FilesUploadField/styledComponents.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { Button } from "@nolwenture/component-library";
2
- export declare const FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
2
+ export declare const FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
3
+ $readOnly?: boolean;
4
+ }>> & string;
3
5
  export declare const HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
4
6
  export declare const UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
5
7
  export declare const InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -10,7 +12,9 @@ export declare const FileInfoTextMinimized: import("styled-components/dist/types
10
12
  export declare const FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof Button, keyof import("react").Component<any, {}, any>>;
11
13
  export declare const FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
12
14
  export declare const FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
13
- export declare const UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
+ export declare const UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
16
+ $readOnly?: boolean;
17
+ }>> & string;
14
18
  export declare const UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
19
  export declare const UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
16
20
  export declare const FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/dist/types/Form/fields/index.d.ts CHANGED
@@ -106,8 +106,10 @@ export declare const fieldComponents: {
106
106
  MultipleChoiceFieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, "ref"> & {
107
107
  ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
108
108
  }, never>> & string;
109
- FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadField.FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
110
- FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
109
+ FilesUploadFieldInput: ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }: FilesUploadField.FilesUploadFieldInputProps) => import("react/jsx-runtime").JSX.Element;
110
+ FileUploadFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
111
+ $readOnly?: boolean;
112
+ }>> & string;
111
113
  HiddenFileInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
112
114
  UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
113
115
  InfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -118,7 +120,9 @@ export declare const fieldComponents: {
118
120
  FileUploadButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
119
121
  FileUploadText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
120
122
  FileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
121
- UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
123
+ UploadedFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
124
+ $readOnly?: boolean;
125
+ }>> & string;
122
126
  UploadedFileInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
123
127
  UploadedFileWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
124
128
  FileTypeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [