@momo-kits/slider 0.0.65-alpha.20 → 0.0.65-alpha.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/DefaultLabel.js +74 -65
  2. package/DefaultLabel.web.js +73 -64
  3. package/DefaultMarker.js +25 -19
  4. package/DefaultMarker.web.js +19 -28
  5. package/Slider.js +153 -133
  6. package/Slider.web.js +699 -719
  7. package/converters.js +56 -56
  8. package/package.json +2 -2
package/DefaultLabel.js CHANGED
@@ -1,83 +1,92 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import {View, StyleSheet} from 'react-native';
4
- import {Text} from '@momo-kits/core-v2';
3
+ import { View, StyleSheet } from 'react-native';
4
+ import { Text } from '@momo-kits/core';
5
5
 
6
6
  const sliderRadius = 3;
7
7
  const width = 50;
8
-
9
8
  export default class DefaultLabel extends React.Component {
10
- render() {
11
- const {
12
- oneMarkerValue,
13
- twoMarkerValue,
14
- oneMarkerLeftPosition,
15
- twoMarkerLeftPosition,
16
- oneMarkerPressed,
17
- twoMarkerPressed,
18
- } = this.props;
9
+ render() {
10
+ const {
11
+ oneMarkerValue,
12
+ twoMarkerValue,
13
+ oneMarkerLeftPosition,
14
+ twoMarkerLeftPosition,
15
+ oneMarkerPressed,
16
+ twoMarkerPressed,
17
+ } = this.props;
19
18
 
20
- return (
21
- <View style={{position: 'relative'}}>
22
- {Number.isFinite(oneMarkerLeftPosition) &&
23
- Number.isFinite(oneMarkerValue) && (
24
- <View
25
- style={[
26
- styles.sliderLabel,
27
- {
28
- left: oneMarkerLeftPosition - width / 2 + sliderRadius,
29
- },
30
- oneMarkerPressed && styles.markerPressed,
31
- ]}>
32
- <Text style={styles.sliderLabelText}>{oneMarkerValue}</Text>
33
- </View>
34
- )}
19
+ return (
20
+ <View style={{ position: 'relative' }}>
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
+ )}
35
39
 
36
- {Number.isFinite(twoMarkerLeftPosition) &&
37
- Number.isFinite(twoMarkerValue) && (
38
- <View
39
- style={[
40
- styles.sliderLabel,
41
- {
42
- left: twoMarkerLeftPosition - width / 2 + sliderRadius,
43
- },
44
- twoMarkerPressed && styles.markerPressed,
45
- ]}>
46
- <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
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
+ )}
47
58
  </View>
48
- )}
49
- </View>
50
- );
51
- }
59
+ );
60
+ }
52
61
  }
53
62
 
54
63
  const styles = StyleSheet.create({
55
- sliderLabel: {
56
- position: 'absolute',
57
- bottom: 0,
58
- minWidth: width,
59
- padding: 8,
60
- backgroundColor: '#f1f1f1',
61
- },
62
- sliderLabelText: {
63
- alignItems: 'center',
64
- textAlign: 'center',
65
- fontStyle: 'normal',
66
- // fontSize: 11,
67
- },
68
- markerPressed: {
69
- borderWidth: 2,
70
- borderColor: '#999',
71
- },
64
+ sliderLabel: {
65
+ position: 'absolute',
66
+ bottom: 0,
67
+ minWidth: width,
68
+ padding: 8,
69
+ backgroundColor: '#f1f1f1',
70
+ },
71
+ sliderLabelText: {
72
+ alignItems: 'center',
73
+ textAlign: 'center',
74
+ fontStyle: 'normal',
75
+ // fontSize: 11,
76
+ },
77
+ markerPressed: {
78
+ borderWidth: 2,
79
+ borderColor: '#999',
80
+ },
72
81
  });
73
82
 
74
83
  DefaultLabel.propTypes = {
75
- oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
76
- twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
84
+ oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
85
+ twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
77
86
 
78
- oneMarkerLeftPosition: PropTypes.number,
79
- twoMarkerLeftPosition: PropTypes.number,
87
+ oneMarkerLeftPosition: PropTypes.number,
88
+ twoMarkerLeftPosition: PropTypes.number,
80
89
 
81
- oneMarkerPressed: PropTypes.bool,
82
- twoMarkerPressed: PropTypes.bool,
90
+ oneMarkerPressed: PropTypes.bool,
91
+ twoMarkerPressed: PropTypes.bool,
83
92
  };
package/DefaultLabel.web.js CHANGED
@@ -1,83 +1,92 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import {View, StyleSheet} from 'react-native';
3
+ import { View, StyleSheet } from 'react-native';
4
4
  import Text from '../../core/components/typography';
5
5
 
6
6
  const sliderRadius = 3;
7
7
  const width = 50;
8
-
9
8
  export default class DefaultLabel extends React.Component {
10
- render() {
11
- const {
12
- oneMarkerValue,
13
- twoMarkerValue,
14
- oneMarkerLeftPosition,
15
- twoMarkerLeftPosition,
16
- oneMarkerPressed,
17
- twoMarkerPressed,
18
- } = this.props;
9
+ render() {
10
+ const {
11
+ oneMarkerValue,
12
+ twoMarkerValue,
13
+ oneMarkerLeftPosition,
14
+ twoMarkerLeftPosition,
15
+ oneMarkerPressed,
16
+ twoMarkerPressed,
17
+ } = this.props;
19
18
 
20
- return (
21
- <View style={{position: 'relative'}}>
22
- {Number.isFinite(oneMarkerLeftPosition) &&
23
- Number.isFinite(oneMarkerValue) && (
24
- <View
25
- style={[
26
- styles.sliderLabel,
27
- {
28
- left: oneMarkerLeftPosition - width / 2 + sliderRadius,
29
- },
30
- oneMarkerPressed && styles.markerPressed,
31
- ]}>
32
- <Text style={styles.sliderLabelText}>{oneMarkerValue}</Text>
33
- </View>
34
- )}
19
+ return (
20
+ <View style={{ position: 'relative' }}>
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
+ )}
35
39
 
36
- {Number.isFinite(twoMarkerLeftPosition) &&
37
- Number.isFinite(twoMarkerValue) && (
38
- <View
39
- style={[
40
- styles.sliderLabel,
41
- {
42
- left: twoMarkerLeftPosition - width / 2 + sliderRadius,
43
- },
44
- twoMarkerPressed && styles.markerPressed,
45
- ]}>
46
- <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
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
+ )}
47
58
  </View>
48
- )}
49
- </View>
50
- );
51
- }
59
+ );
60
+ }
52
61
  }
53
62
 
54
63
  const styles = StyleSheet.create({
55
- sliderLabel: {
56
- position: 'absolute',
57
- bottom: 0,
58
- minWidth: width,
59
- padding: 8,
60
- backgroundColor: '#f1f1f1',
61
- },
62
- sliderLabelText: {
63
- alignItems: 'center',
64
- textAlign: 'center',
65
- fontStyle: 'normal',
66
- // fontSize: 11,
67
- },
68
- markerPressed: {
69
- borderWidth: 2,
70
- borderColor: '#999',
71
- },
64
+ sliderLabel: {
65
+ position: 'absolute',
66
+ bottom: 0,
67
+ minWidth: width,
68
+ padding: 8,
69
+ backgroundColor: '#f1f1f1',
70
+ },
71
+ sliderLabelText: {
72
+ alignItems: 'center',
73
+ textAlign: 'center',
74
+ fontStyle: 'normal',
75
+ // fontSize: 11,
76
+ },
77
+ markerPressed: {
78
+ borderWidth: 2,
79
+ borderColor: '#999',
80
+ },
72
81
  });
73
82
 
74
83
  DefaultLabel.propTypes = {
75
- oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
76
- twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
84
+ oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
85
+ twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
77
86
 
78
- oneMarkerLeftPosition: PropTypes.number,
79
- twoMarkerLeftPosition: PropTypes.number,
87
+ oneMarkerLeftPosition: PropTypes.number,
88
+ twoMarkerLeftPosition: PropTypes.number,
80
89
 
81
- oneMarkerPressed: PropTypes.bool,
82
- twoMarkerPressed: PropTypes.bool,
90
+ oneMarkerPressed: PropTypes.bool,
91
+ twoMarkerPressed: PropTypes.bool,
83
92
  };
package/DefaultMarker.js CHANGED
@@ -1,7 +1,12 @@
1
1
  import React from 'react';
2
- import {Platform, StyleSheet, View} from 'react-native';
3
- import {Colors, Shadow, TouchableOpacity} from '@momo-kits/core-v2';
4
-
2
+ import {
3
+ View,
4
+ StyleSheet,
5
+ Platform,
6
+ TouchableHighlight,
7
+ Text,
8
+ } from 'react-native';
9
+ import {Colors, Radius} from '@momo-kits/core';
5
10
  // import {Radius} from '../../core';
6
11
 
