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