joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
174 lines (150 loc) • 23.6 kB
JavaScript
;
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 _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
var _dateTime = require('./dateTime');
var _dateTime2 = _interopRequireDefault(_dateTime);
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 } startDate 开始时间（时间戳）
* @apiParam {String } endDate 结束时间（时间戳）
* @apiParam {String } startPlaceholder 开始时间Placeholder
* @apiParam {String } endPlaceholder 结束时间Placeholder
* @apiParam {Array } format 日期显示格式化
* @apiParam {Function } onChange 数据变化的回调事件（时间戳）
* @apiParam {object } startMaxDate 开始时间可选择的最大日期
* @apiParam {object } startMinDate 开始时间可选择的最小日期
* @apiParam {object } endMaxDate 结束时间可选择的最大日期
* @apiParam {object } endMinDate 结束时间可选择的最小日期
*
* @apiSuccessExample {json} 使用案例:
* import JwDateTimeRange from 'joywok-material-components/lib/datepicker/dateTimeRange';
* <JwDateTimeRange
className='time'
format={cur_lang == 'en' ? "MM/dd/yyyy" : "yyyy年MM月DD日"}
startDate={1619348643}
endDate={1619348643}
onChange={(e)=>{console.log(e)}}
startPlaceholder="开始时间"
endPlaceholder="结束时间"
startMinDate={new Date()}
endMinDate={new Date()}
/>
*
*
*/
var JwDateTimeRange = function (_React$Component) {
_inherits(JwDateTimeRange, _React$Component);
function JwDateTimeRange(props) {
_classCallCheck(this, JwDateTimeRange);
var _this = _possibleConstructorReturn(this, (JwDateTimeRange.__proto__ || Object.getPrototypeOf(JwDateTimeRange)).call(this, props));
_this.state = {
startDate: props.startDate || null,
endDate: props.endDate || null
};
return _this;
}
_createClass(JwDateTimeRange, [{
key: 'dateChange',
value: function dateChange(date, type) {
var self = this;
var datas = _extends({}, this.state);
if (type == 'start') {
datas.startDate = date;
if (datas.endDate != null) {
if (date >= datas.endDate) {
datas['endDate'] = null;
}
} else {
datas['endDate'] = null;
}
} else {
if (datas.startDate - (datas.startDate + 8 * 3600) % 86400 > date) {
datas['endDate'] = null;
} else {
datas.endDate = date;
}
}
self.setState(datas);
self.props.onChange && self.props.onChange(datas);
}
}, {
key: 'render',
value: function render() {
var self = this;
var _state = this.state,
startDate = _state.startDate,
endDate = _state.endDate;
var _props = this.props,
className = _props.className,
format = _props.format,
startPlaceholder = _props.startPlaceholder,
endPlaceholder = _props.endPlaceholder,
startMaxDate = _props.startMaxDate,
startMinDate = _props.startMinDate,
endMaxDate = _props.endMaxDate,
endMinDate = _props.endMinDate;
var endMin = endMinDate ? endMinDate.getTime() > startDate * 1000 ? endMinDate : new Date((startDate + 60) * 1000) : startDate != null && startDate != 0 ? new Date((startDate + 60) * 1000) : new Date('1900-01-01');
return _react2.default.createElement(
'div',
{ className: (className ? className : "") + " jw-custom-dataTimeRange" },
_react2.default.createElement(_dateTime2.default, {
inputKey: 'dateRangeStart',
format: format || 'YYYY-MM-DD',
value: startDate != null && startDate != 0 ? startDate : null,
minDate: startMinDate ? startMinDate : new Date('1900-01-01'),
maxDate: startMaxDate ? startMaxDate : new Date('2100-01-01'),
onChange: function onChange(date) {
return self.dateChange(date, 'start');
},
placeholder: startPlaceholder,
pickerIcon: false
}),
_react2.default.createElement(
'div',
{ className: 'jw-dataTimeRange-space' },
'-'
),
_react2.default.createElement(_dateTime2.default, {
inputKey: 'dateRangeEnd',
format: format || 'YYYY-MM-DD',
value: endDate != null && endDate != 0 ? endDate : null,
minDate: endMin,
maxDate: endMaxDate ? endMaxDate.getTime() > endMin.getTime() ? endMaxDate : endMin : new Date('2100-01-01'),
onChange: function onChange(date) {
return self.dateChange(date, 'end');
},
placeholder: endPlaceholder,
pickerIcon: false
}),
_react2.default.createElement('i', { className: 'icon-date-suffix' })
);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState(nextProps);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {}
}]);
return JwDateTimeRange;
}(_react2.default.Component);
exports.default = JwDateTimeRange;