@momo-kits/slider 0.0.74-beta → 0.73.1-beta.1

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 (9) hide show
  1. package/DefaultLabel.js +63 -66
  2. package/DefaultLabel.web.js +62 -65
  3. package/DefaultMarker.js +58 -63
  4. package/DefaultMarker.web.js +66 -63
  5. package/Slider.js +298 -258
  6. package/Slider.web.js +719 -699
  7. package/converters.js +56 -55
  8. package/package.json +14 -14
  9. package/publish.sh +2 -2
package/DefaultLabel.js CHANGED
@@ -1,86 +1,83 @@
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';
3
+ import {View, StyleSheet} from 'react-native';
4
+ import {Text} from '@momo-kits/core-v2';
5
5
 
6
6
  const sliderRadius = 3;
7
7
  const width = 50;
8
+
8
9
  export default class DefaultLabel extends React.Component {
9
- render() {
10
- const {
11
- oneMarkerValue,
12
- twoMarkerValue,
13
- oneMarkerLeftPosition,
14
- twoMarkerLeftPosition,
15
- oneMarkerPressed,
16
- twoMarkerPressed,
17
- } = this.props;
10
+ render() {
11
+ const {
12
+ oneMarkerValue,
13
+ twoMarkerValue,
14
+ oneMarkerLeftPosition,
15
+ twoMarkerLeftPosition,
16
+ oneMarkerPressed,
17
+ twoMarkerPressed,
18
+ } = this.props;
18
19
 
19
- return (
20
- <View style={{ position: 'relative' }}>
20
+ return (
21
+ <View style={{position: 'relative'}}>
22
+ {Number.isFinite(oneMarkerLeftPosition) &&
23
+ Number.isFinite(oneMarkerValue) && (
24
+ <View
25
+ style={[
26
+ styles.sliderLabel,
21
27
  {
22
- Number.isFinite(oneMarkerLeftPosition)
23
- && Number.isFinite(oneMarkerValue)
24
- && (
25
- <View
26
- style={[
27
- styles.sliderLabel,
28
- { left: oneMarkerLeftPosition - width / 2 + sliderRadius },
29
- oneMarkerPressed && styles.markerPressed,
30
- ]}
31
- >
32
- <Text.SubTitle style={styles.sliderLabelText}>{oneMarkerValue}</Text.SubTitle>
33
- </View>
34
- )
35
- }
28
+ left: oneMarkerLeftPosition - width / 2 + sliderRadius,
29
+ },
30
+ oneMarkerPressed && styles.markerPressed,
31
+ ]}>
32
+ <Text style={styles.sliderLabelText}>{oneMarkerValue}</Text>
33
+ </View>
34
+ )}
36
35
 
36
+ {Number.isFinite(twoMarkerLeftPosition) &&
37
+ Number.isFinite(twoMarkerValue) && (
38
+ <View
39
+ style={[
40
+ styles.sliderLabel,
37
41
  {
38
- Number.isFinite(twoMarkerLeftPosition)
39
- && Number.isFinite(twoMarkerValue)
40
- && (
41
- <View
42
- style={[
43
- styles.sliderLabel,
44
- { left: twoMarkerLeftPosition - width / 2 + sliderRadius },
45
- twoMarkerPressed && styles.markerPressed,
46
- ]}
47
- >
48
- <Text.SubTitle style={styles.sliderLabelText}>{twoMarkerValue}</Text.SubTitle>
49
- </View>
50
- )
51
- }
42
+ left: twoMarkerLeftPosition - width / 2 + sliderRadius,
43
+ },
44
+ twoMarkerPressed && styles.markerPressed,
45
+ ]}>
46
+ <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
52
47
  </View>
53
- );
54
- }
48
+ )}
49
+ </View>
50
+ );
51
+ }
55
52
  }
56
53
 
