feat(TimeRangeSelector): added new input Time Range Selector

docs/spec.md

@@ -79,26 +79,27 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 
 ### ObjectSpec
 
-| Property                   | Type                     | Required | Description                                                                                                                                                                             |
-| :------------------------- | :----------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| defaultValue               | `FieldObjectValue`       |          | Default value                                                                                                                                                                           |
-| type                       | `"object"`               |   yes    | Entity type                                                                                                                                                                             |
-| required                   | `boolean`                |          | Can the value be `undefined` or `null`                                                                                                                                                  |
-| properties                 | `Record<string, Spec>`   |          | `Specs` of child entities                                                                                                                                                               |
-| description                | `Record<string, string>` |          | Easy-to-understand names for keys from `properties`                                                                                                                                     |
-| validator                  | `string`                 |          | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used |
-| viewSpec.disabled          | `boolean`                |          | Is the field available for editing                                                                                                                                                      |
-| viewSpec.type              | `string`                 |   yes    | Key to define [Input](./config.md#inputs) for an entity                                                                                                                                 |
-| viewSpec.layout            | `string`                 |          | Key to define [Layout](./config.md#layouts) for an entity                                                                                                                               |
-| viewSpec.layoutTitle       | `string`                 |          | Title for [Layout](./config.md#layouts)                                                                                                                                                 |
-| viewSpec.layoutDescription | `string`                 |          | Additional description/hint for [Layout](./config.md#layouts)                                                                                                                           |
-| viewSpec.layoutOpen        | `boolean`                |          | Expand [Layout](./config.md#layouts) at the first rendering                                                                                                                             |
-| viewSpec.order             | `string[]`               |          | Array of `properties` keys in the right order                                                                                                                                           |
-| viewSpec.link              | `any`                    |          | A field containing information for forming a [link](#link) for a value                                                                                                                  |
-| viewSpec.oneOfParams       | `object`                 |          | [Parameters](#oneofparams) that must be passed to oneof input                                                                                                                           |
-| viewSpec.placeholder       | `string`                 |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
-| viewSpec.hidden            | `boolean`                |          | Hide field and view                                                                                                                                                                     |
-| viewSpec.delimiter         | `Record<string, string>` |          | Values of delimiters of inline object input elements                                                                                                                                    |
+| Property                         | Type                     | Required | Description                                                                                                                                                                             |
+| :------------------------------- | :----------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultValue                     | `FieldObjectValue`       |          | Default value                                                                                                                                                                           |
+| type                             | `"object"`               |   yes    | Entity type                                                                                                                                                                             |
+| required                         | `boolean`                |          | Can the value be `undefined` or `null`                                                                                                                                                  |
+| properties                       | `Record<string, Spec>`   |          | `Specs` of child entities                                                                                                                                                               |
+| description                      | `Record<string, string>` |          | Easy-to-understand names for keys from `properties`                                                                                                                                     |
+| validator                        | `string`                 |          | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used |
+| viewSpec.disabled                | `boolean`                |          | Is the field available for editing                                                                                                                                                      |
+| viewSpec.type                    | `string`                 |   yes    | Key to define [Input](./config.md#inputs) for an entity                                                                                                                                 |
+| viewSpec.layout                  | `string`                 |          | Key to define [Layout](./config.md#layouts) for an entity                                                                                                                               |
+| viewSpec.layoutTitle             | `string`                 |          | Title for [Layout](./config.md#layouts)                                                                                                                                                 |
+| viewSpec.layoutDescription       | `string`                 |          | Additional description/hint for [Layout](./config.md#layouts)                                                                                                                           |
+| viewSpec.layoutOpen              | `boolean`                |          | Expand [Layout](./config.md#layouts) at the first rendering                                                                                                                             |
+| viewSpec.order                   | `string[]`               |          | Array of `properties` keys in the right order                                                                                                                                           |
+| viewSpec.link                    | `any`                    |          | A field containing information for forming a [link](#link) for a value                                                                                                                  |
+| viewSpec.oneOfParams             | `object`                 |          | [Parameters](#oneofparams) that must be passed to oneof input                                                                                                                           |
+| viewSpec.placeholder             | `string`                 |          | A short hint displayed in the field before the user enters the value                                                                                                                    |
+| viewSpec.hidden                  | `boolean`                |          | Hide field and view                                                                                                                                                                     |
+| viewSpec.delimiter               | `Record<string, string>` |          | Values of delimiters of inline object input elements                                                                                                                                    |
+| viewSpec.timeRangeSelectorParams | `object`                 |          | [Parameters](#timerangeselectorparams) additional options for the Time Range Selector                                                                                                   |
 
 ### StringSpec
 
@@ -196,6 +197,12 @@ You can provide all props of [original component](https://preview.gravity-ui.com
 | placement | `'horizontal'` `'vertical'` |          | Placement checkbox, default `'horizontal'` |
 | disabled  | `Record<string, boolean>`   |          | Disabled checkbox for enum values          |
 
+#### TimeRangeSelectorParams
+
+| Property | Type     | Required | Description                                         |
+| :------- | :------- | :------: | :-------------------------------------------------- |
+| timeStep | `number` |          | The time step is specified in minutes, default `60` |
+
 #### Link
 
 A component that serves as a wrapper for the value, if necessary, rendering the value as a link.

src/lib/core/types/specs.ts

@@ -130,6 +130,9 @@ export interface ObjectSpec<
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
         delimiter?: Record<string, string>;
+        timeRangeSelectorParams?: {
+            timeStep?: number;
+        };
     };
 }
 

src/lib/kit/components/Inputs/TimeRangeSelector/TimeRangeSelector.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import cloneDeep from 'lodash/cloneDeep';
+import isString from 'lodash/isString';
+import set from 'lodash/set';
+
+import {FieldValue, ObjectIndependentInput, ValidateError, isStringSpec} from '../../../../core';
+
+import {TimeRangeSelect} from './components';
+import {filterTimeArray} from './utils';
+
+const START_TIME = 'start';
+const END_TIME = 'end';
+
+export const TimeRangeSelector: ObjectIndependentInput = (props) => {
+    const {spec, input, name, Layout} = props;
+
+    const {startTimeSpec, endTimeSpec} = React.useMemo(() => {
+        let startTimeSpec, endTimeSpec;
+
+        if (spec.properties?.[START_TIME] && isStringSpec(spec.properties[START_TIME])) {
+            const _spec = cloneDeep(spec.properties[START_TIME]);
+
+            startTimeSpec = _spec;
+        }
+
+        if (spec.properties?.[END_TIME] && isStringSpec(spec.properties[END_TIME])) {
+            const _spec = cloneDeep(spec.properties[END_TIME]);
+
+            endTimeSpec = _spec;
+        }
+
+        return {startTimeSpec, endTimeSpec};
+    }, [spec.properties]);
+
+    const defaultTimeOptions = React.useMemo(() => {
+        const times: string[] = [];
+        const totalMinutesInDay = 24 * 60;
+        const step = spec.viewSpec.timeRangeSelectorParams?.timeStep || 60;
+
+        for (let minutes = 0; minutes < totalMinutesInDay; minutes += step) {
+            const hours = Math.floor(minutes / 60);
+            const mins = minutes % 60;
+            times.push(`${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`);
+        }
+
+        return times.map((time) => ({id: time, content: time, value: time}));
+    }, [spec.viewSpec.timeRangeSelectorParams?.timeStep]);
+
+    const {startTimeOptions, endTimeOptions} = React.useMemo(() => {
+        let startTimeOptions = defaultTimeOptions.slice(0, -1);
+        let endTimeOptions = defaultTimeOptions.slice(1);
+
+        if (input.value?.[START_TIME] && isString(input.value[START_TIME])) {
+            endTimeOptions = filterTimeArray(
+                defaultTimeOptions,
+                input.value[START_TIME],
+                'greater',
+            );
+        }
+
+        if (input.value?.[END_TIME] && isString(input.value[END_TIME])) {
+            startTimeOptions = filterTimeArray(defaultTimeOptions, input.value[END_TIME], 'less');
+        }
+
+        return {startTimeOptions, endTimeOptions};
+    }, [defaultTimeOptions, input.value]);
+
+    const parentOnChange = React.useCallback(
+        (childName: string, childValue: FieldValue, childErrors?: Record<string, ValidateError>) =>
+            input.onChange(
+                (currentValue) =>
+                    set({...currentValue}, childName.split(`${name}.`).join(''), childValue),
+                childErrors,
+            ),
+        [input, name],
+    );
+
+    if (!startTimeSpec || !endTimeSpec) {
+        return null;
+    }
+
+    const content = (
+        <React.Fragment>
+            <TimeRangeSelect
+                spec={startTimeSpec}
+                name={`${name}.${START_TIME}`}
+                options={startTimeOptions}
+                value={input.value?.[START_TIME]}
+                placeholder={startTimeOptions[0]?.content}
+                handleChange={(value) => parentOnChange(START_TIME, value[0])}
+                props={props}
+            />
+            <TimeRangeSelect
+                spec={endTimeSpec}
+                name={`${name}.${END_TIME}`}
+                options={endTimeOptions}
+                value={input.value?.[END_TIME]}
+                placeholder={endTimeOptions[0]?.content}
+                handleChange={(value) => parentOnChange(END_TIME, value[0])}
+                props={props}
+            />
+        </React.Fragment>
+    );
+
+    if (Layout) {
+        return <Layout {...props}>{content}</Layout>;
+    }
+
+    return <React.Fragment>{content}</React.Fragment>;
+};

src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/TimeRangeSelector.visual.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {TIME_RANGE_SELECTOR, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('TimeRangeSelector', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.default} />);
+
+        await expectScreenshot();
+    });
+
+    test('default value', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.defaultValue} />);
+
+        await expectScreenshot();
+    });
+
+    test('required', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.required} />);
+
+        await expectScreenshot();
+    });
+
+    test('description', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={TIME_RANGE_SELECTOR.desription} />);
+
+        await expectScreenshot();
+    });
+});
+
+test('TimeRangeSelector View', async ({mount, expectScreenshot}) => {
+    await mount(<DynamicView spec={TIME_RANGE_SELECTOR.default} value={VALUE} />);
+
+    await expectScreenshot();
+});

src/lib/kit/components/Inputs/TimeRangeSelector/__tests__/helpers.ts

@@ -0,0 +1,117 @@
+import {FormValue, ObjectSpec, SpecTypes} from '../../../../../core';
+
+export const TIME_RANGE_SELECTOR: Record<string, ObjectSpec> = {
+    default: {
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                },
+            },
+            end: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+    defaultValue: {
+        defaultValue: {
+            start: '03:00',
+            end: '06:00',
+        },
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                },
+            },
+            end: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+    required: {
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                required: true,
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                },
+            },
+            end: {
+                required: true,
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+    desription: {
+        type: SpecTypes.Object,
+        properties: {
+            start: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'Start of launch',
+                    layoutDescription: 'End of launch Description',
+                },
+            },
+            end: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'select',
+                    layout: 'row',
+                    layoutTitle: 'End of launch',
+                    layoutDescription: 'End of launch Description',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'time_range_selector',
+            layout: 'transparent',
+        },
+    },
+};
+
+export const VALUE: FormValue = {
+    start: '10:00',
+    end: '20:00',
+};