@cashub/ui 0.22.8 → 0.22.9

package/src/datetimePicker/accordion/Year.js

@@ -0,0 +1,307 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { IoMdArrowDropup } from 'react-icons/io';
+import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
+import styled, { css } from 'styled-components';
+import { generateRange, datetimeTFormat } from '@cashub/utils';
+import DateTimePicker from '../subComponent/DateTimePickerContext';
+import scrollbar from '../../styles/mixin/scrollbar';
+
+const Year = ({ expand, handleDisplayAccordionContent }) => {
+  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) => (
+      <Item
+        ref={data.getFullYear() === year ? selectedYearRef : null}
+        selected={data.getFullYear() === year}
+        onClick={() => {
+          handleChangeYear(year);
+        }}
+        key={index}
+        disabled={handleYearItemDisable(year)}
+      >
+        {year}
+      </Item>
+    ));
+  }, [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 (
+    <>
+      <Header>
+        <IconButton
+          onClick={changeToPreviousYear}
+          disabled={handleDisableArrow('previous')}
+        >
+          <MdArrowBackIosNew />
+        </IconButton>
+
+        <div>{new Date(selectedDate).getFullYear()}</div>
+
+        <IconButton
+          onClick={changeToNextYear}
+          disabled={handleDisableArrow('next')}
+        >
+          <MdArrowForwardIos />
+        </IconButton>
+        <IconButton
+          $rotate={expand}
+          right
+          onClick={handleDisplayAccordionContent}
+        >
+          <IoMdArrowDropup />
+        </IconButton>
+      </Header>
+      <Body expand={expand} fixedYear={fixedYear} ref={bodyRef}>
+        {yearContent}
+      </Body>
+    </>
+  );
+};
+
+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);
+  }
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `}
+
+  ${({ right, $rotate }) =>
+    right &&
+    `
+    position: absolute;
+    right: 0;
+    ${
+      $rotate &&
+      css`
+        transform: rotate(180deg);
+      `
+    }
+  `}
+`;
+
+const Body = styled.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${({ expand }) => (expand ? 'flex' : 'none')};
+  transition: 0.3s;
+  overflow-y: scroll;
+  gap: 12px 0;
+  ${scrollbar}
+
+  ${({ fixedYear }) =>
+    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 {
+    ${({ disabled }) => !disabled && 'background: var(--color-primary);'}
+  }
+
+  ${({ disabled }) => disabled && 'color: var(--font-on-mute)'}
+
+  ${({ selected }) => selected && 'background: var(--color-hover)'}
+`;
+
+export default Year;

package/src/datetimePicker/hooks/index.js

@@ -0,0 +1,3 @@
+export { default as useIncrease } from './useIncrease';
+export { default as useDecrease } from './useDecrease';
+export { default as useChangeNumber } from './useChangeNumber';

package/src/datetimePicker/hooks/useChangeNumber.js

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import { isInteger } from '@cashub/utils';
+
+const useChangeNumber = (min, max, setState, name) => {
+  return useCallback(
+    (number) => {
+      let value = String(number);
+
+      // update value when value is a valid value
+      if (value.length > 0) {
+        // if value is not a integer, then remove last char
+        if (!isInteger(value)) {
+          value = value.substring(0, value.length - 1);
+        }
+
+        // use min value instead when exceed minimum
+        if (value.length >= String(min).length && value < min) {
+          value = min;
+        }
+
+        // use max value instead when exceed maximum
+        if (value > max) {
+          value = max;
+        }
+      }
+
+      setState((previous) => {
+        if (name && typeof previous === 'object') {
+          const newState = { ...previous };
+          newState[name] = value;
+
+          return newState;
+        }
+
+        return value;
+      });
+    },
+    [min, max, setState, name],
+  );
+};
+
+export default useChangeNumber;

package/src/datetimePicker/hooks/useDecrease.js

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import pad from '../utils/pad';
+
+const useDecrease = (min, max, setState, config = {}) => {
+  const { name, length, padString } = config;
+
+  return useCallback(() => {
+    setState((previous) => {
+      if (name && typeof previous === 'object') {
+        let value = parseInt(previous[name], 10) - 1;
+        if (value < min) {
+          value = max;
+        }
+
+        const newState = { ...previous };
+        newState[name] = pad(value, length, padString);
+
+        return newState;
+      }
+
+      let value = parseInt(previous, 10) - 1;
+      if (value < min) {
+        value = max;
+      }
+
+      return pad(value, length, padString);
+    });
+  }, [min, max, setState, name, length, padString]);
+};
+
+export default useDecrease;

package/src/datetimePicker/hooks/useIncrease.js

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import pad from '../utils/pad';
+
+const useIncrease = (min, max, setState, config = {}) => {
+  const { name, length, padString } = config;
+
+  return useCallback(() => {
+    setState((previous) => {
+      if (name && typeof previous === 'object') {
+        let value = parseInt(previous[name], 10) + 1;
+        if (value > max) {
+          value = min;
+        }
+
+        const newState = { ...previous };
+        newState[name] = pad(value, length, padString);
+
+        return newState;
+      }
+
+      let value = parseInt(previous, 10) + 1;
+      if (value > max) {
+        value = min;
+      }
+
+      return pad(value, length, padString);
+    });
+  }, [min, max, setState, name, length, padString]);
+};
+
+export default useIncrease;

package/src/datetimePicker/index.js

@@ -0,0 +1,7 @@
+export { default as DatePicker } from './DatePicker';
+export { default as DatePickerV2 } from './DatePickerV2';
+export { default as DatetimePicker } from './DatetimePicker';
+export { default as DatetimePickerV2 } from './DatetimePickerV2';
+export { default as TimeInput } from './TimeInput';
+export { default as TimePicker } from './TimePicker';
+export { default as TimePickerStyle } from './TimePickerStyle';

package/src/datetimePicker/provider/constant.js

@@ -0,0 +1,16 @@
+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 };