@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/datetimePicker/TimePickerV2.js

@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { useCustomPopper } from '@cashub/hooks';
+import { generateRange } from '@cashub/utils';
+import pad from './utils/pad';
+import { Input } from '../form';
+import scrollbar from '../styles/mixin/scrollbar';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const LENGTH = 2;
+const PAD_STRING = '0';
+const HOUR_OPTIONS = generateRange(0, 23).map(value => {
+  return pad(value, LENGTH, PAD_STRING);
+});
+const MINUTE_SECOND_OPTIONS = generateRange(0, 59).map(value => {
+  return pad(value, LENGTH, PAD_STRING);
+});
+const EMPTY_TIME = {
+  hour: '',
+  minute: '',
+  second: ''
+};
+const getTimeFromSelected = (selected, allowEmpty) => {
+  let time = new Date(Date.parse(selected));
+  if (isNaN(time)) {
+    if (allowEmpty) {
+      return EMPTY_TIME;
+    }
+    time = new Date();
+  }
+  return {
+    hour: pad(time.getHours(), LENGTH, PAD_STRING),
+    minute: pad(time.getMinutes(), LENGTH, PAD_STRING),
+    second: pad(time.getSeconds(), LENGTH, PAD_STRING)
+  };
+};
+const TimePickerV2 = _ref => {
+  let {
+    selected,
+    onSelect,
+    allowEmpty = false
+  } = _ref;
+  const [display, setDisplay] = useState(false);
+  const [targetElement, setTargetElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [time, setTime] = useState(() => {
+    return getTimeFromSelected(selected, allowEmpty);
+  });
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = useCustomPopper(targetElement, popperElement, {
+    placement: 'bottom-start'
+  });
+  const handleToggle = () => {
+    setDisplay(!display);
+    update();
+  };
+  const handleChange = (type, value) => {
+    const next = {
+      ...time,
+      [type]: value
+    };
+    setTime(next);
+    if (typeof onSelect === 'function' && next.hour && next.minute && next.second) {
+      onSelect(`${next.hour}:${next.minute}:${next.second}`);
+    }
+  };
+
+  // sync time picker state when selected value changes
+  useEffect(() => {
+    setTime(getTimeFromSelected(selected, allowEmpty));
+  }, [allowEmpty, selected]);
+  useEffect(() => {
+    if (display) {
+      const {
+        childNodes
+      } = popperElement;
+      childNodes.forEach(panel => {
+        const selectedItem = panel.querySelector('[aria-selected="true"]');
+        if (panel.scrollHeight > panel.clientHeight) {
+          panel.scrollTop = selectedItem ? selectedItem.offsetTop : 0;
+        }
+      });
+    }
+  }, [display, popperElement]);
+  return /*#__PURE__*/_jsx(OutsideClickHandler, {
+    onOutsideClick: () => {
+      setDisplay(false);
+    },
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Input, {
+        ref: setTargetElement,
+        type: "text",
+        readOnly: true,
+        onClick: handleToggle,
+        value: time.hour && time.minute && time.second ? `${time.hour}:${time.minute}:${time.second}` : ''
+      }), /*#__PURE__*/_jsxs(Panel, {
+        ref: setPopperElement,
+        $display: display,
+        style: styles.popper,
+        ...attributes.popper,
+        placement: state && state.placement,
+        children: [/*#__PURE__*/_jsx(Picker, {
+          children: HOUR_OPTIONS.map(option => {
+            return /*#__PURE__*/_jsx(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('hour', option);
+              },
+              selected: option === time.hour,
+              "aria-selected": option === time.hour,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/_jsx(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/_jsx(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('minute', option);
+              },
+              selected: option === time.minute,
+              "aria-selected": option === time.minute,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/_jsx(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/_jsx(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('second', option);
+              },
+              selected: option === time.second,
+              "aria-selected": option === time.second,
+              children: option
+            }, option);
+          })
+        })]
+      })]
+    })
+  });
+};
+const Panel = styled.div`
+  display: flex;
+  visibility: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'visible' : 'hidden';
+}};
+  width: 100%;
+  max-width: 360px;
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  z-index: 85;
+`;
+const Picker = styled.ul`
+  flex: 1;
+  text-align: center;
+  max-height: 144px;
+  overflow-y: auto;
+
+  ${scrollbar}
+
+  &:first-child {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  &:not(:last-child) {
+    border-right: var(--border-width) solid var(--border-color);
+  }
+`;
+const Option = styled.li`
+  padding: var(--spacing-xs) 0;
+  background: var(--color-background1);
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  ${_ref3 => {
+  let {
+    selected
+  } = _ref3;
+  return selected && css`
+      background: var(--color-hover);
+    `;
+}}
+`;
+export default TimePickerV2;

