@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/cropper/Cropper.js

@@ -0,0 +1,47 @@
+import { useRef, useEffect } from 'react';
+import 'cropperjs/dist/cropper.css';
+import Cropper from 'cropperjs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CropperWrapper = _ref => {
+  let {
+    src,
+    alt = 'picture',
+    width,
+    height,
+    cropBoxResizable = false,
+    onInitialized,
+    dragMode = 'move'
+  } = _ref;
+  const imageRef = useRef(null);
+  useEffect(() => {
+    const node = imageRef.current;
+    if (node !== null) {
+      const cropper = new Cropper(node, {
+        dragMode,
+        viewMode: 1,
+        initialAspectRatio: 9 / 16,
+        background: true,
+        cropBoxResizable,
+        data: {
+          width,
+          height
+        }
+      });
+      if (onInitialized) {
+        onInitialized(cropper);
+      }
+    }
+    return () => {
+      node?.cropper?.destroy();
+    };
+  }, [onInitialized, dragMode, width, height, cropBoxResizable]);
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx("img", {
+      src: src,
+      alt: alt,
+      ref: imageRef,
+      crossOrigin: "anonymous"
+    })
+  });
+};
+export default CropperWrapper;

package/esm/cropper/CropperModalHandler.js

@@ -0,0 +1,34 @@
+import TitleModal from '../modal/TitleModal';
+import CropImageModal from './subComponent/CropImageModal';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CropperModalHandler = _ref => {
+  let {
+    src,
+    file,
+    width,
+    height,
+    cropBoxResizable = false,
+    onCrop,
+    onClose
+  } = _ref;
+  TitleModal({
+    size: 'normal',
+    children: /*#__PURE__*/_jsx(CropImageModal, {
+      src: src,
+      mime: file.type,
+      alt: file.name,
+      file: file,
+      width: width,
+      height: height,
+      cropBoxResizable: cropBoxResizable,
+      onCrop: onCrop,
+      onClose: onClose
+    }),
+    onClose: dismiss => {
+      if (dismiss === true && onClose) {
+        onClose();
+      }
+    }
+  });
+};
+export default CropperModalHandler;

package/esm/cropper/index.js

@@ -0,0 +1,2 @@
+export { default as Cropper } from './Cropper';
+export { default as CropperModalHandler } from './CropperModalHandler';

package/esm/cropper/subComponent/CropImageModal.js

@@ -0,0 +1,72 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { resizeImage } from '@cashub/utils';
+import Cropper from '../Cropper';
+import Button from '../../button/Button';
+import ButtonGroup from '../../button/ButtonGroup';
+import TitleModal from '../../modal/TitleModal';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const CropImageModal = _ref => {
+  let {
+    src,
+    mime,
+    alt,
+    width,
+    height,
+    cropBoxResizable = false,
+    onCrop,
+    onClose,
+    close
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const [instance, setIntance] = useState(null);
+  const [resizedImage, setResizedImage] = useState(null);
+  const handleCrop = useCallback(() => {
+    onCrop(instance.getCroppedCanvas().toDataURL());
+    close();
+  }, [onCrop, instance, close]);
+  const handleInitialized = useCallback(instance => {
+    setIntance(instance);
+  }, []);
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    close();
+  };
+  useEffect(() => {
+    resizeImage(src, mime, width > height ? width : height, 'cover', resizedImageUrl => {
+      setResizedImage(resizedImageUrl);
+    });
+  }, [src, mime, height, width]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TitleModal.Header, {
+      handleClose: handleClose,
+      children: t('CropImage')
+    }), /*#__PURE__*/_jsx(TitleModal.Body, {
+      children: resizedImage && /*#__PURE__*/_jsx(Cropper, {
+        src: resizedImage,
+        alt: alt,
+        width: width,
+        height: height,
+        cropBoxResizable: cropBoxResizable,
+        onInitialized: handleInitialized
+      })
+    }), /*#__PURE__*/_jsx(TitleModal.Footer, {
+      children: /*#__PURE__*/_jsxs(ButtonGroup, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          danger: true,
+          onClick: handleClose,
+          children: t('button:Cancel')
+        }), /*#__PURE__*/_jsx(Button, {
+          success: true,
+          onClick: handleCrop,
+          children: t('button:Confirm')
+        })]
+      })
+    })]
+  });
+};
+export default CropImageModal;

package/{datetimePicker/DatetimePicker.js → esm/datetimePicker/DatetimePickerV3.js}

