expo-snowui 1.6.21 → 1.6.23
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,44 @@ 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: () => {
|
|
64
|
+
isDraggingRef.current = true;
|
|
65
|
+
dragStartPercentRef.current = percentRef.current;
|
|
66
|
+
},
|
|
67
|
+
onPanResponderMove: (_, gestureState) => {
|
|
68
|
+
if (!isDraggingRef.current) return;
|
|
69
|
+
let nextPercent = dragStartPercentRef.current + gestureState.dx / sliderWidth;
|
|
70
|
+
if (nextPercent < 0) nextPercent = 0;
|
|
71
|
+
if (nextPercent > 1) nextPercent = 1;
|
|
72
|
+
percentRef.current = nextPercent;
|
|
73
|
+
setPercent(nextPercent);
|
|
89
74
|
},
|
|
90
75
|
onPanResponderRelease: () => {
|
|
91
76
|
isDraggingRef.current = false;
|
|
92
77
|
onValueChange(percentRef.current);
|
|
93
78
|
},
|
|
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);
|
|
79
|
+
onPanResponderEnd: () => {
|
|
80
|
+
isDraggingRef.current = false;
|
|
81
|
+
onValueChange(percentRef.current);
|
|
109
82
|
}
|
|
110
83
|
}));
|
|
111
84
|
React.useEffect(() => {
|
|
112
85
|
if (!isDraggingRef.current) {
|
|
86
|
+
percentRef.current = props.percent;
|
|
113
87
|
setPercent(props.percent);
|
|
114
88
|
}
|
|
115
89
|
}, [props.percent]);
|
|
@@ -121,24 +95,16 @@ const SnowRangeSliderW = props => {
|
|
|
121
95
|
}, [applyStepInterval]);
|
|
122
96
|
const applyStep = amount => {
|
|
123
97
|
let result = percentRef.current + amount;
|
|
124
|
-
if (result < min)
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
if (result > max) {
|
|
128
|
-
result = max;
|
|
129
|
-
}
|
|
98
|
+
if (result < min) result = min;
|
|
99
|
+
if (result > max) result = max;
|
|
130
100
|
percentRef.current = result;
|
|
131
101
|
setPercent(result);
|
|
132
102
|
onValueChange(result);
|
|
133
103
|
};
|
|
134
104
|
const longPress = amount => {
|
|
135
|
-
|
|
136
|
-
clearInterval(applyIntervalRef.current);
|
|
137
|
-
}
|
|
105
|
+
clearInterval(applyIntervalRef.current);
|
|
138
106
|
applyStep(amount);
|
|
139
|
-
setApplyStepInterval(setInterval(() =>
|
|
140
|
-
applyStep(amount);
|
|
141
|
-
}, 100));
|
|
107
|
+
setApplyStepInterval(setInterval(() => applyStep(amount), 100));
|
|
142
108
|
};
|
|
143
109
|
React.useEffect(() => {
|
|
144
110
|
const actionListenerKey = addActionListener({
|
|
@@ -150,13 +116,11 @@ const SnowRangeSliderW = props => {
|
|
|
150
116
|
},
|
|
151
117
|
onLongRightStart: () => {
|
|
152
118
|
if (isFocused(props.focusKey)) {
|
|
153
|
-
longPress(step * 2
|
|
119
|
+
longPress(step * 2);
|
|
154
120
|
}
|
|
155
121
|
},
|
|
156
122
|
onLongRightEnd: () => {
|
|
157
|
-
|
|
158
|
-
clearInterval(applyIntervalRef.current);
|
|
159
|
-
}
|
|
123
|
+
clearInterval(applyIntervalRef.current);
|
|
160
124
|
},
|
|
161
125
|
onLeft: () => {
|
|
162
126
|
if (isFocused(props.focusKey)) {
|
|
@@ -166,37 +130,19 @@ const SnowRangeSliderW = props => {
|
|
|
166
130
|
},
|
|
167
131
|
onLongLeftStart: () => {
|
|
168
132
|
if (isFocused(props.focusKey)) {
|
|
169
|
-
longPress(-step * 2
|
|
133
|
+
longPress(-step * 2);
|
|
170
134
|
}
|
|
171
135
|
},
|
|
172
136
|
onLongLeftEnd: () => {
|
|
173
|
-
|
|
174
|
-
clearInterval(applyIntervalRef.current);
|
|
175
|
-
}
|
|
137
|
+
clearInterval(applyIntervalRef.current);
|
|
176
138
|
}
|
|
177
139
|
});
|
|
178
|
-
return () =>
|
|
179
|
-
removeActionListener(actionListenerKey);
|
|
180
|
-
};
|
|
140
|
+
return () => removeActionListener(actionListenerKey);
|
|
181
141
|
}, []);
|
|
182
|
-
|
|
183
|
-
return event => {
|
|
184
|
-
let widths = {
|
|
185
|
-
...layoutsRef.current
|
|
186
|
-
};
|
|
187
|
-
widths[kind] = event.nativeEvent.layout;
|
|
188
|
-
layoutsRef.current = widths;
|
|
189
|
-
};
|
|
190
|
-
};
|
|
142
|
+
let thumbX = percentRef.current * sliderWidth;
|
|
191
143
|
const trackWrapperStyle = [SnowStyle.component.rangeSlider.trackWrapper, {
|
|
192
144
|
width: sliderWidth
|
|
193
145
|
}];
|
|
194
|
-
let thumbX = 0;
|
|
195
|
-
if (isDraggingRef.current) {
|
|
196
|
-
thumbX = percent * sliderWidth;
|
|
197
|
-
} else {
|
|
198
|
-
thumbX = percentRef.current * sliderWidth;
|
|
199
|
-
}
|
|
200
146
|
const leftTrackStyle = [SnowStyle.component.rangeSlider.leftTrack, {
|
|
201
147
|
width: thumbX
|
|
202
148
|
}];
|
|
@@ -210,22 +156,17 @@ const SnowRangeSliderW = props => {
|
|
|
210
156
|
});
|
|
211
157
|
}
|
|
212
158
|
return /*#__PURE__*/_jsx(View, {
|
|
213
|
-
onLayout: handleLayout('slider'),
|
|
214
159
|
style: SnowStyle.component.rangeSlider.wrapper,
|
|
215
160
|
children: /*#__PURE__*/_jsxs(View, {
|
|
216
161
|
...panRef.current.panHandlers,
|
|
217
|
-
onLayout: handleLayout('track'),
|
|
218
162
|
style: trackWrapperStyle,
|
|
219
163
|
children: [/*#__PURE__*/_jsx(View, {
|
|
220
|
-
onLayout: handleLayout('leftTrack'),
|
|
221
164
|
style: leftTrackStyle
|
|
222
165
|
}), /*#__PURE__*/_jsx(View, {
|
|
223
|
-
onLayout: handleLayout('rightTrack'),
|
|
224
166
|
style: SnowStyle.component.rangeSlider.rightTrack
|
|
225
167
|
}), /*#__PURE__*/_jsx(Pressable, {
|
|
226
168
|
ref: elementRef,
|
|
227
169
|
style: thumbStyle,
|
|
228
|
-
onLayout: handleLayout('thumb'),
|
|
229
170
|
focusKey: props.focusKey,
|
|
230
171
|
focusRight: props.focusKey,
|
|
231
172
|
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","current","onPanResponderMove","_","gestureState","nextPercent","dx","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: () => {
|
|
67
|
+
isDraggingRef.current = true
|
|
68
|
+
dragStartPercentRef.current = percentRef.current
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
onPanResponderMove: (_, gestureState) => {
|
|
72
|
+
if (!isDraggingRef.current) return
|
|
73
|
+
|
|
74
|
+
let nextPercent =
|
|
75
|
+
dragStartPercentRef.current + (gestureState.dx / sliderWidth)
|
|
76
|
+
|
|
77
|
+
if (nextPercent < 0) nextPercent = 0
|
|
78
|
+
if (nextPercent > 1) nextPercent = 1
|
|
79
|
+
|
|
80
|
+
percentRef.current = nextPercent
|
|
81
|
+
setPercent(nextPercent)
|
|
89
82
|
},
|
|
83
|
+
|
|
90
84
|
onPanResponderRelease: () => {
|
|
91
85
|
isDraggingRef.current = false
|
|
92
86
|
onValueChange(percentRef.current)
|
|
93
87
|
},
|
|
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)
|
|
88
|
+
|
|
89
|
+
onPanResponderEnd: () => {
|
|
90
|
+
isDraggingRef.current = false
|
|
91
|
+
onValueChange(percentRef.current)
|
|
109
92
|
}
|
|
110
93
|
})
|
|
111
|
-
)
|
|
94
|
+
)
|
|
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
|