@gravity-ui/dynamic-forms 5.8.1 → 5.9.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.
Files changed (10) hide show
  1. package/build/cjs/lib/core/components/Form/Controller/utils.js +2 -2
  2. package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.js +6 -4
  3. package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css +5 -0
  4. package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.js +13 -8
  5. package/build/esm/lib/core/components/Form/Controller/utils.js +2 -2
  6. package/build/esm/lib/core/types/specs.d.ts +1 -1
  7. package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.js +6 -4
  8. package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css +5 -0
  9. package/build/esm/lib/kit/hooks/useOneOf/useOneOf.js +14 -9
  10. package/package.json +1 -1
package/build/cjs/lib/core/components/Form/Controller/utils.js CHANGED
@@ -113,7 +113,7 @@ const getFieldInitials = ({ name, spec, valueFromParent, initialValue, validate,
113
113
  value = valueMutator.value;
114
114
  }
115
115
  if ((0, isNil_1.default)(value)) {
116
- if (spec.defaultValue) {
116
+ if (!(0, isNil_1.default)(spec.defaultValue)) {
117
117
  value = (0, utils_1.transformArrIn)(spec.defaultValue);
118
118
  }
119
119
  // if the spec with type array or object, and this spec has "required === true",
@@ -156,7 +156,7 @@ const getFieldMethods = () => {
156
156
  const error = (validate === null || validate === void 0 ? void 0 : validate((0, utils_1.transformArrOut)(_value))) || errorMutator;
157
157
  let value = (0, utils_1.transformArrIn)(_value);
158
158
  if ((0, helpers_1.isNumberSpec)(spec) && !error) {
159
- value = (value ? Number(value) : undefined);
159
+ value = ((0, isNil_1.default)(value) || value === '' ? undefined : Number(value));
160
160
  }
161
161
  let newChildErrors = Object.assign({}, state.childErrors);
162
162
  if (childErrors) {
package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.js CHANGED
@@ -15,12 +15,14 @@ const OneOfViewComponent = (props) => {
15
15
  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]);
16
16
  const valueKey = react_1.default.useMemo(() => Object.keys(value)[0], [value]);
17
17
  const valueName = react_1.default.useMemo(() => {
18
- var _a, _b, _c;
19
- if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'checkbox' && specBooleanMap) {
18
+ var _a, _b, _c, _d;
19
+ if ((((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'checkbox' ||
20
+ ((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'switch') &&
21
+ specBooleanMap) {
20
22
  return (0, utils_1.objectKeys)(specBooleanMap).find((key) => specBooleanMap[key] === valueKey);
21
23
  }
22
- return (((_b = spec.description) === null || _b === void 0 ? void 0 : _b[valueKey]) ||
23
- ((_c = specProperties[valueKey]) === null || _c === void 0 ? void 0 : _c.viewSpec.layoutTitle) ||
24
+ return (((_c = spec.description) === null || _c === void 0 ? void 0 : _c[valueKey]) ||
25
+ ((_d = specProperties[valueKey]) === null || _d === void 0 ? void 0 : _d.viewSpec.layoutTitle) ||
24
26
  valueKey);
25
27
  }, [
26
28
  valueKey,
package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css CHANGED
@@ -38,4 +38,9 @@
38
38
  height: var(--df-use-oneof-checkbox-height, 28px);
39
39
  display: flex;
40
40
  align-items: center;
41
+ }
42
+ .df-use-oneof__switch {
43
+ height: var(--df-use-oneof-switch-height, 28px);
44
+ display: flex;
45
+ align-items: center;
41
46
  }
package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.js CHANGED
@@ -37,14 +37,14 @@ const useOneOf = ({ props, onTogglerChange }) => {
37
37
  onTogglerChange === null || onTogglerChange === void 0 ? void 0 : onTogglerChange(newValue);
38
38
  }
39
39
  }, [setOneOfValue, input.onChange, oneOfValue]);
40
- const onCheckboxChange = react_1.default.useCallback((checked) => {
40
+ const onCheckedChange = react_1.default.useCallback((checked) => {
41
41
  if (specBooleanMap) {
42
42
  const value = String(checked);
43
43
  const newValue = specBooleanMap[value];
44
44
  onOneOfChange([newValue]);
45
45
  }
46
46
  }, [onOneOfChange, specBooleanMap]);
47
- const checkboxValue = react_1.default.useMemo(() => {
47
+ const checkedValue = react_1.default.useMemo(() => {
48
48
  if (specBooleanMap) {
49
49
  const keyBooleanMap = (0, utils_1.objectKeys)(specBooleanMap).find((key) => specBooleanMap[key] === oneOfValue);
50
50
  return keyBooleanMap === 'true';
@@ -65,7 +65,7 @@ const useOneOf = ({ props, onTogglerChange }) => {
65
65
  };
66
66
  }), [propertiesOrder, spec.description, specProperties]);
67
67
  const togglerType = react_1.default.useMemo(() => {
68
- var _a, _b, _c, _d;
68
+ var _a, _b, _c, _d, _e;
69
69
  if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 4) {
70
70
  return 'card';
71
71
  }
@@ -75,10 +75,11 @@ const useOneOf = ({ props, onTogglerChange }) => {
75
75
  (0, some_1.default)(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
76
76
  return 'select';
77
77
  }
78
- if (((_d = spec.viewSpec.oneOfParams) === null || _d === void 0 ? void 0 : _d.toggler) === 'checkbox' &&
78
+ if ((((_d = spec.viewSpec.oneOfParams) === null || _d === void 0 ? void 0 : _d.toggler) === 'checkbox' ||
79
+ ((_e = spec.viewSpec.oneOfParams) === null || _e === void 0 ? void 0 : _e.toggler) === 'switch') &&
79
80
  options.length === 2 &&
80
81
  specBooleanMap) {
81
- return 'checkbox';
82
+ return spec.viewSpec.oneOfParams.toggler;
82
83
  }
83
84
  return 'radio';
84
85
  }, [options, (_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler, specBooleanMap]);
@@ -97,7 +98,11 @@ const useOneOf = ({ props, onTogglerChange }) => {
97
98
  }
98
99
  if (togglerType === 'checkbox') {
99
100
  return (react_1.default.createElement("div", { className: b('checkbox') },
100
- react_1.default.createElement(uikit_1.Checkbox, { checked: checkboxValue, onUpdate: onCheckboxChange, disabled: spec.viewSpec.disabled, qa: name })));
101
+ react_1.default.createElement(uikit_1.Checkbox, { checked: checkedValue, onUpdate: onCheckedChange, disabled: spec.viewSpec.disabled, qa: name })));
102
+ }
103
+ if (togglerType === 'switch') {
104
+ return (react_1.default.createElement("div", { className: b('switch') },
105
+ react_1.default.createElement(uikit_1.Switch, { checked: checkedValue, onUpdate: onCheckedChange, disabled: spec.viewSpec.disabled, qa: name })));
101
106
  }
102
107
  return (react_1.default.createElement(uikit_1.SegmentedRadioGroup, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.SegmentedRadioGroup.Option, { key: option.value, value: option.value }, option.title)))));
103
108
  }, [
@@ -109,8 +114,8 @@ const useOneOf = ({ props, onTogglerChange }) => {
109
114
  options,
110
115
  onOneOfChange,
111
116
  specProperties,
112
- onCheckboxChange,
113
- checkboxValue,
117
+ onCheckedChange,
118
+ checkedValue,
114
119
  ]);
115
120
  const toggler = react_1.default.useMemo(() => {
116
121
  if (Layout) {
package/build/esm/lib/core/components/Form/Controller/utils.js CHANGED
@@ -103,7 +103,7 @@ export const getFieldInitials = ({ name, spec, valueFromParent, initialValue, va
103
103
  value = valueMutator.value;
104
104
  }
105
105
  if (isNil(value)) {
106
- if (spec.defaultValue) {
106
+ if (!isNil(spec.defaultValue)) {
107
107
  value = transformArrIn(spec.defaultValue);
108
108
  }
109
109
  // if the spec with type array or object, and this spec has "required === true",
@@ -145,7 +145,7 @@ export const getFieldMethods = () => {
145
145
  const error = (validate === null || validate === void 0 ? void 0 : validate(transformArrOut(_value))) || errorMutator;
146
146
  let value = transformArrIn(_value);
147
147
  if (isNumberSpec(spec) && !error) {
148
- value = (value ? Number(value) : undefined);
148
+ value = (isNil(value) || value === '' ? undefined : Number(value));
149
149
  }
150
150
  let newChildErrors = Object.assign({}, state.childErrors);
151
151
  if (childErrors) {
package/build/esm/lib/core/types/specs.d.ts CHANGED
@@ -101,7 +101,7 @@ export interface ObjectSpec<LinkType = any, InputComponentProps extends Record<s
101
101
  order?: string[];
102
102
  link?: LinkType;
103
103
  oneOfParams?: {
104
- toggler?: 'select' | 'radio' | 'card' | 'checkbox';
104
+ toggler?: 'select' | 'radio' | 'card' | 'checkbox' | 'switch';
105
105
  booleanMap?: Record<'true' | 'false', string>;
106
106
  };
107
107
  placeholder?: string;
package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.js CHANGED
@@ -12,12 +12,14 @@ const OneOfViewComponent = (props) => {
12
12
  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]);
13
13
  const valueKey = React.useMemo(() => Object.keys(value)[0], [value]);
14
14
  const valueName = React.useMemo(() => {
15
- var _a, _b, _c;
16
- if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'checkbox' && specBooleanMap) {
15
+ var _a, _b, _c, _d;
16
+ if ((((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'checkbox' ||
17
+ ((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'switch') &&
18
+ specBooleanMap) {
17
19
  return objectKeys(specBooleanMap).find((key) => specBooleanMap[key] === valueKey);
18
20
  }
19
- return (((_b = spec.description) === null || _b === void 0 ? void 0 : _b[valueKey]) ||
20
- ((_c = specProperties[valueKey]) === null || _c === void 0 ? void 0 : _c.viewSpec.layoutTitle) ||
21
+ return (((_c = spec.description) === null || _c === void 0 ? void 0 : _c[valueKey]) ||
22
+ ((_d = specProperties[valueKey]) === null || _d === void 0 ? void 0 : _d.viewSpec.layoutTitle) ||
21
23
  valueKey);
22
24
  }, [
23
25
  valueKey,
package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css CHANGED
@@ -38,4 +38,9 @@
38
38
  height: var(--df-use-oneof-checkbox-height, 28px);
39
39
  display: flex;
40
40
  align-items: center;
41
+ }
42
+ .df-use-oneof__switch {
43
+ height: var(--df-use-oneof-switch-height, 28px);
44
+ display: flex;
45
+ align-items: center;
41
46
  }
package/build/esm/lib/kit/hooks/useOneOf/useOneOf.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Checkbox, SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
2
+ import { Checkbox, SegmentedRadioGroup, Select, Switch } from '@gravity-ui/uikit';
3
3
  import isObjectLike from 'lodash/isObjectLike';
4
4
  import some from 'lodash/some';
5
5
  import { TogglerCard } from '../../components';
@@ -34,14 +34,14 @@ export const useOneOf = ({ props, onTogglerChange }) => {
34
34
  onTogglerChange === null || onTogglerChange === void 0 ? void 0 : onTogglerChange(newValue);
35
35
  }
36
36
  }, [setOneOfValue, input.onChange, oneOfValue]);
37
- const onCheckboxChange = React.useCallback((checked) => {
37
+ const onCheckedChange = React.useCallback((checked) => {
38
38
  if (specBooleanMap) {
39
39
  const value = String(checked);
40
40
  const newValue = specBooleanMap[value];
41
41
  onOneOfChange([newValue]);
42
42
  }
43
43
  }, [onOneOfChange, specBooleanMap]);
44
- const checkboxValue = React.useMemo(() => {
44
+ const checkedValue = React.useMemo(() => {
45
45
  if (specBooleanMap) {
46
46
  const keyBooleanMap = objectKeys(specBooleanMap).find((key) => specBooleanMap[key] === oneOfValue);
47
47
  return keyBooleanMap === 'true';
@@ -62,7 +62,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
62
62
  };
63
63
  }), [propertiesOrder, spec.description, specProperties]);
64
64
  const togglerType = React.useMemo(() => {
65
- var _a, _b, _c, _d;
65
+ var _a, _b, _c, _d, _e;
66
66
  if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 4) {
67
67
  return 'card';
68
68
  }
@@ -72,10 +72,11 @@ export const useOneOf = ({ props, onTogglerChange }) => {
72
72
  some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
73
73
  return 'select';
74
74
  }
75
- if (((_d = spec.viewSpec.oneOfParams) === null || _d === void 0 ? void 0 : _d.toggler) === 'checkbox' &&
75
+ if ((((_d = spec.viewSpec.oneOfParams) === null || _d === void 0 ? void 0 : _d.toggler) === 'checkbox' ||
76
+ ((_e = spec.viewSpec.oneOfParams) === null || _e === void 0 ? void 0 : _e.toggler) === 'switch') &&
76
77
  options.length === 2 &&
77
78
  specBooleanMap) {
78
- return 'checkbox';
79
+ return spec.viewSpec.oneOfParams.toggler;
79
80
  }
80
81
  return 'radio';
81
82
  }, [options, (_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler, specBooleanMap]);
@@ -94,7 +95,11 @@ export const useOneOf = ({ props, onTogglerChange }) => {
94
95
  }
95
96
  if (togglerType === 'checkbox') {
96
97
  return (React.createElement("div", { className: b('checkbox') },
97
- React.createElement(Checkbox, { checked: checkboxValue, onUpdate: onCheckboxChange, disabled: spec.viewSpec.disabled, qa: name })));
98
+ React.createElement(Checkbox, { checked: checkedValue, onUpdate: onCheckedChange, disabled: spec.viewSpec.disabled, qa: name })));
99
+ }
100
+ if (togglerType === 'switch') {
101
+ return (React.createElement("div", { className: b('switch') },
102
+ React.createElement(Switch, { checked: checkedValue, onUpdate: onCheckedChange, disabled: spec.viewSpec.disabled, qa: name })));
98
103
  }
99
104
  return (React.createElement(SegmentedRadioGroup, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(SegmentedRadioGroup.Option, { key: option.value, value: option.value }, option.title)))));
100
105
  }, [
@@ -106,8 +111,8 @@ export const useOneOf = ({ props, onTogglerChange }) => {
106
111
  options,
107
112
  onOneOfChange,
108
113
  specProperties,
109
- onCheckboxChange,
110
- checkboxValue,
114
+ onCheckedChange,
115
+ checkedValue,
111
116
  ]);
112
117
  const toggler = React.useMemo(() => {
113
118
  if (Layout) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dynamic-forms",
3
- "version": "5.8.1",
3
+ "version": "5.9.1",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",