dynamic-modal 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.
- package/dist/components/make-autocomplete/make-autocomplete.js +1 -1
- package/dist/components/make-input/make-input.js +1 -1
- package/dist/components/make-multi-select/make-multi-select.js +1 -1
- package/dist/components/make-select/make-select.js +1 -1
- package/dist/components/make-textarea/make-textarea.js +1 -1
- package/dist/hooks/field-render.js +5 -4
- package/package.json +2 -1
- package/src/components/make-autocomplete/make-autocomplete.tsx +1 -1
- package/src/components/make-input/make-input.tsx +1 -1
- package/src/components/make-multi-select/make-multi-select.tsx +1 -1
- package/src/components/make-select/make-select.tsx +1 -1
- package/src/components/make-textarea/make-textarea.tsx +1 -1
- package/src/hooks/field-render.ts +5 -4
|
@@ -56,7 +56,7 @@ const MakeAutocomplete = (_a) => {
|
|
|
56
56
|
}
|
|
57
57
|
}, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
|
|
58
58
|
var _a, _b, _c, _d;
|
|
59
|
-
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' :
|
|
59
|
+
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' : undefined, 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)))));
|
|
60
60
|
} })
|
|
61
61
|
: react_1.default.createElement(react_1.default.Fragment, null));
|
|
62
62
|
};
|
|
@@ -56,7 +56,7 @@ const MakeInput = (_a) => {
|
|
|
56
56
|
}
|
|
57
57
|
}, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
|
|
58
58
|
var _a, _b, _c;
|
|
59
|
-
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' :
|
|
59
|
+
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' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
|
|
60
60
|
} })
|
|
61
61
|
: null);
|
|
62
62
|
};
|
|
@@ -56,7 +56,7 @@ const MakeMultiSelect = (_a) => {
|
|
|
56
56
|
}
|
|
57
57
|
}, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
|
|
58
58
|
var _a, _b, _c, _d;
|
|
59
|
-
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' :
|
|
59
|
+
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' : undefined, 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)))));
|
|
60
60
|
} })
|
|
61
61
|
: null);
|
|
62
62
|
};
|
|
@@ -56,7 +56,7 @@ const MakeSelect = (_a) => {
|
|
|
56
56
|
}
|
|
57
57
|
}, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
|
|
58
58
|
var _a, _b, _c, _d;
|
|
59
|
-
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' :
|
|
59
|
+
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' : undefined, 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)))));
|
|
60
60
|
} })
|
|
61
61
|
: react_1.default.createElement(react_1.default.Fragment, null));
|
|
62
62
|
};
|
|
@@ -56,7 +56,7 @@ const MakeTextarea = (_a) => {
|
|
|
56
56
|
}
|
|
57
57
|
}, render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
|
|
58
58
|
var _a, _b, _c;
|
|
59
|
-
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' :
|
|
59
|
+
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' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_b = element.validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
|
|
60
60
|
} })
|
|
61
61
|
: null);
|
|
62
62
|
};
|
|
@@ -50,13 +50,14 @@ const useFieldRender = (props) => {
|
|
|
50
50
|
var _b;
|
|
51
51
|
const key = name !== null && name !== void 0 ? name : '';
|
|
52
52
|
const targetField = formData[key];
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
const fieldValidValue = targetField !== undefined && targetField !== null && targetField !== '';
|
|
54
|
+
if (renderCondition && renderConditionList.includes(key) && fieldValidValue) {
|
|
55
|
+
const renderStatus = props.element.renderIf[key].includes(targetField) || props.element.renderIf[key].includes('*');
|
|
55
56
|
if (render !== renderStatus)
|
|
56
57
|
setRender(renderStatus);
|
|
57
58
|
}
|
|
58
|
-
else if (enableCondition && enableConditionList.includes(key)) {
|
|
59
|
-
const enableStatus = targetField
|
|
59
|
+
else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
|
|
60
|
+
const enableStatus = props.element.enableIf[key].includes(targetField) || props.element.enableIf[key].includes('');
|
|
60
61
|
if (enable !== enableStatus)
|
|
61
62
|
setEnable(enableStatus);
|
|
62
63
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dynamic-modal",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "The dynamic-modal is a solution of creation differents modals into project using a json configuration file",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "tsc",
|
|
8
8
|
"lint": "eslint .",
|
|
9
|
+
"publish": "npm publish --access public",
|
|
9
10
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
10
11
|
},
|
|
11
12
|
"repository": {
|
|
@@ -34,7 +34,7 @@ const MakeAutocomplete: FC<IMakeAutoCompleteProps> = ({ element, ...props }) =>
|
|
|
34
34
|
onSelectionChange={onChange}
|
|
35
35
|
label={liveSearching ? 'Loading...' : element.label}
|
|
36
36
|
selectedKey={value}
|
|
37
|
-
color={invalid ? 'danger' :
|
|
37
|
+
color={invalid ? 'danger' : undefined}
|
|
38
38
|
isInvalid={invalid}
|
|
39
39
|
errorMessage={invalid ? (element.validation.message ?? '') : undefined}
|
|
40
40
|
>
|
|
@@ -32,7 +32,7 @@ const MakeInput: FC<IMakeInputProps> = ({ element, ...props }) => {
|
|
|
32
32
|
id={element.id ?? generateId()}
|
|
33
33
|
onChange={onChange}
|
|
34
34
|
value={value ?? ''}
|
|
35
|
-
color={invalid ? 'danger' :
|
|
35
|
+
color={invalid ? 'danger' : undefined}
|
|
36
36
|
isInvalid={invalid}
|
|
37
37
|
errorMessage={invalid ? (element.validation.message ?? '') : undefined}
|
|
38
38
|
disabled={element.disabled ?? !enable}
|
|
@@ -34,7 +34,7 @@ const MakeMultiSelect: FC<IMakeMultiSelectProps> = ({ element, ...props }) => {
|
|
|
34
34
|
label={liveSearching ? 'Loading...' : element.label}
|
|
35
35
|
selectionMode="multiple"
|
|
36
36
|
selectedKeys={value}
|
|
37
|
-
color={invalid ? 'danger' :
|
|
37
|
+
color={invalid ? 'danger' : undefined}
|
|
38
38
|
isInvalid={invalid}
|
|
39
39
|
errorMessage={invalid ? (element.validation.message ?? '') : undefined}
|
|
40
40
|
disabled={element.disabled ?? !enable}
|
|
@@ -33,7 +33,7 @@ const MakeSelect: FC<IMakeSelectProps> = ({ element, ...props }) => {
|
|
|
33
33
|
onChange={onChange}
|
|
34
34
|
label={liveSearching ? 'Loading...' : element.label}
|
|
35
35
|
selectedKeys={[value]}
|
|
36
|
-
color={invalid ? 'danger' :
|
|
36
|
+
color={invalid ? 'danger' : undefined}
|
|
37
37
|
isInvalid={invalid}
|
|
38
38
|
errorMessage={invalid ? (element.validation.message ?? '') : undefined}
|
|
39
39
|
disabled={element.disabled ?? !enable}
|
|
@@ -33,7 +33,7 @@ const MakeTextarea: FC<IMakeTextareaProps> = ({ element, ...props }) => {
|
|
|
33
33
|
onChange={onChange}
|
|
34
34
|
label={element.label}
|
|
35
35
|
value={value ?? ''}
|
|
36
|
-
color={invalid ? 'danger' :
|
|
36
|
+
color={invalid ? 'danger' : undefined}
|
|
37
37
|
isInvalid={invalid}
|
|
38
38
|
errorMessage={invalid ? (element.validation.message ?? '') : undefined}
|
|
39
39
|
disabled={element.disabled ?? !enable}
|
|
@@ -73,12 +73,13 @@ export const useFieldRender = (props: IFieldRenderProps): IFieldRender => {
|
|
|
73
73
|
async (formData: IFormData, { name }: IWatchEvent) => {
|
|
74
74
|
const key: string = name ?? ''
|
|
75
75
|
const targetField = formData[key] as string | number
|
|
76
|
+
const fieldValidValue: boolean = targetField !== undefined && targetField !== null && targetField !== ''
|
|
76
77
|
|
|
77
|
-
if (renderCondition && renderConditionList.includes(key)) {
|
|
78
|
-
const renderStatus: boolean =
|
|
78
|
+
if (renderCondition && renderConditionList.includes(key) && fieldValidValue) {
|
|
79
|
+
const renderStatus: boolean = (props.element.renderIf as IModalRenderCondition)[key].includes(targetField) || (props.element.renderIf as IModalRenderCondition)[key].includes('*')
|
|
79
80
|
if (render !== renderStatus) setRender(renderStatus)
|
|
80
|
-
} else if (enableCondition && enableConditionList.includes(key)) {
|
|
81
|
-
const enableStatus: boolean =
|
|
81
|
+
} else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
|
|
82
|
+
const enableStatus: boolean = (props.element.enableIf as IModalRenderCondition)[key].includes(targetField) || (props.element.enableIf as IModalRenderCondition)[key].includes('')
|
|
82
83
|
if (enable !== enableStatus) setEnable(enableStatus)
|
|
83
84
|
}
|
|
84
85
|
|