@momo-kits/auto-complete 0.0.53-beta.66 → 0.0.54-beta.1

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