@cashub/ui-elv 1.0.1 → 1.0.3

package/datetimePicker/DatePickerV2.js

@@ -1,407 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _md = require("react-icons/md");
-var _hooks = require("@cashub/hooks");
-var _utils = require("@cashub/utils");
-var _Button = _interopRequireDefault(require("../button/Button"));
-var _Input = _interopRequireDefault(require("../form/Input"));
-var _Month = _interopRequireDefault(require("./accordion/Month"));
-var _Year = _interopRequireDefault(require("./accordion/Year"));
-var _DateTimePickerContext = _interopRequireDefault(require("./subComponent/DateTimePickerContext"));
-var _toUTC = _interopRequireDefault(require("./utils/toUTC0"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DEFAULT_TIME = '00:00:00';
-const DatePickerV2 = _ref => {
-  let {
-    selected,
-    fixedYear,
-    allowClear,
-    minDate,
-    maxDate,
-    onConfirm,
-    disabled
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
-  const [contentElement, setContentElement] = (0, _react.useState)(null);
-  const [selectedDate, setSelectedDate] = (0, _react.useState)(() => {
-    const defaultDate = selected ? new Date(selected) : new Date();
-    return `${(0, _utils.formatDate)((0, _toUTC.default)(defaultDate), 'date')} ${DEFAULT_TIME}`;
-  });
-  const [confirmDate, setConfirmDate] = (0, _react.useState)(selected ? (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date') : '');
-  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
-  const [accordionCurrentDisplayType, setAccordionCurrentDisplayType] = (0, _react.useState)(null);
-  const weeks = (0, _react.useMemo)(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-      children: week
-    }, week));
-  }, []);
-  const minDateWithTime = (0, _react.useMemo)(() => {
-    if (!minDate) return;
-    return `${minDate} 00:00:00`;
-  }, [minDate]);
-  const maxDateWithTime = (0, _react.useMemo)(() => {
-    if (!maxDate) return;
-    return `${maxDate} 00:00:00`;
-  }, [maxDate]);
-  const {
-    styles,
-    attributes,
-    state,
-    update
-  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
-    strategy: 'absolute',
-    placement: 'bottom-start'
-  });
-  const context = {
-    fixedYear,
-    minDate: minDateWithTime,
-    maxDate: maxDateWithTime,
-    selectedDate,
-    setSelectedDate,
-    setAccordionCurrentDisplayType
-  };
-  const handleToggle = () => {
-    setDisplayPicker(!displayPicker);
-    update();
-  };
-  const changeDisplayAccordion = (0, _react.useCallback)(type => {
-    if (accordionCurrentDisplayType === type) {
-      setAccordionCurrentDisplayType(null);
-    } else {
-      setAccordionCurrentDisplayType(type);
-    }
-  }, [accordionCurrentDisplayType]);
-  const handleConfirm = (0, _react.useCallback)(() => {
-    if (confirmDate) {
-      onConfirm(confirmDate);
-    }
-    setDisplayPicker(false);
-    setAccordionCurrentDisplayType(null);
-  }, [confirmDate, onConfirm]);
-  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
-    const date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    const selectedYear = date.getFullYear();
-    const selectedMonth = date.getMonth();
-    if (!fixedYear) {
-      if (dayIndex < firstWeekOfMonth && selectedYear >= 1) {
-        if (selectedMonth === 0) {
-          date.setFullYear(selectedYear - 1);
-          date.setMonth(11);
-        } else {
-          date.setMonth(selectedMonth - 1);
-        }
-      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-        if (selectedMonth === 11) {
-          date.setFullYear(selectedYear + 1);
-          date.setMonth(0);
-        } else {
-          date.setMonth(selectedMonth + 1);
-        }
-      }
-      date.setDate(day);
-    } else if (fixedYear) {
-      if (dayIndex < firstWeekOfMonth) {
-        if (selectedMonth === 0) {
-          return;
-        }
-        date.setMonth(selectedMonth - 1);
-      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-        if (selectedMonth === 11) {
-          return;
-        }
-        date.setMonth(selectedMonth + 1);
-      }
-      date.setDate(day);
-    }
-    const formattedDate = (0, _utils.formatDate)(date, 'date');
-    setSelectedDate(`${formattedDate} ${DEFAULT_TIME}`);
-    setConfirmDate(formattedDate);
-  }, [fixedYear, selectedDate]);
-  const handleDisabled = (0, _react.useCallback)((firstDayOfMonth, lastDayOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
-    let [year, month] = selectedDate.split('-');
-
-    // disabled date before first month of first year
-    if (year === '0001' && month === '01' && dayIndex < firstDayOfMonth) {
-      return true;
-    }
-    let myDay = day.toString();
-    if (myDay.length === 1) myDay = `0${myDay}`;
-    if (fixedYear) {
-      if (month === '01') {
-        // disabled date before first month
-        return dayIndex < firstDayOfMonth;
-      } else if (month === '12') {
-        // disabled date in december
-        return dayIndex >= daysOfMonthForSelectedDate + firstDayOfMonth;
-      }
-    }
-
-    // previous year's date
-    if (month === '01' && firstDayOfMonth !== 0 && dayIndex + 1 <= firstDayOfMonth) {
-      year = +year - 1;
-    }
-
-    // next year's date
-    if (month === '12' && lastDayOfMonth !== 6 && day + firstDayOfMonth < dayIndex + 1) {
-      year = +year + 1;
-    }
-    month = firstDayOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstDayOfMonth < dayIndex + 1 ? +month + 1 : +month;
-    if (month < 1) {
-      month = 12;
-    } else if (month > 12) {
-      month = 1;
-    }
-    month = month.toString();
-    if (month.length === 1) {
-      month = `0${month}`;
-    }
-    year = year.toString();
-    if (year.length === 1) year = `000${year}`;
-    if (year.length === 2) year = `00${year}`;
-    if (year.length === 3) year = `0${year}`;
-    const currentDate = `${year}-${month}-${myDay} ${DEFAULT_TIME}`;
-    if (minDateWithTime && currentDate < minDateWithTime) {
-      return true;
-    }
-    if (maxDateWithTime && currentDate > maxDateWithTime) {
-      return true;
-    }
-    return false;
-  }, [fixedYear, minDateWithTime, maxDateWithTime, selectedDate]);
-  const isSelectedDay = (0, _react.useCallback)((day, index, firstDayOfMonth, daysOfMonthForSelectedDate) => {
-    const selectedDateObj = new Date(selectedDate);
-    const confirmDateObj = (0, _toUTC.default)(new Date(confirmDate));
-    if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
-      if (index + 1 > firstDayOfMonth && index < daysOfMonthForSelectedDate + firstDayOfMonth) {
-        return true;
-      }
-      return false;
-    }
-    return false;
-  }, [selectedDate, confirmDate]);
-  const getLastDateOfMonth = selectedDate => {
-    const date = new Date(selectedDate);
-
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    date.setMonth(date.getMonth() + 1);
-    date.setDate(0);
-    return date;
-  };
-  const days = (0, _react.useMemo)(() => {
-    const lastDateOfSelectedDate = getLastDateOfMonth(selectedDate);
-    const daysOfMonthForSelectedDate = lastDateOfSelectedDate.getDate();
-    const lastDayOfMonth = lastDateOfSelectedDate.getDay();
-    let date = new Date(selectedDate);
-    date.setMonth(date.getMonth() + 1 - 1);
-    date.setDate(0);
-    const daysOfPrevioueMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    const firstDayOfMonth = date.getDay();
-    const days = [...Array(daysOfMonthForSelectedDate)].map((value, index) => {
-      return index + 1;
-    });
-    if (firstDayOfMonth !== 0) {
-      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstDayOfMonth; index -= 1) {
-        if (date.getFullYear() === 1 && date.getMonth() === 0) {
-          days.unshift(null);
-        } else {
-          days.unshift(index);
-        }
-      }
-    }
-    if (lastDayOfMonth !== 6) {
-      for (let index = 1; index <= 6 - lastDayOfMonth; index += 1) {
-        days.push(index);
-      }
-    }
-    return days.map((day, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstDayOfMonth, lastDayOfMonth, daysOfMonthForSelectedDate, index, day),
-        onClick: () => {
-          handleChangeDate(daysOfMonthForSelectedDate, firstDayOfMonth, index, day);
-        },
-        selected: isSelectedDay(day, index, firstDayOfMonth, daysOfMonthForSelectedDate),
-        children: day
-      }, index);
-    });
-  }, [selectedDate, handleChangeDate, isSelectedDay, handleDisabled]);
-  (0, _react.useEffect)(() => {
-    if (selected) {
-      const formattedDate = (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date');
-      setSelectedDate(`${formattedDate} ${DEFAULT_TIME}`);
-      setConfirmDate(formattedDate);
-    } else {
-      setConfirmDate('');
-    }
-  }, [selected]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
-    value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-      onOutsideClick: handleConfirm,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
-          disabled: disabled,
-          ref: setToggleElement,
-          value: confirmDate,
-          onClick: handleToggle,
-          readOnly: true
-        }), confirmDate && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-          onClick: () => {
-            setConfirmDate('');
-            onConfirm('');
-          }
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Picker, {
-        ...attributes.popper,
-        style: styles.popper,
-        placement: state && state.placement,
-        ref: setContentElement,
-        displayPicker: displayPicker,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
-          accordionCurrentDisplayType: accordionCurrentDisplayType,
-          children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Year.default, {
-            expand: accordionCurrentDisplayType === 'year',
-            handleDisplayAccordionContent: () => {
-              changeDisplayAccordion('year');
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Month.default, {
-            expand: accordionCurrentDisplayType === 'month',
-            handleDisplayAccordionContent: () => {
-              changeDisplayAccordion('month');
-            },
-            confirmDate: confirmDate
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
-            children: [weeks, days]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmButton, {
-            fullWidth: true,
-            alignCenter: true,
-            onClick: handleConfirm,
-            children: t('Confirm')
-          })
-        })]
-      })]
-    })
-  });
-};
-const Wrapper = _styledComponents.default.div`
-  position: relative;
-`;
-const CloseButton = (0, _styledComponents.default)(_md.MdClose)`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--font-on-background);
-  font-size: var(--font-body1);
-  right: var(--spacing-s);
-  cursor: pointer;
-`;
-CloseButton.displayName = 'CloseButton';
-const Picker = _styledComponents.default.div`
-  padding-bottom: var(--spacing-s);
-  background: var(--color-background1);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  box-shadow: var(--box-shadow);
-  overflow: hidden;
-  width: 286px;
-  z-index: 1;
-  color: var(--font-on-background);
-
-  display: ${_ref2 => {
-  let {
-    displayPicker
-  } = _ref2;
-  return displayPicker ? 'block' : 'none';
-}};
-`;
-const Week = _styledComponents.default.div`
-  width: calc(100% / 7);
-  height: 36px;
-  border-radius: var(--border-radius-s);
-  line-height: 36px;
-  text-align: center;
-`;
-const Body = _styledComponents.default.div`
-  ${_ref3 => {
-  let {
-    accordionCurrentDisplayType
-  } = _ref3;
-  return accordionCurrentDisplayType && (0, _styledComponents.css)`
-      height: 216px;
-    `;
-}}
-
-  overflow: hidden;
-  padding: ${_ref4 => {
-  let {
-    accordionCurrentDisplayType
-  } = _ref4;
-  return accordionCurrentDisplayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
-}};
-`;
-const Footer = _styledComponents.default.div`
-  padding: 0 var(--spacing-s);
-`;
-const Day = _styledComponents.default.button`
-  width: calc(100% / 7);
-  height: 36px;
-  border-radius: var(--border-radius-s);
-  line-height: 36px;
-  text-align: center;
-  padding: 0;
-  border: 0;
-  background: var(--color-background1);
-  color: var(--font-on-background);
-  &:hover {
-    background: var(--color-primary);
-  }
-
-  ${_ref5 => {
-  let {
-    selected
-  } = _ref5;
-  return selected && 'background: var(--color-hover);';
-}}
-
-  ${_ref6 => {
-  let {
-    disabled
-  } = _ref6;
-  return disabled && (0, _styledComponents.css)`
-      color: var(--font-on-mute);
-      background: none;
-      &:hover {
-        background: none;
-      }
-    `;
-}}
-`;
-const ConfirmButton = (0, _styledComponents.default)(_Button.default)`
-  margin: 16px auto 0;
-`;
-const DateContent = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-var _default = exports.default = DatePickerV2;