@capillarytech/blaze-ui 6.3.0 → 6.4.0

package/CapMobileDateRangePicker/index.js

@@ -1,308 +1,355 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import classNames from "classnames";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import moment from "moment";
-import { useState, useMemo, useEffect, useCallback } from "react";
-import { injectIntl } from "react-intl";
-import { RANGE_PICKER, FORMAT_TOKENS, TIME_UNITS, WEEKDAY_MAP, MONTH_MAP } from "../utils/dayjs.js";
+import PropTypes from "prop-types";
+import React from "react";
 import CapColumn from "../CapColumn/index.js";
 import CapDateRangePicker from "../CapDateRangePicker/index.js";
 import CapDivider from "../CapDivider/index.js";
-import CapLabelWithStatic from "../CapLabel/index.js";
+import InputFinal from "../CapInput/index.js";
 import CapModalWithHoc from "../CapModal/index.js";
 import CapRow from "../CapRow/index.js";
-import DateRangeInputSelectors_default from "./DateRangeInputSelectors.js";
-import messages from "./messages.js";
 import ReactMobileDatePicker from "./ReactMobileDatePickerModule.js";
-import styles from "./styles.module.scss.js";
-const clsPrefix = "cap-mobile-date-range-picker";
+import './styles.css';/* empty css            */
+const DATE_FORMAT = "YYYY-MM-DD";
+const monthMap = {
+  1: "Jan",
+  2: "Feb",
+  3: "Mar",
+  4: "Apr",
+  5: "May",
+  6: "Jun",
+  7: "Jul",
+  8: "Aug",
+  9: "Sep",
+  10: "Oct",
+  11: "Nov",
+  12: "Dec"
+};
 const dateConfig = {
   date: {
-    format: FORMAT_TOKENS.DAY_OF_MONTH_PADDED,
-    caption: TIME_UNITS.DAY,
+    format: "DD",
+    caption: "Day",
     step: 1
   },
   month: {
-    format: (value) => MONTH_MAP[value.getMonth() + 1],
-    caption: WEEKDAY_MAP[1],
+    format: (value) => monthMap[value.getMonth() + 1],
+    caption: "Mon",
     step: 1
   },
   year: {
-    format: FORMAT_TOKENS.YEAR,
-    caption: TIME_UNITS.YEAR,
+    format: "YYYY",
+    caption: "Year",
     step: 1
   }
 };