57
54
  const styles = StyleSheet.create({
58
- sliderLabel: {
59
- position: 'absolute',
60
- bottom: 0,
61
- minWidth: width,
62
- padding: 8,
63
- backgroundColor: '#f1f1f1',
64
- },
65
- sliderLabelText: {
66
- alignItems: 'center',
67
- textAlign: 'center',
68
- fontStyle: 'normal',
69
- // fontSize: 11,
70
- },
71
- markerPressed: {
72
- borderWidth: 2,
73
- borderColor: '#999',
74
- },
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
+ },
75
72
  });
76
73
 
77
74
  DefaultLabel.propTypes = {
78
- oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
79
- twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
75
+ oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
76
+ twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
80
77
 
81
- oneMarkerLeftPosition: PropTypes.number,
82
- twoMarkerLeftPosition: PropTypes.number,
78
+ oneMarkerLeftPosition: PropTypes.number,
79
+ twoMarkerLeftPosition: PropTypes.number,
83
80
 
84
- oneMarkerPressed: PropTypes.bool,
85
- twoMarkerPressed: PropTypes.bool,
81
+ oneMarkerPressed: PropTypes.bool,
82
+ twoMarkerPressed: PropTypes.bool,
86
83
  };
package/DefaultLabel.web.js CHANGED
@@ -1,86 +1,83 @@
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
+
8
9
  export default class DefaultLabel extends React.Component {
9
- render() {
10
- const {
11
- oneMarkerValue,
12
- twoMarkerValue,
13
- oneMarkerLeftPosition,
14
- twoMarkerLeftPosition,
15
- oneMarkerPressed,
16
- twoMarkerPressed,
17
- } = this.props;
10
+ render() {
11
+ const {
12
+ oneMarkerValue,
13
+ twoMarkerValue,
14
+ oneMarkerLeftPosition,
15
+ twoMarkerLeftPosition,
16
+ oneMarkerPressed,
17
+ twoMarkerPressed,
18
+ } = this.props;
18
19
 
19
- return (
20
- <View style={{ position: 'relative' }}>
20
+ return (
21
+ <View style={{position: 'relative'}}>
22
+ {Number.isFinite(oneMarkerLeftPosition) &&
23
+ Number.isFinite(oneMarkerValue) && (
24
+ <View
25
+ style={[
26
+ styles.sliderLabel,
21
27
  {
22
- Number.isFinite(oneMarkerLeftPosition)
23
- && Number.isFinite(oneMarkerValue)
24
- && (
25
- <View
26
- style={[
27
- styles.sliderLabel,
28
- { left: oneMarkerLeftPosition - width / 2 + sliderRadius },
29
- oneMarkerPressed && styles.markerPressed,
30
- ]}
31
- >
32
- <Text.SubTitle style={styles.sliderLabelText}>{oneMarkerValue}</Text.SubTitle>
33
- </View>
34
- )
35
- }
28
+ left: oneMarkerLeftPosition - width / 2 + sliderRadius,
29
+ },
30
+ oneMarkerPressed && styles.markerPressed,
31
+ ]}>
32
+ <Text style={styles.sliderLabelText}>{oneMarkerValue}</Text>
33
+ </View>
34
+ )}
36
35
 
36
+ {Number.isFinite(twoMarkerLeftPosition) &&
37
+ Number.isFinite(twoMarkerValue) && (
38
+ <View
39
+ style={[
40
+ styles.sliderLabel,
37
41
  {
38
- Number.isFinite(twoMarkerLeftPosition)
39
- && Number.isFinite(twoMarkerValue)
40
- && (
41
- <View
42
- style={[
43
- styles.sliderLabel,
44
- { left: twoMarkerLeftPosition - width / 2 + sliderRadius },
45
- twoMarkerPressed && styles.markerPressed,
46
- ]}
47
- >
48
- <Text.SubTitle style={styles.sliderLabelText}>{twoMarkerValue}</Text.SubTitle>
49
- </View>
50
- )
51
- }
42
+ left: twoMarkerLeftPosition - width / 2 + sliderRadius,
43
+ },
44
+ twoMarkerPressed && styles.markerPressed,
45
+ ]}>
46
+ <Text style={styles.sliderLabelText}>{twoMarkerValue}</Text>
52
47
  </View>
53
- );
54
- }
48
+ )}
49
+ </View>
50
+ );
51
+ }
55
52
  }
