@gravity-ui/dynamic-forms 4.14.1 → 4.14.2
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/build/cjs/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.js +3 -2
- package/build/cjs/lib/kit/components/Inputs/ObjectBase/ObjectBase.js +4 -1
- package/build/cjs/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.js +4 -1
- package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.js +9 -3
- package/build/esm/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.js +3 -2
- package/build/esm/lib/kit/components/Inputs/ObjectBase/ObjectBase.js +4 -1
- package/build/esm/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.js +4 -1
- package/build/esm/lib/kit/hooks/useOneOf/useOneOf.js +9 -3
- package/package.json +1 -1
|
@@ -26,7 +26,8 @@ const MultiOneOf = (props) => {
|
|
|
26
26
|
onChange((currentValue) => (0, set_1.default)(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors);
|
|
27
27
|
}, [name, onChange]);
|
|
28
28
|
const specProperties = react_1.default.useMemo(() => ((0, isObjectLike_1.default)(spec.properties) ? spec.properties : {}), [spec.properties]);
|
|
29
|
-
const
|
|
29
|
+
const propertiesOrder = react_1.default.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
|
|
30
|
+
const options = react_1.default.useMemo(() => propertiesOrder.map((value) => {
|
|
30
31
|
var _a, _b;
|
|
31
32
|
const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
|
|
32
33
|
((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
|
|
@@ -37,7 +38,7 @@ const MultiOneOf = (props) => {
|
|
|
37
38
|
title,
|
|
38
39
|
content: title,
|
|
39
40
|
};
|
|
40
|
-
}), [
|
|
41
|
+
}), [propertiesOrder, spec.description, specProperties]);
|
|
41
42
|
const filterable = react_1.default.useMemo(() => (options.length || 0) > 9, [options.length]);
|
|
42
43
|
const selectInput = react_1.default.useMemo(() => {
|
|
43
44
|
const select = (react_1.default.createElement(uikit_1.Select, { width: "max", value: valueSelect, options: options, onUpdate: setValueSelect, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, className: b('select'), qa: name }));
|
|
@@ -20,6 +20,7 @@ const ObjectBase = (_a) => {
|
|
|
20
20
|
}, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
|
|
21
21
|
const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => (0, set_1.default)(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
|
|
22
22
|
const content = react_1.default.useMemo(() => {
|
|
23
|
+
var _a;
|
|
23
24
|
if (!spec.properties ||
|
|
24
25
|
!(0, isObjectLike_1.default)(spec.properties) ||
|
|
25
26
|
!Object.keys(spec.properties || {}).length) {
|
|
@@ -32,7 +33,9 @@ const ObjectBase = (_a) => {
|
|
|
32
33
|
? (0, utils_1.filterPropertiesForObjectInline)(spec.properties)
|
|
33
34
|
: spec.properties;
|
|
34
35
|
const delimiter = spec.viewSpec.delimiter;
|
|
35
|
-
const orderProperties = spec.viewSpec.order ||
|
|
36
|
+
const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
|
|
37
|
+
? spec.viewSpec.order
|
|
38
|
+
: Object.keys(specProperties);
|
|
36
39
|
return (react_1.default.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => {
|
|
37
40
|
var _a;
|
|
38
41
|
return specProperties[property] ? (react_1.default.createElement(react_1.default.Fragment, { key: `${name ? name + '.' : ''}${property}` },
|
|
@@ -11,6 +11,7 @@ const b = (0, utils_1.block)('object-base-view');
|
|
|
11
11
|
const ObjectBaseView = (_a) => {
|
|
12
12
|
var { inline, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["inline", "spec", "name", "Layout"]);
|
|
13
13
|
const content = react_1.default.useMemo(() => {
|
|
14
|
+
var _a;
|
|
14
15
|
if (!spec.properties || !(0, isObjectLike_1.default)(spec.properties)) {
|
|
15
16
|
return null;
|
|
16
17
|
}
|
|
@@ -18,7 +19,9 @@ const ObjectBaseView = (_a) => {
|
|
|
18
19
|
? (0, utils_1.filterPropertiesForObjectInline)(spec.properties)
|
|
19
20
|
: spec.properties;
|
|
20
21
|
const delimiter = spec.viewSpec.delimiter;
|
|
21
|
-
const orderProperties = spec.viewSpec.order ||
|
|
22
|
+
const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
|
|
23
|
+
? spec.viewSpec.order
|
|
24
|
+
: Object.keys(specProperties);
|
|
22
25
|
return (react_1.default.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => specProperties[property] ? (react_1.default.createElement(react_1.default.Fragment, { key: `${name ? name + '.' : ''}${property}` },
|
|
23
26
|
react_1.default.createElement(core_1.ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}` }),
|
|
24
27
|
delimiter && delimiter[property] ? (react_1.default.createElement(uikit_1.Text, { className: b('delimiter') }, delimiter[property])) : null)) : null)));
|
|
@@ -16,6 +16,7 @@ const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
16
16
|
const specProperties = react_1.default.useMemo(() => ((0, isObjectLike_1.default)(spec.properties) ? spec.properties : {}), [spec.properties]);
|
|
17
17
|
const specBooleanMap = react_1.default.useMemo(() => { var _a; return (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap; }, [(_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap]);
|
|
18
18
|
const [oneOfValue, setOneOfValue] = react_1.default.useState(() => {
|
|
19
|
+
var _a;
|
|
19
20
|
let valueKeys;
|
|
20
21
|
if ((0, isObjectLike_1.default)(input.value)) {
|
|
21
22
|
const keys = Object.keys(input.value);
|
|
@@ -23,7 +24,11 @@ const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
23
24
|
valueKeys = keys;
|
|
24
25
|
}
|
|
25
26
|
}
|
|
26
|
-
|
|
27
|
+
if (valueKeys)
|
|
28
|
+
return valueKeys[0];
|
|
29
|
+
if ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
|
|
30
|
+
return spec.viewSpec.order[0];
|
|
31
|
+
return Object.keys(specProperties)[0];
|
|
27
32
|
});
|
|
28
33
|
const onOneOfChange = react_1.default.useCallback(([newValue]) => {
|
|
29
34
|
if (newValue !== oneOfValue) {
|
|
@@ -46,7 +51,8 @@ const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
46
51
|
}
|
|
47
52
|
return undefined;
|
|
48
53
|
}, [oneOfValue, specBooleanMap]);
|
|
49
|
-
const
|
|
54
|
+
const propertiesOrder = react_1.default.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
|
|
55
|
+
const options = react_1.default.useMemo(() => propertiesOrder.map((value) => {
|
|
50
56
|
var _a, _b;
|
|
51
57
|
const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
|
|
52
58
|
((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
|
|
@@ -57,7 +63,7 @@ const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
57
63
|
title,
|
|
58
64
|
content: title,
|
|
59
65
|
};
|
|
60
|
-
}), [
|
|
66
|
+
}), [propertiesOrder, spec.description, specProperties]);
|
|
61
67
|
const togglerType = react_1.default.useMemo(() => {
|
|
62
68
|
var _a, _b, _c, _d;
|
|
63
69
|
if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 4) {
|
|
@@ -23,7 +23,8 @@ export const MultiOneOf = (props) => {
|
|
|
23
23
|
onChange((currentValue) => set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors);
|
|
24
24
|
}, [name, onChange]);
|
|
25
25
|
const specProperties = React.useMemo(() => (isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
|
|
26
|
-
const
|
|
26
|
+
const propertiesOrder = React.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
|
|
27
|
+
const options = React.useMemo(() => propertiesOrder.map((value) => {
|
|
27
28
|
var _a, _b;
|
|
28
29
|
const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
|
|
29
30
|
((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
|
|
@@ -34,7 +35,7 @@ export const MultiOneOf = (props) => {
|
|
|
34
35
|
title,
|
|
35
36
|
content: title,
|
|
36
37
|
};
|
|
37
|
-
}), [
|
|
38
|
+
}), [propertiesOrder, spec.description, specProperties]);
|
|
38
39
|
const filterable = React.useMemo(() => (options.length || 0) > 9, [options.length]);
|
|
39
40
|
const selectInput = React.useMemo(() => {
|
|
40
41
|
const select = (React.createElement(Select, { width: "max", value: valueSelect, options: options, onUpdate: setValueSelect, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true, className: b('select'), qa: name }));
|
|
@@ -18,6 +18,7 @@ export const ObjectBase = (_a) => {
|
|
|
18
18
|
}, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
|
|
19
19
|
const parentOnChange = React.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
|
|
20
20
|
const content = React.useMemo(() => {
|
|
21
|
+
var _a;
|
|
21
22
|
if (!spec.properties ||
|
|
22
23
|
!isObjectLike(spec.properties) ||
|
|
23
24
|
!Object.keys(spec.properties || {}).length) {
|
|
@@ -30,7 +31,9 @@ export const ObjectBase = (_a) => {
|
|
|
30
31
|
? filterPropertiesForObjectInline(spec.properties)
|
|
31
32
|
: spec.properties;
|
|
32
33
|
const delimiter = spec.viewSpec.delimiter;
|
|
33
|
-
const orderProperties = spec.viewSpec.order ||
|
|
34
|
+
const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
|
|
35
|
+
? spec.viewSpec.order
|
|
36
|
+
: Object.keys(specProperties);
|
|
34
37
|
return (React.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => {
|
|
35
38
|
var _a;
|
|
36
39
|
return specProperties[property] ? (React.createElement(React.Fragment, { key: `${name ? name + '.' : ''}${property}` },
|
|
@@ -9,6 +9,7 @@ const b = block('object-base-view');
|
|
|
9
9
|
export const ObjectBaseView = (_a) => {
|
|
10
10
|
var { inline, spec, name, Layout } = _a, restProps = __rest(_a, ["inline", "spec", "name", "Layout"]);
|
|
11
11
|
const content = React.useMemo(() => {
|
|
12
|
+
var _a;
|
|
12
13
|
if (!spec.properties || !isObjectLike(spec.properties)) {
|
|
13
14
|
return null;
|
|
14
15
|
}
|
|
@@ -16,7 +17,9 @@ export const ObjectBaseView = (_a) => {
|
|
|
16
17
|
? filterPropertiesForObjectInline(spec.properties)
|
|
17
18
|
: spec.properties;
|
|
18
19
|
const delimiter = spec.viewSpec.delimiter;
|
|
19
|
-
const orderProperties = spec.viewSpec.order ||
|
|
20
|
+
const orderProperties = ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
|
|
21
|
+
? spec.viewSpec.order
|
|
22
|
+
: Object.keys(specProperties);
|
|
20
23
|
return (React.createElement("div", { className: b('content', { inline }) }, orderProperties.map((property) => specProperties[property] ? (React.createElement(React.Fragment, { key: `${name ? name + '.' : ''}${property}` },
|
|
21
24
|
React.createElement(ViewController, { spec: specProperties[property], name: `${name ? name + '.' : ''}${property}` }),
|
|
22
25
|
delimiter && delimiter[property] ? (React.createElement(Text, { className: b('delimiter') }, delimiter[property])) : null)) : null)));
|
|
@@ -13,6 +13,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
13
13
|
const specProperties = React.useMemo(() => (isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
|
|
14
14
|
const specBooleanMap = React.useMemo(() => { var _a; return (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap; }, [(_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.booleanMap]);
|
|
15
15
|
const [oneOfValue, setOneOfValue] = React.useState(() => {
|
|
16
|
+
var _a;
|
|
16
17
|
let valueKeys;
|
|
17
18
|
if (isObjectLike(input.value)) {
|
|
18
19
|
const keys = Object.keys(input.value);
|
|
@@ -20,7 +21,11 @@ export const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
20
21
|
valueKeys = keys;
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
+
if (valueKeys)
|
|
25
|
+
return valueKeys[0];
|
|
26
|
+
if ((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length)
|
|
27
|
+
return spec.viewSpec.order[0];
|
|
28
|
+
return Object.keys(specProperties)[0];
|
|
24
29
|
});
|
|
25
30
|
const onOneOfChange = React.useCallback(([newValue]) => {
|
|
26
31
|
if (newValue !== oneOfValue) {
|
|
@@ -43,7 +48,8 @@ export const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
43
48
|
}
|
|
44
49
|
return undefined;
|
|
45
50
|
}, [oneOfValue, specBooleanMap]);
|
|
46
|
-
const
|
|
51
|
+
const propertiesOrder = React.useMemo(() => { var _a; return (((_a = spec.viewSpec.order) === null || _a === void 0 ? void 0 : _a.length) ? spec.viewSpec.order : Object.keys(specProperties)); }, [spec.viewSpec.order, specProperties]);
|
|
52
|
+
const options = React.useMemo(() => propertiesOrder.map((value) => {
|
|
47
53
|
var _a, _b;
|
|
48
54
|
const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
|
|
49
55
|
((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
|
|
@@ -54,7 +60,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
|
|
|
54
60
|
title,
|
|
55
61
|
content: title,
|
|
56
62
|
};
|
|
57
|
-
}), [
|
|
63
|
+
}), [propertiesOrder, spec.description, specProperties]);
|
|
58
64
|
const togglerType = React.useMemo(() => {
|
|
59
65
|
var _a, _b, _c, _d;
|
|
60
66
|
if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 4) {
|