diginet-core-ui 1.4.20-beta.1 → 1.4.21

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

@@ -1,784 +0,0 @@
-/** @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, useMemo, useRef, useState } from 'react';
-import { bgColor, border, borderColor, borderNone, borderRadius4px, displayFlex, flexCol, itemsCenter, justifyBetween, justifyCenter, parseHeight, parseMinHeight, parseWidth, positionRelative, textCenter, textColor } from "../../../../styles/general";
-import { useTheme } from "../../../../theme";
-import { classNames, date, getProp, hexToRGBA } from "../../../../utils";
-const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  actionIconAt,
-  className,
-  disabled,
-  displayFormat,
-  error,
-  errorProps,
-  id,
-  inputProps,
-  inputStyle,
-  placeholder: placeholderProp,
-  onChange,
-  mode12h,
-  min,
-  max,
-  minuteStep,
-  label,
-  labelProps,
-  style,
-  value,
-  viewType,
-  returnFormat,
-  readOnly,
-  required,
-  ...other
-}, reference) => {
-  const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
-
-  // 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 useMemo(() => {
-    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));
-  }, [actionIconAt, className, currentInputFocus, disabled, displayTime, displayFormat, error, errorProps, id, inputProps, inputStyle, placeholder, onChange, mode12h, minValue, maxValue, label, labelProps, style, minuteStep, timeValue, value, viewType, required, returnFormat, readOnly]);
-}));
-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 {
-                width: 100%;
-                height: 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 = {
-  /** Class for 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,
-  /** Style inline of input element. */
-  inputStyle: PropTypes.object,
-  /** Hints for input. */
-  placeholder: PropTypes.string,
-  /** Components style mode */
-  mode12h: PropTypes.bool,
-  /** Min value of time picker. */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-  /** Max value of time picker. */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
-  /** Step of 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 value input change. */
-  onChange: PropTypes.func,
-  /** Style inline of 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;