@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/datetimePicker/TimePickerV2.js

@@ -0,0 +1,222 @@
+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';
+
+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 = ({ selected, onSelect, allowEmpty = false }) => {
+  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 (
+    <OutsideClickHandler
+      onOutsideClick={() => {
+        setDisplay(false);
+      }}
+    >
+      <>
+        <Input
+          ref={setTargetElement}
+          type='text'
+          readOnly
+          onClick={handleToggle}
+          value={
+            time.hour && time.minute && time.second
+              ? `${time.hour}:${time.minute}:${time.second}`
+              : ''
+          }
+        />
+        <Panel
+          ref={setPopperElement}
+          $display={display}
+          style={styles.popper}
+          {...attributes.popper}
+          placement={state && state.placement}
+        >
+          <Picker>
+            {HOUR_OPTIONS.map((option) => {
+              return (
+                <Option
+                  key={option}
+                  role='option'
+                  onClick={() => {
+                    handleChange('hour', option);
+                  }}
+                  selected={option === time.hour}
+                  aria-selected={option === time.hour}
+                >
+                  {option}
+                </Option>
+              );
+            })}
+          </Picker>
+          <Picker>
+            {MINUTE_SECOND_OPTIONS.map((option) => {
+              return (
+                <Option
+                  key={option}
+                  role='option'
+                  onClick={() => {
+                    handleChange('minute', option);
+                  }}
+                  selected={option === time.minute}
+                  aria-selected={option === time.minute}
+                >
+                  {option}
+                </Option>
+              );
+            })}
+          </Picker>
+          <Picker>
+            {MINUTE_SECOND_OPTIONS.map((option) => {
+              return (
+                <Option
+                  key={option}
+                  role='option'
+                  onClick={() => {
+                    handleChange('second', option);
+                  }}
+                  selected={option === time.second}
+                  aria-selected={option === time.second}
+                >
+                  {option}
+                </Option>
+              );
+            })}
+          </Picker>
+        </Panel>
+      </>
+    </OutsideClickHandler>
+  );
+};
+
+const Panel = styled.div`
+  display: flex;
+  visibility: ${({ $display }) => ($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);
+  }
+
+  ${({ selected }) =>
+    selected &&
+    css`
+      background: var(--color-hover);
+    `}
+`;
+
+export default TimePickerV2;

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

