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