package/esm/datetimePicker/accordion/Month.js

@@ -0,0 +1,245 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { IoMdArrowDropup } from 'react-icons/io/index.esm';
+import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md/index.esm';
+import styled, { css } from 'styled-components';
+import { datetimeTFormat } from '@cashub/utils';
+import DateTimePicker from '../subComponent/DateTimePickerContext';
+import { MONTH } from '../provider/constant';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Month = _ref => {
+  let {
+    expand,
+    handleDisplayAccordionContent
+  } = _ref;
+  const {
+    selectedDate,
+    setSelectedDate,
+    minDate,
+    maxDate,
+    fixedYear,
+    setAccordionCurrentDisplayType
+  } = useContext(DateTimePicker);
+  const handleChangeMonth = useCallback(month => {
+    // switch to the first day of the target month
+    const date = new Date(selectedDate);
+    date.setDate(1);
+    date.setMonth(month);
+    setSelectedDate(datetimeTFormat(date));
+    setAccordionCurrentDisplayType(null);
+  }, [setAccordionCurrentDisplayType, setSelectedDate, selectedDate]);
+  const changeToPreviousMonth = () => {
+    const date = new Date(selectedDate);
+    handleChangeMonth(date.getMonth() <= 0 ? 11 : date.getMonth() - 1);
+  };
+  const changeToNextMonth = () => {
+    const date = new Date(selectedDate);
+    handleChangeMonth(date.getMonth() >= 11 ? 0 : date.getMonth() + 1);
+  };
+  const handleMonthItemDisable = useCallback(month => {
+    let minDayDate;
+    let maxDayDate;
+    if (minDate) {
+      minDayDate = new Date(datetimeTFormat(minDate));
+      minDayDate.setMonth(month);
+      minDayDate.setFullYear(new Date(selectedDate).getFullYear());
+    }
+    if (maxDate) {
+      maxDayDate = maxDate && new Date(datetimeTFormat(maxDate));
+      maxDayDate.setFullYear(new Date(selectedDate).getFullYear());
+      maxDayDate.setMonth(month);
+    }
+    if (minDate !== undefined && maxDate !== undefined) {
+      return !(new Date(datetimeTFormat(minDate)) <= minDayDate && maxDayDate <= new Date(datetimeTFormat(maxDate)));
+    } else if (minDate) {
+      return !(datetimeTFormat(minDate) <= datetimeTFormat(minDayDate));
+    } else if (maxDate) {
+      return !(datetimeTFormat(maxDayDate) <= datetimeTFormat(maxDate));
+    }
+    return false;
+  }, [maxDate, minDate, selectedDate]);
+  const handleDisableArrow = useCallback(arrowType => {
+    const date = new Date(selectedDate);
+    const selectedMonth = date.getMonth();
+    date.setDate(1);
+    if (arrowType === 'previous') {
+      date.setMonth(selectedMonth - 1 < 0 ? 11 : selectedMonth - 1);
+    } else {
+      date.setMonth(selectedMonth + 1 > 11 ? 0 : selectedMonth + 1);
+    }
+    if (fixedYear && !minDate && !maxDate || !minDate && !maxDate) {
+      return false;
+    }
+    const minDate1st = minDate && new Date(datetimeTFormat(minDate));
+    const maxDate1st = maxDate && new Date(datetimeTFormat(maxDate));
+    if (minDate && !maxDate) {
+      minDate1st.setDate(1);
+      minDate1st.setHours(0, 0, 0, 0);
+      return !(minDate1st <= date);
+    } else if (maxDate && !minDate) {
+      maxDate1st.setDate(1);
+      maxDate1st.setHours(23, 59, 59, 0);
+      return !(maxDate1st >= date);
+    } else if (minDate && maxDate) {
+      minDate1st.setDate(1);
+      minDate1st.setHours(0, 0, 0, 0);
+      maxDate1st.setDate(1);
+      maxDate1st.setHours(23, 59, 59, 0);
+      return !(minDate1st <= date && maxDate1st >= date);
+    }
+  }, [fixedYear, maxDate, minDate, selectedDate]);
+  const monthContent = useMemo(() => {
+    const selectedMonth = new Date(selectedDate).getMonth();
+    return MONTH.map((month, index) => /*#__PURE__*/_jsx(Item, {
+      selected: selectedMonth === index,
+      onClick: () => {
+        handleChangeMonth(index);
+      },
+      disabled: handleMonthItemDisable(index),
+      children: month.text
+    }, month.number));
+  }, [selectedDate, handleChangeMonth, handleMonthItemDisable]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Header, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: changeToPreviousMonth,
+        disabled: handleDisableArrow('previous'),
+        children: /*#__PURE__*/_jsx(MdArrowBackIosNew, {})
+      }), /*#__PURE__*/_jsx("div", {
+        children: MONTH[new Date(selectedDate).getMonth()].text
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: changeToNextMonth,
+        disabled: handleDisableArrow('next'),
+        children: /*#__PURE__*/_jsx(MdArrowForwardIos, {})
+      }), /*#__PURE__*/_jsx(IconButton, {
+        $rotate: expand,
+        right: true,
+        onClick: handleDisplayAccordionContent,
+        children: /*#__PURE__*/_jsx(IoMdArrowDropup, {})
+      })]
+    }), /*#__PURE__*/_jsx(Body, {
+      expand: expand,
+      fixedYear: fixedYear,
+      children: monthContent
+    })]
+  });
+};
+const Header = styled.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const IconButton = styled.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    right,
+    $rotate
+  } = _ref3;
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$rotate && css`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Body = styled.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
+  let {
+    expand
+  } = _ref4;
+  return expand ? 'flex' : 'none';
+}};
+
+  ${_ref5 => {
+  let {
+    fixedYear
+  } = _ref5;
+  return css`
+      min-height: ${fixedYear ? '192' : '144'}px;
+    `;
+}}
+  transition: .3s;
+
+  transition: 0.3s;
+`;
+const Item = styled.button`
+  width: calc(100% / 3);
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return !disabled && 'background: var(--color-primary)';
+}}
+  }
+
+  ${_ref7 => {
+  let {
+    disabled
+  } = _ref7;
+  return disabled && 'color: var(--font-on-mute)';
+}}
+
+  ${_ref8 => {
+  let {
+    selected
+  } = _ref8;
+  return selected && 'background: var(--color-hover)';
+}}
+`;
+export default Month;

