@nolwenture/formik-jsonschema-form 1.0.2 → 1.0.4

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 (6) hide show
  1. package/dist/cjs/Form/fields/FilesUploadField/FilesUploadField.js +1 -1
  2. package/dist/cjs/Form/fields/FilesUploadField/FilesUploadFieldInput.js +52 -3
  3. package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js +1 -1
  4. package/dist/esm/Form/fields/FilesUploadField/FilesUploadFieldInput.js +19 -3
  5. package/dist/types/Form/fields/FilesUploadField/FilesUploadFieldInput.d.ts +1 -1
  6. package/package.json +1 -1
package/dist/cjs/Form/fields/FilesUploadField/FilesUploadField.js CHANGED
@@ -93,6 +93,6 @@ const FilesUploadField = (props) => {
93
93
  ...(formLocalization?.fields?.FilesUploadField ?? {}),
94
94
  ...(uiSchema["ui:localization"] ?? {}),
95
95
  };
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 }) }));
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 }) }));
97
97
  };
98
98
  exports.FilesUploadField = FilesUploadField;
package/dist/cjs/Form/fields/FilesUploadField/FilesUploadFieldInput.js CHANGED
@@ -1,8 +1,41 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
2
35
  Object.defineProperty(exports, "__esModule", { value: true });
3
36
  exports.FilesUploadFieldInput = void 0;
4
37
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
38
+ const react_1 = __importStar(require("react"));
6
39
  const fa_1 = require("react-icons/fa");
7
40
  const FormRegistry_1 = require("../../FormRegistry");
8
41
  const mimeTypeToIcon = {
@@ -70,7 +103,16 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
70
103
  e.dataTransfer.clearData();
71
104
  return;
72
105
  }
73
- const acceptedTypes = acceptedFiletypes?.split(",").map((type) => type.trim()).filter(Boolean) ?? [];
106
+ let acceptedTypes = [];
107
+ if (Array.isArray(acceptedFiletypes)) {
108
+ acceptedTypes = acceptedFiletypes;
109
+ }
110
+ else if (typeof acceptedFiletypes === 'string') {
111
+ acceptedTypes = acceptedFiletypes
112
+ .split(',')
113
+ .map((type) => type.trim())
114
+ .filter(Boolean);
115
+ }
74
116
  const filteredFiles = files.filter((file) => {
75
117
  console.log(acceptedTypes);
76
118
  if (acceptedTypes.length === 0) {
@@ -105,8 +147,15 @@ const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLab
105
147
  const uploadedFile = renderFile ?? defaultRenderFile;
106
148
  const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
107
149
  const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0;
150
+ const acceptedFiletypesValue = react_1.default.useMemo(() => {
151
+ if (!acceptedFiletypes)
152
+ return undefined;
153
+ return Array.isArray(acceptedFiletypes)
154
+ ? acceptedFiletypes.join(',')
155
+ : acceptedFiletypes;
156
+ }, [acceptedFiletypes]);
108
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) &&
109
- 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 }), ...fileTypes, id: name, name: name, type: "file", onChange: (event) => {
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) => {
110
159
  const files = event.target.files;
111
160
  if (files) {
112
161
  handleFileUpload(files, setFieldValue);
package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js CHANGED
@@ -90,5 +90,5 @@ export const FilesUploadField = (props) => {
90
90
  ...(formLocalization?.fields?.FilesUploadField ?? {}),
91
91
  ...(uiSchema["ui:localization"] ?? {}),
92
92
  };
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 }) }));
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 }) }));
94
94
  };
package/dist/esm/Form/fields/FilesUploadField/FilesUploadFieldInput.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useContext, useState, useRef } from "react";
2
+ import React, { useContext, useState, useRef } from "react";
3
3
  import { FaFile, FaFilePdf, FaFileAudio, FaFileCode, FaFileCsv, FaFileExcel, FaFileImage, FaFilePowerpoint, FaFileWord, } from "react-icons/fa";
4
4
  import { FormRegistry } from "../../FormRegistry";
5
5
  const mimeTypeToIcon = {
@@ -67,7 +67,16 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
67
67
  e.dataTransfer.clearData();
68
68
  return;
69
69
  }
70
- const acceptedTypes = acceptedFiletypes?.split(",").map((type) => type.trim()).filter(Boolean) ?? [];
70
+ let acceptedTypes = [];
71
+ if (Array.isArray(acceptedFiletypes)) {
72
+ acceptedTypes = acceptedFiletypes;
73
+ }
74
+ else if (typeof acceptedFiletypes === 'string') {
75
+ acceptedTypes = acceptedFiletypes
76
+ .split(',')
77
+ .map((type) => type.trim())
78
+ .filter(Boolean);
79
+ }
71
80
  const filteredFiles = files.filter((file) => {
72
81
  console.log(acceptedTypes);
73
82
  if (acceptedTypes.length === 0) {
@@ -102,8 +111,15 @@ export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFile
102
111
  const uploadedFile = renderFile ?? defaultRenderFile;
103
112
  const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
104
113
  const hideUpload = !allowMultipleFiles && uploadedFiles.length > 0;
114
+ const acceptedFiletypesValue = React.useMemo(() => {
115
+ if (!acceptedFiletypes)
116
+ return undefined;
117
+ return Array.isArray(acceptedFiletypes)
118
+ ? acceptedFiletypes.join(',')
119
+ : acceptedFiletypes;
120
+ }, [acceptedFiletypes]);
105
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) &&
106
- 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 }), ...fileTypes, id: name, name: name, type: "file", onChange: (event) => {
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) => {
107
123
  const files = event.target.files;
108
124
  if (files) {
109
125
  handleFileUpload(files, setFieldValue);
package/dist/types/Form/fields/FilesUploadField/FilesUploadFieldInput.d.ts CHANGED
@@ -34,7 +34,7 @@ export type FilesUploadFieldInputProps = {
34
34
  className?: string;
35
35
  hideFileTypeIcon: boolean;
36
36
  hideFileSize: boolean;
37
- acceptedFiletypes?: string;
37
+ acceptedFiletypes?: string | string[];
38
38
  allowMultipleFiles?: boolean;
39
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [