diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,785 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import {
+    Button,
+    ButtonIcon,
+    Divider,
+    HelperText,
+    InputBase,
+    Label,
+    NumberInput,
+    Popover,
+    Typography,
+} from 'components';
+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 = memo(
+    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 ?? 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?.text, theme);
+        const _TimePickerCSS = TimePickerCSS(theme);
+        const _TimePickerFooterCSS = TimePickerFooterCSS(theme);
+
+        // variables
+        const isError = !!error && !value;
+        const currentHour = Number(timeValue?.hour);
+        const currentMinute = Number(timeValue?.minute);
+        const currentSecond = Number(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) => {
+            if (!e) return;
+            value = +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?.text}` : ''}`;
+                returnTimeValue = `${date(currentTime).format(returnFormat)}${mode12h ? ` ${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 = <ButtonIcon disabled={disabled || readOnly} viewType={'ghost'} viewBox name={'clock'} />;
+
+        const endIcon = actionIconAt === 'end' ? IconComp : null;
+        const startIcon = actionIconAt === 'start' ? IconComp : null;
+
+        return (
+            <div
+                ref={ref}
+                css={positionRelative}
+                style={style}
+                className={classNames('DGN-UI-TimePicker-Root', className, disabled && 'disabled')}
+                {...other}
+            >
+                {label && (
+                    <Label disabled={disabled} required={required} {...labelProps}>
+                        {label}
+                    </Label>
+                )}
+                {readOnly ? (
+                    <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
+                    />
+                ) : (
+                    <Popover
+                        css={_TimePickerCSS}
+                        anchor={
+                            <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
+                            />
+                        }
+                        ref={timePickerRef}
+                        transformOrigin={{
+                            vertical: 'top',
+                            horizontal: 'left',
+                        }}
+                        anchorOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        }}
+                    >
+                        <div className="DGN-UI-TimePicker">
+                            <div className="DGN-UI-TimePicker-Body" css={_TimePickerBodyCSS}>
+                                {/* hours */}
+                                <div className="DGN-UI-TimePicker-Input" css={TimePickerInputCSS}>
+                                    {currentInputFocus === 1 && (
+                                        <ButtonIcon viewType="ghost" name="ArrowUp" onClick={onIncreaseHour} />
+                                    )}
+                                    <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
+                                    />
+                                    {currentInputFocus === 1 && (
+                                        <ButtonIcon viewType="ghost" name="ArrowDown" onClick={onDecreaseHour} />
+                                    )}
+                                </div>
+                                {/* minutes */}
+                                <Typography type="title1">:</Typography>
+                                <div className="DGN-UI-TimePicker-Input" css={TimePickerInputCSS}>
+                                    {currentInputFocus === 2 && (
+                                        <ButtonIcon viewType="ghost" name="ArrowUp" onClick={onIncreaseMinute} />
+                                    )}
+                                    <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
+                                    />
+                                    {currentInputFocus === 2 && (
+                                        <ButtonIcon viewType="ghost" name="ArrowDown" onClick={onDecreaseMinute} />
+                                    )}
+                                </div>
+                                {/* seconds */}
+                                {displayFormat === 'HH:mm:ss' && (
+                                    <React.Fragment>
+                                        <Typography type="title1">:</Typography>
+                                        <div className="DGN-UI-TimePicker-Input" css={TimePickerInputCSS}>
+                                            {currentInputFocus === 3 && (
+                                                <ButtonIcon
+                                                    viewType="ghost"
+                                                    name="ArrowUp"
+                                                    onClick={onIncreaseSecond}
+                                                />
+                                            )}
+                                            <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
+                                            />
+                                            {currentInputFocus === 3 && (
+                                                <ButtonIcon
+                                                    viewType="ghost"
+                                                    name="ArrowDown"
+                                                    onClick={onDecreaseSecond}
+                                                />
+                                            )}
+                                        </div>
+                                    </React.Fragment>
+                                )}
+                                {mode12h && (
+                                    <div className="TimePicker-AM/PM" css={_TimePickerAMPMCSS}>
+                                        <Button
+                                            onClick={() => setTimeValue({ ...timeValue, text: 'AM' })}
+                                            label="AM"
+                                            labelProps={{ type: 'heading4' }}
+                                        />
+                                        <Button
+                                            onClick={() => setTimeValue({ ...timeValue, text: 'PM' })}
+                                            label="PM"
+                                            labelProps={{ type: 'heading4' }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                            <Divider />
+                            <div className="DGN-UI-TimePicker-Footer" css={_TimePickerFooterCSS}>
+                                <Button
+                                    viewType="link"
+                                    size="medium"
+                                    label={nowText}
+                                    onClick={() => onSelectTime(true)}
+                                    labelProps={{ format: ['sentence'] }}
+                                    color="system/rest"
+                                />
+                                <Button
+                                    viewType="link"
+                                    size="medium"
+                                    label={saveText}
+                                    onClick={() => onSelectTime(false)}
+                                    labelProps={{ format: ['sentence'] }}
+                                    color="info"
+                                />
+                            </div>
+                        </div>
+                    </Popover>
+                )}
+                {isError && (
+                    <HelperText
+                        {...errorProps}
+                        style={{ minHeight: 16, position: 'absolute', top: '100%' }}
+                        disabled={disabled}
+                    >
+                        {error}
+                    </HelperText>
+                )}
+            </div>
+        );
+    })
+);
+
+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;