@majoo-ui/react 1.58.9 → 1.58.10

package/index.esm.js

@@ -17414,6 +17414,32 @@ var _jsxFileName$r = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packag
 const Input$3 = styled('input', {
   display: 'none'
 });
+const InputTime = styled('input', {
+  width: 44,
+  border: 'none',
+  outline: 'none',
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 28,
+  color: '$textPrimary',
+  letterSpacing: 2,
+  '&:read-only': {
+    backgroundColor: '$bgWhite'
+  },
+  '&:disabled': {
+    backgroundColor: '$gray100'
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: 28
+      },
+      lg: {
+        fontSize: 32
+      }
+    }
+  }
+});
 const Time = styled('p', {
   fontWeight: 600,
   fontStyle: 'normal',
@@ -17495,27 +17521,30 @@ const IconDown = styled(ChevronDownOutline, {
 });
 const IconStateFull$2 = props => {
   const [isHover, setIsHover] = useState(false);
-  function toggleHover() {
-    setIsHover(!isHover);
+  function handleEnter() {
+    setIsHover(true);
+  }
+  function handleLeave() {
+    setIsHover(false);
   }
   return props.type === 'up' ? /*#__PURE__*/React__default.createElement(IconUp, _extends({}, props, {
     color: isHover && !props.disabled ? '#04C99E' : '#404545',
-    onMouseEnter: toggleHover,
-    onMouseLeave: toggleHover,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 101,
+      lineNumber: 134,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(IconDown, _extends({}, props, {
     color: isHover && !props.disabled ? '#04C99E' : '#404545',
-    onMouseEnter: toggleHover,
-    onMouseLeave: toggleHover,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 108,
+      lineNumber: 141,
       columnNumber: 5
     }
   }));
@@ -17537,6 +17566,7 @@ const NativeTimePicker = ({
 }) => {
   const [date, setDate] = useState(value ? value : defaultValue ? defaultValue : moment());
   const format = 'HH:mm';
+  const inputRef = React__default.useRef(false);
   function handleChange(e) {
     onChange(e, moment(e).format(format));
   }
@@ -17570,6 +17600,65 @@ const NativeTimePicker = ({
       }
     }
   }
+  function handleInputChange(type, e) {
+    var _e$target;
+    const value = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value;
+    const format = 'DD:MM:YYYY:HH:mm';
+    const minLength = (value === null || value === void 0 ? void 0 : value.length) > 1;
+    const hourValue = params => moment(moment(`${moment(date).format('DD:MM:YYYY:mm')}:${params}`, 'DD:MM:YYYY:mm:HH').toDate());
+    const minuteValue = params => moment(moment(`${moment(date).format('DD:MM:YYYY:HH')}:${params}`, 'DD:MM:YYYY:HH:mm').toDate());
+    if (!disabled) {
+      if (type === 'hour') {
+        if (value < 0 && minLength) {
+          setNewDate(minDate || hourValue(0));
+          inputRef.current = false;
+          return;
+        }
+        if (value > 23 && minLength) {
+          setNewDate(maxDate || hourValue(23));
+          inputRef.current = false;
+          return;
+        }
+        if (minDate && hourValue(value) < moment(minDate) && minLength) {
+          setNewDate(minDate);
+          inputRef.current = false;
+          return;
+        }
+        if (maxDate && hourValue(value) > moment(maxDate) && minLength) {
+          setNewDate(maxDate);
+          inputRef.current = false;
+          return;
+        }
+        setNewDate(moment(moment(`${moment(date).format('DD:MM:YYYY')}:${value}:${moment(date).format('mm')}`, format).toDate()));
+        inputRef.current = true;
+      } else {
+        if (value < 0 && minLength) {
+          setNewDate(minuteValue(0));
+          inputRef.current = false;
+          return;
+        }
+        if (value > 59 && minLength) {
+          setNewDate(minuteValue(59));
+          inputRef.current = false;
+          return;
+        }
+        if (minDate && minuteValue(value) < moment(minDate) && minLength) {
+          setNewDate(minDate);
+          inputRef.current = false;
+          return;
+        }
+        if (maxDate && minuteValue(value) > moment(maxDate) && minLength) {
+          setNewDate(maxDate);
+          inputRef.current = false;
+          return;
+        }
+        setNewDate(moment(moment(`${moment(date).format('DD:MM:YYYY:HH')}:${value}`, format).toDate()));
+        inputRef.current = true;
+      }
+    }
+  }
+  const hourValue = moment(date).format('HH');
+  const minuteValue = moment(date).format('mm');
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "column",
     align: "center",
@@ -17581,7 +17670,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 185,
+      lineNumber: 285,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -17590,7 +17679,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 191,
+      lineNumber: 291,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$2, {
@@ -17600,7 +17689,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 192,
+      lineNumber: 292,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$2, {
@@ -17610,7 +17699,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 197,
+      lineNumber: 297,
       columnNumber: 9
     }
   })), /*#__PURE__*/React__default.createElement(Input$3, {
@@ -17621,24 +17710,64 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 203,
+      lineNumber: 303,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(Flex$1, {
+    gap: 1,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$r,
+      lineNumber: 304,
       columnNumber: 7
     }
+  }, /*#__PURE__*/React__default.createElement(InputTime, {
+    size: size,
+    maxLength: 2,
+    disabled: disabled,
+    readOnly: disabledHourIncrease || disabledHourDecrease || disabledHour,
+    defaultValue: hourValue,
+    value: !inputRef.current ? hourValue : undefined,
+    onChange: e => handleInputChange('hour', e),
+    onFocus: () => inputRef.current = true,
+    onBlur: () => inputRef.current = false,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$r,
+      lineNumber: 305,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React__default.createElement(Time, {
     size: size,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 204,
-      columnNumber: 7
+      lineNumber: 316,
+      columnNumber: 9
+    }
+  }, ":"), /*#__PURE__*/React__default.createElement(InputTime, {
+    size: size,
+    maxLength: 2,
+    disabled: disabled,
+    readOnly: disabledMinuteIncrease || disabledMinuteDecrease || disabledMinute,
+    defaultValue: minuteValue,
+    value: !inputRef.current ? minuteValue : undefined,
+    onChange: e => handleInputChange('minute', e),
+    onFocus: () => inputRef.current = true,
+    onBlur: () => inputRef.current = false,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$r,
+      lineNumber: 317,
+      columnNumber: 9
     }
-  }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
+  })), /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
     gap: 6,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 205,
+      lineNumber: 329,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$2, {
@@ -17648,7 +17777,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 206,
+      lineNumber: 330,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$2, {
@@ -17658,7 +17787,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 211,
+      lineNumber: 335,
       columnNumber: 9
     }
   })));
@@ -17743,7 +17872,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 293,
+      lineNumber: 417,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(NativeTimePicker, {
@@ -17763,7 +17892,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
-      lineNumber: 294,
+      lineNumber: 418,
       columnNumber: 7
     }
   }));

