@cashub/ui-elv 1.0.0

package/datetimePicker/DatePickerV2.js

@@ -0,0 +1,407 @@
+"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;

package/datetimePicker/DatetimePicker.js

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+var _CustomTimeInput = _interopRequireDefault(require("./subComponent/CustomTimeInput"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DatetimePicker = _ref => {
+  let {
+    selected = '',
+    onChange,
+    dateFormat = 'yyyy-MM-dd HH:mm:ss',
+    minDate,
+    maxDate,
+    showTimeInput,
+    readOnly,
+    disabled,
+    onBlur,
+    allowClear = false,
+    shouldCloseOnSelect = true
+  } = _ref;
+  const datepickerRef = (0, _react.useRef)(null);
+  const handleOnBlur = () => {
+    onBlur();
+  };
+  const datePickerProps = {
+    dateFormat,
+    disabled,
+    onChange,
+    selected: selected ? new Date(Date.parse(selected)) : '',
+    minDate: minDate ? new Date(Date.parse(minDate)) : '',
+    maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
+    isClearable: allowClear && selected && !disabled,
+    shouldCloseOnSelect
+  };
+  if (showTimeInput) {
+    datePickerProps.showTimeInput = true;
+    datePickerProps.customTimeInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomTimeInput.default, {
+      onCustomChange: onChange
+    });
+  }
+  if (onBlur) {
+    datePickerProps.onCalendarClose = handleOnBlur;
+  }
+  (0, _react.useEffect)(() => {
+    // set input to readonly
+    if (datepickerRef && datepickerRef.current && readOnly) {
+      datepickerRef.current.input.readOnly = readOnly;
+    }
+  }, [readOnly]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    disabled: disabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+      ...datePickerProps,
+      ref: datepickerRef
+    })
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    width: 100%;
+
+    > input {
+      width: 100%;
+      height: 36px;
+      color: var(--font-on-background);
+      background: transparent;
+      border-radius: var(--border-radius-l);
+      border: var(--border-width) solid var(--border-color);
+      padding: 0 var(--spacing-s);
+      outline: none;
+
+      ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
+}}
+    }
+
+    > input + button {
+      padding: 0;
+      right: var(--spacing-s);
+      &::after {
+        color: var(--color-primary);
+        background-color: transparent;
+        font-size: 24px;
+        padding: 0;
+      }
+    }
+  }
+
+  .react-datepicker-popper {
+    z-index: 2;
+  }
+
+  .react-datepicker-popper[data-placement^='top'] {
+    padding-bottom: var(--spacing-xs);
+  }
+
+  .react-datepicker-popper[data-placement^='bottom'] {
+    padding-top: var(--spacing-xs);
+  }
+
+  .react-datepicker {
+    box-shadow: var(--box-shadow);
+    border-radius: var(--border-radius);
+    border: var(--border-width) solid var(--border-color);
+    padding: var(--spacing-s);
+    font-size: var(--font-body1);
+    color: var(--font-on-background);
+    background: var(--color-background1);
+
+    .react-datepicker__triangle {
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    .react-datepicker__header {
+      border: none;
+      padding: 0;
+      background: var(--color-background1);
+    }
+
+    .react-datepicker__current-month {
+      line-height: 36px;
+      color: var(--font-on-background);
+      font-size: var(--font-body1);
+      font-weight: var(--font-normal);
+    }
+
+    .react-datepicker__day-names {
+      margin: 0;
+    }
+
+    .react-datepicker__day-name,
+    .react-datepicker__day {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      color: var(--font-on-background);
+      font-weight: var(--font-normal);
+      margin: 0;
+      border-radius: 4px;
+    }
+
+    .react-datepicker__day:hover {
+      background: var(--color-hover);
+    }
+
+    .react-datepicker__day--disabled {
+      color: var(--font-on-mute);
+      background: none !important;
+    }
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__navigation {
+    top: 0;
+    width: 36px;
+    height: 36px;
+    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
+    border-radius: 4px;
+
+    &.react-datepicker__navigation--previous {
+      left: 0;
+    }
+
+    &.react-datepicker__navigation--next {
+      right: 0;
+    }
+
+    &:hover {
+      background: var(--color-hover);
+    }
+
+    .react-datepicker__navigation-icon::before {
+      border-color: var(--font-on-background);
+    }
+
+    .react-datepicker__navigation-icon--previous::before {
+      right: -4px;
+    }
+
+    .react-datepicker__navigation-icon--next::before {
+      left: -4px;
+    }
+  }
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--selected,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--selected,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__year-text--in-range {
+    background: var(--color-primary) !important;
+  }
+
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__quarter-text--keyboard-selected,
+  .react-datepicker__year-text--keyboard-selected {
+    background: none;
+  }
+
+  .react-datepicker__input-time-container {
+    margin: 0;
+    margin-top: var(--spacing-s);
+    margin-left: var(--spacing-xs);
+
+    .react-datepicker-time__input input {
+      height: 36px;
+      padding: 0 var(--spacing-xs);
+      border-radius: var(--border-radius);
+      border: var(--border-width) solid var(--border-color);
+      background: transparent;
+      color: var(--font-on-background);
+      outline: none;
+    }
+  }
+`;
+var _default = exports.default = DatetimePicker;