@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/chart/utils/padEmptyChartBar.js

@@ -0,0 +1,47 @@
+// make chart bar seem like align left by pad empty bar at the end
+const padEmptyChartBar = {
+  id: 'padEmptyChartBar',
+  length: -1,
+  // pad empty chart bar when data less than max bar number
+  beforeUpdate(chart) {
+    this.length = -1;
+    const {
+      data,
+      options
+    } = chart.config._config;
+    const validLabels = data.labels.filter(label => label !== null);
+    const {
+      maxBarNumber
+    } = options.plugins.padEmptyChartBar;
+    for (let index = validLabels.length; index < maxBarNumber; index += 1) {
+      this.length = this.length === -1 ? index : this.length;
+      data.labels[index] = null;
+      const [datasets] = data.datasets;
+      if (datasets) {
+        datasets.data[index] = 0;
+      }
+    }
+  },
+  // prevent padded empty chart bar to be drawn
+  afterUpdate(chart) {
+    const {
+      data,
+      options
+    } = chart.config._config;
+    const {
+      maxBarNumber
+    } = options.plugins.padEmptyChartBar;
+    if (this.length === -1) {
+      // restore draw function
+      for (let index = 0; index < maxBarNumber; index += 1) {
+        // delete data.datasets[0]._meta[data.index].data[i].draw;
+      }
+    } else {
+      // prevents new charts to be drawn
+      for (let index = this.length; index < data.maxBarNumber; index += 1) {
+        data.datasets[0]._meta[data.index].data[index].draw = () => {};
+      }
+    }
+  }
+};
+export default padEmptyChartBar;

package/esm/chart/utils/tooltipElement.js

@@ -0,0 +1,17 @@
+export const CUSTOM_TOOLTIP_ID = 'chartjs-tooltip';
+export const AXIS_TOOLTIP_ID = 'chartjs-axis-tooltip';
+export const getOrCreateTooltipEl = id => {
+  let tooltipEl = document.getElementById(id);
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div');
+    tooltipEl.id = id;
+    document.body.appendChild(tooltipEl);
+  }
+  return tooltipEl;
+};
+export const hideTooltipEl = id => {
+  const tooltipEl = document.getElementById(id);
+  if (tooltipEl) {
+    tooltipEl.style.display = 'none';
+  }
+};

package/esm/chart/utils/xAxisLabelTooltipPlugin.js

