@cashub/ui-elv 1.0.1 → 1.0.3

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;

package/esm/datetimePicker/index.js

@@ -0,0 +1,4 @@
+export { default as DatetimePickerV3 } from './DatetimePickerV3';
+export { default as TimeInput } from './TimeInput';
+export { default as TimePickerV2 } from './TimePickerV2';
+export { default as TimePickerStyle } from './TimePickerStyle';

package/esm/datetimePicker/provider/constant.js

@@ -0,0 +1,38 @@
+const MONTH = [{
+  number: '01',
+  text: 'Jan'
+}, {
+  number: '02',
+  text: 'Feb'
+}, {
+  number: '03',
+  text: 'Mar'
+}, {
+  number: '04',
+  text: 'Apr'
+}, {
+  number: '05',
+  text: 'May'
+}, {
+  number: '06',
+  text: 'Jun'
+}, {
+  number: '07',
+  text: 'Jul'
+}, {
+  number: '08',
+  text: 'Aug'
+}, {
+  number: '09',
+  text: 'Sep'
+}, {
+  number: '10',
+  text: 'Oct'
+}, {
+  number: '11',
+  text: 'Nov'
+}, {
+  number: '12',
+  text: 'Dec'
+}];
+export { MONTH };

package/esm/datetimePicker/subComponent/DateTimePickerContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const DateTimePicker = /*#__PURE__*/createContext(null);
+export default DateTimePicker;

package/esm/datetimePicker/utils/GMTDate.js

@@ -0,0 +1,9 @@
+import { formatDate, datetimeTFormat } from '@cashub/utils';
+const GMTDate = date => {
+  if (!date) return;
+  let newDate = new Date(datetimeTFormat(date));
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  newDate = formatDate(newDate);
+  return newDate;
+};
+export default GMTDate;

package/esm/datetimePicker/utils/pad.js

@@ -0,0 +1,7 @@
+const pad = (value, length, padString) => {
+  if (!length || !padString) {
+    return value;
+  }
+  return String(value).padStart(length, padString);
+};
+export default pad;

package/esm/datetimePicker/utils/toUTC0.js

@@ -0,0 +1,7 @@
+const toUTC0 = date => {
+  if (!date) return;
+  const newDate = new Date(date);
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  return newDate;
+};
+export default toUTC0;

package/esm/descriptionList/DescriptionDetail.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const DescriptionDetail = styled.dd`
+  font-size: var(--font-h3);
+  line-height: 1.25;
+  font-weight: bold;
+  color: var(--font-on-background);
+  word-break: break-all;
+  white-space: pre-line;
+
+  > a {
+    color: var(--color-primary);
+  }
+
+  ${_ref => {
+  let {
+    fontNormal
+  } = _ref;
+  return fontNormal && 'font-weight: normal;';
+}}
+`;
+export default DescriptionDetail;

package/esm/descriptionList/DescriptionList.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+const DescriptionList = styled.dl`
+  flex: 1;
+
+  &:not(:last-child) {
+    border-right: var(--border-width) solid var(--border-color);
+    margin-right: var(--spacing);
+    padding-right: var(--spacing);
+  }
+
+  ${_ref => {
+  let {
+    invisible
+  } = _ref;
+  return invisible && 'visibility: hidden';
+}}
+`;
+export default DescriptionList;

package/esm/descriptionList/DescriptionTerm.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+const DescriptionTerm = styled.dt`
+  font-size: var(--font-h3);
+  color: var(--font-on-mute);
+  padding-bottom: var(--spacing-xs);
+`;
+export default DescriptionTerm;

package/esm/descriptionList/index.js

@@ -0,0 +1,3 @@
+export { default as DescriptionDetail } from './DescriptionDetail';
+export { default as DescriptionList } from './DescriptionList';
+export { default as DescriptionTerm } from './DescriptionTerm';

package/esm/divider/Divider.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+const Divider = styled.hr`
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: var(--spacing-s);
+
+  ${_ref => {
+  let {
+    noMarginX
+  } = _ref;
+  return noMarginX && `
+        margin-left: 0;
+        margin-right: 0;
+      `;
+}}
+
+  ${_ref2 => {
+  let {
+    dashed
+  } = _ref2;
+  return dashed && 'border-top-style: dashed;';
+}}
+`;
+export default Divider;

package/esm/divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './Divider';