diff --git a/src/content/components/uikit/Slider/index.ts b/src/content/components/uikit/Slider/index.ts new file mode 100644 index 000000000000..6b4a76121e5c --- /dev/null +++ b/src/content/components/uikit/Slider/index.ts @@ -0,0 +1,62 @@ +import dynamic from 'next/dynamic'; + +import {Repos} from '../../../../types/common'; +import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils'; + +const getterOptions = {repoName: Repos.Uikit, componentName: 'Slider'}; + +export const sliderConfig = { + id: 'slider', + title: 'Slider', + githubUrl: getGithubUrl(getterOptions), + content: { + readmeUrl: getReadmeUrl(getterOptions), + }, + sandbox: { + component: dynamic(() => import('../examples/components').then((mod) => mod.SliderExample)), + props: { + hasTooltip: { + type: 'switch', + defaultValue: false, + }, + disabled: { + type: 'switch', + defaultValue: false, + }, + validationState: { + type: 'radioButton', + values: mappingOptions(['normal', 'invalid']), + defaultValue: 'normal', + }, + errorMessage: { + type: 'input', + defaultValue: 'Input is invalid', + }, + size: { + type: 'radioButton', + values: mappingOptions(['s', 'm', 'l', 'xl']), + defaultValue: 'm', + }, + min: { + type: 'input', + defaultValue: 0, + }, + max: { + type: 'input', + defaultValue: 100, + }, + step: { + type: 'input', + defaultValue: 1, + }, + debounceDelay: { + type: 'input', + defaultValue: 0, + }, + marksCount: { + type: 'input', + defaultValue: 2, + }, + }, + }, +}; diff --git a/src/content/components/uikit/examples/components/SliderExample.tsx b/src/content/components/uikit/examples/components/SliderExample.tsx new file mode 100644 index 000000000000..43ed9eb9c0d8 --- /dev/null +++ b/src/content/components/uikit/examples/components/SliderExample.tsx @@ -0,0 +1,48 @@ +import {Slider, SliderProps} from '@gravity-ui/uikit'; +import React from 'react'; + +type SliderExampleProps = Omit< + SliderProps, + 'max' | 'min' | 'marksCount' | 'step' | 'debounceDelay' +> & { + max?: string | number; + min?: string | number; + marksCount?: string | number; + step?: string | number; + debounceDelay?: string | number; +}; + +export const SliderExample = ({ + defaultValue, + max, + min, + marksCount, + step, + debounceDelay, + ...restProps +}: SliderExampleProps) => { + const [value, setValue] = React.useState(defaultValue); + const maxValue = Number(max) || undefined; + const minValue = Number(min) || undefined; + const marksCountValue = Number(marksCount) || undefined; + const stepValue = Number(step) || undefined; + const debounceDelayValue = Number(debounceDelay) || undefined; + + return ( +