joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
513 lines (468 loc) • 34.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _styles = require('@material-ui/core/styles');
var _moment = require('@date-io/moment');
var _moment2 = _interopRequireDefault(_moment);
var _moment3 = require('moment');
var _moment4 = _interopRequireDefault(_moment3);
var _dateFns = require('@date-io/date-fns');
var _dateFns2 = _interopRequireDefault(_dateFns);
var _MuiPickersUtilsProvider = require('material-ui-pickers/MuiPickersUtilsProvider');
var _MuiPickersUtilsProvider2 = _interopRequireDefault(_MuiPickersUtilsProvider);
var _DatePicker = require('material-ui-pickers/DatePicker');
var _customTime = require('joywok-material-components/lib/datepicker/customTime');
var _customTime2 = _interopRequireDefault(_customTime);
var _Popper = require('@material-ui/core/Popper');
var _Popper2 = _interopRequireDefault(_Popper);
var _Fade = require('@material-ui/core/Fade');
var _Fade2 = _interopRequireDefault(_Fade);
var _Paper = require('@material-ui/core/Paper');
var _Paper2 = _interopRequireDefault(_Paper);
var _ClickAwayListener = require('@material-ui/core/ClickAwayListener');
var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
var _customInput = require('../input/customInput');
var _customInput2 = _interopRequireDefault(_customInput);
var _normal = require('../select/normal');
var _normal2 = _interopRequireDefault(_normal);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
*
* @api {} 组合组件
* @apiName 日期时间组件
* @apiGroup 日期时间组件
*
* @apiParam {String } className 类名
* @apiParam {String } value 选中的时间（时间戳）
* @apiParam {String } placeholder Placeholder
* @apiParam {Array } format 日期显示格式化
* @apiParam {Function } onChange 数据变化的回调事件（时间戳）
* @apiParam {object } minDate 可选择的最小日期
* @apiParam {object } maxDate 可选择的最大日期
*
* @apiSuccessExample {json} 使用案例:
* import JwDateTimepicker from 'joywok-material-components/lib/datepicker/dataTime';
* <JwDateTimepicker
value={'1581058148'}
className={"date-time"}
format={cur_lang == 'en' ? "MM/dd/yyyy" : "yyyy年MM月DD日"}
minDate={new Date()}
maxDate={new Date('2100-01-01')}
placeholder="开始时间"
onChange={(e)=>{console.log(e)}}/>
*
*
*/
var curLang = window.language || window.cur_lang || 'zh-cn';
if (curLang == 'zh-cn') {
_moment4.default.locale('zh-cn', {
months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
weekdaysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
weekdaysMin: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
});
} else {
_moment4.default.locale('en', {
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
weekdaysMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
});
}
require('./style/dateTime.css');
var datePickerTheme = (0, _styles.createMuiTheme)({
overrides: {
MuiPickersDay: {
day: {
color: '#494949'
},
isSelected: {
backgroundColor: '#404A53',
color: '#FAFAFA',
'&:hover': {
backgroundColor: '#404A53'
}
},
isDisabled: {
color: '#999999'
},
current: {
color: '#494949',
backgroundColor: '#E7E7E7',
fontWeight: '400'
}
}
}
});
var JwDateTimepicker = function (_React$Component) {
_inherits(JwDateTimepicker, _React$Component);
function JwDateTimepicker(props) {
_classCallCheck(this, JwDateTimepicker);
var _this = _possibleConstructorReturn(this, (JwDateTimepicker.__proto__ || Object.getPrototypeOf(JwDateTimepicker)).call(this, props));
_this.state = {
data: _extends({}, props),
timeData: {
open: false,
hour: props.value ? new Date(props.value * 1000).getHours() : null,
minute: props.value ? new Date(props.value * 1000).getMinutes() : null,
anchorEl: null
}
};
_this.state.data.value = props.value ? new Date(props.value * 1000) : null;
return _this;
}
_createClass(JwDateTimepicker, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps) {
if (JSON.parse(JSON.stringify(this.state.data)) !== JSON.parse(JSON.stringify(newProps))) {
var newData = _extends({}, newProps);
var newTimeData = _extends({}, this.state.timeData);
newTimeData.hour = newProps.value ? new Date(newProps.value * 1000).getHours() : null;
newTimeData.minute = newProps.value ? new Date(newProps.value * 1000).getMinutes() : null;
newData.value = newProps.value ? new Date(newProps.value * 1000) : null;
if (newProps.inputKey == 'dateRangeEnd') {
if (newProps.value !== this.props.value && newProps.value == null || newProps.value == null && this.state.data.value !== null && this.state.timeData.hour !== null && this.state.timeData.minute !== null) {
newTimeData.hour = null;
newTimeData.minute = null;
}
}
this.setState({
data: newData,
timeData: newTimeData
});
}
}
}, {
key: 'onChange',
value: function onChange(e) {
var self = this;
var timeData = _extends({}, this.state.timeData);
var data = _extends({}, this.state.data);
var date = new Date(new Date(e).toLocaleDateString());
if (this.props.inputKey == 'dateRangeEnd' && this.props.minDate && this.props.minDate.getTime() / 1000 - (this.props.minDate.getTime() / 1000 + 8 * 3600) % 86400 >= Date.parse(date) / 1000 - (Date.parse(date) / 1000 + 8 * 3600) % 86400) {
if (this.props.minDate.getTime() > Date.parse(date)) {
date = this.props.minDate;
}
}
data.value = date;
if (timeData.minute == null && timeData.hour == null && !timeData.open || this.props.minDate && this.props.minDate.getTime() / 1000 >= Date.parse(data.value) / 1000) {
timeData.open = true;
var className = '.time-input-item';
if (this.props.inputKey) {
className = '.time-input-item-' + this.props.inputKey;
}
timeData.anchorEl = $(className)[0];
if (data.value.getHours() > 0) {
timeData.hour = data.value.getHours();
}
if (data.value.getMinutes() > 0) {
timeData.minute = data.value.getMinutes();
}
if (this.props.minDate && this.props.minDate.getTime() / 1000 - (this.props.minDate.getTime() / 1000 + 8 * 3600) % 86400 >= Date.parse(data.value) / 1000 - (Date.parse(data.value) / 1000 + 8 * 3600) % 86400) {
timeData.hour = this.props.minDate.getHours();
timeData.minute = this.props.minDate.getMinutes();
if (this.props.inputKey == 'startDateLimit' || this.props.inputKey == 'endDateLimit') {
if (timeData.minute <= 15) {
timeData.minute = 15;
} else if (timeData.minute <= 30) {
timeData.minute = 30;
} else if (timeData.minute <= 45) {
timeData.minute = 45;
} else {
timeData.minute = 0;
timeData.hour = timeData.hour + 1;
}
}
}
this.setState({
timeData: timeData,
data: data
}, function () {
self.TimeChange();
});
} else {
this.setState({
data: data
}, function () {
self.TimeChange();
});
}
}
}, {
key: 'onFocus',
value: function onFocus(event) {
var self = this;
var data = _extends({}, this.state.data);
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
var timeData = _extends({}, this.state.timeData);
timeData.anchorEl = event.currentTarget;
timeData.open = true;
if (data.value == null) {
if (data.minDate) {
data.value = data.minDate;
} else {
data.value = new Date();
}
}
if (this.props.minDate && this.props.minDate.getTime() / 1000 >= Date.parse(data.value) / 1000) {
if (this.props.minDate.getTime() / 1000 - (this.props.minDate.getTime() / 1000 + 8 * 3600) % 86400 >= Date.parse(data.value) / 1000 - (Date.parse(data.value) / 1000 + 8 * 3600) % 86400) {
timeData.hour = this.props.minDate.getHours();
timeData.minute = this.props.minDate.getMinutes();
if (this.props.inputKey == 'startDateLimit' || this.props.inputKey == 'endDateLimit') {
if (timeData.minute <= 15) {
timeData.minute = 15;
} else if (timeData.minute <= 30) {
timeData.minute = 30;
} else if (timeData.minute <= 45) {
timeData.minute = 45;
} else {
timeData.minute = 0;
timeData.hour = timeData.hour + 1;
}
}
}
}
this.setState({
timeData: timeData,
data: data
}, function () {
self.TimeChange();
});
}
}, {
key: 'choseHour',
value: function choseHour(e, data) {
var self = this;
var timeData = _extends({}, this.state.timeData);
timeData.hour = data;
this.setState({
timeData: timeData
}, function () {
self.TimeChange();
});
}
}, {
key: 'choseMinute',
value: function choseMinute(e, data) {
var self = this;
var newData = _extends({}, this.state.data);
var timeData = _extends({}, this.state.timeData);
timeData.minute = data;
timeData.open = false;
if (!timeData.hour || timeData.hour == null) {
if (self.props.minDate && self.props.minDate.getTime() / 1000 - (self.props.minDate.getTime() / 1000 + 8 * 3600) % 86400 >= newData.value / 1000 - (newData.value / 1000 + 8 * 3600) % 86400) {
timeData.hour = self.props.minDate.getHours();
if (self.props.inputKey == 'startDateLimit' || self.props.inputKey == 'endDateLimit') {
if (timeData.minute <= 15) {} else if (timeData.minute <= 30) {} else if (timeData.minute <= 45) {} else {
timeData.hour = timeData.hour + 1;
}
}
}
}
this.setState({
timeData: timeData
}, function () {
self.TimeChange();
});
}
}, {
key: 'TimeChange',
value: function TimeChange() {
var self = this;
setTimeout(function () {
var newDate = Date.parse(self.state.data.value) / 1000;
newDate = newDate - (newDate + 8 * 3600) % 86400;
var value = 0;
if (self.state.timeData.hour && self.state.timeData.hour !== "") {
value = self.state.timeData.hour * 3600;
if (self.state.timeData.minute && self.state.timeData.minute !== "") {
value = value + self.state.timeData.minute * 60;
}
} else {
if (self.state.timeData.minute && self.state.timeData.minute !== "") {
value = self.state.timeData.minute * 60;
}
}
self.props.onChange(newDate + value);
}, 0);
}
}, {
key: 'onClickAway',
value: function onClickAway() {
var self = this;
setTimeout(function () {
var timeData = _extends({}, self.state.timeData);
var data = _extends({}, self.state.data);
if (timeData.open) {
timeData.open = false;
if (!timeData.minute || timeData.minute == null) {
timeData.minute = 0;
}
if (!timeData.hour || timeData.hour == null) {
timeData.hour = 0;
}
if (timeData.minute == 0 && timeData.hour == 0) {
if (self.props.minDate && self.props.minDate.getTime() / 1000 - (self.props.minDate.getTime() / 1000 + 8 * 3600) % 86400 >= data.value / 1000 - (data.value / 1000 + 8 * 3600) % 86400) {
timeData.hour = self.props.minDate.getHours();
timeData.minute = self.props.minDate.getMinutes();
if (self.props.inputKey == 'startDateLimit' || self.props.inputKey == 'endDateLimit') {
if (timeData.minute <= 15) {
timeData.minute = 15;
} else if (timeData.minute <= 30) {
timeData.minute = 30;
} else if (timeData.minute <= 45) {
timeData.minute = 45;
} else {
timeData.minute = 0;
timeData.hour = timeData.hour + 1;
}
}
}
}
self.setState({
timeData: timeData
}, function () {
self.TimeChange();
});
}
}, 0);
}
}, {
key: 'render',
value: function render() {
var self = this;
var data = this.state.data;
var _state$timeData = this.state.timeData,
anchorEl = _state$timeData.anchorEl,
open = _state$timeData.open,
hour = _state$timeData.hour,
minute = _state$timeData.minute;
var pickerIcon = this.props.pickerIcon !== undefined ? this.props.pickerIcon : true;
var minHour = 0;
var minMinute = 0;
var maxHour = 23;
var maxMinute = 59;
if (this.props.minDate && this.props.minDate.getTime() / 1000 - (this.props.minDate.getTime() / 1000 + 8 * 3600) % 86400 >= data.value / 1000 - (data.value / 1000 + 8 * 3600) % 86400) {
minHour = this.props.minDate.getHours();
minMinute = this.props.minDate.getMinutes();
}
if (this.props.maxDate && this.props.maxDate.getTime() / 1000 - (this.props.maxDate.getTime() / 1000 + 8 * 3600) % 86400 <= data.value / 1000 - (data.value / 1000 + 8 * 3600) % 86400) {
maxHour = this.props.maxDate.getHours();
maxMinute = this.props.maxDate.getMinutes();
}
return _react2.default.createElement(
'div',
{ className: (this.props.className ? this.props.className : "") + " jw-custom-dataTimePicker" },
_react2.default.createElement(
_styles.MuiThemeProvider,
{ theme: datePickerTheme },
_react2.default.createElement(
_MuiPickersUtilsProvider2.default,
{ utils: _moment2.default, moment: _moment4.default },
_react2.default.createElement(_DatePicker.InlineDatePicker, _extends({}, data, {
onlyCalendar: true,
onChange: function onChange(e) {
return self.onChange(e);
},
className: "jw-custom-date"
}))
)
),
_react2.default.createElement(
'div',
{ className: 'custom-time' },
_react2.default.createElement(
'div',
{ className: 'custom-time-c' },
_react2.default.createElement(
'div',
{ className: 'custom-time-input' },
_react2.default.createElement(_customInput2.default, {
className: self.props.inputKey ? "time-input-item-" + self.props.inputKey : "time-input-item",
disabled: true,
value: hour == null && minute == null ? "" : (hour == null ? "" : hour < 10 ? '0' + hour : hour) + ":" + (minute == null ? "" : minute < 10 ? '0' + minute : minute),
onClick: function onClick(e) {
return self.onFocus(e);
}
})
),
_react2.default.createElement(
'div',
{ className: 'custom-time-popover' },
_react2.default.createElement(
_Popper2.default,
{
id: 'custom-time-popper',
open: self.props.disabled ? false : open,
placement: 'bottom-start',
anchorEl: anchorEl,
className: 'custom-time-popper'
},
function (_ref) {
var TransitionProps = _ref.TransitionProps;
return _react2.default.createElement(
_Fade2.default,
_extends({}, TransitionProps, { timeout: 350 }),
_react2.default.createElement(
_ClickAwayListener2.default,
{ disableReactTree: true, onClickAway: function onClickAway(e) {
return self.onClickAway(e);
} },
_react2.default.createElement(
_Paper2.default,
{ className: "custom-time-list " + (self.props.customTimeClass ? self.props.customTimeClass : "") },
_react2.default.createElement(
'div',
{ className: 'custom-time-hour' },
_.map(_.range(0, 24), function (i) {
return _react2.default.createElement(
'div',
{ className: "custom-time-hour-i " + (hour == i && minHour <= i || hour == i && maxHour >= i ? 'active ' : " ") + (minHour > i || maxHour < i ? 'disabled' : ""), onClick: minHour > i || maxHour < i ? function () {} : function (e) {
return self.choseHour(e, i);
} },
i < 10 ? '0' : "",
i
);
})
),
_react2.default.createElement(
'div',
{ className: 'custom-time-minute' },
_.map(_.range(0, 60), function (i) {
return _react2.default.createElement(
'div',
{ className: "custom-time-minute-i " + (minute == i && minMinute <= i || minute == i && maxMinute > i ? 'active ' : " ") + (minMinute > i && minHour >= hour || maxMinute <= i && maxHour <= hour ? 'disabled' : ""), onClick: minMinute > i && minHour >= hour || maxMinute <= i && maxHour <= hour ? function () {} : function (e) {
return self.choseMinute(e, i);
} },
i < 10 ? '0' : "",
i
);
})
)
)
)
);
}
)
)
)
),
pickerIcon ? _react2.default.createElement('i', { className: 'icon-date-suffix' }) : ""
);
}
}]);
return JwDateTimepicker;
}(_react2.default.Component);
exports.default = JwDateTimepicker;