-const CapMobileDateRangePicker = ({
-  intl: { formatMessage },
-  cancelText,
-  resetText,
-  dateDisplayFormat,
-  doneText,
-  startDate: startDateProp,
-  endDate: endDateProp,
-  minDate,
-  maxDate,
-  type,
-  minimumNights,
-  onDone,
-  switchBackToScrollerText,
-  switchBackToCalenderText,
-  title
-}) => {
-  const [startDate, setStartDate] = useState(startDateProp);
-  const [endDate, setEndDate] = useState(endDateProp);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [focusedInput, setFocusedInput] = useState(RANGE_PICKER.START_DATE);
-  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
-  const isComparing = useMemo(() => type === "compare", [type]);
-  const isStartDateFocused = useMemo(
-    () => focusedInput === RANGE_PICKER.START_DATE,
-    [focusedInput]
-  );
-  const isEndDateFocused = useMemo(() => focusedInput === RANGE_PICKER.END_DATE, [focusedInput]);
-  useEffect(() => {
-    const isSameStart = checkIfSameDate(startDateProp, startDate);
-    const isSameEnd = checkIfSameDate(endDateProp, endDate);
-    if (!(isSameStart && isSameEnd)) {
-      setStartDate(startDateProp);
-      setEndDate(endDateProp);
-    }
-  }, [startDateProp, endDateProp]);
-  const checkIfSameDate = useCallback(
-    (d1, d2) => d1.format(FORMAT_TOKENS.ISO_8601_DATE) === d2.format(FORMAT_TOKENS.ISO_8601_DATE),
-    []
-  );
-  const toggleFocusedInput = useCallback(
-    (inputType = "", onClickHandler) => {
+class CapMobileDateRangePicker extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleDatePickerVisible = (val) => this.setState(() => ({ isDatePickerVisible: val }));
+    this.handleModalVisible = () => this.setState((prevState) => ({ isModalOpen: !prevState.isModalOpen }));
+    this.checkIfSameDate = (d1, d2) => d1.format(DATE_FORMAT) === d2.format(DATE_FORMAT);
+    this.toggleFocusedInput = (inputType = "", onClickHandler) => {
       if (inputType === "") {
-        setFocusedInput(
-          (prev) => prev === RANGE_PICKER.START_DATE ? RANGE_PICKER.END_DATE : RANGE_PICKER.START_DATE
+        this.setState(
+          (prevState) => ({
+            focusedInput: prevState.focusedInput === "startDate" ? "endDate" : "startDate"
+          }),
+          () => onClickHandler && onClickHandler()
         );
       } else {
-        setFocusedInput(inputType);
+        this.setState({ focusedInput: inputType }, () => onClickHandler && onClickHandler());
       }
-      onClickHandler == null ? void 0 : onClickHandler();
-    },
-    []
-  );
-  const handleStartDateClick = useCallback(() => {
-    toggleFocusedInput(RANGE_PICKER.START_DATE);
-    setIsModalOpen(true);
-  }, [toggleFocusedInput]);
-  const handleEndDateClick = useCallback(() => {
-    toggleFocusedInput(RANGE_PICKER.END_DATE);
-    setIsModalOpen(true);
-  }, [toggleFocusedInput]);
-  const formatDate = useCallback((date) => new Date(moment(date).format()), []);
-  const handleOnSelect = useCallback(
-    (date) => {
-      const newDate = moment(date);
-      if (isStartDateFocused) {
-        setStartDate(newDate);
-      } else {
-        setEndDate(newDate);
+    };
+    this.handleDateRangeChange = (date) => {
+      const dateRange = {
+        start: moment(this.state.startDate),
+        end: moment(this.state.endDate)
+      };
+      let newRange = {
+        start: date[0] || moment(dateRange.start),
+        end: date[1] || moment(dateRange.end)
+      };
+      const prevRange = {
+        start: moment(dateRange.start),
+        end: moment(dateRange.end)
+      };
+      let dateIndexModified = 0;
+      if (!this.checkIfSameDate(newRange.start, moment(dateRange.start))) {
+        dateIndexModified = 0;
+      } else if (!this.checkIfSameDate(newRange.end, moment(dateRange.end))) {
+        dateIndexModified = 1;
       }
-    },
-    [isStartDateFocused]
-  );
-  const checkMaxDateForScrollDatepicker = useCallback(() => {
-    if (isStartDateFocused) {
-      return formatDate(endDate);
-    }
-    return formatDate(maxDate);
-  }, [isStartDateFocused, endDate, maxDate, formatDate]);
-  const checkMinDateForScrollDatepicker = useCallback(() => {
-    if (isStartDateFocused) {
-      return formatDate(minDate);
-    }
-    return formatDate(startDate);
-  }, [isStartDateFocused, minDate, startDate, formatDate]);
-  const currentScrollDate = useMemo(
-    () => formatDate(isStartDateFocused ? startDate : endDate),
-    [isStartDateFocused, startDate, endDate, formatDate]
-  );
-  const handleCalendarChange = useCallback(
-    (dates) => {
-      if (!dates) return;
-      const [rawStart, rawEnd] = dates;
-      const raw = rawStart || rawEnd;
-      if (!raw) return;
-      const clicked = moment(raw.toDate());
-      if (isStartDateFocused) {
-        setStartDate(clicked);
-        setFocusedInput(RANGE_PICKER.END_DATE);
-      } else {
-        if (clicked.diff(startDate, TIME_UNITS.DAY) >= 0) {
-          setEndDate(clicked);
-          setFocusedInput(RANGE_PICKER.START_DATE);
+      const { focusedInput } = this.state;
+      if (focusedInput === "startDate") {
+        newRange.start = date[dateIndexModified];
+        newRange.end = moment(dateRange.end);
+      } else if (focusedInput === "endDate") {
+        newRange.start = moment(dateRange.start);
+        newRange.end = date[dateIndexModified];
+      }
+      if (date[0] && date[1]) {
+        if (this.checkIfSameDate(date[0], date[1])) {
+          newRange = {
+            start: date[0],
+            end: date[1]
+          };
+        } else if (this.checkIfSameDate(date[0], prevRange.start) && this.checkIfSameDate(date[1], prevRange.end)) {
+          newRange = {
+            start: date[1],
+            end: date[1]
+          };
         }
       }
-    },
-    [startDate, isStartDateFocused]
-  );
-  const checkIfDateDisabled = useCallback(
-    (current) => {
-      const currentMoment = moment(current.toDate());
-      const itd = moment(minDate, FORMAT_TOKENS.ISO_8601_DATE);
-      let isDisabled = currentMoment.isAfter(moment(maxDate), TIME_UNITS.DAY) || currentMoment.isBefore(itd, TIME_UNITS.DAY);
-      if (isStartDateFocused && currentMoment.isAfter(moment(endDate), TIME_UNITS.DAY)) {
+      if (newRange.start.diff(newRange.end, "days") <= 0) {
+        this.setState({
+          startDate: newRange.start,
+          endDate: newRange.end,
+          dateRange: newRange
+        });
+        this.toggleFocusedInput();
+      }
+    };
+    this.handleOnSelect = (date) => {
+      const newDate = moment(date);
+      const { focusedInput } = this.state;
+      this.setState({ [focusedInput]: newDate });
+    };
+    this.checkIfDateDisabled = (current) => {
+      const { focusedInput } = this.state;
+      let isDisabled = false;
+      const currentMoment = moment(current);
+      const itd = moment(this.props.minDate, DATE_FORMAT);
+      const { maxDate } = this.props;
+      isDisabled = currentMoment.isAfter(moment(maxDate), "day") || currentMoment.isBefore(itd, "day");
+      if (focusedInput === "startDate" && currentMoment.isAfter(moment(this.state.endDate), "day")) {
         isDisabled = true;
-      } else if (isEndDateFocused && currentMoment.isBefore(moment(startDate), TIME_UNITS.DAY)) {
+      } else if (focusedInput === "endDate" && currentMoment.isBefore(moment(this.state.startDate), "day")) {
         isDisabled = true;
       }
       return isDisabled;
-    },
-    [isStartDateFocused, isEndDateFocused, minDate, maxDate, startDate, endDate]
-  );
-  const handleModalVisible = useCallback(() => {
-    setIsModalOpen((prev) => !prev);
-  }, []);
-  const resetDate = useCallback(() => {
-    setStartDate(startDateProp);
-    setEndDate(endDateProp);
-  }, [startDateProp, endDateProp]);
-  const handleCancel = useCallback(() => {
-    resetDate();
-    handleModalVisible();
-  }, [resetDate, handleModalVisible]);
-  const handleDone = useCallback(() => {
-    const dateRange = {
-      start: moment(startDate),
-      end: moment(endDate)
     };
-    onDone(dateRange);
-    handleModalVisible();
-  }, [startDate, endDate, onDone, handleModalVisible]);
-  return /* @__PURE__ */ jsxs(CapRow, { className: styles[clsPrefix], children: [
-    isModalOpen && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      CapModalWithHoc,
-      {
-        open: true,
-        title,
-        centered: true,
-        destroyOnHidden: true,
-        width: "90%",
-        onCancel: handleCancel,
-        className: styles[`${clsPrefix}-modal`],
-        classNames: {
-          header: styles[`${clsPrefix}-modal-header`],
-          footer: styles[`${clsPrefix}-modal-footer`]
-        },
-        closable: false,
-        footer: /* @__PURE__ */ jsxs(CapRow, { align: "middle", justify: "space-between", children: [
-          /* @__PURE__ */ jsx(
-            CapLabelWithStatic,
-            {
-              className: styles[`${clsPrefix}-modal-footer-cancel-button`],
-              onClick: handleCancel,
-              children: cancelText
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            CapLabelWithStatic,
-            {
-              className: styles[`${clsPrefix}-modal-footer-done-button`],
-              onClick: handleDone,
-              children: doneText
-            }
-          )
-        ] }),
-        children: [
-          /* @__PURE__ */ jsxs(CapRow, { justify: "start", align: "middle", children: [
-            /* @__PURE__ */ jsx(CapColumn, { span: 21, children: /* @__PURE__ */ jsx(
-              DateRangeInputSelectors_default,
+    this.formatDate = (date) => new Date(moment(date).format());
+    this.checkMaxDateForScrollDatepicker = () => {
+      const { endDate, focusedInput } = this.state;
+      const { maxDate } = this.props;
+      if (focusedInput === "startDate") {
+        return this.formatDate(endDate);
+      }
+      return this.formatDate(maxDate);
+    };
+    this.checkMinDateForScrollDatepicker = () => {
+      const { startDate, focusedInput } = this.state;
+      const { minDate } = this.props;
+      if (focusedInput === "startDate") {
+        return this.formatDate(minDate);
+      }
+      return this.formatDate(startDate);
+    };
+    this.resetDate = () => {
+      const { startDate, endDate } = this.props;
+      this.setState({ startDate, endDate });
+    };
+    this.handleCancel = () => {
+      this.resetDate();
+      this.handleModalVisible();
+    };
+    this.handleDone = () => {
+      const dateRange = {
+        start: moment(this.state.startDate),
+        end: moment(this.state.endDate)
+      };
+      this.props.onDone(dateRange);
+      this.handleModalVisible();
+    };
+    this.getDaySize = () => {
+      const screenWidth = window.screen.width;
+      return 40 + Math.ceil((screenWidth - 360) / 10);
+    };
+    this.state = {
+      startDate: props.startDate,
+      endDate: props.endDate,
+      isModalOpen: false,
+      focusedInput: "startDate",
+      isDatePickerVisible: false
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if (!(this.checkIfSameDate(nextProps.startDate, this.props.startDate) && this.checkIfSameDate(nextProps.endDate, this.props.endDate))) {
+      this.setState({
+        startDate: nextProps.startDate,
+        endDate: nextProps.endDate
+      });
+    }
+  }
+  render() {
+    const { dateDisplayFormat, type, minimumNights } = this.props;
+    const { startDate, endDate, focusedInput } = this.state;
+    const DateRangePickerInputs = ({ showPlaceholders = false, onClick }) => /* @__PURE__ */ jsxs(CapRow, { className: "mobile-dateRange-picker-inputs", children: [
+      /* @__PURE__ */ jsxs(
+        CapColumn,
+        {
+          span: 11,
+          onClick: () => {
+            this.toggleFocusedInput("startDate", onClick);
+          },
+          children: [
+            showPlaceholders && /* @__PURE__ */ jsx("span", { className: "placeholder-text", children: "Start Date" }),
+            /* @__PURE__ */ jsx(
+              InputFinal,
               {
-                focusedInput,
-                startDate,
-                endDate,
-                dateDisplayFormat,
-                handleStartDateClick,
-                handleEndDateClick,
-                showPlaceholders: true
+                className: `${focusedInput === "startDate" ? "focused" : ""}`,
+                value: moment(startDate).format(dateDisplayFormat),
+                size: "default",
+                disabled: true
               }
-            ) }),
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(CapColumn, { span: 2, className: `date-range-hyphen ${showPlaceholders && "vertical-align"}`, children: "-" }),
+      /* @__PURE__ */ jsxs(
+        CapColumn,
+        {
+          span: 11,
+          onClick: () => {
+            this.toggleFocusedInput("endDate", onClick);
+          },
+          children: [
+            showPlaceholders && /* @__PURE__ */ jsx("span", { className: "placeholder-text", children: "End Date" }),
             /* @__PURE__ */ jsx(
-              CapColumn,
+              InputFinal,
+              {
+                className: `${focusedInput === "endDate" ? "focused" : ""}`,
+                value: moment(endDate).format(dateDisplayFormat),
+                size: "default",
+                disabled: true
+              }
+            )
+          ]
+        }
+      )
+    ] });
+    const { isModalOpen, isDatePickerVisible } = this.state;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        CapModalWithHoc,
+        {
+          title: this.props.title,
+          visible: isModalOpen,
+          centered: true,
+          okText: this.props.yesText,
+          cancelText: this.props.noText,
+          width: "90%",
+          onCancel: this.handleCancel,
+          className: "mobile-date-range-picker-modal",
+          closable: false,
+          footer: /* @__PURE__ */ jsxs(CapRow, { className: "modal-footer", children: [
+            /* @__PURE__ */ jsx("span", { span: 3, onClick: this.handleCancel, className: "action-item", children: this.props.cancelText && this.props.cancelText }),
+            /* @__PURE__ */ jsx(
+              "span",
               {
-                onClick: resetDate,
                 span: 3,
-                className: styles[`${clsPrefix}-reset-button`],
-                children: resetText
+                style: { marginLeft: "39px" },
+                className: "action-item",
+                onClick: this.handleDone,
+                children: this.props.doneText
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(CapDivider, { className: styles[`${clsPrefix}-divider`] }),
-          /* @__PURE__ */ jsx(CapRow, { children: /* @__PURE__ */ jsx(
-            CapColumn,
-            {
-              onClick: () => setIsDatePickerVisible(!isDatePickerVisible),
-              span: 24,
-              className: classNames(styles[`${clsPrefix}-switch-label`]),
-              children: !isDatePickerVisible ? switchBackToScrollerText : switchBackToCalenderText
-            }
-          ) }),
-          isDatePickerVisible ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classNames(styles[`${clsPrefix}-scroller-datepicker`], {
-                [styles[`${clsPrefix}-compare-mobile-date-picker`]]: isComparing
-              }),
-              children: /* @__PURE__ */ jsx(
-                ReactMobileDatePicker,
+          children: [
+            /* @__PURE__ */ jsxs(CapRow, { type: "flex", align: "middle", className: "control-section", children: [
+              /* @__PURE__ */ jsx(CapColumn, { span: 21, children: /* @__PURE__ */ jsx(
+                DateRangePickerInputs,
                 {
-                  isPopup: false,
-                  title: formatMessage(messages.datePicker),
-                  onChange: handleOnSelect,
-                  value: currentScrollDate,
-                  min: checkMinDateForScrollDatepicker(),
-                  max: checkMaxDateForScrollDatepicker(),
-                  showHeader: false,
-                  showFooter: false,
-                  dateConfig
+                  context: "inner",
+                  showPlaceholders: true,
+                  onClick: () => this.handleDatePickerVisible(true)
                 }
-              )
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classNames(styles[`${clsPrefix}-calender-only`], {
-                [styles[`${clsPrefix}-compare-mobile-date-range-picker`]]: isComparing
-              }),
-              children: /* @__PURE__ */ jsx(
-                CapDateRangePicker,
+              ) }),
+              /* @__PURE__ */ jsx(
+                CapColumn,
                 {
-                  showCalendarOnly: true,
-                  isSingleMonthRangePicker: true,
-                  autoFocus: true,
-                  previewValue: false,
-                  value: [startDate, endDate],
-                  onCalendarChange: handleCalendarChange,
-                  isDayBlocked: checkIfDateDisabled,
-                  minimumNights,
-                  allowYearNavigation: true,
-                  getPopupContainer: (trigger) => (trigger == null ? void 0 : trigger.parentElement) || document.body
+                  title: this.props.resetText,
+                  onClick: this.resetDate,
+                  span: 3,
+                  className: "action-item",
+                  children: this.props.resetText
                 }
               )
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      DateRangeInputSelectors_default,
-      {
-        focusedInput,
-        startDate,
-        endDate,
-        dateDisplayFormat,
-        handleStartDateClick,
-        handleEndDateClick
-      }
-    )
-  ] });
+            ] }),
+            /* @__PURE__ */ jsx(CapDivider, {}),
+            /* @__PURE__ */ jsx(CapRow, { span: 24, children: /* @__PURE__ */ jsx(
+              CapColumn,
+              {
+                title: this.props.resetText,
+                onClick: () => this.handleDatePickerVisible(!isDatePickerVisible),
+                span: 24,
+                className: "action-item toggle-text",
+                children: !isDatePickerVisible ? this.props.switchBackToScrollerText : this.props.switchBackToCalenderText
+              }
+            ) }),
+            isDatePickerVisible ? /* @__PURE__ */ jsx("div", { className: `${type === "compare" && "compare-mobile-date-picker"}`, children: /* @__PURE__ */ jsx(
+              ReactMobileDatePicker,
+              {
+                isPopup: false,
+                className: "date-picker-scroller",
+                title: "Date picker",
+                onChange: this.handleOnSelect,
+                value: this.formatDate(this.state[this.state.focusedInput]),
+                min: this.checkMinDateForScrollDatepicker(),
+                max: this.checkMaxDateForScrollDatepicker(),
+                showHeader: false,
+                showFooter: false,
+                dateConfig
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `calender-only ${type === "compare" && "compare-mobile-date-range-picker"}`,
+                children: /* @__PURE__ */ jsx(
+                  CapDateRangePicker,
+                  {
+                    numberOfMonths: 1,
+                    showCalendarOnly: true,
+                    autoFocus: true,
+                    daySize: this.getDaySize(),
+                    startDate,
+                    endDate,
+                    onChange: this.handleDateRangeChange,
+                    isOutsideRange: (current) => this.checkIfDateDisabled(current),
+                    minimumNights,
+                    allowYearNavigation: true,
+                    minDate: moment(this.props.minDate),
+                    rootClass: "calender-only"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(DateRangePickerInputs, { context: "inner", onClick: this.handleModalVisible })
+    ] });
+  }
+}
+CapMobileDateRangePicker.propTypes = {
+  cancelText: PropTypes.string,
+  resetText: PropTypes.string,
+  dateDisplayFormat: PropTypes.string,
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  doneText: PropTypes.string,
+  startDate: PropTypes.object,
+  endDate: PropTypes.object,
+  minDate: PropTypes.object,
+  maxDate: PropTypes.object,
+  type: PropTypes.string,
+  minimumNights: PropTypes.number,
+  onDone: PropTypes.func,
+  switchBackToScrollerText: PropTypes.string,
+  switchBackToCalenderText: PropTypes.string,
+  title: PropTypes.string
 };
-const index = injectIntl(CapMobileDateRangePicker);
 export {
-  clsPrefix,
-  index as default
+  CapMobileDateRangePicker as default
 };