@rjsf/daisyui 6.4.2 → 6.5.1
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/chakra-ui.esm.js +71 -66
- package/dist/chakra-ui.esm.js.map +3 -3
- package/dist/chakra-ui.umd.js +57 -64
- package/dist/index.cjs +60 -65
- package/dist/index.cjs.map +3 -3
- package/lib/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js +1 -1
- package/lib/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/widgets/CheckboxesWidget/CheckboxesWidget.js +8 -14
- package/lib/widgets/CheckboxesWidget/CheckboxesWidget.js.map +1 -1
- package/lib/widgets/RadioWidget/RadioWidget.js +12 -25
- package/lib/widgets/RadioWidget/RadioWidget.js.map +1 -1
- package/lib/widgets/SelectWidget/SelectWidget.js +21 -11
- package/lib/widgets/SelectWidget/SelectWidget.js.map +1 -1
- package/package.json +9 -9
- package/src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx +1 -0
- package/src/widgets/CheckboxesWidget/CheckboxesWidget.tsx +16 -14
- package/src/widgets/RadioWidget/RadioWidget.tsx +20 -25
- package/src/widgets/SelectWidget/SelectWidget.tsx +47 -35
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
+
import { enumOptionValueDecoder, enumOptionValueEncoder, getOptionValueFormat, } from '@rjsf/utils';
|
|
3
4
|
/** The `CheckboxesWidget` component renders a set of checkboxes for multiple choice selection
|
|
4
5
|
* with DaisyUI styling.
|
|
5
6
|
*
|
|
@@ -16,7 +17,8 @@ import { useCallback } from 'react';
|
|
|
16
17
|
*/
|
|
17
18
|
export default function CheckboxesWidget({ id, htmlName, disabled, options, value, readonly, required, onChange, onFocus, onBlur, }) {
|
|
18
19
|
var _a;
|
|
19
|
-
const { enumOptions } = options;
|
|
20
|
+
const { enumOptions, emptyValue } = options;
|
|
21
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
20
22
|
const isEnumeratedObject = enumOptions && ((_a = enumOptions[0]) === null || _a === void 0 ? void 0 : _a.value) && typeof enumOptions[0].value === 'object';
|
|
21
23
|
/** Determines if a checkbox option should be checked based on the current value
|
|
22
24
|
*
|
|
@@ -51,23 +53,15 @@ export default function CheckboxesWidget({ id, htmlName, disabled, options, valu
|
|
|
51
53
|
/** Handles focus events for accessibility */
|
|
52
54
|
const handleFocus = useCallback((event) => {
|
|
53
55
|
if (onFocus) {
|
|
54
|
-
|
|
55
|
-
const option = enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[index];
|
|
56
|
-
if (option) {
|
|
57
|
-
onFocus(id, option.value);
|
|
58
|
-
}
|
|
56
|
+
onFocus(id, enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
59
57
|
}
|
|
60
|
-
}, [onFocus, id, enumOptions]);
|
|
58
|
+
}, [onFocus, id, enumOptions, optionValueFormat, emptyValue]);
|
|
61
59
|
/** Handles blur events for accessibility */
|
|
62
60
|
const handleBlur = useCallback((event) => {
|
|
63
61
|
if (onBlur) {
|
|
64
|
-
|
|
65
|
-
const option = enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[index];
|
|
66
|
-
if (option) {
|
|
67
|
-
onBlur(id, option.value);
|
|
68
|
-
}
|
|
62
|
+
onBlur(id, enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
69
63
|
}
|
|
70
|
-
}, [onBlur, id, enumOptions]);
|
|
71
|
-
return (_jsx("div", { className: 'form-control', children: _jsx("div", { className: 'flex flex-col gap-2 mt-1', children: enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.map((option, index) => (_jsxs("label", { className: 'flex items-center cursor-pointer gap-2', children: [_jsx("input", { type: 'checkbox', id: `${id}-${option.value}`, className: 'checkbox', name: htmlName || id, checked: isChecked(option), required: required, disabled: disabled || readonly, "data-index": index, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), _jsx("span", { className: 'label-text', children: option.label })] }, option.value))) }) }));
|
|
64
|
+
}, [onBlur, id, enumOptions, optionValueFormat, emptyValue]);
|
|
65
|
+
return (_jsx("div", { className: 'form-control', children: _jsx("div", { className: 'flex flex-col gap-2 mt-1', children: enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.map((option, index) => (_jsxs("label", { className: 'flex items-center cursor-pointer gap-2', children: [_jsx("input", { type: 'checkbox', id: `${id}-${option.value}`, className: 'checkbox', name: htmlName || id, value: enumOptionValueEncoder(option.value, index, optionValueFormat), checked: isChecked(option), required: required, disabled: disabled || readonly, "data-index": index, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), _jsx("span", { className: 'label-text', children: option.label })] }, option.value))) }) }));
|
|
72
66
|
}
|
|
73
67
|
//# sourceMappingURL=CheckboxesWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxesWidget.js","sourceRoot":"","sources":["../../../src/widgets/CheckboxesWidget/CheckboxesWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxesWidget.js","sourceRoot":"","sources":["../../../src/widgets/CheckboxesWidget/CheckboxesWidget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
+
import { enumOptionValueDecoder, enumOptionValueEncoder, getOptionValueFormat, } from '@rjsf/utils';
|
|
3
4
|
/** The `RadioWidget` component renders a group of radio buttons with DaisyUI styling
|
|
4
5
|
*
|
|
5
6
|
* Features:
|
|
@@ -14,16 +15,9 @@ import { useCallback } from 'react';
|
|
|
14
15
|
*/
|
|
15
16
|
export default function RadioWidget({ id, htmlName, options, value, required, disabled, readonly, onChange, onFocus, onBlur, }) {
|
|
16
17
|
var _a;
|
|
17
|
-
const { enumOptions } = options;
|
|
18
|
+
const { enumOptions, emptyValue } = options;
|
|
19
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
18
20
|
const isEnumeratedObject = enumOptions && ((_a = enumOptions[0]) === null || _a === void 0 ? void 0 : _a.value) && typeof enumOptions[0].value === 'object';
|
|
19
|
-
/** Gets the actual value from an option
|
|
20
|
-
*
|
|
21
|
-
* @param option - The option object to get value from
|
|
22
|
-
* @returns The option's value
|
|
23
|
-
*/
|
|
24
|
-
const getValue = (option) => {
|
|
25
|
-
return option.value;
|
|
26
|
-
};
|
|
27
21
|
/** Determines if an option is checked based on the current value
|
|
28
22
|
*
|
|
29
23
|
* @param option - The option to check
|
|
@@ -37,31 +31,24 @@ export default function RadioWidget({ id, htmlName, options, value, required, di
|
|
|
37
31
|
};
|
|
38
32
|
/** Handles focus events for accessibility */
|
|
39
33
|
const handleFocus = useCallback((event) => {
|
|
40
|
-
var _a;
|
|
41
34
|
if (onFocus) {
|
|
42
|
-
|
|
43
|
-
const optionValue = (_a = enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[index]) === null || _a === void 0 ? void 0 : _a.value;
|
|
44
|
-
onFocus(id, optionValue);
|
|
35
|
+
onFocus(id, enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
45
36
|
}
|
|
46
|
-
}, [onFocus, id, enumOptions]);
|
|
37
|
+
}, [onFocus, id, enumOptions, optionValueFormat, emptyValue]);
|
|
47
38
|
/** Handles blur events for accessibility */
|
|
48
39
|
const handleBlur = useCallback((event) => {
|
|
49
|
-
var _a;
|
|
50
40
|
if (onBlur) {
|
|
51
|
-
|
|
52
|
-
const optionValue = (_a = enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[index]) === null || _a === void 0 ? void 0 : _a.value;
|
|
53
|
-
onBlur(id, optionValue);
|
|
41
|
+
onBlur(id, enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
54
42
|
}
|
|
55
|
-
}, [onBlur, id, enumOptions]);
|
|
43
|
+
}, [onBlur, id, enumOptions, optionValueFormat, emptyValue]);
|
|
56
44
|
/** Handles change events for radio options */
|
|
57
45
|
const handleChange = useCallback((event) => {
|
|
58
|
-
const
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
onChange(isEnumeratedObject ? option.value : option.value);
|
|
46
|
+
const decoded = enumOptionValueDecoder(event.target.value, enumOptions, optionValueFormat, emptyValue);
|
|
47
|
+
if (decoded !== undefined) {
|
|
48
|
+
onChange(decoded);
|
|
62
49
|
event.target.blur();
|
|
63
50
|
}
|
|
64
|
-
}, [onChange,
|
|
65
|
-
return (_jsx("div", { className: 'form-control', children: _jsx("div", { className: 'flex flex-col gap-2 mt-1', children: enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.map((option, index) => (_jsxs("label", { className: 'flex items-center cursor-pointer gap-2', children: [_jsx("input", { type: 'radio', id: `${id}-${option.value}`, className: 'radio', name: htmlName || id, value:
|
|
51
|
+
}, [onChange, enumOptions, optionValueFormat, emptyValue]);
|
|
52
|
+
return (_jsx("div", { className: 'form-control', children: _jsx("div", { className: 'flex flex-col gap-2 mt-1', children: enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions.map((option, index) => (_jsxs("label", { className: 'flex items-center cursor-pointer gap-2', children: [_jsx("input", { type: 'radio', id: `${id}-${option.value}`, className: 'radio', name: htmlName || id, value: enumOptionValueEncoder(option.value, index, optionValueFormat), checked: isChecked(option), required: required, disabled: disabled || readonly, "data-index": index, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), _jsx("span", { className: 'label-text', children: option.label })] }, option.value))) }) }));
|
|
66
53
|
}
|
|
67
54
|
//# sourceMappingURL=RadioWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioWidget.js","sourceRoot":"","sources":["../../../src/widgets/RadioWidget/RadioWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,WAAW,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioWidget.js","sourceRoot":"","sources":["../../../src/widgets/RadioWidget/RadioWidget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { enumOptionSelectedValue, enumOptionValueDecoder, enumOptionValueEncoder, getOptionValueFormat, } from '@rjsf/utils';
|
|
4
4
|
/** The `SelectWidget` component renders a select input with DaisyUI styling
|
|
5
5
|
*
|
|
6
6
|
* Features:
|
|
@@ -16,6 +16,7 @@ import { enumOptionsIndexForValue, enumOptionsValueForIndex, } from '@rjsf/utils
|
|
|
16
16
|
export default function SelectWidget({ schema, id, options, label, disabled, placeholder, readonly, value, multiple, onChange, onBlur, onFocus, }) {
|
|
17
17
|
var _a;
|
|
18
18
|
const { enumOptions, emptyValue: optEmptyVal } = options;
|
|
19
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
19
20
|
multiple = typeof multiple === 'undefined' ? false : !!multiple;
|
|
20
21
|
const getDisplayValue = (val) => {
|
|
21
22
|
if (!val) {
|
|
@@ -39,7 +40,7 @@ export default function SelectWidget({ schema, id, options, label, disabled, pla
|
|
|
39
40
|
const currentValue = Array.isArray(value) ? value : [];
|
|
40
41
|
const optionValue = isEnumeratedObject
|
|
41
42
|
? enumOptions[index].value
|
|
42
|
-
:
|
|
43
|
+
: enumOptionValueDecoder(String(index), enumOptions, optionValueFormat, optEmptyVal);
|
|
43
44
|
const newValue = currentValue.includes(optionValue)
|
|
44
45
|
? currentValue.filter((v) => v !== optionValue)
|
|
45
46
|
: [...currentValue, optionValue];
|
|
@@ -48,27 +49,36 @@ export default function SelectWidget({ schema, id, options, label, disabled, pla
|
|
|
48
49
|
else {
|
|
49
50
|
onChange(isEnumeratedObject
|
|
50
51
|
? enumOptions[index].value
|
|
51
|
-
:
|
|
52
|
+
: enumOptionValueDecoder(String(index), enumOptions, optionValueFormat, optEmptyVal));
|
|
52
53
|
}
|
|
53
|
-
}, [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange]);
|
|
54
|
+
}, [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, optionValueFormat, onChange]);
|
|
54
55
|
const _onBlur = useCallback(({ target }) => {
|
|
55
56
|
const dataValue = target === null || target === void 0 ? void 0 : target.getAttribute('data-value');
|
|
56
57
|
if (dataValue !== null) {
|
|
57
|
-
onBlur(id,
|
|
58
|
+
onBlur(id, enumOptionValueDecoder(dataValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
58
59
|
}
|
|
59
|
-
}, [onBlur, id, enumOptions, optEmptyVal]);
|
|
60
|
+
}, [onBlur, id, enumOptions, optEmptyVal, optionValueFormat]);
|
|
60
61
|
const _onFocus = useCallback(({ target }) => {
|
|
61
62
|
const dataValue = target === null || target === void 0 ? void 0 : target.getAttribute('data-value');
|
|
62
63
|
if (dataValue !== null) {
|
|
63
|
-
onFocus(id,
|
|
64
|
+
onFocus(id, enumOptionValueDecoder(dataValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
64
65
|
}
|
|
65
|
-
}, [onFocus, id, enumOptions, optEmptyVal]);
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
}, [onFocus, id, enumOptions, optEmptyVal, optionValueFormat]);
|
|
67
|
+
// The custom dropdown iterates `selectedValues.includes(...)` per option, so
|
|
68
|
+
// it always needs a string array regardless of `multiple`. Flatten the
|
|
69
|
+
// helper's single/multiple return shape and strip the empty-single case.
|
|
70
|
+
const selectedValues = [
|
|
71
|
+
enumOptionSelectedValue(value, enumOptions, !!multiple, optionValueFormat, multiple ? [] : ''),
|
|
72
|
+
]
|
|
73
|
+
.flat()
|
|
74
|
+
.filter((v) => v !== '');
|
|
68
75
|
const optionsList = enumOptions ||
|
|
69
76
|
(Array.isArray(schema.examples) ? schema.examples.map((example) => ({ value: example, label: example })) : []);
|
|
70
77
|
return (_jsx("div", { className: 'form-control w-full', children: _jsxs("div", { className: 'dropdown w-full', children: [_jsxs("div", { tabIndex: 0, role: 'button', className: `btn btn-outline w-full text-left flex justify-between items-center ${disabled || readonly ? 'btn-disabled' : ''}`, onBlur: _onBlur, onFocus: _onFocus, children: [_jsx("span", { className: 'truncate', children: selectedValues.length > 0
|
|
71
78
|
? selectedValues.map((index) => { var _a; return (_a = optionsList[Number(index)]) === null || _a === void 0 ? void 0 : _a.label; }).join(', ')
|
|
72
|
-
: placeholder || label || 'Select...' }), _jsx("span", { className: 'ml-2', children: "\u25BC" })] }), _jsx("ul", { className: 'dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg', children: optionsList.map(({
|
|
79
|
+
: placeholder || label || 'Select...' }), _jsx("span", { className: 'ml-2', children: "\u25BC" })] }), _jsx("ul", { className: 'dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg', children: optionsList.map(({ value: optValue, label }, i) => {
|
|
80
|
+
const encodedValue = enumOptionValueEncoder(optValue, i, optionValueFormat);
|
|
81
|
+
return (_jsx("li", { role: 'button', tabIndex: 0, className: `px-4 py-2 hover:bg-base-200 cursor-pointer ${selectedValues.includes(encodedValue) ? 'bg-primary/10' : ''}`, onClick: handleOptionClick, "data-value": i, children: _jsxs("div", { className: 'flex items-center gap-2', children: [multiple && (_jsx("input", { type: 'checkbox', className: 'checkbox checkbox-sm', checked: selectedValues.includes(encodedValue), readOnly: true })), _jsx("span", { children: isEnumeratedObject ? label : getDisplayValue(label) })] }) }, i));
|
|
82
|
+
}) })] }) }));
|
|
73
83
|
}
|
|
74
84
|
//# sourceMappingURL=SelectWidget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectWidget.js","sourceRoot":"","sources":["../../../src/widgets/SelectWidget/SelectWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,WAAW,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"SelectWidget.js","sourceRoot":"","sources":["../../../src/widgets/SelectWidget/SelectWidget.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rjsf/daisyui",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.5.1",
|
|
4
4
|
"description": "Daisy UI components for react-jsonschema-form",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -65,22 +65,22 @@
|
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
|
67
67
|
"@fortawesome/free-solid-svg-icons": "^7.2.0",
|
|
68
|
-
"@fortawesome/react-fontawesome": "^3.
|
|
68
|
+
"@fortawesome/react-fontawesome": "^3.3.0",
|
|
69
69
|
"date-fns": "^4.1.0",
|
|
70
|
-
"react-day-picker": "^9.
|
|
70
|
+
"react-day-picker": "^9.14.0",
|
|
71
71
|
"tailwindcss": "^4.1.18"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
|
-
"@rjsf/core": "^6.
|
|
75
|
-
"@rjsf/utils": "^6.
|
|
74
|
+
"@rjsf/core": "^6.5.x",
|
|
75
|
+
"@rjsf/utils": "^6.5.x",
|
|
76
76
|
"daisyui": "^5.0.29",
|
|
77
77
|
"react": ">=18"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@rjsf/core": "6.
|
|
81
|
-
"@rjsf/snapshot-tests": "6.
|
|
82
|
-
"@rjsf/utils": "6.
|
|
83
|
-
"@rjsf/validator-ajv8": "6.
|
|
80
|
+
"@rjsf/core": "6.5.1",
|
|
81
|
+
"@rjsf/snapshot-tests": "6.5.1",
|
|
82
|
+
"@rjsf/utils": "6.5.1",
|
|
83
|
+
"@rjsf/validator-ajv8": "6.5.1",
|
|
84
84
|
"@testing-library/dom": "^10.4.1",
|
|
85
85
|
"@testing-library/jest-dom": "^6.9.1",
|
|
86
86
|
"@testing-library/react": "^16.3.2",
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { FocusEvent, useCallback } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
enumOptionValueDecoder,
|
|
4
|
+
enumOptionValueEncoder,
|
|
5
|
+
getOptionValueFormat,
|
|
6
|
+
WidgetProps,
|
|
7
|
+
StrictRJSFSchema,
|
|
8
|
+
RJSFSchema,
|
|
9
|
+
FormContextType,
|
|
10
|
+
} from '@rjsf/utils';
|
|
3
11
|
|
|
4
12
|
/** The `CheckboxesWidget` component renders a set of checkboxes for multiple choice selection
|
|
5
13
|
* with DaisyUI styling.
|
|
@@ -27,7 +35,8 @@ export default function CheckboxesWidget<T, S extends StrictRJSFSchema = RJSFSch
|
|
|
27
35
|
onFocus,
|
|
28
36
|
onBlur,
|
|
29
37
|
}: WidgetProps<T, S, F>) {
|
|
30
|
-
const { enumOptions } = options;
|
|
38
|
+
const { enumOptions, emptyValue } = options;
|
|
39
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
31
40
|
const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === 'object';
|
|
32
41
|
|
|
33
42
|
/** Determines if a checkbox option should be checked based on the current value
|
|
@@ -73,28 +82,20 @@ export default function CheckboxesWidget<T, S extends StrictRJSFSchema = RJSFSch
|
|
|
73
82
|
const handleFocus = useCallback(
|
|
74
83
|
(event: FocusEvent<HTMLInputElement>) => {
|
|
75
84
|
if (onFocus) {
|
|
76
|
-
|
|
77
|
-
const option = enumOptions?.[index];
|
|
78
|
-
if (option) {
|
|
79
|
-
onFocus(id, option.value);
|
|
80
|
-
}
|
|
85
|
+
onFocus(id, enumOptionValueDecoder<S>(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
81
86
|
}
|
|
82
87
|
},
|
|
83
|
-
[onFocus, id, enumOptions],
|
|
88
|
+
[onFocus, id, enumOptions, optionValueFormat, emptyValue],
|
|
84
89
|
);
|
|
85
90
|
|
|
86
91
|
/** Handles blur events for accessibility */
|
|
87
92
|
const handleBlur = useCallback(
|
|
88
93
|
(event: FocusEvent<HTMLInputElement>) => {
|
|
89
94
|
if (onBlur) {
|
|
90
|
-
|
|
91
|
-
const option = enumOptions?.[index];
|
|
92
|
-
if (option) {
|
|
93
|
-
onBlur(id, option.value);
|
|
94
|
-
}
|
|
95
|
+
onBlur(id, enumOptionValueDecoder<S>(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
95
96
|
}
|
|
96
97
|
},
|
|
97
|
-
[onBlur, id, enumOptions],
|
|
98
|
+
[onBlur, id, enumOptions, optionValueFormat, emptyValue],
|
|
98
99
|
);
|
|
99
100
|
|
|
100
101
|
return (
|
|
@@ -108,6 +109,7 @@ export default function CheckboxesWidget<T, S extends StrictRJSFSchema = RJSFSch
|
|
|
108
109
|
id={`${id}-${option.value}`}
|
|
109
110
|
className='checkbox'
|
|
110
111
|
name={htmlName || id}
|
|
112
|
+
value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
|
|
111
113
|
checked={isChecked(option)}
|
|
112
114
|
required={required}
|
|
113
115
|
disabled={disabled || readonly}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { FocusEvent, useCallback } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
enumOptionValueDecoder,
|
|
4
|
+
enumOptionValueEncoder,
|
|
5
|
+
getOptionValueFormat,
|
|
6
|
+
WidgetProps,
|
|
7
|
+
StrictRJSFSchema,
|
|
8
|
+
FormContextType,
|
|
9
|
+
RJSFSchema,
|
|
10
|
+
} from '@rjsf/utils';
|
|
3
11
|
|
|
4
12
|
/** The `RadioWidget` component renders a group of radio buttons with DaisyUI styling
|
|
5
13
|
*
|
|
@@ -25,18 +33,10 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
|
|
|
25
33
|
onFocus,
|
|
26
34
|
onBlur,
|
|
27
35
|
}: WidgetProps<T, S, F>) {
|
|
28
|
-
const { enumOptions } = options;
|
|
36
|
+
const { enumOptions, emptyValue } = options;
|
|
37
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
29
38
|
const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === 'object';
|
|
30
39
|
|
|
31
|
-
/** Gets the actual value from an option
|
|
32
|
-
*
|
|
33
|
-
* @param option - The option object to get value from
|
|
34
|
-
* @returns The option's value
|
|
35
|
-
*/
|
|
36
|
-
const getValue = (option: any) => {
|
|
37
|
-
return option.value;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
40
|
/** Determines if an option is checked based on the current value
|
|
41
41
|
*
|
|
42
42
|
* @param option - The option to check
|
|
@@ -53,37 +53,32 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
|
|
|
53
53
|
const handleFocus = useCallback(
|
|
54
54
|
(event: FocusEvent<HTMLInputElement>) => {
|
|
55
55
|
if (onFocus) {
|
|
56
|
-
|
|
57
|
-
const optionValue = enumOptions?.[index]?.value;
|
|
58
|
-
onFocus(id, optionValue);
|
|
56
|
+
onFocus(id, enumOptionValueDecoder<S>(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
59
57
|
}
|
|
60
58
|
},
|
|
61
|
-
[onFocus, id, enumOptions],
|
|
59
|
+
[onFocus, id, enumOptions, optionValueFormat, emptyValue],
|
|
62
60
|
);
|
|
63
61
|
|
|
64
62
|
/** Handles blur events for accessibility */
|
|
65
63
|
const handleBlur = useCallback(
|
|
66
64
|
(event: FocusEvent<HTMLInputElement>) => {
|
|
67
65
|
if (onBlur) {
|
|
68
|
-
|
|
69
|
-
const optionValue = enumOptions?.[index]?.value;
|
|
70
|
-
onBlur(id, optionValue);
|
|
66
|
+
onBlur(id, enumOptionValueDecoder<S>(event.target.value, enumOptions, optionValueFormat, emptyValue));
|
|
71
67
|
}
|
|
72
68
|
},
|
|
73
|
-
[onBlur, id, enumOptions],
|
|
69
|
+
[onBlur, id, enumOptions, optionValueFormat, emptyValue],
|
|
74
70
|
);
|
|
75
71
|
|
|
76
72
|
/** Handles change events for radio options */
|
|
77
73
|
const handleChange = useCallback(
|
|
78
74
|
(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
onChange(isEnumeratedObject ? option.value : option.value);
|
|
75
|
+
const decoded = enumOptionValueDecoder<S>(event.target.value, enumOptions, optionValueFormat, emptyValue);
|
|
76
|
+
if (decoded !== undefined) {
|
|
77
|
+
onChange(decoded);
|
|
83
78
|
event.target.blur();
|
|
84
79
|
}
|
|
85
80
|
},
|
|
86
|
-
[onChange,
|
|
81
|
+
[onChange, enumOptions, optionValueFormat, emptyValue],
|
|
87
82
|
);
|
|
88
83
|
|
|
89
84
|
return (
|
|
@@ -97,7 +92,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
|
|
|
97
92
|
id={`${id}-${option.value}`}
|
|
98
93
|
className='radio'
|
|
99
94
|
name={htmlName || id}
|
|
100
|
-
value={
|
|
95
|
+
value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
|
|
101
96
|
checked={isChecked(option)}
|
|
102
97
|
required={required}
|
|
103
98
|
disabled={disabled || readonly}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { FocusEvent, useCallback } from 'react';
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
enumOptionSelectedValue,
|
|
4
|
+
enumOptionValueDecoder,
|
|
5
|
+
enumOptionValueEncoder,
|
|
6
|
+
getOptionValueFormat,
|
|
5
7
|
FormContextType,
|
|
6
8
|
RJSFSchema,
|
|
7
9
|
StrictRJSFSchema,
|
|
@@ -39,6 +41,7 @@ export default function SelectWidget<
|
|
|
39
41
|
onFocus,
|
|
40
42
|
}: WidgetProps<T, S, F>) {
|
|
41
43
|
const { enumOptions, emptyValue: optEmptyVal } = options;
|
|
44
|
+
const optionValueFormat = getOptionValueFormat(options);
|
|
42
45
|
multiple = typeof multiple === 'undefined' ? false : !!multiple;
|
|
43
46
|
|
|
44
47
|
const getDisplayValue = (val: any) => {
|
|
@@ -67,7 +70,7 @@ export default function SelectWidget<
|
|
|
67
70
|
const currentValue = Array.isArray(value) ? value : [];
|
|
68
71
|
const optionValue = isEnumeratedObject
|
|
69
72
|
? enumOptions[index].value
|
|
70
|
-
:
|
|
73
|
+
: enumOptionValueDecoder<S>(String(index), enumOptions, optionValueFormat, optEmptyVal);
|
|
71
74
|
const newValue = currentValue.includes(optionValue)
|
|
72
75
|
? currentValue.filter((v) => v !== optionValue)
|
|
73
76
|
: [...currentValue, optionValue];
|
|
@@ -76,35 +79,41 @@ export default function SelectWidget<
|
|
|
76
79
|
onChange(
|
|
77
80
|
isEnumeratedObject
|
|
78
81
|
? enumOptions[index].value
|
|
79
|
-
:
|
|
82
|
+
: enumOptionValueDecoder<S>(String(index), enumOptions, optionValueFormat, optEmptyVal),
|
|
80
83
|
);
|
|
81
84
|
}
|
|
82
85
|
},
|
|
83
|
-
[value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange],
|
|
86
|
+
[value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, optionValueFormat, onChange],
|
|
84
87
|
);
|
|
85
88
|
|
|
86
89
|
const _onBlur = useCallback(
|
|
87
90
|
({ target }: FocusEvent<HTMLDivElement>) => {
|
|
88
91
|
const dataValue = target?.getAttribute('data-value');
|
|
89
92
|
if (dataValue !== null) {
|
|
90
|
-
onBlur(id,
|
|
93
|
+
onBlur(id, enumOptionValueDecoder<S>(dataValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
91
94
|
}
|
|
92
95
|
},
|
|
93
|
-
[onBlur, id, enumOptions, optEmptyVal],
|
|
96
|
+
[onBlur, id, enumOptions, optEmptyVal, optionValueFormat],
|
|
94
97
|
);
|
|
95
98
|
|
|
96
99
|
const _onFocus = useCallback(
|
|
97
100
|
({ target }: FocusEvent<HTMLDivElement>) => {
|
|
98
101
|
const dataValue = target?.getAttribute('data-value');
|
|
99
102
|
if (dataValue !== null) {
|
|
100
|
-
onFocus(id,
|
|
103
|
+
onFocus(id, enumOptionValueDecoder<S>(dataValue, enumOptions, optionValueFormat, optEmptyVal));
|
|
101
104
|
}
|
|
102
105
|
},
|
|
103
|
-
[onFocus, id, enumOptions, optEmptyVal],
|
|
106
|
+
[onFocus, id, enumOptions, optEmptyVal, optionValueFormat],
|
|
104
107
|
);
|
|
105
108
|
|
|
106
|
-
|
|
107
|
-
|
|
109
|
+
// The custom dropdown iterates `selectedValues.includes(...)` per option, so
|
|
110
|
+
// it always needs a string array regardless of `multiple`. Flatten the
|
|
111
|
+
// helper's single/multiple return shape and strip the empty-single case.
|
|
112
|
+
const selectedValues: string[] = [
|
|
113
|
+
enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, multiple ? [] : ''),
|
|
114
|
+
]
|
|
115
|
+
.flat()
|
|
116
|
+
.filter((v) => v !== '');
|
|
108
117
|
|
|
109
118
|
const optionsList =
|
|
110
119
|
enumOptions ||
|
|
@@ -130,30 +139,33 @@ export default function SelectWidget<
|
|
|
130
139
|
<span className='ml-2'>▼</span>
|
|
131
140
|
</div>
|
|
132
141
|
<ul className='dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg'>
|
|
133
|
-
{optionsList.map(({ label }, i) =>
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
142
|
+
{optionsList.map(({ value: optValue, label }, i) => {
|
|
143
|
+
const encodedValue = enumOptionValueEncoder(optValue, i, optionValueFormat);
|
|
144
|
+
return (
|
|
145
|
+
<li
|
|
146
|
+
key={i}
|
|
147
|
+
role='button'
|
|
148
|
+
tabIndex={0}
|
|
149
|
+
className={`px-4 py-2 hover:bg-base-200 cursor-pointer ${
|
|
150
|
+
selectedValues.includes(encodedValue) ? 'bg-primary/10' : ''
|
|
151
|
+
}`}
|
|
152
|
+
onClick={handleOptionClick}
|
|
153
|
+
data-value={i}
|
|
154
|
+
>
|
|
155
|
+
<div className='flex items-center gap-2'>
|
|
156
|
+
{multiple && (
|
|
157
|
+
<input
|
|
158
|
+
type='checkbox'
|
|
159
|
+
className='checkbox checkbox-sm'
|
|
160
|
+
checked={selectedValues.includes(encodedValue)}
|
|
161
|
+
readOnly
|
|
162
|
+
/>
|
|
163
|
+
)}
|
|
164
|
+
<span>{isEnumeratedObject ? label : getDisplayValue(label)}</span>
|
|
165
|
+
</div>
|
|
166
|
+
</li>
|
|
167
|
+
);
|
|
168
|
+
})}
|
|
157
169
|
</ul>
|
|
158
170
|
</div>
|
|
159
171
|
</div>
|