@momo-kits/slider 0.0.49-beta → 0.0.49-beta.5
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.
- package/DefaultMarker.js +61 -60
- package/DefaultMarker.web.js +55 -61
- package/Slider.js +193 -166
- package/package.json +16 -14
- package/publish.sh +2 -2
package/DefaultMarker.js
CHANGED
|
@@ -1,72 +1,73 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {
|
|
3
|
-
|
|
3
|
+
View,
|
|
4
|
+
StyleSheet,
|
|
5
|
+
Platform,
|
|
6
|
+
TouchableHighlight,
|
|
7
|
+
Text,
|
|
4
8
|
} from 'react-native';
|
|
5
|
-
import {
|
|
9
|
+
import {Colors, Radius} from '@momo-kits/core';
|
|
10
|
+
// import {Radius} from '../../core';
|
|
6
11
|
|
|
7
12
|
class DefaultMarker extends React.Component {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/>
|
|
34
|
-
</TouchableHighlight>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
13
|
+
render() {
|
|
14
|
+
const {
|
|
15
|
+
enabled,
|
|
16
|
+
markerStyle,
|
|
17
|
+
pressed,
|
|
18
|
+
pressedMarkerStyle,
|
|
19
|
+
disabledMarkerStyle,
|
|
20
|
+
} = this.props;
|
|
21
|
+
return (
|
|
22
|
+
<TouchableHighlight>
|
|
23
|
+
<View
|
|
24
|
+
style={
|
|
25
|
+
enabled
|
|
26
|
+
? [
|
|
27
|
+
styles.markerStyle,
|
|
28
|
+
markerStyle,
|
|
29
|
+
pressed && styles.pressedMarkerStyle,
|
|
30
|
+
pressed && pressedMarkerStyle,
|
|
31
|
+
]
|
|
32
|
+
: [styles.markerStyle, styles.disabled, disabledMarkerStyle]
|
|
33
|
+
}
|
|
34
|
+
/>
|
|
35
|
+
</TouchableHighlight>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
const styles = StyleSheet.create({
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
shadowRadius: 1,
|
|
53
|
-
shadowOpacity: 0.2,
|
|
54
|
-
elevation: 3
|
|
55
|
-
},
|
|
56
|
-
pressedMarkerStyle: {
|
|
57
|
-
...Platform.select({
|
|
58
|
-
web: {},
|
|
59
|
-
ios: {},
|
|
60
|
-
android: {
|
|
61
|
-
height: 20,
|
|
62
|
-
width: 20,
|
|
63
|
-
borderRadius: 20,
|
|
64
|
-
},
|
|
65
|
-
}),
|
|
66
|
-
},
|
|
67
|
-
disabled: {
|
|
68
|
-
backgroundColor: '#d3d3d3',
|
|
41
|
+
markerStyle: {
|
|
42
|
+
height: 24,
|
|
43
|
+
width: 24,
|
|
44
|
+
borderRadius: 12,
|
|
45
|
+
borderWidth: 5,
|
|
46
|
+
borderColor: Colors.white,
|
|
47
|
+
backgroundColor: Colors.pink_05_b,
|
|
48
|
+
shadowColor: '#000',
|
|
49
|
+
shadowOffset: {
|
|
50
|
+
width: 0,
|
|
51
|
+
height: 4,
|
|
69
52
|
},
|
|
53
|
+
shadowOpacity: 0.3,
|
|
54
|
+
shadowRadius: 4.65,
|
|
55
|
+
elevation: 8,
|
|
56
|
+
},
|
|
57
|
+
pressedMarkerStyle: {
|
|
58
|
+
...Platform.select({
|
|
59
|
+
web: {},
|
|
60
|
+
ios: {},
|
|
61
|
+
android: {
|
|
62
|
+
height: 20,
|
|
63
|
+
width: 20,
|
|
64
|
+
borderRadius: 20,
|
|
65
|
+
},
|
|
66
|
+
}),
|
|
67
|
+
},
|
|
68
|
+
disabled: {
|
|
69
|
+
backgroundColor: '#d3d3d3',
|
|
70
|
+
},
|
|
70
71
|
});
|
|
71
72
|
|
|
72
73
|
export default DefaultMarker;
|
package/DefaultMarker.web.js
CHANGED
|
@@ -1,72 +1,66 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
View, StyleSheet, Platform, TouchableHighlight
|
|
4
|
-
} from 'react-native';
|
|
2
|
+
import {View, StyleSheet, Platform, TouchableHighlight} from 'react-native';
|
|
5
3
|
import Colors from '../../core/colors';
|
|
6
4
|
|
|
7
5
|
class DefaultMarker extends React.Component {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/>
|
|
34
|
-
</TouchableHighlight>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
6
|
+
render() {
|
|
7
|
+
const {
|
|
8
|
+
enabled,
|
|
9
|
+
markerStyle,
|
|
10
|
+
pressed,
|
|
11
|
+
pressedMarkerStyle,
|
|
12
|
+
disabledMarkerStyle,
|
|
13
|
+
} = this.props;
|
|
14
|
+
return (
|
|
15
|
+
<TouchableHighlight>
|
|
16
|
+
<View
|
|
17
|
+
style={
|
|
18
|
+
enabled
|
|
19
|
+
? [
|
|
20
|
+
styles.markerStyle,
|
|
21
|
+
markerStyle,
|
|
22
|
+
pressed && styles.pressedMarkerStyle,
|
|
23
|
+
pressed && pressedMarkerStyle,
|
|
24
|
+
]
|
|
25
|
+
: [styles.markerStyle, styles.disabled, disabledMarkerStyle]
|
|
26
|
+
}
|
|
27
|
+
/>
|
|
28
|
+
</TouchableHighlight>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
37
31
|
}
|
|
38
32
|
|
|
39
33
|
const styles = StyleSheet.create({
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
shadowRadius: 1,
|
|
53
|
-
shadowOpacity: 0.2,
|
|
54
|
-
elevation: 3
|
|
55
|
-
},
|
|
56
|
-
pressedMarkerStyle: {
|
|
57
|
-
...Platform.select({
|
|
58
|
-
web: {},
|
|
59
|
-
ios: {},
|
|
60
|
-
android: {
|
|
61
|
-
height: 20,
|
|
62
|
-
width: 20,
|
|
63
|
-
borderRadius: 20,
|
|
64
|
-
},
|
|
65
|
-
}),
|
|
66
|
-
},
|
|
67
|
-
disabled: {
|
|
68
|
-
backgroundColor: '#d3d3d3',
|
|
34
|
+
markerStyle: {
|
|
35
|
+
height: 24,
|
|
36
|
+
width: 24,
|
|
37
|
+
borderRadius: 12,
|
|
38
|
+
borderWidth: 5,
|
|
39
|
+
borderColor: Colors.white,
|
|
40
|
+
backgroundColor: Colors.pink_05_b,
|
|
41
|
+
shadowColor: '#000',
|
|
42
|
+
shadowOffset: {
|
|
43
|
+
width: 0,
|
|
44
|
+
height: 4,
|
|
69
45
|
},
|
|
46
|
+
shadowOpacity: 0.3,
|
|
47
|
+
shadowRadius: 4.65,
|
|
48
|
+
elevation: 8,
|
|
49
|
+
},
|
|
50
|
+
pressedMarkerStyle: {
|
|
51
|
+
...Platform.select({
|
|
52
|
+
web: {},
|
|
53
|
+
ios: {},
|
|
54
|
+
android: {
|
|
55
|
+
height: 20,
|
|
56
|
+
width: 20,
|
|
57
|
+
borderRadius: 20,
|
|
58
|
+
},
|
|
59
|
+
}),
|
|
60
|
+
},
|
|
61
|
+
disabled: {
|
|
62
|
+
backgroundColor: '#d3d3d3',
|
|
63
|
+
},
|
|
70
64
|
});
|
|
71
65
|
|
|
72
66
|
export default DefaultMarker;
|
package/Slider.js
CHANGED
|
@@ -6,9 +6,10 @@ import {
|
|
|
6
6
|
View,
|
|
7
7
|
I18nManager,
|
|
8
8
|
ImageBackground,
|
|
9
|
+
Text,
|
|
9
10
|
} from 'react-native';
|
|
10
11
|
import { get } from 'lodash';
|
|
11
|
-
import { Colors } from '@momo-kits/core';
|
|
12
|
+
import { Colors, Spacing } from '@momo-kits/core';
|
|
12
13
|
import DefaultMarker from './DefaultMarker';
|
|
13
14
|
import DefaultLabel from './DefaultLabel';
|
|
14
15
|
import { createArray, valueToPosition, positionToValue } from './converters';
|
|
@@ -16,20 +17,13 @@ import { createArray, valueToPosition, positionToValue } from './converters';
|
|
|
16
17
|
export default class Slider extends Component {
|
|
17
18
|
constructor(props) {
|
|
18
19
|
super(props);
|
|
19
|
-
const {
|
|
20
|
-
|
|
21
|
-
min,
|
|
22
|
-
max,
|
|
23
|
-
step,
|
|
24
|
-
length,
|
|
25
|
-
values
|
|
26
|
-
} = this.props;
|
|
27
|
-
this.optionsArray = optionsArray
|
|
28
|
-
|| createArray(min, max, step);
|
|
20
|
+
const { optionsArray, min, max, step, length, values } = this.props;
|
|
21
|
+
this.optionsArray = optionsArray || createArray(min, max, step);
|
|
29
22
|
const defaultSliderLength = length;
|
|
30
23
|
this.stepLength = defaultSliderLength / this.optionsArray.length;
|
|
31
|
-
const initialValues = values.map((value) =>
|
|
32
|
-
|
|
24
|
+
const initialValues = values.map((value) =>
|
|
25
|
+
valueToPosition(value, this.optionsArray, defaultSliderLength),
|
|
26
|
+
);
|
|
33
27
|
this.state = {
|
|
34
28
|
valueOne: values[0],
|
|
35
29
|
valueTwo: values[1],
|
|
@@ -37,24 +31,26 @@ export default class Slider extends Component {
|
|
|
37
31
|
pastTwo: initialValues[1],
|
|
38
32
|
positionOne: initialValues[0],
|
|
39
33
|
positionTwo: initialValues[1],
|
|
40
|
-
sliderLength: defaultSliderLength
|
|
34
|
+
sliderLength: defaultSliderLength,
|
|
41
35
|
};
|
|
42
36
|
this.subscribePanResponder();
|
|
43
37
|
}
|
|
44
38
|
|
|
45
39
|
subscribePanResponder = () => {
|
|
46
|
-
const customPanResponder = (start, move, end) =>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
40
|
+
const customPanResponder = (start, move, end) =>
|
|
41
|
+
PanResponder.create({
|
|
42
|
+
onStartShouldSetPanResponder: () => true,
|
|
43
|
+
onStartShouldSetPanResponderCapture: () => true,
|
|
44
|
+
onMoveShouldSetPanResponder: () => true,
|
|
45
|
+
onMoveShouldSetPanResponderCapture: () => true,
|
|
46
|
+
onPanResponderGrant: () => start(),
|
|
47
|
+
onPanResponderMove: (evt, gestureState) => move(gestureState),
|
|
48
|
+
onPanResponderTerminationRequest: () => false,
|
|
49
|
+
onPanResponderRelease: (evt, gestureState) => end(gestureState),
|
|
50
|
+
onPanResponderTerminate: (evt, gestureState) =>
|
|
51
|
+
end(gestureState),
|
|
52
|
+
onShouldBlockNativeResponder: () => true,
|
|
53
|
+
});
|
|
58
54
|
|
|
59
55
|
this._panResponderBetween = customPanResponder(
|
|
60
56
|
(gestureState) => {
|
|
@@ -118,22 +114,15 @@ export default class Slider extends Component {
|
|
|
118
114
|
onMarkersPosition,
|
|
119
115
|
allowRange = [],
|
|
120
116
|
min,
|
|
121
|
-
max
|
|
117
|
+
max,
|
|
122
118
|
} = this.props;
|
|
123
|
-
const {
|
|
124
|
-
|
|
125
|
-
positionTwo,
|
|
126
|
-
valueOne,
|
|
127
|
-
valueTwo,
|
|
128
|
-
sliderLength
|
|
129
|
-
} = this.state;
|
|
119
|
+
const { pastOne, positionTwo, valueOne, valueTwo, sliderLength } =
|
|
120
|
+
this.state;
|
|
130
121
|
if (!enabledOne) {
|
|
131
122
|
return;
|
|
132
123
|
}
|
|
133
124
|
|
|
134
|
-
const accumDistance = vertical
|
|
135
|
-
? -gestureState.dy
|
|
136
|
-
: gestureState.dx;
|
|
125
|
+
const accumDistance = vertical ? -gestureState.dy : gestureState.dx;
|
|
137
126
|
const accumDistanceDisplacement = vertical
|
|
138
127
|
? gestureState.dx
|
|
139
128
|
: gestureState.dy;
|
|
@@ -142,19 +131,21 @@ export default class Slider extends Component {
|
|
|
142
131
|
? pastOne - accumDistance
|
|
143
132
|
: accumDistance + pastOne;
|
|
144
133
|
const bottom = 0;
|
|
145
|
-
const trueTop =
|
|
146
|
-
-
|
|
134
|
+
const trueTop =
|
|
135
|
+
positionTwo -
|
|
136
|
+
(allowOverlap
|
|
147
137
|
? 0
|
|
148
138
|
: minMarkerOverlapDistance > 0
|
|
149
|
-
|
|
150
|
-
|
|
139
|
+
? minMarkerOverlapDistance
|
|
140
|
+
: this.stepLength);
|
|
151
141
|
const top = trueTop === 0 ? 0 : trueTop || sliderLength;
|
|
152
|
-
const confined =
|
|
142
|
+
const confined =
|
|
143
|
+
unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
|
|
153
144
|
const { slipDisplacement } = touchDimensions;
|
|
154
145
|
|
|
155
146
|
if (
|
|
156
|
-
Math.abs(accumDistanceDisplacement) < slipDisplacement
|
|
157
|
-
|
|
147
|
+
Math.abs(accumDistanceDisplacement) < slipDisplacement ||
|
|
148
|
+
!slipDisplacement
|
|
158
149
|
) {
|
|
159
150
|
const value = positionToValue(
|
|
160
151
|
confined,
|
|
@@ -162,8 +153,10 @@ export default class Slider extends Component {
|
|
|
162
153
|
sliderLength,
|
|
163
154
|
);
|
|
164
155
|
|
|
165
|
-
if (allowRange?.length > 0 && value < get(allowRange, '[0]', min))
|
|
166
|
-
|
|
156
|
+
if (allowRange?.length > 0 && value < get(allowRange, '[0]', min))
|
|
157
|
+
return;
|
|
158
|
+
if (allowRange?.length > 1 && value > get(allowRange, '[1]', max))
|
|
159
|
+
return;
|
|
167
160
|
|
|
168
161
|
const snappedValue = valueToPosition(
|
|
169
162
|
value,
|
|
@@ -183,7 +176,7 @@ export default class Slider extends Component {
|
|
|
183
176
|
() => {
|
|
184
177
|
const {
|
|
185
178
|
valueOne: newValueOne,
|
|
186
|
-
positionOne: newPositionOne
|
|
179
|
+
positionOne: newPositionOne,
|
|
187
180
|
} = this.state;
|
|
188
181
|
const change = [newValueOne];
|
|
189
182
|
if (valueTwo) {
|
|
@@ -191,10 +184,7 @@ export default class Slider extends Component {
|
|
|
191
184
|
}
|
|
192
185
|
onChange(change);
|
|
193
186
|
|
|
194
|
-
onMarkersPosition([
|
|
195
|
-
newPositionOne,
|
|
196
|
-
positionTwo,
|
|
197
|
-
]);
|
|
187
|
+
onMarkersPosition([newPositionOne, positionTwo]);
|
|
198
188
|
},
|
|
199
189
|
);
|
|
200
190
|
}
|
|
@@ -211,22 +201,15 @@ export default class Slider extends Component {
|
|
|
211
201
|
touchDimensions,
|
|
212
202
|
snapped,
|
|
213
203
|
onChange,
|
|
214
|
-
onMarkersPosition
|
|
204
|
+
onMarkersPosition,
|
|
215
205
|
} = this.props;
|
|
216
|
-
const {
|
|
217
|
-
|
|
218
|
-
positionOne,
|
|
219
|
-
sliderLength,
|
|
220
|
-
valueTwo,
|
|
221
|
-
valueOne,
|
|
222
|
-
} = this.state;
|
|
206
|
+
const { pastTwo, positionOne, sliderLength, valueTwo, valueOne } =
|
|
207
|
+
this.state;
|
|
223
208
|
if (!enabledTwo) {
|
|
224
209
|
return;
|
|
225
210
|
}
|
|
226
211
|
|
|
227
|
-
const accumDistance = vertical
|
|
228
|
-
? -gestureState.dy
|
|
229
|
-
: gestureState.dx;
|
|
212
|
+
const accumDistance = vertical ? -gestureState.dy : gestureState.dx;
|
|
230
213
|
const accumDistanceDisplacement = vertical
|
|
231
214
|
? gestureState.dx
|
|
232
215
|
: gestureState.dy;
|
|
@@ -234,19 +217,21 @@ export default class Slider extends Component {
|
|
|
234
217
|
const unconfined = I18nManager.isRTL
|
|
235
218
|
? pastTwo - accumDistance
|
|
236
219
|
: accumDistance + pastTwo;
|
|
237
|
-
const bottom =
|
|
238
|
-
+
|
|
220
|
+
const bottom =
|
|
221
|
+
positionOne +
|
|
222
|
+
(allowOverlap
|
|
239
223
|
? 0
|
|
240
224
|
: minMarkerOverlapDistance > 0
|
|
241
|
-
|
|
242
|
-
|
|
225
|
+
? minMarkerOverlapDistance
|
|
226
|
+
: this.stepLength);
|
|
243
227
|
const top = sliderLength;
|
|
244
|
-
const confined =
|
|
228
|
+
const confined =
|
|
229
|
+
unconfined < bottom ? bottom : unconfined > top ? top : unconfined;
|
|
245
230
|
const { slipDisplacement } = touchDimensions;
|
|
246
231
|
|
|
247
232
|
if (
|
|
248
|
-
Math.abs(accumDistanceDisplacement) < slipDisplacement
|
|
249
|
-
|
|
233
|
+
Math.abs(accumDistanceDisplacement) < slipDisplacement ||
|
|
234
|
+
!slipDisplacement
|
|
250
235
|
) {
|
|
251
236
|
const value = positionToValue(
|
|
252
237
|
confined,
|
|
@@ -270,20 +255,13 @@ export default class Slider extends Component {
|
|
|
270
255
|
valueTwo: value,
|
|
271
256
|
},
|
|
272
257
|
() => {
|
|
273
|
-
console.log(valueOne);
|
|
274
258
|
const {
|
|
275
259
|
valueTwo: newValueTwo,
|
|
276
|
-
positionTwo: newPositionTwo
|
|
260
|
+
positionTwo: newPositionTwo,
|
|
277
261
|
} = this.state;
|
|
278
|
-
onChange([
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
]);
|
|
282
|
-
|
|
283
|
-
onMarkersPosition([
|
|
284
|
-
positionOne,
|
|
285
|
-
newPositionTwo,
|
|
286
|
-
]);
|
|
262
|
+
onChange([valueOne, newValueTwo]);
|
|
263
|
+
|
|
264
|
+
onMarkersPosition([positionOne, newPositionTwo]);
|
|
287
265
|
},
|
|
288
266
|
);
|
|
289
267
|
}
|
|
@@ -292,9 +270,7 @@ export default class Slider extends Component {
|
|
|
292
270
|
|
|
293
271
|
endOne = (gestureState) => {
|
|
294
272
|
const { onToggleOne, onChangeFinish } = this.props;
|
|
295
|
-
const {
|
|
296
|
-
positionOne, onePressed, valueOne, valueTwo
|
|
297
|
-
} = this.state;
|
|
273
|
+
const { positionOne, onePressed, valueOne, valueTwo } = this.state;
|
|
298
274
|
if (gestureState.moveX === 0 && onToggleOne) {
|
|
299
275
|
onToggleOne();
|
|
300
276
|
return;
|
|
@@ -317,9 +293,7 @@ export default class Slider extends Component {
|
|
|
317
293
|
|
|
318
294
|
endTwo = (gestureState) => {
|
|
319
295
|
const { onToggleTwo, onChangeFinish } = this.props;
|
|
320
|
-
const {
|
|
321
|
-
twoPressed, positionTwo, valueOne, valueTwo
|
|
322
|
-
} = this.state;
|
|
296
|
+
const { twoPressed, positionTwo, valueOne, valueTwo } = this.state;
|
|
323
297
|
if (gestureState.moveX === 0 && onToggleTwo) {
|
|
324
298
|
onToggleTwo();
|
|
325
299
|
return;
|
|
@@ -331,35 +305,36 @@ export default class Slider extends Component {
|
|
|
331
305
|
pastTwo: positionTwo,
|
|
332
306
|
},
|
|
333
307
|
() => {
|
|
334
|
-
onChangeFinish([
|
|
335
|
-
valueOne,
|
|
336
|
-
valueTwo,
|
|
337
|
-
]);
|
|
308
|
+
onChangeFinish([valueOne, valueTwo]);
|
|
338
309
|
},
|
|
339
310
|
);
|
|
340
311
|
};
|
|
341
312
|
|
|
342
313
|
componentDidUpdate(prevProps, prevState) {
|
|
343
|
-
const {
|
|
344
|
-
|
|
345
|
-
positionTwo: prevPositionTwo,
|
|
346
|
-
} = prevState;
|
|
314
|
+
const { positionOne: prevPositionOne, positionTwo: prevPositionTwo } =
|
|
315
|
+
prevState;
|
|
347
316
|
|
|
348
317
|
const {
|
|
349
|
-
positionOne,
|
|
318
|
+
positionOne,
|
|
319
|
+
positionTwo,
|
|
320
|
+
onePressed,
|
|
321
|
+
twoPressed,
|
|
322
|
+
sliderLength,
|
|
350
323
|
} = this.state;
|
|
351
|
-
const {
|
|
352
|
-
|
|
353
|
-
} = this.props;
|
|
324
|
+
const { onMarkersPosition, min, max, step, values, optionsArray } =
|
|
325
|
+
this.props;
|
|
354
326
|
|
|
355
327
|
if (
|
|
356
|
-
typeof positionOne === 'undefined'
|
|
357
|
-
|
|
328
|
+
typeof positionOne === 'undefined' &&
|
|
329
|
+
typeof positionTwo !== 'undefined'
|
|
358
330
|
) {
|
|
359
331
|
return;
|
|
360
332
|
}
|
|
361
333
|
|
|
362
|
-
if (
|
|
334
|
+
if (
|
|
335
|
+
positionOne !== prevPositionOne ||
|
|
336
|
+
positionTwo !== prevPositionTwo
|
|
337
|
+
) {
|
|
363
338
|
onMarkersPosition([positionOne, positionTwo]);
|
|
364
339
|
}
|
|
365
340
|
|
|
@@ -369,17 +344,15 @@ export default class Slider extends Component {
|
|
|
369
344
|
|
|
370
345
|
const nextState = {};
|
|
371
346
|
if (
|
|
372
|
-
prevProps.min !== min
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
&& prevProps.values[1])
|
|
347
|
+
prevProps.min !== min ||
|
|
348
|
+
prevProps.max !== max ||
|
|
349
|
+
prevProps.step !== step ||
|
|
350
|
+
prevProps.values[0] !== values[0] ||
|
|
351
|
+
prevState.sliderLength !== sliderLength ||
|
|
352
|
+
prevProps.values[1] !== values[1] ||
|
|
353
|
+
(prevState.sliderLength !== sliderLength && prevProps.values[1])
|
|
380
354
|
) {
|
|
381
|
-
this.optionsArray = optionsArray
|
|
382
|
-
|| createArray(min, max, step);
|
|
355
|
+
this.optionsArray = optionsArray || createArray(min, max, step);
|
|
383
356
|
|
|
384
357
|
this.stepLength = sliderLength / this.optionsArray.length;
|
|
385
358
|
|
|
@@ -415,14 +388,20 @@ export default class Slider extends Component {
|
|
|
415
388
|
? e.nativeEvent.layout.height
|
|
416
389
|
: e.nativeEvent.layout.width;
|
|
417
390
|
this.setState({
|
|
418
|
-
sliderLength: layoutLength
|
|
391
|
+
sliderLength: layoutLength,
|
|
419
392
|
});
|
|
420
393
|
}
|
|
421
394
|
}
|
|
422
395
|
|
|
423
396
|
render() {
|
|
424
397
|
const {
|
|
425
|
-
positionOne,
|
|
398
|
+
positionOne,
|
|
399
|
+
positionTwo,
|
|
400
|
+
onePressed,
|
|
401
|
+
valueOne,
|
|
402
|
+
twoPressed,
|
|
403
|
+
valueTwo,
|
|
404
|
+
sliderLength,
|
|
426
405
|
} = this.state;
|
|
427
406
|
const {
|
|
428
407
|
style,
|
|
@@ -449,8 +428,8 @@ export default class Slider extends Component {
|
|
|
449
428
|
disabledMarkerStyle,
|
|
450
429
|
valuePrefix,
|
|
451
430
|
valueSuffix,
|
|
452
|
-
enableLabel,
|
|
453
|
-
imageBackgroundSource
|
|
431
|
+
enableLabel = true,
|
|
432
|
+
imageBackgroundSource,
|
|
454
433
|
} = this.props;
|
|
455
434
|
const twoMarkers = values.length === 2; // when allowOverlap, positionTwo could be 0, identified as string '0' and throwing 'RawText 0 needs to be wrapped in <Text>' error
|
|
456
435
|
|
|
@@ -471,9 +450,7 @@ export default class Slider extends Component {
|
|
|
471
450
|
|
|
472
451
|
const Label = customLabel;
|
|
473
452
|
|
|
474
|
-
const {
|
|
475
|
-
borderRadius,
|
|
476
|
-
} = touchDimensions;
|
|
453
|
+
const { borderRadius } = touchDimensions;
|
|
477
454
|
const touchStyle = {
|
|
478
455
|
borderRadius: borderRadius || 0,
|
|
479
456
|
};
|
|
@@ -514,7 +491,9 @@ export default class Slider extends Component {
|
|
|
514
491
|
trackTwoStyle,
|
|
515
492
|
{ width: trackTwoLength },
|
|
516
493
|
]}
|
|
517
|
-
{...(twoMarkers
|
|
494
|
+
{...(twoMarkers
|
|
495
|
+
? this._panResponderBetween.panHandlers
|
|
496
|
+
: {})}
|
|
518
497
|
/>
|
|
519
498
|
{twoMarkers && (
|
|
520
499
|
<View
|
|
@@ -531,38 +510,54 @@ export default class Slider extends Component {
|
|
|
531
510
|
styles.markerContainer,
|
|
532
511
|
markerContainerOne,
|
|
533
512
|
markerContainerStyle,
|
|
534
|
-
positionOne > sliderLength / 2 &&
|
|
535
|
-
|
|
536
|
-
|
|
513
|
+
positionOne > sliderLength / 2 &&
|
|
514
|
+
styles.topMarkerContainer,
|
|
515
|
+
]}>
|
|
537
516
|
<View
|
|
538
517
|
style={[styles.touch, touchStyle]}
|
|
539
518
|
ref={(component) => (this._markerOne = component)}
|
|
540
|
-
{...this._panResponderOne.panHandlers}
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
519
|
+
{...this._panResponderOne.panHandlers}>
|
|
520
|
+
{isMarkersSeparated === false ? (
|
|
521
|
+
<>
|
|
522
|
+
{onePressed && enableLabel && (
|
|
523
|
+
<View style={styles.valueContainer}>
|
|
524
|
+
<Text>{valueOne}</Text>
|
|
525
|
+
</View>
|
|
526
|
+
)}
|
|
544
527
|
<Marker
|
|
545
528
|
enabled={enabledOne}
|
|
546
529
|
pressed={onePressed}
|
|
547
530
|
markerStyle={markerStyle}
|
|
548
531
|
pressedMarkerStyle={pressedMarkerStyle}
|
|
549
|
-
disabledMarkerStyle={
|
|
532
|
+
disabledMarkerStyle={
|
|
533
|
+
disabledMarkerStyle
|
|
534
|
+
}
|
|
550
535
|
currentValue={valueOne}
|
|
551
536
|
valuePrefix={valuePrefix}
|
|
552
537
|
valueSuffix={valueSuffix}
|
|
553
538
|
/>
|
|
554
|
-
|
|
539
|
+
</>
|
|
540
|
+
) : (
|
|
541
|
+
<>
|
|
542
|
+
{onePressed && enableLabel && (
|
|
543
|
+
<View style={styles.valueContainer}>
|
|
544
|
+
<Text>{valueTwo}</Text>
|
|
545
|
+
</View>
|
|
546
|
+
)}
|
|
555
547
|
<MarkerLeft
|
|
556
548
|
enabled={enabledOne}
|
|
557
549
|
pressed={onePressed}
|
|
558
550
|
markerStyle={markerStyle}
|
|
559
551
|
pressedMarkerStyle={pressedMarkerStyle}
|
|
560
|
-
disabledMarkerStyle={
|
|
552
|
+
disabledMarkerStyle={
|
|
553
|
+
disabledMarkerStyle
|
|
554
|
+
}
|
|
561
555
|
currentValue={valueOne}
|
|
562
556
|
valuePrefix={valuePrefix}
|
|
563
557
|
valueSuffix={valueSuffix}
|
|
564
558
|
/>
|
|
565
|
-
|
|
559
|
+
</>
|
|
560
|
+
)}
|
|
566
561
|
</View>
|
|
567
562
|
</View>
|
|
568
563
|
{twoMarkers && positionOne !== sliderLength && (
|
|
@@ -571,37 +566,58 @@ export default class Slider extends Component {
|
|
|
571
566
|
styles.markerContainer,
|
|
572
567
|
markerContainerTwo,
|
|
573
568
|
markerContainerStyle,
|
|
574
|
-
]}
|
|
575
|
-
>
|
|
569
|
+
]}>
|
|
576
570
|
<View
|
|
577
571
|
style={[styles.touch, touchStyle]}
|
|
578
|
-
ref={(component) =>
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
{
|
|
582
|
-
|
|
572
|
+
ref={(component) =>
|
|
573
|
+
(this._markerTwo = component)
|
|
574
|
+
}
|
|
575
|
+
{...this._panResponderTwo.panHandlers}>
|
|
576
|
+
{isMarkersSeparated === false ? (
|
|
577
|
+
<>
|
|
578
|
+
{twoPressed && enableLabel && (
|
|
579
|
+
<View style={styles.valueContainer}>
|
|
580
|
+
<Text>{valueTwo}</Text>
|
|
581
|
+
</View>
|
|
582
|
+
)}
|
|
583
583
|
<Marker
|
|
584
584
|
pressed={twoPressed}
|
|
585
585
|
markerStyle={markerStyle}
|
|
586
|
-
pressedMarkerStyle={
|
|
587
|
-
|
|
586
|
+
pressedMarkerStyle={
|
|
587
|
+
pressedMarkerStyle
|
|
588
|
+
}
|
|
589
|
+
disabledMarkerStyle={
|
|
590
|
+
disabledMarkerStyle
|
|
591
|
+
}
|
|
588
592
|
currentValue={valueTwo}
|
|
589
593
|
enabled={enabledTwo}
|
|
590
594
|
valuePrefix={valuePrefix}
|
|
591
595
|
valueSuffix={valueSuffix}
|
|
592
596
|
/>
|
|
593
|
-
|
|
597
|
+
</>
|
|
598
|
+
) : (
|
|
599
|
+
<>
|
|
600
|
+
{twoPressed && enableLabel && (
|
|
601
|
+
<View style={styles.valueContainer}>
|
|
602
|
+
<Text>{valueTwo}</Text>
|
|
603
|
+
</View>
|
|
604
|
+
)}
|
|
594
605
|
<MarkerRight
|
|
595
606
|
pressed={twoPressed}
|
|
596
607
|
markerStyle={markerStyle}
|
|
597
|
-
pressedMarkerStyle={
|
|
598
|
-
|
|
608
|
+
pressedMarkerStyle={
|
|
609
|
+
pressedMarkerStyle
|
|
610
|
+
}
|
|
611
|
+
disabledMarkerStyle={
|
|
612
|
+
disabledMarkerStyle
|
|
613
|
+
}
|
|
599
614
|
currentValue={valueTwo}
|
|
600
615
|
enabled={enabledTwo}
|
|
601
616
|
valuePrefix={valuePrefix}
|
|
602
617
|
valueSuffix={valueSuffix}
|
|
603
618
|
/>
|
|
604
|
-
|
|
619
|
+
</>
|
|
620
|
+
)}
|
|
605
621
|
</View>
|
|
606
622
|
</View>
|
|
607
623
|
)}
|
|
@@ -611,21 +627,10 @@ export default class Slider extends Component {
|
|
|
611
627
|
|
|
612
628
|
return (
|
|
613
629
|
<View style={style} onLayout={(e) => this.onContentLayout(e)}>
|
|
614
|
-
{enableLabel && (
|
|
615
|
-
<Label
|
|
616
|
-
oneMarkerValue={valueOne}
|
|
617
|
-
twoMarkerValue={valueTwo}
|
|
618
|
-
oneMarkerLeftPosition={positionOne}
|
|
619
|
-
twoMarkerLeftPosition={positionTwo}
|
|
620
|
-
oneMarkerPressed={onePressed}
|
|
621
|
-
twoMarkerPressed={twoPressed}
|
|
622
|
-
/>
|
|
623
|
-
)}
|
|
624
630
|
{imageBackgroundSource && (
|
|
625
631
|
<ImageBackground
|
|
626
632
|
source={imageBackgroundSource}
|
|
627
|
-
style={[styles.full, newContainerStyle]}
|
|
628
|
-
>
|
|
633
|
+
style={[styles.full, newContainerStyle]}>
|
|
629
634
|
{body}
|
|
630
635
|
</ImageBackground>
|
|
631
636
|
)}
|
|
@@ -641,17 +646,18 @@ const styles = StyleSheet.create({
|
|
|
641
646
|
container: {
|
|
642
647
|
position: 'relative',
|
|
643
648
|
height: 50,
|
|
644
|
-
justifyContent: 'center'
|
|
649
|
+
justifyContent: 'center',
|
|
645
650
|
},
|
|
646
651
|
fullTrack: {
|
|
647
652
|
flexDirection: 'row',
|
|
648
653
|
},
|
|
649
654
|
track: {
|
|
650
655
|
height: 4,
|
|
651
|
-
backgroundColor:
|
|
656
|
+
backgroundColor: Colors.black_03,
|
|
657
|
+
borderRadius: 2,
|
|
652
658
|
},
|
|
653
659
|
selectedTrack: {
|
|
654
|
-
backgroundColor: Colors.
|
|
660
|
+
backgroundColor: Colors.pink_05_b,
|
|
655
661
|
},
|
|
656
662
|
markerContainer: {
|
|
657
663
|
position: 'absolute',
|
|
@@ -670,15 +676,33 @@ const styles = StyleSheet.create({
|
|
|
670
676
|
alignItems: 'center',
|
|
671
677
|
alignSelf: 'stretch',
|
|
672
678
|
},
|
|
673
|
-
full: { width: '100%', height: '100%' }
|
|
679
|
+
full: { width: '100%', height: '100%' },
|
|
680
|
+
valueContainer: {
|
|
681
|
+
width: 40,
|
|
682
|
+
height: 32,
|
|
683
|
+
borderRadius: Spacing.S,
|
|
684
|
+
backgroundColor: Colors.white,
|
|
685
|
+
justifyContent: 'center',
|
|
686
|
+
alignItems: 'center',
|
|
687
|
+
position: 'absolute',
|
|
688
|
+
top: -36,
|
|
689
|
+
shadowColor: '#000',
|
|
690
|
+
shadowOffset: {
|
|
691
|
+
width: 0,
|
|
692
|
+
height: 4,
|
|
693
|
+
},
|
|
694
|
+
shadowOpacity: 0.24,
|
|
695
|
+
shadowRadius: 6,
|
|
696
|
+
elevation: 12,
|
|
697
|
+
},
|
|
674
698
|
});
|
|
675
699
|
|
|
676
700
|
Slider.defaultProps = {
|
|
677
701
|
values: [0],
|
|
678
|
-
onChangeStart: () => {
|
|
679
|
-
onChange: () => {
|
|
680
|
-
onChangeFinish: () => {
|
|
681
|
-
onMarkersPosition: () => {
|
|
702
|
+
onChangeStart: () => {},
|
|
703
|
+
onChange: () => {},
|
|
704
|
+
onChangeFinish: () => {},
|
|
705
|
+
onMarkersPosition: () => {},
|
|
682
706
|
step: 1,
|
|
683
707
|
min: 0,
|
|
684
708
|
max: 10,
|
|
@@ -702,7 +726,7 @@ Slider.defaultProps = {
|
|
|
702
726
|
snapped: false,
|
|
703
727
|
vertical: false,
|
|
704
728
|
minMarkerOverlapDistance: 0,
|
|
705
|
-
length: 280
|
|
729
|
+
length: 280,
|
|
706
730
|
};
|
|
707
731
|
|
|
708
732
|
Slider.propTypes = {
|
|
@@ -720,7 +744,10 @@ Slider.propTypes = {
|
|
|
720
744
|
containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
721
745
|
vertical: PropTypes.bool,
|
|
722
746
|
trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
723
|
-
markerContainerStyle: PropTypes.oneOfType([
|
|
747
|
+
markerContainerStyle: PropTypes.oneOfType([
|
|
748
|
+
PropTypes.object,
|
|
749
|
+
PropTypes.array,
|
|
750
|
+
]),
|
|
724
751
|
enabledOne: PropTypes.bool,
|
|
725
752
|
enabledTwo: PropTypes.bool,
|
|
726
753
|
onChangeStart: PropTypes.func,
|
|
@@ -737,5 +764,5 @@ Slider.propTypes = {
|
|
|
737
764
|
snapped: PropTypes.bool,
|
|
738
765
|
minMarkerOverlapDistance: PropTypes.number,
|
|
739
766
|
length: PropTypes.number,
|
|
740
|
-
allowRange: PropTypes.arrayOf(PropTypes.number)
|
|
767
|
+
allowRange: PropTypes.arrayOf(PropTypes.number),
|
|
741
768
|
};
|
package/package.json
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
"name": "@momo-kits/slider",
|
|
3
|
+
"version": "0.0.49-beta.5",
|
|
4
|
+
"private": false,
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"dependencies": {
|
|
7
|
+
"@momo-platform/versions": "4.0.1-40011-32"
|
|
8
|
+
},
|
|
9
|
+
"peerDependencies": {
|
|
10
|
+
"@momo-kits/core": ">=0.0.5-beta",
|
|
11
|
+
"lodash": "^4.17.15",
|
|
12
|
+
"prop-types": "^15.7.2",
|
|
13
|
+
"react": "16.9.0",
|
|
14
|
+
"react-native": ">=0.55"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {},
|
|
17
|
+
"license": "MoMo"
|
|
16
18
|
}
|
package/publish.sh
CHANGED
|
@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js' --exclude 'props-type
|
|
|
21
21
|
#npm login
|
|
22
22
|
#publish dist to npm
|
|
23
23
|
cd dist
|
|
24
|
-
npm publish --access=public
|
|
24
|
+
npm publish --tag beta --access=public
|
|
25
25
|
cd ..
|
|
26
26
|
rm -rf dist
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'
|
|
29
|
+
#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'
|