secullum-react-native-ui 4.16.2 → 4.17.1

package/lib/components/DropDown.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { IconProps } from 'react-native-vector-icons/Icon';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+declare type DropDownItemData = {
+    label: string;
+    value: any;
+    icon?: string;
+    nativeID?: string;
+};
 export interface DropDownProperties {
     label?: string;
-    items: Array<{
-        label: string;
-        value: any;
-        icon?: string;
-        nativeID?: string;
-    }>;
+    items: DropDownItemData[];
     value: any | null;
     onChange: (value: any) => void;
     onPress?: () => void | boolean | Promise<void> | Promise<boolean>;
@@ -23,11 +24,19 @@ export interface DropDownProperties {
     icon?: string | undefined;
     arrowColor?: string | undefined;
     searchable?: SearchableProps;
+    virtualized?: true | VirtualizedProps;
+    useKeyboardAvoidingView?: boolean;
+    animation?: 'none' | 'fade' | 'slide';
 }
 export interface SearchableProps {
     placeHolder: string;
     minItemsToSearch?: number;
 }
+export interface VirtualizedProps {
+    initialNumToRender?: number;
+    maxToRenderPerBatch?: number;
+    windowSize?: number;
+}
 export interface DropDownState {
     modalOpen: boolean;
     searchText: string;
@@ -35,14 +44,11 @@ export interface DropDownState {
 export declare class DropDown extends React.Component<DropDownProperties, DropDownState> {
     state: DropDownState;
     handleItemPress: (value: any) => void;
-    filterItems: () => {
-        label: string;
-        value: any;
-        icon?: string | undefined;
-        nativeID?: string | undefined;
-    }[];
+    filterItems: () => DropDownItemData[];
     shouldDisplaySearchField: () => boolean | undefined;
     renderClosedDropDown: (item: any, inputStyle: any) => JSX.Element | null;
     getStyles: () => any;
+    renderItemsList: (filteredItems: DropDownItemData[]) => JSX.Element;
     render(): JSX.Element;
 }
+export {};

package/lib/components/DropDown.js

@@ -93,6 +93,11 @@ class DropDownItem extends React.PureComponent {
             } }, this.renderOpenDropDownItem()));
     }
 }
+const DEFAULT_VIRTUALIZED_PROPS = {
+    initialNumToRender: 20,
+    maxToRenderPerBatch: 30,
+    windowSize: 10
+};
 class DropDown extends React.Component {
     constructor() {
         super(...arguments);
@@ -287,14 +292,43 @@ class DropDown extends React.Component {
             });
             return styles;
         };
+        this.renderItemsList = (filteredItems) => {
+            const { iconComponent, virtualized } = this.props;
+            const renderItem = ({ item, index }) => (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === filteredItems.length - 1, label: item.label, value: item.value, onPress: this.handleItemPress, icon: item.icon, iconComponent: iconComponent }));
+            if (virtualized == null) {
+                return (React.createElement(react_native_1.FlatList, { data: filteredItems, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: renderItem }));
+            }
+            const virtualizedProps = typeof virtualized === 'object'
+                ? Object.assign(Object.assign({}, DEFAULT_VIRTUALIZED_PROPS), virtualized) : DEFAULT_VIRTUALIZED_PROPS;
+            return (React.createElement(react_native_1.VirtualizedList, { getItem: (_, index) => filteredItems[index], getItemCount: () => filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: renderItem, initialNumToRender: virtualizedProps.initialNumToRender, maxToRenderPerBatch: virtualizedProps.maxToRenderPerBatch, windowSize: virtualizedProps.windowSize }));
+        };
     }
     render() {
         const { modalOpen, searchText } = this.state;
-        const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, iconComponent, nativeID, onPress, icon, searchable } = this.props;
+        const { label, items, value, emptyMessage, style, disabledStyle, disabled, labelStyle, inputStyle, nativeID, onPress, icon, searchable, useKeyboardAvoidingView, animation } = this.props;
         const selectedItem = items.find(x => x.value === value);
         const styles = this.getStyles();
         const theme = (0, theme_1.getTheme)();
         const filteredItems = searchable ? this.filterItems() : items;