@@ -0,0 +1,51 @@
+import DatePicker from '../DatePicker';
+import { formatDate } from '@cashub/utils';
+import { useState } from 'react';
+
+const metadata = {
+  title: 'DatetimePicker/DatePicker',
+  component: DatePicker,
+  argTypes: {
+    onConfirm: {
+      description: 'A callback that tells the component to the selected date.',
+      control: {
+        action: 'onConfirm',
+      },
+      disabled: {
+        description: 'Disable datePicker component',
+      },
+    },
+  },
+};
+
+const Template = ({ onConfirm, ...args }) => {
+  const [data, setData] = useState({
+    start_time: formatDate(new Date()),
+  });
+
+  const handleChangeValue = (value, key) => {
+    const newData = { ...data };
+    newData[key] = value;
+
+    setData(newData);
+    onConfirm(value);
+  };
+
+  return (
+    <DatePicker
+      {...args}
+      onConfirm={(date) => {
+        handleChangeValue(date, 'start_time');
+      }}
+    />
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  selected: formatDate(new Date()),
+  disabled: false,
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { formatDate } from '@cashub/utils';
+import DatePicker from '../DatePickerV2';
+
+const metadata = {
+  title: 'DatetimePicker/DatePickerV2',
+  component: DatePicker,
+  argTypes: {
+    selected: {
+      description:
+        'selected date, can accept date object or string (format example: 2022-08-16 15:05:10 )',
+    },
+    fixedYear: {
+      description: 'Fixed year, accepts boolean values',
+    },
+    allowClear: {
+      description: 'Allow clear selected date or not',
+    },
+    maxDate: {
+      description:
+        'limit max date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
+      control: {
+        action: 'maxDate',
+      },
+    },
+    minDate: {
+      description:
+        'limit min date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
+      control: {
+        action: 'minDate',
+      },
+    },
+    onConfirm: {
+      description: 'A callback that tells the component to the selected date.',
+      control: {
+        action: 'onConfirm',
+      },
+    },
+    disabled: {
+      description: 'Disable datetimePicker component',
+    },
+  },
+};
+
+const Default = ({ maxDate, minDate, ...args }) => {
+  const { onConfirm } = args;
+  const [selected, setSelected] = useState(formatDate(new Date(), 'date'));
+
+  return (
+    <>
+      <DatePicker
+        selected={selected}
+        maxDate={maxDate}
+        minDate={minDate}
+        {...args}
+        onConfirm={(date) => {
+          setSelected(date);
+          onConfirm(date);
+        }}
+      />
+    </>
+  );
+};
+Default.args = {
+  fixedYear: false,
+  allowClear: false,
+  minDate: '2021-01-01',
+  maxDate: '2024-12-31',
+  disabled: false,
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,74 @@
+import DatetimePicker from '../DatetimePicker';
+import { formatDate } from '@cashub/utils';
+import { useState, useEffect } from 'react';
+
+const metadata = {
+  title: 'DatetimePicker/DatetimePicker',
+  component: DatetimePicker,
+  argTypes: {
+    selected: {
+      description: 'Current selected date',
+    },
+    onChange: {
+      description: 'A callback that return new selected date',
+    },
+    dateFormat: {
+      description: 'Date format',
+    },
+    minDate: {
+      description: 'Minimum date',
+    },
+    maxDate: {
+      description: 'Maximum date',
+    },
+    showTimeInput: {
+      description: 'Show time input',
+    },
+    readOnly: {
+      description: "Just read only, can't update value",
+    },
+    disabled: {
+      description: 'Disable datetimePicker component',
+    },
+    onBlur: {
+      description: 'A callback, called when the DatetimePicker panel is closed',
+    },
+    allowClear: {
+      description: 'Clear selected date',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { onChange } = args;
+  const [selected, setSelected] = useState(args.selected);
+
+  useEffect(() => {
+    setSelected(args.selected);
+  }, [args.selected]);
+
+  return (
+    <>
+      <DatetimePicker
+        {...args}
+        onChange={(date) => {
+          setSelected(date ? formatDate(date) : '');
+          onChange();
+        }}
+        selected={selected}
+      />
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  showTimeInput: true,
+  readOnly: true,
+  selected: formatDate(new Date()),
+  disabled: false,
+  allowClear: false,
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { formatDate, datetimeTFormat } from '@cashub/utils';
+import DatetimePickerV2 from '../DatetimePickerV2';
+
+const metadata = {
+  title: 'DatetimePicker/DatetimePickerV2',
+  component: DatetimePickerV2,
+  argTypes: {
+    selected: {
+      description:
+        'selected date, can accept date object or string (format example: 2022-08-16 15:05:10 )',
+    },
+    fixedYear: {
+      description: 'Fixed year, accepts boolean values',
+    },
+    maxDate: {
+      description:
+        'limit max date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
+      control: {
+        action: 'maxDate',
+      },
+    },
+    minDate: {
+      description:
+        'limit min date, can accept  JavaScript Date objects or string (format example: "2022-08-16 15:05:10")',
+      control: {
+        action: 'minDate',
+      },
+    },
+    onConfirm: {
+      description: 'A callback that tells the component to the selected date.',
+      control: {
+        action: 'onConfirm',
+      },
+    },
+    onBlur: {
+      description:
+        'A callback, called when the DatetimePickerV2 panel is closed',
+    },
+    disabled: {
+      description: 'Disable datetimePicker component',
+    },
+  },
+};
+
+const Default = ({ maxDate, minDate, onConfirm, onBlur, ...args }) => {
+  const [data, setData] = useState({
+    startTime: formatDate(new Date().setHours(0, 0, 0, 0)),
+  });
+
+  const max = maxDate
+    ? formatDate(new Date(datetimeTFormat(maxDate)))
+    : undefined;
+  const min = minDate
+    ? formatDate(new Date(datetimeTFormat(minDate)))
+    : undefined;
+
+  const handleChangeValue = (value, key) => {
+    const newData = { ...data };
+    newData[key] = value;
+
+    setData(newData);
+    onConfirm(value);
+  };
+
+  return (
+    <>
+      <DatetimePickerV2
+        selected={data.startTime}
+        maxDate={max}
+        minDate={min}
+        {...args}
+        onConfirm={(date) => {
+          handleChangeValue(date, 'startTime');
+        }}
+        onBlur={() => {
+          onBlur();
+        }}
+      />
+    </>
+  );
+};
+Default.args = {
+  fixedYear: false,
+  minDate: new Date().setFullYear(2021),
+  maxDate: new Date().setFullYear(2024),
+  disabled: false,
+};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+import { formatDate } from '@cashub/utils';
+import DatetimePickerV3 from '../DatetimePickerV3';
+
+const metadata = {
+  title: 'DatetimePicker/DatetimePickerV3',
+  component: DatetimePickerV3,
+  argTypes: {
+    selected: {
+      description: 'Current selected date',
+    },
+    onChange: {
+      description: 'A callback that return new selected date',
+    },
+    dateFormat: {
+      description: 'Date format',
+    },
+    minDate: {
+      description: 'Minimum date',
+    },
+    maxDate: {
+      description: 'Maximum date',
+    },
+    showTimeInput: {
+      description: 'Show time input',
+    },
+    readOnly: {
+      description: "Just read only, can't update value",
+    },
+    disabled: {
+      description: 'Disable datetimePicker component',
+    },
+    onBlur: {
+      description:
+        'A callback, called when the DatetimePickerV3 panel is closed',
+    },
+    allowClear: {
+      description: 'Clear selected date',
+    },
+    allowTimeInputEmpty: {
+      description:
+        'Allow the time input to remain empty when showTimeInput is true and no date has been selected yet',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { onChange } = args;
+  const [selected, setSelected] = useState(args.selected);
+
+  useEffect(() => {
+    setSelected(args.selected);
+  }, [args.selected]);
+
+  return (
+    <>
+      <DatetimePickerV3
+        {...args}
+        onChange={(date) => {
+          setSelected(date ? formatDate(date) : '');
+          onChange(date);
+        }}
+        selected={selected}
+      />
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  showTimeInput: true,
+  readOnly: true,
+  selected: formatDate(new Date()),
+  disabled: false,
+  allowClear: false,
+  allowTimeInputEmpty: false,
+};
+
+export default metadata;
+export { Default };

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/__stories__/TimePickerV2.stories.js

@@ -0,0 +1,22 @@
+import { fn } from '@storybook/test';
+import TimePickerV2 from '../TimePickerV2';
+
+const metadata = {
+  title: 'DatetimePicker/TimePickerV2',
+  component: TimePickerV2,
+  args: { onSelect: fn() },
+  argTypes: {
+    onSelect: {
+      description: 'A callback that return new selected time',
+    },
+  },
+};
+
+const Template = (args) => {
+  return <TimePickerV2 {...args} />;
+};
+
+const Default = Template.bind({});
+
+export default metadata;
+export { Default };