@@ -1,17 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
-require("react-datepicker/dist/react-datepicker.css");
-var _CustomTimeInput = _interopRequireDefault(require("./subComponent/CustomTimeInput"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DatetimePicker = _ref => {
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+const setDateTime = (date, value) => {
+  const [hh, mm, ss] = value.split(':');
+  date.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0, 0);
+};
+const DatetimePickerV3 = _ref => {
   let {
     selected = '',
     onChange,
@@ -23,46 +20,81 @@ const DatetimePicker = _ref => {
     disabled,
     onBlur,
     allowClear = false,
-    shouldCloseOnSelect = true
+    shouldCloseOnSelect = true,
+    placeholderText,
+    allowTimeInputEmpty = false
   } = _ref;
-  const datepickerRef = (0, _react.useRef)(null);
+  const datepickerRef = useRef(null);
+  const pendingTimeRef = useRef(null);
   const handleOnBlur = () => {
-    onBlur();
+    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,
-    selected: selected ? new Date(Date.parse(selected)) : '',
+    onChange: handleChange,
+    selected: selectedDate,
     minDate: minDate ? new Date(Date.parse(minDate)) : '',
     maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
-    isClearable: allowClear && selected && !disabled,
-    shouldCloseOnSelect
+    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 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomTimeInput.default, {
-      onCustomChange: onChange
+    datePickerProps.customTimeInput = /*#__PURE__*/_jsx(TimePickerV2, {
+      selected: selected,
+      onSelect: handleSelectTime,
+      allowEmpty: allowTimeInputEmpty && !selected
     });
   }
-  if (onBlur) {
-    datePickerProps.onCalendarClose = handleOnBlur;
-  }
-  (0, _react.useEffect)(() => {
+  datePickerProps.onCalendarClose = handleOnBlur;
+  useEffect(() => {
     // set input to readonly
     if (datepickerRef && datepickerRef.current && readOnly) {
       datepickerRef.current.input.readOnly = readOnly;
     }
   }, [readOnly]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+  return /*#__PURE__*/_jsx(Wrapper, {
     disabled: disabled,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
       ...datePickerProps,
       ref: datepickerRef
     })
   });
 };
-const Wrapper = _styledComponents.default.div`
+const Wrapper = styled.div`
   .react-datepicker-wrapper,
   .react-datepicker__input-container {
     width: 100%;
@@ -237,4 +269,4 @@ const Wrapper = _styledComponents.default.div`
     }
   }
 `;
-var _default = exports.default = DatetimePicker;
+export default DatetimePickerV3;

package/esm/datetimePicker/TimeInput.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import RCTimePicker from 'rc-time-picker';
+import 'rc-time-picker/assets/index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TimeInput = props => {
+  return /*#__PURE__*/_jsx(Wrapper, {
+    disabled: props.disabled,
+    children: /*#__PURE__*/_jsx(RCTimePicker, {
+      ...props
+    })
+  });
+};
+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);
+
+      ${_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);
+      }
+    }
+  }
+`;
+export default TimeInput;

package/esm/datetimePicker/TimePickerStyle.js

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

package/esm/datetimePicker/TimePickerV2.js

@@ -0,0 +1,199 @@
+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';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 = _ref => {
+  let {
+    selected,
+    onSelect,
+    allowEmpty = false
+  } = _ref;
+  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 /*#__PURE__*/_jsx(OutsideClickHandler, {
+    onOutsideClick: () => {
+      setDisplay(false);
+    },
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Input, {
+        ref: setTargetElement,
+        type: "text",
+        readOnly: true,
+        onClick: handleToggle,
+        value: time.hour && time.minute && time.second ? `${time.hour}:${time.minute}:${time.second}` : ''
+      }), /*#__PURE__*/_jsxs(Panel, {
+        ref: setPopperElement,
+        $display: display,
+        style: styles.popper,
+        ...attributes.popper,
+        placement: state && state.placement,
+        children: [/*#__PURE__*/_jsx(Picker, {
+          children: HOUR_OPTIONS.map(option => {
+            return /*#__PURE__*/_jsx(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('hour', option);
+              },
+              selected: option === time.hour,
+              "aria-selected": option === time.hour,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/_jsx(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/_jsx(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('minute', option);
+              },
+              selected: option === time.minute,
+              "aria-selected": option === time.minute,
+              children: option
+            }, option);
+          })
+        }), /*#__PURE__*/_jsx(Picker, {
+          children: MINUTE_SECOND_OPTIONS.map(option => {
+            return /*#__PURE__*/_jsx(Option, {
+              role: "option",
+              onClick: () => {
+                handleChange('second', option);
+              },
+              selected: option === time.second,
+              "aria-selected": option === time.second,
+              children: option
+            }, option);
+          })
+        })]
+      })]
+    })
+  });
+};
+const Panel = styled.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 = 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);
+  }
+
+  ${_ref3 => {
+  let {
+    selected
+  } = _ref3;
+  return selected && css`
+      background: var(--color-hover);
+    `;
+}}
+`;
+export default TimePickerV2;