@momo-kits/stepper 0.0.18-beta-2 → 0.0.20

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 (3) hide show
  1. package/Stepper.js +236 -275
  2. package/Stepper.web.js +232 -273
  3. package/package.json +4 -4
package/Stepper.js CHANGED
@@ -1,317 +1,278 @@
1
- import React, {Component} from 'react';
2
- import {View, StyleSheet, TextInput} from 'react-native';
1
+ import React, { Component } from 'react';
2
+ import {
3
+ View, StyleSheet, TextInput
4
+ } from 'react-native';
3
5
  import PropTypes from 'prop-types';
4
- import {Text, Colors, Image, TouchableOpacity} from '@momo-kits/core';
6
+ import {
7
+ Text, Colors, Image, TouchableOpacity, ScaleSize
8
+ } from '@momo-kits/core';
5
9
 
6
- const minus =
7
- 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
8
- const plus =
9
- 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';
10
+ const minus = 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
11
+ const plus = 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';
10
12
 
11
13
  const styles = StyleSheet.create({
12
- container: {
13
- flexDirection: 'row',
14
- },
15
- icon: {
16
- height: 24,
17
- width: 24,
18
- resizeMode: 'contain',
19
- tintColor: Colors.pink_03,
20
- },
21
- text: {
22
- color: Colors.black_17,
23
- },
24
- numberBox: {
25
- justifyContent: 'center',
26
- alignItems: 'center',
27
- marginHorizontal: 6,
28
- backgroundColor: Colors.white,
29
- },
30
- button: {
31
- justifyContent: 'center',
32
- alignItems: 'center',
33
- backgroundColor: Colors.white,
34
- borderColor: 'transparent',
35
- },
36
- borderBox: {
37
- borderColor: Colors.black_04,
38
- borderWidth: 1,
39
- borderRadius: 6,
40
- },
41
- disabledIcon: {
42
- tintColor: Colors.black_09,
43
- },
44
- disabledBox: {
45
- borderColor: Colors.black_03,
46
- backgroundColor: Colors.black_03,
47
- },
48
- });
49
-
50
- const getStyle = type => {
51
- const objStyle = {
52
- large: {
53
- size: {
54
- ...styles.borderBox,
55
- width: 32, // height: 26
56
- },
57
- icon: {
58
- width: 24,
59
- height: 24,
60
- resizeMode: 'contain',
61
- },
62
- text: 'Title',
14
+ container: {
15
+ flexDirection: 'row',
63
16
  },
64
- medium: {
65
- size: {
66
- ...styles.borderBox,
67
- width: 28, // height: 24
68
- },
69
- icon: {
70
- width: 24,
17
+ icon: {
71
18
  height: 24,
19
+ width: 24,
72
20
  resizeMode: 'contain',
73
- },
74
- text: 'SubTitle',
21
+ tintColor: Colors.pink_03,
75
22
  },
76
- small: {
77
- size: {
78
- ...styles.borderBox,
79
- width: 20, // height: 16
80
- },
81
- icon: {
82
- width: 16,
83
- height: 16,
84
- resizeMode: 'contain',
85
- },
86
- text: 'Caption',
23
+ text: {
24
+ color: Colors.black_17
87
25
  },
88
- };
89
- return objStyle[type] || objStyle.medium;
90
- };
91
-
92
- const getSize = type => {
93
- const objStyle = {
94
- large: {
95
- size: {
96
- width: 32,
97
- height: 24, // height: 26
98
- },
26
+ numberBox: {
27
+ justifyContent: 'center',
28
+ alignItems: 'center',
29
+ marginHorizontal: 6,
30
+ backgroundColor: Colors.white,
31
+ },
32
+ button: {
33
+ justifyContent: 'center',
34
+ alignItems: 'center',
35
+ backgroundColor: Colors.white,
36
+ borderColor: 'transparent'
99
37
  },
100
- medium: {
101
- size: {
102
- width: 28,
103
- height: 24, // height: 24
104
- },
38
+ borderBox: {
39
+ borderColor: Colors.black_04, borderWidth: 1, borderRadius: 6
105
40
  },
106
- small: {
107
- size: {
108
- width: 20,
109
- height: 16, // height: 16
110
- },
41
+ disabledIcon: {
42
+ tintColor: Colors.black_09,
111
43
  },
112
- };
113
- return objStyle[type] || objStyle.medium;
44
+ disabledBox: {
45
+ borderColor: Colors.black_03, backgroundColor: Colors.black_03
46
+ }
47
+ });
48
+
49
+ const getStyle = (type) => {
50
+ const objStyle = {
51
+ large: {
52
+ size: {
53
+ ...styles.borderBox, width: 32, // height: 26
54
+ },
55
+ icon: {
56
+ width: 24, height: 24, resizeMode: 'contain'
57
+ },
58
+ text: 'Title'
59
+ },
60
+ medium: {
61
+ size: {
62
+ ...styles.borderBox, width: 28, // height: 24
63
+ },
64
+ icon: {
65
+ width: 24, height: 24, resizeMode: 'contain'
66
+ },
67
+ text: 'SubTitle'
68
+ },
69
+ small: {
70
+ size: {
71
+ ...styles.borderBox, width: 20, // height: 16
72
+ },
73
+ icon: {
74
+ width: 16, height: 16, resizeMode: 'contain'
75
+ },
76
+ text: 'Caption'
77
+ }
78
+
79
+ };
80
+ return objStyle[type] || objStyle.medium;
114
81
  };
115
82
 
116
- export default class Quantity extends Component {
117
- constructor(props) {
118
- super(props);
119
- this.state = {
120
- value: props.defaultValue || props.min,
121
- ownUpdate: false,
83
+ const getSize = (type) => {
84
+ const objStyle = {
85
+ large: {
86
+ size: {
87
+ width: 32,height: 24, fontSize: ScaleSize(14) // height: 26
88
+ },
89
+ },
90
+ medium: {
91
+ size: {
92
+ width: 28, height: 24, fontSize: ScaleSize(12)// height: 24
93
+ },
94
+ },
95
+ small: {
96
+ size: {
97
+ width: 20, height: 16, fontSize: ScaleSize(10)// height: 16
98
+ },
99
+ }
100
+
122
101
  };
123
- }
102
+ return objStyle[type] || objStyle.medium;
103
+ };
124
104
 
125
- static getDerivedStateFromProps(nextProps, prevState) {
126
- const {value = undefined} = this?.props || {};
127
- if (prevState.ownUpdate) {
128
- return {
129
- ownUpdate: false,
130
- };
105
+
106
+ export default class Quantity extends Component {
107
+ constructor(props) {
108
+ super(props);
109
+ this.state = {
110
+ value: props.defaultValue || props.min,
111
+ ownUpdate: false
112
+ };
131
113
  }
132
- if (nextProps.value !== value && nextProps.value !== prevState.value) {
133
- return {value: nextProps.value};
114
+
115
+ static getDerivedStateFromProps(nextProps, prevState) {
116
+ const { value = undefined } = this?.props || {};
117
+ if (prevState.ownUpdate) {
118
+ return {
119
+ ownUpdate: false,
120
+ };
121
+ } if (nextProps.value !== value && nextProps.value !== prevState.value) {
122
+ return { value: nextProps.value };
123
+ }
124
+ return null;
134
125
  }
135
- return null;
136
- }
137
126
 
138
- onChangeValue = (value, type) => {
139
- const {onChange} = this.props;
140
- return onChange && typeof onChange === 'function' && onChange(value, type);
141
- };
127
+ onChangeValue = (value, type) => {
128
+ const { onChange } = this.props;
129
+ return onChange && typeof onChange === 'function' && onChange(value, type);
130
+ }
142
131
 
143
- getValue = (key, step) => {
144
- const {isIncreaseValue, isDecreaseValue} = this.props;
145
- const value = {
146
- increase: isIncreaseValue ? step : 0,
147
- decrease: isDecreaseValue ? step : 0,
132
+ getValue = (key) => {
133
+ const { isIncreaseValue, isDecreaseValue } = this.props;
134
+ const value = {
135
+ increase: isIncreaseValue ? 1 : 0,
136
+ decrease: isDecreaseValue ? 1 : 0,
137
+ };
138
+ return value[key];
148
139
  };
149
- return value[key];
150
- };
151
140
 
152
- setValue = (newValue = 0, type) => {
153
- const {isInput, isIncreaseValue, max, min} = this.props;
154
- const onValue = (newValue, type) => {
155
- this.setState(
156
- {
157
- value: newValue,
158
- ownUpdate: true,
159
- },
160
- () => {
161
- this.onChangeValue(newValue, type);
162
- },
163
- );
164
- };
141
+ setValue = (newValue = 0, type) => {
142
+ const { isInput, isIncreaseValue, max, min } = this.props;
143
+ const onValue = (newValue, type) => {
144
+ this.setState({
145
+ value: newValue,
146
+ ownUpdate: true,
147
+ }, () => {
148
+ this.onChangeValue(newValue, type);
149
+ });
150
+ };
165
151
 
166
- if (isInput) {
167
- if (newValue <= max && isIncreaseValue && newValue >= min) {
168
- onValue(newValue, type);
169
- }
170
- } else {
171
- onValue(newValue, type);
152
+ if(isInput){
153
+ if((newValue <= max && isIncreaseValue) && (newValue >= min)){
154
+ onValue(newValue, type)
155
+ }
156
+ }else {
157
+ onValue(newValue, type)
158
+ }
172
159
  }
173
- };
174
160
 
175
- onPress =
176
- (isIncrease = true, step) =>
177
- () => {
178
- const {isChangeValue, onConditionCheck} = this.props;
179
- const {value} = this.state;
180
- const type = isIncrease ? 'increase' : 'decrease';
181
- if (isChangeValue) {
182
- const newValue = isIncrease
183
- ? value + this.getValue('increase', step)
184
- : value - this.getValue('decrease', step);
185
- if (typeof onConditionCheck === 'function') {
186
- const passCondition = onConditionCheck(newValue, type);
187
- if (passCondition) {
188
- this.setValue(newValue, type);
189
- }
161
+ onPress = (isIncrease = true) => () => {
162
+ const { isChangeValue, onConditionCheck } = this.props;
163
+ const { value } = this.state;
164
+ const type = isIncrease ? 'increase' : 'decrease';
165
+ if (isChangeValue) {
166
+ const newValue = isIncrease ? value + this.getValue('increase') : value - this.getValue('decrease');
167
+ if (typeof onConditionCheck === 'function') {
168
+ const passCondition = onConditionCheck(newValue, type);
169
+ if (passCondition) {
170
+ this.setValue(newValue, type);
171
+ }
172
+ } else {
173
+ this.setValue(newValue, type);
174
+ }
190
175
  } else {
191
- this.setValue(newValue, type);
176
+ this.onChangeValue(value, type);
192
177
  }
193
- } else {
194
- this.onChangeValue(value, type);
195
- }
196
178
  };
197
179
 
198
- render() {
199
- const {value} = this.state;
200
- const {
201
- style,
202
- max,
203
- valueStyle,
204
- size,
205
- tintColor,
206
- isIncreaseValue,
207
- isSingle,
208
- iconStyle,
209
- isInput,
210
- disabled,
211
- step,
212
- } = this.props;
213
- const {min} = this.props || 1;
214
- if (isSingle && value === 0) {
215
- return (
216
- <View style={[styles.container, style]}>
217
- <IconButton
218
- tintColor={tintColor}
219
- size={size}
220
- disabled={value >= max || !isIncreaseValue}
221
- onPress={this.onPress(true, step)}
222
- icon={plus}
223
- />
224
- </View>
225
- );
180
+ render() {
181
+ const { value } = this.state;
182
+ const {
183
+ style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle, isInput
184
+ } = this.props;
185
+ const { min } = this.props || 1;
186
+ if (isSingle && value === 0) {
187
+ return (
188
+ <View style={[styles.container, style]}>
189
+ <IconButton
190
+ tintColor={tintColor}
191
+ size={size}
192
+ disabled={(value >= max || !isIncreaseValue)}
193
+ onPress={this.onPress(true)}
194
+ icon={plus}
195
+ />
196
+ </View>
197
+ );
198
+ }
199
+ const TextComp = Text[getStyle(size).text];
200
+ return (
201
+ <View style={[styles.container, style]}>
202
+ <IconButton
203
+ style={iconStyle}
204
+ tintColor={tintColor}
205
+ size={size}
206
+ disabled={value === min}
207
+ onPress={this.onPress(false)}
208
+ icon={minus}
209
+ />
210
+ <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
211
+ {
212
+ isInput ? <TextInput
213
+ style={[{textAlignVertical: 'center', padding: 0}, getSize(size).size]}
214
+ underlineColorAndroid="transparent"
215
+ value={value.toString()}
216
+ textAlign='center'
217
+ maxLength={3}
218
+ keyboardType='number-pad'
219
+ onChangeText={(text) => this.setValue(text)}/> : <TextComp weight="bold" style={styles.text}>{value}</TextComp>
220
+ }
221
+ </View>
222
+ <IconButton
223
+ tintColor={tintColor}
224
+ style={iconStyle}
225
+ size={size}
226
+ disabled={(value >= max || !isIncreaseValue)}
227
+ onPress={this.onPress(true)}
228
+ icon={plus}
229
+ />
230
+ </View>
231
+ );
226
232
  }
227
- const TextComp = Text[getStyle(size).text];
228
- return (
229
- <View style={[styles.container, style]}>
230
- <IconButton
231
- style={iconStyle}
232
- tintColor={tintColor}
233
- size={size}
234
- disabled={value === min || disabled}
235
- onPress={this.onPress(false, step)}
236
- icon={minus}
237
- />
238
- <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
239
- {isInput ? (
240
- <TextInput
241
- style={[{textAlignVertical: 'center'}, getSize(size).size]}
242
- underlineColorAndroid="transparent"
243
- value={value.toString()}
244
- textAlign="center"
245
- maxLength={3}
246
- keyboardType="number-pad"
247
- editable={!disabled}
248
- onChangeText={text => this.setValue(text)}
249
- />
250
- ) : (
251
- <TextComp weight="bold" style={styles.text}>
252
- {value}
253
- </TextComp>
254
- )}
255
- </View>
256
- <IconButton
257
- tintColor={tintColor}
258
- style={iconStyle}
259
- size={size}
260
- disabled={value >= max || !isIncreaseValue || disabled}
261
- onPress={this.onPress(true, step)}
262
- icon={plus}
263
- />
264
- </View>
265
- );
266
- }
267
233
  }
268
234
 
269
- const IconButton = ({disabled, onPress, icon, size, tintColor, style}) => (
270
- <TouchableOpacity
271
- style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
235
+ const IconButton = ({
236
+ disabled, onPress, icon, size, tintColor, style
237
+ }) => (
238
+ <TouchableOpacity
239
+ style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
272
240
  disabled={disabled}
273
- onPress={onPress}>
241
+ onPress={onPress}
242
+ >
274
243
  <Image
275
- source={icon}
276
- style={[
277
- getStyle(size).icon,
278
- {tintColor},
279
- disabled && styles.disabledIcon,
280
- ]}
244
+ source={icon}
245
+ style={[getStyle(size).icon, { tintColor }, disabled && styles.disabledIcon]}
281
246
  />
282
- </TouchableOpacity>
247
+ </TouchableOpacity>
283
248
  );
284
249
 
285
250
  Quantity.propTypes = {
286
- size: PropTypes.oneOf(['large', 'medium', 'small']),
287
- style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
288
- valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
289
- min: PropTypes.number,
290
- max: PropTypes.number,
291
- value: PropTypes.number,
292
- defaultValue: PropTypes.number,
293
- onChange: PropTypes.func,
294
- isChangeValue: PropTypes.bool,
295
- isIncreaseValue: PropTypes.bool,
296
- isDecreaseValue: PropTypes.bool,
297
- isSingle: PropTypes.bool,
298
- disabled: PropTypes.bool,
299
- tintColor: PropTypes.string,
300
- iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
301
- isInput: PropTypes.bool,
302
- step: PropTypes.number,
251
+ size: PropTypes.oneOf(['large', 'medium', 'small']),
252
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
253
+ valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
254
+ min: PropTypes.number,
255
+ max: PropTypes.number,
256
+ value: PropTypes.number,
257
+ defaultValue: PropTypes.number,
258
+ onChange: PropTypes.func,
259
+ isChangeValue: PropTypes.bool,
260
+ isIncreaseValue: PropTypes.bool,
261
+ isDecreaseValue: PropTypes.bool,
262
+ isSingle: PropTypes.bool,
263
+ tintColor: PropTypes.string,
264
+ iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
265
+ isInput: PropTypes.bool,
303
266
  };
304
267
 
305
268
  Quantity.defaultProps = {
306
- min: 1,
307
- max: 100,
308
- isChangeValue: true,
309
- isIncreaseValue: true,
310
- isDecreaseValue: true,
311
- isSingle: false,
312
- size: 'medium',
313
- tintColor: Colors.pink_05_b,
314
- isInput: false,
315
- disabled: false,
316
- step: 1,
269
+ min: 1,
270
+ max: 100,
271
+ isChangeValue: true,
272
+ isIncreaseValue: true,
273
+ isDecreaseValue: true,
274
+ isSingle: false,
275
+ size: 'medium',
276
+ tintColor: Colors.pink_05_b,
277
+ isInput: false
317
278
  };
package/Stepper.web.js CHANGED
@@ -1,319 +1,278 @@
1
- import React, {Component} from 'react';
1
+ import React, { Component } from 'react';
2
2
  import {
3
- View,
4
- StyleSheet,
5
- TouchableOpacity,
6
- Image,
7
- TextInput,
3
+ View, StyleSheet, TouchableOpacity, Image, TextInput
8
4
  } from 'react-native';
9
5
  import PropTypes from 'prop-types';
10
6
  import Text from '../../core/components/typography';
11
7
  import Colors from '../../core/colors';
12
8
 
13
- const minus =
14
- 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
15
- const plus =
16
- 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';
9
+ const minus = 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';
10
+ const plus = 'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';
17
11
 
18
12
  const styles = StyleSheet.create({
19
- container: {
20
- flexDirection: 'row',
21
- },
22
- icon: {
23
- height: 24,
24
- width: 24,
25
- resizeMode: 'contain',
26
- tintColor: Colors.pink_03,
27
- },
28
- text: {
29
- color: Colors.black_17,
30
- },
31
- numberBox: {
32
- justifyContent: 'center',
33
- alignItems: 'center',
34
- marginHorizontal: 6,
35
- backgroundColor: Colors.white,
36
- },
37
- button: {
38
- justifyContent: 'center',
39
- alignItems: 'center',
40
- backgroundColor: Colors.white,
41
- borderColor: 'transparent',
42
- },
43
- borderBox: {
44
- borderColor: Colors.black_04,
45
- borderWidth: 1,
46
- borderRadius: 6,
47
- },
48
- disabledIcon: {
49
- tintColor: Colors.black_09,
50
- },
51
- disabledBox: {
52
- borderColor: Colors.black_03,
53
- backgroundColor: Colors.black_03,
54
- },
55
- });
56
-
57
- const getStyle = type => {
58
- const objStyle = {
59
- large: {
60
- size: {
61
- ...styles.borderBox,
62
- width: 32, // height: 26
63
- },
64
- icon: {
65
- width: 24,
66
- height: 24,
67
- resizeMode: 'contain',
68
- },
69
- text: 'Title',
13
+ container: {
14
+ flexDirection: 'row',
70
15
  },
71
- medium: {
72
- size: {
73
- ...styles.borderBox,
74
- width: 28, // height: 24
75
- },
76
- icon: {
77
- width: 24,
16
+ icon: {
78
17
  height: 24,
18
+ width: 24,
79
19
  resizeMode: 'contain',
80
- },
81
- text: 'SubTitle',
20
+ tintColor: Colors.pink_03,
82
21
  },
83
- small: {
84
- size: {
85
- ...styles.borderBox,
86
- width: 20, // height: 16
87
- },
88
- icon: {
89
- width: 16,
90
- height: 16,
91
- resizeMode: 'contain',
92
- },
93
- text: 'Caption',
22
+ text: {
23
+ color: Colors.black_17
94
24
  },
95
- };
96
- return objStyle[type] || objStyle.medium;
97
- };
98
-
99
- const getSize = type => {
100
- const objStyle = {
101
- large: {
102
- size: {
103
- width: 32,
104
- height: 24, // height: 26
105
- },
25
+ numberBox: {
26
+ justifyContent: 'center',
27
+ alignItems: 'center',
28
+ marginHorizontal: 6,
29
+ backgroundColor: Colors.white,
30
+ },
31
+ button: {
32
+ justifyContent: 'center',
33
+ alignItems: 'center',
34
+ backgroundColor: Colors.white,
35
+ borderColor: 'transparent'
106
36
  },
107
- medium: {
108
- size: {
109
- width: 28,
110
- height: 24, // height: 24
111
- },
37
+ borderBox: {
38
+ borderColor: Colors.black_04, borderWidth: 1, borderRadius: 6
112
39
  },
113
- small: {
114
- size: {
115
- width: 20,
116
- height: 16, // height: 16
117
- },
40
+ disabledIcon: {
41
+ tintColor: Colors.black_09,
118
42
  },
119
- };
120
- return objStyle[type] || objStyle.medium;
43
+ disabledBox: {
44
+ borderColor: Colors.black_03, backgroundColor: Colors.black_03
45
+ }
46
+ });
47
+
48
+ const getStyle = (type) => {
49
+ const objStyle = {
50
+ large: {
51
+ size: {
52
+ ...styles.borderBox, width: 32, // height: 26
53
+ },
54
+ icon: {
55
+ width: 24, height: 24, resizeMode: 'contain'
56
+ },
57
+ text: 'Title'
58
+ },
59
+ medium: {
60
+ size: {
61
+ ...styles.borderBox, width: 28, // height: 24
62
+ },
63
+ icon: {
64
+ width: 24, height: 24, resizeMode: 'contain'
65
+ },
66
+ text: 'SubTitle'
67
+ },
68
+ small: {
69
+ size: {
70
+ ...styles.borderBox, width: 20, // height: 16
71
+ },
72
+ icon: {
73
+ width: 16, height: 16, resizeMode: 'contain'
74
+ },
75
+ text: 'Caption'
76
+ }
77
+
78
+ };
79
+ return objStyle[type] || objStyle.medium;
121
80
  };
122
81
 
123
- export default class Quantity extends Component {
124
- constructor(props) {
125
- super(props);
126
- this.state = {
127
- value: props.defaultValue || props.min,
128
- ownUpdate: false,
82
+ const getSize = (type) => {
83
+ const objStyle = {
84
+ large: {
85
+ size: {
86
+ width: 32,height: 24 // height: 26
87
+ },
88
+ },
89
+ medium: {
90
+ size: {
91
+ width: 28, height: 24// height: 24
92
+ },
93
+ },
94
+ small: {
95
+ size: {
96
+ width: 20, height: 16// height: 16
97
+ },
98
+ }
99
+
129
100
  };
130
- }
101
+ return objStyle[type] || objStyle.medium;
102
+ };
131
103
 
132
- static getDerivedStateFromProps(nextProps, prevState) {
133
- const {value = undefined} = this?.props || {};
134
- if (prevState.ownUpdate) {
135
- return {
136
- ownUpdate: false,
137
- };
104
+
105
+ export default class Quantity extends Component {
106
+ constructor(props) {
107
+ super(props);
108
+ this.state = {
109
+ value: props.defaultValue || props.min,
110
+ ownUpdate: false
111
+ };
138
112
  }
139
- if (nextProps.value !== value && nextProps.value !== prevState.value) {
140
- return {value: nextProps.value};
113
+
114
+ static getDerivedStateFromProps(nextProps, prevState) {
115
+ const { value = undefined } = this?.props || {};
116
+ if (prevState.ownUpdate) {
117
+ return {
118
+ ownUpdate: false,
119
+ };
120
+ } if (nextProps.value !== value && nextProps.value !== prevState.value) {
121
+ return { value: nextProps.value };
122
+ }
123
+ return null;
141
124
  }
142
- return null;
143
- }
144
125
 
145
- onChangeValue = (value, type) => {
146
- const {onChange} = this.props;
147
- return onChange && typeof onChange === 'function' && onChange(value, type);
148
- };
126
+ onChangeValue = (value, type) => {
127
+ const { onChange } = this.props;
128
+ return onChange && typeof onChange === 'function' && onChange(value, type);
129
+ }
149
130
 
150
- getValue = (key, step) => {
151
- const {isIncreaseValue, isDecreaseValue} = this.props;
152
- const value = {
153
- increase: isIncreaseValue ? step : 0,
154
- decrease: isDecreaseValue ? step : 0,
131
+ getValue = (key) => {
132
+ const { isIncreaseValue, isDecreaseValue } = this.props;
133
+ const value = {
134
+ increase: isIncreaseValue ? 1 : 0,
135
+ decrease: isDecreaseValue ? 1 : 0,
136
+ };
137
+ return value[key];
155
138
  };
156
- return value[key];
157
- };
158
139
 
159
- setValue = (newValue = 0, type) => {
160
- const {isInput, isIncreaseValue, max, min} = this.props;
161
- const onValue = (newValue, type) => {
162
- this.setState(
163
- {
164
- value: newValue,
165
- ownUpdate: true,
166
- },
167
- () => {
168
- this.onChangeValue(newValue, type);
169
- },
170
- );
171
- };
140
+ setValue = (newValue = 0, type) => {
141
+ const { isInput, isIncreaseValue, max, min } = this.props;
142
+ const onValue = (newValue, type) => {
143
+ this.setState({
144
+ value: newValue,
145
+ ownUpdate: true,
146
+ }, () => {
147
+ this.onChangeValue(newValue, type);
148
+ });
149
+ };
172
150
 
173
- if (isInput) {
174
- if (newValue <= max && isIncreaseValue && newValue >= min) {
175
- onValue(newValue, type);
176
- }
177
- } else {
178
- onValue(newValue, type);
151
+ if(isInput){
152
+ if((newValue <= max && isIncreaseValue) && (newValue >= min)){
153
+ onValue(newValue, type)
154
+ }
155
+ }else {
156
+ onValue(newValue, type)
157
+ }
179
158
  }
180
- };
181
159
 
182
- onPress =
183
- (isIncrease = true) =>
184
- () => {
185
- const {isChangeValue, onConditionCheck} = this.props;
186
- const {value} = this.state;
187
- const type = isIncrease ? 'increase' : 'decrease';
188
- if (isChangeValue) {
189
- const newValue = isIncrease
190
- ? value + this.getValue('increase', step)
191
- : value - this.getValue('decrease', step);
192
- if (typeof onConditionCheck === 'function') {
193
- const passCondition = onConditionCheck(newValue, type);
194
- if (passCondition) {
195
- this.setValue(newValue, type);
196
- }
160
+ onPress = (isIncrease = true) => () => {
161
+ const { isChangeValue, onConditionCheck } = this.props;
162
+ const { value } = this.state;
163
+ const type = isIncrease ? 'increase' : 'decrease';
164
+ if (isChangeValue) {
165
+ const newValue = isIncrease ? value + this.getValue('increase') : value - this.getValue('decrease');
166
+ if (typeof onConditionCheck === 'function') {
167
+ const passCondition = onConditionCheck(newValue, type);
168
+ if (passCondition) {
169
+ this.setValue(newValue, type);
170
+ }
171
+ } else {
172
+ this.setValue(newValue, type);
173
+ }
197
174
  } else {
198
- this.setValue(newValue, type);
175
+ this.onChangeValue(value, type);
199
176
  }
200
- } else {
201
- this.onChangeValue(value, type);
202
- }
203
177
  };
204
178
 
205
- render() {
206
- const {value} = this.state;
207
- const {
208
- style,
209
- max,
210
- valueStyle,
211
- size,
212
- tintColor,
213
- isIncreaseValue,
214
- isSingle,
215
- iconStyle,
216
- isInput,
217
- } = this.props;
218
- const {min} = this.props || 1;
219
- if (isSingle && value === 0) {
220
- return (
221
- <View style={[styles.container, style]}>
222
- <IconButton
223
- tintColor={tintColor}
224
- size={size}
225
- disabled={value >= max || !isIncreaseValue}
226
- onPress={this.onPress(true)}
227
- icon={plus}
228
- />
229
- </View>
230
- );
179
+ render() {
180
+ const { value } = this.state;
181
+ const {
182
+ style, max, valueStyle, size, tintColor, isIncreaseValue, isSingle, iconStyle, isInput
183
+ } = this.props;
184
+ const { min } = this.props || 1;
185
+ if (isSingle && value === 0) {
186
+ return (
187
+ <View style={[styles.container, style]}>
188
+ <IconButton
189
+ tintColor={tintColor}
190
+ size={size}
191
+ disabled={(value >= max || !isIncreaseValue)}
192
+ onPress={this.onPress(true)}
193
+ icon={plus}
194
+ />
195
+ </View>
196
+ );
197
+ }
198
+ const TextComp = Text[getStyle(size).text];
199
+ return (
200
+ <View style={[styles.container, style]}>
201
+ <IconButton
202
+ style={iconStyle}
203
+ tintColor={tintColor}
204
+ size={size}
205
+ disabled={value === min}
206
+ onPress={this.onPress(false)}
207
+ icon={minus}
208
+ />
209
+ <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
210
+ {
211
+ isInput ? <TextInput
212
+ style={[{textAlignVertical: 'center'}, getSize(size).size]}
213
+ underlineColorAndroid="transparent"
214
+ value={value.toString()}
215
+ textAlign='center'
216
+ maxLength={3}
217
+ keyboardType='number-pad'
218
+ onChangeText={(text) => this.setValue(text)}/> : <TextComp weight="bold" style={styles.text}>{value}</TextComp>
219
+ }
220
+ </View>
221
+ <IconButton
222
+ tintColor={tintColor}
223
+ style={iconStyle}
224
+ size={size}
225
+ disabled={(value >= max || !isIncreaseValue)}
226
+ onPress={this.onPress(true)}
227
+ icon={plus}
228
+ />
229
+ </View>
230
+ );
231
231
  }
232
- const TextComp = Text[getStyle(size).text];
233
- return (
234
- <View style={[styles.container, style]}>
235
- <IconButton
236
- style={iconStyle}
237
- tintColor={tintColor}
238
- size={size}
239
- disabled={value === min}
240
- onPress={this.onPress(false)}
241
- icon={minus}
242
- />
243
- <View style={[styles.numberBox, getStyle(size).size, valueStyle]}>
244
- {isInput ? (
245
- <TextInput
246
- style={[{textAlignVertical: 'center'}, getSize(size).size]}
247
- underlineColorAndroid="transparent"
248
- value={value.toString()}
249
- textAlign="center"
250
- maxLength={3}
251
- keyboardType="number-pad"
252
- onChangeText={text => this.setValue(text)}
253
- />
254
- ) : (
255
- <TextComp weight="bold" style={styles.text}>
256
- {value}
257
- </TextComp>
258
- )}
259
- </View>
260
- <IconButton
261
- tintColor={tintColor}
262
- style={iconStyle}
263
- size={size}
264
- disabled={value >= max || !isIncreaseValue}
265
- onPress={this.onPress(true)}
266
- icon={plus}
267
- />
268
- </View>
269
- );
270
- }
271
232
  }
272
233
 
273
- const IconButton = ({disabled, onPress, icon, size, tintColor, style}) => (
274
- <TouchableOpacity
275
- style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
234
+ const IconButton = ({
235
+ disabled, onPress, icon, size, tintColor, style
236
+ }) => (
237
+ <TouchableOpacity
238
+ style={[getStyle(size).size, styles.button, style]}// disabled && styles.disabledBox
276
239
  disabled={disabled}
277
- onPress={onPress}>
240
+ onPress={onPress}
241
+ >
278
242
  <Image
279
- source={icon}
280
- style={[
281
- getStyle(size).icon,
282
- {tintColor},
283
- disabled && styles.disabledIcon,
284
- ]}
243
+ source={icon}
244
+ style={[getStyle(size).icon, { tintColor }, disabled && styles.disabledIcon]}
285
245
  />
286
- </TouchableOpacity>
246
+ </TouchableOpacity>
287
247
  );
288
248
 
289
249
  Quantity.propTypes = {
290
- size: PropTypes.oneOf(['large', 'medium', 'small']),
291
- style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
292
- valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
293
- min: PropTypes.number,
294
- max: PropTypes.number,
295
- value: PropTypes.number,
296
- defaultValue: PropTypes.number,
297
- onChange: PropTypes.func,
298
- isChangeValue: PropTypes.bool,
299
- isIncreaseValue: PropTypes.bool,
300
- isDecreaseValue: PropTypes.bool,
301
- isSingle: PropTypes.bool,
302
- tintColor: PropTypes.string,
303
- iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
304
- isInput: PropTypes.bool,
305
- step: PropTypes.number,
250
+ size: PropTypes.oneOf(['large', 'medium', 'small']),
251
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
252
+ valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
253
+ min: PropTypes.number,
254
+ max: PropTypes.number,
255
+ value: PropTypes.number,
256
+ defaultValue: PropTypes.number,
257
+ onChange: PropTypes.func,
258
+ isChangeValue: PropTypes.bool,
259
+ isIncreaseValue: PropTypes.bool,
260
+ isDecreaseValue: PropTypes.bool,
261
+ isSingle: PropTypes.bool,
262
+ tintColor: PropTypes.string,
263
+ iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
264
+ isInput: PropTypes.bool,
306
265
  };
307
266
 
308
267
  Quantity.defaultProps = {
309
- min: 1,
310
- max: 100,
311
- isChangeValue: true,
312
- isIncreaseValue: true,
313
- isDecreaseValue: true,
314
- isSingle: false,
315
- size: 'medium',
316
- tintColor: Colors.pink_05_b,
317
- isInput: false,
318
- step: 1,
268
+ min: 1,
269
+ max: 100,
270
+ isChangeValue: true,
271
+ isIncreaseValue: true,
272
+ isDecreaseValue: true,
273
+ isSingle: false,
274
+ size: 'medium',
275
+ tintColor: Colors.pink_05_b,
276
+ isInput: false
319
277
  };
278
+
package/package.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "name": "@momo-kits/stepper",
3
- "version": "0.0.18-beta-2",
3
+ "version": "0.0.20",
4
4
  "private": false,
5
5
  "main": "index.js",
6
6
  "dependencies": {},
7
7
  "peerDependencies": {
8
- "@momo-kits/core": ">=0.0.5-beta",
8
+ "react-native": ">=0.55",
9
9
  "prop-types": "^15.7.2",
10
10
  "react": "16.9.0",
11
- "react-native": ">=0.55"
11
+ "@momo-kits/core": ">=0.0.5-beta"
12
12
  },
13
13
  "devDependencies": {},
14
14
  "license": "MoMo"
15
- }
15
+ }