secullum-react-native-ui 4.15.1-beta.0 → 4.15.1-beta.1

package/lib/components/DropDown.d.ts

@@ -40,6 +40,7 @@ export declare class DropDown extends React.Component<DropDownProperties, DropDo
         icon?: string | undefined;
         nativeID?: string | undefined;
     }[];
+    shouldDisplaySearchField: () => boolean | undefined;
     renderClosedDropDown: (item: any, inputStyle: any) => JSX.Element | null;
     getStyles: () => any;
     render(): JSX.Element;

package/lib/components/DropDown.js

@@ -110,6 +110,10 @@ class DropDown extends React.Component {
             const { searchText } = this.state;
             return items.filter(item => item.label.toLowerCase().includes(searchText.toLowerCase()));
         };
+        this.shouldDisplaySearchField = () => {
+            const { items, searchable } = this.props;
+            return items.length >= 10 && searchable;
+        };
         this.renderClosedDropDown = (item, inputStyle) => {
             const { iconComponent } = this.props;
             const theme = (0, theme_1.getTheme)();
@@ -192,7 +196,7 @@ class DropDown extends React.Component {
                     right: 16
                 },
                 modalOverlay: {
-                    justifyContent: this.props.items.length >= 10 && this.props.searchable ? 'flex-start' : 'center'
+                    justifyContent: this.shouldDisplaySearchField() ? 'flex-start' : 'center'
                 },
                 modalContainer: {
                     maxHeight: '95%',
@@ -285,7 +289,8 @@ class DropDown extends React.Component {
         const selectedItem = items.find(x => x.value === value);
         const styles = this.getStyles();
         const theme = (0, theme_1.getTheme)();
-        const filteredItems = items.filter(item => item.label.toLowerCase().includes(searchText.toLowerCase()));
+        const filteredItems = this.filteredItems();
+        const visibleItems = searchable ? filteredItems : items;
         return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => __awaiter(this, void 0, void 0, function* () {
                 if (onPress) {
                     const result = yield onPress();
@@ -315,19 +320,12 @@ class DropDown extends React.Component {
                                     justifyContent: 'center'
                                 }
                             ] },
-                            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, {
-                                style: styles.searchInput,
-                                value: searchText,
-                                placeholder: 'Buscar',
-                                onChangeText: (text) => this.setState({ searchText: text })
-                            }), React.createElement(FontAwesome_1.default, {
-                                name: "search",
-                                size: 16,
-                                color: "gray",
-                                style: styles.searchIcon
-                            })))),
-                            filteredItems.length > 0 ? (React.createElement(react_native_1.FlatList, { data: searchable ? filteredItems : items, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: ({ item, index }) => {
-                                    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 }));
+                            this.shouldDisplaySearchField() && (React.createElement(react_native_1.View, { style: styles.searchContainer },
+                                React.createElement(react_native_1.View, { style: styles.inputWrapper },
+                                    React.createElement(react_native_1.TextInput, { style: styles.searchInput, value: searchText, placeholder: "Buscar", onChangeText: (text) => this.setState({ searchText: text }) }),
+                                    React.createElement(FontAwesome_1.default, { name: "search", size: 16, color: "gray", style: styles.searchIcon })))),
+                            filteredItems.length > 0 ? (React.createElement(react_native_1.FlatList, { data: visibleItems, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: ({ item, index }) => {
+                                    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 }));
                                 } })) : (React.createElement(react_native_1.View, { style: styles.emptyMessageContainer },
                                 React.createElement(FontAwesome_1.default, { name: "warning", color: theme.warningColor, size: 24 }),
                                 React.createElement(react_native_1.Text, { style: styles.modalItem }, emptyMessage)))))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "secullum-react-native-ui",
-  "version": "4.15.1-beta.0",
+  "version": "4.15.1-beta.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [