1 | "use strict";
|
2 | var __extends = (this && this.__extends) || (function () {
|
3 | var extendStatics = function (d, b) {
|
4 | extendStatics = Object.setPrototypeOf ||
|
5 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
6 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
7 | return extendStatics(d, b);
|
8 | };
|
9 | return function (d, b) {
|
10 | extendStatics(d, b);
|
11 | function __() { this.constructor = d; }
|
12 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
13 | };
|
14 | })();
|
15 | var __importDefault = (this && this.__importDefault) || function (mod) {
|
16 | return (mod && mod.__esModule) ? mod : { "default": mod };
|
17 | };
|
18 | var __importStar = (this && this.__importStar) || function (mod) {
|
19 | if (mod && mod.__esModule) return mod;
|
20 | var result = {};
|
21 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
22 | result["default"] = mod;
|
23 | return result;
|
24 | };
|
25 | Object.defineProperty(exports, "__esModule", { value: true });
|
26 | var withStyles_1 = __importDefault(require("@material-ui/core/styles/withStyles"));
|
27 | var clsx_1 = __importDefault(require("clsx"));
|
28 | var PropTypes = __importStar(require("prop-types"));
|
29 | var React = __importStar(require("react"));
|
30 | var createStyles_1 = __importDefault(require("@material-ui/core/styles/createStyles"));
|
31 | var time_utils_1 = require("../_helpers/time-utils");
|
32 | var PickerToolbar_1 = __importDefault(require("../_shared/PickerToolbar"));
|
33 | var ToolbarButton_1 = __importDefault(require("../_shared/ToolbarButton"));
|
34 | var WithUtils_1 = require("../_shared/WithUtils");
|
35 | var ClockType_1 = __importDefault(require("../constants/ClockType"));
|
36 | var TimePickerView_1 = __importDefault(require("./components/TimePickerView"));
|
37 | var TimePicker = (function (_super) {
|
38 | __extends(TimePicker, _super);
|
39 | function TimePicker() {
|
40 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
41 | _this.state = {
|
42 | openView: ClockType_1.default.HOURS,
|
43 | meridiemMode: _this.props.utils.getHours(_this.props.date) >= 12 ? 'pm' : 'am',
|
44 | };
|
45 | _this.setMeridiemMode = function (mode) { return function () {
|
46 | _this.setState({ meridiemMode: mode }, function () {
|
47 | return _this.handleChange({
|
48 | time: _this.props.date,
|
49 | isFinish: false,
|
50 | openMinutes: false,
|
51 | openSeconds: false,
|
52 | });
|
53 | });
|
54 | }; };
|
55 | _this.handleChange = function (_a) {
|
56 | var time = _a.time, isFinish = _a.isFinish, openMinutes = _a.openMinutes, openSeconds = _a.openSeconds;
|
57 | var withMeridiem = time_utils_1.convertToMeridiem(time, _this.state.meridiemMode, Boolean(_this.props.ampm), _this.props.utils);
|
58 | if (isFinish) {
|
59 | if (!openMinutes && !openSeconds) {
|
60 | _this.props.onChange(withMeridiem, isFinish);
|
61 | return;
|
62 | }
|
63 | if (openMinutes) {
|
64 | _this.openMinutesView();
|
65 | }
|
66 | if (openSeconds) {
|
67 | _this.openSecondsView();
|
68 | }
|
69 | }
|
70 | _this.props.onChange(withMeridiem, false);
|
71 | };
|
72 | _this.handleHourChange = function (time, isFinish) {
|
73 | _this.handleChange({
|
74 | time: time,
|
75 | isFinish: isFinish,
|
76 | openMinutes: true,
|
77 | openSeconds: false,
|
78 | });
|
79 | };
|
80 | _this.handleMinutesChange = function (time, isFinish) {
|
81 | _this.handleChange({
|
82 | time: time,
|
83 | isFinish: isFinish,
|
84 | openMinutes: false,
|
85 | openSeconds: Boolean(_this.props.seconds),
|
86 | });
|
87 | };
|
88 | _this.handleSecondsChange = function (time, isFinish) {
|
89 | _this.handleChange({
|
90 | time: time,
|
91 | isFinish: isFinish,
|
92 | openMinutes: false,
|
93 | openSeconds: false,
|
94 | });
|
95 | };
|
96 | _this.openSecondsView = function () {
|
97 | _this.setState({ openView: ClockType_1.default.SECONDS });
|
98 | };
|
99 | _this.openMinutesView = function () {
|
100 | _this.setState({ openView: ClockType_1.default.MINUTES });
|
101 | };
|
102 | _this.openHourView = function () {
|
103 | _this.setState({ openView: ClockType_1.default.HOURS });
|
104 | };
|
105 | return _this;
|
106 | }
|
107 | TimePicker.prototype.render = function () {
|
108 | var _a;
|
109 | var _b = this.props, classes = _b.classes, theme = _b.theme, date = _b.date, utils = _b.utils, ampm = _b.ampm, seconds = _b.seconds, minutesStep = _b.minutesStep;
|
110 | var _c = this.state, meridiemMode = _c.meridiemMode, openView = _c.openView;
|
111 | var rtl = theme.direction === 'rtl';
|
112 | var hourMinuteClassName = rtl ? classes.hourMinuteLabelReverse : classes.hourMinuteLabel;
|
113 | return (React.createElement(React.Fragment, null,
|
114 | React.createElement(PickerToolbar_1.default, { className: clsx_1.default(classes.toolbar, (_a = {},
|
115 | _a[classes.toolbarLeftPadding] = ampm,
|
116 | _a)) },
|
117 | React.createElement("div", { className: hourMinuteClassName },
|
118 | React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: this.openHourView, selected: openView === ClockType_1.default.HOURS, label: utils.getHourText(date, Boolean(ampm)) }),
|
119 | React.createElement(ToolbarButton_1.default, { variant: "h2", label: ":", selected: false, className: classes.separator }),
|
120 | React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: this.openMinutesView, selected: openView === ClockType_1.default.MINUTES, label: utils.getMinuteText(date) }),
|
121 | seconds && (React.createElement(React.Fragment, null,
|
122 | React.createElement(ToolbarButton_1.default, { variant: "h2", label: ":", selected: false, className: classes.separator }),
|
123 | React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: this.openSecondsView, selected: openView === ClockType_1.default.SECONDS, label: utils.getSecondText(date) })))),
|
124 | ampm && (React.createElement("div", { className: seconds ? classes.ampmSelectionWithSeconds : classes.ampmSelection },
|
125 | React.createElement(ToolbarButton_1.default, { className: classes.ampmLabel, selected: meridiemMode === 'am', variant: "subtitle1", label: utils.getMeridiemText('am'), onClick: this.setMeridiemMode('am') }),
|
126 | React.createElement(ToolbarButton_1.default, { className: classes.ampmLabel, selected: meridiemMode === 'pm', variant: "subtitle1", label: utils.getMeridiemText('pm'), onClick: this.setMeridiemMode('pm') })))),
|
127 | this.props.children,
|
128 | React.createElement(TimePickerView_1.default, { date: date, type: this.state.openView, ampm: ampm, minutesStep: minutesStep, onHourChange: this.handleHourChange, onMinutesChange: this.handleMinutesChange, onSecondsChange: this.handleSecondsChange })));
|
129 | };
|
130 | TimePicker.propTypes = {
|
131 | date: PropTypes.object.isRequired,
|
132 | onChange: PropTypes.func.isRequired,
|
133 | utils: PropTypes.object.isRequired,
|
134 | ampm: PropTypes.bool,
|
135 | seconds: PropTypes.bool,
|
136 | minutesStep: PropTypes.number,
|
137 | innerRef: PropTypes.any,
|
138 | };
|
139 | TimePicker.defaultProps = {
|
140 | children: null,
|
141 | ampm: true,
|
142 | seconds: false,
|
143 | minutesStep: 1,
|
144 | };
|
145 | return TimePicker;
|
146 | }(React.Component));
|
147 | exports.TimePicker = TimePicker;
|
148 | exports.styles = function () {
|
149 | return createStyles_1.default({
|
150 | toolbar: {
|
151 | flexDirection: 'row',
|
152 | alignItems: 'center',
|
153 | },
|
154 | toolbarLeftPadding: {
|
155 | paddingLeft: 50,
|
156 | },
|
157 | separator: {
|
158 | margin: '0 4px 0 2px',
|
159 | cursor: 'default',
|
160 | },
|
161 | ampmSelection: {
|
162 | marginLeft: 20,
|
163 | marginRight: -20,
|
164 | },
|
165 | ampmSelectionWithSeconds: {
|
166 | marginLeft: 15,
|
167 | marginRight: 10,
|
168 | },
|
169 | ampmLabel: {
|
170 | fontSize: 18,
|
171 | },
|
172 | hourMinuteLabel: {
|
173 | display: 'flex',
|
174 | justifyContent: 'flex-end',
|
175 | alignItems: 'flex-end',
|
176 | },
|
177 | hourMinuteLabelReverse: {
|
178 | display: 'flex',
|
179 | justifyContent: 'flex-end',
|
180 | alignItems: 'flex-end',
|
181 | flexDirection: 'row-reverse',
|
182 | },
|
183 | });
|
184 | };
|
185 | exports.default = withStyles_1.default(exports.styles, {
|
186 | withTheme: true,
|
187 | name: 'MuiPickersTimePicker',
|
188 | })(WithUtils_1.withUtils()(TimePicker));
|