@cashub/ui-elv 1.0.1 → 1.0.3

package/datetimePicker/DatePicker.js

@@ -1,363 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _reactI18next = require("react-i18next");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _hooks = require("@cashub/hooks");
-var _utils = require("@cashub/utils");
-var _Button = _interopRequireDefault(require("../button/Button"));
-var _Accordion = _interopRequireDefault(require("./subComponent/Accordion"));
-var _Input = _interopRequireDefault(require("../form/Input"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
-const DatePicker = _ref => {
-  let {
-    onConfirm,
-    selected,
-    minDate,
-    maxDate,
-    fixedYear,
-    disabled
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [currentDisplayType, setCurrentDisplayType] = (0, _react.useState)(null);
-  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
-  const [selectedYear, setSelectedYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : new Date().getFullYear());
-  const [selectedMonth, setSelectedMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : new Date().getMonth());
-  const [selectedDay, setSelectedDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : new Date().getDate());
-  const [confirmYear, setConfirmYear] = (0, _react.useState)(selected ? new Date(selected).getFullYear() : '');
-  const [confirmMonth, setConfirmMonth] = (0, _react.useState)(selected ? new Date(selected).getMonth() : '');
-  const [confirmDay, setConfirmDay] = (0, _react.useState)(selected ? new Date(selected).getDate() : '');
-  const [inputValue, setInputValue] = (0, _react.useState)(selected ? selected : '');
-  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
-  const [contentElement, setContentElement] = (0, _react.useState)(null);
-  const {
-    styles,
-    attributes,
-    state,
-    update
-  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
-    strategy: 'absolute',
-    placement: 'bottom-start'
-  });
-  const weeks = (0, _react.useMemo)(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-      children: week
-    }, week));
-  }, []);
-  const handleDisplayAccordionContent = (0, _react.useCallback)(type => {
-    if (currentDisplayType === type) {
-      setCurrentDisplayType(null);
-    } else {
-      setCurrentDisplayType(type);
-    }
-  }, [currentDisplayType]);
-  const handleChangeYear = selected => {
-    if (selected === 'previous') {
-      setSelectedYear(previousParams => {
-        if (previousParams <= 1) {
-          return previousParams;
-        }
-        return previousParams - 1;
-      });
-    } else if (selected === 'next') {
-      setSelectedYear(previousParams => {
-        return previousParams + 1;
-      });
-    }
-    setCurrentDisplayType(null);
-  };
-  const handleChangeMonth = selected => {
-    if (selected === 'previous') {
-      setSelectedMonth(previousParams => {
-        if (previousParams <= 0) {
-          return 11;
-        }
-        return previousParams - 1;
-      });
-    } else if (selected === 'next') {
-      setSelectedMonth(previousParams => {
-        if (previousParams >= 11) {
-          return 0;
-        }
-        return previousParams + 1;
-      });
-    }
-    setCurrentDisplayType(null);
-  };
-  const handleDisabled = (0, _react.useCallback)((firstWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
-    const selectedDate = (0, _utils.formatDate)(new Date(selectedYear, firstWeekOfMonth >= dayIndex + 1 ? selectedMonth - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? selectedMonth + 1 : selectedMonth, day).getTime() + 86399 * 1000);
-    if (minDate && minDate > selectedDate || maxDate && maxDate < selectedDate) {
-      return true;
-    }
-    if (fixedYear) {
-      const disabledDateInDec = selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
-      const disabledDateInJan = selectedMonth === 0 && dayIndex < firstWeekOfMonth;
-      return !!(disabledDateInDec || disabledDateInJan);
-    }
-    return false;
-  }, [fixedYear, minDate, maxDate, selectedMonth, selectedYear]);
-  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
-    if (!fixedYear) {
-      setSelectedYear(() => {
-        if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
-          return selectedYear - 1;
-        } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-          return selectedYear + 1;
-        }
-        return selectedYear;
-      });
-      setConfirmYear(() => {
-        if (selectedMonth === 0 && dayIndex < firstWeekOfMonth && selectedYear > 1) {
-          return selectedYear - 1;
-        } else if (selectedMonth === 11 && dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-          return selectedYear + 1;
-        }
-        return selectedYear;
-      });
-    }
-    setSelectedMonth(() => {
-      if (firstWeekOfMonth > dayIndex) {
-        return selectedMonth !== 0 ? selectedMonth - 1 : 11;
-      } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
-        return selectedMonth !== 11 ? selectedMonth + 1 : 0;
-      }
-      return selectedMonth;
-    });
-    setConfirmMonth(() => {
-      if (firstWeekOfMonth > dayIndex) {
-        return selectedMonth !== 0 ? selectedMonth - 1 : 11;
-      } else if (daysOfMonthForSelectedDate + firstWeekOfMonth <= dayIndex) {
-        return selectedMonth !== 11 ? selectedMonth + 1 : 0;
-      }
-      return selectedMonth;
-    });
-    setConfirmDay(day);
-  }, [fixedYear, selectedMonth, selectedYear]);
-  const handleSelectedDay = (0, _react.useCallback)((day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth) => {
-    if (confirmDay === day && confirmYear === selectedYear && confirmMonth === selectedMonth) {
-      if (firstWeekOfMonth === 6 && lastWeekOfMonth === 6) {
-        return true;
-      } else if (firstWeekOfMonth !== 6 && lastWeekOfMonth === 6) {
-        return index + 1 > firstWeekOfMonth;
-      }
-      return !!(index + 1 >= firstWeekOfMonth && index + 1 <= daysOfMonthForSelectedDate + firstWeekOfMonth);
-    }
-    return false;
-  }, [confirmYear, confirmMonth, confirmDay, selectedYear, selectedMonth]);
-  const handleDisplayDays = (0, _react.useMemo)(() => {
-    const daysOfMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1, 0).getDate();
-    const daysOfPrevioueMonthForSelectedDate = new Date(selectedYear, selectedMonth + 1 - 1, 0).getDate();
-    const firstWeekOfMonth = new Date(`${selectedYear}/${selectedMonth + 1}/1`).getDay();
-    const lastWeekOfMonth = new Date(`${selectedYear}/${selectedMonth + 1}/${daysOfMonthForSelectedDate}`).getDay();
-    const days = [];
-    for (const day of [...Array(daysOfMonthForSelectedDate).keys()]) {
-      days.push(day + 1);
-    }
-    if (firstWeekOfMonth !== 0) {
-      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
-        days.unshift(index);
-      }
-    }
-    if (lastWeekOfMonth !== 6) {
-      for (let index = 1; index <= 6 - lastWeekOfMonth; index += 1) {
-        days.push(index);
-      }
-    }
-    return days.map((day, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstWeekOfMonth, daysOfMonthForSelectedDate, index, day),
-        onClick: () => {
-          handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
-        },
-        selected: handleSelectedDay(day, daysOfMonthForSelectedDate, index, firstWeekOfMonth, lastWeekOfMonth),
-        children: day
-      }, index);
-    });
-  }, [selectedMonth, selectedYear, handleDisabled, handleChangeDate, handleSelectedDay]);
-  const handleToggle = () => {
-    setDisplayPicker(!displayPicker);
-    update();
-  };
-  const handleConfirm = () => {
-    onConfirm(inputValue);
-    setDisplayPicker(false);
-    setCurrentDisplayType(null);
-  };
-  (0, _react.useEffect)(() => {
-    if (!selected) return;
-    const date = new Date(selected);
-    setSelectedYear(date.getFullYear());
-    setSelectedMonth(date.getMonth());
-    setSelectedDay(date.getDate());
-    setConfirmYear(date.getFullYear());
-    setConfirmMonth(date.getMonth());
-    setConfirmDay(date.getDate());
-    setInputValue(selected);
-  }, [selected]);
-  (0, _react.useEffect)(() => {
-    if (!(confirmYear && confirmMonth && confirmDay)) return;
-    setInputValue((0, _utils.formatDate)(new Date(confirmYear, confirmMonth, confirmDay), 'date'));
-  }, [confirmYear, confirmMonth, confirmDay]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-    onOutsideClick: handleConfirm,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
-      ref: setToggleElement,
-      value: inputValue,
-      onClick: handleToggle,
-      readOnly: true,
-      disabled: disabled
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-      ...attributes.popper,
-      style: styles.popper,
-      placement: state && state.placement,
-      ref: setContentElement,
-      displayPicker: displayPicker,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
-        displayType: currentDisplayType,
-        children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-          type: "year",
-          handleDisplayAccordionContent: () => {
-            handleDisplayAccordionContent('year');
-          },
-          handleChangeTitle: handleChangeYear,
-          setCurrentDisplayType: setCurrentDisplayType,
-          currentDisplayType: currentDisplayType,
-          selectedYear: selectedYear,
-          setSelectedYear: setSelectedYear,
-          selectedDay: selectedDay,
-          minDate: minDate,
-          maxDate: maxDate,
-          fixedYear: fixedYear
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-          type: "month",
-          handleDisplayAccordionContent: () => {
-            handleDisplayAccordionContent('month');
-          },
-          handleChangeTitle: handleChangeMonth,
-          setCurrentDisplayType: setCurrentDisplayType,
-          currentDisplayType: currentDisplayType,
-          selectedMonth: selectedMonth,
-          setSelectedMonth: setSelectedMonth,
-          selectedYear: selectedYear,
-          selectedDay: selectedDay,
-          fixedYear: fixedYear,
-          minDate: minDate,
-          maxDate: maxDate
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
-          children: [weeks, handleDisplayDays]
-        })]
-      }), /*#__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`
-  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`
-  min-width: 36px;
-  height: 36px;
-  border-radius: var(--border-radius-s);
-  line-height: 36px;
-  text-align: center;
-`;
-const Day = _styledComponents.default.button`
-  min-width: 36px;
-  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);
-  }
-
-  ${_ref3 => {
-  let {
-    selected
-  } = _ref3;
-  return selected && 'background: var(--color-hover);';
-}}
-
-  ${_ref4 => {
-  let {
-    disabled
-  } = _ref4;
-  return disabled && (0, _styledComponents.css)`
-      color: var(--font-on-mute);
-      background: none;
-      &:hover {
-        background: none;
-      }
-    `;
-}}
-`;
-const DateContent = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-const PickerInput = (0, _styledComponents.default)(_Input.default)`
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-const ConfirmButton = (0, _styledComponents.default)(_Button.default)`
-  margin: 16px auto 0;
-`;
-const Body = _styledComponents.default.div`
-  ${_ref5 => {
-  let {
-    displayType
-  } = _ref5;
-  return displayType && (0, _styledComponents.css)`
-      height: 216px;
-    `;
-}}
-
-  overflow: hidden;
-  padding: ${_ref6 => {
-  let {
-    displayType
-  } = _ref6;
-  return displayType === '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);
-`;
-var _default = exports.default = DatePicker;