@cashub/ui 0.48.11 → 0.48.13

package/datetimePicker/DatetimePickerV3.js

@@ -18,6 +18,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 = '',
@@ -35,16 +39,35 @@ const DatetimePickerV3 = _ref => {
     allowTimeInputEmpty = false
   } = _ref;
   const datepickerRef = (0, _react.useRef)(null);
+  const pendingTimeRef = (0, _react.useRef)(null);
   const handleOnBlur = () => {
-    onBlur();
+    pendingTimeRef.current = null;
+    if (typeof onBlur === 'function') {
+      onBlur();
+    }
   };
   const selectedDate = (0, _react.useMemo)(() => {
     return selected ? new Date(Date.parse(selected)) : '';
   }, [selected]);
+  const handleChange = (0, _react.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,
+    onChange: handleChange,
     selected: selectedDate,
     minDate: minDate ? new Date(Date.parse(minDate)) : '',
     maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
@@ -54,9 +77,10 @@ const DatetimePickerV3 = _ref => {
   };
   const handleSelectTime = (0, _react.useCallback)(value => {
     if (selectedDate) {
-      const [hh, mm, ss] = value.split(':');
-      selectedDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
+      setDateTime(selectedDate, value);
       onChange(selectedDate);
+    } else {
+      pendingTimeRef.current = value;
     }
   },
   // NOTE: Adding onChange to the dependency list will cause a rerender loop
@@ -69,9 +93,7 @@ const DatetimePickerV3 = _ref => {
       allowEmpty: allowTimeInputEmpty && !selected
     });
   }
-  if (onBlur) {
-    datePickerProps.onCalendarClose = handleOnBlur;
-  }
+  datePickerProps.onCalendarClose = handleOnBlur;
   (0, _react.useEffect)(() => {
     // set input to readonly
     if (datepickerRef && datepickerRef.current && readOnly) {

package/datetimePicker/TimePickerV2.js

@@ -36,6 +36,20 @@ const EMPTY_TIME = {
   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,
@@ -46,20 +60,7 @@ const TimePickerV2 = _ref => {
   const [targetElement, setTargetElement] = (0, _react.useState)(null);
   const [popperElement, setPopperElement] = (0, _react.useState)(null);
   const [time, setTime] = (0, _react.useState)(() => {
-    let time = new Date(Date.parse(selected));
-
-    // use current time when time value is invalid
-    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)
-    };
+    return getTimeFromSelected(selected, allowEmpty);
   });
   const {
     styles,
@@ -74,22 +75,19 @@ const TimePickerV2 = _ref => {
     update();
   };
   const handleChange = (type, value) => {
-    setTime(previous => {
-      return _objectSpread(_objectSpread({}, previous), {}, {
-        [type]: value
-      });
+    const next = _objectSpread(_objectSpread({}, time), {}, {
+      [type]: value
     });
+    setTime(next);
+    if (typeof onSelect === 'function' && next.hour && next.minute && next.second) {
+      onSelect("".concat(next.hour, ":").concat(next.minute, ":").concat(next.second));
+    }
   };
+
+  // sync time picker state when selected value changes
   (0, _react.useEffect)(() => {
-    if (allowEmpty && !selected) {
-      setTime(EMPTY_TIME);
-    }
+    setTime(getTimeFromSelected(selected, allowEmpty));
   }, [allowEmpty, selected]);
-  (0, _react.useEffect)(() => {
-    if (typeof onSelect === 'function' && time.hour && time.minute && time.second) {
-      onSelect("".concat(time.hour, ":").concat(time.minute, ":").concat(time.second));
-    }
-  }, [onSelect, time.hour, time.minute, time.second]);
   (0, _react.useEffect)(() => {
     if (display) {
       const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.48.11",
+  "version": "0.48.13",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",