@capillarytech/blaze-ui 6.4.0 → 6.5.0

package/CapMobileDateRangePicker/index.js

@@ -1,355 +1,302 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
 import moment from "moment";
-import PropTypes from "prop-types";
-import React from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { injectIntl } from "react-intl";
+import { RANGE_PICKER, TIME_UNITS, FORMAT_TOKENS, WEEKDAY_MAP, MONTH_MAP } from "../utils/dayjs.js";
 import CapColumn from "../CapColumn/index.js";
 import CapDateRangePicker from "../CapDateRangePicker/index.js";
 import CapDivider from "../CapDivider/index.js";
-import InputFinal from "../CapInput/index.js";
+import CapLabelWithStatic from "../CapLabel/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.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"
-};
+import styles from "./styles.module.scss.js";
+import { checkIfSameDate } from "./utils.js";
+const clsPrefix = "cap-mobile-date-range-picker";
 const dateConfig = {
   date: {
-    format: "DD",
-    caption: "Day",
+    format: FORMAT_TOKENS.DAY_OF_MONTH_PADDED,
+    caption: TIME_UNITS.DAY,
     step: 1
   },
   month: {
-    format: (value) => monthMap[value.getMonth() + 1],
-    caption: "Mon",
+    format: (value) => MONTH_MAP[value.getMonth() + 1],
+    caption: WEEKDAY_MAP[1],
     step: 1
   },
   year: {
-    format: "YYYY",
-    caption: "Year",
+    format: FORMAT_TOKENS.YEAR,
+    caption: TIME_UNITS.YEAR,
     step: 1
   }
 };
-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) => {
+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 = type === "compare";
+  const isStartDateFocused = focusedInput === RANGE_PICKER.START_DATE;
+  const isEndDateFocused = focusedInput === RANGE_PICKER.END_DATE;
+  useEffect(() => {
+    const isSameStart = checkIfSameDate(startDateProp, startDate);
+    const isSameEnd = checkIfSameDate(endDateProp, endDate);
+    if (!(isSameStart && isSameEnd)) {
+      setStartDate(startDateProp);
+      setEndDate(endDateProp);
+    }
+  }, [startDateProp, endDateProp]);
+  const toggleFocusedInput = useCallback(
+    (inputType = "", onClickHandler) => {
       if (inputType === "") {
-        this.setState(
-          (prevState) => ({
-            focusedInput: prevState.focusedInput === "startDate" ? "endDate" : "startDate"
-          }),
-          () => onClickHandler && onClickHandler()
+        setFocusedInput(
+          (prev) => prev === RANGE_PICKER.START_DATE ? RANGE_PICKER.END_DATE : RANGE_PICKER.START_DATE
         );
       } else {
-        this.setState({ focusedInput: inputType }, () => onClickHandler && onClickHandler());
-      }
-    };
-    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;
+        setFocusedInput(inputType);
       }
-      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];
+      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);
       }
-      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]
-          };
+    },
+    [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);
         }
       }
-      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")) {
+    },
+    [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)) {
         isDisabled = true;
-      } else if (focusedInput === "endDate" && currentMoment.isBefore(moment(this.state.startDate), "day")) {
+      } else if (isEndDateFocused && currentMoment.isBefore(moment(startDate), TIME_UNITS.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)
     };
-    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,
-              {
-                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(
-              InputFinal,
+    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,
               {
-                className: `${focusedInput === "endDate" ? "focused" : ""}`,
-                value: moment(endDate).format(dateDisplayFormat),
-                size: "default",
-                disabled: true
+                focusedInput,
+                startDate,
+                endDate,
+                dateDisplayFormat,
+                handleStartDateClick,
+                handleEndDateClick,
+                showPlaceholders: 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",
+              CapColumn,
               {
+                onClick: resetDate,
                 span: 3,
-                style: { marginLeft: "39px" },
-                className: "action-item",
-                onClick: this.handleDone,
-                children: this.props.doneText
+                className: styles[`${clsPrefix}-reset-button`],
+                children: resetText
               }
             )
           ] }),
-          children: [
-            /* @__PURE__ */ jsxs(CapRow, { type: "flex", align: "middle", className: "control-section", children: [
-              /* @__PURE__ */ jsx(CapColumn, { span: 21, children: /* @__PURE__ */ jsx(
-                DateRangePickerInputs,
+          /* @__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,
                 {
-                  context: "inner",
-                  showPlaceholders: true,
-                  onClick: () => this.handleDatePickerVisible(true)
+                  isPopup: false,
+                  title: formatMessage(messages.datePicker),
+                  onChange: handleOnSelect,
+                  value: currentScrollDate,
+                  min: checkMinDateForScrollDatepicker(),
+                  max: checkMaxDateForScrollDatepicker(),
+                  showHeader: false,
+                  showFooter: false,
+                  dateConfig
                 }
-              ) }),
-              /* @__PURE__ */ jsx(
-                CapColumn,
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(styles[`${clsPrefix}-calender-only`], {
+                [styles[`${clsPrefix}-compare-mobile-date-range-picker`]]: isComparing
+              }),
+              children: /* @__PURE__ */ jsx(
+                CapDateRangePicker,
                 {
-                  title: this.props.resetText,
-                  onClick: this.resetDate,
-                  span: 3,
-                  className: "action-item",
-                  children: this.props.resetText
+                  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
                 }
               )
-            ] }),
-            /* @__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
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DateRangeInputSelectors_default,
+      {
+        focusedInput,
+        startDate,
+        endDate,
+        dateDisplayFormat,
+        handleStartDateClick,
+        handleEndDateClick
+      }
+    )
+  ] });
 };
+const index = injectIntl(CapMobileDateRangePicker);
 export {
-  CapMobileDateRangePicker as default
+  clsPrefix,
+  index as default
 };

package/CapMobileDateRangePicker/messages.d.ts

@@ -0,0 +1,17 @@
+export declare const scope = "app.commonUtils.capUiLibrary.CapMobileDateRangePicker";
+declare const _default: {
+    startDate: {
+        id: string;
+        defaultMessage: string;
+    };
+    endDate: {
+        id: string;
+        defaultMessage: string;
+    };
+    datePicker: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=messages.d.ts.map

package/CapMobileDateRangePicker/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapMobileDateRangePicker/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,0DAA0D,CAAC;;;;;;;;;;;;;;;AAE7E,wBAaG"}

package/CapMobileDateRangePicker/messages.js

@@ -0,0 +1,20 @@
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapMobileDateRangePicker";
+const messages = defineMessages({
+  startDate: {
+    id: `${scope}.startDate`,
+    defaultMessage: "Start Date"
+  },
+  endDate: {
+    id: `${scope}.endDate`,
+    defaultMessage: "End Date"
+  },
+  datePicker: {
+    id: `${scope}.datePicker`,
+    defaultMessage: "Date picker"
+  }
+});
+export {
+  messages as default,
+  scope
+};