| 1 | "use strict";
|
| 2 | var __importStar = (this && this.__importStar) || function (mod) {
|
| 3 | if (mod && mod.__esModule) return mod;
|
| 4 | var result = {};
|
| 5 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
| 6 | result["default"] = mod;
|
| 7 | return result;
|
| 8 | };
|
| 9 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
| 10 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
| 11 | };
|
| 12 | Object.defineProperty(exports, "__esModule", { value: true });
|
| 13 | var React = __importStar(require("react"));
|
| 14 | var Grid_1 = __importDefault(require("@material-ui/core/Grid"));
|
| 15 | var ToolbarText_1 = __importDefault(require("../_shared/ToolbarText"));
|
| 16 | var PickerToolbar_1 = __importDefault(require("../_shared/PickerToolbar"));
|
| 17 | var ToolbarButton_1 = __importDefault(require("../_shared/ToolbarButton"));
|
| 18 | var DateTimePickerTabs_1 = __importDefault(require("./DateTimePickerTabs"));
|
| 19 | var useUtils_1 = require("../_shared/hooks/useUtils");
|
| 20 | var styles_1 = require("@material-ui/core/styles");
|
| 21 | var TimePickerToolbar_1 = require("../TimePicker/TimePickerToolbar");
|
| 22 | exports.useStyles = styles_1.makeStyles(function (_) { return ({
|
| 23 | toolbar: {
|
| 24 | paddingLeft: 16,
|
| 25 | paddingRight: 16,
|
| 26 | justifyContent: 'space-around',
|
| 27 | },
|
| 28 | separator: {
|
| 29 | margin: '0 4px 0 2px',
|
| 30 | cursor: 'default',
|
| 31 | },
|
| 32 | }); }, { name: 'MuiPickerDTToolbar' });
|
| 33 | exports.DateTimePickerToolbar = function (_a) {
|
| 34 | var date = _a.date, openView = _a.openView, setOpenView = _a.setOpenView, ampm = _a.ampm, hideTabs = _a.hideTabs, dateRangeIcon = _a.dateRangeIcon, timeIcon = _a.timeIcon, onChange = _a.onChange;
|
| 35 | var utils = useUtils_1.useUtils();
|
| 36 | var classes = exports.useStyles();
|
| 37 | var showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
|
| 38 | var _b = TimePickerToolbar_1.useMeridiemMode(date, ampm, onChange), meridiemMode = _b.meridiemMode, handleMeridiemChange = _b.handleMeridiemChange;
|
| 39 | var theme = styles_1.useTheme();
|
| 40 | var rtl = theme.direction === 'rtl';
|
| 41 | return (React.createElement(React.Fragment, null,
|
| 42 | React.createElement(PickerToolbar_1.default, { isLandscape: false, className: classes.toolbar },
|
| 43 | React.createElement(Grid_1.default, { container: true, justify: "center", wrap: "nowrap" },
|
| 44 | React.createElement(Grid_1.default, { item: true, container: true, xs: 5, justify: "flex-start", direction: "column" },
|
| 45 | React.createElement("div", null,
|
| 46 | React.createElement(ToolbarButton_1.default, { variant: "subtitle1", onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.getYearText(date) })),
|
| 47 | React.createElement("div", null,
|
| 48 | React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('date'); }, selected: openView === 'date', label: utils.getDateTimePickerHeaderText(date) }))),
|
| 49 | React.createElement(Grid_1.default, { item: true, container: true, xs: 6, justify: "center", alignItems: "flex-end", direction: rtl ? 'row-reverse' : 'row' },
|
| 50 | React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('hours'); }, selected: openView === 'hours', label: utils.getHourText(date, ampm) }),
|
| 51 | React.createElement(ToolbarText_1.default, { variant: "h3", label: ":", className: classes.separator }),
|
| 52 | React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('minutes'); }, selected: openView === 'minutes', label: utils.getMinuteText(date) })),
|
| 53 | ampm && (React.createElement(Grid_1.default, { item: true, container: true, xs: 1, direction: "column", justify: "flex-end" },
|
| 54 | React.createElement(ToolbarButton_1.default, { variant: "subtitle1", selected: meridiemMode === 'am', label: utils.getMeridiemText('am'), onClick: function () { return handleMeridiemChange('am'); } }),
|
| 55 | React.createElement(ToolbarButton_1.default, { variant: "subtitle1", selected: meridiemMode === 'pm', label: utils.getMeridiemText('pm'), onClick: function () { return handleMeridiemChange('pm'); } }))))),
|
| 56 | showTabs && (React.createElement(DateTimePickerTabs_1.default, { dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, view: openView, onChange: setOpenView }))));
|
| 57 | };
|