Skip to content

Commit 980ebef

Browse files
Inbal-TishInbal-Tish
authored
Incubator.Slider - ad disabledThumbTineColor (#2943)
* Incubator.Slider - add 'disabledThumbTintColor' prop and fix props declaretion * Add api file and fix onld Slider api file
1 parent 634df31 commit 980ebef

File tree

3 files changed

+207
-14
lines changed

3 files changed

+207
-14
lines changed

‎src/components/slider/slider.api.json

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
},
3434
{"name": "maximumTrackTintColor", "type": "string", "description": "The track color"},
3535
{
36-
"name": "renderTrack?",
36+
"name": "renderTrack",
3737
"type": "() => ReactElement | ReactElement[]",
3838
"description": "Custom render instead of rendering the track"
3939
},
@@ -84,13 +84,7 @@
8484
"description": "If true the component will have accessibility features enabled"
8585
},
8686
{"name": "testID", "type": "string", "description": "The component test id"},
87-
{"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to the Slider's new implementation"},
88-
{
89-
"name": "enableThumbShadow",
90-
"type": "boolean",
91-
"description": "Whether the thumb will have a shadow (with 'migrate' true only)",
92-
"default": "true"
93-
}
87+
{"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to the Slider's new implementation"}
9488
],
9589
"snippet": [
9690
"<Slider",

‎src/incubator/Slider/index.tsx

Lines changed: 101 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import _ from 'lodash';
2-
import React, {useImperativeHandle, useCallback, useMemo, useEffect} from 'react';
2+
import React, {ReactElement, useImperativeHandle, useCallback, useMemo, useEffect} from 'react';
33
import {StyleSheet, AccessibilityRole, StyleProp, ViewStyle, GestureResponderEvent, LayoutChangeEvent, ViewProps, AccessibilityProps} from 'react-native';
44
import {useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTiming} from 'react-native-reanimated';
55
import {forwardRef, ForwardRefInjectedProps, Constants} from '../../commons/new';
@@ -9,7 +9,6 @@ import {StyleUtils} from 'utils';
99
import {useThemeProps} from '../../hooks';
1010
import View from '../../components/view';
1111
import {ComponentStatics} from '../../typings/common';
12-
import {SliderProps as BaseSliderProps} from '../../components/slider/types';
1312
import {
1413
validateValues,
1514
getOffsetForValue,
@@ -19,8 +18,67 @@ import {
1918
import Thumb from './Thumb';
2019
import Track from './Track';
2120

22-
// TODO: after removing old Slider move these extra props to the SliderProps in types.ts
23-
export interface SliderProps extends BaseSliderProps, AccessibilityProps {
21+
export interface SliderProps extends AccessibilityProps {
22+
/**
23+
* Initial value
24+
*/
25+
value?: number;
26+
/**
27+
* Track minimum value
28+
*/
29+
minimumValue?: number;
30+
/**
31+
* Track maximum value
32+
*/
33+
maximumValue?: number;
34+
/**
35+
* Initial minimum value (when useRange is true)
36+
*/
37+
initialMinimumValue?: number;
38+
/**
39+
* Initial maximum value (when useRange is true)
40+
*/
41+
initialMaximumValue?: number;
42+
/**
43+
* Step value of the slider. The value should be between 0 and (maximumValue - minimumValue)
44+
*/
45+
step?: number;
46+
/**
47+
* Callback for onValueChange
48+
*/
49+
onValueChange?: (value: number) => void;
50+
/**
51+
* Callback that notifies about slider seeking is started
52+
*/
53+
onSeekStart?: () => void;
54+
/**
55+
* Callback that notifies about slider seeking is finished
56+
*/
57+
onSeekEnd?: () => void;
58+
/**
59+
* Callback that notifies when the reset function was invoked
60+
*/
61+
onReset?: () => void;
62+
/**
63+
* The container style
64+
*/
65+
containerStyle?: StyleProp<ViewStyle>;
66+
/**
67+
* The color used for the track from minimum value to current value
68+
*/
69+
minimumTrackTintColor?: string;
70+
/**
71+
* The track color
72+
*/
73+
maximumTrackTintColor?: string;
74+
/**
75+
* The track style
76+
*/
77+
trackStyle?: StyleProp<ViewStyle>;
78+
/**
79+
* Custom render instead of rendering the track
80+
*/
81+
renderTrack?: () => ReactElement | ReactElement[];
2482
/**
2583
* The thumb style
2684
*/
@@ -34,7 +92,7 @@ export interface SliderProps extends BaseSliderProps, AccessibilityProps {
3492
*/
3593
disableActiveStyling?: boolean;
3694
/**
37-
* Defines how far a touch event can start away from the thumb.
95+
* Defines how far a touch event can start away from the thumb
3896
*/
3997
thumbHitSlop?: ViewProps['hitSlop'];
4098
/**
@@ -45,6 +103,42 @@ export interface SliderProps extends BaseSliderProps, AccessibilityProps {
45103
* Thumb color
46104
*/
47105
thumbTintColor?: string;
106+
/**
107+
* Disabled thumb tint color
108+
*/
109+
disabledThumbTintColor?: string;
110+
/**
111+
* If true the Slider will be disabled and will appear in disabled color
112+
*/
113+
disabled?: boolean;
114+
/**
115+
* If true the Slider will display a second thumb for the min value
116+
*/
117+
useRange?: boolean;
118+
/**
119+
* If true the min and max thumbs will not overlap
120+
*/
121+
useGap?: boolean;
122+
/**
123+
* Callback for onRangeChange. Returns values object with the min and max values
124+
*/
125+
onRangeChange?: (values: {min: number, max: number}) => void;
126+
/**
127+
* If true the Slider will stay in LTR mode even if the app is on RTL mode
128+
*/
129+
disableRTL?: boolean;
130+
/**
131+
* If true the component will have accessibility features enabled
132+
*/
133+
accessible?: boolean;
134+
/**
135+
* The slider's test identifier
136+
*/
137+
testID?: string;
138+
/**
139+
* Whether to use the new Slider implementation using Reanimated
140+
*/
141+
migrate?: boolean;
48142
}
49143

50144
type Props = SliderProps & ForwardRefInjectedProps<SliderRef>;
@@ -87,6 +181,7 @@ const Slider = React.memo((props: Props) => {
87181
thumbStyle,
88182
activeThumbStyle,
89183
thumbTintColor = Colors.$backgroundPrimaryHeavy,
184+
disabledThumbTintColor = Colors.$backgroundDisabled,
90185
thumbHitSlop,
91186
disableActiveStyling,
92187
disabled,
@@ -129,7 +224,7 @@ const Slider = React.memo((props: Props) => {
129224
const rangeThumbOffset = useSharedValue(0);
130225

131226
const thumbBackground: StyleProp<ViewStyle> = useMemo(() => [
132-
{backgroundColor: disabled ? Colors.$backgroundDisabled : thumbTintColor}
227+
{backgroundColor: disabled ? disabledThumbTintColor : thumbTintColor}
133228
], [disabled, thumbTintColor]);
134229
const defaultThumbStyle: StyleProp<ViewStyle> = useMemo(() => [
135230
styles.thumb, thumbBackground

‎src/incubator/Slider/slider.api.json

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"name": "Slider",
3+
"category": "Incubator",
4+
"description": "A Slider component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorSliderScreen.tsx",
6+
"images": [],
7+
"props": [
8+
{"name": "value", "type": "number", "description": "Initial value"},
9+
{"name": "minimumValue", "type": "number", "description": "Track minimum value"},
10+
{"name": "maximumValue", "type": "number", "description": "Track maximum value"},
11+
{"name": "initialMinimumValue", "type": "number", "description": "Initial minimum value", "note": "Only when `useRange` is true"},
12+
{"name": "initialMaximumValue", "type": "number", "description": "Initial maximum value", "note": "Only when `useRange` is true"},
13+
{
14+
"name": "step",
15+
"type": "number",
16+
"description": "Step value of the slider. The value should be between 0 and (maximumValue - minimumValue)"
17+
},
18+
{
19+
"name": "useRange",
20+
"type": "boolean",
21+
"description": "If true the Slider will display a second thumb for the min value"
22+
},
23+
{
24+
"name": "useGap",
25+
"type": "boolean",
26+
"description": "If true the min and max thumbs will not overlap",
27+
"default": "true"
28+
},
29+
{"name": "onValueChange", "type": "SliderOnValueChange", "description": "Callback for onValueChange"},
30+
{
31+
"name": "onRangeChange",
32+
"type": "SliderOnRangeChange",
33+
"description": "Callback for onRangeChange. Returns values object with the min and max values"
34+
},
35+
{
36+
"name": "onSeekStart",
37+
"type": "() => void",
38+
"description": "Callback that notifies about slider seeking is started"
39+
},
40+
{
41+
"name": "onSeekEnd",
42+
"type": "() => void",
43+
"description": "Callback that notifies about slider seeking is finished"
44+
},
45+
{
46+
"name": "onReset",
47+
"type": "() => void",
48+
"description": "Callback that notifies when the reset function was invoked"
49+
},
50+
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"},
51+
{
52+
"name": "minimumTrackTintColor",
53+
"type": "string",
54+
"description": "The color used for the track from minimum value to current value"
55+
},
56+
{"name": "maximumTrackTintColor", "type": "string", "description": "The track color"},
57+
{"name": "trackStyle", "type": "ViewStyle", "description": "The track style"},
58+
{
59+
"name": "renderTrack",
60+
"type": "() => ReactElement | ReactElement[]",
61+
"description": "Custom render instead of rendering the track"
62+
},
63+
{"name": "thumbTintColor", "type": "string", "description": "Thumb color"},
64+
{"name": "DisabledThumbTintColor", "type": "string", "description": "Disabled thumb color"},
65+
{"name": "thumbStyle", "type": "ViewStyle", "description": "The thumb style"},
66+
{"name": "activeThumbStyle", "type": "ViewStyle", "description": "The active (during press) thumb style"},
67+
{
68+
"name": "enableThumbShadow",
69+
"type": "boolean",
70+
"description": "Whether the thumb will have a shadow (with 'migrate' true only)",
71+
"default": "true"
72+
},
73+
{"name": "thumbHitSlop", "type": "number", "description": "Defines how far a touch event can start away from the thumb"},
74+
{
75+
"name": "disableActiveStyling",
76+
"type": "boolean",
77+
"description": "If true the Slider will not change it's style on press"
78+
},
79+
{
80+
"name": "disabled",
81+
"type": "boolean",
82+
"description": "If true the Slider will be disabled and will appear in disabled color"
83+
},
84+
{
85+
"name": "disableRTL",
86+
"type": "boolean",
87+
"description": "If true the Slider will stay in LTR mode even if the app is on RTL mode"
88+
},
89+
{
90+
"name": "accessible",
91+
"type": "boolean",
92+
"description": "If true the component will have accessibility features enabled"
93+
},
94+
{"name": "testID", "type": "string", "description": "The component test id"}
95+
],
96+
"snippet": [
97+
"<Incubator.Slider",
98+
" value={0$1}",
99+
" minimumValue={0$2}",
100+
" maximumValue={10$3}",
101+
" onValueChange={() => console.log('value changed')$4}",
102+
"/>"
103+
]
104+
}

0 commit comments

Comments
 (0)