@cashub/ui 0.22.8 → 0.22.9

package/src/datetimePicker/__stories__/TimeInput.stories.js

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import moment from 'moment';
+import { formatDate } from '@cashub/utils';
+import TimeInput from '../TimeInput';
+
+const metadata = {
+  title: 'DatetimePicker/TimeInput',
+  component: TimeInput,
+  argTypes: {
+    format: {
+      description: 'format',
+    },
+    allowEmpty: {
+      description: 'The input is allowed to be empty',
+    },
+    showSecond: {
+      description: 'Can show second',
+    },
+    onChange: {
+      description: 'A callback that return new selected time',
+    },
+    onClose: {
+      description: 'A callback, called when the TimePicker panel is closed',
+    },
+    disabled: {
+      description: 'Disable TimeInput component',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { onChange, onClose } = args;
+  const [selected, setSelected] = useState(args.value);
+
+  useEffect(() => {
+    setSelected(args.value);
+  }, [args.value]);
+
+  return (
+    <>
+      <TimeInput
+        {...args}
+        onChange={(value) => {
+          if (!value) return;
+          setSelected(value);
+          onChange();
+        }}
+        value={moment(selected, 'HH:mm:ss')}
+        onClose={() => {
+          onClose();
+        }}
+      />
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  allowEmpty: false,
+  showSecond: true,
+  format: 'HH:mm:ss',
+  value: formatDate(Date.now(), 'time'),
+  disabled: false,
+};
+
+export default metadata;
+export { Default };

package/src/datetimePicker/__stories__/TimePicker.stories.js

@@ -0,0 +1,29 @@
+import TimePicker from '../TimePicker';
+
+const metadata = {
+  title: 'DatetimePicker/TimePicker',
+  component: TimePicker,
+  argTypes: {
+    labelName: {
+      description: 'label text',
+    },
+    value: {
+      description: 'Current time value',
+    },
+    showSecond: {
+      description: 'Can show second',
+    },
+    onChange: {
+      description: 'A callback that return new selected time',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <TimePicker {...args} />;
+};
+
+const Default = Template.bind({});
+
+export default metadata;
+export { Default };

package/src/datetimePicker/__test__/CustomTimeInput.test.js

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CustomTimeInput from '../subComponent/CustomTimeInput';
+
+describe('Test CustomTimeInput Component', () => {
+  const date = new Date(2022, 1, 21, 12, 0, 0);
+  const time = date.toLocaleTimeString('it-IT');
+  const onChange = jest.fn();
+
+  test('render', () => {
+    render(<CustomTimeInput date={date} />);
+
+    const inputElement = screen.getByRole('textbox');
+    expect(inputElement).toHaveValue(time);
+  });
+
+  test('change time', () => {
+    render(<CustomTimeInput date={date} onCustomChange={onChange} />);
+
+    const inputElement = screen.getByRole('textbox');
+    userEvent.type(inputElement, '{backspace}{backspace}30{enter}');
+    expect(inputElement).toHaveValue(time.substring(0, time.length - 2) + '30');
+    expect(onChange).toHaveBeenLastCalledWith(new Date(2022, 1, 21, 12, 0, 30));
+  });
+});

package/src/datetimePicker/__test__/DatetimePicker.test.js

@@ -0,0 +1,121 @@
+import { render, screen } from '@testing-library/react';
+import DatetimePicker from '../DatetimePicker';
+
+jest.mock('react-datepicker', () => {
+  const React = require('react');
+
+  return React.forwardRef(({ customTimeInput, ...props }, ref) => {
+    if (props.onChange) {
+      props.onChange = typeof props.onChange;
+    }
+    if (props.onCalendarClose) {
+      props.onCalendarClose = typeof props.onCalendarClose;
+    }
+
+    React.useEffect(() => {
+      ref.current = {
+        input: global.document.getElementById('datepickerInput'),
+      };
+    }, [ref]);
+
+    return (
+      <div
+        className='react-datepicker-wrapper, react-datepicker__input-container'
+        data-testid='datepicker'
+      >
+        <input type='text' id='datepickerInput' />
+        {JSON.stringify(props)}
+        {customTimeInput}
+      </div>
+    );
+  });
+});
+
+jest.mock('../subComponent/CustomTimeInput', () => {
+  return ({ ...props }) => {
+    if (props.onCustomChange) {
+      props.onCustomChange = typeof props.onCustomChange;
+    }
+
+    return <div data-testid='timeinput'>{JSON.stringify(props)}</div>;
+  };
+});
+
+describe('Test DatetimePicker Component', () => {
+  const selected = '2022-01-21 12:00:00';
+  const onChange = jest.fn();
+  const dateFormat = 'yyyy-MM-dd';
+  const minDate = '2022-01-01 00:00:00';
+  const maxDate = '2022-01-31 23:59:59';
+
+  test('render component', () => {
+    render(
+      <DatetimePicker
+        selected={selected}
+        onChange={onChange}
+        dateFormat={dateFormat}
+        minDate={minDate}
+        maxDate={maxDate}
+      />,
+    );
+
+    const datePickerElement = screen.getByTestId('datepicker');
+    expect(datePickerElement).toHaveTextContent(
+      JSON.stringify({
+        dateFormat,
+        onChange: typeof onChange,
+        selected: new Date(Date.parse(selected)),
+        minDate: new Date(Date.parse(minDate)),
+        maxDate: new Date(Date.parse(maxDate)),
+      }),
+    );
+  });
+
+  test('show time input', () => {
+    render(
+      <DatetimePicker
+        selected={selected}
+        onChange={onChange}
+        showTimeInput={true}
+      />,
+    );
+
+    const timeinputElement = screen.getByTestId('timeinput');
+    expect(timeinputElement).toHaveTextContent(
+      JSON.stringify({
+        onCustomChange: typeof onChange,
+      }),
+    );
+  });
+
+  test('read only', () => {
+    render(<DatetimePicker selected={selected} onChange={onChange} readOnly />);
+
+    const inputElement = screen.getByRole('textbox');
+    expect(inputElement).toHaveAttribute('readonly');
+  });
+
+  test('blur', () => {
+    const onBlur = jest.fn();
+    render(
+      <DatetimePicker
+        selected={selected}
+        onChange={onChange}
+        onBlur={onBlur}
+      />,
+    );
+
+    const datePickerElement = screen.getByTestId('datepicker');
+    expect(datePickerElement).toHaveTextContent('"onCalendarClose":"function"');
+  });
+
+  test('disabled', () => {
+    render(<DatetimePicker selected={selected} onChange={onChange} disabled />);
+
+    const inputElement = screen.getByRole('textbox');
+    expect(inputElement).toHaveStyle({
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    });
+  });
+});

package/src/datetimePicker/__test__/TimeInput.test.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import TimeInput from '../TimeInput';
+
+jest.mock('rc-time-picker', () => {
+  return (props) => {
+    return <div data-testid='rcTimeInput'>{JSON.stringify(props)}</div>;
+  };
+});
+
+describe('Test TimeInput Component', () => {
+  test('render', () => {
+    render(<TimeInput format='HH:mm:ss' allowEmpty={false} />);
+
+    const rcTimeInputElement = screen.getByTestId('rcTimeInput');
+    expect(rcTimeInputElement).toHaveTextContent(
+      JSON.stringify({
+        format: 'HH:mm:ss',
+        allowEmpty: false,
+      })
+    );
+  });
+});

package/src/datetimePicker/accordion/Month.js

@@ -0,0 +1,258 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { IoMdArrowDropup } from 'react-icons/io';
+import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
+import styled, { css } from 'styled-components';
+import { datetimeTFormat } from '@cashub/utils';
+import DateTimePicker from '../subComponent/DateTimePickerContext';
+import { MONTH } from '../provider/constant';
+
+const Month = ({ expand, handleDisplayAccordionContent }) => {
+  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) => (
+      <Item
+        selected={selectedMonth === index}
+        onClick={() => {
+          handleChangeMonth(index);
+        }}
+        key={month.number}
+        disabled={handleMonthItemDisable(index)}
+      >
+        {month.text}
+      </Item>
+    ));
+  }, [selectedDate, handleChangeMonth, handleMonthItemDisable]);
+
+  return (
+    <>
+      <Header>
+        <IconButton
+          onClick={changeToPreviousMonth}
+          disabled={handleDisableArrow('previous')}
+        >
+          <MdArrowBackIosNew />
+        </IconButton>
+
+        <div>{MONTH[new Date(selectedDate).getMonth()].text}</div>
+
+        <IconButton
+          onClick={changeToNextMonth}
+          disabled={handleDisableArrow('next')}
+        >
+          <MdArrowForwardIos />
+        </IconButton>
+        <IconButton
+          $rotate={expand}
+          right
+          onClick={handleDisplayAccordionContent}
+        >
+          <IoMdArrowDropup />
+        </IconButton>
+      </Header>
+
+      <Body expand={expand} fixedYear={fixedYear}>
+        {monthContent}
+      </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')};
+
+  ${({ fixedYear }) =>
+    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 {
+    ${({ disabled }) => !disabled && 'background: var(--color-primary)'}
+  }
+
+  ${({ disabled }) => disabled && 'color: var(--font-on-mute)'}
+
+  ${({ selected }) => selected && 'background: var(--color-hover)'}
+`;
+
+export default Month;