package/index.umd.js

@@ -17676,6 +17676,32 @@
   const Input$3 = styled('input', {
     display: 'none'
   });
+  const InputTime = styled('input', {
+    width: 44,
+    border: 'none',
+    outline: 'none',
+    fontWeight: 600,
+    fontStyle: 'normal',
+    fontSize: 28,
+    color: '$textPrimary',
+    letterSpacing: 2,
+    '&:read-only': {
+      backgroundColor: '$bgWhite'
+    },
+    '&:disabled': {
+      backgroundColor: '$gray100'
+    },
+    variants: {
+      size: {
+        sm: {
+          fontSize: 28
+        },
+        lg: {
+          fontSize: 32
+        }
+      }
+    }
+  });
   const Time = styled('p', {
     fontWeight: 600,
     fontStyle: 'normal',
@@ -17757,27 +17783,30 @@
   });
   const IconStateFull$2 = props => {
     const [isHover, setIsHover] = React.useState(false);
-    function toggleHover() {
-      setIsHover(!isHover);
+    function handleEnter() {
+      setIsHover(true);
+    }
+    function handleLeave() {
+      setIsHover(false);
     }
     return props.type === 'up' ? /*#__PURE__*/React__default["default"].createElement(IconUp, _extends({}, props, {
       color: isHover && !props.disabled ? '#04C99E' : '#404545',
-      onMouseEnter: toggleHover,
-      onMouseLeave: toggleHover,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 101,
+        lineNumber: 134,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(IconDown, _extends({}, props, {
       color: isHover && !props.disabled ? '#04C99E' : '#404545',
-      onMouseEnter: toggleHover,
-      onMouseLeave: toggleHover,
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 108,
+        lineNumber: 141,
         columnNumber: 5
       }
     }));
@@ -17799,6 +17828,7 @@
   }) => {
     const [date, setDate] = React.useState(value ? value : defaultValue ? defaultValue : moment__default["default"]());
     const format = 'HH:mm';
+    const inputRef = React__default["default"].useRef(false);
     function handleChange(e) {
       onChange(e, moment__default["default"](e).format(format));
     }
@@ -17832,6 +17862,65 @@
         }
       }
     }
