@gravity-ui/dynamic-forms 4.5.0 → 4.7.0

package/build/esm/lib/kit/components/Views/DateView/DateView.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { BaseView, DEFAULT_DATE_FORMAT } from '../../../components';
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import isObject from 'lodash/isObject';
+export const DateView = (_a) => {
+    var _b, _c, _d;
+    var { value, spec } = _a, restProps = __rest(_a, ["value", "spec"]);
+    let formatedValue = value && isObject(value) && value.seconds
+        ? (value === null || value === void 0 ? void 0 : value.seconds) * 1000
+        : value;
+    const localSpec = spec.viewSpec;
+    const format = ((_b = localSpec.inputProps) === null || _b === void 0 ? void 0 : _b.format) || ((_c = localSpec.dateInput) === null || _c === void 0 ? void 0 : _c.printFormat) || DEFAULT_DATE_FORMAT;
+    if (formatedValue && format) {
+        formatedValue = ((_d = dateTimeParse(formatedValue)) === null || _d === void 0 ? void 0 : _d.format(format)) || formatedValue;
+    }
+    return React.createElement(BaseView, Object.assign({ spec: spec, value: String(formatedValue) }, restProps));
+};

package/build/esm/lib/kit/components/Views/DateView/index.d.ts

@@ -0,0 +1 @@
+export * from './DateView';

package/build/esm/lib/kit/components/Views/DateView/index.js

@@ -0,0 +1 @@
+export * from './DateView';

package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Table } from '@gravity-ui/uikit';
-import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, } from '../../../../core';
+import { Flex, Table } from '@gravity-ui/uikit';
+import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, useDynamicFormsCtx, } from '../../../../core';
 import { block } from '../../../utils';
 import './TableArrayView.css';
+import { HelpPopover } from '@gravity-ui/components';
 const b = block('table-array-view');
 export const TableArrayView = ({ value = [], spec, name }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
     const columns = React.useMemo(() => {
         const { items, viewSpec: { table }, } = spec;
         if (!(table === null || table === void 0 ? void 0 : table.length) || !isObjectSpec(items)) {
@@ -16,9 +18,13 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             sticky: 'left',
             template: (__, idx) => (React.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
         };
-        const columns = table.map(({ property, label }) => ({
+        const columns = table.map(({ property, label, description }) => ({
             id: property,
-            name: label,
+            name: description && showLayoutDescription
+                ? () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
+                    label,
+                    React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })))
+                : label,
             template: (_, idx) => {
                 var _a;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
@@ -34,7 +40,7 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             },
         }));
         return [idxColumn, ...columns];
-    }, [name, spec]);
+    }, [name, spec, showLayoutDescription]);
     if (!columns) {
         return null;
     }

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.d.ts

@@ -0,0 +1,2 @@
+import { ObjectIndependentView } from '../../../../core';
+export declare const TimeRangeSelectorView: ObjectIndependentView;

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/TimeRangeSelectorView.js

@@ -0,0 +1,30 @@
+import { __rest } from "tslib";
+import React from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import { ViewController, isStringSpec } from '../../../../core';
+import { END_TIME, START_TIME } from '../../../constants/common';
+export const TimeRangeSelectorView = (_a) => {
+    var { value, spec, name, Layout } = _a, restProps = __rest(_a, ["value", "spec", "name", "Layout"]);
+    const { startTimeSpec, endTimeSpec } = React.useMemo(() => {
+        const [startTimeSpec, endTimeSpec] = [START_TIME, END_TIME].map((key) => {
+            var _a;
+            if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key]) && isStringSpec(spec.properties[key])) {
+                const _spec = cloneDeep(spec.properties[key]);
+                _spec.viewSpec.layout = 'row';
+                return _spec;
+            }
+            return undefined;
+        });
+        return { startTimeSpec, endTimeSpec };
+    }, [spec.properties]);
+    if (!startTimeSpec || !endTimeSpec) {
+        return null;
+    }
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement(ViewController, { spec: startTimeSpec, name: `${name ? name + '.' : ''}${START_TIME}` }),
+        React.createElement(ViewController, { spec: endTimeSpec, name: `${name ? name + '.' : ''}${END_TIME}` })));
+    if (Layout) {
+        return (React.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
+    }
+    return React.createElement(React.Fragment, null, content);
+};

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/index.d.ts

@@ -0,0 +1 @@
+export * from './TimeRangeSelectorView';

package/build/esm/lib/kit/components/Views/TimeRangeSelectorView/index.js

@@ -0,0 +1 @@
+export * from './TimeRangeSelectorView';

package/build/esm/lib/kit/components/Views/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
+export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
@@ -12,3 +13,5 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './TimeRangeSelectorView';
+export * from './DateView';

package/build/esm/lib/kit/components/Views/index.js

@@ -1,5 +1,6 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
+export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';
@@ -12,3 +13,5 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './TimeRangeSelectorView';
+export * from './DateView';

package/build/esm/lib/kit/constants/common.d.ts

@@ -2,3 +2,5 @@ import type { PopoverProps } from '@gravity-ui/uikit';
 export declare const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'];
 export declare const COMMON_TITLE_MAX_WIDTH = 533;
 export declare const OBJECT_VALUE_PROPERTY_NAME = "value";
+export declare const START_TIME = "start";
+export declare const END_TIME = "end";

package/build/esm/lib/kit/constants/common.js

@@ -1,3 +1,5 @@
 export const COMMON_POPOVER_PLACEMENT = ['bottom', 'top'];
 export const COMMON_TITLE_MAX_WIDTH = 533;
 export const OBJECT_VALUE_PROPERTY_NAME = 'value';
+export const START_TIME = 'start';
+export const END_TIME = 'end';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -6,6 +6,7 @@ export const dynamicConfig = {
             select: { Component: MultiSelect },
             table: { Component: TableArrayInput },
             base: { Component: ArrayBase },
+            checkbox_group: { Component: CheckboxGroup },
         },
         layouts: {
             row: Row,
@@ -66,6 +67,7 @@ export const dynamicConfig = {
             multi_oneof: { Component: MultiOneOf, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
             inline: { Component: ObjectInline, independent: true },
+            time_range_selector: { Component: TimeRangeSelector, independent: true },
         },
         layouts: {
             row: Row,
@@ -91,6 +93,7 @@ export const dynamicConfig = {
             select: { Component: Select },
             base: { Component: Text },
             file_input: { Component: FileInput },
+            date_input: { Component: DateInput },
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
@@ -118,6 +121,7 @@ export const dynamicViewConfig = {
             select: { Component: MultiSelectView },
             table: { Component: TableArrayView },
             base: { Component: ArrayBaseView },
+            checkbox_group: { Component: CheckboxGroupView },
         },
         layouts: {
             row: ViewRow,
@@ -169,6 +173,7 @@ export const dynamicViewConfig = {
             multi_oneof: { Component: MultiOneOfView, independent: true },
             multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
             inline: { Component: ObjectInlineView, independent: true },
+            time_range_selector: { Component: TimeRangeSelectorView, independent: true },
         },
         layouts: {
             row: ViewRow,
@@ -190,6 +195,7 @@ export const dynamicViewConfig = {
             textarea: { Component: TextAreaView },
             select: { Component: BaseView },
             base: { Component: BaseView },
+            date_input: { Component: DateView },
             file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.5.0",
+  "version": "4.7.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -45,6 +45,8 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/components": "^3.0.0",
+    "@gravity-ui/date-components": "^2.5.0",
+    "@gravity-ui/date-utils": "^2.5.3",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"