@momo-kits/auto-complete 0.0.59-beta → 0.0.59-beta.2

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/AutoComplete.js +149 -94
  2. package/package.json +14 -14
  3. package/publish.sh +2 -2
package/AutoComplete.js CHANGED
@@ -6,12 +6,16 @@ import {
6
6
  StyleSheet,
7
7
  UIManager,
8
8
  View,
9
- Platform
9
+ Platform,
10
10
  } from 'react-native';
11
11
  import { get } from 'lodash';
12
12
  import PropTypes from 'prop-types';
13
13
  import {
14
- ValueUtil, NumberUtils, Colors, Text, RNGestureHandler
14
+ ValueUtil,
15
+ NumberUtils,
16
+ Colors,
17
+ Text,
18
+ RNGestureHandler,
15
19
  } from '@momo-kits/core';
16
20
 
17
21
  const { TouchableOpacity } = RNGestureHandler;
@@ -31,26 +35,34 @@ export default class AutoComplete extends Component {
31
35
  measure() {
32
36
  try {
33
37
  if (this.hashmapRefs) {
34
- Object.keys(this.hashmapRefs)
35
- .forEach((key) => {
36
- if (Platform.OS === 'android') {
37
- UIManager.measureLayoutRelativeToParent(findNodeHandle(this.hashmapRefs[key]), (e) => { console.error(e); }, (x, y, width, height) => {
38
+ Object.keys(this.hashmapRefs).forEach((key) => {
39
+ if (Platform.OS === 'android') {
40
+ UIManager.measureLayoutRelativeToParent(
41
+ findNodeHandle(this.hashmapRefs[key]),
42
+ (e) => {
43
+ console.error(e);
44
+ },
45
+ (x, y, width, height) => {
38
46
  this.hashmapPosition[key] = {
39
47
  x,
40
48
  y: y + height,
41
- width
49
+ width,
42
50
  };
43
- });
44
- } else {
45
- UIManager.measure(findNodeHandle(this.hashmapRefs[key]), (x, y, width, height) => {
51
+ },
52
+ );
53
+ } else {
54
+ UIManager.measure(
55
+ findNodeHandle(this.hashmapRefs[key]),
56
+ (x, y, width, height) => {
46
57
  this.hashmapPosition[key] = {
47
58
  x,
48
59
  y: y + height,
49
- width
60
+ width,
50
61
  };
51
- });
52
- }
53
- });
62
+ },
63
+ );
64
+ }
65
+ });
54
66
  }
55
67
  } catch (e) {
56
68
  console.log(`try catch :: ${e}`);
@@ -66,8 +78,22 @@ export default class AutoComplete extends Component {
66
78
 
67
79
  getValueByKey = (key, value) => {
68
80
  const splitKey = key.split('-');
69
- return splitKey.length > 1 ? splitKey.reduce((result, item, index) => result = result + value[item] + (index === splitKey.length - 1 ? '' : !!value[item] ? ' ' : ''), '')
70
- : key === 'phone' ? NumberUtils.formatPhoneNumberVN(value[key]) : value[key];
81
+ return splitKey.length > 1
82
+ ? splitKey.reduce(
83
+ (result, item, index) =>
84
+ (result =
85
+ result +
86
+ value[item] +
87
+ (index === splitKey.length - 1
88
+ ? ''
89
+ : !!value[item]
90
+ ? ' '
91
+ : '')),
92
+ '',
93
+ )
94
+ : key === 'phone'
95
+ ? NumberUtils.formatPhoneNumberVN(value[key])
96
+ : value[key];
71
97
  };
72
98
 
73
99
  /**
@@ -78,36 +104,50 @@ export default class AutoComplete extends Component {
78
104
  if (components) {
79
105
  return React.Children.map(components, (child) => {
80
106
  if (!child?.props) return child;
81
- if (child?.props?.children && React.Children.count(child?.props?.children) > 0 && child.type.name !== Text) {
107
+ if (
108
+ child?.props?.children &&
109
+ React.Children.count(child?.props?.children) > 0 &&
110
+ child.type.name !== Text
111
+ ) {
82
112
  // component have children -> clone it and all it's children
83
113
  return React.cloneElement(child, {
84
- children: this.cloneChildren(child.props.children)
114
+ children: this.cloneChildren(child.props.children),
85
115
  });
86
116
  }
87
117
 
88
- const {
89
- onChangeText,
90
- keyAutoComplete,
91
- onFocus,
92
- onEndEditing
93
- } = child.props;
118
+ const { onChangeText, keyAutoComplete, onFocus, onEndEditing } =
119
+ child.props;
94
120
  if (keyAutoComplete) {
95
121
  // Update props when component have keyAutoComplete
96
122
  if (this.selectedItem) {
97
- this.hashmapInputValue[keyAutoComplete] = this.getValueByKey(keyAutoComplete, this.selectedItem);// this.selectedItem[keyAutoComplete];
123
+ this.hashmapInputValue[keyAutoComplete] =
124
+ this.getValueByKey(
125
+ keyAutoComplete,
126
+ this.selectedItem,
127
+ ); // this.selectedItem[keyAutoComplete];
98
128
  return React.cloneElement(child, {
99
- ref: (view) => this.hashmapRefs[keyAutoComplete] = view,
100
- onChangeText: (text) => this.changeTextHandle(child, text, onChangeText),
129
+ ref: (view) =>
130
+ (this.hashmapRefs[keyAutoComplete] = view),
131
+ onChangeText: (text) =>
132
+ this.changeTextHandle(
133
+ child,
134
+ text,
135
+ onChangeText,
136
+ ),
101
137
  onFocus: (e) => this.focusHandle(e, child, onFocus),
102
138
  // value: this.getValueByKey(keyAutoComplete, this.selectedItem),
103
- onEndEditing: (e) => this.endFocusHandle(e, onEndEditing)
139
+ onEndEditing: (e) =>
140
+ this.endFocusHandle(e, onEndEditing),
104
141
  });
105
142
  }
106
143
  return React.cloneElement(child, {
107
- ref: (view) => this.hashmapRefs[keyAutoComplete] = view,
108
- onChangeText: (text) => this.changeTextHandle(child, text, onChangeText),
144
+ ref: (view) =>
145
+ (this.hashmapRefs[keyAutoComplete] = view),
146
+ onChangeText: (text) =>
147
+ this.changeTextHandle(child, text, onChangeText),
109
148
  onFocus: (e) => this.focusHandle(e, child, onFocus),
110
- onEndEditing: (e) => this.endFocusHandle(e, onEndEditing)
149
+ onEndEditing: (e) =>
150
+ this.endFocusHandle(e, onEndEditing),
111
151
  });
112
152
  }
113
153
  return child;
@@ -118,11 +158,11 @@ export default class AutoComplete extends Component {
118
158
  }
119
159
 
120
160
  render() {
121
- const {
122
- style = {},
123
- } = this.props;
161
+ const { style = {} } = this.props;
124
162
  const suggest = get(this.state, 'suggest', {});
125
- const childrenWithProps = this.cloneChildren(get(this.props, 'children', null));
163
+ const childrenWithProps = this.cloneChildren(
164
+ get(this.props, 'children', null),
165
+ );
126
166
  return (
127
167
  <View style={[{ zIndex: 1 }, style]}>
128
168
  {childrenWithProps}
@@ -135,14 +175,15 @@ export default class AutoComplete extends Component {
135
175
  const keyAutoComplete = get(child.props, 'keyAutoComplete', '');
136
176
  const isShowAutoComplete = get(child.props, 'isShowAutoComplete', true);
137
177
  const { data } = this.props;
138
- const dataOutput = data && data.length > 0 && this.filter(data, keyAutoComplete, text);
178
+ const dataOutput =
179
+ data && data.length > 0 && this.filter(data, keyAutoComplete, text);
139
180
  if (this.hashmapRefs[keyAutoComplete]) {
140
181
  this.setState({
141
182
  suggest: {
142
183
  data: dataOutput,
143
184
  position: this.hashmapPosition[keyAutoComplete],
144
- isShowAutoComplete
145
- }
185
+ isShowAutoComplete,
186
+ },
146
187
  });
147
188
  }
148
189
  };
@@ -194,62 +235,56 @@ export default class AutoComplete extends Component {
194
235
  .toLowerCase()
195
236
  .trim()
196
237
  .replace(/\s/g, '');
197
- return (
198
- valueStrFormated.indexOf(queryFormated) !== -1
199
- );
238
+ return valueStrFormated.indexOf(queryFormated) !== -1;
200
239
  });
201
240
  };
202
241
 
203
242
  renderSuggest(suggest) {
204
243
  const { numSuggest } = this.props;
205
- if (suggest && suggest.data && suggest.data.length > 0 && suggest.isShowAutoComplete) {
244
+ if (
245
+ suggest &&
246
+ suggest.data &&
247
+ suggest.data.length > 0 &&
248
+ suggest.isShowAutoComplete
249
+ ) {
206
250
  const { x = 0, y = 0, width = 0 } = suggest.position || {};
207
251
  const sliceData = suggest.data.slice(0, numSuggest);
208
252
 
209
253
  return (
210
- <View style={
211
- [styles.containerSuggest, {
212
- left: x,
213
- top: y,
214
- width
215
- }]
216
- }
217
- >
218
- {
219
- sliceData.map((item, index) => (
220
- <View key={index.toString()}>
221
- {this.renderItem({ item, index })}
222
- {index !== sliceData.length - 1 && this.renderSeparator()}
223
- </View>
224
- ))
225
- }
254
+ <View
255
+ style={[
256
+ styles.containerSuggest,
257
+ {
258
+ left: x,
259
+ top: y,
260
+ width,
261
+ },
262
+ ]}>
263
+ {sliceData.map((item, index) => (
264
+ <View key={index.toString()}>
265
+ {this.renderItem({ item, index })}
266
+ {index !== sliceData.length - 1 &&
267
+ this.renderSeparator()}
268
+ </View>
269
+ ))}
226
270
  </View>
227
-
228
271
  );
229
272
  }
230
273
  return null;
231
274
  }
232
275
 
233
276
  renderItem = ({ item, index }) => {
234
- const {
235
- renderSuggestItem
236
- } = this.props;
277
+ const { renderSuggestItem } = this.props;
237
278
  return (
238
279
  <TouchableOpacity onPress={() => this.onPressItemSuggest(item)}>
239
- {
240
- (renderSuggestItem && typeof renderSuggestItem === 'function')
241
- ? renderSuggestItem({ item, index })
242
- : this.renderSuggestItemDefault({ item, index })
243
- }
280
+ {renderSuggestItem && typeof renderSuggestItem === 'function'
281
+ ? renderSuggestItem({ item, index })
282
+ : this.renderSuggestItemDefault({ item, index })}
244
283
  </TouchableOpacity>
245
284
  );
246
285
  };
247
286
 
248
- renderSeparator = () => (
249
- <View
250
- style={styles.separator}
251
- />
252
- );
287
+ renderSeparator = () => <View style={styles.separator} />;
253
288
 
254
289
  renderSuggestItemDefault = ({ item }) => {
255
290
  const { title, value } = item;
@@ -265,21 +300,34 @@ export default class AutoComplete extends Component {
265
300
  this.selectedItem = item;
266
301
  // Loop hashRef to update value of child
267
302
  Object.keys(this.hashmapRefs).forEach((key) => {
268
- if (this.hashmapRefs[key].setText && typeof this.hashmapRefs[key].setText === 'function') this.hashmapRefs[key].setText(this.getValueByKey(key, this.selectedItem));
269
- if (this.hashmapRefs[key].setValue && typeof this.hashmapRefs[key].setValue === 'function') this.hashmapRefs[key].setValue(this.getValueByKey(key, this.selectedItem));
303
+ if (
304
+ this.hashmapRefs[key].setText &&
305
+ typeof this.hashmapRefs[key].setText === 'function'
306
+ )
307
+ this.hashmapRefs[key].setText(
308
+ this.getValueByKey(key, this.selectedItem),
309
+ );
310
+ if (
311
+ this.hashmapRefs[key].setValue &&
312
+ typeof this.hashmapRefs[key].setValue === 'function'
313
+ )
314
+ this.hashmapRefs[key].setValue(
315
+ this.getValueByKey(key, this.selectedItem),
316
+ );
270
317
  });
271
318
 
272
- const {
273
- onSelected
274
- } = this.props;
275
- this.setState({
276
- suggest: {}
277
- }, () => {
278
- if (onSelected && typeof onSelected === 'function') {
279
- onSelected(item);
280
- }
281
- this.selectedItem = null;
282
- });
319
+ const { onSelected } = this.props;
320
+ this.setState(
321
+ {
322
+ suggest: {},
323
+ },
324
+ () => {
325
+ if (onSelected && typeof onSelected === 'function') {
326
+ onSelected(item);
327
+ }
328
+ this.selectedItem = null;
329
+ },
330
+ );
283
331
  };
284
332
 
285
333
  isShowingSuggest = () => {
@@ -288,11 +336,14 @@ export default class AutoComplete extends Component {
288
336
  };
289
337
 
290
338
  hideSuggest = () => {
291
- this.setState({
292
- suggest: {}
293
- }, () => {
294
- this.selectedItem = null;
295
- });
339
+ this.setState(
340
+ {
341
+ suggest: {},
342
+ },
343
+ () => {
344
+ this.selectedItem = null;
345
+ },
346
+ );
296
347
  };
297
348
  }
298
349
 
@@ -315,7 +366,7 @@ const styles = StyleSheet.create({
315
366
  shadowColor: '#000000',
316
367
  shadowOffset: {
317
368
  width: 0,
318
- height: 1
369
+ height: 1,
319
370
  },
320
371
  shadowRadius: 1,
321
372
  elevation: 2,
@@ -325,12 +376,16 @@ const styles = StyleSheet.create({
325
376
  height: 1,
326
377
  width: '100%',
327
378
  backgroundColor: Colors.placeholder,
328
- marginVertical: 10
329
- }
379
+ marginVertical: 10,
380
+ },
330
381
  });
331
382
 
332
383
  AutoComplete.propTypes = {
333
- style: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number]),
384
+ style: PropTypes.oneOfType([
385
+ PropTypes.array,
386
+ PropTypes.object,
387
+ PropTypes.number,
388
+ ]),
334
389
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
335
390
  renderSuggestItem: PropTypes.func,
336
391
  onSelected: PropTypes.func.isRequired,
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
- "name": "@momo-kits/auto-complete",
3
- "version": "0.0.59-beta",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {},
7
- "peerDependencies": {
8
- "react": "16.9.0",
9
- "react-native": ">=0.55",
10
- "@momo-kits/core": ">=0.0.4-beta",
11
- "lodash": "^4.17.15",
12
- "prop-types": "^15.7.2"
13
- },
14
- "devDependencies": {},
15
- "license": "MoMo"
2
+ "name": "@momo-kits/auto-complete",
3
+ "version": "0.0.59-beta.2",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {},
7
+ "peerDependencies": {
8
+ "react": "16.9.0",
9
+ "react-native": ">=0.55",
10
+ "@momo-kits/core": ">=0.0.4-beta",
11
+ "lodash": "^4.17.15",
12
+ "prop-types": "^15.7.2"
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/auto-complete new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/auto-complete"}'
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/auto-complete new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/auto-complete"}'