Skip to content

Commit 3268333

Browse files
lidord-wixlidord-wix
authored
Feat/ Slider RTL (#1770)
* formatting * add RTL support to slider * renaming
1 parent d2a5f48 commit 3268333

File tree

5 files changed

+98
-60
lines changed

5 files changed

+98
-60
lines changed

‎demo/src/screens/componentScreens/SliderScreen.tsx

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {StyleSheet, ScrollView} from 'react-native';
3-
import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
3+
import {Colors, View, Text, Image, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
44

55
const INITIAL_VALUE = 0;
66
const COLOR = Colors.blue30;
@@ -28,72 +28,77 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
2828

2929
onSliderValueChange = (value: number) => {
3030
this.setState({sliderValue: value});
31-
}
31+
};
3232

3333
onGradientValueChange = (value: string, alpha: number) => {
3434
this.setState({color: value, alpha});
35-
}
35+
};
3636

3737
onGroupValueChange = (value: string) => {
3838
console.warn('onGroupValueChange: ', value);
39-
}
39+
};
4040

4141
render() {
4242
const {color, alpha, sliderValue} = this.state;
4343

4444
return (
4545
<ScrollView showsVerticalScrollIndicator={false}>
4646
<View flex padding-20>
47-
<Text titleHuge marginB-20>Sliders</Text>
48-
49-
<View row centerV>
47+
<Text titleHuge marginB-20>
48+
Sliders
49+
</Text>
50+
51+
<View row centerV style={Constants.isRTL && styles.ltr}>
5052
<Image assetName={'megaphone'} style={styles.image}/>
51-
<Slider
52-
onValueChange={this.onSliderValueChange}
53+
<Slider
54+
onValueChange={this.onSliderValueChange}
5355
value={INITIAL_VALUE}
54-
minimumValue={0}
55-
maximumValue={100}
56-
step={1}
56+
minimumValue={0}
57+
maximumValue={100}
58+
step={1}
5759
containerStyle={styles.sliderContainer}
60+
disableRTL
5861
/>
59-
<Text bodySmall grey30 style={styles.text}>{sliderValue}%</Text>
62+
<Text bodySmall grey30 style={styles.text}>
63+
{sliderValue}%
64+
</Text>
6065
</View>
61-
66+
6267
<Text marginT-30>Negatives</Text>
63-
<Slider
64-
minimumValue={-100}
65-
maximumValue={100}
66-
value={-30}
68+
<Slider
69+
minimumValue={-100}
70+
maximumValue={100}
71+
value={-30}
6772
minimumTrackTintColor={Colors.red30}
6873
thumbTintColor={Colors.red50}
6974
containerStyle={styles.slider}
7075
/>
71-
<Slider
72-
minimumValue={-300}
73-
maximumValue={-100}
74-
value={-130}
76+
<Slider
77+
minimumValue={-300}
78+
maximumValue={-100}
79+
value={-130}
7580
minimumTrackTintColor={Colors.red30}
7681
thumbTintColor={Colors.red50}
7782
containerStyle={styles.slider}
7883
/>
7984

8085
<Text marginT-20>Disabled</Text>
81-
<Slider
82-
minimumValue={100}
83-
maximumValue={200}
84-
value={120}
86+
<Slider
87+
minimumValue={100}
88+
maximumValue={200}
89+
value={120}
8590
minimumTrackTintColor={Colors.red30}
8691
thumbTintColor={Colors.green30}
8792
containerStyle={styles.slider}
8893
disabled
8994
/>
90-
95+
9196
<Text marginT-15>Custom with Steps</Text>
92-
<Slider
93-
value={50}
94-
minimumValue={0}
95-
maximumValue={100}
96-
step={25}
97+
<Slider
98+
value={50}
99+
minimumValue={0}
100+
maximumValue={100}
101+
step={25}
97102
containerStyle={styles.slider}
98103
trackStyle={styles.track}
99104
thumbStyle={styles.thumb}
@@ -105,36 +110,42 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
105110

106111
<Text marginT-15>Gradient Sliders</Text>
107112
<View row centerV>
108-
<Text text90 grey30>DEFAULT</Text>
109-
<GradientSlider
110-
color={color}
111-
containerStyle={styles.gradientSliderContainer}
113+
<Text text90 grey30>
114+
DEFAULT
115+
</Text>
116+
<GradientSlider
117+
color={color}
118+
containerStyle={styles.gradientSliderContainer}
112119
onValueChange={this.onGradientValueChange}
113120
/>
114121
<View style={styles.box}>
115122
<View style={{flex: 1, backgroundColor: color, opacity: alpha}}/>
116123
</View>
117124
</View>
118125
<View row centerV>
119-
<Text text90 grey30>HUE</Text>
120-
<GradientSlider
121-
type={GradientSlider.types.HUE}
122-
color={COLOR}
123-
containerStyle={styles.gradientSliderContainer}
126+
<Text text90 grey30>
127+
HUE
128+
</Text>
129+
<GradientSlider
130+
type={GradientSlider.types.HUE}
131+
color={COLOR}
132+
containerStyle={styles.gradientSliderContainer}
124133
onValueChange={this.onGradientValueChange}
125134
/>
126135
<View style={styles.box}>
127136
<View style={{flex: 1, backgroundColor: color}}/>
128137
</View>
129138
</View>
130-
131-
<Text marginT-25 marginB-20>Color Slider Group</Text>
132-
<ColorSliderGroup
133-
initialColor={color}
139+
140+
<Text marginT-25 marginB-20>
141+
Color Slider Group
142+
</Text>
143+
<ColorSliderGroup
144+
initialColor={color}
134145
sliderContainerStyle={styles.slider}
135146
containerStyle={styles.group}
136147
showLabels
137-
// onValueChange={this.onGroupValueChange}
148+
// onValueChange={this.onGroupValueChange}
138149
/>
139150
</View>
140151
</ScrollView>
@@ -143,6 +154,9 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
143154
}
144155

145156
const styles = StyleSheet.create({
157+
ltr: {
158+
flexDirection: 'row-reverse'
159+
},
146160
image: {
147161
tintColor: Colors.grey30
148162
},
@@ -165,23 +179,23 @@ const styles = StyleSheet.create({
165179
height: 2
166180
},
167181
thumb: {
168-
width: 26,
169-
height: 26,
170-
borderRadius: 13,
171-
borderColor: Colors.violet40,
172-
borderWidth: 1,
182+
width: 26,
183+
height: 26,
184+
borderRadius: 13,
185+
borderColor: Colors.violet40,
186+
borderWidth: 1,
173187
shadowColor: Colors.white
174188
},
175189
activeThumb: {
176-
width: 40,
177-
height: 40,
190+
width: 40,
191+
height: 40,
178192
borderRadius: 20
179193
},
180194
box: {
181-
width: 20,
195+
width: 20,
182196
height: 20,
183197
borderRadius: 4,
184-
borderWidth: 1,
198+
borderWidth: 1,
185199
borderColor: Colors.grey60
186200
},
187201
group: {

‎generatedTypes/src/components/slider/GradientSlider.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ declare const _default: React.ComponentClass<{
112112
activeThumbStyle?: ViewStyle | undefined;
113113
disableActiveStyling?: boolean | undefined;
114114
disabled?: boolean | undefined;
115+
disableRTL?: boolean | undefined;
115116
accessible?: boolean | undefined;
116117
testID?: string | undefined;
117118
} & {

‎generatedTypes/src/components/slider/index.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ export declare type SliderProps = {
7474
* If true the Slider will be disabled and will appear in disabled color
7575
*/
7676
disabled?: boolean;
77+
/**
78+
* If true the Slider will stay in LTR mode even if the app is on RTL mode
79+
*/
80+
disableRTL?: boolean;
7781
/**
7882
* If true the component will have accessibility features enabled
7983
*/

‎src/components/slider/index.tsx

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ export type SliderProps = {
104104
* If true the Slider will be disabled and will appear in disabled color
105105
*/
106106
disabled?: boolean;
107+
/**
108+
* If true the Slider will stay in LTR mode even if the app is on RTL mode
109+
*/
110+
disableRTL?: boolean;
107111
/**
108112
* If true the component will have accessibility features enabled
109113
*/
@@ -255,10 +259,11 @@ export default class Slider extends PureComponent<SliderProps, State> {
255259
};
256260

257261
handlePanResponderMove = (_e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
258-
if (this.props.disabled) {
262+
const {disabled, disableRTL} = this.props;
263+
if (disabled) {
259264
return;
260265
}
261-
const dx = gestureState.dx * (Constants.isRTL ? -1 : 1);
266+
const dx = gestureState.dx * (Constants.isRTL && !disableRTL ? -1 : 1);
262267
this.update(dx - this._dx);
263268
this._dx = dx;
264269
};
@@ -295,8 +300,10 @@ export default class Slider extends PureComponent<SliderProps, State> {
295300

296301
updateStyles(x: number) {
297302
if (this.thumb) {
303+
const {disableRTL} = this.props;
298304
const {trackSize} = this.state;
299-
const position = x - this.initialThumbSize.width / 2;
305+
const _x = Constants.isRTL && disableRTL ? trackSize.width - x : x;
306+
const position = _x - this.initialThumbSize.width / 2;
300307
const deviation = 3;
301308

302309
if (position + deviation < 0) {
@@ -413,10 +420,12 @@ export default class Slider extends PureComponent<SliderProps, State> {
413420
};
414421

415422
updateTrackStepAndStyle = ({nativeEvent}: GestureResponderEvent) => {
416-
this._x = nativeEvent.locationX;
423+
const {disableRTL, step} = this.props;
424+
const {trackSize} = this.state;
425+
this._x = Constants.isRTL && !disableRTL ? trackSize.width - nativeEvent.locationX : nativeEvent.locationX;
417426
this.updateValue(this._x);
418427

419-
if (this.props.step > 0) {
428+
if (step > 0) {
420429
this.bounceToStep();
421430
} else {
422431
this.updateStyles(this._x);
@@ -545,6 +554,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
545554
trackStyle,
546555
renderTrack,
547556
disabled,
557+
disableRTL,
548558
minimumTrackTintColor = ACTIVE_COLOR,
549559
maximumTrackTintColor = DEFAULT_COLOR,
550560
testID
@@ -583,6 +593,7 @@ export default class Slider extends PureComponent<SliderProps, State> {
583593
styles.track,
584594
trackStyle,
585595
styles.minimumTrack,
596+
Constants.isRTL && disableRTL && styles.trackDisableRTL,
586597
{
587598
backgroundColor: disabled ? DEFAULT_COLOR : minimumTrackTintColor
588599
}
@@ -611,6 +622,9 @@ const styles = StyleSheet.create({
611622
minimumTrack: {
612623
position: 'absolute'
613624
},
625+
trackDisableRTL: {
626+
right: 0
627+
},
614628
thumb: {
615629
position: 'absolute',
616630
width: THUMB_SIZE,

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@
5050
"type": "boolean",
5151
"description": "If true the Slider will be disabled and will appear in disabled color"
5252
},
53+
{
54+
"name": "disableRTL",
55+
"type": "boolean",
56+
"description": "If true the Slider will stay in LTR mode even if the app is on RTL mode"
57+
},
5358
{
5459
"name": "accessible",
5560
"type": "boolean",

0 commit comments

Comments
 (0)