@cashub/ui 0.22.8 → 0.22.9

package/src/datetimePicker/DatePickerV2.js

@@ -0,0 +1,500 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import OutsideClickHandler from 'react-outside-click-handler';
+import styled, { css } from 'styled-components';
+import { MdClose } from 'react-icons/md';
+import { useCustomPopper } from '@cashub/hooks';
+import { formatDate } from '@cashub/utils';
+import Button from '../button/Button';
+import Input from '../form/Input';
+import Month from './accordion/Month';
+import Year from './accordion/Year';
+import DateTimePicker from './subComponent/DateTimePickerContext';
+import toUTC0 from './utils/toUTC0';
+
+const DEFAULT_TIME = '00:00:00';
+const DatePickerV2 = ({
+  selected,
+  fixedYear,
+  allowClear,
+  minDate,
+  maxDate,
+  onConfirm,
+  disabled,
+}) => {
+  const { t } = useTranslation();
+  const [toggleElement, setToggleElement] = useState(null);
+  const [contentElement, setContentElement] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(() => {
+    const defaultDate = selected ? new Date(selected) : new Date();
+
+    return `${formatDate(toUTC0(defaultDate), 'date')} ${DEFAULT_TIME}`;
+  });
+  const [confirmDate, setConfirmDate] = useState(
+    selected ? formatDate(toUTC0(selected), 'date') : '',
+  );
+  const [displayPicker, setDisplayPicker] = useState(false);
+  const [accordionCurrentDisplayType, setAccordionCurrentDisplayType] =
+    useState(null);
+
+  const weeks = useMemo(() => {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((week) => (
+      <Week key={week}>{week}</Week>
+    ));
+  }, []);
+
+  const minDateWithTime = useMemo(() => {
+    if (!minDate) return;
+
+    return `${minDate} 00:00:00`;
+  }, [minDate]);
+
+  const maxDateWithTime = useMemo(() => {
+    if (!maxDate) return;
+
+    return `${maxDate} 00:00:00`;
+  }, [maxDate]);
+
+  const { styles, attributes, state, update } = 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 = useCallback(
+    (type) => {
+      if (accordionCurrentDisplayType === type) {
+        setAccordionCurrentDisplayType(null);
+      } else {
+        setAccordionCurrentDisplayType(type);
+      }
+    },
+    [accordionCurrentDisplayType],
+  );
+
+  const handleConfirm = useCallback(() => {
+    if (confirmDate) {
+      onConfirm(confirmDate);
+    }
+
+    setDisplayPicker(false);
+    setAccordionCurrentDisplayType(null);
+  }, [confirmDate, onConfirm]);
+
+  const handleChangeDate = 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 = formatDate(date, 'date');
+      setSelectedDate(`${formattedDate} ${DEFAULT_TIME}`);
+      setConfirmDate(formattedDate);
+    },
+    [fixedYear, selectedDate],
+  );
+
+  const handleDisabled = 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 = useCallback(
+    (day, index, firstDayOfMonth, daysOfMonthForSelectedDate) => {
+      const selectedDateObj = new Date(selectedDate);
+      const confirmDateObj = toUTC0(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 = 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 (
+        <Day
+          key={index}
+          disabled={handleDisabled(
+            firstDayOfMonth,
+            lastDayOfMonth,
+            daysOfMonthForSelectedDate,
+            index,
+            day,
+          )}
+          onClick={() => {
+            handleChangeDate(
+              daysOfMonthForSelectedDate,
+              firstDayOfMonth,
+              index,
+              day,
+            );
+          }}
+          selected={isSelectedDay(
+            day,
+            index,
+            firstDayOfMonth,
+            daysOfMonthForSelectedDate,
+          )}
+        >
+          {day}
+        </Day>
+      );
+    });
+  }, [selectedDate, handleChangeDate, isSelectedDay, handleDisabled]);
+
+  useEffect(() => {
+    if (selected) {
+      const formattedDate = formatDate(toUTC0(selected), 'date');
+      setSelectedDate(`${formattedDate} ${DEFAULT_TIME}`);
+      setConfirmDate(formattedDate);
+    } else {
+      setConfirmDate('');
+    }
+  }, [selected]);
+
+  return (
+    <DateTimePicker.Provider value={context}>
+      <OutsideClickHandler onOutsideClick={handleConfirm}>
+        <Wrapper>
+          <Input
+            disabled={disabled}
+            ref={setToggleElement}
+            value={confirmDate}
+            onClick={handleToggle}
+            readOnly
+          />
+
+          {confirmDate && !disabled && allowClear && (
+            <CloseButton
+              onClick={() => {
+                setConfirmDate('');
+                onConfirm('');
+              }}
+            />
+          )}
+        </Wrapper>
+        <Picker
+          {...attributes.popper}
+          style={styles.popper}
+          placement={state && state.placement}
+          ref={setContentElement}
+          displayPicker={displayPicker}
+        >
+          <Body accordionCurrentDisplayType={accordionCurrentDisplayType}>
+            {!fixedYear && (
+              <Year
+                expand={accordionCurrentDisplayType === 'year'}
+                handleDisplayAccordionContent={() => {
+                  changeDisplayAccordion('year');
+                }}
+              />
+            )}
+            <Month
+              expand={accordionCurrentDisplayType === 'month'}
+              handleDisplayAccordionContent={() => {
+                changeDisplayAccordion('month');
+              }}
+              confirmDate={confirmDate}
+            />
+
+            <DateContent>
+              {weeks}
+              {days}
+            </DateContent>
+          </Body>
+          <Footer>
+            <ConfirmButton fullWidth alignCenter onClick={handleConfirm}>
+              {t('Confirm')}
+            </ConfirmButton>
+          </Footer>
+        </Picker>
+      </OutsideClickHandler>
+    </DateTimePicker.Provider>
+  );
+};
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const CloseButton = styled(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 = styled.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: ${({ displayPicker }) => (displayPicker ? 'block' : 'none')};
+`;
+
+const Week = styled.div`
+  width: calc(100% / 7);
+  height: 36px;
+  border-radius: var(--border-radius-s);
+  line-height: 36px;
+  text-align: center;
+`;
+
+const Body = styled.div`
+  ${({ accordionCurrentDisplayType }) =>
+    accordionCurrentDisplayType &&
+    css`
+      height: 216px;
+    `}
+
+  overflow: hidden;
+  padding: ${({ accordionCurrentDisplayType }) => {
+    return accordionCurrentDisplayType === 'year'
+      ? ' 0 4px var(--spacing-s) var(--spacing-s)'
+      : '0 var(--spacing-s) 0 var(--spacing-s)';
+  }};
+`;
+
+const Footer = styled.div`
+  padding: 0 var(--spacing-s);
+`;
+
+const Day = styled.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);
+  }
+
+  ${({ selected }) => selected && 'background: var(--color-hover);'}
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      color: var(--font-on-mute);
+      background: none;
+      &:hover {
+        background: none;
+      }
+    `}
+`;
+
+const ConfirmButton = styled(Button)`
+  margin: 16px auto 0;
+`;
+
+const DateContent = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+export default DatePickerV2;

package/src/datetimePicker/DatetimePicker.js

@@ -0,0 +1,218 @@
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import CustomTimeInput from './subComponent/CustomTimeInput';
+
+const DatetimePicker = ({
+  selected = '',
+  onChange,
+  dateFormat = 'yyyy-MM-dd HH:mm:ss',
+  minDate,
+  maxDate,
+  showTimeInput,
+  readOnly,
+  disabled,
+  onBlur,
+}) => {
+  const datepickerRef = 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)) : '',
+  };
+
+  if (showTimeInput) {
+    datePickerProps.showTimeInput = true;
+    datePickerProps.customTimeInput = (
+      <CustomTimeInput onCustomChange={onChange} />
+    );
+  }
+
+  if (onBlur) {
+    datePickerProps.onCalendarClose = handleOnBlur;
+  }
+
+  useEffect(() => {
+    // set input to readonly
+    if (datepickerRef && datepickerRef.current && readOnly) {
+      datepickerRef.current.input.readOnly = readOnly;
+    }
+  }, [readOnly]);
+
+  return (
+    <Wrapper disabled={disabled}>
+      <DatePicker {...datePickerProps} ref={datepickerRef} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    > 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;
+
+      ${({ disabled }) => {
+        return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
+      }}
+    }
+  }
+
+  .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;
+    }
+  }
+`;
+
+export default DatetimePicker;