@gravity-ui/dynamic-forms 5.8.1 → 5.9.0

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 (8) hide show
  1. package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.js +6 -4
  2. package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css +5 -0
  3. package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.js +13 -8
  4. package/build/esm/lib/core/types/specs.d.ts +1 -1
  5. package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.js +6 -4
  6. package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css +5 -0
  7. package/build/esm/lib/kit/hooks/useOneOf/useOneOf.js +14 -9
  8. package/package.json +1 -1
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/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.0",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",