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

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

@@ -17,10 +17,10 @@ export interface RangeDatePickerState {
     showStartDateModal: boolean;
     count: number;
 }
-export declare class RangeDatePicker extends React.PureComponent<RangeDatePickerProperties, RangeDatePickerState> {
+export declare class RangeDatePicker extends React.Component<RangeDatePickerProperties, RangeDatePickerState> {
     state: RangeDatePickerState;
     private calendarRef;
-    componentWillMount(): void;
+    componentDidMount(): void;
     componentWillUnmount(): void;
     handleClick: (event: MouseEvent) => void;
     handleDatePickerPress: () => void;

package/lib/components/RangeDatePicker.web.js

@@ -11,7 +11,39 @@ const layout_1 = require("../modules/layout");
 require("react-date-range/dist/styles.css");
 const react_native_1 = require("react-native");
 require("../../styles/RangeDatePicker.css");
-class RangeDatePicker extends React.PureComponent {
+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);
         this.state = {
@@ -79,7 +111,7 @@ class RangeDatePicker extends React.PureComponent {
             return styles;
         };
     }
-    componentWillMount() {
+    componentDidMount() {
         document.addEventListener('mousedown', this.handleClick, false);
     }
     componentWillUnmount() {
@@ -108,13 +140,7 @@ class RangeDatePicker extends React.PureComponent {
                             marginTop: '-150px',
                             fontFamily: theme.fontFamily1
                         } },
-                        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' }))))));
+                        React.createElement(PureDateRange, { startDate: startDate, endDate: endDate, onChange: this.handleRangeDateConfirm }))))));
     }
 }
 exports.RangeDatePicker = RangeDatePicker;

package/package.json

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