1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
|
8 |
|
9 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
|
10 |
|
11 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
12 |
|
13 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
14 |
|
15 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
16 |
|
17 | var _createClass3 = _interopRequireDefault(_createClass2);
|
18 |
|
19 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
20 |
|
21 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
22 |
|
23 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
24 |
|
25 | var _inherits3 = _interopRequireDefault(_inherits2);
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var React = _interopRequireWildcard(_react);
|
30 |
|
31 | var _DataTypes = require('./date/DataTypes');
|
32 |
|
33 | var _util = require('./util');
|
34 |
|
35 | var _zh_CN = require('./locale/zh_CN');
|
36 |
|
37 | var _zh_CN2 = _interopRequireDefault(_zh_CN);
|
38 |
|
39 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
|
40 |
|
41 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
42 |
|
43 | var DatePicker = function (_React$PureComponent) {
|
44 | (0, _inherits3['default'])(DatePicker, _React$PureComponent);
|
45 |
|
46 | function DatePicker(props) {
|
47 | (0, _classCallCheck3['default'])(this, DatePicker);
|
48 |
|
49 | var _this = (0, _possibleConstructorReturn3['default'])(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));
|
50 |
|
51 | _this.visibleMonth = [];
|
52 | _this.getDateWithoutTime = function (date) {
|
53 | if (!date) return 0;
|
54 | return +new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
55 | };
|
56 | _this.genWeekData = function (firstDate) {
|
57 | var minDateTime = _this.getDateWithoutTime(_this.props.minDate);
|
58 | var maxDateTime = _this.getDateWithoutTime(_this.props.maxDate) || Number.POSITIVE_INFINITY;
|
59 | var weeks = [];
|
60 | var nextMonth = _this.getMonthDate(firstDate, 1).firstDate;
|
61 | var currentDay = firstDate;
|
62 | var currentWeek = [];
|
63 | weeks.push(currentWeek);
|
64 | var startWeekday = currentDay.getDay();
|
65 | if (startWeekday > 0) {
|
66 | for (var i = 0; i < startWeekday; i++) {
|
67 | currentWeek.push({});
|
68 | }
|
69 | }
|
70 | while (currentDay < nextMonth) {
|
71 | if (currentWeek.length === 7) {
|
72 | currentWeek = [];
|
73 | weeks.push(currentWeek);
|
74 | }
|
75 | var dayOfMonth = currentDay.getDate();
|
76 | var tick = +currentDay;
|
77 | currentWeek.push({
|
78 | tick: tick,
|
79 | dayOfMonth: dayOfMonth,
|
80 | selected: _DataTypes.Models.SelectType.None,
|
81 | isFirstOfMonth: dayOfMonth === 1,
|
82 | isLastOfMonth: false,
|
83 | outOfDate: tick < minDateTime || tick > maxDateTime
|
84 | });
|
85 | currentDay = new Date(currentDay.getTime() + 3600 * 24 * 1000);
|
86 | }
|
87 | currentWeek[currentWeek.length - 1].isLastOfMonth = true;
|
88 | return weeks;
|
89 | };
|
90 | _this.selectDateRange = function (startDate, endDate) {
|
91 | var clear = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
92 | var _this$props = _this.props,
|
93 | getDateExtra = _this$props.getDateExtra,
|
94 | type = _this$props.type,
|
95 | onSelectHasDisableDate = _this$props.onSelectHasDisableDate;
|
96 |
|
97 | if (type === 'one') {
|
98 | endDate = undefined;
|
99 | }
|
100 | var time1 = _this.getDateWithoutTime(startDate),
|
101 | time2 = _this.getDateWithoutTime(endDate);
|
102 | var startDateTick = !time2 || time1 < time2 ? time1 : time2;
|
103 | var endDateTick = time2 && time1 > time2 ? time1 : time2;
|
104 | var startMonthDate = _this.getMonthDate(new Date(startDateTick)).firstDate;
|
105 | var endMonthDate = endDateTick ? new Date(endDateTick) : _this.getMonthDate(new Date(startDateTick)).lastDate;
|
106 | var unuseable = [],
|
107 | needUpdate = false;
|
108 | _this.state.months.filter(function (m) {
|
109 | return m.firstDate >= startMonthDate && m.firstDate <= endMonthDate;
|
110 | }).forEach(function (m) {
|
111 | m.weeks.forEach(function (w) {
|
112 | return w.filter(function (d) {
|
113 | if (!endDateTick) {
|
114 | return d.tick && _this.inDate(startDateTick, d.tick);
|
115 | } else {
|
116 | return d.tick && d.tick >= startDateTick && d.tick <= endDateTick;
|
117 | }
|
118 | }).forEach(function (d) {
|
119 | var oldValue = d.selected;
|
120 | if (clear) {
|
121 | d.selected = _DataTypes.Models.SelectType.None;
|
122 | } else {
|
123 | var info = getDateExtra && getDateExtra(new Date(d.tick)) || {};
|
124 | if (d.outOfDate || info.disable) {
|
125 | unuseable.push(d.tick);
|
126 | }
|
127 | if (_this.inDate(startDateTick, d.tick)) {
|
128 | if (type === 'one') {
|
129 | d.selected = _DataTypes.Models.SelectType.Single;
|
130 | } else if (!endDateTick) {
|
131 | d.selected = _DataTypes.Models.SelectType.Only;
|
132 | } else if (startDateTick !== endDateTick) {
|
133 | d.selected = _DataTypes.Models.SelectType.Start;
|
134 | } else {
|
135 | d.selected = _DataTypes.Models.SelectType.All;
|
136 | }
|
137 | } else if (_this.inDate(endDateTick, d.tick)) {
|
138 | d.selected = _DataTypes.Models.SelectType.End;
|
139 | } else {
|
140 | d.selected = _DataTypes.Models.SelectType.Middle;
|
141 | }
|
142 | }
|
143 | needUpdate = needUpdate || d.selected !== oldValue;
|
144 | });
|
145 | });
|
146 | if (needUpdate && m.componentRef) {
|
147 | m.componentRef.updateWeeks();
|
148 | m.componentRef.forceUpdate();
|
149 | }
|
150 | ;
|
151 | });
|
152 | if (unuseable.length > 0) {
|
153 | if (onSelectHasDisableDate) {
|
154 | onSelectHasDisableDate(unuseable.map(function (tick) {
|
155 | return new Date(tick);
|
156 | }));
|
157 | } else {
|
158 | console.warn('Unusable date. You can handle by onSelectHasDisableDate.', unuseable);
|
159 | }
|
160 | }
|
161 | };
|
162 | _this.computeVisible = function (clientHeight, scrollTop) {
|
163 | var needUpdate = false;
|
164 | var MAX_VIEW_PORT = clientHeight * 2;
|
165 | var MIN_VIEW_PORT = clientHeight;
|
166 |
|
167 | var filterFunc = function filterFunc(vm) {
|
168 | return vm.y && vm.height && vm.y + vm.height > scrollTop - MAX_VIEW_PORT && vm.y < scrollTop + clientHeight + MAX_VIEW_PORT;
|
169 | };
|
170 | if (_this.props.infiniteOpt && _this.visibleMonth.length > 12) {
|
171 | _this.visibleMonth = _this.visibleMonth.filter(filterFunc).sort(function (a, b) {
|
172 | return +a.firstDate - +b.firstDate;
|
173 | });
|
174 | }
|
175 |
|
176 | if (_this.visibleMonth.length > 0) {
|
177 | var last = _this.visibleMonth[_this.visibleMonth.length - 1];
|
178 | if (last.y !== undefined && last.height && last.y + last.height < scrollTop + clientHeight + MIN_VIEW_PORT) {
|
179 | var lastIndex = _this.state.months.indexOf(last);
|
180 | for (var i = 1; i <= 2; i++) {
|
181 | var index = lastIndex + i;
|
182 | if (index < _this.state.months.length && _this.visibleMonth.indexOf(_this.state.months[index]) < 0) {
|
183 | _this.visibleMonth.push(_this.state.months[index]);
|
184 | } else {
|
185 | _this.canLoadNext() && _this.genMonthData(undefined, 1);
|
186 | }
|
187 | }
|
188 | needUpdate = true;
|
189 | }
|
190 | var first = _this.visibleMonth[0];
|
191 | if (first.y !== undefined && first.height && first.y > scrollTop - MIN_VIEW_PORT) {
|
192 | var firstIndex = _this.state.months.indexOf(first);
|
193 | for (var _i = 1; _i <= 2; _i++) {
|
194 | var _index = firstIndex - _i;
|
195 | if (_index >= 0 && _this.visibleMonth.indexOf(_this.state.months[_index]) < 0) {
|
196 | _this.visibleMonth.unshift(_this.state.months[_index]);
|
197 | needUpdate = true;
|
198 | }
|
199 | }
|
200 | }
|
201 | } else if (_this.state.months.length > 0) {
|
202 | _this.visibleMonth = _this.state.months.filter(filterFunc);
|
203 | needUpdate = true;
|
204 | }
|
205 | return needUpdate;
|
206 | };
|
207 | _this.createOnScroll = function () {
|
208 | var timer = void 0;
|
209 | var clientHeight = 0,
|
210 | scrollTop = 0;
|
211 | return function (data) {
|
212 | var client = data.client,
|
213 | top = data.top;
|
214 |
|
215 | clientHeight = client;
|
216 | scrollTop = top;
|
217 | if (timer) {
|
218 | return;
|
219 | }
|
220 | timer = setTimeout(function () {
|
221 | timer = undefined;
|
222 | if (_this.computeVisible(clientHeight, scrollTop)) {
|
223 | _this.forceUpdate();
|
224 | }
|
225 | }, 64);
|
226 | };
|
227 | };
|
228 | _this.onCellClick = function (day) {
|
229 | if (!day.tick) return;
|
230 | _this.props.onCellClick && _this.props.onCellClick(new Date(day.tick));
|
231 | };
|
232 | _this.state = {
|
233 | months: []
|
234 | };
|
235 | return _this;
|
236 | }
|
237 |
|
238 | (0, _createClass3['default'])(DatePicker, [{
|
239 | key: 'shouldComponentUpdate',
|
240 | value: function shouldComponentUpdate(nextProps, nextState, nextContext) {
|
241 | return !(0, _util.shallowEqual)(this.props, nextProps, ['startDate', 'endDate']) || !(0, _util.shallowEqual)(this.state, nextState) || !(0, _util.shallowEqual)(this.context, nextContext);
|
242 | }
|
243 | }, {
|
244 | key: 'componentWillReceiveProps',
|
245 | value: function componentWillReceiveProps(nextProps) {
|
246 | var oldValue = this.props;
|
247 | var newValue = nextProps;
|
248 | if (oldValue.startDate !== newValue.startDate || oldValue.endDate !== newValue.endDate) {
|
249 | if (oldValue.startDate) {
|
250 | this.selectDateRange(oldValue.startDate, oldValue.endDate, true);
|
251 | }
|
252 | if (newValue.startDate) {
|
253 | this.selectDateRange(newValue.startDate, newValue.endDate);
|
254 | }
|
255 | }
|
256 | }
|
257 | }, {
|
258 | key: 'componentWillMount',
|
259 | value: function componentWillMount() {
|
260 | var _props = this.props,
|
261 | _props$initalMonths = _props.initalMonths,
|
262 | initalMonths = _props$initalMonths === undefined ? 6 : _props$initalMonths,
|
263 | defaultDate = _props.defaultDate;
|
264 |
|
265 | for (var i = 0; i < initalMonths; i++) {
|
266 | this.canLoadNext() && this.genMonthData(defaultDate, i);
|
267 | }
|
268 | this.visibleMonth = [].concat((0, _toConsumableArray3['default'])(this.state.months));
|
269 | }
|
270 | }, {
|
271 | key: 'getMonthDate',
|
272 | value: function getMonthDate() {
|
273 | var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
|
274 | var addMonth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
275 |
|
276 | var y = date.getFullYear(),
|
277 | m = date.getMonth();
|
278 | return {
|
279 | firstDate: new Date(y, m + addMonth, 1),
|
280 | lastDate: new Date(y, m + 1 + addMonth, 0)
|
281 | };
|
282 | }
|
283 | }, {
|
284 | key: 'canLoadPrev',
|
285 | value: function canLoadPrev() {
|
286 | var minDate = this.props.minDate;
|
287 |
|
288 | return !minDate || this.state.months.length <= 0 || +this.getMonthDate(minDate).firstDate < +this.state.months[0].firstDate;
|
289 | }
|
290 | }, {
|
291 | key: 'canLoadNext',
|
292 | value: function canLoadNext() {
|
293 | var maxDate = this.props.maxDate;
|
294 |
|
295 | return !maxDate || this.state.months.length <= 0 || +this.getMonthDate(maxDate).firstDate > +this.state.months[this.state.months.length - 1].firstDate;
|
296 | }
|
297 | }, {
|
298 | key: 'genMonthData',
|
299 | value: function genMonthData(date) {
|
300 | var addMonth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
301 |
|
302 | if (!date) {
|
303 | date = addMonth >= 0 ? this.state.months[this.state.months.length - 1].firstDate : this.state.months[0].firstDate;
|
304 | }
|
305 | if (!date) {
|
306 | date = new Date();
|
307 | }
|
308 | var locale = this.props.locale;
|
309 |
|
310 | var _getMonthDate = this.getMonthDate(date, addMonth),
|
311 | firstDate = _getMonthDate.firstDate,
|
312 | lastDate = _getMonthDate.lastDate;
|
313 |
|
314 | var weeks = this.genWeekData(firstDate);
|
315 | var title = (0, _util.formatDate)(firstDate, locale ? locale.monthTitle : 'yyyy/MM', this.props.locale);
|
316 | var data = {
|
317 | title: title,
|
318 | firstDate: firstDate,
|
319 | lastDate: lastDate,
|
320 | weeks: weeks
|
321 | };
|
322 | data.component = this.genMonthComponent(data);
|
323 | if (addMonth >= 0) {
|
324 | this.state.months.push(data);
|
325 | } else {
|
326 | this.state.months.unshift(data);
|
327 | }
|
328 | var _props2 = this.props,
|
329 | startDate = _props2.startDate,
|
330 | endDate = _props2.endDate;
|
331 |
|
332 | if (startDate) {
|
333 | this.selectDateRange(startDate, endDate);
|
334 | }
|
335 | return data;
|
336 | }
|
337 | }, {
|
338 | key: 'inDate',
|
339 | value: function inDate(date, tick) {
|
340 | return date <= tick && tick < date + 24 * 3600000;
|
341 | }
|
342 | }]);
|
343 | return DatePicker;
|
344 | }(React.PureComponent);
|
345 |
|
346 | exports['default'] = DatePicker;
|
347 |
|
348 | DatePicker.defaultProps = {
|
349 | prefixCls: 'rmc-calendar',
|
350 | infinite: true,
|
351 | infiniteOpt: false,
|
352 | defaultDate: new Date(),
|
353 | initalMonths: 6,
|
354 | locale: _zh_CN2['default']
|
355 | };
|
356 | module.exports = exports['default']; |
\ | No newline at end of file |