@gravity-ui/dynamic-forms 5.23.0 → 5.24.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.
- package/build/cjs/lib/core/types/specs.d.ts +1 -1
- package/build/cjs/lib/kit/components/Inputs/MultiSelect/MultiSelect.js +24 -13
- package/build/cjs/lib/unstable/core/types/components.d.ts +3 -13
- package/build/cjs/lib/unstable/core/types/schema.d.ts +14 -7
- package/build/cjs/lib/unstable/core/useSchemaRenderer/types/state.d.ts +3 -0
- package/build/cjs/lib/unstable/core/utils/definers.d.ts +27 -13
- package/build/cjs/lib/unstable/kit/components/HTMLContent/HTMLContent.d.ts +2 -1
- package/build/cjs/lib/unstable/kit/components/HTMLContent/HTMLContent.js +12 -2
- package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.css +3 -0
- package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.d.ts +1 -0
- package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.js +2 -2
- package/build/cjs/lib/unstable/kit/entities/Alert/Alert.css +16 -0
- package/build/cjs/lib/unstable/kit/entities/Alert/Alert.js +26 -7
- package/build/cjs/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.d.ts +0 -1
- package/build/cjs/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.js +4 -2
- package/build/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.d.ts +0 -1
- package/build/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.js +5 -3
- package/build/cjs/lib/unstable/kit/entities/FewOfNested/FewOfNested.css +3 -0
- package/build/cjs/lib/unstable/kit/entities/Label/Label.js +4 -4
- package/build/cjs/lib/unstable/kit/entities/Monaco/Monaco.js +3 -1
- package/build/cjs/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.d.ts +0 -1
- package/build/cjs/lib/unstable/kit/entities/ObjectInline/ObjectInline.d.ts +0 -1
- package/build/cjs/lib/unstable/kit/entities/OneOfNested/OneOfNested.css +3 -0
- package/build/cjs/lib/unstable/kit/entities/TextContent/TextContent.js +4 -4
- package/build/cjs/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.d.ts +0 -1
- package/build/cjs/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/DateInput/DateInput.js +3 -2
- package/build/cjs/lib/unstable/kit/form-entities/FileInput/FileInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.js +4 -2
- package/build/cjs/lib/unstable/kit/form-entities/NumberInput/NumberInput.js +3 -2
- package/build/cjs/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js +3 -2
- package/build/cjs/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.js +3 -2
- package/build/cjs/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.js +9 -8
- package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/SelectInput/SelectInput.js +4 -2
- package/build/cjs/lib/unstable/kit/form-entities/SliderInput/SliderInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/StringInput/StringInput.js +3 -2
- package/build/cjs/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js +4 -3
- package/build/cjs/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.js +3 -1
- package/build/cjs/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js +3 -2
- package/build/cjs/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js +8 -6
- package/build/cjs/lib/unstable/kit/form-layouts/FormRow/FormRow.js +8 -6
- package/build/cjs/lib/unstable/kit/index.d.ts +1 -0
- package/build/cjs/lib/unstable/kit/index.js +1 -0
- package/build/cjs/lib/unstable/kit/layouts/Accordeon/Accordeon.js +6 -4
- package/build/cjs/lib/unstable/kit/layouts/Card/Card.js +8 -6
- package/build/cjs/lib/unstable/kit/layouts/Section/Section.js +8 -6
- package/build/cjs/lib/unstable/kit/layouts/Transparent/Transparent.js +5 -3
- package/build/cjs/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.js +7 -5
- package/build/cjs/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.js +7 -5
- package/build/cjs/lib/unstable/kit/utils/index.d.ts +1 -1
- package/build/cjs/lib/unstable/kit/utils/index.js +1 -7
- package/build/cjs/lib/unstable/kit/utils/transformer.d.ts +10 -17
- package/build/cjs/lib/unstable/kit/utils/transformer.js +542 -2778
- package/build/esm/lib/core/types/specs.d.ts +1 -1
- package/build/esm/lib/kit/components/Inputs/MultiSelect/MultiSelect.js +24 -13
- package/build/esm/lib/unstable/core/types/components.d.ts +3 -13
- package/build/esm/lib/unstable/core/types/schema.d.ts +14 -7
- package/build/esm/lib/unstable/core/useSchemaRenderer/types/state.d.ts +3 -0
- package/build/esm/lib/unstable/core/utils/definers.d.ts +27 -13
- package/build/esm/lib/unstable/kit/components/HTMLContent/HTMLContent.d.ts +2 -1
- package/build/esm/lib/unstable/kit/components/HTMLContent/HTMLContent.js +12 -2
- package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.css +3 -0
- package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.d.ts +1 -0
- package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.js +2 -2
- package/build/esm/lib/unstable/kit/entities/Alert/Alert.css +16 -0
- package/build/esm/lib/unstable/kit/entities/Alert/Alert.d.ts +1 -0
- package/build/esm/lib/unstable/kit/entities/Alert/Alert.js +29 -9
- package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.d.ts +0 -1
- package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.js +4 -2
- package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.d.ts +0 -1
- package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.js +5 -3
- package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.css +3 -0
- package/build/esm/lib/unstable/kit/entities/Label/Label.js +5 -5
- package/build/esm/lib/unstable/kit/entities/Monaco/Monaco.js +3 -1
- package/build/esm/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.d.ts +0 -1
- package/build/esm/lib/unstable/kit/entities/ObjectInline/ObjectInline.d.ts +0 -1
- package/build/esm/lib/unstable/kit/entities/OneOfNested/OneOfNested.css +3 -0
- package/build/esm/lib/unstable/kit/entities/TextContent/TextContent.js +5 -5
- package/build/esm/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.d.ts +0 -1
- package/build/esm/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/DateInput/DateInput.js +3 -2
- package/build/esm/lib/unstable/kit/form-entities/FileInput/FileInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.js +4 -2
- package/build/esm/lib/unstable/kit/form-entities/NumberInput/NumberInput.js +3 -2
- package/build/esm/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js +3 -2
- package/build/esm/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.js +3 -2
- package/build/esm/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.js +9 -8
- package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/SelectInput/SelectInput.js +4 -2
- package/build/esm/lib/unstable/kit/form-entities/SliderInput/SliderInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/StringInput/StringInput.js +3 -2
- package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js +4 -3
- package/build/esm/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.js +3 -1
- package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js +3 -2
- package/build/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js +8 -6
- package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.js +8 -6
- package/build/esm/lib/unstable/kit/index.d.ts +1 -0
- package/build/esm/lib/unstable/kit/index.js +1 -0
- package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.js +6 -4
- package/build/esm/lib/unstable/kit/layouts/Card/Card.js +8 -6
- package/build/esm/lib/unstable/kit/layouts/Section/Section.js +8 -6
- package/build/esm/lib/unstable/kit/layouts/Transparent/Transparent.js +5 -3
- package/build/esm/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.js +7 -5
- package/build/esm/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.js +7 -5
- package/build/esm/lib/unstable/kit/utils/index.d.ts +1 -1
- package/build/esm/lib/unstable/kit/utils/index.js +1 -1
- package/build/esm/lib/unstable/kit/utils/transformer.d.ts +10 -17
- package/build/esm/lib/unstable/kit/utils/transformer.js +543 -2778
- package/package.json +1 -1
|
@@ -6,8 +6,10 @@ import { block, getBooleanValidationState } from '../../utils';
|
|
|
6
6
|
import './ColorPickerInput.css';
|
|
7
7
|
const b = block('color-picker-input');
|
|
8
8
|
export const ColorPickerInput = ({ input, props, meta, schema, }) => {
|
|
9
|
+
var _a;
|
|
9
10
|
const { name, onBlur, onChange, onFocus, value } = input;
|
|
10
11
|
const { onOpenChange: onOpenChangeProps } = props, restEntityProps = __rest(props, ["onOpenChange"]);
|
|
12
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const onOpenChange = React.useCallback((open) => {
|
|
12
14
|
onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(open);
|
|
13
15
|
if (open) {
|
|
@@ -18,5 +20,5 @@ export const ColorPickerInput = ({ input, props, meta, schema, }) => {
|
|
|
18
20
|
}
|
|
19
21
|
}, [onBlur, onFocus, onOpenChangeProps]);
|
|
20
22
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
21
|
-
React.createElement(ColorPicker, Object.assign({ disabled: schema.readOnly }, restEntityProps, { value: value !== null && value !== void 0 ? value : '', onUpdate: onChange, onOpenChange: onOpenChange, "data-qa": name }))));
|
|
23
|
+
React.createElement(ColorPicker, Object.assign({ disabled: disabled || schema.readOnly }, restEntityProps, { value: value !== null && value !== void 0 ? value : '', onUpdate: onChange, onOpenChange: onOpenChange, "data-qa": name }))));
|
|
22
24
|
};
|
|
@@ -8,9 +8,10 @@ import { block, getBooleanValidationState, parseDate } from '../../utils';
|
|
|
8
8
|
import './DateInput.css';
|
|
9
9
|
const b = block('date-input');
|
|
10
10
|
export const DateInput = ({ input, meta, props, schema, }) => {
|
|
11
|
-
var _a;
|
|
11
|
+
var _a, _b;
|
|
12
12
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
13
13
|
const { format = DEFAULT_DATE_FORMAT, outputFormat, timeZone: timeZoneProp } = props, restEntityProps = __rest(props, ["format", "outputFormat", "timeZone"]);
|
|
14
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
14
15
|
const timeZone = timeZoneProp && isValidTimeZone(timeZoneProp) ? timeZoneProp : undefined;
|
|
15
16
|
const onUpdate = React.useCallback((date) => {
|
|
16
17
|
if (!date) {
|
|
@@ -40,5 +41,5 @@ export const DateInput = ({ input, meta, props, schema, }) => {
|
|
|
40
41
|
}, [outputFormat, onChange]);
|
|
41
42
|
const value = React.useMemo(() => parseDate(inputValue, outputFormat, timeZone), [inputValue, outputFormat, timeZone]);
|
|
42
43
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
43
|
-
React.createElement(DatePicker, Object.assign({ format: format, popupPlacement: "bottom-start", placeholder: `${((
|
|
44
|
+
React.createElement(DatePicker, Object.assign({ format: format, popupPlacement: "bottom-start", placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, hasClear: true }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, timeZone: timeZone, errorMessage: undefined, validationState: undefined, "data-qa": name }))));
|
|
44
45
|
};
|
|
@@ -6,8 +6,10 @@ import { unstable_FileDropZone as FileDropZone, } from '@gravity-ui/uikit/unstab
|
|
|
6
6
|
import { EntityContainer } from '../../components';
|
|
7
7
|
import { getValidationState } from '../../utils';
|
|
8
8
|
export const FileInput = ({ input, meta, props, schema, }) => {
|
|
9
|
+
var _a;
|
|
9
10
|
const { onBlur, onChange, onFocus } = input;
|
|
10
11
|
const { readAsMethod = 'readAsBinaryString' } = props, restEntityProps = __rest(props, ["readAsMethod"]);
|
|
12
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const counterRef = React.useRef(0);
|
|
12
14
|
const [file, setFile] = React.useState(null);
|
|
13
15
|
const actions = React.useMemo(() => [
|
|
@@ -45,5 +47,5 @@ export const FileInput = ({ input, meta, props, schema, }) => {
|
|
|
45
47
|
React.createElement(FilePreview, { file: file, actions: actions })));
|
|
46
48
|
}
|
|
47
49
|
return (React.createElement(EntityContainer, { stretch: "max" },
|
|
48
|
-
React.createElement(FileDropZone, Object.assign({ disabled: schema.readOnly, accept: [] }, restEntityProps, { onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), multiple: false }))));
|
|
50
|
+
React.createElement(FileDropZone, Object.assign({ disabled: disabled || schema.readOnly, accept: [] }, restEntityProps, { onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), multiple: false }))));
|
|
49
51
|
};
|
|
@@ -3,11 +3,13 @@ import React from 'react';
|
|
|
3
3
|
import { Flex, Select, Text } from '@gravity-ui/uikit';
|
|
4
4
|
import isString from 'lodash/isString';
|
|
5
5
|
import { EntityContainer } from '../../components';
|
|
6
|
+
import { DASH } from '../../constants';
|
|
6
7
|
import { getValidationState } from '../../utils';
|
|
7
8
|
export const MultiSelectInput = ({ input, meta, props, schema, }) => {
|
|
8
|
-
var _a, _b;
|
|
9
|
+
var _a, _b, _c;
|
|
9
10
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
10
11
|
const { enumDescriptions, optionsMeta } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsMeta"]);
|
|
12
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const value = React.useMemo(() => (Array.isArray(inputValue) && inputValue.every(isString) ? inputValue : undefined), [inputValue]);
|
|
12
14
|
const enumValues = schema.items && 'enum' in schema.items ? schema.items.enum : undefined;
|
|
13
15
|
const options = React.useMemo(() => {
|
|
@@ -30,5 +32,5 @@ export const MultiSelectInput = ({ input, meta, props, schema, }) => {
|
|
|
30
32
|
const renderOption = React.useCallback((option) => (React.createElement(React.Fragment, { key: option.value }, option.content || option.text || option.value)), []);
|
|
31
33
|
const getOptionHeight = React.useCallback((option) => { var _a; return (((_a = option.data) === null || _a === void 0 ? void 0 : _a.optionMeta) ? 44 : 28); }, []);
|
|
32
34
|
return (React.createElement(EntityContainer, { stretch: "max" },
|
|
33
|
-
React.createElement(Select, Object.assign({ width: "max", options: options, filterable: ((enumValues === null || enumValues === void 0 ? void 0 : enumValues.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: `${((
|
|
35
|
+
React.createElement(Select, Object.assign({ width: "max", options: options, filterable: ((enumValues === null || enumValues === void 0 ? void 0 : enumValues.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: `${((_c = (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[0]) || DASH}`, disabled: disabled || schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), multiple: true, qa: name }))));
|
|
34
36
|
};
|
|
@@ -5,8 +5,9 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
|
|
|
5
5
|
import './NumberInput.css';
|
|
6
6
|
const b = block('number-input');
|
|
7
7
|
export const NumberInput = ({ input, meta, props, schema, }) => {
|
|
8
|
-
var _a;
|
|
8
|
+
var _a, _b;
|
|
9
9
|
const { name, onBlur, onChange, onFocus, value } = input;
|
|
10
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
10
11
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
11
|
-
React.createElement(UIKitNumberInput, Object.assign({ min: schema.minimum, max: schema.maximum, step: schema.multipleOf || 1, placeholder: `${((
|
|
12
|
+
React.createElement(UIKitNumberInput, Object.assign({ min: schema.minimum, max: schema.maximum, step: schema.multipleOf || 1, placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, allowDecimal: true, hasClear: true }, props, { value: value === undefined ? null : value, defaultValue: schema.default, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
12
13
|
};
|
package/build/esm/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js
CHANGED
|
@@ -7,9 +7,10 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
|
|
|
7
7
|
import './NumberWithScaleInput.css';
|
|
8
8
|
const b = block('number-with-scale-input');
|
|
9
9
|
export const NumberWithScaleInput = ({ input, meta, props, schema, }) => {
|
|
10
|
-
var _a;
|
|
10
|
+
var _a, _b;
|
|
11
11
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
12
12
|
const { defaultType, viewType, scale, max, min, step } = props, restEntityProps = __rest(props, ["defaultType", "viewType", "scale", "max", "min", "step"]);
|
|
13
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
13
14
|
const scaleKit = React.useMemo(() => {
|
|
14
15
|
if (scale) {
|
|
15
16
|
const preparedScale = {};
|
|
@@ -67,7 +68,7 @@ export const NumberWithScaleInput = ({ input, meta, props, schema, }) => {
|
|
|
67
68
|
}, [max, min, step, inputValue, onChange, scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale, scaleValue, schema]);
|
|
68
69
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }), direction: "row", gap: 2 },
|
|
69
70
|
React.createElement("div", { className: b('input') },
|
|
70
|
-
React.createElement(NumberInput, Object.assign({ placeholder: `${((
|
|
71
|
+
React.createElement(NumberInput, Object.assign({ placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, allowDecimal: true, hasClear: true }, restEntityProps, preparedInputProps, { onBlur: onBlur, onFocus: onFocus, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))),
|
|
71
72
|
scaleOptions.length ? (React.createElement("div", { style: { width: scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.minScaleLength } },
|
|
72
73
|
React.createElement(Select, { width: "max", options: scaleOptions, value: scaleValue, onUpdate: setScaleValue, multiple: false }))) : null));
|
|
73
74
|
};
|
|
@@ -5,8 +5,9 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
|
|
|
5
5
|
import './PasswordInput.css';
|
|
6
6
|
const b = block('password-input');
|
|
7
7
|
export const PasswordInput = ({ input, meta, props, schema, }) => {
|
|
8
|
-
var _a;
|
|
8
|
+
var _a, _b;
|
|
9
9
|
const { name, onBlur, onChange, onFocus, value } = input;
|
|
10
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
10
11
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
11
|
-
React.createElement(UIKitPasswordInput, Object.assign({ autoComplete: "new-password", placeholder: (
|
|
12
|
+
React.createElement(UIKitPasswordInput, Object.assign({ autoComplete: "new-password", placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: value !== null && value !== void 0 ? value : '', onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
12
13
|
};
|
|
@@ -6,8 +6,10 @@ import { block, getBooleanValidationState } from '../../utils';
|
|
|
6
6
|
import './RadioGroupInput.css';
|
|
7
7
|
const b = block('radio-group-input');
|
|
8
8
|
export const RadioGroupInput = ({ input, meta, props, schema, }) => {
|
|
9
|
+
var _a;
|
|
9
10
|
const { name, onBlur, onChange, onFocus, value } = input;
|
|
10
11
|
const { enumDescriptions, optionsDisabled, direction = 'horizontal' } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsDisabled", "direction"]);
|
|
12
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const options = React.useMemo(() => {
|
|
12
14
|
var _a;
|
|
13
15
|
return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
|
|
@@ -17,5 +19,5 @@ export const RadioGroupInput = ({ input, meta, props, schema, }) => {
|
|
|
17
19
|
}));
|
|
18
20
|
}, [enumDescriptions, optionsDisabled, schema.enum]);
|
|
19
21
|
return (React.createElement(EntityContainer, { stretch: "fit", className: b({ error: getBooleanValidationState(meta), direction }), justifyContent: "center" },
|
|
20
|
-
React.createElement(RadioGroup, Object.assign({ options: options, disabled: schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, direction: direction, qa: name }))));
|
|
22
|
+
React.createElement(RadioGroup, Object.assign({ options: options, disabled: disabled || schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, direction: direction, qa: name }))));
|
|
21
23
|
};
|
|
@@ -4,22 +4,23 @@ import { Slider } from '@gravity-ui/uikit';
|
|
|
4
4
|
import { EntityContainer } from '../../components';
|
|
5
5
|
import { getValidationState } from '../../utils';
|
|
6
6
|
export const RangeSliderInput = ({ input, meta, props, schema, }) => {
|
|
7
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
7
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
8
8
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
9
9
|
const { propertyKeys } = props, restEntityProps = __rest(props, ["propertyKeys"]);
|
|
10
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
10
11
|
const [fromKey, toKey] = propertyKeys || ['from', 'to'];
|
|
11
|
-
const min = ((
|
|
12
|
-
? (
|
|
12
|
+
const min = ((_b = schema.properties) === null || _b === void 0 ? void 0 : _b[fromKey]) && 'minimum' in schema.properties[fromKey]
|
|
13
|
+
? (_d = (_c = schema.properties) === null || _c === void 0 ? void 0 : _c[fromKey]) === null || _d === void 0 ? void 0 : _d.minimum
|
|
13
14
|
: undefined;
|
|
14
|
-
const max = ((
|
|
15
|
-
? (
|
|
15
|
+
const max = ((_e = schema.properties) === null || _e === void 0 ? void 0 : _e[toKey]) && 'maximum' in schema.properties[toKey]
|
|
16
|
+
? (_g = (_f = schema.properties) === null || _f === void 0 ? void 0 : _f[toKey]) === null || _g === void 0 ? void 0 : _g.maximum
|
|
16
17
|
: undefined;
|
|
17
18
|
const value = isNaN(Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey])) || isNaN(Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey]))
|
|
18
19
|
? undefined
|
|
19
20
|
: [Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey]), Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey])];
|
|
20
|
-
const defaultValue = isNaN(Number((
|
|
21
|
+
const defaultValue = isNaN(Number((_h = schema.default) === null || _h === void 0 ? void 0 : _h[fromKey])) || isNaN(Number((_j = schema.default) === null || _j === void 0 ? void 0 : _j[toKey]))
|
|
21
22
|
? undefined
|
|
22
|
-
: [Number((
|
|
23
|
+
: [Number((_k = schema.default) === null || _k === void 0 ? void 0 : _k[fromKey]), Number((_l = schema.default) === null || _l === void 0 ? void 0 : _l[toKey])];
|
|
23
24
|
const onUpdate = React.useCallback((next) => {
|
|
24
25
|
if (!Array.isArray(next)) {
|
|
25
26
|
return;
|
|
@@ -27,5 +28,5 @@ export const RangeSliderInput = ({ input, meta, props, schema, }) => {
|
|
|
27
28
|
onChange({ [fromKey]: next[0], [toKey]: next[1] });
|
|
28
29
|
}, [fromKey, toKey, onChange]);
|
|
29
30
|
return (React.createElement(EntityContainer, { stretch: "max" },
|
|
30
|
-
React.createElement(Slider, Object.assign({ min: min, max: max, step: 1, marks: 2, disabled: schema.readOnly, tooltipDisplay: "on" }, restEntityProps, { defaultValue: defaultValue, value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
31
|
+
React.createElement(Slider, Object.assign({ min: min, max: max, step: 1, marks: 2, disabled: disabled || schema.readOnly, tooltipDisplay: "on" }, restEntityProps, { defaultValue: defaultValue, value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
31
32
|
};
|
|
@@ -6,8 +6,10 @@ import { block, getBooleanValidationState } from '../../utils';
|
|
|
6
6
|
import './SegmentedRadioGroupInput.css';
|
|
7
7
|
const b = block('segmented-radio-group-input');
|
|
8
8
|
export const SegmentedRadioGroupInput = ({ input, meta, props, schema }) => {
|
|
9
|
+
var _a;
|
|
9
10
|
const { name, onBlur, onChange, onFocus, value } = input;
|
|
10
11
|
const { enumDescriptions, optionsDisabled } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsDisabled"]);
|
|
12
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const options = React.useMemo(() => {
|
|
12
14
|
var _a;
|
|
13
15
|
return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
|
|
@@ -22,5 +24,5 @@ export const SegmentedRadioGroupInput = ({ input, meta, props, schema }) => {
|
|
|
22
24
|
onBlur();
|
|
23
25
|
}, [onBlur, onChange, onFocus]);
|
|
24
26
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
25
|
-
React.createElement(SegmentedRadioGroup, Object.assign({ width: "max", disabled: schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
|
|
27
|
+
React.createElement(SegmentedRadioGroup, Object.assign({ width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
|
|
26
28
|
};
|
|
@@ -3,11 +3,13 @@ import React from 'react';
|
|
|
3
3
|
import { Flex, Select, Text } from '@gravity-ui/uikit';
|
|
4
4
|
import isString from 'lodash/isString';
|
|
5
5
|
import { EntityContainer } from '../../components';
|
|
6
|
+
import { DASH } from '../../constants';
|
|
6
7
|
import { getValidationState } from '../../utils';
|
|
7
8
|
export const SelectInput = ({ input, meta, props, schema, }) => {
|
|
8
|
-
var _a, _b;
|
|
9
|
+
var _a, _b, _c;
|
|
9
10
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
10
11
|
const { enumDescriptions, optionsMeta } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsMeta"]);
|
|
12
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const value = React.useMemo(() => (isString(inputValue) ? [inputValue] : undefined), [inputValue]);
|
|
12
14
|
const onUpdate = React.useCallback((v) => onChange(v[0]), [onChange]);
|
|
13
15
|
const options = React.useMemo(() => {
|
|
@@ -27,5 +29,5 @@ export const SelectInput = ({ input, meta, props, schema, }) => {
|
|
|
27
29
|
const renderOption = React.useCallback((option) => (React.createElement(React.Fragment, { key: option.value }, option.content || option.text || option.value)), []);
|
|
28
30
|
const getOptionHeight = React.useCallback((option) => { var _a; return (((_a = option.data) === null || _a === void 0 ? void 0 : _a.optionMeta) ? 44 : 28); }, []);
|
|
29
31
|
return (React.createElement(EntityContainer, { stretch: "max" },
|
|
30
|
-
React.createElement(Select, Object.assign({ width: "max", options: options, filterable: (((
|
|
32
|
+
React.createElement(Select, Object.assign({ width: "max", options: options, filterable: (((_b = schema.enum) === null || _b === void 0 ? void 0 : _b.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: ((_c = schema.examples) === null || _c === void 0 ? void 0 : _c[0]) || DASH, disabled: disabled || schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
31
33
|
};
|
|
@@ -3,7 +3,9 @@ import { Slider } from '@gravity-ui/uikit';
|
|
|
3
3
|
import { EntityContainer } from '../../components';
|
|
4
4
|
import { getValidationState } from '../../utils';
|
|
5
5
|
export const SliderInput = ({ input, meta, props, schema, }) => {
|
|
6
|
+
var _a;
|
|
6
7
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
8
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
7
9
|
const value = isNaN(Number(inputValue)) ? undefined : Number(inputValue);
|
|
8
10
|
const onUpdate = React.useCallback((next) => {
|
|
9
11
|
if (Array.isArray(next)) {
|
|
@@ -12,5 +14,5 @@ export const SliderInput = ({ input, meta, props, schema, }) => {
|
|
|
12
14
|
onChange(next);
|
|
13
15
|
}, [onChange]);
|
|
14
16
|
return (React.createElement(EntityContainer, { stretch: "max" },
|
|
15
|
-
React.createElement(Slider, Object.assign({ min: schema.minimum, max: schema.maximum, step: 1, marks: 2, disabled: schema.readOnly, tooltipDisplay: "on" }, props, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
17
|
+
React.createElement(Slider, Object.assign({ min: schema.minimum, max: schema.maximum, step: 1, marks: 2, disabled: disabled || schema.readOnly, tooltipDisplay: "on" }, props, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
|
|
16
18
|
};
|
|
@@ -5,7 +5,8 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
|
|
|
5
5
|
import './StringInput.css';
|
|
6
6
|
const b = block('string-input');
|
|
7
7
|
export const StringInput = ({ input, meta, props, schema, }) => {
|
|
8
|
-
var _a, _b;
|
|
8
|
+
var _a, _b, _c;
|
|
9
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
9
10
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
10
|
-
React.createElement(TextInput, Object.assign({ placeholder: (
|
|
11
|
+
React.createElement(TextInput, Object.assign({ placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: (_c = input.value) !== null && _c !== void 0 ? _c : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: input.name, type: "text" }))));
|
|
11
12
|
};
|
|
@@ -7,9 +7,10 @@ import { block, getBooleanValidationState, getValidationState, isStringNumber }
|
|
|
7
7
|
import './StringNumberWithScaleInput.css';
|
|
8
8
|
const b = block('string-number-with-scale-input');
|
|
9
9
|
export const StringNumberWithScaleInput = ({ input, meta, props, schema }) => {
|
|
10
|
-
var _a;
|
|
10
|
+
var _a, _b;
|
|
11
11
|
const { name, onBlur, onChange, onFocus, value: inputValue } = input;
|
|
12
12
|
const { defaultType, viewType, scale } = props, restEntityProps = __rest(props, ["defaultType", "viewType", "scale"]);
|
|
13
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
13
14
|
const scaleKit = React.useMemo(() => {
|
|
14
15
|
if (scale) {
|
|
15
16
|
const preparedScale = {};
|
|
@@ -72,7 +73,7 @@ export const StringNumberWithScaleInput = ({ input, meta, props, schema }) => {
|
|
|
72
73
|
}, [inputValue, onChange, scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale, scaleValue, schema]);
|
|
73
74
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }), direction: "row", gap: 2 },
|
|
74
75
|
React.createElement("div", { className: b('input') },
|
|
75
|
-
React.createElement(TextInput, Object.assign({ placeholder: `${((
|
|
76
|
+
React.createElement(TextInput, Object.assign({ placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, hasClear: true }, restEntityProps, preparedInputProps, { onBlur: onBlur, onFocus: onFocus, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))),
|
|
76
77
|
scaleOptions.length ? (React.createElement("div", { style: { width: scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.minScaleLength } },
|
|
77
|
-
React.createElement(Select, { width: "max", options: scaleOptions, value: scaleValue, onUpdate: setScaleValue, multiple: false, disabled: schema.readOnly || meta.error, qa: `${name}-scale` }))) : null));
|
|
78
|
+
React.createElement(Select, { width: "max", options: scaleOptions, value: scaleValue, onUpdate: setScaleValue, multiple: false, disabled: disabled || schema.readOnly || meta.error, qa: `${name}-scale` }))) : null));
|
|
78
79
|
};
|
|
@@ -5,12 +5,14 @@ import { block, getBooleanValidationState } from '../../utils';
|
|
|
5
5
|
import './SwitchInput.css';
|
|
6
6
|
const b = block('switch-input');
|
|
7
7
|
export const SwitchInput = ({ input, meta, props, schema, }) => {
|
|
8
|
+
var _a;
|
|
8
9
|
const { name, onBlur, onChange, onFocus, value } = input;
|
|
10
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
9
11
|
const onUpdate = React.useCallback((value) => {
|
|
10
12
|
onFocus();
|
|
11
13
|
onChange(value);
|
|
12
14
|
onBlur();
|
|
13
15
|
}, [onBlur, onChange, onFocus]);
|
|
14
16
|
return (React.createElement(EntityContainer, { stretch: "fit", className: b({ error: getBooleanValidationState(meta) }), justifyContent: "center" },
|
|
15
|
-
React.createElement(Switch, Object.assign({ disabled: schema.readOnly }, props, { checked: value !== null && value !== void 0 ? value : false, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
|
|
17
|
+
React.createElement(Switch, Object.assign({ disabled: disabled || schema.readOnly }, props, { checked: value !== null && value !== void 0 ? value : false, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
|
|
16
18
|
};
|
|
@@ -5,7 +5,8 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
|
|
|
5
5
|
import './TextAreaInput.css';
|
|
6
6
|
const b = block('text-area-input');
|
|
7
7
|
export const TextAreaInput = ({ input, meta, props, schema, }) => {
|
|
8
|
-
var _a, _b;
|
|
8
|
+
var _a, _b, _c;
|
|
9
|
+
const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
9
10
|
return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
|
|
10
|
-
React.createElement(TextArea, Object.assign({ maxRows: 20, minRows: 0, placeholder: (
|
|
11
|
+
React.createElement(TextArea, Object.assign({ maxRows: 20, minRows: 0, placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: (_c = input.value) !== null && _c !== void 0 ? _c : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: input.name }))));
|
|
11
12
|
};
|
|
@@ -5,23 +5,25 @@ import { block, getValidationState } from '../../utils';
|
|
|
5
5
|
import './FormColumn.css';
|
|
6
6
|
const b = block('form-column');
|
|
7
7
|
export const FormColumn = ({ children, headName, input, meta, schema, props, }) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const { hidden, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
8
10
|
const tooltip = React.useMemo(() => {
|
|
9
11
|
if (!schema.description || props.descriptionType === 'bottom') {
|
|
10
12
|
return null;
|
|
11
13
|
}
|
|
12
14
|
return (React.createElement(HelpMark, { className: b('help-mark') },
|
|
13
|
-
React.createElement(HTMLContent, {
|
|
14
|
-
}, [schema.description, props.descriptionType]);
|
|
15
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName })));
|
|
16
|
+
}, [headName, schema.description, props.descriptionType]);
|
|
15
17
|
const bottomDescription = React.useMemo(() => {
|
|
16
18
|
if (!schema.description || props.descriptionType !== 'bottom') {
|
|
17
19
|
return null;
|
|
18
20
|
}
|
|
19
|
-
return React.createElement(HTMLContent, {
|
|
20
|
-
}, [schema.description, props.descriptionType]);
|
|
21
|
-
return (React.createElement(LayoutContainer, { className: b(), gap: 2 },
|
|
21
|
+
return React.createElement(HTMLContent, { content: schema.description, headName: headName, color: "secondary" });
|
|
22
|
+
}, [headName, schema.description, props.descriptionType]);
|
|
23
|
+
return (React.createElement(LayoutContainer, { className: b(), gap: 2, hidden: hidden },
|
|
22
24
|
React.createElement(Flex, { direction: "column", gap: 0.5 },
|
|
23
25
|
React.createElement("div", { className: b('top') },
|
|
24
|
-
React.createElement(Text, { className: b('title', { required
|
|
26
|
+
React.createElement(Text, { className: b('title', { required }), wordBreak: "break-word" }, schema.title),
|
|
25
27
|
tooltip,
|
|
26
28
|
React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
|
|
27
29
|
bottomDescription),
|
|
@@ -5,22 +5,24 @@ import { block, getValidationState } from '../../utils';
|
|
|
5
5
|
import './FormRow.css';
|
|
6
6
|
const b = block('form-row');
|
|
7
7
|
export const FormRow = ({ children, headName, input, meta, schema, props, }) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const { hidden, required } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
8
10
|
const tooltip = React.useMemo(() => {
|
|
9
11
|
if (!schema.description || props.descriptionType === 'bottom') {
|
|
10
12
|
return null;
|
|
11
13
|
}
|
|
12
14
|
return (React.createElement(HelpMark, { className: b('help-mark') },
|
|
13
|
-
React.createElement(HTMLContent, {
|
|
14
|
-
}, [schema.description, props.descriptionType]);
|
|
15
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName })));
|
|
16
|
+
}, [headName, schema.description, props.descriptionType]);
|
|
15
17
|
const bottomDescription = React.useMemo(() => {
|
|
16
18
|
if (!schema.description || props.descriptionType !== 'bottom') {
|
|
17
19
|
return null;
|
|
18
20
|
}
|
|
19
|
-
return React.createElement(HTMLContent, {
|
|
20
|
-
}, [schema.description, props.descriptionType]);
|
|
21
|
-
return (React.createElement(LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2 },
|
|
21
|
+
return React.createElement(HTMLContent, { content: schema.description, headName: headName, color: "secondary" });
|
|
22
|
+
}, [headName, schema.description, props.descriptionType]);
|
|
23
|
+
return (React.createElement(LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2, hidden: hidden },
|
|
22
24
|
React.createElement("div", { className: b('left') },
|
|
23
|
-
React.createElement(Text, { className: b('title', { required
|
|
25
|
+
React.createElement(Text, { className: b('title', { required }), wordBreak: "break-word" }, schema.title),
|
|
24
26
|
tooltip),
|
|
25
27
|
React.createElement(Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
|
|
26
28
|
React.createElement(Flex, { grow: 1, gap: 2 },
|
|
@@ -8,7 +8,9 @@ import { block, getValidationState } from '../../utils';
|
|
|
8
8
|
import './Accordeon.css';
|
|
9
9
|
const b = block('accordeon');
|
|
10
10
|
export const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) => {
|
|
11
|
-
|
|
11
|
+
var _a;
|
|
12
|
+
const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = __rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
|
|
13
|
+
const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
12
14
|
const overviewFlag = mode === SchemaRendererMode.Overview;
|
|
13
15
|
const summary = React.useMemo(() => {
|
|
14
16
|
const stopPropagation = (event) => {
|
|
@@ -20,7 +22,7 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
|
|
|
20
22
|
React.createElement(Icon, { data: props.expanded ? ChevronUp : ChevronDown }),
|
|
21
23
|
React.createElement(Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)))))),
|
|
22
24
|
schema.description ? (React.createElement(HelpMark, { onClick: stopPropagation },
|
|
23
|
-
React.createElement(HTMLContent, {
|
|
25
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName }))) : null,
|
|
24
26
|
overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
|
|
25
27
|
overviewFlag ? null : (React.createElement(ArrayRemoveButton, { name: input.name, headName: headName, onClick: stopPropagation }))));
|
|
26
28
|
}, [
|
|
@@ -36,8 +38,8 @@ export const Accordeon = ({ children, headName, input, meta, mode, schema, props
|
|
|
36
38
|
togglerProps,
|
|
37
39
|
withDefaultSummary,
|
|
38
40
|
]);
|
|
39
|
-
return (React.createElement(LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag },
|
|
40
|
-
React.createElement(Disclosure, Object.assign({ summary: summary, defaultExpanded:
|
|
41
|
+
return (React.createElement(LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag, hidden: hidden },
|
|
42
|
+
React.createElement(Disclosure, Object.assign({ summary: summary, defaultExpanded: open }, restLayoutProps),
|
|
41
43
|
React.createElement(Flex, { direction: "column", gap: 0.5, grow: 1 },
|
|
42
44
|
React.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children),
|
|
43
45
|
overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))))));
|
|
@@ -8,7 +8,9 @@ import { block, getValidationState } from '../../utils';
|
|
|
8
8
|
import './Card.css';
|
|
9
9
|
const b = block('card');
|
|
10
10
|
export const Card = ({ children, headName, input, meta, mode, schema, props, }) => {
|
|
11
|
-
|
|
11
|
+
var _a;
|
|
12
|
+
const { descriptionType = 'tooltip', likeAccordeon = true } = props, restLayoutProps = __rest(props, ["descriptionType", "likeAccordeon"]);
|
|
13
|
+
const { copy, required, hidden, open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
12
14
|
const overviewFlag = mode === SchemaRendererMode.Overview;
|
|
13
15
|
const [visible, setVisible] = React.useState(likeAccordeon ? open : true);
|
|
14
16
|
const toggleVisible = React.useCallback(() => {
|
|
@@ -19,15 +21,15 @@ export const Card = ({ children, headName, input, meta, mode, schema, props, })
|
|
|
19
21
|
return null;
|
|
20
22
|
}
|
|
21
23
|
return (React.createElement(HelpMark, null,
|
|
22
|
-
React.createElement(HTMLContent, {
|
|
23
|
-
}, [schema.description, descriptionType]);
|
|
24
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName })));
|
|
25
|
+
}, [headName, schema.description, descriptionType]);
|
|
24
26
|
const bottomDescription = React.useMemo(() => {
|
|
25
27
|
if (!schema.description || descriptionType !== 'bottom' || overviewFlag) {
|
|
26
28
|
return null;
|
|
27
29
|
}
|
|
28
|
-
return React.createElement(HTMLContent, {
|
|
29
|
-
}, [schema.description, descriptionType, overviewFlag]);
|
|
30
|
-
return (React.createElement(LayoutContainer, { className: b(), hideEmpty: overviewFlag },
|
|
30
|
+
return React.createElement(HTMLContent, { content: schema.description, headName: headName, color: "secondary" });
|
|
31
|
+
}, [headName, schema.description, descriptionType, overviewFlag]);
|
|
32
|
+
return (React.createElement(LayoutContainer, { className: b(), hideEmpty: overviewFlag, hidden: hidden },
|
|
31
33
|
React.createElement(UIKitCard, Object.assign({}, restLayoutProps, { className: b('card') }),
|
|
32
34
|
React.createElement("div", { className: b('inner', { hidden: !visible }) },
|
|
33
35
|
React.createElement(Flex, { className: b('header'), direction: "column", justifyContent: "center" },
|
|
@@ -7,22 +7,24 @@ import { block, getValidationState } from '../../utils';
|
|
|
7
7
|
import './Section.css';
|
|
8
8
|
const b = block('section');
|
|
9
9
|
export const Section = ({ children, headName, input, meta, mode, schema, props, }) => {
|
|
10
|
-
|
|
10
|
+
var _a;
|
|
11
|
+
const { descriptionType = 'tooltip', withIndent = false } = props, restLayoutProps = __rest(props, ["descriptionType", "withIndent"]);
|
|
12
|
+
const { copy, required, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
11
13
|
const overviewFlag = mode === SchemaRendererMode.Overview;
|
|
12
14
|
const tooltip = React.useMemo(() => {
|
|
13
15
|
if (!schema.description || descriptionType === 'bottom') {
|
|
14
16
|
return null;
|
|
15
17
|
}
|
|
16
18
|
return (React.createElement(HelpMark, null,
|
|
17
|
-
React.createElement(HTMLContent, {
|
|
18
|
-
}, [schema.description, descriptionType]);
|
|
19
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName })));
|
|
20
|
+
}, [headName, schema.description, descriptionType]);
|
|
19
21
|
const bottomDescription = React.useMemo(() => {
|
|
20
22
|
if (!schema.description || descriptionType !== 'bottom' || overviewFlag) {
|
|
21
23
|
return null;
|
|
22
24
|
}
|
|
23
|
-
return (React.createElement(HTMLContent, { className: spacing({ mb: 2 }),
|
|
24
|
-
}, [schema.description, descriptionType, overviewFlag]);
|
|
25
|
-
return (React.createElement(LayoutContainer, { className: b(), gap: 0.5, hideEmpty: overviewFlag },
|
|
25
|
+
return (React.createElement(HTMLContent, { className: spacing({ mb: 2 }), content: schema.description, color: "secondary", headName: headName }));
|
|
26
|
+
}, [headName, schema.description, descriptionType, overviewFlag]);
|
|
27
|
+
return (React.createElement(LayoutContainer, { className: b(), gap: 0.5, hideEmpty: overviewFlag, hidden: hidden },
|
|
26
28
|
React.createElement(Flex, { direction: "column", gap: 4 },
|
|
27
29
|
React.createElement(Flex, { direction: "column" },
|
|
28
30
|
React.createElement(Flex, { className: b('header'), gap: 2, alignItems: "center" },
|
|
@@ -6,12 +6,14 @@ import { ArrayRemoveButton, CopyButton, EntityError, LayoutContainer } from '../
|
|
|
6
6
|
import { block, getValidationState } from '../../utils';
|
|
7
7
|
import './Transparent.css';
|
|
8
8
|
const b = block('transparent');
|
|
9
|
-
export const Transparent = ({ children, headName, input, meta, mode, props, }) => {
|
|
9
|
+
export const Transparent = ({ children, headName, input, meta, mode, props, schema, }) => {
|
|
10
|
+
var _a;
|
|
11
|
+
const { copy, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
10
12
|
const overviewFlag = mode === SchemaRendererMode.Overview;
|
|
11
|
-
return (React.createElement(LayoutContainer, { className: b(), gap: 0.5, hideEmpty: isBoolean(props.hideEmpty) ? props.hideEmpty : overviewFlag },
|
|
13
|
+
return (React.createElement(LayoutContainer, { className: b(), gap: 0.5, hideEmpty: isBoolean(props.hideEmpty) ? props.hideEmpty : overviewFlag, hidden: hidden },
|
|
12
14
|
React.createElement(Flex, { gap: 2 },
|
|
13
15
|
children,
|
|
14
16
|
overviewFlag ? null : React.createElement(ArrayRemoveButton, { name: input.name, headName: headName }),
|
|
15
|
-
overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy:
|
|
17
|
+
overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null),
|
|
16
18
|
overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))));
|
|
17
19
|
};
|
|
@@ -4,15 +4,17 @@ import { CopyButton, HTMLContent, LayoutContainer } from '../../components';
|
|
|
4
4
|
import { block } from '../../utils';
|
|
5
5
|
import './OverviewColumn.css';
|
|
6
6
|
const b = block('overview-column');
|
|
7
|
-
export const OverviewColumn = ({ children, input, schema
|
|
7
|
+
export const OverviewColumn = ({ children, headName, input, schema }) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const { copy, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
8
10
|
const tooltip = React.useMemo(() => {
|
|
9
11
|
if (!schema.description) {
|
|
10
12
|
return null;
|
|
11
13
|
}
|
|
12
14
|
return (React.createElement(HelpMark, { className: b('help-mark') },
|
|
13
|
-
React.createElement(HTMLContent, {
|
|
14
|
-
}, [schema.description]);
|
|
15
|
-
return (React.createElement(LayoutContainer, { className: b(), gap: 2, hideEmpty: true },
|
|
15
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName })));
|
|
16
|
+
}, [headName, schema.description]);
|
|
17
|
+
return (React.createElement(LayoutContainer, { className: b(), gap: 2, hidden: hidden, hideEmpty: true },
|
|
16
18
|
React.createElement(Flex, { direction: "column", gap: 0.5, grow: 1 },
|
|
17
19
|
React.createElement("div", { className: b('top') },
|
|
18
20
|
React.createElement(Text, { className: b('title'), color: "secondary", wordBreak: "break-word" }, schema.title),
|
|
@@ -20,5 +22,5 @@ export const OverviewColumn = ({ children, input, schema, props }) => {
|
|
|
20
22
|
React.createElement(Flex, { className: b('bottom'), direction: "column", gap: 0.5, grow: 1 },
|
|
21
23
|
React.createElement(Flex, { grow: 1, gap: 2 },
|
|
22
24
|
children,
|
|
23
|
-
React.createElement(CopyButton, { className: b('copy-button'), copy:
|
|
25
|
+
React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })))));
|
|
24
26
|
};
|
|
@@ -4,15 +4,17 @@ import { CopyButton, HTMLContent, LayoutContainer } from '../../components';
|
|
|
4
4
|
import { block } from '../../utils';
|
|
5
5
|
import './OverviewRow.css';
|
|
6
6
|
const b = block('overview-row');
|
|
7
|
-
export const OverviewRow = ({ children, input, schema
|
|
7
|
+
export const OverviewRow = ({ children, headName, input, schema }) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const { copy, hidden } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
|
|
8
10
|
const tooltip = React.useMemo(() => {
|
|
9
11
|
if (!schema.description) {
|
|
10
12
|
return null;
|
|
11
13
|
}
|
|
12
14
|
return (React.createElement(HelpMark, { className: b('help-mark') },
|
|
13
|
-
React.createElement(HTMLContent, {
|
|
14
|
-
}, [schema.description]);
|
|
15
|
-
return (React.createElement(LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2, hideEmpty: true },
|
|
15
|
+
React.createElement(HTMLContent, { content: schema.description, headName: headName })));
|
|
16
|
+
}, [headName, schema.description]);
|
|
17
|
+
return (React.createElement(LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2, hidden: hidden, hideEmpty: true },
|
|
16
18
|
React.createElement("div", { className: b('left') },
|
|
17
19
|
React.createElement(Text, { className: b('title'), color: "secondary", wordBreak: "break-all" }, schema.title),
|
|
18
20
|
tooltip,
|
|
@@ -20,5 +22,5 @@ export const OverviewRow = ({ children, input, schema, props }) => {
|
|
|
20
22
|
React.createElement(Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
|
|
21
23
|
React.createElement(Flex, { grow: 1, gap: 2 },
|
|
22
24
|
children,
|
|
23
|
-
React.createElement(CopyButton, { className: b('copy-button'), copy:
|
|
25
|
+
React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })))));
|
|
24
26
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { block } from './cn';
|
|
2
2
|
export { getArrayItemIndex, getArrayItemParentName, getBooleanValidationState, getValidationState, isArrayItem, isStringInt, isStringFloat, isStringNumber, isTupleItem, } from './common';
|
|
3
3
|
export { parseDate } from './date';
|
|
4
|
-
export { specToJsonSchema
|
|
4
|
+
export { specToJsonSchema } from './transformer';
|