@cashub/ui-elv 1.0.0

package/datetimePicker/TimeInput.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rcTimePicker = _interopRequireDefault(require("rc-time-picker"));
+require("rc-time-picker/assets/index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TimeInput = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    disabled: props.disabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcTimePicker.default, {
+      ...props
+    })
+  });
+};
+const Wrapper = _styledComponents.default.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);
+
+      ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return 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);
+      }
+    }
+  }
+`;
+var _default = exports.default = TimeInput;

package/datetimePicker/TimePicker.js

@@ -0,0 +1,317 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _fa = require("react-icons/fa");
+var _moment = _interopRequireDefault(require("moment"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
+var _utils = require("@cashub/utils");
+var _hooks = require("./hooks");
+var _pad = _interopRequireDefault(require("./utils/pad"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LENGTH = 2;
+const PAD_STRING = '0';
+const TimePicker = _ref => {
+  let {
+    labelName = 'Time',
+    value,
+    onChange,
+    showSecond = true
+  } = _ref;
+  const [hourId] = (0, _react.useState)((0, _lodash.default)('hour-'));
+  const [time, setTime] = (0, _react.useState)(() => {
+    let time = (0, _moment.default)(value, 'HH:mm:ss');
+
+    // use current time when time value is invalid
+    if (!value || !time.isValid()) {
+      time = (0, _moment.default)();
+    }
+    return {
+      hour: (0, _pad.default)(time.hour(), LENGTH, PAD_STRING),
+      minute: (0, _pad.default)(time.minute(), LENGTH, PAD_STRING),
+      second: (0, _pad.default)(time.second(), LENGTH, PAD_STRING)
+    };
+  });
+  (0, _react.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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      htmlFor: hourId,
+      children: labelName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Hour, {
+      id: hourId,
+      value: time.hour,
+      setTime: setTime
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Minute, {
+      value: time.minute,
+      setTime: setTime
+    }), showSecond === true && /*#__PURE__*/(0, _jsxRuntime.jsx)(Second, {
+      value: time.second,
+      setTime: setTime
+    })]
+  });
+};
+const Hour = _ref2 => {
+  let {
+    id,
+    value,
+    setTime
+  } = _ref2;
+  const NAME = 'hour';
+  const MIN = 0;
+  const MAX = 23;
+  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING
+  });
+  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING
+  });
+  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
+  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(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] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
+          return newState;
+        });
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
+        onClick: increase,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
+        onClick: decrease,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
+      })]
+    })]
+  });
+};
+const Minute = _ref3 => {
+  let {
+    value,
+    setTime
+  } = _ref3;
+  const NAME = 'minute';
+  const MIN = 0;
+  const MAX = 59;
+  const [minuteId] = (0, _react.useState)((0, _lodash.default)(`${NAME}-`));
+  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING
+  });
+  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING
+  });
+  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
+  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Delimiter, {
+      children: ":"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(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] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
+            return newState;
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
+          onClick: increase,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
+          onClick: decrease,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
+        })]
+      })]
+    })]
+  });
+};
+const Second = _ref4 => {
+  let {
+    value,
+    setTime
+  } = _ref4;
+  const NAME = 'second';
+  const MIN = 0;
+  const MAX = 59;
+  const [secondId] = (0, _react.useState)((0, _lodash.default)(`${NAME}-`));
+  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING
+  });
+  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
+    name: NAME,
+    length: LENGTH,
+    padString: PAD_STRING
+  });
+  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
+  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Delimiter, {
+      children: ":"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(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] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
+            return newState;
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
+          onClick: increase,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
+          onClick: decrease,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
+        })]
+      })]
+    })]
+  });
+};
+const useKeyUp = (increase, decrease, min, max, setState, name) => {
+  return (0, _react.useCallback)(event => {
+    const key = event.keyCode;
+    switch (key) {
+      case _utils.KEY_CODE.UP:
+        increase();
+        break;
+      case _utils.KEY_CODE.DOWN:
+        decrease();
+        break;
+      case _utils.KEY_CODE.HOME:
+        setState(previous => {
+          const newState = {
+            ...previous
+          };
+          newState[name] = (0, _pad.default)(min, LENGTH, PAD_STRING);
+          return newState;
+        });
+        break;
+      case _utils.KEY_CODE.END:
+        setState(previous => {
+          const newState = {
+            ...previous
+          };
+          newState[name] = (0, _pad.default)(max, LENGTH, PAD_STRING);
+          return newState;
+        });
+        break;
+      default:
+        break;
+    }
+  }, [increase, decrease, min, max, setState, name]);
+};
+const Container = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Label = _styledComponents.default.label`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  margin-right: 12px;
+`;
+const Section = _styledComponents.default.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 = _styledComponents.default.input`
+  width: calc(100% - 4px - 12px);
+  border: none;
+  background: transparent;
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+`;
+const StepperButton = _styledComponents.default.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 = _styledComponents.default.div`
+  margin-left: calc(var(--spacing-xs) / 2);
+`;
+const Delimiter = _styledComponents.default.span`
+  display: inline-block;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  width: 12px;
+  text-align: center;
+`;
+var _default = exports.default = TimePicker;

package/datetimePicker/TimePickerStyle.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// integrate rc-time-picker component
+const TimePickerStyle = (0, _styledComponents.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.default}
+
+          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));
+      }
+    }
+  }
+`;
+var _default = exports.default = TimePickerStyle;

