@momo-kits/stepper 0.0.34-beta → 0.0.34
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/Stepper.js +356 -1
- package/Stepper.web.js +319 -1
- package/index.js +3 -1
- package/package.json +5 -12
- package/publish.sh +2 -2
- package/babel.config.js +0 -1
package/Stepper.js
CHANGED
|
@@ -1 +1,356 @@
|
|
|
1
|
-
|
|
1
|
+
import React, { Component } from 'react';
|
|
2
|
+
import { View, StyleSheet, TextInput, Keyboard } from 'react-native';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import { Text, Colors, Image, TouchableOpacity } from '@momo-kits/core';
|
|
5
|
+
|
|
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
|
+
|
|
11
|
+
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',
|
|
63
|
+
},
|
|
64
|
+
medium: {
|
|
65
|
+
size: {
|
|
66
|
+
...styles.borderBox,
|
|
67
|
+
width: 28, // height: 24
|
|
68
|
+
},
|
|
69
|
+
icon: {
|
|
70
|
+
width: 24,
|
|
71
|
+
height: 24,
|
|
72
|
+
resizeMode: 'contain',
|
|
73
|
+
},
|
|
74
|
+
text: 'SubTitle',
|
|
75
|
+
},
|
|
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',
|
|
87
|
+
},
|
|
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
|
+
},
|
|
99
|
+
},
|
|
100
|
+
medium: {
|
|
101
|
+
size: {
|
|
102
|
+
width: 28,
|
|
103
|
+
height: 24, // height: 24
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
small: {
|
|
107
|
+
size: {
|
|
108
|
+
width: 20,
|
|
109
|
+
height: 16, // height: 16
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
};
|
|
113
|
+
return objStyle[type] || objStyle.medium;
|
|
114
|
+
};
|
|
115
|
+
|
|
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,
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
componentDidMount() {
|
|
126
|
+
Keyboard.addListener(
|
|
127
|
+
'keyboardDidHide',
|
|
128
|
+
this.checkData(
|
|
129
|
+
this.state.value,
|
|
130
|
+
'increase',
|
|
131
|
+
this.props.min,
|
|
132
|
+
this.props.max,
|
|
133
|
+
),
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
componentWillUnmount() {
|
|
138
|
+
Keyboard.removeAllListeners('keyboardDidHide');
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
static getDerivedStateFromProps(nextProps, prevState) {
|
|
142
|
+
const { value = undefined } = this?.props || {};
|
|
143
|
+
if (prevState.ownUpdate) {
|
|
144
|
+
return {
|
|
145
|
+
ownUpdate: false,
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
if (nextProps.value !== value && nextProps.value !== prevState.value) {
|
|
149
|
+
return { value: nextProps.value };
|
|
150
|
+
}
|
|
151
|
+
return null;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
onChangeValue = (value, type) => {
|
|
155
|
+
const { onChange } = this.props;
|
|
156
|
+
return (
|
|
157
|
+
onChange && typeof onChange === 'function' && onChange(value, type)
|
|
158
|
+
);
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
getValue = (key, step) => {
|
|
162
|
+
const { isIncreaseValue, isDecreaseValue } = this.props;
|
|
163
|
+
const value = {
|
|
164
|
+
increase: isIncreaseValue ? parseInt(step) : 0,
|
|
165
|
+
decrease: isDecreaseValue ? parseInt(step) : 0,
|
|
166
|
+
};
|
|
167
|
+
return value[key];
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
setValue = (newValue = 0, type) => {
|
|
171
|
+
this.setState(
|
|
172
|
+
{
|
|
173
|
+
value: newValue,
|
|
174
|
+
ownUpdate: true,
|
|
175
|
+
},
|
|
176
|
+
() => {
|
|
177
|
+
this.onChangeValue(newValue, type);
|
|
178
|
+
},
|
|
179
|
+
);
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
checkData = (value, type, min, max) => () => {
|
|
183
|
+
if (value < min) {
|
|
184
|
+
this.setState({ value: min, ownUpdate: true }, () => {
|
|
185
|
+
this.onChangeValue(value, type);
|
|
186
|
+
});
|
|
187
|
+
} else if (value > max) {
|
|
188
|
+
this.setState({ value: max, ownUpdate: true }, () => {
|
|
189
|
+
this.onChangeValue(value, type);
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
console.log(value, min, max);
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
onPress =
|
|
197
|
+
(isIncrease = true, step) =>
|
|
198
|
+
() => {
|
|
199
|
+
const { isChangeValue, onConditionCheck } = this.props;
|
|
200
|
+
const { value } = this.state;
|
|
201
|
+
const type = isIncrease ? 'increase' : 'decrease';
|
|
202
|
+
if (isChangeValue && value !== '') {
|
|
203
|
+
const newValue = isIncrease
|
|
204
|
+
? parseInt(value) + this.getValue('increase', step)
|
|
205
|
+
: parseInt(value) - this.getValue('decrease', step);
|
|
206
|
+
if (typeof onConditionCheck === 'function') {
|
|
207
|
+
const passCondition = onConditionCheck(newValue, type);
|
|
208
|
+
if (passCondition) {
|
|
209
|
+
this.setValue(newValue, type);
|
|
210
|
+
}
|
|
211
|
+
} else {
|
|
212
|
+
this.setValue(newValue, type);
|
|
213
|
+
}
|
|
214
|
+
} else {
|
|
215
|
+
this.onChangeValue(value, type);
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
render() {
|
|
220
|
+
const { value } = this.state;
|
|
221
|
+
const {
|
|
222
|
+
style,
|
|
223
|
+
valueStyle,
|
|
224
|
+
size,
|
|
225
|
+
tintColor,
|
|
226
|
+
isIncreaseValue,
|
|
227
|
+
isSingle,
|
|
228
|
+
iconStyle,
|
|
229
|
+
isInput,
|
|
230
|
+
disabled,
|
|
231
|
+
step,
|
|
232
|
+
} = this.props;
|
|
233
|
+
const { min } = this.props || 1;
|
|
234
|
+
const { max } = this.props || 999;
|
|
235
|
+
if (isSingle && value === 0) {
|
|
236
|
+
return (
|
|
237
|
+
<View style={[styles.container, style]}>
|
|
238
|
+
<IconButton
|
|
239
|
+
tintColor={tintColor}
|
|
240
|
+
size={size}
|
|
241
|
+
disabled={value >= max || !isIncreaseValue}
|
|
242
|
+
onPress={this.onPress(true, step)}
|
|
243
|
+
icon={plus}
|
|
244
|
+
/>
|
|
245
|
+
</View>
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
const TextComp = Text[getStyle(size).text];
|
|
249
|
+
|
|
250
|
+
return (
|
|
251
|
+
<View style={[styles.container, style]}>
|
|
252
|
+
<IconButton
|
|
253
|
+
style={iconStyle}
|
|
254
|
+
tintColor={tintColor}
|
|
255
|
+
size={size}
|
|
256
|
+
disabled={value === min || disabled}
|
|
257
|
+
onPress={this.onPress(false, step)}
|
|
258
|
+
icon={minus}
|
|
259
|
+
/>
|
|
260
|
+
<View
|
|
261
|
+
style={[styles.numberBox, getStyle(size).size, valueStyle]}>
|
|
262
|
+
{isInput ? (
|
|
263
|
+
<TextInput
|
|
264
|
+
style={[
|
|
265
|
+
{
|
|
266
|
+
textAlignVertical: 'center',
|
|
267
|
+
padding: 0,
|
|
268
|
+
},
|
|
269
|
+
getSize(size).size,
|
|
270
|
+
]}
|
|
271
|
+
underlineColorAndroid="transparent"
|
|
272
|
+
value={value.toString()}
|
|
273
|
+
textAlign="center"
|
|
274
|
+
maxLength={3}
|
|
275
|
+
keyboardType="number-pad"
|
|
276
|
+
editable={!disabled}
|
|
277
|
+
onChangeText={(text) => {
|
|
278
|
+
if (text[0] !== '0') {
|
|
279
|
+
this.setValue(text);
|
|
280
|
+
}
|
|
281
|
+
}}
|
|
282
|
+
onEndEditing={this.checkData(
|
|
283
|
+
value,
|
|
284
|
+
'increase',
|
|
285
|
+
min,
|
|
286
|
+
max,
|
|
287
|
+
)}
|
|
288
|
+
/>
|
|
289
|
+
) : (
|
|
290
|
+
<TextComp weight="bold" style={styles.text}>
|
|
291
|
+
{value}
|
|
292
|
+
</TextComp>
|
|
293
|
+
)}
|
|
294
|
+
</View>
|
|
295
|
+
<IconButton
|
|
296
|
+
tintColor={tintColor}
|
|
297
|
+
style={iconStyle}
|
|
298
|
+
size={size}
|
|
299
|
+
disabled={value >= max || !isIncreaseValue || disabled}
|
|
300
|
+
onPress={this.onPress(true, step)}
|
|
301
|
+
icon={plus}
|
|
302
|
+
/>
|
|
303
|
+
</View>
|
|
304
|
+
);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
const IconButton = ({ disabled, onPress, icon, size, tintColor, style }) => (
|
|
309
|
+
<TouchableOpacity
|
|
310
|
+
style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
|
|
311
|
+
disabled={disabled}
|
|
312
|
+
onPress={onPress}>
|
|
313
|
+
<Image
|
|
314
|
+
source={icon}
|
|
315
|
+
style={[
|
|
316
|
+
getStyle(size).icon,
|
|
317
|
+
{ tintColor },
|
|
318
|
+
disabled && styles.disabledIcon,
|
|
319
|
+
]}
|
|
320
|
+
/>
|
|
321
|
+
</TouchableOpacity>
|
|
322
|
+
);
|
|
323
|
+
|
|
324
|
+
Quantity.propTypes = {
|
|
325
|
+
size: PropTypes.oneOf(['large', 'medium', 'small']),
|
|
326
|
+
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
327
|
+
valueStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
328
|
+
min: PropTypes.number,
|
|
329
|
+
max: PropTypes.number,
|
|
330
|
+
value: PropTypes.number,
|
|
331
|
+
defaultValue: PropTypes.number,
|
|
332
|
+
onChange: PropTypes.func,
|
|
333
|
+
isChangeValue: PropTypes.bool,
|
|
334
|
+
isIncreaseValue: PropTypes.bool,
|
|
335
|
+
isDecreaseValue: PropTypes.bool,
|
|
336
|
+
isSingle: PropTypes.bool,
|
|
337
|
+
disabled: PropTypes.bool,
|
|
338
|
+
tintColor: PropTypes.string,
|
|
339
|
+
iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
340
|
+
isInput: PropTypes.bool,
|
|
341
|
+
step: PropTypes.number,
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
Quantity.defaultProps = {
|
|
345
|
+
min: 1,
|
|
346
|
+
max: 100,
|
|
347
|
+
isChangeValue: true,
|
|
348
|
+
isIncreaseValue: true,
|
|
349
|
+
isDecreaseValue: true,
|
|
350
|
+
isSingle: false,
|
|
351
|
+
size: 'medium',
|
|
352
|
+
tintColor: Colors.pink_05_b,
|
|
353
|
+
isInput: false,
|
|
354
|
+
disabled: false,
|
|
355
|
+
step: 1,
|
|
356
|
+
};
|
package/Stepper.web.js
CHANGED
|
@@ -1 +1,319 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _typography=_interopRequireDefault(require("../typography"));var _colors=_interopRequireDefault(require("../../colors"));var _ValueUtil=_interopRequireDefault(require("../../utils/ValueUtil"));var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/stepper/dist/Stepper.web.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var minus='https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_minus_circle.png';var plus='https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_plus_circle.png';var styles=_reactNative.StyleSheet.create({container:{flexDirection:'row'},icon:{height:24,width:24,resizeMode:'contain',tintColor:_colors.default.pink_03},text:{color:_colors.default.black_17},numberBox:{justifyContent:'center',alignItems:'center',marginHorizontal:6,backgroundColor:_colors.default.white},button:{justifyContent:'center',alignItems:'center',backgroundColor:_colors.default.white,borderColor:'transparent'},borderBox:{borderColor:_colors.default.black_04,borderWidth:1,borderRadius:6},disabledIcon:{tintColor:_colors.default.black_09},disabledBox:{borderColor:_colors.default.black_03,backgroundColor:_colors.default.black_03}});var getStyle=function getStyle(type){var objStyle={large:{size:_objectSpread(_objectSpread({},styles.borderBox),{},{width:32}),icon:{width:24,height:24,resizeMode:'contain'},text:'Title'},medium:{size:_objectSpread(_objectSpread({},styles.borderBox),{},{width:28}),icon:{width:24,height:24,resizeMode:'contain'},text:'SubTitle'},small:{size:_objectSpread(_objectSpread({},styles.borderBox),{},{width:20}),icon:{width:16,height:16,resizeMode:'contain'},text:'Caption'}};return objStyle[type]||objStyle.medium;};var Quantity=function(_Component){(0,_inherits2.default)(Quantity,_Component);var _super=_createSuper(Quantity);function Quantity(props){var _this;(0,_classCallCheck2.default)(this,Quantity);_this=_super.call(this,props);_this.onChangeValue=function(value,type){var onChange=_this.props.onChange;return onChange&&typeof onChange==='function'&&onChange(value,type);};_this.getValue=function(key){var _this$props=_this.props,isIncreaseValue=_this$props.isIncreaseValue,isDecreaseValue=_this$props.isDecreaseValue;var value={increase:isIncreaseValue?1:0,decrease:isDecreaseValue?1:0};return value[key];};_this.setValue=function(newValue,type){_this.setState({value:newValue,ownUpdate:true},function(){_this.onChangeValue(newValue,type);});};_this.onPress=function(){var isIncrease=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;return function(){var _this$props2=_this.props,isChangeValue=_this$props2.isChangeValue,onConditionCheck=_this$props2.onConditionCheck;var value=_this.state.value;var type=isIncrease?'increase':'decrease';if(isChangeValue){var newValue=isIncrease?value+_this.getValue('increase'):value-_this.getValue('decrease');if(typeof onConditionCheck==='function'){var passCondition=onConditionCheck(newValue,type);if(passCondition){_this.setValue(newValue,type);}}else{_this.setValue(newValue,type);}}else{_this.onChangeValue(value,type);}};};_this.state={value:props.defaultValue||props.min,ownUpdate:false};return _this;}(0,_createClass2.default)(Quantity,[{key:"render",value:function render(){var value=this.state.value;var _this$props3=this.props,style=_this$props3.style,max=_this$props3.max,valueStyle=_this$props3.valueStyle,size=_this$props3.size,tintColor=_this$props3.tintColor,isIncreaseValue=_this$props3.isIncreaseValue,isSingle=_this$props3.isSingle,iconStyle=_this$props3.iconStyle;var _ref=this.props||1,min=_ref.min;if(isSingle&&value===0){return _react.default.createElement(_reactNative.View,{style:[styles.container,style],__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:17}},_react.default.createElement(IconButton,{tintColor:tintColor,size:size,disabled:value>=max||!isIncreaseValue,onPress:this.onPress(true),icon:plus,__source:{fileName:_jsxFileName,lineNumber:154,columnNumber:21}}));}var TextComp=_typography.default[getStyle(size).text];return _react.default.createElement(_reactNative.View,{style:[styles.container,style],__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:13}},_react.default.createElement(IconButton,{style:iconStyle,tintColor:tintColor,size:size,disabled:value===min,onPress:this.onPress(false),icon:minus,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:17}}),_react.default.createElement(_reactNative.View,{style:[styles.numberBox,getStyle(size).size,valueStyle],__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:17}},_react.default.createElement(TextComp,{weight:"bold",style:styles.text,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:21}},value)),_react.default.createElement(IconButton,{tintColor:tintColor,style:iconStyle,size:size,disabled:value>=max||!isIncreaseValue,onPress:this.onPress(true),icon:plus,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:17}}));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,prevState){var _ref2=(this==null?void 0:this.props)||{},_ref2$value=_ref2.value,value=_ref2$value===void 0?undefined:_ref2$value;if(prevState.ownUpdate){return{ownUpdate:false};}if(nextProps.value!==value&&nextProps.value!==prevState.value){return{value:nextProps.value};}return null;}}]);return Quantity;}(_react.Component);exports.default=Quantity;var IconButton=function IconButton(_ref3){var disabled=_ref3.disabled,onPress=_ref3.onPress,icon=_ref3.icon,size=_ref3.size,tintColor=_ref3.tintColor,style=_ref3.style;return _react.default.createElement(_reactNative.TouchableOpacity,{style:[getStyle(size).size,styles.button,style],disabled:disabled,onPress:onPress,__source:{fileName:_jsxFileName,lineNumber:194,columnNumber:5}},_react.default.createElement(_reactNative.Image,{source:_ValueUtil.default.getImageSource(icon),style:[getStyle(size).icon,{tintColor:tintColor},disabled&&styles.disabledIcon],__source:{fileName:_jsxFileName,lineNumber:199,columnNumber:9}}));};Quantity.propTypes={size:_propTypes.default.oneOf(['large','medium','small']),style:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),valueStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array]),min:_propTypes.default.number,max:_propTypes.default.number,value:_propTypes.default.number,defaultValue:_propTypes.default.number,onChange:_propTypes.default.func,isChangeValue:_propTypes.default.bool,isIncreaseValue:_propTypes.default.bool,isDecreaseValue:_propTypes.default.bool,isSingle:_propTypes.default.bool,tintColor:_propTypes.default.string,iconStyle:_propTypes.default.oneOfType([_propTypes.default.object,_propTypes.default.array])};Quantity.defaultProps={min:1,max:100,isChangeValue:true,isIncreaseValue:true,isDecreaseValue:true,isSingle:false,size:'medium',tintColor:_colors.default.pink_05_b};
|
|
1
|
+
import React, {Component} from 'react';
|
|
2
|
+
import {
|
|
3
|
+
View,
|
|
4
|
+
StyleSheet,
|
|
5
|
+
TouchableOpacity,
|
|
6
|
+
Image,
|
|
7
|
+
TextInput,
|
|
8
|
+
} from 'react-native';
|
|
9
|
+
import PropTypes from 'prop-types';
|
|
10
|
+
import Text from '../../core/components/typography';
|
|
11
|
+
import Colors from '../../core/colors';
|
|
12
|
+
|
|
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';
|
|
17
|
+
|
|
18
|
+
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',
|
|
70
|
+
},
|
|
71
|
+
medium: {
|
|
72
|
+
size: {
|
|
73
|
+
...styles.borderBox,
|
|
74
|
+
width: 28, // height: 24
|
|
75
|
+
},
|
|
76
|
+
icon: {
|
|
77
|
+
width: 24,
|
|
78
|
+
height: 24,
|
|
79
|
+
resizeMode: 'contain',
|
|
80
|
+
},
|
|
81
|
+
text: 'SubTitle',
|
|
82
|
+
},
|
|
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',
|
|
94
|
+
},
|
|
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
|
+
},
|
|
106
|
+
},
|
|
107
|
+
medium: {
|
|
108
|
+
size: {
|
|
109
|
+
width: 28,
|
|
110
|
+
height: 24, // height: 24
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
small: {
|
|
114
|
+
size: {
|
|
115
|
+
width: 20,
|
|
116
|
+
height: 16, // height: 16
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
};
|
|
120
|
+
return objStyle[type] || objStyle.medium;
|
|
121
|
+
};
|
|
122
|
+
|
|
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,
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
static getDerivedStateFromProps(nextProps, prevState) {
|
|
133
|
+
const {value = undefined} = this?.props || {};
|
|
134
|
+
if (prevState.ownUpdate) {
|
|
135
|
+
return {
|
|
136
|
+
ownUpdate: false,
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
if (nextProps.value !== value && nextProps.value !== prevState.value) {
|
|
140
|
+
return {value: nextProps.value};
|
|
141
|
+
}
|
|
142
|
+
return null;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
onChangeValue = (value, type) => {
|
|
146
|
+
const {onChange} = this.props;
|
|
147
|
+
return onChange && typeof onChange === 'function' && onChange(value, type);
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
getValue = (key, step) => {
|
|
151
|
+
const {isIncreaseValue, isDecreaseValue} = this.props;
|
|
152
|
+
const value = {
|
|
153
|
+
increase: isIncreaseValue ? step : 0,
|
|
154
|
+
decrease: isDecreaseValue ? step : 0,
|
|
155
|
+
};
|
|
156
|
+
return value[key];
|
|
157
|
+
};
|
|
158
|
+
|
|
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
|
+
};
|
|
172
|
+
|
|
173
|
+
if (isInput) {
|
|
174
|
+
if (newValue <= max && isIncreaseValue && newValue >= min) {
|
|
175
|
+
onValue(newValue, type);
|
|
176
|
+
}
|
|
177
|
+
} else {
|
|
178
|
+
onValue(newValue, type);
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
onPress =
|
|
183
|
+
(isIncrease = true, step) =>
|
|
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
|
+
}
|
|
197
|
+
} else {
|
|
198
|
+
this.setValue(newValue, type);
|
|
199
|
+
}
|
|
200
|
+
} else {
|
|
201
|
+
this.onChangeValue(value, type);
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
|
|
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
|
+
);
|
|
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
|
+
}
|
|
272
|
+
|
|
273
|
+
const IconButton = ({disabled, onPress, icon, size, tintColor, style}) => (
|
|
274
|
+
<TouchableOpacity
|
|
275
|
+
style={[getStyle(size).size, styles.button, style]} // disabled && styles.disabledBox
|
|
276
|
+
disabled={disabled}
|
|
277
|
+
onPress={onPress}>
|
|
278
|
+
<Image
|
|
279
|
+
source={icon}
|
|
280
|
+
style={[
|
|
281
|
+
getStyle(size).icon,
|
|
282
|
+
{tintColor},
|
|
283
|
+
disabled && styles.disabledIcon,
|
|
284
|
+
]}
|
|
285
|
+
/>
|
|
286
|
+
</TouchableOpacity>
|
|
287
|
+
);
|
|
288
|
+
|
|
289
|
+
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,
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
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,
|
|
319
|
+
};
|
package/index.js
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
import Stepper from './Stepper';
|
|
2
|
+
|
|
3
|
+
export default Stepper;
|
package/package.json
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@momo-kits/stepper",
|
|
3
|
-
"version": "0.0.34
|
|
3
|
+
"version": "0.0.34",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"dependencies": {},
|
|
7
7
|
"peerDependencies": {
|
|
8
|
-
"
|
|
8
|
+
"@momo-kits/core": ">=0.0.5-beta",
|
|
9
9
|
"prop-types": "^15.7.2",
|
|
10
10
|
"react": "16.9.0",
|
|
11
|
-
"
|
|
11
|
+
"react-native": ">=0.55"
|
|
12
12
|
},
|
|
13
|
-
"devDependencies": {
|
|
14
|
-
|
|
15
|
-
"@babel/core": "^7.12.9",
|
|
16
|
-
"@babel/runtime": "^7.12.5"
|
|
17
|
-
},
|
|
18
|
-
"license": "MoMo",
|
|
19
|
-
"jest": {
|
|
20
|
-
"preset": "react-native"
|
|
21
|
-
}
|
|
13
|
+
"devDependencies": {},
|
|
14
|
+
"license": "MoMo"
|
|
22
15
|
}
|
package/publish.sh
CHANGED
|
@@ -12,7 +12,7 @@ echo VERSION: $VERSION
|
|
|
12
12
|
rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js' --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
|
|
13
13
|
|
|
14
14
|
# #babel component to dist
|
|
15
|
-
babel ./dist -d dist --copy-files
|
|
15
|
+
#babel ./dist -d dist --copy-files
|
|
16
16
|
|
|
17
17
|
#copy option
|
|
18
18
|
#cp -r ./src/ dist
|
|
@@ -26,4 +26,4 @@ cd ..
|
|
|
26
26
|
rm -rf dist
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
|
|
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"}'
|
package/babel.config.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports={presets:['module:metro-react-native-babel-preset']};
|