@@ -0,0 +1,101 @@
+import { AXIS_TOOLTIP_ID, getOrCreateTooltipEl, hideTooltipEl } from './tooltipElement';
+const hideTooltip = () => hideTooltipEl(AXIS_TOOLTIP_ID);
+const getTooltipEl = () => {
+  const tooltipEl = getOrCreateTooltipEl(AXIS_TOOLTIP_ID);
+  tooltipEl.style.position = 'absolute';
+  tooltipEl.style.pointerEvents = 'none';
+  tooltipEl.style.zIndex = 80;
+  tooltipEl.style.maxWidth = '50vw';
+  tooltipEl.style.wordBreak = 'break-word';
+  tooltipEl.style.whiteSpace = 'nowrap';
+  tooltipEl.style.textAlign = 'left';
+  tooltipEl.style.border = '1px solid var(--border-color)';
+  tooltipEl.style.color = 'var(--font-on-background)';
+  tooltipEl.style.background = 'var(--color-background2)';
+  tooltipEl.style.boxShadow = 'var(--box-shadow)';
+  tooltipEl.style.borderRadius = 'calc(var(--border-radius) / 2)';
+  tooltipEl.style.padding = 'var(--spacing-xs)';
+  tooltipEl.style.fontSize = 'var(--font-body1)';
+  return tooltipEl;
+};
+
+// approximate hit-box per rendered tick: stable public getPixelForTick() + chartArea,
+// not Chart.js's private _labelItems/_computeLabelItems (undocumented, version-fragile).
+//
+// Ticks are matched via xScale.ticks (the array Chart.js actually renders) rather than
+// chart.data.labels directly, because ticks.autoSkip (on by default) drops entries when
+// labels don't all fit - exactly the case this feature targets. Each rendered tick's
+// `.value` is the original index into chart.data.labels, which getPixelForTick(i) does
+// NOT return (it returns a pixel, and its `i` argument is a position in the possibly-
+// skipped ticks array, not a label index) - so the original label index must be read
+// back off ticks[i].value, not off the loop counter.
+const findHoveredTickIndex = (chart, x, y) => {
+  const xScale = chart.scales.x;
+  if (!xScale) {
+    return -1;
+  }
+  const {
+    ticks
+  } = xScale;
+  if (!ticks || ticks.length === 0) {
+    return -1;
+  }
+  const {
+    chartArea
+  } = chart;
+  if (y < chartArea.bottom || y > xScale.bottom || x < chartArea.left || x > chartArea.right) {
+    return -1;
+  }
+  const halfStep = ticks.length > 1 ? Math.abs(xScale.getPixelForTick(1) - xScale.getPixelForTick(0)) / 2 : (xScale.right - xScale.left) / 2;
+  for (let i = 0; i < ticks.length; i += 1) {
+    const tickPixel = xScale.getPixelForTick(i);
+    if (tickPixel !== null && Math.abs(x - tickPixel) <= halfStep) {
+      return ticks[i].value;
+    }
+  }
+  return -1;
+};
+const xAxisLabelTooltipPlugin = {
+  id: 'xAxisLabelTooltip',
+  afterEvent(chart, args) {
+    const config = chart.config.options.plugins.xAxisLabelTooltip;
+    if (!config || !config.enabled) {
+      hideTooltip();
+      return;
+    }
+    const {
+      event
+    } = args;
+    if (event.type === 'mouseout') {
+      hideTooltip();
+      return;
+    }
+    if (event.type !== 'mousemove') {
+      return;
+    }
+    const index = findHoveredTickIndex(chart, event.x, event.y);
+    const label = index === -1 ? undefined : chart.data.labels[index];
+    if (typeof label !== 'string' || !label) {
+      hideTooltip();
+      return;
+    }
+    const tooltipEl = getTooltipEl();
+    tooltipEl.textContent = label;
+    tooltipEl.style.display = 'block';
+    const canvasRect = chart.canvas.getBoundingClientRect();
+    // index here is the original label index (see findHoveredTickIndex), so the pixel
+    // must come from getPixelForValue(index), not getPixelForTick(index) - the latter
+    // expects a position in the (possibly autoSkip-reduced) ticks array, not a label index.
+    const tickX = chart.scales.x.getPixelForValue(index);
+    tooltipEl.style.transform = 'translateX(-50%)';
+    tooltipEl.style.left = `${canvasRect.left + window.pageXOffset + tickX}px`;
+    tooltipEl.style.top = `${canvasRect.top + window.pageYOffset + chart.chartArea.bottom + 8}px`;
+  },
+  resize() {
+    hideTooltip();
+  },
+  afterDestroy() {
+    hideTooltip();
+  }
+};
+export default xAxisLabelTooltipPlugin;

package/esm/chart/utils/yAxisTopTitlePlugin.js

@@ -0,0 +1,43 @@
+import { defaults } from 'react-chartjs-2';
+const yAxisTopTitlePlugin = {
+  id: 'yAxisTopTitle',
+  afterDraw(chart) {
+    const {
+      options
+    } = chart.config;
+    const config = options.plugins.yAxisTopTitle;
+    if (!config || !config.title) {
+      return;
+    }
+    const {
+      title
+    } = config;
+    const {
+      ctx,
+      chartArea,
+      scales
+    } = chart;
+    const yScale = scales.y;
+    if (!yScale) {
+      return;
+    }
+    ctx.save();
+    const {
+      font,
+      color
+    } = defaults;
+    const {
+      family,
+      size
+    } = font;
+    ctx.font = `bold ${size}px ${family}`;
+    ctx.fillStyle = color;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const x = yScale.left;
+    const y = chartArea.top - 24;
+    ctx.fillText(title, x, y);
+    ctx.restore();
+  }
+};
+export default yAxisTopTitlePlugin;

package/esm/container/FlexContainer.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+const FlexContainer = styled.div`
+  display: flex;
+
+  ${_ref => {
+  let {
+    marginBottom
+  } = _ref;
+  return marginBottom && 'margin-bottom: var(--spacing-l)';
+}};
+
+  ${_ref2 => {
+  let {
+    wrap
+  } = _ref2;
+  return wrap && 'flex-wrap: wrap';
+}};
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'align-items: center;';
+}}
+
+  ${_ref4 => {
+  let {
+    spaceBetween
+  } = _ref4;
+  return spaceBetween && 'justify-content: space-between;';
+}}
+`;
+export default FlexContainer;

package/esm/container/index.js

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

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;