expo-snowui 1.6.21 → 1.6.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -46,70 +46,46 @@ const SnowRangeSliderW = props => {
|
|
|
46
46
|
const percentRef = React.useRef(percent);
|
|
47
47
|
const [applyStepInterval, setApplyStepInterval] = React.useState(null);
|
|
48
48
|
const applyIntervalRef = React.useRef(applyStepInterval);
|
|
49
|
+
const dragStartXRef = React.useRef(0);
|
|
50
|
+
const dragStartPercentRef = React.useRef(0);
|
|
49
51
|
const elementRef = useFocusWiring(props);
|
|
50
52
|
let sliderWidth = SnowStyle.component.rangeSlider.trackWrapper.width;
|
|
51
53
|
if (props.width) {
|
|
52
54
|
sliderWidth = props.width;
|
|
53
55
|
}
|
|
54
|
-
const layoutsRef = React.useRef({
|
|
55
|
-
slider: sliderWidth,
|
|
56
|
-
track: 0,
|
|
57
|
-
thumb: 0,
|
|
58
|
-
leftTrack: 0,
|
|
59
|
-
rightTrack: sliderWidth
|
|
60
|
-
});
|
|
61
56
|
let onValueChange = props.onValueChange;
|
|
62
57
|
if (props.debounce) {
|
|
63
58
|
onValueChange = useDebouncedCallback(props.onValueChange, SnowConfig.inputDebounceMilliseconds);
|
|
64
59
|
}
|
|
65
|
-
const thumbPositionToPercent = positionX => {
|
|
66
|
-
let actionPositionX = positionX - layoutsRef.current.track.x - layoutsRef.current.thumb.width / 2;
|
|
67
|
-
if (actionPositionX < 0) {
|
|
68
|
-
actionPositionX = 0;
|
|
69
|
-
}
|
|
70
|
-
if (actionPositionX > sliderWidth) {
|
|
71
|
-
actionPositionX = sliderWidth;
|
|
72
|
-
}
|
|
73
|
-
let newPercent = actionPositionX / sliderWidth;
|
|
74
|
-
if (newPercent < 0) {
|
|
75
|
-
newPercent = 0;
|
|
76
|
-
}
|
|
77
|
-
if (newPercent > 1) {
|
|
78
|
-
newPercent = 1;
|
|
79
|
-
}
|
|
80
|
-
setPercent(newPercent);
|
|
81
|
-
percentRef.current = newPercent;
|
|
82
|
-
};
|
|
83
60
|
const panRef = React.useRef(PanResponder.create({
|
|
84
61
|
onStartShouldSetPanResponder: () => true,
|
|
85
62
|
onMoveShouldSetPanResponder: () => true,
|
|
86
|
-
|
|
87
|
-
isDraggingRef.current =
|
|
88
|
-
|
|
63
|
+
onPanResponderGrant: event => {
|
|
64
|
+
isDraggingRef.current = true;
|
|
65
|
+
dragStartXRef.current = event.nativeEvent.pageX;
|
|
66
|
+
dragStartPercentRef.current = percentRef.current;
|
|
67
|
+
},
|
|
68
|
+
onPanResponderMove: event => {
|
|
69
|
+
if (!isDraggingRef.current) return;
|
|
70
|
+
const deltaX = event.nativeEvent.pageX - dragStartXRef.current;
|
|
71
|
+
let nextPercent = dragStartPercentRef.current + deltaX / sliderWidth;
|
|
72
|
+
if (nextPercent < 0) nextPercent = 0;
|
|
73
|
+
if (nextPercent > 1) nextPercent = 1;
|
|
74
|
+
percentRef.current = nextPercent;
|
|
75
|
+
setPercent(nextPercent);
|
|
89
76
|
},
|
|
90
77
|
onPanResponderRelease: () => {
|
|
91
78
|
isDraggingRef.current = false;
|
|
92
79
|
onValueChange(percentRef.current);
|
|
93
80
|
},
|
|
94
|
-
|
|
95
|
-
isDraggingRef.current =
|
|
96
|
-
|
|
97
|
-
if (!positionX) {
|
|
98
|
-
positionX = gestureState.x0;
|
|
99
|
-
}
|
|
100
|
-
thumbPositionToPercent(positionX);
|
|
101
|
-
},
|
|
102
|
-
onPanResponderGrant: (pressEvent, gestureState) => {
|
|
103
|
-
isDraggingRef.current = true;
|
|
104
|
-
let positionX = gestureState.moveX;
|
|
105
|
-
if (!positionX) {
|
|
106
|
-
positionX = gestureState.x0;
|
|
107
|
-
}
|
|
108
|
-
thumbPositionToPercent(positionX);
|
|
81
|
+
onPanResponderEnd: () => {
|
|
82
|
+
isDraggingRef.current = false;
|
|
83
|
+
onValueChange(percentRef.current);
|
|
109
84
|
}
|
|
110
85
|
}));
|
|
111
86
|
React.useEffect(() => {
|
|
112
87
|
if (!isDraggingRef.current) {
|
|
88
|
+
percentRef.current = props.percent;
|
|
113
89
|
setPercent(props.percent);
|
|
114
90
|
}
|
|
115
91
|
}, [props.percent]);
|
|
@@ -121,24 +97,16 @@ const SnowRangeSliderW = props => {
|
|
|
121
97
|
}, [applyStepInterval]);
|
|
122
98
|
const applyStep = amount => {
|
|
123
99
|
let result = percentRef.current + amount;
|
|
124
|
-
if (result < min)
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
if (result > max) {
|
|
128
|
-
result = max;
|
|
129
|
-
}
|
|
100
|
+
if (result < min) result = min;
|
|
101
|
+
if (result > max) result = max;
|
|
130
102
|
percentRef.current = result;
|
|
131
103
|
setPercent(result);
|
|
132
104
|
onValueChange(result);
|
|
133
105
|
};
|
|
134
106
|
const longPress = amount => {
|
|
135
|
-
|
|
136
|
-
clearInterval(applyIntervalRef.current);
|
|
137
|
-
}
|
|
107
|
+
clearInterval(applyIntervalRef.current);
|
|
138
108
|
applyStep(amount);
|
|
139
|
-
setApplyStepInterval(setInterval(() =>
|
|
140
|
-
applyStep(amount);
|
|
141
|
-
}, 100));
|
|
109
|
+
setApplyStepInterval(setInterval(() => applyStep(amount), 100));
|
|
142
110
|
};
|
|
143
111
|
React.useEffect(() => {
|
|
144
112
|
const actionListenerKey = addActionListener({
|
|
@@ -150,13 +118,11 @@ const SnowRangeSliderW = props => {
|
|
|
150
118
|
},
|
|
151
119
|
onLongRightStart: () => {
|
|
152
120
|
if (isFocused(props.focusKey)) {
|
|
153
|
-
longPress(step * 2
|
|
121
|
+
longPress(step * 2);
|
|
154
122
|
}
|
|
155
123
|
},
|
|
156
124
|
onLongRightEnd: () => {
|
|
157
|
-
|
|
158
|
-
clearInterval(applyIntervalRef.current);
|
|
159
|
-
}
|
|
125
|
+
clearInterval(applyIntervalRef.current);
|
|
160
126
|
},
|
|
161
127
|
onLeft: () => {
|
|
162
128
|
if (isFocused(props.focusKey)) {
|
|
@@ -166,37 +132,19 @@ const SnowRangeSliderW = props => {
|
|
|
166
132
|
},
|
|
167
133
|
onLongLeftStart: () => {
|
|
168
134
|
if (isFocused(props.focusKey)) {
|
|
169
|
-
longPress(-step * 2
|
|
135
|
+
longPress(-step * 2);
|
|
170
136
|
}
|
|
171
137
|
},
|
|
172
138
|
onLongLeftEnd: () => {
|
|
173
|
-
|
|
174
|
-
clearInterval(applyIntervalRef.current);
|
|
175
|
-
}
|
|
139
|
+
clearInterval(applyIntervalRef.current);
|
|
176
140
|
}
|
|
177
141
|
});
|
|
178
|
-
return () =>
|
|
179
|
-
removeActionListener(actionListenerKey);
|
|
180
|
-
};
|
|
142
|
+
return () => removeActionListener(actionListenerKey);
|
|
181
143
|
}, []);
|
|
182
|
-
|
|
183
|
-
return event => {
|
|
184
|
-
let widths = {
|
|
185
|
-
...layoutsRef.current
|
|
186
|
-
};
|
|
187
|
-
widths[kind] = event.nativeEvent.layout;
|
|
188
|
-
layoutsRef.current = widths;
|
|
189
|
-
};
|
|
190
|
-
};
|
|
144
|
+
let thumbX = percentRef.current * sliderWidth;
|
|
191
145
|
const trackWrapperStyle = [SnowStyle.component.rangeSlider.trackWrapper, {
|
|
192
146
|
width: sliderWidth
|
|
193
147
|
}];
|
|
194
|
-
let thumbX = 0;
|
|
195
|
-
if (isDraggingRef.current) {
|
|
196
|
-
thumbX = percent * sliderWidth;
|
|
197
|
-
} else {
|
|
198
|
-
thumbX = percentRef.current * sliderWidth;
|
|
199
|
-
}
|
|
200
148
|
const leftTrackStyle = [SnowStyle.component.rangeSlider.leftTrack, {
|
|
201
149
|
width: thumbX
|
|
202
150
|
}];
|
|
@@ -210,22 +158,17 @@ const SnowRangeSliderW = props => {
|
|
|
210
158
|
});
|
|
211
159
|
}
|
|
212
160
|
return /*#__PURE__*/_jsx(View, {
|
|
213
|
-
onLayout: handleLayout('slider'),
|
|
214
161
|
style: SnowStyle.component.rangeSlider.wrapper,
|
|
215
162
|
children: /*#__PURE__*/_jsxs(View, {
|
|
216
163
|
...panRef.current.panHandlers,
|
|
217
|
-
onLayout: handleLayout('track'),
|
|
218
164
|
style: trackWrapperStyle,
|
|
219
165
|
children: [/*#__PURE__*/_jsx(View, {
|
|
220
|
-
onLayout: handleLayout('leftTrack'),
|
|
221
166
|
style: leftTrackStyle
|
|
222
167
|
}), /*#__PURE__*/_jsx(View, {
|
|
223
|
-
onLayout: handleLayout('rightTrack'),
|
|
224
168
|
style: SnowStyle.component.rangeSlider.rightTrack
|
|
225
169
|
}), /*#__PURE__*/_jsx(Pressable, {
|
|
226
170
|
ref: elementRef,
|
|
227
171
|
style: thumbStyle,
|
|
228
|
-
onLayout: handleLayout('thumb'),
|
|
229
172
|
focusKey: props.focusKey,
|
|
230
173
|
focusRight: props.focusKey,
|
|
231
174
|
focusLeft: props.focusKey,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","PanResponder","Platform","Pressable","View","useDebouncedCallback","useInputContext","useFocusContext","useStyleContext","jsx","_jsx","jsxs","_jsxs","min","max","step","SnowRangeSliderW","props","SnowStyle","SnowConfig","addActionListener","removeActionListener","useFocusWiring","isFocused","isDraggingRef","useRef","percent","setPercent","useState","percentRef","applyStepInterval","setApplyStepInterval","applyIntervalRef","elementRef","sliderWidth","component","rangeSlider","trackWrapper","width","
|
|
1
|
+
{"version":3,"names":["React","PanResponder","Platform","Pressable","View","useDebouncedCallback","useInputContext","useFocusContext","useStyleContext","jsx","_jsx","jsxs","_jsxs","min","max","step","SnowRangeSliderW","props","SnowStyle","SnowConfig","addActionListener","removeActionListener","useFocusWiring","isFocused","isDraggingRef","useRef","percent","setPercent","useState","percentRef","applyStepInterval","setApplyStepInterval","applyIntervalRef","dragStartXRef","dragStartPercentRef","elementRef","sliderWidth","component","rangeSlider","trackWrapper","width","onValueChange","debounce","inputDebounceMilliseconds","panRef","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","event","current","nativeEvent","pageX","onPanResponderMove","deltaX","nextPercent","onPanResponderRelease","onPanResponderEnd","useEffect","applyStep","amount","result","longPress","clearInterval","setInterval","actionListenerKey","onRight","focusKey","onLongRightStart","onLongRightEnd","onLeft","onLongLeftStart","onLongLeftEnd","thumbX","trackWrapperStyle","leftTrackStyle","leftTrack","thumbStyle","thumb","left","push","backgroundColor","color","hover","borderColor","hoverDark","style","wrapper","children","panHandlers","rightTrack","ref","focusRight","focusLeft","focusUp","focusDown","isSnowFocusWired","SnowRangeSlider"],"sourceRoot":"../../../../src","sources":["component/wired/snow-range-slider.js"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -35,11 +35,17 @@ const SnowRangeSliderW = (props) => {
|
|
|
35
35
|
const { SnowStyle, SnowConfig } = useStyleContext(props)
|
|
36
36
|
const { addActionListener, removeActionListener } = useInputContext()
|
|
37
37
|
const { useFocusWiring, isFocused } = useFocusContext()
|
|
38
|
+
|
|
38
39
|
const isDraggingRef = React.useRef(false)
|
|
39
40
|
const [percent, setPercent] = React.useState(0)
|
|
40
41
|
const percentRef = React.useRef(percent)
|
|
41
42
|
const [applyStepInterval, setApplyStepInterval] = React.useState(null)
|
|
42
43
|
const applyIntervalRef = React.useRef(applyStepInterval)
|
|
44
|
+
|
|
45
|
+
const dragStartXRef = React.useRef(0)
|
|
46
|
+
const dragStartPercentRef = React.useRef(0)
|
|
47
|
+
|
|
48
|
+
|
|
43
49
|
const elementRef = useFocusWiring(props)
|
|
44
50
|
|
|
45
51
|
let sliderWidth = SnowStyle.component.rangeSlider.trackWrapper.width
|
|
@@ -47,71 +53,51 @@ const SnowRangeSliderW = (props) => {
|
|
|
47
53
|
sliderWidth = props.width
|
|
48
54
|
}
|
|
49
55
|
|
|
50
|
-
const layoutsRef = React.useRef({
|
|
51
|
-
slider: sliderWidth,
|
|
52
|
-
track: 0,
|
|
53
|
-
thumb: 0,
|
|
54
|
-
leftTrack: 0,
|
|
55
|
-
rightTrack: sliderWidth
|
|
56
|
-
})
|
|
57
|
-
|
|
58
56
|
let onValueChange = props.onValueChange
|
|
59
57
|
if (props.debounce) {
|
|
60
58
|
onValueChange = useDebouncedCallback(props.onValueChange, SnowConfig.inputDebounceMilliseconds)
|
|
61
59
|
}
|
|
62
60
|
|
|
63
|
-
const thumbPositionToPercent = (positionX) => {
|
|
64
|
-
let actionPositionX = positionX - layoutsRef.current.track.x - (layoutsRef.current.thumb.width / 2)
|
|
65
|
-
if (actionPositionX < 0) {
|
|
66
|
-
actionPositionX = 0
|
|
67
|
-
}
|
|
68
|
-
if (actionPositionX > sliderWidth) {
|
|
69
|
-
actionPositionX = sliderWidth
|
|
70
|
-
}
|
|
71
|
-
let newPercent = actionPositionX / sliderWidth
|
|
72
|
-
if (newPercent < 0) {
|
|
73
|
-
newPercent = 0
|
|
74
|
-
}
|
|
75
|
-
if (newPercent > 1) {
|
|
76
|
-
newPercent = 1
|
|
77
|
-
}
|
|
78
|
-
setPercent(newPercent)
|
|
79
|
-
percentRef.current = newPercent
|
|
80
|
-
}
|
|
81
|
-
|
|
82
61
|
const panRef = React.useRef(
|
|
83
62
|
PanResponder.create({
|
|
84
63
|
onStartShouldSetPanResponder: () => true,
|
|
85
64
|
onMoveShouldSetPanResponder: () => true,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
65
|
+
|
|
66
|
+
onPanResponderGrant: (event) => {
|
|
67
|
+
isDraggingRef.current = true
|
|
68
|
+
dragStartXRef.current = event.nativeEvent.pageX
|
|
69
|
+
dragStartPercentRef.current = percentRef.current
|
|
89
70
|
},
|
|
71
|
+
|
|
72
|
+
onPanResponderMove: (event) => {
|
|
73
|
+
if (!isDraggingRef.current) return
|
|
74
|
+
|
|
75
|
+
const deltaX = event.nativeEvent.pageX - dragStartXRef.current
|
|
76
|
+
let nextPercent = dragStartPercentRef.current + (deltaX / sliderWidth)
|
|
77
|
+
|
|
78
|
+
if (nextPercent < 0) nextPercent = 0
|
|
79
|
+
if (nextPercent > 1) nextPercent = 1
|
|
80
|
+
|
|
81
|
+
percentRef.current = nextPercent
|
|
82
|
+
setPercent(nextPercent)
|
|
83
|
+
},
|
|
84
|
+
|
|
90
85
|
onPanResponderRelease: () => {
|
|
91
86
|
isDraggingRef.current = false
|
|
92
87
|
onValueChange(percentRef.current)
|
|
93
88
|
},
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
positionX = gestureState.x0
|
|
99
|
-
}
|
|
100
|
-
thumbPositionToPercent(positionX)
|
|
101
|
-
},
|
|
102
|
-
onPanResponderGrant: (pressEvent, gestureState) => {
|
|
103
|
-
isDraggingRef.current = true
|
|
104
|
-
let positionX = gestureState.moveX
|
|
105
|
-
if (!positionX) {
|
|
106
|
-
positionX = gestureState.x0
|
|
107
|
-
}
|
|
108
|
-
thumbPositionToPercent(positionX)
|
|
89
|
+
|
|
90
|
+
onPanResponderEnd: () => {
|
|
91
|
+
isDraggingRef.current = false
|
|
92
|
+
onValueChange(percentRef.current)
|
|
109
93
|
}
|
|
110
94
|
})
|
|
111
|
-
)
|
|
95
|
+
)
|
|
96
|
+
|
|
112
97
|
|
|
113
98
|
React.useEffect(() => {
|
|
114
99
|
if (!isDraggingRef.current) {
|
|
100
|
+
percentRef.current = props.percent
|
|
115
101
|
setPercent(props.percent)
|
|
116
102
|
}
|
|
117
103
|
}, [props.percent])
|
|
@@ -126,26 +112,19 @@ const SnowRangeSliderW = (props) => {
|
|
|
126
112
|
|
|
127
113
|
const applyStep = (amount) => {
|
|
128
114
|
let result = percentRef.current + amount
|
|
129
|
-
if (result < min)
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
if (result > max) {
|
|
133
|
-
result = max
|
|
134
|
-
}
|
|
115
|
+
if (result < min) result = min
|
|
116
|
+
if (result > max) result = max
|
|
135
117
|
percentRef.current = result
|
|
136
118
|
setPercent(result)
|
|
137
119
|
onValueChange(result)
|
|
138
120
|
}
|
|
139
121
|
|
|
140
122
|
const longPress = (amount) => {
|
|
141
|
-
|
|
142
|
-
clearInterval(applyIntervalRef.current)
|
|
143
|
-
}
|
|
123
|
+
clearInterval(applyIntervalRef.current)
|
|
144
124
|
applyStep(amount)
|
|
145
|
-
setApplyStepInterval(setInterval(() =>
|
|
125
|
+
setApplyStepInterval(setInterval(() => applyStep(amount), 100))
|
|
146
126
|
}
|
|
147
127
|
|
|
148
|
-
|
|
149
128
|
React.useEffect(() => {
|
|
150
129
|
const actionListenerKey = addActionListener({
|
|
151
130
|
onRight: () => {
|
|
@@ -156,13 +135,11 @@ const SnowRangeSliderW = (props) => {
|
|
|
156
135
|
},
|
|
157
136
|
onLongRightStart: () => {
|
|
158
137
|
if (isFocused(props.focusKey)) {
|
|
159
|
-
longPress(step * 2
|
|
138
|
+
longPress(step * 2)
|
|
160
139
|
}
|
|
161
140
|
},
|
|
162
141
|
onLongRightEnd: () => {
|
|
163
|
-
|
|
164
|
-
clearInterval(applyIntervalRef.current)
|
|
165
|
-
}
|
|
142
|
+
clearInterval(applyIntervalRef.current)
|
|
166
143
|
},
|
|
167
144
|
onLeft: () => {
|
|
168
145
|
if (isFocused(props.focusKey)) {
|
|
@@ -172,56 +149,33 @@ const SnowRangeSliderW = (props) => {
|
|
|
172
149
|
},
|
|
173
150
|
onLongLeftStart: () => {
|
|
174
151
|
if (isFocused(props.focusKey)) {
|
|
175
|
-
longPress(-step * 2
|
|
152
|
+
longPress(-step * 2)
|
|
176
153
|
}
|
|
177
154
|
},
|
|
178
155
|
onLongLeftEnd: () => {
|
|
179
|
-
|
|
180
|
-
clearInterval(applyIntervalRef.current)
|
|
181
|
-
}
|
|
156
|
+
clearInterval(applyIntervalRef.current)
|
|
182
157
|
},
|
|
183
158
|
})
|
|
184
|
-
return () =>
|
|
185
|
-
removeActionListener(actionListenerKey)
|
|
186
|
-
}
|
|
159
|
+
return () => removeActionListener(actionListenerKey)
|
|
187
160
|
}, [])
|
|
188
161
|
|
|
189
|
-
|
|
190
|
-
return (event) => {
|
|
191
|
-
let widths = { ...layoutsRef.current }
|
|
192
|
-
widths[kind] = event.nativeEvent.layout
|
|
193
|
-
layoutsRef.current = widths
|
|
194
|
-
};
|
|
195
|
-
}
|
|
162
|
+
let thumbX = percentRef.current * sliderWidth
|
|
196
163
|
|
|
197
164
|
const trackWrapperStyle = [
|
|
198
165
|
SnowStyle.component.rangeSlider.trackWrapper,
|
|
199
|
-
{
|
|
200
|
-
width: sliderWidth
|
|
201
|
-
}
|
|
166
|
+
{ width: sliderWidth }
|
|
202
167
|
]
|
|
203
168
|
|
|
204
|
-
let thumbX = 0
|
|
205
|
-
if (isDraggingRef.current) {
|
|
206
|
-
thumbX = percent * sliderWidth
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
thumbX = percentRef.current * sliderWidth
|
|
210
|
-
}
|
|
211
|
-
|
|
212
169
|
const leftTrackStyle = [
|
|
213
170
|
SnowStyle.component.rangeSlider.leftTrack,
|
|
214
|
-
{
|
|
215
|
-
width: thumbX
|
|
216
|
-
}
|
|
171
|
+
{ width: thumbX }
|
|
217
172
|
]
|
|
218
173
|
|
|
219
174
|
let thumbStyle = [
|
|
220
175
|
SnowStyle.component.rangeSlider.thumb,
|
|
221
|
-
{
|
|
222
|
-
left: thumbX - SnowStyle.component.rangeSlider.thumb.width / 2
|
|
223
|
-
}
|
|
176
|
+
{ left: thumbX - SnowStyle.component.rangeSlider.thumb.width / 2 }
|
|
224
177
|
]
|
|
178
|
+
|
|
225
179
|
if (isFocused(props.focusKey)) {
|
|
226
180
|
thumbStyle.push({
|
|
227
181
|
backgroundColor: SnowStyle.color.hover,
|
|
@@ -230,14 +184,13 @@ const SnowRangeSliderW = (props) => {
|
|
|
230
184
|
}
|
|
231
185
|
|
|
232
186
|
return (
|
|
233
|
-
<View
|
|
234
|
-
<View {...panRef.current.panHandlers}
|
|
235
|
-
<View
|
|
236
|
-
<View
|
|
187
|
+
<View style={SnowStyle.component.rangeSlider.wrapper}>
|
|
188
|
+
<View {...panRef.current.panHandlers} style={trackWrapperStyle}>
|
|
189
|
+
<View style={leftTrackStyle} />
|
|
190
|
+
<View style={SnowStyle.component.rangeSlider.rightTrack} />
|
|
237
191
|
<Pressable
|
|
238
192
|
ref={elementRef}
|
|
239
193
|
style={thumbStyle}
|
|
240
|
-
onLayout={handleLayout('thumb')}
|
|
241
194
|
focusKey={props.focusKey}
|
|
242
195
|
focusRight={props.focusKey}
|
|
243
196
|
focusLeft={props.focusKey}
|
|
@@ -246,11 +199,10 @@ const SnowRangeSliderW = (props) => {
|
|
|
246
199
|
/>
|
|
247
200
|
</View>
|
|
248
201
|
</View>
|
|
249
|
-
)
|
|
202
|
+
)
|
|
250
203
|
}
|
|
251
204
|
|
|
252
205
|
SnowRangeSliderW.isSnowFocusWired = true
|
|
253
206
|
|
|
254
207
|
export const SnowRangeSlider = SnowRangeSliderW
|
|
255
|
-
|
|
256
|
-
export default SnowRangeSlider
|
|
208
|
+
export default SnowRangeSlider
|