+    function handleInputChange(type, e) {
+      var _e$target;
+      const value = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value;
+      const format = 'DD:MM:YYYY:HH:mm';
+      const minLength = (value === null || value === void 0 ? void 0 : value.length) > 1;
+      const hourValue = params => moment__default["default"](moment__default["default"](`${moment__default["default"](date).format('DD:MM:YYYY:mm')}:${params}`, 'DD:MM:YYYY:mm:HH').toDate());
+      const minuteValue = params => moment__default["default"](moment__default["default"](`${moment__default["default"](date).format('DD:MM:YYYY:HH')}:${params}`, 'DD:MM:YYYY:HH:mm').toDate());
+      if (!disabled) {
+        if (type === 'hour') {
+          if (value < 0 && minLength) {
+            setNewDate(minDate || hourValue(0));
+            inputRef.current = false;
+            return;
+          }
+          if (value > 23 && minLength) {
+            setNewDate(maxDate || hourValue(23));
+            inputRef.current = false;
+            return;
+          }
+          if (minDate && hourValue(value) < moment__default["default"](minDate) && minLength) {
+            setNewDate(minDate);
+            inputRef.current = false;
+            return;
+          }
+          if (maxDate && hourValue(value) > moment__default["default"](maxDate) && minLength) {
+            setNewDate(maxDate);
+            inputRef.current = false;
+            return;
+          }
+          setNewDate(moment__default["default"](moment__default["default"](`${moment__default["default"](date).format('DD:MM:YYYY')}:${value}:${moment__default["default"](date).format('mm')}`, format).toDate()));
+          inputRef.current = true;
+        } else {
+          if (value < 0 && minLength) {
+            setNewDate(minuteValue(0));
+            inputRef.current = false;
+            return;
+          }
+          if (value > 59 && minLength) {
+            setNewDate(minuteValue(59));
+            inputRef.current = false;
+            return;
+          }
+          if (minDate && minuteValue(value) < moment__default["default"](minDate) && minLength) {
+            setNewDate(minDate);
+            inputRef.current = false;
+            return;
+          }
+          if (maxDate && minuteValue(value) > moment__default["default"](maxDate) && minLength) {
+            setNewDate(maxDate);
+            inputRef.current = false;
+            return;
+          }
+          setNewDate(moment__default["default"](moment__default["default"](`${moment__default["default"](date).format('DD:MM:YYYY:HH')}:${value}`, format).toDate()));
+          inputRef.current = true;
+        }
+      }
+    }
+    const hourValue = moment__default["default"](date).format('HH');
+    const minuteValue = moment__default["default"](date).format('mm');
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "column",
       align: "center",
@@ -17843,7 +17932,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 185,
+        lineNumber: 285,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -17852,7 +17941,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 191,
+        lineNumber: 291,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
@@ -17862,7 +17951,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 192,
+        lineNumber: 292,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
@@ -17872,7 +17961,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 197,
+        lineNumber: 297,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$3, {
@@ -17883,24 +17972,64 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 203,
+        lineNumber: 303,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      gap: 1,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 304,
         columnNumber: 7
       }
+    }, /*#__PURE__*/React__default["default"].createElement(InputTime, {
+      size: size,
+      maxLength: 2,
+      disabled: disabled,
+      readOnly: disabledHourIncrease || disabledHourDecrease || disabledHour,
+      defaultValue: hourValue,
+      value: !inputRef.current ? hourValue : undefined,
+      onChange: e => handleInputChange('hour', e),
+      onFocus: () => inputRef.current = true,
+      onBlur: () => inputRef.current = false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 305,
+        columnNumber: 9
+      }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
       size: size,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 204,
-        columnNumber: 7
+        lineNumber: 316,
+        columnNumber: 9
+      }
+    }, ":"), /*#__PURE__*/React__default["default"].createElement(InputTime, {
+      size: size,
+      maxLength: 2,
+      disabled: disabled,
+      readOnly: disabledMinuteIncrease || disabledMinuteDecrease || disabledMinute,
+      defaultValue: minuteValue,
+      value: !inputRef.current ? minuteValue : undefined,
+      onChange: e => handleInputChange('minute', e),
+      onFocus: () => inputRef.current = true,
+      onBlur: () => inputRef.current = false,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 317,
+        columnNumber: 9
       }
-    }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+    })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "row",
       gap: 6,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 205,
+        lineNumber: 329,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
@@ -17910,7 +18039,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 206,
+        lineNumber: 330,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
@@ -17920,7 +18049,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 211,
+        lineNumber: 335,
         columnNumber: 9
       }
     })));
@@ -18005,7 +18134,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 293,
+        lineNumber: 417,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
@@ -18025,7 +18154,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 294,
+        lineNumber: 418,
         columnNumber: 7
       }
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.58.9",
+  "version": "1.58.10",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",