56
53
 
57
54
  const styles = StyleSheet.create({
58
- sliderLabel: {
59
- position: 'absolute',
60
- bottom: 0,
61
- minWidth: width,
62
- padding: 8,
63
- backgroundColor: '#f1f1f1',
64
- },
65
- sliderLabelText: {
66
- alignItems: 'center',
67
- textAlign: 'center',
68
- fontStyle: 'normal',
69
- // fontSize: 11,
70
- },
71
- markerPressed: {
72
- borderWidth: 2,
73
- borderColor: '#999',
74
- },
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
+ },
75
72
  });
76
73
 
77
74
  DefaultLabel.propTypes = {
78
- oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
79
- twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
75
+ oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
76
+ twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
80
77
 
81
- oneMarkerLeftPosition: PropTypes.number,
82
- twoMarkerLeftPosition: PropTypes.number,
78
+ oneMarkerLeftPosition: PropTypes.number,
79
+ twoMarkerLeftPosition: PropTypes.number,
83
80
 
84
- oneMarkerPressed: PropTypes.bool,
85
- twoMarkerPressed: PropTypes.bool,
81
+ oneMarkerPressed: PropTypes.bool,
82
+ twoMarkerPressed: PropTypes.bool,
86
83
  };
package/DefaultMarker.js CHANGED
@@ -1,72 +1,67 @@
1
1
  import React from 'react';
2
- import {
3
- View, StyleSheet, Platform, TouchableHighlight
4
- } from 'react-native';
5
- import { Colors } from '@momo-kits/core';
2
+ import {Platform, StyleSheet, View} from 'react-native';
3
+ import {Colors, Shadow, TouchableOpacity} from '@momo-kits/core-v2';
4
+
5
+ // import {Radius} from '../../core';
6
6
 
7
7
  class DefaultMarker extends React.Component {
8
- render() {
9
- const {
10
- enabled,
11
- markerStyle,
12
- pressed,
13
- pressedMarkerStyle,
14
- disabledMarkerStyle
15
- } = this.props;
16
- return (
17
- <TouchableHighlight>
18
- <View
19
- style={
20
- enabled
21
- ? [
22
- styles.markerStyle,
23
- markerStyle,
24
- pressed && styles.pressedMarkerStyle,
25
- pressed && pressedMarkerStyle,
26
- ]
27
- : [
28
- styles.markerStyle,
29
- styles.disabled,
30
- disabledMarkerStyle,
31
- ]
32
- }
33
- />
34
- </TouchableHighlight>
35
- );
36
- }
8
+ render() {
9
+ const {
10
+ enabled,
11
+ markerStyle,
12
+ pressed,
13
+ pressedMarkerStyle,
14
+ disabledMarkerStyle,
15
+ activeColor,
16
+ } = this.props;
17
+ return (
18
+ <TouchableOpacity>
19
+ <View
20
+ style={
21
+ enabled
22
+ ? [
23
+ styles.markerStyle,
24
+ Shadow.Dark,
25
+ markerStyle,
26
+ pressed && styles.pressedMarkerStyle,
27
+ pressed && pressedMarkerStyle,
28
+ {backgroundColor: activeColor},
29
+ ]
30
+ : [
31
+ Shadow.Dark,
32
+ styles.markerStyle,
33
+ styles.disabled,
34
+ disabledMarkerStyle,
35
+ ]
36
+ }
37
+ />
38
+ </TouchableOpacity>
39
+ );
40
+ }
37
41
  }
38
42
 
