@momo-kits/auto-complete 0.0.66-alpha.12 → 0.0.66-alpha.13
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/AutoComplete.js +89 -61
- package/package.json +15 -15
package/AutoComplete.js
CHANGED
|
@@ -34,34 +34,35 @@ export default class AutoComplete extends Component {
|
|
|
34
34
|
*/
|
|
35
35
|
measure() {
|
|
36
36
|
try {
|
|
37
|
-
Object.keys(this.hashmapRefs)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
Object.keys(this.hashmapRefs)
|
|
38
|
+
?.forEach((key) => {
|
|
39
|
+
const node = findNodeHandle(this.hashmapRefs[key]);
|
|
40
|
+
if (node) {
|
|
41
|
+
if (Platform.OS === 'android') {
|
|
42
|
+
UIManager.measureLayoutRelativeToParent(
|
|
43
|
+
node,
|
|
44
|
+
(e) => {
|
|
45
|
+
console.error(e);
|
|
46
|
+
},
|
|
47
|
+
(x, y, width, height) => {
|
|
48
|
+
this.hashmapPosition[key] = {
|
|
49
|
+
x,
|
|
50
|
+
y: y + height,
|
|
51
|
+
width,
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
);
|
|
55
|
+
} else {
|
|
56
|
+
UIManager.measure(node, (x, y, width, height) => {
|
|
47
57
|
this.hashmapPosition[key] = {
|
|
48
58
|
x,
|
|
49
59
|
y: y + height,
|
|
50
60
|
width,
|
|
51
61
|
};
|
|
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
|
+
}
|
|
62
64
|
}
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
+
});
|
|
65
66
|
} catch (e) {
|
|
66
67
|
console.log(`try catch :: ${e}`);
|
|
67
68
|
}
|
|
@@ -78,25 +79,25 @@ export default class AutoComplete extends Component {
|
|
|
78
79
|
const splitKey = key.split('-');
|
|
79
80
|
return splitKey.length > 1
|
|
80
81
|
? splitKey.reduce(
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
(result, item, index) =>
|
|
83
|
+
(result =
|
|
84
|
+
result +
|
|
85
|
+
value[item] +
|
|
86
|
+
(index === splitKey.length - 1
|
|
87
|
+
? ''
|
|
88
|
+
: !!value[item]
|
|
89
|
+
? ' '
|
|
90
|
+
: '')),
|
|
91
|
+
'',
|
|
92
|
+
)
|
|
92
93
|
: key === 'phone'
|
|
93
|
-
|
|
94
|
-
|
|
94
|
+
? NumberUtils.formatPhoneNumberVN(value[key])
|
|
95
|
+
: value[key];
|
|
95
96
|
};
|
|
96
97
|
|
|
97
98
|
/**
|
|
98
99
|
* loop all child components
|
|
99
|
-
* @param {
|
|
100
|
+
* @param {'Children'} components ;
|
|
100
101
|
*/
|
|
101
102
|
cloneChildren(components) {
|
|
102
103
|
if (components) {
|
|
@@ -113,7 +114,12 @@ export default class AutoComplete extends Component {
|
|
|
113
114
|
});
|
|
114
115
|
}
|
|
115
116
|
|
|
116
|
-
const {
|
|
117
|
+
const {
|
|
118
|
+
onChangeText,
|
|
119
|
+
keyAutoComplete,
|
|
120
|
+
onFocus,
|
|
121
|
+
onEndEditing
|
|
122
|
+
} =
|
|
117
123
|
child.props;
|
|
118
124
|
if (keyAutoComplete) {
|
|
119
125
|
// Update props when component have keyAutoComplete
|
|
@@ -245,7 +251,11 @@ export default class AutoComplete extends Component {
|
|
|
245
251
|
suggest.data.length > 0 &&
|
|
246
252
|
suggest.isShowAutoComplete
|
|
247
253
|
) {
|
|
248
|
-
const {
|
|
254
|
+
const {
|
|
255
|
+
x = 0,
|
|
256
|
+
y = 0,
|
|
257
|
+
width = 0
|
|
258
|
+
} = suggest.position || {};
|
|
249
259
|
const sliceData = suggest.data.slice(0, numSuggest);
|
|
250
260
|
|
|
251
261
|
return (
|
|
@@ -260,7 +270,10 @@ export default class AutoComplete extends Component {
|
|
|
260
270
|
]}>
|
|
261
271
|
{sliceData.map((item, index) => (
|
|
262
272
|
<View key={index.toString()}>
|
|
263
|
-
{this.renderItem({
|
|
273
|
+
{this.renderItem({
|
|
274
|
+
item,
|
|
275
|
+
index
|
|
276
|
+
})}
|
|
264
277
|
{index !== sliceData.length - 1 &&
|
|
265
278
|
this.renderSeparator()}
|
|
266
279
|
</View>
|
|
@@ -271,21 +284,33 @@ export default class AutoComplete extends Component {
|
|
|
271
284
|
return null;
|
|
272
285
|
}
|
|
273
286
|
|
|
274
|
-
renderItem = ({
|
|
287
|
+
renderItem = ({
|
|
288
|
+
item,
|
|
289
|
+
index
|
|
290
|
+
}) => {
|
|
275
291
|
const { renderSuggestItem } = this.props;
|
|
276
292
|
return (
|
|
277
|
-
<TouchableOpacity onPress={() => this.onPressItemSuggest(item)}>
|
|
293
|
+
<TouchableOpacity onPress={() => this.onPressItemSuggest(item, index)}>
|
|
278
294
|
{renderSuggestItem && typeof renderSuggestItem === 'function'
|
|
279
|
-
? renderSuggestItem({
|
|
280
|
-
|
|
295
|
+
? renderSuggestItem({
|
|
296
|
+
item,
|
|
297
|
+
index
|
|
298
|
+
})
|
|
299
|
+
: this.renderSuggestItemDefault({
|
|
300
|
+
item,
|
|
301
|
+
index
|
|
302
|
+
})}
|
|
281
303
|
</TouchableOpacity>
|
|
282
304
|
);
|
|
283
305
|
};
|
|
284
306
|
|
|
285
|
-
renderSeparator = () => <View style={styles.separator}
|
|
307
|
+
renderSeparator = () => <View style={styles.separator}/>;
|
|
286
308
|
|
|
287
309
|
renderSuggestItemDefault = ({ item }) => {
|
|
288
|
-
const {
|
|
310
|
+
const {
|
|
311
|
+
title,
|
|
312
|
+
value
|
|
313
|
+
} = item;
|
|
289
314
|
return (
|
|
290
315
|
<View style={[styles.viewSuggest]}>
|
|
291
316
|
<Text.Title>{title}</Text.Title>
|
|
@@ -297,22 +322,25 @@ export default class AutoComplete extends Component {
|
|
|
297
322
|
onPressItemSuggest = (item) => {
|
|
298
323
|
this.selectedItem = item;
|
|
299
324
|
// Loop hashRef to update value of child
|
|
300
|
-
Object.keys(this.hashmapRefs)
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
this.
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
325
|
+
Object.keys(this.hashmapRefs)
|
|
326
|
+
.forEach((key) => {
|
|
327
|
+
if (
|
|
328
|
+
this.hashmapRefs[key].setText &&
|
|
329
|
+
typeof this.hashmapRefs[key].setText === 'function'
|
|
330
|
+
) {
|
|
331
|
+
this.hashmapRefs[key].setText(
|
|
332
|
+
this.getValueByKey(key, this.selectedItem),
|
|
333
|
+
);
|
|
334
|
+
}
|
|
335
|
+
if (
|
|
336
|
+
this.hashmapRefs[key].setValue &&
|
|
337
|
+
typeof this.hashmapRefs[key].setValue === 'function'
|
|
338
|
+
) {
|
|
339
|
+
this.hashmapRefs[key].setValue(
|
|
340
|
+
this.getValueByKey(key, this.selectedItem),
|
|
341
|
+
);
|
|
342
|
+
}
|
|
343
|
+
});
|
|
316
344
|
|
|
317
345
|
const { onSelected } = this.props;
|
|
318
346
|
this.setState(
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
2
|
+
"name": "@momo-kits/auto-complete",
|
|
3
|
+
"version": "0.0.66-alpha.13",
|
|
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
|
+
}
|