Skip to content

Slider - wrap in asBaseComponent and fix typings #2940

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions demo/src/screens/componentScreens/SliderScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down Expand Up @@ -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}
/>
Expand Down
6 changes: 3 additions & 3 deletions src/components/slider/ColorSlider.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -40,4 +39,5 @@ const ColorSlider = (props: ColorSliderProps) => {
);
};

ColorSlider.displayName = 'IGNORE';
export default ColorSlider;
46 changes: 2 additions & 44 deletions src/components/slider/ColorSliderGroup.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down
56 changes: 4 additions & 52 deletions src/components/slider/GradientSlider.tsx
Original file line number Diff line number Diff line change
@@ -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;

Expand Down Expand Up @@ -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))));
4 changes: 2 additions & 2 deletions src/components/slider/context/SliderGroup.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
117 changes: 12 additions & 105 deletions src/components/slider/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'lodash';
import React, {PureComponent, ReactElement} from 'react';
import React, {PureComponent} from 'react';
import {
StyleSheet,
PanResponder,
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/slider/slider.driver.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {SliderProps} from './index';
import {SliderProps} from './types';
import {ComponentDriver} from '../../testkit/Component.driver';

export class SliderDriver extends ComponentDriver<SliderProps> {
Expand Down
Loading