Slider - wrap in asBaseComponent and fix typings (#2940)

Author: Inbal-Tish

demo/src/screens/componentScreens/SliderScreen.tsx

@@ -112,7 +112,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
             step={1}
             containerStyle={styles.sliderContainer}
             disableRTL={forceLTR}
-            // @ts-expect-error
             ref={this.slider}
             onReset={this.onSliderReset}
           />
@@ -208,7 +207,6 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           maximumValue={100}
           step={1}
           disableRTL={forceLTR}
-          // @ts-expect-error
           ref={this.rangeSlider}
           onReset={this.onRangeSliderReset}
         />

src/components/slider/ColorSlider.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
 import Text from '../text';
-import GradientSlider, {GradientSliderTypes} from './GradientSlider';
-import {ColorSliderGroupProps} from './ColorSliderGroup';
+import {GradientSliderTypes, ColorSliderGroupProps} from './types';
+import GradientSlider from './GradientSlider';
 
 type ColorSliderProps = Pick<
   ColorSliderGroupProps,
@@ -40,4 +39,5 @@ const ColorSlider = (props: ColorSliderProps) => {
   );
 };
 
+ColorSlider.displayName = 'IGNORE';
 export default ColorSlider;

src/components/slider/ColorSliderGroup.tsx

@@ -1,51 +1,9 @@
 import React, {useState, useEffect, useCallback} from 'react';
-import {StyleProp, ViewStyle, TextStyle} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
-import GradientSlider, {GradientSliderTypes} from './GradientSlider';
+import GradientSlider from './GradientSlider';
 import SliderGroup from './context/SliderGroup';
 import ColorSlider from './ColorSlider';
-
-type SliderOnValueChange = (value: string) => void;
-
-export type ColorSliderGroupProps = {
-  /**
-   * The gradient color
-   */
-  initialColor: string;
-  /**
-   * Callback for onValueChange returns the new hex color
-   */
-  onValueChange?: SliderOnValueChange;
-  /**
-   * Group container style
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Sliders style
-   */
-  sliderContainerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Show the sliders labels (defaults are: Hue, Lightness, Saturation)
-   */
-  showLabels?: boolean;
-  /**
-   * In case you would like to change the default labels (translations etc.), you can provide
-   * this prop with a map to the relevant labels ({hue: ..., lightness: ..., saturation: ...}).
-   */
-  labels?: {[key in GradientSliderTypes]: string};
-  /**
-   * The labels style
-   */
-  labelsStyle?: StyleProp<TextStyle>;
-  /**
-   * If true the component will have accessibility features enabled
-   */
-  accessible?: boolean;
-  /**
-   * Whether to use the new Slider implementation using Reanimated
-   */
-  migrate?: boolean;
-};
+import {ColorSliderGroupProps} from './types';
 
 /**
  * @description: A Gradient Slider component

src/components/slider/GradientSlider.tsx

@@ -1,63 +1,17 @@
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
 import React, {useCallback, useEffect, useState, useRef, useMemo} from 'react';
-import {StyleProp, ViewStyle} from 'react-native';
-import {Colors} from '../../style';
 import {asBaseComponent, forwardRef, ForwardRefInjectedProps} from '../../commons/new';
 import {ComponentStatics} from '../../typings/common';
-import Slider, {SliderProps} from './index';
+import {Colors} from '../../style';
 import {Slider as NewSlider} from '../../incubator';
+import Gradient from '../gradient';
+import {GradientSliderProps, GradientSliderTypes} from './types';
+import Slider from './index';
 import {SliderContextProps} from './context/SliderContext';
 import asSliderGroupChild from './context/asSliderGroupChild';
-import Gradient from '../gradient';
-
-type SliderOnValueChange = (value: string, alfa: number) => void;
-
-export enum GradientSliderTypes {
-  DEFAULT = 'default',
-  HUE = 'hue',
-  LIGHTNESS = 'lightness',
-  SATURATION = 'saturation'
-}
-
-export type GradientSliderProps = Omit<
-  SliderProps,
-  'onValueChange' | 'value' | 'minimumValue' | 'maximumValue' | 'step' | 'thumbHitSlop' | 'useGap'
-> & {
-  /**
-   * The gradient color
-   */
-  color?: string;
-  /**
-   * The gradient type (default, hue, lightness, saturation)
-   */
-  type?: GradientSliderTypes | `${GradientSliderTypes}`;
-  /**
-   * The gradient steps
-   */
-  gradientSteps?: number;
-  /**
-   * Callback for onValueChange, returns the updated color
-   */
-  onValueChange?: SliderOnValueChange;
-  /**
-   * If true the component will have accessibility features enabled
-   */
-  accessible?: boolean;
-  /**
-   * The container style
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * If true the Slider will be disabled and will appear in disabled color
-   */
-  disabled?: boolean;
-} & Partial<Pick<SliderProps, 'value' | 'minimumValue' | 'maximumValue' | 'step' | 'thumbHitSlop' | 'useGap'>>; // Fixes typing errors with the old slider.
 
 type GradientSliderComponentProps = {
-  /**
-   * Context of the slider group
-   */
   sliderContext: SliderContextProps;
 } & GradientSliderProps;
 