package/datetimePicker/TimePickerV2.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+var _pad = _interopRequireDefault(require("./utils/pad"));
+var _form = require("../form");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const LENGTH = 2;
+const PAD_STRING = '0';
+const HOUR_OPTIONS = (0, _utils.generateRange)(0, 23).map(value => {
+  return (0, _pad.default)(value, LENGTH, PAD_STRING);
+});
+const MINUTE_SECOND_OPTIONS = (0, _utils.generateRange)(0, 59).map(value => {
+  return (0, _pad.default)(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: (0, _pad.default)(time.getHours(), LENGTH, PAD_STRING),
+    minute: (0, _pad.default)(time.getMinutes(), LENGTH, PAD_STRING),
+    second: (0, _pad.default)(time.getSeconds(), LENGTH, PAD_STRING)
+  };
+};
+const TimePickerV2 = _ref => {
+  let {
+    selected,
+    onSelect,
+    allowEmpty = false
+  } = _ref;
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [targetElement, setTargetElement] = (0, _react.useState)(null);
+  const [popperElement, setPopperElement] = (0, _react.useState)(null);
+  const [time, setTime] = (0, _react.useState)(() => {
+    return getTimeFromSelected(selected, allowEmpty);
+  });
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.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
+  (0, _react.useEffect)(() => {
+    setTime(getTimeFromSelected(selected, allowEmpty));
+  }, [allowEmpty, selected]);
+  (0, _react.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+    onOutsideClick: () => {
+      setDisplay(false);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_form.Input, {
+        ref: setTargetElement,
+        type: "text",
+        readOnly: true,
+        onClick: handleToggle,
+        value: time.hour && time.minute && time.second ? `${time.hour}:${time.minute}:${time.second}` : ''
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Panel, {
+        ref: setPopperElement,
+        $display: display,
+        style: styles.popper,
+        ...attributes.popper,
+        placement: state && state.placement,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+          children: HOUR_OPTIONS.map(option => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('hour', option);
+              },
+              selected: option === time.hour,
+              "aria-selected": option === time.hour,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('minute', option);
+              },
+              selected: option === time.minute,
+              "aria-selected": option === time.minute,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('second', option);
+              },
+              selected: option === time.second,
+              "aria-selected": option === time.second,
+              children: option
+            }, option);
+          })
+        })]
+      })]
+    })
+  });
+};
+const Panel = _styledComponents.default.div`
+  display: flex;
+  visibility: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $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 = _styledComponents.default.ul`
+  flex: 1;
+  text-align: center;
+  max-height: 144px;
+  overflow-y: auto;
+
+  ${_scrollbar.default}
+
+  &: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 = _styledComponents.default.li`
+  padding: var(--spacing-xs) 0;
+  background: var(--color-background1);
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  ${_ref3 => {
+  let {
+    selected
+  } = _ref3;
+  return selected && (0, _styledComponents.css)`
+      background: var(--color-hover);
+    `;
+}}
+`;
+var _default = exports.default = TimePickerV2;