dynamic-modal 1.0.5 → 1.0.7

package/dist/components/input-upload/input-upload.js

@@ -38,7 +38,7 @@ const react_1 = __importStar(require("react"));
 const general_1 = require("../../tools/general");
 const InputUpload = (_a) => {
     var _b;
-    var { onChange } = _a, props = __rest(_a, ["onChange"]);
+    var { onChange, readAsArrayBuffer } = _a, props = __rest(_a, ["onChange", "readAsArrayBuffer"]);
     const onChangeHandler = (event) => {
         if (props.read && event.target.files) {
             readFileBlob(event.target.files[0], false)
@@ -57,6 +57,8 @@ const InputUpload = (_a) => {
             const fileReader = new FileReader();
             if (image)
                 fileReader.readAsDataURL(blob);
+            else if (readAsArrayBuffer)
+                fileReader.readAsArrayBuffer(blob);
             else
                 fileReader.readAsText(blob);
             fileReader.onload = () => {

package/dist/components/make-autocomplete/make-autocomplete.js

@@ -56,7 +56,7 @@ const MakeAutocomplete = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, errorMessage: invalid ? ((_c = element.validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
+                return (react_1.default.createElement(react_2.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_c = element.validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
             } })
         : react_1.default.createElement(react_1.default.Fragment, null));
 };

package/dist/components/make-input/make-input.js

@@ -56,7 +56,7 @@ const MakeInput = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c;
-                return (react_1.default.createElement(react_2.Input, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, value: value !== null && value !== void 0 ? value : '', errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
+                return (react_1.default.createElement(react_2.Input, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, value: value !== null && value !== void 0 ? value : '', color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
             } })
         : null);
 };

package/dist/components/make-multi-select/make-multi-select.js

@@ -56,7 +56,7 @@ const MakeMultiSelect = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectionMode: "multiple", selectedKeys: value, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable, className: 'max-w-lg' }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
+                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectionMode: "multiple", selectedKeys: value, color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable, className: 'max-w-lg' }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
             } })
         : null);
 };

package/dist/components/make-select/make-select.js

@@ -56,7 +56,7 @@ const MakeSelect = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKeys: [value], errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
+                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKeys: [value], color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
             } })
         : react_1.default.createElement(react_1.default.Fragment, null));
 };

package/dist/components/make-textarea/make-textarea.js

@@ -56,7 +56,7 @@ const MakeTextarea = (_a) => {
                 }
             }, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
                 var _a, _b, _c;
-                return (react_1.default.createElement(react_2.Textarea, Object.assign({}, element, { disableAutosize: true, id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: element.label, value: value !== null && value !== void 0 ? value : '', errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
+                return (react_1.default.createElement(react_2.Textarea, Object.assign({}, element, { disableAutosize: true, id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: element.label, value: value !== null && value !== void 0 ? value : '', color: invalid ? 'danger' : 'success', isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
             } })
         : null);
 };

package/dist/components/make-upload/make-upload.js

@@ -19,7 +19,7 @@ const MakeUpload = (props) => {
                 }
             }, render: ({ field: { onChange } }) => {
                 var _a;
-                return (react_1.default.createElement(input_upload_1.default, { id: props.element.id, name: props.element.name, disabled: (_a = props.element.disabled) !== null && _a !== void 0 ? _a : !enable, onChange: onChange, label: props.element.label, helpText: props.element.helpText, style: props.element.styles, accept: props.element.accept, read: props.element.read }));
+                return (react_1.default.createElement(input_upload_1.default, { id: props.element.id, name: props.element.name, disabled: (_a = props.element.disabled) !== null && _a !== void 0 ? _a : !enable, onChange: onChange, label: props.element.label, helpText: props.element.helpText, style: props.element.styles, accept: props.element.accept, read: props.element.read, readAsArrayBuffer: props.element.readAsArrayBuffer }));
             } })
         : null);
 };

package/dist/hooks/field-render.js

