secullum-react-native-ui 4.15.0 → 4.15.1-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.
|
@@ -22,9 +22,11 @@ export interface DropDownProperties {
|
|
|
22
22
|
nativeID?: string;
|
|
23
23
|
icon?: string | undefined;
|
|
24
24
|
arrowColor?: string | undefined;
|
|
25
|
+
searchable?: boolean;
|
|
25
26
|
}
|
|
26
27
|
export interface DropDownState {
|
|
27
28
|
modalOpen: boolean;
|
|
29
|
+
searchText: string;
|
|
28
30
|
}
|
|
29
31
|
export declare class DropDown extends React.Component<DropDownProperties, DropDownState> {
|
|
30
32
|
static defaultProps: {
|
|
@@ -32,6 +34,13 @@ export declare class DropDown extends React.Component<DropDownProperties, DropDo
|
|
|
32
34
|
};
|
|
33
35
|
state: DropDownState;
|
|
34
36
|
handleItemPress: (value: any) => void;
|
|
37
|
+
filteredItems: () => {
|
|
38
|
+
label: string;
|
|
39
|
+
value: any;
|
|
40
|
+
icon?: string | undefined;
|
|
41
|
+
nativeID?: string | undefined;
|
|
42
|
+
}[];
|
|
43
|
+
shouldDisplaySearchField: () => boolean | undefined;
|
|
35
44
|
renderClosedDropDown: (item: any, inputStyle: any) => JSX.Element | null;
|
|
36
45
|
getStyles: () => any;
|
|
37
46
|
render(): JSX.Element;
|
|
@@ -97,13 +97,23 @@ class DropDown extends React.Component {
|
|
|
97
97
|
constructor() {
|
|
98
98
|
super(...arguments);
|
|
99
99
|
this.state = {
|
|
100
|
-
modalOpen: false
|
|
100
|
+
modalOpen: false,
|
|
101
|
+
searchText: ''
|
|
101
102
|
};
|
|
102
103
|
this.handleItemPress = (value) => {
|
|
103
104
|
const { onChange } = this.props;
|
|
104
105
|
this.setState({ modalOpen: false });
|
|
105
106
|
onChange(value);
|
|
106
107
|
};
|
|
108
|
+
this.filteredItems = () => {
|
|
109
|
+
const { items } = this.props;
|
|
110
|
+
const { searchText } = this.state;
|
|
111
|
+
return items.filter(item => item.label.toLowerCase().includes(searchText.toLowerCase()));
|
|
112
|
+
};
|
|
113
|
+
this.shouldDisplaySearchField = () => {
|
|
114
|
+
const { items, searchable } = this.props;
|
|
115
|
+
return items.length >= 10 && searchable;
|
|
116
|
+
};
|
|
107
117
|
this.renderClosedDropDown = (item, inputStyle) => {
|
|
108
118
|
const { iconComponent } = this.props;
|
|
109
119
|
const theme = (0, theme_1.getTheme)();
|
|
@@ -186,9 +196,10 @@ class DropDown extends React.Component {
|
|
|
186
196
|
right: 16
|
|
187
197
|
},
|
|
188
198
|
modalOverlay: {
|
|
189
|
-
justifyContent: 'center'
|
|
199
|
+
justifyContent: this.shouldDisplaySearchField() ? 'flex-start' : 'center'
|
|
190
200
|
},
|
|
191
201
|
modalContainer: {
|
|
202
|
+
maxHeight: '95%',
|
|
192
203
|
borderRadius: 5,
|
|
193
204
|
backgroundColor: theme.backgroundColor1,
|
|
194
205
|
margin: 16
|
|
@@ -234,17 +245,52 @@ class DropDown extends React.Component {
|
|
|
234
245
|
minWidth: 25,
|
|
235
246
|
textAlignVertical: 'center',
|
|
236
247
|
flex: 0
|
|
248
|
+
},
|
|
249
|
+
searchContainer: {
|
|
250
|
+
flexDirection: 'row',
|
|
251
|
+
alignItems: 'center',
|
|
252
|
+
justifyContent: 'space-between',
|
|
253
|
+
marginBottom: 10,
|
|
254
|
+
marginTop: 8,
|
|
255
|
+
marginRight: 16
|
|
256
|
+
},
|
|
257
|
+
searchLabel: {
|
|
258
|
+
fontSize: 16,
|
|
259
|
+
marginLeft: 16,
|
|
260
|
+
fontFamily: theme.fontFamily1,
|
|
261
|
+
},
|
|
262
|
+
inputWrapper: {
|
|
263
|
+
flexDirection: 'row',
|
|
264
|
+
alignItems: 'center',
|
|
265
|
+
borderWidth: 1,
|
|
266
|
+
borderColor: '#ccc',
|
|
267
|
+
paddingHorizontal: 10,
|
|
268
|
+
backgroundColor: 'white',
|
|
269
|
+
flex: 1,
|
|
270
|
+
maxWidth: '100%',
|
|
271
|
+
minWidth: 150,
|
|
272
|
+
overflow: 'hidden',
|
|
273
|
+
marginLeft: 16
|
|
274
|
+
},
|
|
275
|
+
searchInput: {
|
|
276
|
+
flex: 1,
|
|
277
|
+
height: 40
|
|
278
|
+
},
|
|
279
|
+
searchIcon: {
|
|
280
|
+
marginLeft: 10
|
|
237
281
|
}
|
|
238
282
|
});
|
|
239
283
|
return styles;
|
|
240
284
|
};
|
|
241
285
|
}
|
|
242
286
|
render() {
|
|
243
|
-
const { modalOpen } = this.state;
|
|
244
|
-
const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, iconComponent, nativeID, onPress, icon } = this.props;
|
|
287
|
+
const { modalOpen, searchText } = this.state;
|
|
288
|
+
const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, iconComponent, nativeID, onPress, icon, searchable } = this.props;
|
|
245
289
|
const selectedItem = items.find(x => x.value === value);
|
|
246
290
|
const styles = this.getStyles();
|
|
247
291
|
const theme = (0, theme_1.getTheme)();
|
|
292
|
+
const filteredItems = this.filteredItems();
|
|
293
|
+
const visibleItems = searchable ? filteredItems : items;
|
|
248
294
|
return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => __awaiter(this, void 0, void 0, function* () {
|
|
249
295
|
if (onPress) {
|
|
250
296
|
const result = yield onPress();
|
|
@@ -252,7 +298,7 @@ class DropDown extends React.Component {
|
|
|
252
298
|
return;
|
|
253
299
|
}
|
|
254
300
|
}
|
|
255
|
-
this.setState({ modalOpen: true });
|
|
301
|
+
this.setState({ modalOpen: true, searchText: '' });
|
|
256
302
|
}), disabled: disabled },
|
|
257
303
|
React.createElement(react_native_1.View, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [
|
|
258
304
|
styles.container,
|
|
@@ -262,7 +308,7 @@ class DropDown extends React.Component {
|
|
|
262
308
|
icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.iconOnLine })) : (React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)),
|
|
263
309
|
this.renderClosedDropDown(selectedItem, inputStyle),
|
|
264
310
|
React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay },
|
|
265
|
-
React.createElement(react_native_1.TouchableWithoutFeedback,
|
|
311
|
+
React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: react_native_1.Keyboard.dismiss },
|
|
266
312
|
React.createElement(react_native_1.View, { style: [
|
|
267
313
|
styles.modalContainer,
|
|
268
314
|
react_native_1.Platform.OS === 'web' && {
|
|
@@ -273,11 +319,16 @@ class DropDown extends React.Component {
|
|
|
273
319
|
maxHeight: 300,
|
|
274
320
|
justifyContent: 'center'
|
|
275
321
|
}
|
|
276
|
-
] },
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
322
|
+
] },
|
|
323
|
+
this.shouldDisplaySearchField() && (React.createElement(react_native_1.View, { style: styles.searchContainer },
|
|
324
|
+
React.createElement(react_native_1.View, { style: styles.inputWrapper },
|
|
325
|
+
React.createElement(react_native_1.TextInput, { style: styles.searchInput, value: searchText, placeholder: "Buscar", onChangeText: (text) => this.setState({ searchText: text }) }),
|
|
326
|
+
React.createElement(FontAwesome_1.default, { name: "search", size: 16, color: "gray", style: styles.searchIcon })))),
|
|
327
|
+
filteredItems.length > 0 ? (React.createElement(react_native_1.FlatList, { data: visibleItems, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: ({ item, index }) => {
|
|
328
|
+
return (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === visibleItems.length - 1, label: item.label, value: item.value, onPress: this.handleItemPress, icon: item.icon, iconComponent: iconComponent }));
|
|
329
|
+
} })) : (React.createElement(react_native_1.View, { style: styles.emptyMessageContainer },
|
|
330
|
+
React.createElement(FontAwesome_1.default, { name: "warning", color: theme.warningColor, size: 24 }),
|
|
331
|
+
React.createElement(react_native_1.Text, { style: styles.modalItem }, emptyMessage)))))))));
|
|
281
332
|
}
|
|
282
333
|
}
|
|
283
334
|
exports.DropDown = DropDown;
|