@gravity-ui/dynamic-forms 1.9.0 → 1.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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/build/cjs/lib/kit/components/Inputs/OneOf/OneOf.js +1 -1
  3. package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css +3 -0
  4. package/build/cjs/lib/kit/hooks/useOneOf/index.js +4 -0
  5. package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css +4 -0
  6. package/build/cjs/lib/kit/hooks/{useOneOf.js → useOneOf/useOneOf.js} +15 -7
  7. package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.js +1 -1
  8. package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css +3 -0
  9. package/build/esm/lib/kit/hooks/useOneOf/index.d.ts +1 -0
  10. package/build/esm/lib/kit/hooks/useOneOf/index.js +1 -0
  11. package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css +4 -0
  12. package/build/esm/lib/kit/hooks/{useOneOf.d.ts → useOneOf/useOneOf.d.ts} +3 -2
  13. package/build/esm/lib/kit/hooks/{useOneOf.js → useOneOf/useOneOf.js} +16 -7
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.9.1](https://github.com/gravity-ui/dynamic-forms/compare/v1.9.0...v1.9.1) (2023-06-07)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * fixed styles for transperant and toggler oneof ([#60](https://github.com/gravity-ui/dynamic-forms/issues/60)) ([64ca12a](https://github.com/gravity-ui/dynamic-forms/commit/64ca12ad87ffd50fdda24901cd8f2e70e8c03868))
9
+
3
10
  ## [1.9.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.8.1...v1.9.0) (2023-06-07)
4
11
 
5
12
 
package/build/cjs/lib/kit/components/Inputs/OneOf/OneOf.js CHANGED
@@ -20,7 +20,7 @@ const OneOfComponent = (props) => {
20
20
  base: !props.withoutIndent,
21
21
  flat: props.withoutIndent,
22
22
  }) },
23
- react_1.default.createElement("div", null, toggler),
23
+ toggler,
24
24
  specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
25
25
  react_1.default.createElement(core_1.Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: props.input.parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
26
26
  };
package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css CHANGED
@@ -11,6 +11,9 @@
11
11
  .df-transparent_without-max-width {
12
12
  max-width: unset;
13
13
  }
14
+ .df-transparent_without-max-width > .df-error-wrapper {
15
+ width: unset;
16
+ }
14
17
  .df-transparent__remove-button {
15
18
  margin-left: 5px;
16
19
  }
package/build/cjs/lib/kit/hooks/useOneOf/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./useOneOf"), exports);
package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css ADDED
@@ -0,0 +1,4 @@
1
+ .df-use-oneof__toggler_radio > .df-row {
2
+ width: unset;
3
+ max-width: unset;
4
+ }
package/build/cjs/lib/kit/hooks/{useOneOf.js → useOneOf/useOneOf.js} RENAMED
@@ -5,6 +5,8 @@ const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const uikit_1 = require("@gravity-ui/uikit");
7
7
  const lodash_1 = tslib_1.__importDefault(require("lodash"));
8
+ const utils_1 = require("../../utils");
9
+ const b = (0, utils_1.block)('use-oneof');
8
10
  const MAX_TAB_TITLE_LENGTH = 20;
9
11
  const useOneOf = ({ props, onTogglerChange }) => {
10
12
  var _a;
@@ -39,22 +41,28 @@ const useOneOf = ({ props, onTogglerChange }) => {
39
41
  content: title,
40
42
  };
41
43
  }), [spec.description, spec.viewSpec.order, specProperties]);
42
- const togglerInput = react_1.default.useMemo(() => {
44
+ const selectToggler = react_1.default.useMemo(() => {
43
45
  var _a, _b;
44
- if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
46
+ return ((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
45
47
  (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'select' ||
46
48
  options.length > 3 ||
47
- lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
49
+ lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
50
+ }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
51
+ const togglerInput = react_1.default.useMemo(() => {
52
+ if (selectToggler) {
48
53
  return (react_1.default.createElement(uikit_1.Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
49
54
  }
50
55
  return (react_1.default.createElement(uikit_1.RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
51
- }, [options, oneOfValue, onOneOfChange, name, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
56
+ }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
52
57
  const toggler = react_1.default.useMemo(() => {
53
58
  if (Layout) {
54
- return react_1.default.createElement(Layout, Object.assign({}, props), togglerInput);
59
+ return (react_1.default.createElement("div", { className: b('toggler', {
60
+ radio: !selectToggler,
61
+ }) },
62
+ react_1.default.createElement(Layout, Object.assign({}, props), togglerInput)));
55
63
  }
56
- return togglerInput;
57
- }, [Layout, togglerInput, props]);
64
+ return react_1.default.createElement("div", null, togglerInput);
65
+ }, [Layout, togglerInput, selectToggler, props]);
58
66
  return { oneOfValue, specProperties, toggler, togglerInput };
59
67
  };
60
68
  exports.useOneOf = useOneOf;
package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.js CHANGED
@@ -17,7 +17,7 @@ const OneOfComponent = (props) => {
17
17
  base: !props.withoutIndent,
18
18
  flat: props.withoutIndent,
19
19
  }) },
20
- React.createElement("div", null, toggler),
20
+ toggler,
21
21
  specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
22
22
  React.createElement(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: props.input.parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
23
23
  };
package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css CHANGED
@@ -11,6 +11,9 @@
11
11
  .df-transparent_without-max-width {
12
12
  max-width: unset;
13
13
  }
14
+ .df-transparent_without-max-width > .df-error-wrapper {
15
+ width: unset;
16
+ }
14
17
  .df-transparent__remove-button {
15
18
  margin-left: 5px;
16
19
  }
package/build/esm/lib/kit/hooks/useOneOf/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './useOneOf';
package/build/esm/lib/kit/hooks/useOneOf/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './useOneOf';
package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css ADDED
@@ -0,0 +1,4 @@
1
+ .df-use-oneof__toggler_radio > .df-row {
2
+ width: unset;
3
+ max-width: unset;
4
+ }
package/build/esm/lib/kit/hooks/{useOneOf.d.ts → useOneOf/useOneOf.d.ts} RENAMED
@@ -1,11 +1,12 @@
1
- import { ObjectIndependentInputProps } from '../../core';
1
+ import { ObjectIndependentInputProps } from '../../../core';
2
+ import './useOneOf.css';
2
3
  export interface UseOneOfParams {
3
4
  props: ObjectIndependentInputProps;
4
5
  onTogglerChange?: (value: string) => void;
5
6
  }
6
7
  export declare const useOneOf: ({ props, onTogglerChange }: UseOneOfParams) => {
7
8
  oneOfValue: string;
8
- specProperties: Record<string, import("../../core").Spec>;
9
+ specProperties: Record<string, import("../../../core").Spec>;
9
10
  toggler: JSX.Element;
10
11
  togglerInput: JSX.Element;
11
12
  };
package/build/esm/lib/kit/hooks/{useOneOf.js → useOneOf/useOneOf.js} RENAMED
@@ -1,6 +1,9 @@
1
1
  import React from 'react';
2
2
  import { RadioButton, Select } from '@gravity-ui/uikit';
3
3
  import _ from 'lodash';
4
+ import { block } from '../../utils';
5
+ import './useOneOf.css';
6
+ const b = block('use-oneof');
4
7
  const MAX_TAB_TITLE_LENGTH = 20;
5
8
  export const useOneOf = ({ props, onTogglerChange }) => {
6
9
  var _a;
@@ -35,21 +38,27 @@ export const useOneOf = ({ props, onTogglerChange }) => {
35
38
  content: title,
36
39
  };
37
40
  }), [spec.description, spec.viewSpec.order, specProperties]);
38
- const togglerInput = React.useMemo(() => {
41
+ const selectToggler = React.useMemo(() => {
39
42
  var _a, _b;
40
- if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
43
+ return ((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
41
44
  (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'select' ||
42
45
  options.length > 3 ||
43
- _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
46
+ _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
47
+ }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
48
+ const togglerInput = React.useMemo(() => {
49
+ if (selectToggler) {
44
50
  return (React.createElement(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
45
51
  }
46
52
  return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
47
- }, [options, oneOfValue, onOneOfChange, name, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
53
+ }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
48
54
  const toggler = React.useMemo(() => {
49
55
  if (Layout) {
50
- return React.createElement(Layout, Object.assign({}, props), togglerInput);
56
+ return (React.createElement("div", { className: b('toggler', {
57
+ radio: !selectToggler,
58
+ }) },
59
+ React.createElement(Layout, Object.assign({}, props), togglerInput)));
51
60
  }
52
- return togglerInput;
53
- }, [Layout, togglerInput, props]);
61
+ return React.createElement("div", null, togglerInput);
62
+ }, [Layout, togglerInput, selectToggler, props]);
54
63
  return { oneOfValue, specProperties, toggler, togglerInput };
55
64
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dynamic-forms",
3
- "version": "1.9.0",
3
+ "version": "1.9.1",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",