fix(RangeSlider): new value api (#287)

Author: tenphi

.changeset/afraid-crabs-clean.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Change RangeSlider API to accept only array with two numbers as a value.

src/components/forms/Form/ComplexForm.stories.tsx

@@ -220,7 +220,7 @@ const Template: StoryFn<typeof Form> = (args) => {
           radioGroup: 'three',
           switch: false,
           slider: 60,
-          rangeSlider: { start: 20, end: 40 },
+          rangeSlider: [20, 40],
         }}
         onSubmit={(v) => {
           console.log('onSubmit:', v);

src/components/forms/Slider/RangeSlider.stories.tsx

@@ -10,7 +10,7 @@ export default {
   args: {
     id: 'name',
     width: '100%',
-    defaultValue: { start: 4, end: 12 },
+    defaultValue: [4, 12],
     minValue: 0,
     maxValue: 20,
     step: 2,

src/components/forms/Slider/RangeSlider.tsx

@@ -2,15 +2,12 @@ import { forwardRef } from 'react';
 
 import { SliderThumb } from './SliderThumb';
 import { SliderTrack } from './SliderTrack';
-import {
-  SliderBase,
-  SliderBaseChildArguments,
-  SliderBaseProps,
-} from './SliderBase';
+import { SliderBase, SliderBaseChildArguments } from './SliderBase';
 import { Gradation } from './Gradation';
 
-import type { DOMRef, RangeValue } from '@react-types/shared';
+import type { DOMRef } from '@react-types/shared';
 import type { CubeSliderBaseProps } from './types';
+import type { RangeValue } from '../../../shared';
 
 export interface CubeRangeSliderProps
   extends CubeSliderBaseProps<RangeValue<number>> {
@@ -23,39 +20,10 @@ const INTL_MESSAGES = {
 };
 
 function RangeSlider(props: CubeRangeSliderProps, ref: DOMRef<HTMLDivElement>) {
-  let {
-    onChange,
-    onChangeEnd,
-    value,
-    defaultValue,
-    getValueLabel,
-    isDisabled,
-    styles,
-    gradation,
-    ...otherProps
-  } = props;
-
-  let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {
-    ...otherProps,
-    value: value != null ? [value.start, value.end] : undefined,
-    defaultValue:
-      defaultValue != null
-        ? [defaultValue.start, defaultValue.end]
-        : // make sure that useSliderState knows we have two handles
-          [props.minValue ?? 0, props.maxValue ?? 100],
-    onChange(v) {
-      onChange?.({ start: v[0], end: v[1] });
-    },
-    onChangeEnd(v) {
-      onChangeEnd?.({ start: v[0], end: v[1] });
-    },
-    getValueLabel: getValueLabel
-      ? ([start, end]) => getValueLabel?.({ start, end })
-      : undefined,
-  };
+  let { isDisabled, styles, gradation, ...otherProps } = props;
 
   return (
-    <SliderBase {...otherProps} {...baseProps}>
+    <SliderBase {...(otherProps as CubeSliderBaseProps<number[]>)}>
       {({ trackRef, inputRef, state }: SliderBaseChildArguments) => {
         return (
           <>

src/components/forms/Slider/SliderBase.tsx

@@ -49,8 +49,6 @@ function SliderBase(
     labelSuffix,
     labelStyles,
     necessityIndicator,
-    defaultValue,
-    value,
     gradation,
     isDisabled,
     inputStyles,

src/components/forms/Slider/types.ts

@@ -6,11 +6,10 @@ import {
 } from '../../../tasty';
 import { FormFieldProps } from '../../../shared';
 
-import type { AriaSliderProps, SliderProps } from '@react-types/slider';
+import type { AriaSliderProps } from '@react-types/slider';
 
 export interface CubeSliderBaseProps<T>
   extends Omit<AriaSliderProps<T>, 'label'>,
-    Omit<SliderProps<T>, 'label'>,
     BasePropsWithoutChildren,
     OuterStyleProps,
     FormFieldProps,
@@ -27,5 +26,5 @@ export interface CubeSliderBaseProps<T>
   /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */
   showValueLabel?: boolean;
   /** A function that returns the content to display as the value's label. Overrides default formatted number. */
-  getValueLabel?: (value: any) => string | undefined;
+  getValueLabel?: (value: T) => string | undefined;
 }

src/shared/index.ts

@@ -2,3 +2,4 @@ export * from './form';
 
 export type Axis = 'top' | 'right' | 'bottom' | 'left';
 export type PlacementAxis = Axis | 'center';
+export type RangeValue<T> = [T, T];