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

package/lib/components/DropDown.d.ts

@@ -22,9 +22,11 @@ export interface DropDownProperties {
     nativeID?: string;
     icon?: string | undefined;
     arrowColor?: string | undefined;
+    searchable?: boolean;
 }
 export interface DropDownState {
     modalOpen: boolean;
+    searchText: string;
 }
 export declare class DropDown extends React.Component<DropDownProperties, DropDownState> {
     static defaultProps: {
@@ -32,6 +34,12 @@ export declare class DropDown extends React.Component<DropDownProperties, DropDo
     };
     state: DropDownState;
     handleItemPress: (value: any) => void;
+    filteredItems: () => {
+        label: string;
+        value: any;
+        icon?: string | undefined;
+        nativeID?: string | undefined;
+    }[];
     renderClosedDropDown: (item: any, inputStyle: any) => JSX.Element | null;
     getStyles: () => any;
     render(): JSX.Element;

package/lib/components/DropDown.js

@@ -97,13 +97,19 @@ class DropDown extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
-            modalOpen: false
+            modalOpen: false,
+            searchText: ''
         };
         this.handleItemPress = (value) => {
             const { onChange } = this.props;
             this.setState({ modalOpen: false });
             onChange(value);
         };
+        this.filteredItems = () => {
+            const { items } = this.props;
+            const { searchText } = this.state;
+            return items.filter(item => item.label.toLowerCase().includes(searchText.toLowerCase()));
+        };
         this.renderClosedDropDown = (item, inputStyle) => {
             const { iconComponent } = this.props;
             const theme = (0, theme_1.getTheme)();
@@ -186,9 +192,10 @@ class DropDown extends React.Component {
                     right: 16
                 },
                 modalOverlay: {
-                    justifyContent: 'center'
+                    justifyContent: this.props.items.length >= 10 && this.props.searchable ? 'flex-start' : 'center'
                 },
                 modalContainer: {
+                    maxHeight: '95%',
                     borderRadius: 5,
                     backgroundColor: theme.backgroundColor1,
                     margin: 16
@@ -234,17 +241,51 @@ class DropDown extends React.Component {
                     minWidth: 25,
                     textAlignVertical: 'center',
                     flex: 0
+                },
+                searchContainer: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: 10,
+                    marginTop: 8,
+                    marginRight: 16
+                },
+                searchLabel: {
+                    fontSize: 16,
+                    marginLeft: 16,
+                    fontFamily: theme.fontFamily1,
+                },
+                inputWrapper: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: '#ccc',
+                    paddingHorizontal: 10,
+                    backgroundColor: 'white',
+                    flex: 1,
+                    maxWidth: '100%',
+                    minWidth: 150,
+                    overflow: 'hidden',
+                    marginLeft: 16
+                },
+                searchInput: {
+                    flex: 1,
+                    height: 40
+                },
+                searchIcon: {
+                    marginLeft: 10
                 }
             });
             return styles;
         };
     }
     render() {
-        const { modalOpen } = this.state;
-        const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, iconComponent, nativeID, onPress, icon } = this.props;
+        const { modalOpen, searchText } = this.state;
+        const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, iconComponent, nativeID, onPress, icon, searchable } = this.props;
         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()));
         return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => __awaiter(this, void 0, void 0, function* () {
                 if (onPress) {
                     const result = yield onPress();
@@ -252,7 +293,7 @@ class DropDown extends React.Component {
                         return;
                     }
                 }
-                this.setState({ modalOpen: true });
+                this.setState({ modalOpen: true, searchText: '' });
             }), disabled: disabled },
             React.createElement(react_native_1.View, { nativeID: nativeID, testID: (0, test_1.getTestID)(nativeID), style: [
                     styles.container,
@@ -262,7 +303,7 @@ class DropDown extends React.Component {
                 icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.iconOnLine })) : (React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)),
                 this.renderClosedDropDown(selectedItem, inputStyle),
                 React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay },
-                    React.createElement(react_native_1.TouchableWithoutFeedback, null,
+                    React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: react_native_1.Keyboard.dismiss },
                         React.createElement(react_native_1.View, { style: [
                                 styles.modalContainer,
                                 react_native_1.Platform.OS === 'web' && {
@@ -273,11 +314,23 @@ class DropDown extends React.Component {
                                     maxHeight: 300,
                                     justifyContent: 'center'
                                 }
-                            ] }, items.length > 0 ? (React.createElement(react_native_1.FlatList, { data: items, initialNumToRender: items.length, keyExtractor: item => item.value.toString(), renderItem: ({ item, index }) => {
-                                return (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === items.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)))))))));
+                            ] },
+                            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 }));
+                                } })) : (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)))))))));
     }
 }
 exports.DropDown = DropDown;

package/lib/components/RadioButton.d.ts

@@ -3,6 +3,7 @@ export interface RadioButtonProps {
     items: Array<{
         label: string;
         value: number;
+        nativeID?: string;
     }>;
     value: number;
     onChange: (value: number) => void;

package/lib/components/RadioButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButton = void 0;
 const React = require("react");
 const react_native_1 = require("react-native");
+const test_1 = require("../modules/test");
 const theme_1 = require("../modules/theme");
 class RadioButton extends React.Component {
     constructor() {
@@ -45,8 +46,8 @@ class RadioButton extends React.Component {
     render() {
         const { items, value, onChange } = this.props;
         const styles = this.getStyles();
-        return (React.createElement(react_native_1.View, null, items.map(item => (React.createElement(react_native_1.TouchableWithoutFeedback, { key: item.value, onPress: () => onChange(item.value) },
-            React.createElement(react_native_1.View, { style: styles.radioContainer },
+        return (React.createElement(react_native_1.View, null, items.map(item => (React.createElement(react_native_1.TouchableWithoutFeedback, { key: item.value, onPress: () => onChange(item.value), testID: (0, test_1.getTestID)(item.nativeID) },
+            React.createElement(react_native_1.View, { style: styles.radioContainer, nativeID: item.nativeID },
                 React.createElement(react_native_1.View, { style: styles.radioButtom }, item.value === value && React.createElement(react_native_1.View, { style: styles.radioMark })),
                 React.createElement(react_native_1.Text, { style: styles.labelRadioButtom }, item.label)))))));
     }

package/package.json

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