@gravity-ui/dynamic-forms 2.8.2 → 3.0.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 (104) hide show
  1. package/build/cjs/lib/core/components/Form/Controller.js +1 -5
  2. package/build/cjs/lib/core/components/Form/hooks/useRender.js +10 -8
  3. package/build/cjs/lib/core/components/Form/hooks/useSearch/useSearch.js +1 -1
  4. package/build/cjs/lib/core/components/View/ViewController.js +1 -4
  5. package/build/cjs/lib/core/components/View/hooks/useRender.js +12 -10
  6. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +0 -3
  7. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js +1 -1
  8. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +0 -3
  9. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js +5 -7
  10. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js +2 -2
  11. package/build/cjs/lib/kit/components/Inputs/index.js +0 -1
  12. package/build/cjs/lib/kit/components/Layouts/index.js +0 -3
  13. package/build/cjs/lib/kit/components/ViewLayouts/index.js +0 -3
  14. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +0 -3
  15. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js +5 -7
  16. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js +2 -2
  17. package/build/cjs/lib/kit/components/Views/index.js +0 -1
  18. package/build/cjs/lib/kit/constants/config.js +1 -179
  19. package/build/esm/lib/core/components/Form/Controller.js +1 -5
  20. package/build/esm/lib/core/components/Form/hooks/useRender.js +10 -8
  21. package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.d.ts +1 -1
  22. package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.js +1 -1
  23. package/build/esm/lib/core/components/View/ViewController.d.ts +1 -1
  24. package/build/esm/lib/core/components/View/ViewController.js +1 -4
  25. package/build/esm/lib/core/components/View/hooks/useRender.js +12 -10
  26. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +0 -3
  27. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.d.ts +0 -1
  28. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js +1 -1
  29. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +0 -3
  30. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.d.ts +0 -2
  31. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js +4 -5
  32. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.d.ts +0 -1
  33. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js +2 -2
  34. package/build/esm/lib/kit/components/Inputs/index.d.ts +0 -1
  35. package/build/esm/lib/kit/components/Inputs/index.js +0 -1
  36. package/build/esm/lib/kit/components/Layouts/index.d.ts +0 -3
  37. package/build/esm/lib/kit/components/Layouts/index.js +0 -3
  38. package/build/esm/lib/kit/components/ViewLayouts/index.d.ts +0 -3
  39. package/build/esm/lib/kit/components/ViewLayouts/index.js +0 -3
  40. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +0 -3
  41. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.d.ts +0 -1
  42. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.js +4 -5
  43. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.d.ts +0 -1
  44. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.js +2 -2
  45. package/build/esm/lib/kit/components/Views/index.d.ts +0 -1
  46. package/build/esm/lib/kit/components/Views/index.js +0 -1
  47. package/build/esm/lib/kit/constants/config.d.ts +0 -2
  48. package/build/esm/lib/kit/constants/config.js +1 -179
  49. package/package.json +1 -1
  50. package/build/cjs/lib/kit/components/Inputs/OneOfCard/OneOfCard.css +0 -6
  51. package/build/cjs/lib/kit/components/Inputs/OneOfCard/OneOfCard.js +0 -43
  52. package/build/cjs/lib/kit/components/Inputs/OneOfCard/index.js +0 -4
  53. package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.css +0 -3
  54. package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js +0 -30
  55. package/build/cjs/lib/kit/components/Layouts/AccordeonCardLayout/index.js +0 -4
  56. package/build/cjs/lib/kit/components/Layouts/Row2/Row2.css +0 -51
  57. package/build/cjs/lib/kit/components/Layouts/Row2/Row2.js +0 -30
  58. package/build/cjs/lib/kit/components/Layouts/Row2/index.js +0 -4
  59. package/build/cjs/lib/kit/components/Layouts/SectionCard/SectionCard.css +0 -3
  60. package/build/cjs/lib/kit/components/Layouts/SectionCard/SectionCard.js +0 -24
  61. package/build/cjs/lib/kit/components/Layouts/SectionCard/index.js +0 -4
  62. package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js +0 -16
  63. package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.js +0 -4
  64. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.css +0 -42
  65. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.js +0 -30
  66. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow2/index.js +0 -4
  67. package/build/cjs/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.js +0 -11
  68. package/build/cjs/lib/kit/components/ViewLayouts/ViewSectionCard/index.js +0 -4
  69. package/build/cjs/lib/kit/components/Views/OneOfCardView.js +0 -33
  70. package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.css +0 -6
  71. package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.d.ts +0 -3
  72. package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.js +0 -39
  73. package/build/esm/lib/kit/components/Inputs/OneOfCard/index.d.ts +0 -1
  74. package/build/esm/lib/kit/components/Inputs/OneOfCard/index.js +0 -1
  75. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.css +0 -3
  76. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.d.ts +0 -3
  77. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js +0 -26
  78. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/index.d.ts +0 -1
  79. package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/index.js +0 -1
  80. package/build/esm/lib/kit/components/Layouts/Row2/Row2.css +0 -51
  81. package/build/esm/lib/kit/components/Layouts/Row2/Row2.d.ts +0 -3
  82. package/build/esm/lib/kit/components/Layouts/Row2/Row2.js +0 -26
  83. package/build/esm/lib/kit/components/Layouts/Row2/index.d.ts +0 -1
  84. package/build/esm/lib/kit/components/Layouts/Row2/index.js +0 -1
  85. package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.css +0 -3
  86. package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.d.ts +0 -8
  87. package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.js +0 -20
  88. package/build/esm/lib/kit/components/Layouts/SectionCard/index.d.ts +0 -1
  89. package/build/esm/lib/kit/components/Layouts/SectionCard/index.js +0 -1
  90. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.d.ts +0 -2
  91. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js +0 -11
  92. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.d.ts +0 -1
  93. package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/index.js +0 -1
  94. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.css +0 -42
  95. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.d.ts +0 -3
  96. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/ViewRow2.js +0 -26
  97. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/index.d.ts +0 -1
  98. package/build/esm/lib/kit/components/ViewLayouts/ViewRow2/index.js +0 -1
  99. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.d.ts +0 -3
  100. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/ViewSectionCard.js +0 -5
  101. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/index.d.ts +0 -1
  102. package/build/esm/lib/kit/components/ViewLayouts/ViewSectionCard/index.js +0 -1
  103. package/build/esm/lib/kit/components/Views/OneOfCardView.d.ts +0 -2
  104. package/build/esm/lib/kit/components/Views/OneOfCardView.js +0 -28
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SectionCard2 = exports.SectionCard = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const __1 = require("../../");
7
- const __2 = require("../../../");
8
- const core_1 = require("../../../../core");
9
- const utils_1 = require("../../../utils");
10
- const b = (0, utils_1.block)('section-card');
11
- const SectionCardBase = (_a) => {
12
- var { name, spec, titleSize, ignoreDescription, children } = _a, restProps = tslib_1.__rest(_a, ["name", "spec", "titleSize", "ignoreDescription", "children"]);
13
- const meta = restProps.meta;
14
- const arrOrObjFlag = (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec);
15
- let content = children;
16
- if (meta) {
17
- content = (react_1.default.createElement(__2.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
18
- }
19
- return (react_1.default.createElement(__1.AccordeonCard, { className: b(), name: name, header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
20
- };
21
- const SectionCard = (props) => react_1.default.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "m" }));
22
- exports.SectionCard = SectionCard;
23
- const SectionCard2 = (props) => react_1.default.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "s" }));
24
- exports.SectionCard2 = SectionCard2;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./SectionCard"), exports);
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ViewAccordeonCard = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const __1 = require("../../");
7
- const utils_1 = require("../../../utils");
8
- const ViewAccordeonCard = ({ name, value, spec, children, }) => {
9
- const [open, setOpen] = react_1.default.useState(true);
10
- const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
11
- if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
12
- return null;
13
- }
14
- return (react_1.default.createElement(__1.AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
15
- };
16
- exports.ViewAccordeonCard = ViewAccordeonCard;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./ViewAccordeonCard"), exports);
@@ -1,42 +0,0 @@
1
- .df-view-row2 {
2
- width: 100%;
3
- display: flex;
4
- border-bottom: 1px solid var(--yc-color-line-generic);
5
- padding: 11px 0;
6
- }
7
- .df-view-row2:last-child {
8
- border: none;
9
- }
10
- .df-view-row2_next-not-row {
11
- margin-bottom: 20px;
12
- border-bottom: none;
13
- }
14
- .df-view-row2__left {
15
- width: 190px;
16
- max-width: 190px;
17
- min-width: 190px;
18
- display: flex;
19
- align-items: baseline;
20
- overflow: hidden;
21
- padding-right: 10px;
22
- }
23
- .df-view-row2__title {
24
- white-space: nowrap;
25
- overflow: hidden;
26
- text-overflow: ellipsis;
27
- font-weight: 700;
28
- color: var(--yc-color-text-primary);
29
- }
30
- .df-view-row2__right {
31
- width: 100%;
32
- white-space: nowrap;
33
- overflow: hidden;
34
- text-overflow: ellipsis;
35
- color: var(--yc-color-text-secondary);
36
- }
37
- .df-view-row2__right > .df-view-transparent {
38
- margin-bottom: 6px;
39
- }
40
- .df-view-row2__right > .df-view-transparent:last-child {
41
- margin-bottom: 0;
42
- }
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ViewRow2 = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const utils_1 = require("../../../utils");
7
- const b = (0, utils_1.block)('view-row2');
8
- const isNextNodeNotViewRow2 = (node) => {
9
- var _a;
10
- return Boolean(node === null || node === void 0 ? void 0 : node.nextElementSibling) &&
11
- !((_a = node === null || node === void 0 ? void 0 : node.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className.includes('df-view-row2'));
12
- };
13
- const ViewRow2 = ({ value, spec, children, }) => {
14
- const ref = react_1.default.useRef(null);
15
- react_1.default.useEffect(() => {
16
- var _a, _b;
17
- if (isNextNodeNotViewRow2(ref.current) &&
18
- !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.className.includes('df-view-row2_next-not-row'))) {
19
- (_b = ref.current) === null || _b === void 0 ? void 0 : _b.classList.add('df-view-row2_next-not-row');
20
- }
21
- });
22
- if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
23
- return null;
24
- }
25
- return (react_1.default.createElement("div", { ref: ref, className: b({ 'next-not-row': isNextNodeNotViewRow2(ref.current) }) },
26
- react_1.default.createElement("div", { className: b('left') },
27
- react_1.default.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle)),
28
- react_1.default.createElement("div", { className: b('right') }, children)));
29
- };
30
- exports.ViewRow2 = ViewRow2;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./ViewRow2"), exports);
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ViewSectionCard2 = exports.ViewSectionCard = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const utils_1 = require("../../../utils");
7
- const Layouts_1 = require("../../Layouts");
8
- const ViewSectionCard = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.SectionCard, Object.assign({}, props, { ignoreDescription: true })) : null;
9
- exports.ViewSectionCard = ViewSectionCard;
10
- const ViewSectionCard2 = (props) => (0, utils_1.isNotEmptyValue)(props.value, props.spec) ? react_1.default.createElement(Layouts_1.SectionCard2, Object.assign({}, props, { ignoreDescription: true })) : null;
11
- exports.ViewSectionCard2 = ViewSectionCard2;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./ViewSectionCard"), exports);
@@ -1,33 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.OneOfCardView = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const lodash_1 = tslib_1.__importDefault(require("lodash"));
7
- const __1 = require("../");
8
- const core_1 = require("../../../core");
9
- const OneOfCardView = (props) => {
10
- const { value = {}, spec, Layout, name } = props;
11
- const [open, setOpen] = react_1.default.useState(true);
12
- const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
13
- const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
14
- const valueKey = react_1.default.useMemo(() => Object.keys(value)[0], [value]);
15
- const valueName = react_1.default.useMemo(() => {
16
- var _a, _b;
17
- return (((_a = spec.description) === null || _a === void 0 ? void 0 : _a[valueKey]) ||
18
- ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
19
- valueKey);
20
- }, [valueKey, spec.description, specProperties]);
21
- const wrappedValue = react_1.default.useMemo(() => {
22
- if (Layout) {
23
- return (react_1.default.createElement(Layout, Object.assign({}, props, { value: valueName }),
24
- react_1.default.createElement(react_1.default.Fragment, null, valueName)));
25
- }
26
- return valueName;
27
- }, [Layout, valueName]);
28
- if (!value || !Object.keys(value).length) {
29
- return null;
30
- }
31
- return (react_1.default.createElement(__1.AccordeonCard, { className: "df-accordeon-card-layout", name: name, header: wrappedValue, open: open, onToggle: onToggle, ignoreHeaderToggle: true }, specProperties[valueKey] ? (react_1.default.createElement(core_1.ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
32
- };
33
- exports.OneOfCardView = OneOfCardView;
@@ -1,6 +0,0 @@
1
- .df-oneof-card {
2
- margin-bottom: 20px;
3
- }
4
- .df-oneof-card .df-accordeon-card__header-toggle-btn {
5
- margin-left: 5px;
6
- }
@@ -1,3 +0,0 @@
1
- import { ObjectIndependentInput } from '../../../../core';
2
- import './OneOfCard.css';
3
- export declare const OneOfCard: ObjectIndependentInput;
@@ -1,39 +0,0 @@
1
- import React from 'react';
2
- import _ from 'lodash';
3
- import { AccordeonCard } from '../../';
4
- import { Controller, isArrayItem, } from '../../../../core';
5
- import { useErrorChecker, useOneOf } from '../../../hooks';
6
- import { block } from '../../../utils';
7
- import { Row2 } from '../../Layouts';
8
- import { RemoveButton } from '../../Layouts/Accordeon/RemoveButton';
9
- import './OneOfCard.css';
10
- const b = block('oneof-card');
11
- export const OneOfCard = (props) => {
12
- var _a;
13
- const { input, meta, spec, name } = props;
14
- const [open, setOpen] = React.useState(true);
15
- const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
16
- const onOpen = React.useCallback(() => setOpen(true), [setOpen]);
17
- const { oneOfValue, specProperties, togglerInput } = useOneOf({
18
- props,
19
- onTogglerChange: onOpen,
20
- });
21
- const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
22
- const toggler = React.useMemo(() => {
23
- const specWithoutDescription = Object.assign(Object.assign({}, props.spec), { viewSpec: Object.assign(Object.assign({}, props.spec.viewSpec), { layoutDescription: '' }) });
24
- const name = arrayItem ? '' : props.name;
25
- return (React.createElement(Row2, Object.assign({}, props, { spec: specWithoutDescription, name: name }), togglerInput));
26
- }, [togglerInput, props, arrayItem]);
27
- const headerActionsTemplate = React.useMemo(() => {
28
- if (arrayItem) {
29
- return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });
30
- }
31
- return null;
32
- }, [arrayItem, input.onDrop, name]);
33
- const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
34
- const value = _.set({}, childName.split(`${input.name}.`).join(''), childValue);
35
- input.onChange(value, childErrors);
36
- }, [input.onChange, input.name]);
37
- useErrorChecker({ name, meta, open, setOpen });
38
- return (React.createElement(AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: input.parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
39
- };
@@ -1 +0,0 @@
1
- export * from './OneOfCard';
@@ -1 +0,0 @@
1
- export * from './OneOfCard';
@@ -1,3 +0,0 @@
1
- .df-accordeon-card-layout {
2
- margin-bottom: 20px;
3
- }
@@ -1,3 +0,0 @@
1
- import { ArrayLayoutProps, ObjectLayoutProps } from '../../../../core';
2
- import './AccordeonCardLayout.css';
3
- export declare const AccordeonCardLayout: <T extends ArrayLayoutProps | ObjectLayoutProps>({ name, spec, input, meta, children, }: T) => JSX.Element;
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { AccordeonCard } from '../../';
3
- import { ErrorWrapper } from '../../../components';
4
- import { useErrorChecker } from '../../../hooks';
5
- import { block } from '../../../utils';
6
- import { RemoveButton } from '../Accordeon/RemoveButton';
7
- import './AccordeonCardLayout.css';
8
- const b = block('accordeon-card-layout');
9
- export const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
10
- var _a;
11
- const [open, setOpen] = React.useState(Boolean((_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.layoutOpen));
12
- const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
13
- const onDrop = React.useCallback(() => {
14
- setOpen(false);
15
- input.onDrop();
16
- }, [input.onDrop, setOpen]);
17
- const removeButton = React.useMemo(() => {
18
- if (spec.required || !input.value) {
19
- return null;
20
- }
21
- return React.createElement(RemoveButton, { onDrop: onDrop, name: name });
22
- }, [spec.required, input.value, onDrop, name]);
23
- useErrorChecker({ name, meta, open, setOpen });
24
- return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
25
- React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
26
- };
@@ -1 +0,0 @@
1
- export * from './AccordeonCardLayout';
@@ -1 +0,0 @@
1
- export * from './AccordeonCardLayout';
@@ -1,51 +0,0 @@
1
- .df-row2 {
2
- width: 100%;
3
- display: flex;
4
- margin-bottom: 15px;
5
- }
6
- .df-row2:last-child {
7
- margin-bottom: 0;
8
- }
9
- .df-row2__left {
10
- width: 180px;
11
- min-width: 180px;
12
- display: flex;
13
- flex-direction: column;
14
- font-weight: bold;
15
- }
16
- .df-row2__left::after {
17
- content: "";
18
- width: 100%;
19
- flex-shrink: 1;
20
- }
21
- .df-row2__title {
22
- padding-right: 5px;
23
- min-height: 28px;
24
- display: flex;
25
- align-items: center;
26
- font-weight: 700;
27
- }
28
- .df-row2__right {
29
- display: flex;
30
- flex-direction: column;
31
- flex-grow: 1;
32
- }
33
- .df-row2__right-inner {
34
- display: flex;
35
- }
36
- .df-row2__right .df-select,
37
- .df-row2__right .df-multi-select,
38
- .df-row2__right .df-transparent_array-item {
39
- max-width: unset;
40
- }
41
- .df-row2__description {
42
- margin-top: 10px;
43
- color: var(--yc-color-text-secondary);
44
- }
45
- .df-row2__remove-button {
46
- margin-left: 5px;
47
- }
48
- .df-row2__required-mark {
49
- margin-left: 2px;
50
- color: var(--yc-color-text-danger);
51
- }
@@ -1,3 +0,0 @@
1
- import { FieldValue, LayoutProps, Spec } from '../../../../core';
2
- import './Row2.css';
3
- export declare const Row2: <T extends FieldValue, S extends Spec>({ name, spec, input, meta, children, }: LayoutProps<T, S>) => JSX.Element;
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { TrashBin } from '@gravity-ui/icons';
3
- import { Button, Icon } from '@gravity-ui/uikit';
4
- import { isArrayItem, isArraySpec, isObjectSpec, withGenerateButton, } from '../../../../core';
5
- import { ErrorWrapper, GenerateRandomValueButton } from '../../../components';
6
- import { block } from '../../../utils';
7
- import './Row2.css';
8
- const b = block('row2');
9
- export const Row2 = ({ name, spec, input, meta, children, }) => {
10
- const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
11
- return (React.createElement("div", { className: b() },
12
- React.createElement("div", { className: b('left') },
13
- React.createElement("div", { className: b('title') },
14
- spec.viewSpec.layoutTitle,
15
- spec.required && React.createElement("span", { className: b('required-mark') }, "*"))),
16
- React.createElement("div", { className: b('right') },
17
- React.createElement("div", { className: b('right-inner') },
18
- React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles:
19
- // TODO: remove condition spec.viewSpec.type !== 'select'
20
- (isArraySpec(spec) && spec.viewSpec.type !== 'select') ||
21
- isObjectSpec(spec) }, children),
22
- generateButton ? (React.createElement(GenerateRandomValueButton, { spec: spec, onChange: input.onChange })) : null,
23
- isArrayItem(name) ? (React.createElement(Button, { view: "flat-secondary", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
24
- React.createElement(Icon, { data: TrashBin, size: 16 }))) : null),
25
- spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
26
- };
@@ -1 +0,0 @@
1
- export * from './Row2';
@@ -1 +0,0 @@
1
- export * from './Row2';
@@ -1,3 +0,0 @@
1
- .df-section-card {
2
- margin-bottom: 20px;
3
- }
@@ -1,8 +0,0 @@
1
- import { FieldValue, FormValue, LayoutProps, Spec, ViewLayoutProps } from '../../../../core';
2
- import './SectionCard.css';
3
- export interface SectionCardProps {
4
- titleSize: 's' | 'm';
5
- ignoreDescription?: boolean;
6
- }
7
- export declare const SectionCard: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionCardProps, "ignoreDescription">) => JSX.Element;
8
- export declare const SectionCard2: <D extends FieldValue, T extends FormValue, S extends Spec>(props: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & Pick<SectionCardProps, "ignoreDescription">) => JSX.Element;
@@ -1,20 +0,0 @@
1
- import { __rest } from "tslib";
2
- import React from 'react';
3
- import { AccordeonCard } from '../../';
4
- import { ErrorWrapper } from '../../../';
5
- import { isArraySpec, isObjectSpec, } from '../../../../core';
6
- import { block } from '../../../utils';
7
- import './SectionCard.css';
8
- const b = block('section-card');
9
- const SectionCardBase = (_a) => {
10
- var { name, spec, titleSize, ignoreDescription, children } = _a, restProps = __rest(_a, ["name", "spec", "titleSize", "ignoreDescription", "children"]);
11
- const meta = restProps.meta;
12
- const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
13
- let content = children;
14
- if (meta) {
15
- content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
16
- }
17
- return (React.createElement(AccordeonCard, { className: b(), name: name, header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
18
- };
19
- export const SectionCard = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "m" }));
20
- export const SectionCard2 = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "s" }));
@@ -1 +0,0 @@
1
- export * from './SectionCard';
@@ -1 +0,0 @@
1
- export * from './SectionCard';
@@ -1,2 +0,0 @@
1
- import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
2
- export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { AccordeonCard } from '../../';
3
- import { isNotEmptyValue } from '../../../utils';
4
- export const ViewAccordeonCard = ({ name, value, spec, children, }) => {
5
- const [open, setOpen] = React.useState(true);
6
- const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
7
- if (!isNotEmptyValue(value, spec)) {
8
- return null;
9
- }
10
- return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
11
- };
@@ -1 +0,0 @@
1
- export * from './ViewAccordeonCard';
@@ -1 +0,0 @@
1
- export * from './ViewAccordeonCard';
@@ -1,42 +0,0 @@
1
- .df-view-row2 {
2
- width: 100%;
3
- display: flex;
4
- border-bottom: 1px solid var(--yc-color-line-generic);
5
- padding: 11px 0;
6
- }
7
- .df-view-row2:last-child {
8
- border: none;
9
- }
10
- .df-view-row2_next-not-row {
11
- margin-bottom: 20px;
12
- border-bottom: none;
13
- }
14
- .df-view-row2__left {
15
- width: 190px;
16
- max-width: 190px;
17
- min-width: 190px;
18
- display: flex;
19
- align-items: baseline;
20
- overflow: hidden;
21
- padding-right: 10px;
22
- }
23
- .df-view-row2__title {
24
- white-space: nowrap;
25
- overflow: hidden;
26
- text-overflow: ellipsis;
27
- font-weight: 700;
28
- color: var(--yc-color-text-primary);
29
- }
30
- .df-view-row2__right {
31
- width: 100%;
32
- white-space: nowrap;
33
- overflow: hidden;
34
- text-overflow: ellipsis;
35
- color: var(--yc-color-text-secondary);
36
- }
37
- .df-view-row2__right > .df-view-transparent {
38
- margin-bottom: 6px;
39
- }
40
- .df-view-row2__right > .df-view-transparent:last-child {
41
- margin-bottom: 0;
42
- }
@@ -1,3 +0,0 @@
1
- import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
2
- import './ViewRow2.css';
3
- export declare const ViewRow2: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
- import { block, isNotEmptyValue } from '../../../utils';
3
- import './ViewRow2.css';
4
- const b = block('view-row2');
5
- const isNextNodeNotViewRow2 = (node) => {
6
- var _a;
7
- return Boolean(node === null || node === void 0 ? void 0 : node.nextElementSibling) &&
8
- !((_a = node === null || node === void 0 ? void 0 : node.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className.includes('df-view-row2'));
9
- };
10
- export const ViewRow2 = ({ value, spec, children, }) => {
11
- const ref = React.useRef(null);
12
- React.useEffect(() => {
13
- var _a, _b;
14
- if (isNextNodeNotViewRow2(ref.current) &&
15
- !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.className.includes('df-view-row2_next-not-row'))) {
16
- (_b = ref.current) === null || _b === void 0 ? void 0 : _b.classList.add('df-view-row2_next-not-row');
17
- }
18
- });
19
- if (!isNotEmptyValue(value, spec)) {
20
- return null;
21
- }
22
- return (React.createElement("div", { ref: ref, className: b({ 'next-not-row': isNextNodeNotViewRow2(ref.current) }) },
23
- React.createElement("div", { className: b('left') },
24
- React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle)),
25
- React.createElement("div", { className: b('right') }, children)));
26
- };
@@ -1 +0,0 @@
1
- export * from './ViewRow2';
@@ -1 +0,0 @@
1
- export * from './ViewRow2';
@@ -1,3 +0,0 @@
1
- import { FormValue, Spec, ViewLayoutProps } from '../../../../core';
2
- export declare const ViewSectionCard: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;
3
- export declare const ViewSectionCard2: <T extends FormValue, S extends Spec>(props: ViewLayoutProps<T, S>) => JSX.Element | null;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { isNotEmptyValue } from '../../../utils';
3
- import { SectionCard, SectionCard2 } from '../../Layouts';
4
- export const ViewSectionCard = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(SectionCard, Object.assign({}, props, { ignoreDescription: true })) : null;
5
- export const ViewSectionCard2 = (props) => isNotEmptyValue(props.value, props.spec) ? React.createElement(SectionCard2, Object.assign({}, props, { ignoreDescription: true })) : null;
@@ -1 +0,0 @@
1
- export * from './ViewSectionCard';
@@ -1 +0,0 @@
1
- export * from './ViewSectionCard';
@@ -1,2 +0,0 @@
1
- import { ObjectIndependentView } from '../../../core';
2
- export declare const OneOfCardView: ObjectIndependentView;
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import _ from 'lodash';
3
- import { AccordeonCard } from '../';
4
- import { ViewController } from '../../../core';
5
- export const OneOfCardView = (props) => {
6
- const { value = {}, spec, Layout, name } = props;
7
- const [open, setOpen] = React.useState(true);
8
- const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
9
- const specProperties = React.useMemo(() => (_.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
10
- const valueKey = React.useMemo(() => Object.keys(value)[0], [value]);
11
- const valueName = React.useMemo(() => {
12
- var _a, _b;
13
- return (((_a = spec.description) === null || _a === void 0 ? void 0 : _a[valueKey]) ||
14
- ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
15
- valueKey);
16
- }, [valueKey, spec.description, specProperties]);
17
- const wrappedValue = React.useMemo(() => {
18
- if (Layout) {
19
- return (React.createElement(Layout, Object.assign({}, props, { value: valueName }),
20
- React.createElement(React.Fragment, null, valueName)));
21
- }
22
- return valueName;
23
- }, [Layout, valueName]);
24
- if (!value || !Object.keys(value).length) {
25
- return null;
26
- }
27
- return (React.createElement(AccordeonCard, { className: "df-accordeon-card-layout", name: name, header: wrappedValue, open: open, onToggle: onToggle, ignoreHeaderToggle: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
28
- };