material-ui-pickers-fork
Version:
React components, that implements material design pickers for material-ui v1
248 lines (208 loc) • 8.43 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.DateTimePicker = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
var _DateTimePickerView = _interopRequireDefault(require("./DateTimePickerView"));
var _YearSelection = _interopRequireDefault(require("../DatePicker/YearSelection"));
var _Calendar = _interopRequireDefault(require("../DatePicker/Calendar"));
var _TimePickerView = _interopRequireDefault(require("../TimePicker/TimePickerView"));
var _DateTimePickerTabs = _interopRequireDefault(require("./DateTimePickerTabs"));
var _DateTimePickerHeader = _interopRequireDefault(require("./DateTimePickerHeader"));
var _timeUtils = require("../_helpers/time-utils");
var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
var viewType = _interopRequireWildcard(require("../constants/date-picker-view"));
var _WithUtils = _interopRequireDefault(require("../_shared/WithUtils"));
var DateTimePicker =
/*#__PURE__*/
function (_Component) {
(0, _inheritsLoose2.default)(DateTimePicker, _Component);
function DateTimePicker() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
_this.state = {
openView: _this.props.openTo,
meridiemMode: _this.props.utils.getHours(_this.props.date) >= 12 ? 'pm' : 'am'
};
_this.onChange = function (time, isFinish, nextView) {
if (isFinish === void 0) {
isFinish = true;
}
_this.handleChange(time);
if (isFinish && _this.props.autoSubmit) {
_this.handleViewChange(nextView);
}
};
_this.setMeridiemMode = function (mode) {
return function () {
_this.setState({
meridiemMode: mode
}, function () {
return _this.handleChange(_this.props.date, false);
});
};
};
_this.handleViewChange = function (view) {
_this.setState({
openView: view
});
};
_this.handleChange = function (time, isFinish) {
if (isFinish === void 0) {
isFinish = false;
}
var withMeridiem = (0, _timeUtils.convertToMeridiem)(time, _this.state.meridiemMode, _this.props.ampm, _this.props.utils);
_this.props.onChange(withMeridiem, isFinish);
};
_this.handleYearChange = function (date, isFinish) {
_this.onChange(date, isFinish, viewType.DATE);
};
_this.handleDayChange = function (date, isFinish) {
_this.onChange(date, isFinish, viewType.HOUR);
};
_this.handleHourChange = function (time, isFinish) {
_this.onChange(time, isFinish, viewType.MINUTES);
};
return _this;
}
var _proto = DateTimePicker.prototype;
_proto.render = function render() {
var _this$state = this.state,
openView = _this$state.openView,
meridiemMode = _this$state.meridiemMode;
var _this$props = this.props,
date = _this$props.date,
minDate = _this$props.minDate,
maxDate = _this$props.maxDate,
showTabs = _this$props.showTabs,
disablePast = _this$props.disablePast,
disableFuture = _this$props.disableFuture,
leftArrowIcon = _this$props.leftArrowIcon,
rightArrowIcon = _this$props.rightArrowIcon,
dateRangeIcon = _this$props.dateRangeIcon,
timeIcon = _this$props.timeIcon,
renderDay = _this$props.renderDay,
utils = _this$props.utils,
ampm = _this$props.ampm,
shouldDisableDate = _this$props.shouldDisableDate,
animateYearScrolling = _this$props.animateYearScrolling,
classes = _this$props.classes,
allowKeyboardControl = _this$props.allowKeyboardControl,
ViewContainerComponent = _this$props.ViewContainerComponent;
var ViewContainerComponentProps = typeof ViewContainerComponent === 'string' ? {} : {
openView: openView,
onChange: this.onChange
};
return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_DateTimePickerHeader.default, {
date: date,
openView: openView,
meridiemMode: meridiemMode,
setMeridiemMode: this.setMeridiemMode,
onOpenViewChange: this.handleViewChange,
utils: utils,
ampm: ampm
}), showTabs && _react.default.createElement(_DateTimePickerTabs.default, {
view: openView,
onChange: this.handleViewChange,
dateRangeIcon: dateRangeIcon,
timeIcon: timeIcon
}), _react.default.createElement(ViewContainerComponent, (0, _extends2.default)({
className: classes.viewContainer
}, ViewContainerComponentProps), _react.default.createElement(_DateTimePickerView.default, {
selected: openView === viewType.YEAR
}, _react.default.createElement(_YearSelection.default, {
date: date,
minDate: minDate,
maxDate: maxDate,
onChange: this.handleYearChange,
disablePast: disablePast,
disableFuture: disableFuture,
utils: utils,
animateYearScrolling: animateYearScrolling
})), _react.default.createElement(_DateTimePickerView.default, {
selected: openView === viewType.DATE
}, _react.default.createElement(_Calendar.default, {
allowKeyboardControl: allowKeyboardControl,
date: date,
minDate: minDate,
maxDate: maxDate,
onChange: this.handleDayChange,
disablePast: disablePast,
disableFuture: disableFuture,
leftArrowIcon: leftArrowIcon,
rightArrowIcon: rightArrowIcon,
renderDay: renderDay,
shouldDisableDate: shouldDisableDate
})), _react.default.createElement(_DateTimePickerView.default, {
selected: openView === viewType.HOUR || openView === viewType.MINUTES
}, _react.default.createElement(_TimePickerView.default, {
date: date,
type: openView,
onHourChange: this.handleHourChange,
onMinutesChange: this.handleChange,
onSecondsChange: this.handleChange,
ampm: ampm
}))));
};
return DateTimePicker;
}(_react.Component);
exports.DateTimePicker = DateTimePicker;
DateTimePicker.propTypes = {
allowKeyboardControl: _propTypes.default.bool,
ampm: _propTypes.default.bool,
animateYearScrolling: _propTypes.default.bool,
autoSubmit: _propTypes.default.bool,
classes: _propTypes.default.object.isRequired,
date: _propTypes.default.object.isRequired,
dateRangeIcon: _propTypes.default.node,
disableFuture: _propTypes.default.bool,
disablePast: _propTypes.default.bool,
leftArrowIcon: _propTypes.default.node,
maxDate: _propTypes2.default.date.isRequired,
minDate: _propTypes2.default.date.isRequired,
onChange: _propTypes.default.func.isRequired,
openTo: _propTypes.default.oneOf(Object.keys(viewType).map(function (key) {
return viewType[key];
})).isRequired,
renderDay: _propTypes.default.func,
rightArrowIcon: _propTypes.default.node,
shouldDisableDate: _propTypes.default.func,
showTabs: _propTypes.default.bool,
timeIcon: _propTypes.default.node,
utils: _propTypes.default.object.isRequired,
ViewContainerComponent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object])
};
DateTimePicker.defaultProps = {
allowKeyboardControl: false,
ampm: true,
animateYearScrolling: false,
autoSubmit: true,
dateRangeIcon: undefined,
disableFuture: false,
disablePast: false,
leftArrowIcon: undefined,
renderDay: undefined,
rightArrowIcon: undefined,
shouldDisableDate: undefined,
showTabs: true,
timeIcon: undefined,
ViewContainerComponent: 'div'
};
var styles = {
viewContainer: {
minHeight: 300,
position: 'relative'
}
};
var _default = (0, _withStyles.default)(styles)((0, _WithUtils.default)()(DateTimePicker));
exports.default = _default;