secullum-react-native-ui 4.16.2-beta.5 → 4.16.2-beta.7

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,17 @@ export interface DropDownProperties {
     icon?: string | undefined;
     arrowColor?: string | undefined;
     searchable?: SearchableProps;
+    virtualized?: true | VirtualizedProps | null;
 }
 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 +42,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 = {
+    initialNumToRender: 20,
+    maxToRenderPerBatch: 30,
+    windowSize: 10
+};
 class DropDown extends React.Component {
     constructor() {
         super(...arguments);
@@ -287,10 +292,20 @@ 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 = virtualized === true
+                ? Object.assign({}, DEFAULT_VIRTUALIZED) : Object.assign(Object.assign({}, DEFAULT_VIRTUALIZED), virtualized);
+            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 } = this.props;
         const selectedItem = items.find(x => x.value === value);
         const styles = this.getStyles();
         const theme = (0, theme_1.getTheme)();
@@ -328,9 +343,7 @@ class DropDown extends React.Component {
                                 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 },
+                            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)))))))));
     }

package/lib/components/RangeDatePicker.web.d.ts

@@ -20,7 +20,7 @@ export interface RangeDatePickerState {
 export declare class RangeDatePicker extends React.Component<RangeDatePickerProperties, RangeDatePickerState> {
     state: RangeDatePickerState;
     private calendarRef;
-    componentDidMount(): void;
+    componentWillMount(): void;
     componentWillUnmount(): void;
     handleClick: (event: MouseEvent) => void;
     handleDatePickerPress: () => void;

package/lib/components/RangeDatePicker.web.js

@@ -11,38 +11,6 @@ const layout_1 = require("../modules/layout");
 require("react-date-range/dist/styles.css");
 const react_native_1 = require("react-native");
 require("../../styles/RangeDatePicker.css");
-function compareDates(date1, date2) {
-    if (date1 instanceof Date && date2 instanceof Date) {
-        return date1.getTime() === date2.getTime();
-    }
-    return date1 === date2;
-}
-class PureDateRange extends React.Component {
-    // Without this check, every time the parent re-renders it would
-    // recreate the DateRange with the initial startDate value,
-    // even if the date hasn't actually changed.
-    // This causes the calendar to reset and the user loses the current
-    // selection while interacting.
-    // Related issue on GitLab 12293
-    shouldComponentUpdate(nextProps) {
-        if (nextProps.onChange !== this.props.onChange) {
-            return true;
-        }
-        return (!compareDates(nextProps.startDate, this.props.startDate) ||
-            !compareDates(nextProps.endDate, this.props.endDate));
-    }
-    render() {
-        const { startDate, endDate, onChange } = this.props;
-        const theme = (0, theme_1.getTheme)();
-        return (React.createElement(react_date_range_1.DateRange, { locale: (0, format_1.getDateFnsLocale)(), showDateDisplay: false, ranges: [
-                {
-                    startDate,
-                    endDate,
-                    key: 'selection'
-                }
-            ], rangeColors: [theme.backgroundColor3], onChange: onChange, weekdayDisplayFormat: (0, format_1.getLocale)() === 'pt' ? 'EEEEEE' : 'E' }));
-    }
-}
 class RangeDatePicker extends React.Component {
     constructor() {
         super(...arguments);
@@ -111,7 +79,7 @@ class RangeDatePicker extends React.Component {
             return styles;
         };
     }
-    componentDidMount() {
+    componentWillMount() {
         document.addEventListener('mousedown', this.handleClick, false);
     }
     componentWillUnmount() {
@@ -140,7 +108,13 @@ class RangeDatePicker extends React.Component {
                             marginTop: '-150px',
                             fontFamily: theme.fontFamily1
                         } },
-                        React.createElement(PureDateRange, { startDate: startDate, endDate: endDate, onChange: this.handleRangeDateConfirm }))))));
+                        React.createElement(react_date_range_1.DateRange, { locale: (0, format_1.getDateFnsLocale)(), showDateDisplay: false, ranges: [
+                                {
+                                    startDate: startDate,
+                                    endDate: endDate,
+                                    key: 'selection'
+                                }
+                            ], rangeColors: [theme.backgroundColor3], onChange: this.handleRangeDateConfirm, weekdayDisplayFormat: (0, format_1.getLocale)() === 'pt' ? 'EEEEEE' : 'E' }))))));
     }
 }
 exports.RangeDatePicker = RangeDatePicker;

package/package.json

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