@cashub/ui 0.22.9 → 0.22.11

package/src/datetimePicker/accordion/Year.js

@@ -1,307 +0,0 @@
-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

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

package/src/datetimePicker/hooks/useChangeNumber.js

@@ -1,42 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

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