package/esm/datetimePicker/accordion/Year.js

@@ -0,0 +1,275 @@
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { IoMdArrowDropup } from 'react-icons/io/index.esm';
+import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md/index.esm';
+import styled, { css } from 'styled-components';
+import { generateRange, datetimeTFormat } from '@cashub/utils';
+import DateTimePicker from '../subComponent/DateTimePickerContext';
+import scrollbar from '../../styles/mixin/scrollbar';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Year = _ref => {
+  let {
+    expand,
+    handleDisplayAccordionContent
+  } = _ref;
+  const {
+    fixedYear,
+    minDate,
+    maxDate,
+    selectedDate,
+    setSelectedDate,
+    setAccordionCurrentDisplayType
+  } = useContext(DateTimePicker);
+  const bodyRef = useRef(null);
+  const selectedYearRef = useRef(null);
+  const [yearArr, setYearArr] = useState([]);
+  const minYear = minDate ? new Date(datetimeTFormat(minDate)).getFullYear() : 1;
+  const maxYear = maxDate ? new Date(datetimeTFormat(maxDate)).getFullYear() : null;
+  const handleChangeYear = useCallback(year => {
+    const date = new Date(selectedDate);
+    date.setFullYear(year);
+    setSelectedDate(datetimeTFormat(date));
+    setAccordionCurrentDisplayType(null);
+  }, [selectedDate, setAccordionCurrentDisplayType, setSelectedDate]);
+  const changeToPreviousYear = useCallback(() => {
+    const date = new Date(selectedDate);
+    if (date.getFullYear() > 1) {
+      handleChangeYear(date.getFullYear() - 1);
+    }
+  }, [selectedDate, handleChangeYear]);
+  const changeToNextYear = useCallback(() => {
+    const date = new Date(selectedDate);
+    handleChangeYear(date.getFullYear() + 1);
+  }, [selectedDate, handleChangeYear]);
+  const handleYearItemDisable = useCallback(year => {
+    if (minDate !== undefined && maxDate !== undefined) {
+      return !(minYear <= year && year <= maxYear);
+    }
+    if (minDate) {
+      return minYear > year;
+    } else if (maxDate) {
+      return maxYear < year;
+    }
+    return false;
+  }, [minYear, maxYear, maxDate, minDate]);
+  const handleDisableArrow = useCallback(arrowType => {
+    const data = new Date(selectedDate);
+    if (arrowType === 'previous') {
+      return minYear > data.getFullYear() - 1;
+    } else if (arrowType === 'next') {
+      if (maxYear) {
+        return maxYear < data.getFullYear() + 1;
+      }
+      return false;
+    }
+  }, [selectedDate, minYear, maxYear]);
+  const yearContent = useMemo(() => {
+    const data = new Date(selectedDate);
+    return yearArr.map((year, index) => /*#__PURE__*/_jsx(Item, {
+      ref: data.getFullYear() === year ? selectedYearRef : null,
+      selected: data.getFullYear() === year,
+      onClick: () => {
+        handleChangeYear(year);
+      },
+      disabled: handleYearItemDisable(year),
+      children: year
+    }, index));
+  }, [selectedDate, yearArr, handleChangeYear, handleYearItemDisable]);
+  useEffect(() => {
+    const data = new Date(selectedDate);
+    if (!fixedYear) {
+      const start = data.getFullYear() - 16 > 0 ? data.getFullYear() - 16 : 1;
+      const end = data.getFullYear() + 16;
+      const yearRange = generateRange(start, end);
+      setYearArr(yearRange);
+    }
+  }, [fixedYear, selectedDate]);
+  const scroll = useCallback(() => {
+    if (bodyRef?.current && selectedYearRef?.current) {
+      const body = bodyRef.current;
+      if (body.scrollTop + body.clientHeight >= body.scrollHeight - 90) {
+        body.removeEventListener('scroll', scroll);
+        setTimeout(() => {
+          setYearArr(previousParams => {
+            body.addEventListener('scroll', scroll);
+            const addYearRange = generateRange(previousParams[previousParams.length - 1] + 1, previousParams[previousParams.length - 1] + 15);
+            return [...previousParams, ...addYearRange];
+          });
+        }, 400);
+      } else if (body.scrollTop < 50) {
+        body.removeEventListener('scroll', scroll);
+        setTimeout(() => {
+          setYearArr(previousParams => {
+            body.addEventListener('scroll', scroll);
+            if (previousParams[0] - 15 <= 0) {
+              const addYearRange = generateRange(previousParams[0] - (previousParams[0] - 1), previousParams[0] - 1);
+              return [...addYearRange, ...previousParams];
+            }
+            setTimeout(() => {
+              body.scrollTo({
+                top: body.scrollTop + 96
+              });
+            }, 400);
+            const addYearRange = generateRange(previousParams[0] - 15, previousParams[0] - 1);
+            return [...addYearRange, ...previousParams];
+          });
+        }, 400);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    bodyRef.current.addEventListener('scroll', scroll);
+  }, [scroll]);
+  useEffect(() => {
+    if (expand && bodyRef?.current && selectedYearRef?.current) {
+      bodyRef.current.scrollTo({
+        top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop
+      });
+    }
+  }, [expand]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Header, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: changeToPreviousYear,
+        disabled: handleDisableArrow('previous'),
+        children: /*#__PURE__*/_jsx(MdArrowBackIosNew, {})
+      }), /*#__PURE__*/_jsx("div", {
+        children: new Date(selectedDate).getFullYear()
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: changeToNextYear,
+        disabled: handleDisableArrow('next'),
+        children: /*#__PURE__*/_jsx(MdArrowForwardIos, {})
+      }), /*#__PURE__*/_jsx(IconButton, {
+        $rotate: expand,
+        right: true,
+        onClick: handleDisplayAccordionContent,
+        children: /*#__PURE__*/_jsx(IoMdArrowDropup, {})
+      })]
+    }), /*#__PURE__*/_jsx(Body, {
+      expand: expand,
+      fixedYear: fixedYear,
+      ref: bodyRef,
+      children: yearContent
+    })]
+  });
+};
+const Header = styled.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const IconButton = styled.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    right,
+    $rotate
+  } = _ref3;
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$rotate && css`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Body = styled.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
+  let {
+    expand
+  } = _ref4;
+  return expand ? 'flex' : 'none';
+}};
+  transition: 0.3s;
+  overflow-y: scroll;
+  gap: 12px 0;
+  ${scrollbar}
+
+  ${_ref5 => {
+  let {
+    fixedYear
+  } = _ref5;
+  return css`
+      height: ${fixedYear ? '144' : '192'}px};
+    `;
+}}
+`;
+const Item = styled.button`
+  width: calc(100% / 3);
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return !disabled && 'background: var(--color-primary);';
+}}
+  }
+
+  ${_ref7 => {
+  let {
+    disabled
+  } = _ref7;
+  return disabled && 'color: var(--font-on-mute)';
+}}
+
+  ${_ref8 => {
+  let {
+    selected
+  } = _ref8;
+  return selected && 'background: var(--color-hover)';
+}}
+`;
+export default Year;