diginet-core-ui 1.4.21 → 1.4.22

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

@@ -0,0 +1,792 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, NumberInput, Popover, Typography } from "../../..";
+import { getGlobal } from "../../../../global";
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { bgColor, border, borderColor, borderNone, borderRadius4px, displayFlex, flexCol, itemsCenter, justifyBetween, justifyCenter, parseHeight, parseMinHeight, parseWidth, parseWidthHeight, positionRelative, textCenter, textColor } from "../../../../styles/general";
+import { useTheme } from "../../../../theme";
+import useThemeProps from "../../../../theme/utils/useThemeProps";
+import { classNames, date, getProp, hexToRGBA } from "../../../../utils";
+const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'TimePicker'
+  });
+  const {
+    action = {},
+    actionIconAt,
+    className,
+    disabled,
+    displayFormat,
+    error,
+    errorProps,
+    inputProps,
+    inputStyle,
+    placeholder: placeholderProp,
+    onChange,
+    mode12h,
+    min,
+    max,
+    minuteStep,
+    label,
+    labelProps,
+    style,
+    value: valueProp,
+    viewType,
+    returnFormat,
+    readOnly,
+    required,
+    ...other
+  } = props;
+  const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
+  let value = valueProp;
+
+  // ref
+  const ref = useRef(null);
+  const timePickerRef = useRef(null);
+
+  // states
+  const [currentInputFocus, setCurrentInputFocus] = useState(null);
+  const [displayTime, setDisplayTime] = useState(value);
+  const [minValue, setMinValue] = useState(min);
+  const [maxValue, setMaxValue] = useState(max);
+  const [timeValue, setTimeValue] = useState({
+    hour: mode12h ? 1 : 0,
+    minute: 0,
+    second: 0,
+    text: 'AM'
+  });
+  const theme = useTheme();
+
+  // css
+  const _TimePickerBodyCSS = TimePickerBodyCSS(currentInputFocus, theme);
+  const _TimePickerAMPMCSS = TimePickerAMPMCSS(timeValue === null || timeValue === void 0 ? void 0 : timeValue.text, theme);
+  const _TimePickerCSS = TimePickerCSS(theme);
+  const _TimePickerFooterCSS = TimePickerFooterCSS(theme);
+
+  // variables
+  const isError = !!error && !value;
+  const currentHour = Number(timeValue === null || timeValue === void 0 ? void 0 : timeValue.hour);
+  const currentMinute = Number(timeValue === null || timeValue === void 0 ? void 0 : timeValue.minute);
+  const currentSecond = Number(timeValue === null || timeValue === void 0 ? void 0 : timeValue.second);
+  const currentTime = new Date(new Date().getFullYear(), 0, 1, currentHour, currentMinute, currentSecond);
+  const maxHour = maxValue.slice(0, 2) ? Number(maxValue.slice(0, 2)) : mode12h ? 12 : 23;
+  const maxMinute = maxValue.slice(3, 5) ? Number(maxValue.slice(3, 5)) : 59;
+  const maxSecond = maxValue.slice(6, 8) ? Number(maxValue.slice(6, 8)) : 59;
+  const minHour = minValue.slice(0, 2) ? Number(minValue.slice(0, 2)) : mode12h ? 1 : 0;
+  const minMinute = minValue.slice(3, 5) ? Number(minValue.slice(3, 5)) : 0;
+  const minSecond = minValue.slice(6, 8) ? Number(minValue.slice(6, 8)) : 0;
+  const startHour = minHour ? minHour : mode12h ? 1 : 0;
+  const startMinute = currentHour === minHour ? minMinute : 0;
+  const startSecond = currentHour === minHour && currentMinute === minMinute ? minSecond : 0;
+  const lastHour = maxHour ? maxHour : mode12h ? 12 : 23;
+  const lastMinute = currentHour === maxHour ? maxMinute : 59;
+  const lastSecond = currentHour === maxHour && currentMinute === maxMinute ? maxSecond : 59;
+  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']
+   */
+  const onChangeHandler = (e, key) => {
+    var _e$target;
+    if (!e) return;
+    value = +(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || 0;
+    if (key === 'hour') {
+      if (maxHour === value && maxMinute <= currentMinute) {
+        if (maxSecond <= currentSecond) {
+          setTimeValue({
+            ...timeValue,
+            hour: maxHour,
+            minute: maxMinute,
+            second: maxSecond
+          });
+          return;
+        }
+        setTimeValue({
+          ...timeValue,
+          hour: maxHour,
+          minute: maxMinute
+        });
+      } else if (minHour >= value && minMinute >= currentMinute && minSecond >= currentSecond) {
+        setTimeValue({
+          ...timeValue,
+          hour: minHour,
+          minute: minMinute,
+          second: minSecond
+        });
+      } else {
+        setTimeValue({
+          ...timeValue,
+          [key]: value
+        });
+      }
+    } else if (key === 'minute') {
+      if (currentHour === maxHour && maxMinute <= value && currentSecond >= maxSecond) {
+        setTimeValue({
+          ...timeValue,
+          minute: maxMinute,
+          second: maxSecond
+        });
+      } else {
+        setTimeValue({
+          ...timeValue,
+          [key]: value
+        });
+      }
+    } else {
+      setTimeValue({
+        ...timeValue,
+        [key]: value
+      });
+    }
+  };
+
+  /**
+   *
+   * @param {String} key
+   * @param {Number} value
+   */
+  const setTimeAfterChange = (key, value) => {
+    setTimeValue({
+      ...timeValue,
+      [key]: 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) {
+      // (3)
+      if (maxSecond < currentSecond) {
+        // (4)
+        setTimeValue({
+          ...timeValue,
+          hour: maxHour,
+          minute: maxMinute,
+          second: maxSecond
+        });
+      } else {
+        setTimeValue({
+          ...timeValue,
+          hour: maxHour,
+          minute: maxMinute
+        });
+      }
+    } else if (maxHour <= currentHour) {
+      // (2)
+      if (minMinute <= currentMinute) {
+        // (5)
+        setTimeValue({
+          ...timeValue,
+          hour: minHour
+        });
+      } else {
+        setTimeValue({
+          ...timeValue,
+          hour: minHour,
+          minute: minMinute,
+          second: minSecond
+        });
+      }
+    } else {
+      setTimeAfterChange('hour', currentHour + 1); // (1)
+    }
+  };
+
+  /**
+   *
+   * @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) {
+      // (2)
+      setTimeAfterChange('minute', startMinute);
+    } else if (lastMinute === currentMinute + minuteStep) {
+      if (currentSecond > maxSecond) {
+        // (4)
+        setTimeValue({
+          ...timeValue,
+          minute: currentMinute + minuteStep,
+          second: maxSecond
+        });
+      } else {
+        // (3)
+        setTimeValue({
+          ...timeValue,
+          minute: currentMinute + minuteStep
+        });
+      }
+    } else {
+      // (1)
+      setTimeAfterChange('minute', currentMinute + minuteStep);
+    }
+  };
+
+  /**
+   *
+   * 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) {
+      // (2)
+      setTimeAfterChange('second', startSecond);
+    } else {
+      // (1)
+      setTimeAfterChange('second', currentSecond + 1);
+    }
+  };
+
+  /**
+   *
+   * 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) {
+      if (minSecond > currentSecond) {
+        // (6)
+        setTimeValue({
+          ...timeValue,
+          hour: minHour,
+          minute: minMinute,
+          second: minSecond
+        });
+      } else {
+        // (5)
+        setTimeValue({
+          ...timeValue,
+          hour: minHour,
+          minute: minMinute
+        });
+      }
+    } else if (minHour >= currentHour) {
+      if (maxMinute < currentMinute) {
+        if (maxSecond < currentSecond) {
+          // (4)
+          setTimeValue({
+            ...timeValue,
+            hour: maxHour,
+            minute: maxMinute,
+            second: maxSecond
+          });
+        } else {
+          // (3)
+          setTimeValue({
+            ...timeValue,
+            hour: maxHour,
+            minute: maxMinute
+          });
+        }
+      } else {
+        // (2)
+        setTimeValue({
+          ...timeValue,
+          hour: maxHour
+        });
+      }
+    } else {
+      // (1)
+      setTimeAfterChange('hour', currentHour - 1);
+    }
+  };
+
+  /**
+   *
+   * @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) {
+      if (currentHour === maxHour && currentSecond > maxSecond) {
+        // (3)
+        setTimeValue({
+          ...timeValue,
+          minute: lastMinute - lastMinute % minuteStep,
+          second: maxSecond
+        });
+      } else {
+        // (2)
+        setTimeAfterChange('minute', lastMinute - lastMinute % minuteStep);
+      }
+    } else {
+      // (1)
+      setTimeAfterChange('minute', currentMinute - minuteStep);
+    }
+  };
+
+  /**
+   *
+   * @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) {
+      // (2)
+      setTimeAfterChange('second', lastSecond);
+    } else {
+      // (1)
+      setTimeAfterChange('second', currentSecond - 1);
+    }
+  };
+
+  /**
+   *
+   * 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
+   */
+  const formatTime = (value, outputFormat) => {
+    return mode12h ? date(value).format(`hh${outputFormat.slice(2)} A`) : date(value).format(outputFormat);
+  };
+
+  /**
+   *
+   * Button Save onClick
+   * @param {Boolean} now
+   */
+  const onSelectTime = (now = false) => {
+    let displayTimeValue = '00:00:00';
+    let returnTimeValue = '00:00:00';
+    if (now) {
+      displayTimeValue = formatTime(null, displayFormat);
+      returnTimeValue = formatTime(null, returnFormat);
+      setTimeValue({
+        hour: displayTimeValue.slice(0, 2).includes(':') ? displayTimeValue.slice(0, 1) : displayTimeValue.slice(0, 2),
+        minute: displayTimeValue.slice(0, 2).includes(':') ? displayTimeValue.slice(2, 4) : displayTimeValue.slice(3, 5),
+        second: displayTimeValue.slice(0, 2).includes(':') ? displayTimeValue.slice(5, 7) : displayTimeValue.slice(6, 8),
+        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 : ''}`;
+    }
+    if (!now) {
+      setDisplayTime(displayTimeValue);
+      const e = {
+        value: returnTimeValue
+      };
+      !!onChange && onChange(e);
+      onCloseTimePicker();
+    }
+  };
+
+  // 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'
+      });
+      setDisplayTime(null);
+    } else {
+      let displayTimeValue = '00:00:00';
+      const valueHour = Number(value.slice(0, 2)) || '00';
+      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)
+      });
+      setDisplayTime(displayTimeValue);
+    }
+  }, [value, displayFormat, returnFormat, mode12h, min, max]);
+
+  // useEffect for prop min/max
+  useEffect(() => {
+    setMinValue(min);
+    setMaxValue(max);
+  }, [min, max]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const IconComp = jsx(ButtonIcon, {
+    disabled: disabled || readOnly,
+    viewType: 'ghost',
+    viewBox: true,
+    name: 'clock'
+  });
+  const endIcon = actionIconAt === 'end' ? IconComp : null;
+  const startIcon = actionIconAt === 'start' ? IconComp : null;
+  return jsx("div", {
+    ref: ref,
+    css: positionRelative,
+    style: style,
+    className: classNames('DGN-UI-TimePicker-Root', className, disabled && 'disabled'),
+    ...other
+  }, label && jsx(Label, {
+    disabled: disabled,
+    required: required,
+    ...labelProps
+  }, label), jsx(Popover, {
+    css: _TimePickerCSS,
+    anchor: 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
+    }),
+    ref: timePickerRef,
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    }
+  }, jsx("div", {
+    className: "DGN-UI-TimePicker"
+  }, jsx("div", {
+    className: "DGN-UI-TimePicker-Body",
+    css: _TimePickerBodyCSS
+  }, jsx("div", {
+    className: "DGN-UI-TimePicker-Input",
+    css: TimePickerInputCSS
+  }, currentInputFocus === 1 && jsx(ButtonIcon, {
+    viewType: "ghost",
+    name: "ArrowUp",
+    onClick: onIncreaseHour
+  }), jsx(NumberInput, {
+    delayOnChange: 0,
+    onFocus: () => setCurrentInputFocus(1),
+    viewType: "outlined",
+    placeholder: "",
+    value: currentHour,
+    onChange: e => onChangeHandler(e, 'hour'),
+    onKeyDown: e => onChangeHandler(e, 'hour'),
+    min: startHour,
+    max: lastHour,
+    disabledNegative: true
+  }), currentInputFocus === 1 && jsx(ButtonIcon, {
+    viewType: "ghost",
+    name: "ArrowDown",
+    onClick: onDecreaseHour
+  })), jsx(Typography, {
+    type: "title1"
+  }, ":"), jsx("div", {
+    className: "DGN-UI-TimePicker-Input",
+    css: TimePickerInputCSS
+  }, currentInputFocus === 2 && jsx(ButtonIcon, {
+    viewType: "ghost",
+    name: "ArrowUp",
+    onClick: onIncreaseMinute
+  }), jsx(NumberInput, {
+    delayOnChange: 0,
+    onFocus: () => setCurrentInputFocus(2),
+    viewType: "outlined",
+    placeholder: "",
+    value: currentMinute || 0,
+    onChange: e => onChangeHandler(e, 'minute'),
+    onKeyDown: e => onChangeHandler(e, 'minute'),
+    min: startMinute,
+    max: lastMinute,
+    disabledNegative: true
+  }), currentInputFocus === 2 && jsx(ButtonIcon, {
+    viewType: "ghost",
+    name: "ArrowDown",
+    onClick: onDecreaseMinute
+  })), displayFormat === 'HH:mm:ss' && jsx(React.Fragment, null, jsx(Typography, {
+    type: "title1"
+  }, ":"), jsx("div", {
+    className: "DGN-UI-TimePicker-Input",
+    css: TimePickerInputCSS
+  }, currentInputFocus === 3 && jsx(ButtonIcon, {
+    viewType: "ghost",
+    name: "ArrowUp",
+    onClick: onIncreaseSecond
+  }), jsx(NumberInput, {
+    delayOnChange: 0,
+    onFocus: () => setCurrentInputFocus(3),
+    viewType: "outlined",
+    placeholder: "",
+    value: currentSecond || 0,
+    onChange: e => onChangeHandler(e, 'second'),
+    onKeyDown: e => onChangeHandler(e, 'second'),
+    min: startSecond,
+    max: lastSecond,
+    disabledNegative: true
+  }), currentInputFocus === 3 && jsx(ButtonIcon, {
+    viewType: "ghost",
+    name: "ArrowDown",
+    onClick: onDecreaseSecond
+  }))), mode12h && jsx("div", {
+    className: "TimePicker-AM/PM",
+    css: _TimePickerAMPMCSS
+  }, jsx(Button, {
+    onClick: () => setTimeValue({
+      ...timeValue,
+      text: 'AM'
+    }),
+    label: "AM",
+    labelProps: {
+      type: 'heading4'
+    }
+  }), jsx(Button, {
+    onClick: () => setTimeValue({
+      ...timeValue,
+      text: 'PM'
+    }),
+    label: "PM",
+    labelProps: {
+      type: 'heading4'
+    }
+  }))), jsx(Divider, null), jsx("div", {
+    className: "DGN-UI-TimePicker-Footer",
+    css: _TimePickerFooterCSS
+  }, jsx(Button, {
+    viewType: "link",
+    size: "medium",
+    label: nowText,
+    onClick: () => onSelectTime(true),
+    labelProps: {
+      format: ['sentence']
+    },
+    color: "system/rest"
+  }), jsx(Button, {
+    viewType: "link",
+    size: "medium",
+    label: saveText,
+    onClick: () => onSelectTime(false),
+    labelProps: {
+      format: ['sentence']
+    },
+    color: "info"
+  })))), isError && jsx(HelperText, {
+    ...errorProps,
+    style: {
+      minHeight: 16,
+      position: 'absolute',
+      top: '100%'
+    },
+    disabled: disabled
+  }, error));
+}));
+const TimePickerCSS = ({
+  spacing
+}) => css`
+    margin-top: ${spacing([1])};
+`;
+const TimePickerBodyCSS = (currentInputFocus, {
+  colors,
+  spacing,
+  typography
+}) => css`
+    ${typography.body1};
+    margin: ${spacing([2, 4])};
+    ${displayFlex};
+    ${justifyCenter};
+    ${itemsCenter};
+    ${parseMinHeight(88)};
+    .DGN-UI-NumberInput {
+        margin: ${spacing([0])};
+        .DGN-UI-InputBase {
+            ${parseHeight(40)};
+            ${parseWidth(48)};
+            margin: ${spacing([0])};
+            padding: ${spacing([0])};
+            ${bgColor(hexToRGBA(getProp(colors, 'system/active'), 0.1))}
+            ${borderNone};
+            ${borderColor(getProp(colors, 'semantic/info'))};
+            input {
+                ${parseWidthHeight('100%')};
+                ${textCenter};
+                ${typography.body1};
+                &:hover,
+                &:focus {
+                    ${bgColor(hexToRGBA(getProp(colors, 'semantic/info'), 0.2))};
+                    ${textColor(getProp(colors, 'semantic/info'))};
+                }
+            }
+        }
+    }
+    .DGN-UI-TimePicker-Input:nth-of-type(${currentInputFocus}) {
+        .DGN-UI-NumberInput {
+            .DGN-UI-InputBase {
+                ${border(2)};
+                ${borderColor(getProp(colors, 'semantic/info'))};
+                input {
+                    ${borderRadius4px};
+                    ${bgColor(hexToRGBA(getProp(colors, 'semantic/info'), 0.2))};
+                    ${textColor(getProp(colors, 'semantic/info'))};
+                }
+            }
+        }
+    }
+    .DGN-UI-Typography {
+        padding: ${spacing([0, 0.5])};
+    }
+`;
+const TimePickerInputCSS = css`
+    ${flexCol};
+    ${itemsCenter};
+`;
+const TimePickerFooterCSS = ({
+  spacing
+}) => css`
+    ${displayFlex};
+    ${justifyBetween};
+    ${itemsCenter};
+    .DGN-UI-Button {
+        padding: ${spacing([2, 4])};
+    }
+`;
+const TimePickerAMPMCSS = (currentText, {
+  colors,
+  spacing
+}) => css`
+    ${flexCol};
+    ${parseHeight(40)};
+    ${justifyBetween};
+    margin-left: ${spacing([2])};
+    button:nth-of-type(${currentText === 'AM' ? 1 : 2}) {
+        ${bgColor(hexToRGBA(getProp(colors, 'semantic/info'), 0.2))};
+        ${textColor(getProp(colors, 'semantic/info'))};
+    }
+    button {
+        &:hover,
+        &:focus {
+            ${bgColor(hexToRGBA(getProp(colors, 'semantic/info'), 0.2))};
+            ${textColor(getProp(colors, 'semantic/info'))};
+        }
+        padding: ${spacing([0])};
+        ${parseHeight(18)};
+        ${parseMinHeight(18)};
+        ${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]),
+  /** If `true`, the form control will be disabled. */
+  disabled: PropTypes.bool,
+  /** Format to display value. */
+  displayFormat: PropTypes.oneOfType([PropTypes.oneOf(['HH:mm', 'HH:mm:ss']), PropTypes.string]),
+  /** The default value of the component. */
+  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+  /** Error of the form control. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+  errorProps: PropTypes.object,
+  /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
+  inputProps: PropTypes.object,
+  /** Inline style of the input element. */
+  inputStyle: PropTypes.object,
+  /** Hints for the input. */
+  placeholder: PropTypes.string,
+  /** Components style mode */
+  mode12h: PropTypes.bool,
+  /** Minimum value of the time picker. */
+  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+  /** Maximum value of the time picker. */
+  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+  /** Step of the minute. */
+  minuteStep: PropTypes.number,
+  /** Content of the label element. */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+  labelProps: PropTypes.object,
+  /** A callback function when the value input changes. */
+  onChange: PropTypes.func,
+  /** Inline style of the component. */
+  style: PropTypes.object,
+  /** The value of the input element, required for a controlled component. */
+  value: PropTypes.oneOfType([PropTypes.string]),
+  /** View type of the form control. */
+  viewType: PropTypes.oneOf(['outlined', 'underlined']),
+  /** If `true`, the component is readonly. */
+  readOnly: PropTypes.bool,
+  /** If `true`, the input element is required. */
+  required: PropTypes.bool,
+  /** Format to display value. */
+  returnFormat: PropTypes.oneOfType([PropTypes.oneOf(['HH:mm', 'HH:mm:ss']), PropTypes.string])
+};
+export default TimePicker;