diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,809 +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, 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) {
-      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';
-      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 = mode12h ? formatTime(valueTime, displayFormat).slice(0, -3).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`) : formatTime(valueTime, displayFormat).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]);
-
-  // 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), 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: {
-        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.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;