7
12
  class DefaultMarker extends React.Component {
@@ -12,41 +17,42 @@ class DefaultMarker extends React.Component {
12
17
  pressed,
13
18
  pressedMarkerStyle,
14
19
  disabledMarkerStyle,
15
- activeColor,
16
20
  } = this.props;
17
21
  return (
18
- <TouchableOpacity>
22
+ <TouchableHighlight>
19
23
  <View
20
24
  style={
21
25
  enabled
22
26
  ? [
23
27
  styles.markerStyle,
24
- Shadow.Dark,
25
28
  markerStyle,
26
29
  pressed && styles.pressedMarkerStyle,
27
30
  pressed && pressedMarkerStyle,
28
- {backgroundColor: activeColor},
29
- ]
30
- : [
31
- Shadow.Dark,
32
- styles.markerStyle,
33
- styles.disabled,
34
- disabledMarkerStyle,
35
31
  ]
32
+ : [styles.markerStyle, styles.disabled, disabledMarkerStyle]
36
33
  }
37
34
  />
38
- </TouchableOpacity>
35
+ </TouchableHighlight>
39
36
  );
40
37
  }
41
38
  }
42
39
 
43
40
  const styles = StyleSheet.create({
44
41
  markerStyle: {
45
- height: 20,
46
- width: 20,
47
- borderRadius: 10,
48
- borderWidth: 4,
42
+ height: 24,
43
+ width: 24,
44
+ borderRadius: 12,
45
+ borderWidth: 5,
49
46
  borderColor: Colors.white,
47
+ backgroundColor: Colors.pink_05_b,
48
+ shadowColor: '#000',
49
+ shadowOffset: {
50
+ width: 0,
51
+ height: 4,
52
+ },
53
+ shadowOpacity: 0.3,
54
+ shadowRadius: 4.65,
55
+ elevation: 8,
50
56
  },
51
57
  pressedMarkerStyle: {
52
58
  ...Platform.select({
@@ -60,7 +66,7 @@ const styles = StyleSheet.create({
60
66
  }),
61
67
  },
62
68
  disabled: {
63
- backgroundColor: Colors.black_09,
69
+ backgroundColor: '#d3d3d3',
64
70
  },
65
71
  });
66
72
 
package/DefaultMarker.web.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
- import {View, StyleSheet, Platform, TouchableOpacity} from 'react-native';
3
- import Colors from '../../core-v2/colors';
4
- import Shadow from '../../core-v2/shadow';
2
+ import {View, StyleSheet, Platform, TouchableHighlight} from 'react-native';
3
+ import Colors from '../../core/colors';
5
4
 
6
5
  class DefaultMarker extends React.Component {
7
6
  render() {
@@ -11,50 +10,42 @@ class DefaultMarker extends React.Component {
11
10
  pressed,
12
11
  pressedMarkerStyle,
13
12
  disabledMarkerStyle,
14
- activeColor,
15
13
  } = this.props;
16
14
  return (
17
- <TouchableOpacity>
15
+ <TouchableHighlight>
18
16
  <View
19
17
  style={
20
18
  enabled
21
19
  ? [
22
20
  styles.markerStyle,
23
-
24
21
  markerStyle,
25
22
  pressed && styles.pressedMarkerStyle,
26
23
  pressed && pressedMarkerStyle,
27
- {
28
- backgroundColor: activeColor,
29
- shadowColor: Colors.black_17,
30
- shadowOffset: {
31
- width: 2,
32
- height: 2,
33
- },
34
- shadowOpacity: 0.25,
35
- shadowRadius: 10,
36
- },
37
- ]
38
- : [
39
- Shadow.Dark,
40
- styles.markerStyle,
41
- styles.disabled,
42
- disabledMarkerStyle,
43
24
  ]
25
+ : [styles.markerStyle, styles.disabled, disabledMarkerStyle]
44
26
  }
45
27
  />
46
- </TouchableOpacity>
28
+ </TouchableHighlight>
47
29
  );
48
30
  }
49
31
  }
50
32
 
51
33
  const styles = StyleSheet.create({
52
34
  markerStyle: {
53
- height: 20,
54
- width: 20,
55
- borderRadius: 10,
56
- borderWidth: 4,
35
+ height: 24,
36
+ width: 24,
37
+ borderRadius: 12,
38
+ borderWidth: 5,
57
39
  borderColor: Colors.white,
40
+ backgroundColor: Colors.pink_05_b,
41
+ shadowColor: '#000',
42
+ shadowOffset: {
43
+ width: 0,
44
+ height: 4,
45
+ },
46
+ shadowOpacity: 0.3,
47
+ shadowRadius: 4.65,
48
+ elevation: 8,
58
49
  },
59
50
  pressedMarkerStyle: {
60
51
  ...Platform.select({
@@ -68,7 +59,7 @@ const styles = StyleSheet.create({
68
59
  }),
69
60
  },
70
61
  disabled: {
71
- backgroundColor: Colors.black_09,
62
+ backgroundColor: '#d3d3d3',
72
63
  },
73
64
  });
74
65