@smart-react-components/ui/components/DatePicker/TimePicker/index.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const date_picker_1 = require("../../../constants/date-picker");
const props_1 = require("../../../util/props");
const TimePickerArrowItem_1 = __importDefault(require("./TimePickerArrowItem"));
const TimePickerElement_1 = __importDefault(require("./TimePickerElement"));
const TimePickerInput_1 = __importDefault(require("./TimePickerInput"));
const TimePicker = props => {
    const changeMinute = (e) => {
        const date = new Date(props.value);
        const minutes = Number(e.target.value);
        date.setMinutes(minutes);
        props.setValue(date);
    };
    const changeHour = (e) => {
        const date = new Date(props.value);
        const hours = Number(e.target.value);
        if (props.timeType === date_picker_1.DatePickerTimeType.T12) {
            if (date.getHours() < 12) {
                date.setHours(hours === 12 ? 0 : hours);
            }
            else {
                date.setHours(hours === 12 ? 12 : hours + 12);
            }
        }
        else {
            date.setHours(hours);
        }
        props.setValue(date);
    };
    const changePeriod = (e) => {
        const date = new Date(props.value);
        const period = e.target.value;
        if (period === 'AM' && props.value.getHours() > 12) {
            date.setHours(date.getHours() - 12);
        }
        else if (period === 'PM' && props.value.getHours() < 12) {
            date.setHours(date.getHours() + 12);
        }
        props.setValue(date);
    };
    const decreaseHour = () => {
        const date = new Date(props.value);
        if (date.getHours() === 0) {
            date.setHours(23);
        }
        else {
            date.setHours(date.getHours() - 1);
        }
        props.setValue(date);
    };
    const decreaseMinute = () => {
        const date = new Date(props.value);
        if (date.getMinutes() === 0) {
            date.setMinutes(59);
        }
        else {
            date.setMinutes(date.getMinutes() - 1);
        }
        props.setValue(date);
    };
    const getHours = () => {
        if (props.timeType === date_picker_1.DatePickerTimeType.T12) {
            const hours = props.value.getHours();
            if (hours === 0) {
                return 12;
            }
            else if (hours > 12) {
                return hours - 12;
            }
            return hours;
        }
        return props.value.getHours();
    };
    const getPeriod = () => props.value.getHours() < 12 ? 'AM' : 'PM';
    const increaseHour = () => {
        const date = new Date(props.value);
        if (date.getHours() === 23) {
            date.setHours(1);
        }
        else {
            date.setHours(date.getHours() + 1);
        }
        props.setValue(date);
    };
    const increaseMinute = () => {
        const date = new Date(props.value);
        if (date.getMinutes() === 59) {
            date.setMinutes(0);
        }
        else {
            date.setMinutes(date.getMinutes() + 1);
        }
        props.setValue(date);
    };
    const togglePeriod = () => {
        const date = new Date(props.value);
        if (date.getHours() < 12) {
            date.setHours(date.getHours() + 12);
        }
        else {
            date.setHours(date.getHours() - 12);
        }
        props.setValue(date);
    };
    return (react_1.default.createElement(TimePickerElement_1.default, Object.assign({}, (0, props_1.applyResponsiveStyledProp)(props, 'size', 'datePickerSize', v => v), { isSoft: props.isSoft, palette: props.palette }),
        react_1.default.createElement("div", null,
            react_1.default.createElement(TimePickerArrowItem_1.default, { isUp: true, onClick: decreaseHour }),
            react_1.default.createElement(TimePickerArrowItem_1.default, { isUp: true, onClick: decreaseMinute }),
            props.timeType === date_picker_1.DatePickerTimeType.T12 && (react_1.default.createElement(TimePickerArrowItem_1.default, { isUp: true, onClick: togglePeriod }))),
        react_1.default.createElement("div", null,
            react_1.default.createElement(TimePickerInput_1.default, { onChange: changeHour, onDecrease: decreaseHour, onIncrease: increaseHour, value: String(getHours()) }),
            react_1.default.createElement(TimePickerInput_1.default, { onChange: changeMinute, onDecrease: decreaseMinute, onIncrease: increaseMinute, value: String(props.value.getMinutes()) }),
            props.timeType === date_picker_1.DatePickerTimeType.T12 && (react_1.default.createElement(TimePickerInput_1.default, { onChange: changePeriod, onDecrease: togglePeriod, onIncrease: togglePeriod, value: getPeriod() }))),
        react_1.default.createElement("div", null,
            react_1.default.createElement(TimePickerArrowItem_1.default, { isUp: false, onClick: increaseHour }),
            react_1.default.createElement(TimePickerArrowItem_1.default, { isUp: false, onClick: increaseMinute }),
            props.timeType === date_picker_1.DatePickerTimeType.T12 && (react_1.default.createElement(TimePickerArrowItem_1.default, { isUp: false, onClick: togglePeriod })))));
};
exports.default = TimePicker;