+        const conteudoModal = (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' && {
+                        marginVertical: '10px',
+                        marginHorizontal: 'auto',
+                        width: '90%',
+                        maxWidth: 450,
+                        maxHeight: 300,
+                        justifyContent: 'center'
+                    }
+                ] },
+                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, { nativeID: nativeID + '-text-search', style: styles.searchInput, value: searchText, placeholder: searchable && searchable.placeHolder, onChangeText: text => this.setState({ searchText: text }) }),
+                        React.createElement(FontAwesome_1.default, { name: "search", size: 16, color: "gray", style: styles.searchIcon })))),
+                filteredItems.length > 0 ? (this.renderItemsList(filteredItems)) : (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))))));
         return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => __awaiter(this, void 0, void 0, function* () {
                 if (onPress) {
                     const result = yield onPress();
@@ -311,28 +345,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, { onPress: react_native_1.Keyboard.dismiss },
-                        React.createElement(react_native_1.View, { style: [
-                                styles.modalContainer,
-                                react_native_1.Platform.OS === 'web' && {
-                                    marginVertical: '10px',
-                                    marginHorizontal: 'auto',
-                                    width: '90%',
-                                    maxWidth: 450,
-                                    maxHeight: 300,
-                                    justifyContent: 'center'
-                                }
-                            ] },
-                            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, { nativeID: nativeID + '-text-search', style: styles.searchInput, value: searchText, placeholder: searchable && searchable.placeHolder, 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: filteredItems, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: ({ item, index }) => {
-                                    return (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === filteredItems.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)))))))));
+                React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay, animation: animation !== null && animation !== void 0 ? animation : 'fade' }, useKeyboardAvoidingView ? (React.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height' }, conteudoModal)) : (conteudoModal)))));
     }
 }
 exports.DropDown = DropDown;

package/lib/components/Message.d.ts

@@ -7,6 +7,7 @@ export interface MessageProperties {
     onRequestClose?: () => void;
     nativeID?: string;
     textStyle?: StyleProp<TextStyle>;
+    animation?: 'none' | 'fade' | 'slide';
 }
 export declare class Message extends React.Component<MessageProperties> {
     static defaultProps: {

package/lib/components/Message.js

@@ -37,10 +37,10 @@ class Message extends React.Component {
         };
     }
     render() {
-        const { message, visible, type, onRequestClose, nativeID, textStyle } = this.props;
+        const { message, visible, type, onRequestClose, nativeID, textStyle, animation } = this.props;
         const styles = this.getStyles();
         const theme = (0, theme_1.getTheme)();
-        return (React.createElement(Modal_1.Modal, { visible: visible, onRequestClose: onRequestClose, overlayStyle: styles.overlay },
+        return (React.createElement(Modal_1.Modal, { visible: visible, onRequestClose: onRequestClose, overlayStyle: styles.overlay, animation: animation !== null && animation !== void 0 ? animation : 'fade' },
             React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.container },
                 React.createElement(FontAwesome_1.default, { name: type === 'warning' ? 'warning' : 'check-circle', color: type === 'warning' ? theme.warningColor : theme.successColor, size: (0, layout_1.isTablet)() ? 52 : 42 }),
                 React.createElement(react_native_1.Text, { style: [styles.text, textStyle], testID: (0, test_1.getTestID)(nativeID) }, message))));

package/lib/components/Modal.d.ts

@@ -5,6 +5,7 @@ export interface ModalProperties {
     visible: boolean;
     overlayStyle?: StyleProp<ViewStyle>;
     onRequestClose?: () => void;
+    animation?: 'none' | 'fade' | 'slide';
 }
 interface ModalState {
     isMounted: boolean;

package/lib/components/Modal.js

@@ -19,9 +19,9 @@ class Modal extends React.Component {
         }
     }
     render() {
-        const { children, visible, overlayStyle, onRequestClose } = this.props;
+        const { children, visible, overlayStyle, onRequestClose, animation } = this.props;
         const { isMounted } = this.state;
-        return (React.createElement(react_native_1.Modal, { animationType: "fade", transparent: true, visible: visible, supportedOrientations: ['landscape', 'portrait'], onRequestClose: onRequestClose, onShow: this.handleShow },
+        return (React.createElement(react_native_1.Modal, { animationType: animation !== null && animation !== void 0 ? animation : 'fade', transparent: true, visible: visible, supportedOrientations: ['landscape', 'portrait'], onRequestClose: onRequestClose, onShow: this.handleShow },
             React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: onRequestClose },
                 React.createElement(react_native_1.View, { style: [styles.overlay, overlayStyle] }, react_native_1.Platform.OS !== 'android' || isMounted ? children : React.createElement(react_native_1.View, null)))));
     }

package/package.json

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