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