material-ui-pickers-v4/DateTimePicker/DateTimePickerTabs.js

React components, that implements material design pickers for material-ui v4 with updated material ui

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateTimePickerTabs = exports.useStyles = void 0;
var React = __importStar(require("react"));
var core_1 = require("@material-ui/core");
var TimeIcon_1 = require("../_shared/icons/TimeIcon");
var DateRangeIcon_1 = require("../_shared/icons/DateRangeIcon");
var viewToTabIndex = function (openView) {
    if (openView === 'date' || openView === 'year') {
        return 'date';
    }
    return 'time';
};
var tabIndexToView = function (tab) {
    if (tab === 'date') {
        return 'date';
    }
    return 'hours';
};
exports.useStyles = core_1.makeStyles(function (theme) {
    // prettier-ignore
    var tabsBackground = theme.palette.type === 'light'
        ? theme.palette.primary.main
        : theme.palette.background.default;
    return {
        tabs: {
            color: theme.palette.getContrastText(tabsBackground),
            backgroundColor: tabsBackground,
        },
    };
}, { name: 'MuiPickerDTTabs' });
exports.DateTimePickerTabs = function (_a) {
    var view = _a.view, onChange = _a.onChange, dateRangeIcon = _a.dateRangeIcon, timeIcon = _a.timeIcon;
    var classes = exports.useStyles();
    var theme = core_1.useTheme();
    var indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
    var handleChange = function (e, value) {
        if (value !== viewToTabIndex(view)) {
            onChange(tabIndexToView(value));
        }
    };
    return (React.createElement(core_1.Paper, null,
        React.createElement(core_1.Tabs, { variant: "fullWidth", value: viewToTabIndex(view), onChange: handleChange, className: classes.tabs, indicatorColor: indicatorColor },
            React.createElement(core_1.Tab, { value: "date", icon: React.createElement(React.Fragment, null, dateRangeIcon) }),
            React.createElement(core_1.Tab, { value: "time", icon: React.createElement(React.Fragment, null, timeIcon) }))));
};
exports.DateTimePickerTabs.defaultProps = {
    dateRangeIcon: React.createElement(DateRangeIcon_1.DateRangeIcon, null),
    timeIcon: React.createElement(TimeIcon_1.TimeIcon, null),
};
exports.default = exports.DateTimePickerTabs;