diginet-core-ui 1.4.34-beta.2 → 1.4.36-beta.1

package/components/form-control/dropdown-box/index.js

@@ -101,10 +101,10 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     }
   };
 
-  /**
-   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
-   * @param data {object} rowData of dataSource
-   * @return {string}
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
    */
   const displayValue = data => {
     let text = '';

package/components/form-control/time-picker/v2/index.js

@@ -90,10 +90,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const saveText = getGlobal(['save']);
   const nowText = getGlobal(['now']);
 
-  /**
-   * onChange handler with condition base on min max
-   * @param {*} e
-   * @param {String} key one of ['hour', 'minute', 'second']
+  /**
+   * onChange handler with condition base on min max
+   * @param {*} e
+   * @param {String} key one of ['hour', 'minute', 'second']
    */
   const onChangeHandler = (e, key) => {
     var _e$target;
@@ -149,10 +149,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @param {String} key
-   * @param {Number} value
+  /**
+   *
+   * @param {String} key
+   * @param {Number} value
    */
   const setTimeAfterChange = (key, value) => {
     setTimeValue({
@@ -161,14 +161,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     });
   };
 
-  /**
-   *
-   * Arrow up hour input onClick in the following cases:
-   * (1): Increase current hour by 1
-   * (2): If current hour is equal to max hour value, set current hour equal to min hour
-   * (3): If current hour plus 1 is equal to max hour, set current minute equal to max minute if current minute greater than max minute value
-   * (4): If current hour plus 1 is equal to max hour, set current second equal to max second if current second greater than max second value
-   * (5): Set current minute, second to min minute, second if current hour is greater than max hour value and current minute, second is greater than min minute, second value
+  /**
+   *
+   * Arrow up hour input onClick in the following cases:
+   * (1): Increase current hour by 1
+   * (2): If current hour is equal to max hour value, set current hour equal to min hour
+   * (3): If current hour plus 1 is equal to max hour, set current minute equal to max minute if current minute greater than max minute value
+   * (4): If current hour plus 1 is equal to max hour, set current second equal to max second if current second greater than max second value
+   * (5): Set current minute, second to min minute, second if current hour is greater than max hour value and current minute, second is greater than min minute, second value
    */
   const onIncreaseHour = () => {
     if (maxHour === currentHour + 1 && maxMinute < currentMinute) {
@@ -209,15 +209,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} minuteStep
-   * @constant {Number} lastMinute
-   * Arrow up minute input onClick in the following cases:
-   * (1): Increase current minute by minute step (default 1).
-   * (2): If current minute plus minute step is greater than lastMinute, set current minute equal to min minute.
-   * (3): If current second greater than max second value, set current second equal to max second.
-   * (4): (3) and current second is greater than max second value, set current second equal to max second.
+  /**
+   *
+   * @constant {Number} minuteStep
+   * @constant {Number} lastMinute
+   * Arrow up minute input onClick in the following cases:
+   * (1): Increase current minute by minute step (default 1).
+   * (2): If current minute plus minute step is greater than lastMinute, set current minute equal to min minute.
+   * (3): If current second greater than max second value, set current second equal to max second.
+   * (4): (3) and current second is greater than max second value, set current second equal to max second.
    */
   const onIncreaseMinute = () => {
     if (lastMinute < currentMinute + minuteStep) {
@@ -244,11 +244,11 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * Arrow up second input onClick in the following cases:
-   * (1): Increase current second by 1
-   * (2): If current second plus 1 equal to max second value, set current second to min second
+  /**
+   *
+   * Arrow up second input onClick in the following cases:
+   * (1): Increase current second by 1
+   * (2): If current second plus 1 equal to max second value, set current second to min second
    */
   const onIncreaseSecond = () => {
     if (lastSecond < currentSecond + 1) {
@@ -260,15 +260,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * Arrow down hour input onClick in the following cases:
-   * (1): Decrease current hour by 1
-   * (2): If current hour is equal to min hour value, set current hour equal to max hour
-   * (3): (2) and current minute is greater than max minute value, set minute to max minute value
-   * (4): (3) and current second is greater than min second value, set second to max second value
-   * (5): If current hour minus 1 is equal to min hour and current minute greater than min minute value, set current minute equal to min minute
-   * (6): (5) and current second is greater than min second value, set current second equal to min second
+  /**
+   *
+   * Arrow down hour input onClick in the following cases:
+   * (1): Decrease current hour by 1
+   * (2): If current hour is equal to min hour value, set current hour equal to max hour
+   * (3): (2) and current minute is greater than max minute value, set minute to max minute value
+   * (4): (3) and current second is greater than min second value, set second to max second value
+   * (5): If current hour minus 1 is equal to min hour and current minute greater than min minute value, set current minute equal to min minute
+   * (6): (5) and current second is greater than min second value, set current second equal to min second
    */
   const onDecreaseHour = () => {
     if (minHour === currentHour - 1 && minMinute > currentMinute) {
@@ -319,15 +319,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} minuteStep
-   * @constant {Number} startMinute
-   * @constant {Number} lastMinute
-   * Arrow down minute input onClick in the following cases:
-   * (1): Decrease current minute by @minuteStep
-   * (2): If current minute minus @minuteStep is smaller than @startMinute , set current minute to @lastMinute - @lastMinute % @minuteStep
-   * (3): (2) and current second is greater than max second, set current second to max second
+  /**
+   *
+   * @constant {Number} minuteStep
+   * @constant {Number} startMinute
+   * @constant {Number} lastMinute
+   * Arrow down minute input onClick in the following cases:
+   * (1): Decrease current minute by @minuteStep
+   * (2): If current minute minus @minuteStep is smaller than @startMinute , set current minute to @lastMinute - @lastMinute % @minuteStep
+   * (3): (2) and current second is greater than max second, set current second to max second
    */
   const onDecreaseMinute = () => {
     if (startMinute > currentMinute - minuteStep) {
@@ -348,13 +348,13 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} startSecond
-   * @constant {Number} lastSecond
-   * Arrow down second input onClick in the following cases:
-   * (1): Decrease current second by 1
-   * (2): If current second minus 1 is smaller than start second, set current second to last second
+  /**
+   *
+   * @constant {Number} startSecond
+   * @constant {Number} lastSecond
+   * Arrow down second input onClick in the following cases:
+   * (1): Decrease current second by 1
+   * (2): If current second minus 1 is smaller than start second, set current second to last second
    */
   const onDecreaseSecond = () => {
     if (startSecond >= currentSecond - 1) {
@@ -366,30 +366,30 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * onClose Popover Timepicker when click Save button
+  /**
+   *
+   * onClose Popover Timepicker when click Save button
    */
   const onCloseTimePicker = () => {
     timePickerRef.current.close();
     setCurrentInputFocus(null);
   };
 
-  /**
-   *
-   * Format value using date().format() in utils
-   * @param {Date} value
-   * @param {String} outputFormat
-   * @returns
+  /**
+   *
+   * Format value using date().format() in utils
+   * @param {Date} value
+   * @param {String} outputFormat
+   * @returns
    */
   const formatTime = (value, outputFormat) => {
     return mode12h ? date(value).format(`hh${outputFormat.slice(2)} A`) : date(value).format(outputFormat);
   };
 
-  /**
-   *
-   * Button Save onClick
-   * @param {Boolean} now
+  /**
+   *
+   * Button Save onClick
+   * @param {Boolean} now
    */
   const onSelectTime = (now = false) => {
     let displayTimeValue = '00:00:00';
@@ -404,8 +404,8 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         text: displayTimeValue.slice(0, 2).includes(':') ? displayTimeValue.slice(9, 11) : displayTimeValue.slice(10, 12)
       });
     } else {
-      displayTimeValue = `${date(currentTime).format(displayFormat)} ${mode12h ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.text : ''}`;
-      returnTimeValue = `${date(currentTime).format(returnFormat)} ${mode12h ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.text : ''}`;
+      displayTimeValue = `${date(currentTime).format(displayFormat)}${mode12h ? ` ${timeValue === null || timeValue === void 0 ? void 0 : timeValue.text}` : ''}`;
+      returnTimeValue = `${date(currentTime).format(returnFormat)}${mode12h ? ` ${timeValue === null || timeValue === void 0 ? void 0 : timeValue.text}` : ''}`;
     }
     if (!now) {
       setDisplayTime(displayTimeValue);
@@ -420,12 +420,22 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   // useEffect for prop value
   useEffect(() => {
     if (!value) {
-      setTimeValue({
-        hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
-        minute: min ? min.slice(3, 5) : 0,
-        second: min ? min.slice(6, 8) : 0,
-        text: min ? min.slice(10, 12) || 'AM' : 'AM'
-      });
+      if (!mode12h) {
+        const timeValue = {
+          hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
+          minute: min ? min.slice(3, 5) : 0,
+          second: min ? min.slice(6, 8) : 0
+        };
+        setTimeValue(timeValue);
+      } else {
+        const timeValue = {
+          hour: min ? min.slice(0, 2) : mode12h ? 1 : 0,
+          minute: min ? min.slice(3, 5) : 0,
+          second: min ? min.slice(6, 8) : 0,
+          text: min ? (returnFormat === 'HH:mm:ss' ? min.slice(10, 12) : min.slice(6, 8)) || 'AM' : 'AM'
+        };
+        setTimeValue(timeValue);
+      }
       setDisplayTime(null);
     } else {
       let displayTimeValue = '00:00:00';
@@ -433,13 +443,22 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       const valueMinute = Number(value.slice(3, 5)) || '00';
       const valueSecond = Number(value.slice(6, 8)) || '00';
       const valueTime = new Date(new Date().getFullYear(), 0, 1, valueHour, valueMinute, valueSecond);
-      displayTimeValue = formatTime(valueTime, displayFormat);
-      setTimeValue({
-        hour: value.slice(0, 2),
-        minute: value.slice(3, 5),
-        second: value.slice(6, 8),
-        text: value.slice(10, 12)
-      });
+      displayTimeValue = formatTime(valueTime, displayFormat).slice(0, -3).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`);
+      if (!mode12h) {
+        setTimeValue({
+          hour: value.slice(0, 2),
+          minute: value.slice(3, 5),
+          second: value.slice(6, 8)
+        });
+      } else {
+        const timeValue = {
+          hour: value.slice(0, 2),
+          minute: value.slice(3, 5),
+          second: returnFormat === 'HH:mm:ss' ? value.slice(6, 8) : '00',
+          text: returnFormat === 'HH:mm:ss' ? value.slice(10, 12) : value.slice(6, 8)
+        };
+        setTimeValue(timeValue);
+      }
       setDisplayTime(displayTimeValue);
     }
   }, [value, displayFormat, returnFormat, mode12h, min, max]);
@@ -477,7 +496,23 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     disabled: disabled,
     required: required,
     ...labelProps
-  }, label), jsx(Popover, {
+  }, label), readOnly ? jsx(InputBase, {
+    inputProps: {
+      placeholder: !readOnly && !disabled ? placeholder : '',
+      ...inputProps
+    },
+    disabled: disabled,
+    viewType: viewType,
+    inputStyle: {
+      ...inputStyle
+    },
+    value: displayTime,
+    endIcon: endIcon,
+    startIcon: startIcon,
+    onKeyDown: e => e.preventDefault(),
+    status: error ? 'danger' : 'default',
+    readOnly: true
+  }) : jsx(Popover, {
     css: _TimePickerCSS,
     anchor: jsx(InputBase, {
       inputProps: {
@@ -725,24 +760,6 @@ const TimePickerAMPMCSS = (currentText, {
         ${parseWidth(32)};
     }
 `;
-
-// TimePicker.defaultProps = {
-//     actionIconAt: 'end',
-//     className: '',
-//     disabled: false,
-//     displayFormat: 'HH:mm:ss',
-//     mode12h: false,
-//     readOnly: false,
-//     required: false,
-//     returnFormat: 'HH:mm:ss',
-//     error: '',
-//     minuteStep: 1,
-//     min: '',
-//     max: '',
-//     label: '',
-//     value: '',
-// };
-
 TimePicker.propTypes = {
   /** CSS class for the component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.34-beta.2",
+  "version": "1.4.36-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",