@@ -51,16 +51,16 @@ const useFieldRender = (props) => {
         const key = name !== null && name !== void 0 ? name : '';
         const targetField = formData[key];
         if (renderCondition && renderConditionList.includes(key)) {
-            const renderStatus = props.element.renderIf[key].includes(targetField);
+            const renderStatus = targetField === '*' ? true : props.element.renderIf[key].includes(targetField);
             if (render !== renderStatus)
                 setRender(renderStatus);
         }
         else if (enableCondition && enableConditionList.includes(key)) {
-            const enableStatus = props.element.enableIf[key].includes(targetField);
+            const enableStatus = targetField === '*' ? true : props.element.enableIf[key].includes(targetField);
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }
-        if (liveDataCondition && key === ((_b = props.element.liveData) === null || _b === void 0 ? void 0 : _b.condition)) {
+        if (liveDataCondition && ((_b = props.element.liveData) === null || _b === void 0 ? void 0 : _b.condition.includes(key))) {
             if (targetField) {
                 setLiveSearching(true);
                 const options = yield liveDataAction(targetField, formData);

package/dist/interfaces/input-upload.d.ts

@@ -26,6 +26,7 @@ export interface IInputUpload {
     helpText?: string;
     clearfunction?: () => void;
     style?: CSSProperties;
+    readAsArrayBuffer?: boolean;
     name: string;
     disabled?: boolean;
     read?: boolean;

package/dist/interfaces/make-upload.d.ts

@@ -5,6 +5,7 @@ export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
     read: boolean;
     image?: boolean;
     accept?: string;
+    readAsArrayBuffer?: boolean;
 }
 export interface IMakeUploadProps extends IFieldProps {
     element: IMakeUpload;

package/dist/interfaces/modal.d.ts

@@ -12,10 +12,10 @@ import { IMakeButton } from './make-button';
 import { IMakeAutoComplete } from './make-autocomplete';
 export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeMultiSelect | IMakeText | IMakeUpload | IMakeButton | IMakeAutoComplete;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect;
-export type IModalRenderCondition = Record<string, Array<string | number>>;
+export type IModalRenderCondition = Record<string, Array<string | number | '*'>>;
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
-    condition: string;
+    condition: Array<string>;
 };
 export interface IModalConfigProps {
     fields: Array<IModalField>;

package/dist/modal.js

@@ -127,7 +127,7 @@ const Modal = ({ open, close, config }) => {
         ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
             react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
                 react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
-                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4' }, modalReady.title),
+                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4 font-semibold' }, modalReady.title),
                     react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
                             overflowY: modalReady.overFlowBody ? 'auto' : undefined,
                             height: modalReady.overFlowBody,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {

package/src/components/input-upload/input-upload.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent, FC, useMemo } from 'react'
 import { IFileResult, IInputUpload } from '../../interfaces/input-upload'
 import { generateId } from '../../tools/general'
 
-const InputUpload: FC<IInputUpload> = ({ onChange, ...props }: IInputUpload) => {
+const InputUpload: FC<IInputUpload> = ({ onChange, readAsArrayBuffer, ...props }: IInputUpload) => {
   
   const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
     if (props.read && event.target.files) {
@@ -21,6 +21,7 @@ const InputUpload: FC<IInputUpload> = ({ onChange, ...props }: IInputUpload) =>
     return new Promise((resolve, reject) => {
       const fileReader = new FileReader()
       if(image) fileReader.readAsDataURL(blob) 
+      else if (readAsArrayBuffer) fileReader.readAsArrayBuffer(blob)
       else fileReader.readAsText(blob)
 
       fileReader.onload = () => {

package/src/components/make-autocomplete/make-autocomplete.tsx

@@ -34,6 +34,8 @@ const MakeAutocomplete: FC<IMakeAutoCompleteProps> = ({ element, ...props }) =>
             onSelectionChange={onChange}
             label={liveSearching ? 'Loading...' : element.label}
             selectedKey={value}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
           >
             {

package/src/components/make-input/make-input.tsx

@@ -32,6 +32,8 @@ const MakeInput: FC<IMakeInputProps> = ({ element, ...props }) => {
             id={element.id ?? generateId()}
             onChange={onChange}
             value={value ?? ''}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
           />

package/src/components/make-multi-select/make-multi-select.tsx

@@ -34,6 +34,8 @@ const MakeMultiSelect: FC<IMakeMultiSelectProps> = ({ element, ...props }) => {
             label={liveSearching ? 'Loading...' : element.label}
             selectionMode="multiple"
             selectedKeys={value}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
             className='max-w-lg'

package/src/components/make-select/make-select.tsx

@@ -33,6 +33,8 @@ const MakeSelect: FC<IMakeSelectProps> = ({ element, ...props }) => {
             onChange={onChange}
             label={liveSearching ? 'Loading...' : element.label}
             selectedKeys={[value]}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
           >

package/src/components/make-textarea/make-textarea.tsx

@@ -33,6 +33,8 @@ const MakeTextarea: FC<IMakeTextareaProps> = ({ element, ...props }) => {
             onChange={onChange}
             label={element.label}
             value={value ?? ''}
+            color={invalid ? 'danger' : 'success'}
+            isInvalid={invalid}
             errorMessage={invalid ? (element.validation.message ?? '') : undefined}
             disabled={element.disabled ?? !enable}
           />

package/src/components/make-upload/make-upload.tsx

@@ -30,6 +30,7 @@ const MakeUpload : FC<IMakeUploadProps> = (props) => {
             style={props.element.styles}
             accept={props.element.accept}
             read={props.element.read}
+            readAsArrayBuffer={props.element.readAsArrayBuffer}
           />
         )}
       />

package/src/hooks/field-render.ts

@@ -75,14 +75,14 @@ export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
       const targetField  = formData[key] as string | number
 
       if (renderCondition && renderConditionList.includes(key)) {
-        const renderStatus: boolean = (props.element.renderIf as IModalRenderCondition)[key].includes(targetField)
+        const renderStatus: boolean = targetField === '*' ? true : (props.element.renderIf as IModalRenderCondition)[key].includes(targetField)
         if (render !== renderStatus) setRender(renderStatus)
       } else if (enableCondition && enableConditionList.includes(key)) {
-        const enableStatus: boolean = (props.element.enableIf as IModalRenderCondition)[key].includes(targetField)
+        const enableStatus: boolean = targetField === '*' ? true : (props.element.enableIf as IModalRenderCondition)[key].includes(targetField)
         if (enable !== enableStatus) setEnable(enableStatus)
       }
 
-      if (liveDataCondition && key === props.element.liveData?.condition) {
+      if (liveDataCondition && props.element.liveData?.condition.includes(key)) {
         if (targetField) {
           setLiveSearching(true)
           const options: Array<IOption> = await liveDataAction(targetField, formData)

package/src/interfaces/input-upload.ts

@@ -30,6 +30,7 @@ export interface IInputUpload {
   helpText?: string
   clearfunction?: () => void;
   style?:CSSProperties;
+  readAsArrayBuffer?: boolean;
   name: string;
   disabled?: boolean;
   read?: boolean;

package/src/interfaces/make-upload.ts

@@ -6,6 +6,7 @@ export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
   read: boolean;
   image?: boolean;
   accept?:string;
+  readAsArrayBuffer?: boolean;
 }
 
 export interface IMakeUploadProps extends IFieldProps {

package/src/interfaces/modal.ts

@@ -16,11 +16,11 @@ export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeText
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect
 
-export type IModalRenderCondition = Record<string, Array<string | number>>
+export type IModalRenderCondition = Record<string, Array<string | number | '*'>>
 
 export type IModalLiveDataCondition = {
   action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
-  condition: string
+  condition: Array<string>
 }
 
 export interface IModalConfigProps {

package/src/modal.tsx

@@ -115,7 +115,7 @@ export const Modal = ({ open, close, config }: IModal) => {
       ? <Portal closeTime={200} portalOpen={open} portalTag={'#modal-portal'}>
         <div className='rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]' style={{ ...modalReady.styles }} >
           <form className='flex flex-col p-4 gap-4' autoComplete='off' onSubmit={handleSubmit(actionHandler)}>
-            <h2 className='text-bold text-center border-b pb-4'>{modalReady.title}</h2>
+            <h2 className='text-bold text-center border-b pb-4 font-semibold'>{modalReady.title}</h2>
             <div
               className='flex flex-col items-center gap-4 py-4'
               style={{