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