@@ -215,7 +169,5 @@ const GradientSlider = (props: Props) => {
 
 GradientSlider.displayName = 'GradientSlider';
 GradientSlider.types = GradientSliderTypes;
-
-// eslint-disable-next-line max-len
 // @ts-expect-error
 export default asBaseComponent<GradientSliderProps, ComponentStatics<typeof GradientSlider>>(forwardRef(asSliderGroupChild(forwardRef(GradientSlider))));

src/components/slider/context/SliderGroup.tsx

@@ -1,9 +1,9 @@
+import tinycolor from 'tinycolor2';
 import React, {useCallback, useMemo, useState} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import {Colors} from '../../../style';
-import SliderContext from './SliderContext';
 import View from '../../view';
-import tinycolor from 'tinycolor2';
+import SliderContext from './SliderContext';
 
 interface SliderGroupProps {
   color: string;

src/components/slider/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {PureComponent, ReactElement} from 'react';
+import React, {PureComponent} from 'react';
 import {
   StyleSheet,
   PanResponder,
@@ -14,12 +14,13 @@ import {
   AccessibilityRole,
   View as RNView
 } from 'react-native';
-import {Constants} from '../../commons/new';
+import {Constants, asBaseComponent} from '../../commons/new';
+import {extractAccessibilityProps} from '../../commons/modifiers';
 import {Colors} from '../../style';
-import IncubatorSlider from '../../incubator/Slider';
 import View from '../view';
-import Thumb, {ThumbProps} from './Thumb';
-import {extractAccessibilityProps} from '../../commons/modifiers';
+import IncubatorSlider from '../../incubator/Slider';
+import {SliderProps} from './types';
+import Thumb from './Thumb';
 
 const TRACK_SIZE = 6;
 const THUMB_SIZE = 24;
@@ -29,103 +30,7 @@ const ACTIVE_COLOR = Colors.$backgroundPrimaryHeavy;
 const INACTIVE_COLOR = Colors.$backgroundNeutralMedium;
 const MIN_RANGE_GAP = 4;
 
-export type SliderOnValueChange = (value: number) => void;
-export type SliderOnRangeChange = (values: {min: number; max: number}) => void;
-
-export type SliderProps = Omit<ThumbProps, 'ref'> & {
-  /**
-   * Initial value
-   */
-  value?: number;
-  /**
-   * Track minimum value
-   */
-  minimumValue?: number;
-  /**
-   * Track maximum value
-   */
-  maximumValue?: number;
-  /**
-   * Initial minimum value (when useRange is true)
-   */
-  initialMinimumValue?: number;
-  /**
-   * Initial maximum value (when useRange is true)
-   */
-  initialMaximumValue?: number;
-  /**
-   * Step value of the slider. The value should be between 0 and (maximumValue - minimumValue)
-   */
-  step?: number;
-  /**
-   * The color used for the track from minimum value to current value
-   */
-  minimumTrackTintColor?: string;
-  /**
-   * The track color
-   */
-  maximumTrackTintColor?: string;
-  /**
-   * Custom render instead of rendering the track
-   */
-  renderTrack?: () => ReactElement | ReactElement[];
-  /**
-   * Callback for onValueChange
-   */
-  onValueChange?: SliderOnValueChange;
-  /**
-   * Callback that notifies about slider seeking is started
-   */
-  onSeekStart?: () => void;
-  /**
-   * Callback that notifies about slider seeking is finished
-   */
-  onSeekEnd?: () => void;
-  /**
-   * Callback that notifies when the reset function was invoked
-   */
-  onReset?: () => void;
-  /**
-   * The container style
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * The track style
-   */
-  trackStyle?: StyleProp<ViewStyle>;
-  /**
-   * If true the Slider will be disabled and will appear in disabled color
-   */
-  disabled?: boolean;
-  /**
-   * If true the Slider will display a second thumb for the min value
-   */
-  useRange?: boolean;
-  /**
-   * If true the min and max thumbs will not overlap
-   */
-  useGap?: boolean;
-  /**
-   * Callback for onRangeChange. Returns values object with the min and max values
-   */
-  onRangeChange?: SliderOnRangeChange;
-  /**
-   * If true the Slider will stay in LTR mode even if the app is on RTL mode
-   */
-  disableRTL?: boolean;
-  /**
-   * If true the component will have accessibility features enabled
-   */
-  accessible?: boolean;
-  /**
-   * The slider's test identifier
-   */
-  testID?: string;
-  /**
-   * Whether to use the new Slider implementation using Reanimated
-   */
-  migrate?: boolean;
-} & typeof defaultProps;
+type InternalSliderProps = SliderProps & typeof defaultProps;
 
 interface State {
   containerSize: Measurements;
@@ -160,7 +65,7 @@ const defaultProps = {
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Slider/Slider.gif?raw=true
  */
-export default class Slider extends PureComponent<SliderProps, State> {
+class Slider extends PureComponent<InternalSliderProps, State> {
   static displayName = 'Slider';
 
   static defaultProps = defaultProps;
@@ -193,7 +98,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
 
   private didMount: boolean;
 
-  constructor(props: SliderProps) {
+  constructor(props: InternalSliderProps) {
     super(props);
 
     this.activeThumbRef = this.thumb;
@@ -244,7 +149,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
     return useRange ? initialMaximumValue || maximumValue : value;
   }
 
-  checkProps(props: SliderProps) {
+  checkProps(props: InternalSliderProps) {
     const {useRange, minimumValue, maximumValue, value} = props;
     if (minimumValue >= maximumValue) {
       console.warn('Slider minimumValue must be lower than maximumValue');
@@ -766,6 +671,8 @@ export default class Slider extends PureComponent<SliderProps, State> {
   }
 }
 
+export default asBaseComponent<SliderProps>(Slider);
+
 const styles = StyleSheet.create({
   container: {
     height: THUMB_SIZE + SHADOW_RADIUS,

src/components/slider/slider.driver.ts

@@ -1,4 +1,4 @@
-import {SliderProps} from './index';
+import {SliderProps} from './types';
 import {ComponentDriver} from '../../testkit/Component.driver';
 
 export class SliderDriver extends ComponentDriver<SliderProps> {