39
43
  const styles = StyleSheet.create({
40
- markerStyle: {
41
- height: 24,
42
- width: 24,
43
- borderRadius: 12,
44
- borderWidth: 2,
45
- borderColor: Colors.pink_03,
46
- backgroundColor: '#FFFFFF',
47
- shadowColor: '#000000',
48
- shadowOffset: {
49
- width: 0,
50
- height: 3,
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',
69
- },
44
+ markerStyle: {
45
+ height: 20,
46
+ width: 20,
47
+ borderRadius: 10,
48
+ borderWidth: 4,
49
+ borderColor: Colors.white,
50
+ },
51
+ pressedMarkerStyle: {
52
+ ...Platform.select({
53
+ web: {},
54
+ ios: {},
55
+ android: {
56
+ height: 20,
57
+ width: 20,
58
+ borderRadius: 20,
59
+ },
60
+ }),
61
+ },
62
+ disabled: {
63
+ backgroundColor: Colors.black_09,
64
+ },
70
65
  });
71
66
 
72
67
  export default DefaultMarker;
package/DefaultMarker.web.js CHANGED
@@ -1,72 +1,75 @@
1
1
  import React from 'react';
2
- import {
3
- View, StyleSheet, Platform, TouchableHighlight
4
- } from 'react-native';
5
- import Colors from '../../core/colors';
2
+ import {View, StyleSheet, Platform, TouchableOpacity} from 'react-native';
3
+ import Colors from '../../core-v2/colors';
4
+ import Shadow from '../../core-v2/shadow';
6
5
 
7
6
  class DefaultMarker extends React.Component {
8
- render() {
9
- const {
10
- enabled,
11
- markerStyle,
12
- pressed,
13
- pressedMarkerStyle,
14
- disabledMarkerStyle
15
- } = this.props;
16
- return (
17
- <TouchableHighlight>
18
- <View
19
- style={
20
- enabled
21
- ? [
22
- styles.markerStyle,
23
- markerStyle,
24
- pressed && styles.pressedMarkerStyle,
25
- pressed && pressedMarkerStyle,
26
- ]
27
- : [
28
- styles.markerStyle,
29
- styles.disabled,
30
- disabledMarkerStyle,
31
- ]
32
- }
33
- />
34
- </TouchableHighlight>
35
- );
36
- }
7
+ render() {
8
+ const {
9
+ enabled,
10
+ markerStyle,
11
+ pressed,
12
+ pressedMarkerStyle,
13
+ disabledMarkerStyle,
14
+ activeColor,
15
+ } = this.props;
16
+ return (
17
+ <TouchableOpacity>
18
+ <View
19
+ style={
20
+ enabled
21
+ ? [
22
+ styles.markerStyle,
23
+
24
+ markerStyle,
25
+ pressed && styles.pressedMarkerStyle,
26
+ 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
+ ]
44
+ }
45
+ />
46
+ </TouchableOpacity>
47
+ );
48
+ }
37
49
  }
38
50
 
39
51
  const styles = StyleSheet.create({
40
- markerStyle: {
41
- height: 24,
42
- width: 24,
43
- borderRadius: 12,
44
- borderWidth: 2,
45
- borderColor: Colors.pink_03,
46
- backgroundColor: '#FFFFFF',
47
- shadowColor: '#000000',
48
- shadowOffset: {
49
- width: 0,
50
- height: 3,
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',
69
- },
52
+ markerStyle: {
53
+ height: 20,
54
+ width: 20,
55
+ borderRadius: 10,
56
+ borderWidth: 4,
57
+ borderColor: Colors.white,
58
+ },
59
+ pressedMarkerStyle: {
60
+ ...Platform.select({
61
+ web: {},
62
+ ios: {},
63
+ android: {
64
+ height: 20,
65
+ width: 20,
66
+ borderRadius: 20,
67
+ },
68
+ }),
69
+ },
70
+ disabled: {
71
+ backgroundColor: Colors.black_09,
72
+ },
70
73
  });
71
74
 
72
75
  export default DefaultMarker;