diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.scss b/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.scss new file mode 100644 index 00000000..853700e0 --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.scss @@ -0,0 +1,29 @@ +@import '../../../styles/variables'; + +.#{$ns}range-input-picker { + display: flex; + flex-direction: column; + gap: var(--g-spacing-3); + width: 100%; + + &__slider { + padding: 0 var(--g-spacing-2); + } + + &__inputs { + display: flex; + flex-direction: row; + align-items: center; + gap: var(--g-spacing-2); + } + + &__input { + flex: 1 1 0; + min-width: 0; + } + + &__separator { + flex: 0 0 auto; + color: var(--g-color-text-secondary); + } +} diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.tsx b/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.tsx new file mode 100644 index 00000000..d71d8833 --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.tsx @@ -0,0 +1,180 @@ +import React from 'react'; + +import {NumberInput, Slider} from '@gravity-ui/uikit'; +import isNil from 'lodash/isNil'; +import set from 'lodash/set'; + +import type {FieldValue, NumberSpec, ObjectInputProps, ValidateError} from '../../../../core'; +import {isNumberSpec} from '../../../../core'; +import { + FROM, + RANGE_INPUT_PICKER_DEFAULT_MARKS, + RANGE_INPUT_PICKER_DEFAULT_MAX, + RANGE_INPUT_PICKER_DEFAULT_MIN, + RANGE_INPUT_PICKER_DEFAULT_SEPARATOR, + RANGE_INPUT_PICKER_DEFAULT_STEP, + TO, +} from '../../../constants/common'; +import {block, clampRangeInputPickerValue, resolveRangeInputPickerBound} from '../../../utils'; + +import type {RangeInputPickerInputProps, RangeInputPickerValue} from './types'; + +import './RangeInputPicker.scss'; + +const b = block('range-input-picker'); + +export const RangeInputPicker = (props: ObjectInputProps) => { + const {spec, input, name} = props; + const {disabled, inputProps} = spec.viewSpec; + const sliderParams = inputProps?.sliderParams; + const showSlider = inputProps?.showSlider ?? true; + const showInputs = inputProps?.showInputs ?? true; + + const [fromSpec, toSpec] = React.useMemo( + () => + [FROM, TO].map((key) => + isNumberSpec(spec.properties?.[key]) + ? (spec.properties?.[key] as NumberSpec) + : undefined, + ), + [spec.properties], + ); + + const sliderMin = resolveRangeInputPickerBound( + sliderParams?.min, + fromSpec?.minimum, + RANGE_INPUT_PICKER_DEFAULT_MIN, + ); + const sliderMax = resolveRangeInputPickerBound( + sliderParams?.max, + toSpec?.maximum, + RANGE_INPUT_PICKER_DEFAULT_MAX, + ); + const sliderStep = sliderParams?.step ?? RANGE_INPUT_PICKER_DEFAULT_STEP; + const sliderMarks = sliderParams?.marks ?? RANGE_INPUT_PICKER_DEFAULT_MARKS; + + const value = (input.value as RangeInputPickerValue | undefined) ?? {}; + const fromValue = isNil(value.from) ? undefined : Number(value.from); + const toValue = isNil(value.to) ? undefined : Number(value.to); + + const sliderValue: [number, number] = [ + isNil(fromValue) ? sliderMin : fromValue, + isNil(toValue) ? sliderMax : toValue, + ]; + + const parentOnChange = React.useCallback( + (childName: string, childValue: FieldValue, childErrors?: Record) => + input.onChange( + (currentValue) => + set({...currentValue}, childName.split(`${name}.`).join(''), childValue), + childErrors, + ), + [input, name], + ); + + const handleSliderUpdate = React.useCallback( + (next: number | [number, number]) => { + if (!Array.isArray(next)) { + return; + } + + input.onChange(() => ({ + ...value, + [FROM]: next[0], + [TO]: next[1], + })); + }, + [input, value], + ); + + const handleFromUpdate = React.useCallback( + (next: number | null) => { + const safe = + next === null + ? undefined + : clampRangeInputPickerValue( + next, + sliderMin, + isNil(toValue) ? sliderMax : toValue, + ); + + parentOnChange(`${name}.${FROM}`, safe); + }, + [name, parentOnChange, sliderMin, sliderMax, toValue], + ); + + const handleToUpdate = React.useCallback( + (next: number | null) => { + const safe = + next === null + ? undefined + : clampRangeInputPickerValue( + next, + isNil(fromValue) ? sliderMin : fromValue, + sliderMax, + ); + + parentOnChange(`${name}.${TO}`, safe); + }, + [name, parentOnChange, sliderMin, sliderMax, fromValue], + ); + + return ( +
+ {showSlider ? ( +
+ +
+ ) : null} + {showInputs ? ( +
+ + + {inputProps?.separator ?? RANGE_INPUT_PICKER_DEFAULT_SEPARATOR} + + +
+ ) : null} +
+ ); +}; diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPickerNumber.tsx b/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPickerNumber.tsx new file mode 100644 index 00000000..250b2277 --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/RangeInputPickerNumber.tsx @@ -0,0 +1,115 @@ +import React from 'react'; + +import {NumberInput, Slider} from '@gravity-ui/uikit'; +import isNil from 'lodash/isNil'; + +import type {FieldRenderProps, NumberInputProps} from '../../../../core'; +import { + RANGE_INPUT_PICKER_DEFAULT_MARKS, + RANGE_INPUT_PICKER_DEFAULT_MAX, + RANGE_INPUT_PICKER_DEFAULT_MIN, + RANGE_INPUT_PICKER_DEFAULT_STEP, +} from '../../../constants/common'; +import {block, clampRangeInputPickerValue, resolveRangeInputPickerBound} from '../../../utils'; + +import type {RangeInputPickerInputProps} from './types'; + +import './RangeInputPicker.scss'; + +const b = block('range-input-picker'); + +export const RangeInputPickerNumber = ({ + name, + input: {value, onBlur, onChange, onFocus}, + spec, +}: NumberInputProps) => { + const {disabled, placeholder, inputProps} = spec.viewSpec; + const sliderParams = inputProps?.sliderParams; + const showSlider = inputProps?.showSlider ?? true; + const showInputs = inputProps?.showInputs ?? true; + + const sliderMin = resolveRangeInputPickerBound( + sliderParams?.min, + spec.minimum, + RANGE_INPUT_PICKER_DEFAULT_MIN, + ); + const sliderMax = resolveRangeInputPickerBound( + sliderParams?.max, + spec.maximum, + RANGE_INPUT_PICKER_DEFAULT_MAX, + ); + const sliderStep = sliderParams?.step ?? RANGE_INPUT_PICKER_DEFAULT_STEP; + const sliderMarks = sliderParams?.marks ?? RANGE_INPUT_PICKER_DEFAULT_MARKS; + + const numericValue = isNil(value) ? undefined : Number(value); + const sliderValue = isNil(numericValue) ? sliderMin : numericValue; + + const onChangeAllowUndefined = onChange as FieldRenderProps< + number | undefined + >['input']['onChange']; + + const handleSliderUpdate = React.useCallback( + (next: number | [number, number]) => { + if (Array.isArray(next)) { + return; + } + + onChangeAllowUndefined(next); + }, + [onChangeAllowUndefined], + ); + + const handleInputUpdate = React.useCallback( + (next: number | null) => { + if (next === null) { + onChangeAllowUndefined(undefined); + + return; + } + + onChangeAllowUndefined(clampRangeInputPickerValue(next, sliderMin, sliderMax)); + }, + [onChangeAllowUndefined, sliderMin, sliderMax], + ); + + return ( +
+ {showSlider ? ( +
+ +
+ ) : null} + {showInputs ? ( +
+ +
+ ) : null} +
+ ); +}; diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-dark-chromium-linux.png new file mode 100644 index 00000000..1dae85de Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-dark-webkit-linux.png new file mode 100644 index 00000000..689f9163 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-light-chromium-linux.png new file mode 100644 index 00000000..7871a440 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-light-webkit-linux.png new file mode 100644 index 00000000..2d59f1df Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-dark-chromium-linux.png new file mode 100644 index 00000000..fa1c0092 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-dark-webkit-linux.png new file mode 100644 index 00000000..11559484 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-light-chromium-linux.png new file mode 100644 index 00000000..ba613ca5 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-light-webkit-linux.png new file mode 100644 index 00000000..fd4a6ab9 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-default-value-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-dark-chromium-linux.png new file mode 100644 index 00000000..7fae511e Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-dark-webkit-linux.png new file mode 100644 index 00000000..cdeed466 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-light-chromium-linux.png new file mode 100644 index 00000000..bf1aeeb2 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-light-webkit-linux.png new file mode 100644 index 00000000..5532d72d Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-disabled-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-dark-chromium-linux.png new file mode 100644 index 00000000..8cc038f5 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-dark-webkit-linux.png new file mode 100644 index 00000000..727b8a66 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-light-chromium-linux.png new file mode 100644 index 00000000..066cb043 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-light-webkit-linux.png new file mode 100644 index 00000000..9e0c5ee9 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Number-spec-view-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-dark-chromium-linux.png new file mode 100644 index 00000000..33469e2a Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-dark-webkit-linux.png new file mode 100644 index 00000000..8c75beb9 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-light-chromium-linux.png new file mode 100644 index 00000000..5070e27c Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-light-webkit-linux.png new file mode 100644 index 00000000..d120dcdf Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-dark-chromium-linux.png new file mode 100644 index 00000000..f89beb82 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-dark-webkit-linux.png new file mode 100644 index 00000000..0aa697cd Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-light-chromium-linux.png new file mode 100644 index 00000000..22ac8a12 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-light-webkit-linux.png new file mode 100644 index 00000000..c916b81a Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-default-value-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-dark-chromium-linux.png new file mode 100644 index 00000000..3642b532 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-dark-webkit-linux.png new file mode 100644 index 00000000..f80f516d Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-light-chromium-linux.png new file mode 100644 index 00000000..3270ea6e Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-light-webkit-linux.png new file mode 100644 index 00000000..d4bfcc26 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-description-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-dark-chromium-linux.png new file mode 100644 index 00000000..6b314783 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-dark-webkit-linux.png new file mode 100644 index 00000000..8d512be4 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-light-chromium-linux.png new file mode 100644 index 00000000..04765d6c Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-light-webkit-linux.png new file mode 100644 index 00000000..785b4364 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-disabled-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-dark-chromium-linux.png new file mode 100644 index 00000000..33469e2a Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-dark-webkit-linux.png new file mode 100644 index 00000000..8c75beb9 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-light-chromium-linux.png new file mode 100644 index 00000000..5070e27c Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-light-webkit-linux.png new file mode 100644 index 00000000..d120dcdf Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-required-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-dark-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-dark-chromium-linux.png new file mode 100644 index 00000000..bcbdd91e Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-dark-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-dark-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-dark-webkit-linux.png new file mode 100644 index 00000000..1c0dd1cf Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-dark-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-light-chromium-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-light-chromium-linux.png new file mode 100644 index 00000000..e21eeeb8 Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-light-chromium-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-light-webkit-linux.png b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-light-webkit-linux.png new file mode 100644 index 00000000..2057b35d Binary files /dev/null and b/src/lib/kit/components/Inputs/RangeInputPicker/__snapshots__/RangeInputPicker.visual.test.tsx-snapshots/RangeInputPicker-Object-spec-view-light-webkit-linux.png differ diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__tests__/RangeInputPicker.visual.test.tsx b/src/lib/kit/components/Inputs/RangeInputPicker/__tests__/RangeInputPicker.visual.test.tsx new file mode 100644 index 00000000..2f709aa4 --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/__tests__/RangeInputPicker.visual.test.tsx @@ -0,0 +1,80 @@ +import React from 'react'; + +import {test} from '~playwright/core'; +import {DynamicForm} from '~playwright/core/DynamicForm'; +import {DynamicView} from '~playwright/core/DynamicView'; + +import { + NUMBER_VALUE, + RANGE_INPUT_PICKER_NUMBER_SPEC, + RANGE_INPUT_PICKER_SPEC, + VALUE, +} from './helpers'; + +test.describe('RangeInputPicker', () => { + test.describe('Object spec', () => { + test('default', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('default value', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('required', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('disabled', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('description', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('view', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + }); + + test.describe('Number spec', () => { + test('default', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('default value', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('disabled', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('view', async ({mount, expectScreenshot}) => { + await mount( + , + ); + + await expectScreenshot(); + }); + }); +}); diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/__tests__/helpers.ts b/src/lib/kit/components/Inputs/RangeInputPicker/__tests__/helpers.ts new file mode 100644 index 00000000..4a25cdbd --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/__tests__/helpers.ts @@ -0,0 +1,127 @@ +import type {FormValue, NumberSpec, ObjectSpec} from '../../../../../core'; +import {SpecTypes} from '../../../../../core'; + +const fromTo = ( + extra: Partial = {}, + viewExtra: Partial = {}, +): NumberSpec => ({ + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + ...extra, + viewSpec: { + type: 'base', + ...viewExtra, + }, +}); + +export const RANGE_INPUT_PICKER_SPEC: Record = { + default: { + type: SpecTypes.Object, + properties: { + from: fromTo({}, {placeholder: 'from'}), + to: fromTo({}, {placeholder: 'to'}), + }, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Price', + }, + }, + defaultValue: { + defaultValue: {from: 25, to: 75}, + type: SpecTypes.Object, + properties: { + from: fromTo({}, {placeholder: 'from'}), + to: fromTo({}, {placeholder: 'to'}), + }, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Price', + }, + }, + required: { + type: SpecTypes.Object, + properties: { + from: fromTo({required: true}, {placeholder: 'from'}), + to: fromTo({required: true}, {placeholder: 'to'}), + }, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Price', + }, + }, + disabled: { + type: SpecTypes.Object, + properties: { + from: fromTo({}, {placeholder: 'from'}), + to: fromTo({}, {placeholder: 'to'}), + }, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Price', + disabled: true, + }, + }, + description: { + type: SpecTypes.Object, + properties: { + from: fromTo({}, {placeholder: 'from'}), + to: fromTo({}, {placeholder: 'to'}), + }, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Price', + layoutDescription: 'Range of prices', + }, + }, +}; + +export const RANGE_INPUT_PICKER_NUMBER_SPEC: Record = { + default: { + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Volume', + placeholder: 'volume', + }, + }, + defaultValue: { + defaultValue: 40, + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Volume', + placeholder: 'volume', + }, + }, + disabled: { + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Volume', + placeholder: 'volume', + disabled: true, + }, + }, +}; + +export const VALUE: FormValue = { + from: 20, + to: 80, +}; + +export const NUMBER_VALUE: FormValue = 60 as unknown as FormValue; diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/index.ts b/src/lib/kit/components/Inputs/RangeInputPicker/index.ts new file mode 100644 index 00000000..f1ccecc6 --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/index.ts @@ -0,0 +1,3 @@ +export * from './RangeInputPicker'; +export * from './RangeInputPickerNumber'; +export * from './types'; diff --git a/src/lib/kit/components/Inputs/RangeInputPicker/types.ts b/src/lib/kit/components/Inputs/RangeInputPicker/types.ts new file mode 100644 index 00000000..162e11e1 --- /dev/null +++ b/src/lib/kit/components/Inputs/RangeInputPicker/types.ts @@ -0,0 +1,16 @@ +export interface RangeInputPickerInputProps { + sliderParams?: { + min: number; + max: number; + step?: number; + marks?: number | number[]; + }; + showSlider?: boolean; + showInputs?: boolean; + separator?: string; +} + +export interface RangeInputPickerValue { + from?: number; + to?: number; +} diff --git a/src/lib/kit/components/Inputs/index.ts b/src/lib/kit/components/Inputs/index.ts index e50fd10d..b8e048a2 100644 --- a/src/lib/kit/components/Inputs/index.ts +++ b/src/lib/kit/components/Inputs/index.ts @@ -12,6 +12,7 @@ export * from './ObjectBase'; export * from './ObjectValueInput'; export * from './OneOf'; export * from './RadioGroup'; +export * from './RangeInputPicker'; export * from './Secret'; export * from './Select'; export * from './Switch'; diff --git a/src/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerNumberView.tsx b/src/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerNumberView.tsx new file mode 100644 index 00000000..6abe15b3 --- /dev/null +++ b/src/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerNumberView.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import {Text} from '@gravity-ui/uikit'; +import isNil from 'lodash/isNil'; + +import type {NumberView} from '../../../../core'; + +export const RangeInputPickerNumberView: NumberView = ({value}) => { + if (isNil(value)) { + return null; + } + + return {String(value)}; +}; diff --git a/src/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerView.tsx b/src/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerView.tsx new file mode 100644 index 00000000..a4c42bf7 --- /dev/null +++ b/src/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerView.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import {Text} from '@gravity-ui/uikit'; +import isNil from 'lodash/isNil'; + +import type {ObjectView} from '../../../../core'; +import {RANGE_INPUT_PICKER_DEFAULT_SEPARATOR} from '../../../constants/common'; +import type {RangeInputPickerInputProps} from '../../Inputs/RangeInputPicker'; + +export const RangeInputPickerView: ObjectView = ({value, spec}) => { + const separator = + (spec.viewSpec.inputProps as RangeInputPickerInputProps | undefined)?.separator ?? + RANGE_INPUT_PICKER_DEFAULT_SEPARATOR; + const from = value?.from; + const to = value?.to; + + const formatted = (() => { + if (isNil(from) && isNil(to)) { + return ''; + } + + if (isNil(from)) { + return `${separator} ${to}`; + } + + if (isNil(to)) { + return `${from} ${separator}`; + } + + return `${from} ${separator} ${to}`; + })(); + + return {formatted}; +}; diff --git a/src/lib/kit/components/Views/RangeInputPickerView/index.ts b/src/lib/kit/components/Views/RangeInputPickerView/index.ts new file mode 100644 index 00000000..5ff116a0 --- /dev/null +++ b/src/lib/kit/components/Views/RangeInputPickerView/index.ts @@ -0,0 +1,2 @@ +export * from './RangeInputPickerNumberView'; +export * from './RangeInputPickerView'; diff --git a/src/lib/kit/components/Views/index.ts b/src/lib/kit/components/Views/index.ts index bd7c463c..7d6d3e86 100644 --- a/src/lib/kit/components/Views/index.ts +++ b/src/lib/kit/components/Views/index.ts @@ -10,6 +10,7 @@ export * from './NumberWithScaleView'; export * from './ObjectBaseView'; export * from './ObjectValueInputView'; export * from './OneOfView'; +export * from './RangeInputPickerView'; export * from './TableArrayView'; export * from './TextAreaView'; export * from './TextContentView'; diff --git a/src/lib/kit/constants/common.ts b/src/lib/kit/constants/common.ts index 964f51f5..103eeeb6 100644 --- a/src/lib/kit/constants/common.ts +++ b/src/lib/kit/constants/common.ts @@ -8,3 +8,12 @@ export const OBJECT_VALUE_PROPERTY_NAME = 'value'; export const START_TIME = 'start'; export const END_TIME = 'end'; + +export const FROM = 'from'; +export const TO = 'to'; + +export const RANGE_INPUT_PICKER_DEFAULT_MIN = 0; +export const RANGE_INPUT_PICKER_DEFAULT_MAX = 100; +export const RANGE_INPUT_PICKER_DEFAULT_STEP = 1; +export const RANGE_INPUT_PICKER_DEFAULT_MARKS = 2; +export const RANGE_INPUT_PICKER_DEFAULT_SEPARATOR = '–'; diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx index 9108289b..8196df26 100644 --- a/src/lib/kit/constants/config.tsx +++ b/src/lib/kit/constants/config.tsx @@ -41,6 +41,10 @@ import { OneOfFlatView, OneOfView, RadioGroup, + RangeInputPicker, + RangeInputPickerNumber, + RangeInputPickerNumberView, + RangeInputPickerView, Row, RowVerbose, Secret, @@ -128,6 +132,7 @@ export const dynamicConfig: DynamicFormConfig = { number: { inputs: { base: {Component: NumInput}, + range_input_picker: {Component: RangeInputPickerNumber}, }, layouts: { row: Row, @@ -153,6 +158,7 @@ export const dynamicConfig: DynamicFormConfig = { multi_oneof_flat: {Component: MultiOneOfFlat, independent: true}, inline: {Component: ObjectInline, independent: true}, time_range_selector: {Component: TimeRangeSelector, independent: true}, + range_input_picker: {Component: RangeInputPicker}, }, layouts: { row: Row, @@ -244,6 +250,7 @@ export const dynamicViewConfig: DynamicViewConfig = { number: { views: { base: {Component: BaseView}, + range_input_picker: {Component: RangeInputPickerNumberView}, }, layouts: { row: ViewRow, @@ -266,6 +273,7 @@ export const dynamicViewConfig: DynamicViewConfig = { multi_oneof_flat: {Component: MultiOneOfFlatView, independent: true}, inline: {Component: ObjectInlineView, independent: true}, time_range_selector: {Component: TimeRangeSelectorView, independent: true}, + range_input_picker: {Component: RangeInputPickerView}, }, layouts: { row: ViewRow, diff --git a/src/lib/kit/utils/common.ts b/src/lib/kit/utils/common.ts index 21794b4e..fa1696e8 100644 --- a/src/lib/kit/utils/common.ts +++ b/src/lib/kit/utils/common.ts @@ -182,6 +182,25 @@ export const prepareSpec = ( return spec; }; +export const clampRangeInputPickerValue = (value: number, min: number, max: number) => + Math.min(Math.max(value, min), max); + +export const resolveRangeInputPickerBound = ( + inputBound: number | undefined, + specBound: number | undefined, + fallback: number, +) => { + if (!isNil(inputBound)) { + return inputBound; + } + + if (!isNil(specBound)) { + return specBound; + } + + return fallback; +}; + export const isCorrectSizeParams = (spec: StringSpec) => { const {sizeParams} = spec.viewSpec; diff --git a/src/stories/NumberRangeInputPicker.stories.tsx b/src/stories/NumberRangeInputPicker.stories.tsx new file mode 100644 index 00000000..97ccbcb8 --- /dev/null +++ b/src/stories/NumberRangeInputPicker.stories.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +import type {StoryFn} from '@storybook/react'; + +import type {NumberSpec} from '../lib'; +import {RangeInputPickerNumber, SpecTypes} from '../lib'; + +import {InputPreview} from './components'; + +export default { + title: 'Number/RangeInputPicker', + component: RangeInputPickerNumber, +}; + +const baseSpec: NumberSpec = { + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Volume', + placeholder: 'volume', + }, +}; + +const excludeOptions = ['viewSpec.type']; + +const template = (spec: NumberSpec = baseSpec) => { + const Template: StoryFn = (__, {viewMode}) => ( + + ); + + return Template; +}; + +export const RangeInputPicker = template(); diff --git a/src/stories/ObjectRangeInputPicker.stories.tsx b/src/stories/ObjectRangeInputPicker.stories.tsx new file mode 100644 index 00000000..fa902191 --- /dev/null +++ b/src/stories/ObjectRangeInputPicker.stories.tsx @@ -0,0 +1,66 @@ +import React from 'react'; + +import type {StoryFn} from '@storybook/react'; + +import type {ObjectSpec} from '../lib'; +import {RangeInputPicker as RangeInputPickerBase, SpecTypes} from '../lib'; + +import {InputPreview} from './components'; + +export default { + title: 'Object/RangeInputPicker', + component: RangeInputPickerBase, +}; + +const baseSpec: ObjectSpec = { + type: SpecTypes.Object, + properties: { + from: { + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + viewSpec: { + type: 'base', + placeholder: 'from', + }, + }, + to: { + type: SpecTypes.Number, + minimum: 0, + maximum: 100, + viewSpec: { + type: 'base', + placeholder: 'to', + }, + }, + }, + viewSpec: { + type: 'range_input_picker', + layout: 'row', + layoutTitle: 'Price', + }, +}; + +const excludeOptions = [ + 'description', + 'validator', + 'viewSpec.type', + 'viewSpec.order', + 'viewSpec.layoutOpen', + 'viewSpec.disabled', + 'viewSpec.oneOfParams', + 'viewSpec.placeholder', + 'viewSpec.delimiter', + 'viewSpec.inputProps', + 'viewSpec.layoutProps', +]; + +const template = (spec: ObjectSpec = baseSpec) => { + const Template: StoryFn = (__, {viewMode}) => ( + + ); + + return Template; +}; + +export const RangeInputPicker = template();