@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/datetimePicker/DatetimePickerV3.js

@@ -0,0 +1,292 @@
+import { useCallback, useEffect, useRef, useMemo } from 'react';
+import styled from 'styled-components';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import TimePickerV2 from './TimePickerV2';
+
+const setDateTime = (date, value) => {
+  const [hh, mm, ss] = value.split(':');
+  date.setHours(
+    Number(hh) || 0,
+    Number(mm) || 0,
+    Number(ss) || 0,
+    0,
+  );
+};
+
+const DatetimePickerV3 = ({
+  selected = '',
+  onChange,
+  dateFormat = 'yyyy-MM-dd HH:mm:ss',
+  minDate,
+  maxDate,
+  showTimeInput,
+  readOnly,
+  disabled,
+  onBlur,
+  allowClear = false,
+  shouldCloseOnSelect = true,
+  placeholderText,
+  allowTimeInputEmpty = false,
+}) => {
+  const datepickerRef = useRef(null);
+  const pendingTimeRef = useRef(null);
+
+  const handleOnBlur = () => {
+    pendingTimeRef.current = null;
+
+    if (typeof onBlur === 'function') {
+      onBlur();
+    }
+  };
+
+  const selectedDate = useMemo(() => {
+    return selected ? new Date(Date.parse(selected)) : '';
+  }, [selected]);
+
+  const handleChange = useCallback(
+    (date) => {
+      // when showTimeInput and DatetimePicker no value yet
+      if (showTimeInput && !selected && date) {
+        // if time selected before date, use selected time
+        if (pendingTimeRef.current) {
+          setDateTime(date, pendingTimeRef.current);
+          pendingTimeRef.current = null;
+        } else {
+          // if date selected before time, use current time
+          const now = new Date();
+          date.setHours(now.getHours(), now.getMinutes(), now.getSeconds(), 0);
+        }
+      }
+
+      onChange(date);
+    },
+    [onChange, selected, showTimeInput],
+  );
+
+  const datePickerProps = {
+    dateFormat,
+    disabled,
+    onChange: handleChange,
+    selected: selectedDate,
+    minDate: minDate ? new Date(Date.parse(minDate)) : '',
+    maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
+    isClearable: allowClear && selected,
+    shouldCloseOnSelect,
+    placeholderText,
+  };
+
+  const handleSelectTime = useCallback(
+    (value) => {
+      if (selectedDate) {
+        setDateTime(selectedDate, value);
+        onChange(selectedDate);
+      } else {
+        pendingTimeRef.current = value;
+      }
+    },
+    // NOTE: Adding onChange to the dependency list will cause a rerender loop
+    [selectedDate],
+  );
+
+  if (showTimeInput) {
+    datePickerProps.showTimeInput = true;
+    datePickerProps.customTimeInput = (
+      <TimePickerV2
+        selected={selected}
+        onSelect={handleSelectTime}
+        allowEmpty={allowTimeInputEmpty && !selected}
+      />
+    );
+  }
+
+  datePickerProps.onCalendarClose = handleOnBlur;
+
+  useEffect(() => {
+    // set input to readonly
+    if (datepickerRef && datepickerRef.current && readOnly) {
+      datepickerRef.current.input.readOnly = readOnly;
+    }
+  }, [readOnly]);
+
+  return (
+    <Wrapper disabled={disabled}>
+      <DatePicker {...datePickerProps} ref={datepickerRef} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    width: 100%;
+
+    > input {
+      width: 100%;
+      height: 36px;
+      color: var(--font-on-background);
+      background: transparent;
+      border-radius: var(--border-radius-l);
+      border: var(--border-width) solid var(--border-color);
+      padding: 0 var(--spacing-s);
+      outline: none;
+
+      ${({ disabled }) => {
+        return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
+      }}
+    }
+
+    > input + button {
+      padding: 0;
+      right: var(--spacing-s);
+      &::after {
+        color: var(--color-primary);
+        background-color: transparent;
+        font-size: 24px;
+        padding: 0;
+      }
+    }
+  }
+
+  .react-datepicker-popper {
+    z-index: 2;
+  }
+
+  .react-datepicker-popper[data-placement^='top'] {
+    padding-bottom: var(--spacing-xs);
+  }
+
+  .react-datepicker-popper[data-placement^='bottom'] {
+    padding-top: var(--spacing-xs);
+  }
+
+  .react-datepicker {
+    box-shadow: var(--box-shadow);
+    border-radius: var(--border-radius);
+    border: var(--border-width) solid var(--border-color);
+    padding: var(--spacing-s);
+    font-size: var(--font-body1);
+    color: var(--font-on-background);
+    background: var(--color-background1);
+
+    .react-datepicker__triangle {
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    .react-datepicker__header {
+      border: none;
+      padding: 0;
+      background: var(--color-background1);
+    }
+
+    .react-datepicker__current-month {
+      line-height: 36px;
+      color: var(--font-on-background);
+      font-size: var(--font-body1);
+      font-weight: var(--font-normal);
+    }
+
+    .react-datepicker__day-names {
+      margin: 0;
+    }
+
+    .react-datepicker__day-name,
+    .react-datepicker__day {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      color: var(--font-on-background);
+      font-weight: var(--font-normal);
+      margin: 0;
+      border-radius: 4px;
+    }
+
+    .react-datepicker__day:hover {
+      background: var(--color-hover);
+    }
+
+    .react-datepicker__day--disabled {
+      color: var(--font-on-mute);
+      background: none !important;
+    }
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__navigation {
+    top: 0;
+    width: 36px;
+    height: 36px;
+    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
+    border-radius: 4px;
+
+    &.react-datepicker__navigation--previous {
+      left: 0;
+    }
+
+    &.react-datepicker__navigation--next {
+      right: 0;
+    }
+
+    &:hover {
+      background: var(--color-hover);
+    }
+
+    .react-datepicker__navigation-icon::before {
+      border-color: var(--font-on-background);
+    }
+
+    .react-datepicker__navigation-icon--previous::before {
+      right: -4px;
+    }
+
+    .react-datepicker__navigation-icon--next::before {
+      left: -4px;
+    }
+  }
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--selected,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--selected,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__year-text--in-range {
+    background: var(--color-primary) !important;
+  }
+
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__quarter-text--keyboard-selected,
+  .react-datepicker__year-text--keyboard-selected {
+    background: none;
+  }
+
+  .react-datepicker__input-time-container {
+    margin: 0;
+    margin-top: var(--spacing-s);
+    margin-left: var(--spacing-xs);
+
+    .react-datepicker-time__input input {
+      height: 36px;
+      padding: 0 var(--spacing-xs);
+      border-radius: var(--border-radius);
+      border: var(--border-width) solid var(--border-color);
+      background: transparent;
+      color: var(--font-on-background);
+      outline: none;
+    }
+  }
+`;
+
+export default DatetimePickerV3;

package/src/datetimePicker/TimeInput.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import RCTimePicker from 'rc-time-picker';
+import 'rc-time-picker/assets/index.css';
+
+const TimeInput = (props) => {
+  return (
+    <Wrapper disabled={props.disabled}>
+      <RCTimePicker {...props} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  .rc-time-picker {
+    width: 100%;
+
+    .rc-time-picker-input {
+      height: 36px;
+      border-radius: var(--border-radius);
+      border: var(--border-width) solid var(--border-color);
+      padding: 10px var(--spacing-s);
+      color: var(--font-on-background);
+      background: transparent;
+      font-size: var(--font-body1);
+
+      ${({ disabled }) => disabled && 'opacity: 0.5;'}
+
+      &:focus {
+        border: var(--border-width) solid var(--color-primary);
+        outline: none;
+      }
+    }
+
+    .rc-time-picker-clear {
+      top: 6px;
+      right: 8px;
+
+      i:after {
+        font-size: var(--font-body1);
+      }
+    }
+  }
+`;
+
+export default TimeInput;

package/src/datetimePicker/TimePicker.js

@@ -0,0 +1,318 @@
+import { useState, useEffect, useCallback } from 'react';
+import { FaAngleUp, FaAngleDown } from 'react-icons/fa';
+import moment from 'moment';
+import styled from 'styled-components';
+import uniqueId from 'lodash.uniqueid';
+import { KEY_CODE } from '@cashub/utils';
+import { useIncrease, useDecrease, useChangeNumber } from './hooks';
+import pad from './utils/pad';
+
+const LENGTH = 2;
+const PAD_STRING = '0';
+
+const TimePicker = ({
+  labelName = 'Time',
+  value,
+  onChange,
+  showSecond = true,
+}) => {
+  const [hourId] = useState(uniqueId('hour-'));
+  const [time, setTime] = useState(() => {
+    let time = moment(value, 'HH:mm:ss');
+
+    // use current time when time value is invalid
+    if (!value || !time.isValid()) {
+      time = moment();
+    }
+    return {
+      hour: pad(time.hour(), LENGTH, PAD_STRING),
+      minute: pad(time.minute(), LENGTH, PAD_STRING),
+      second: pad(time.second(), LENGTH, PAD_STRING),
+    };
+  });
+
+  useEffect(() => {
+    if (
+      typeof onChange === 'function' &&
+      time.hour &&
+      time.minute &&
+      time.second
+    ) {
+      onChange(`${time.hour}:${time.minute}:${time.second}`);
+    }
+  }, [onChange, time.hour, time.minute, time.second]);
+
+  return (
+    <Container>
+      <Label htmlFor={hourId}>{labelName}</Label>
+      <Hour id={hourId} value={time.hour} setTime={setTime} />
+      <Minute value={time.minute} setTime={setTime} />
+      {showSecond === true && <Second value={time.second} setTime={setTime} />}
+    </Container>
+  );
+};
+
+const Hour = ({ id, value, setTime }) => {
+  const NAME = 'hour';
+  const MIN = 0;
+  const MAX = 23;
+  const increase = useIncrease(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING,
+  });
+  const decrease = useDecrease(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING,
+  });
+  const changeNumber = useChangeNumber(MIN, MAX, setTime, NAME);
+  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
+
+  return (
+    <Section>
+      <Input
+        type='text'
+        id={id}
+        maxLength='2'
+        value={value}
+        onChange={(event) => {
+          changeNumber(event.target.value);
+        }}
+        onKeyUp={handleKeyUp}
+        onBlur={(event) => {
+          setTime((previous) => {
+            const newState = { ...previous };
+            newState[NAME] = pad(event.target.value, LENGTH, PAD_STRING);
+
+            return newState;
+          });
+        }}
+      />
+      <Stepper>
+        <StepperButton onClick={increase}>
+          <FaAngleUp />
+        </StepperButton>
+        <StepperButton onClick={decrease}>
+          <FaAngleDown />
+        </StepperButton>
+      </Stepper>
+    </Section>
+  );
+};
+
+const Minute = ({ value, setTime }) => {
+  const NAME = 'minute';
+  const MIN = 0;
+  const MAX = 59;
+  const [minuteId] = useState(uniqueId(`${NAME}-`));
+  const increase = useIncrease(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING,
+  });
+  const decrease = useDecrease(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING,
+  });
+  const changeNumber = useChangeNumber(MIN, MAX, setTime, NAME);
+  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
+
+  return (
+    <>
+      <Delimiter>:</Delimiter>
+      <Section>
+        <Input
+          type='text'
+          id={minuteId}
+          maxLength='2'
+          value={value}
+          onChange={(event) => {
+            changeNumber(event.target.value);
+          }}
+          onKeyUp={handleKeyUp}
+          onBlur={(event) => {
+            setTime((previous) => {
+              const newState = { ...previous };
+              newState[NAME] = pad(event.target.value, LENGTH, PAD_STRING);
+
+              return newState;
+            });
+          }}
+        />
+        <Stepper>
+          <StepperButton onClick={increase}>
+            <FaAngleUp />
+          </StepperButton>
+          <StepperButton onClick={decrease}>
+            <FaAngleDown />
+          </StepperButton>
+        </Stepper>
+      </Section>
+    </>
+  );
+};
+
+const Second = ({ value, setTime }) => {
+  const NAME = 'second';
+  const MIN = 0;
+  const MAX = 59;
+  const [secondId] = useState(uniqueId(`${NAME}-`));
+  const increase = useIncrease(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING,
+  });
+  const decrease = useDecrease(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING,
+  });
+  const changeNumber = useChangeNumber(MIN, MAX, setTime, NAME);
+  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
+
+  return (
+    <>
+      <Delimiter>:</Delimiter>
+      <Section>
+        <Input
+          type='text'
+          id={secondId}
+          maxLength='2'
+          value={value}
+          onChange={(event) => {
+            changeNumber(event.target.value);
+          }}
+          onKeyUp={handleKeyUp}
+          onBlur={(event) => {
+            setTime((previous) => {
+              const newState = { ...previous };
+              newState[NAME] = pad(event.target.value, LENGTH, PAD_STRING);
+
+              return newState;
+            });
+          }}
+        />
+        <Stepper>
+          <StepperButton onClick={increase}>
+            <FaAngleUp />
+          </StepperButton>
+          <StepperButton onClick={decrease}>
+            <FaAngleDown />
+          </StepperButton>
+        </Stepper>
+      </Section>
+    </>
+  );
+};
+
+const useKeyUp = (increase, decrease, min, max, setState, name) => {
+  return useCallback(
+    (event) => {
+      const key = event.keyCode;
+
+      switch (key) {
+        case KEY_CODE.UP:
+          increase();
+          break;
+
+        case KEY_CODE.DOWN:
+          decrease();
+          break;
+
+        case KEY_CODE.HOME:
+          setState((previous) => {
+            const newState = { ...previous };
+            newState[name] = pad(min, LENGTH, PAD_STRING);
+
+            return newState;
+          });
+          break;
+
+        case KEY_CODE.END:
+          setState((previous) => {
+            const newState = { ...previous };
+            newState[name] = pad(max, LENGTH, PAD_STRING);
+
+            return newState;
+          });
+          break;
+
+        default:
+          break;
+      }
+    },
+    [increase, decrease, min, max, setState, name],
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Label = styled.label`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  margin-right: 12px;
+`;
+
+const Section = styled.div`
+  display: inline-flex;
+  height: 36px;
+  width: 56px;
+  padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-s);
+  background: transparent;
+  color: var(--font-on-background);
+`;
+
+const Input = styled.input`
+  width: calc(100% - 4px - 12px);
+  border: none;
+  background: transparent;
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StepperButton = styled.div.attrs(() => ({
+  role: 'button',
+}))`
+  width: 12px;
+  height: 12px;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+  }
+
+  &:first-child {
+    margin-bottom: 2px;
+  }
+
+  &:hover {
+    color: var(--color-primary);
+  }
+`;
+
+const Stepper = styled.div`
+  margin-left: calc(var(--spacing-xs) / 2);
+`;
+
+const Delimiter = styled.span`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  width: 12px;
+  text-align: center;
+`;
+
+export default TimePicker;

package/src/datetimePicker/TimePickerStyle.js

@@ -0,0 +1,59 @@
+import { createGlobalStyle } from 'styled-components';
+import scrollbar from '../styles/mixin/scrollbar';
+
+// integrate rc-time-picker component
+const TimePickerStyle = createGlobalStyle`
+  .rc-time-picker-panel-narrow {
+    max-width: none;
+  }
+
+  .rc-time-picker-panel {
+    .rc-time-picker-panel-inner {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+
+      .rc-time-picker-panel-input-wrap {
+        display: none;
+      }
+
+      .rc-time-picker-panel-combobox {
+        height: 144px;
+        border: var(--border-width) solid var(--border-color);
+        color: var(--font-on-background);
+        box-shadow: var(--box-shadow);
+        border-radius: var(--border-radius);
+        background: var(--color-background2);
+
+        .rc-time-picker-panel-select {
+          font-size: var(--font-body1);
+          
+          ${scrollbar}
+
+          li {
+            &:hover {
+              background: var(--color-hover);
+            }
+            
+            &.rc-time-picker-panel-select-option-selected {
+              background: var(--color-hover);
+            }
+          }
+
+          &:first-child {
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: var(--border-radius);
+          }
+        }
+      }
+    }
+
+    &.rc-time-picker-panel-placement-bottomLeft {
+      .rc-time-picker-panel-inner {
+        padding-top: calc(36px + var(--spacing-xs));
+      }
+    }
+  }
+`;
+
+export default TimePickerStyle;