@seafile/seafile-calendar 1.0.13 → 1.0.14-ahn.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/assets/index.css +119 -30
  2. package/dist/rc-calendar.css +1237 -0
  3. package/dist/rc-calendar.css.map +1 -0
  4. package/dist/rc-calendar.js +8057 -0
  5. package/dist/rc-calendar.js.map +1 -0
  6. package/dist/rc-calendar.min.css +1237 -0
  7. package/dist/rc-calendar.min.css.map +1 -0
  8. package/dist/rc-calendar.min.js +1 -0
  9. package/es/Calendar.js +79 -58
  10. package/es/calendar/CalendarRightPanel.js +65 -61
  11. package/es/date/DateTHead.js +1 -1
  12. package/es/time/TimeInput.js +2 -2
  13. package/lib/Calendar.js +79 -58
  14. package/lib/calendar/CalendarRightPanel.js +65 -61
  15. package/lib/date/DateTHead.js +1 -1
  16. package/lib/time/TimeInput.js +2 -2
  17. package/package.json +1 -1
package/es/calendar/CalendarRightPanel.js CHANGED
@@ -15,13 +15,18 @@ var CalendarRightPanel = function (_React$Component) {
15
15
 
16
16
  _this.centerScroll = function (container, index) {
17
17
  if (!container || index < 0) return;
18
- var firstItem = container.querySelector('li');
18
+ var items = container.querySelectorAll('li');
19
+ var firstItem = items[0];
20
+ var secondItem = items[1];
19
21
  var itemHeight = firstItem && firstItem.offsetHeight || 32;
20
- var containerHeight = container.clientHeight || 0;
21
- var maxScroll = Math.max(0, container.scrollHeight - containerHeight);
22
- var target = index * itemHeight - (containerHeight / 2 - itemHeight / 2);
23
- if (target < 0) target = 0;
24
- if (target > maxScroll) target = maxScroll;
22
+ var itemStep = secondItem ? secondItem.offsetTop - firstItem.offsetTop : itemHeight;
23
+ var maxScroll = Math.max(0, container.scrollHeight - container.clientHeight);
24
+ var rowsBeforeSelected = 3;
25
+ var target = Math.max(0, (index - rowsBeforeSelected) * itemStep);
26
+
27
+ if (target > maxScroll) {
28
+ target = Math.floor(maxScroll / itemStep) * itemStep;
29
+ }
25
30
  container.scrollTop = target;
26
31
  };
27
32
 
@@ -183,78 +188,77 @@ var CalendarRightPanel = function (_React$Component) {
183
188
  var selectedMinute = this.getSelectedMinute();
184
189
  var currentHour = dayjs().format('HH');
185
190
  var currentMinute = dayjs().format('mm');
186
- var displayHour = selectedHour || currentHour;
187
- var displayMinute = selectedMinute || currentMinute;
188
191
 
189
192
  return React.createElement(
190
193
  'div',
191
194
  { className: prefixCls + '-right-panel' },
192
- React.createElement(
193
- 'div',
194
- { className: prefixCls + '-right-panel-header ' + prefixCls + '-header' },
195
- displayHour,
196
- ':',
197
- displayMinute
198
- ),
199
195
  React.createElement(
200
196
  'div',
201
197
  { className: prefixCls + '-right-panel-body' },
202
198
  React.createElement(
203
199
  'div',
204
- { className: prefixCls + '-right-panel-col', ref: this.hoursRef },
200
+ { className: prefixCls + '-right-panel-col ' + prefixCls + '-right-panel-col-hour' },
205
201
  React.createElement(
206
- 'ul',
207
- null,
208
- this.hours.map(function (h) {
209
- var isSelected = selectedHour && h === selectedHour;
210
- var isCurrent = !selectedHour && h === currentHour;
211
- var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
212
- return React.createElement(
213
- 'li',
214
- {
215
- key: h,
216
- onClick: function onClick() {
217
- return _this4.onSelectHour(h);
202
+ 'div',
203
+ { className: prefixCls + '-right-panel-col-item', ref: this.hoursRef },
204
+ React.createElement(
205
+ 'ul',
206
+ null,
207
+ this.hours.map(function (h) {
208
+ var isSelected = selectedHour && h === selectedHour;
209
+ var isCurrent = !selectedHour && h === currentHour;
210
+ var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
211
+ return React.createElement(
212
+ 'li',
213
+ {
214
+ key: h,
215
+ onClick: function onClick() {
216
+ return _this4.onSelectHour(h);
217
+ },
218
+ className: prefixCls + '-right-panel-item',
219
+ title: h
218
220
  },
219
- className: prefixCls + '-right-panel-item',
220
- title: h
221
- },
222
- React.createElement(
223
- 'span',
224
- { className: className },
225
- h
226
- )
227
- );
228
- })
221
+ React.createElement(
222
+ 'span',
223
+ { className: className },
224
+ h
225
+ )
226
+ );
227
+ })
228
+ )
229
229
  )
230
230
  ),
231
231
  React.createElement(
232
232
  'div',
233
- { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
233
+ { className: prefixCls + '-right-panel-col' },
234
234
  React.createElement(
235
- 'ul',
236
- null,
237
- this.minutes.map(function (m) {
238
- var isSelected = selectedMinute && m === selectedMinute;
239
- var isCurrent = !selectedMinute && m === currentMinute;
240
- var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
241
- return React.createElement(
242
- 'li',
243
- {
244
- key: m,
245
- onClick: function onClick() {
246
- return _this4.onSelectMinute(m);
235
+ 'div',
236
+ { className: prefixCls + '-right-panel-col-item', ref: this.minutesRef },
237
+ React.createElement(
238
+ 'ul',
239
+ null,
240
+ this.minutes.map(function (m) {
241
+ var isSelected = selectedMinute && m === selectedMinute;
242
+ var isCurrent = !selectedMinute && m === currentMinute;
243
+ var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
244
+ return React.createElement(
245
+ 'li',
246
+ {
247
+ key: m,
248
+ onClick: function onClick() {
249
+ return _this4.onSelectMinute(m);
250
+ },
251
+ className: prefixCls + '-right-panel-item',
252
+ title: m
247
253
  },
248
- className: prefixCls + '-right-panel-item',
249
- title: m
250
- },
251
- React.createElement(
252
- 'span',
253
- { className: className },
254
- m
255
- )
256
- );
257
- })
254
+ React.createElement(
255
+ 'span',
256
+ { className: className },
257
+ m
258
+ )
259
+ );
260
+ })
261
+ )
258
262
  )
259
263
  )
260
264
  )
package/es/date/DateTHead.js CHANGED
@@ -73,7 +73,7 @@ var DateTHead = function (_React$Component) {
73
73
  null,
74
74
  React.createElement(
75
75
  'tr',
76
- { role: 'row' },
76
+ { role: 'row', className: prefixCls + '-week-date-header' },
77
77
  showWeekNumberEl,
78
78
  weekDaysEls
79
79
  )
package/es/time/TimeInput.js CHANGED
@@ -116,8 +116,8 @@ var TimeInput = function (_React$Component) {
116
116
  TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
117
117
  var newState = null;
118
118
  if (!state.hasFocus) {
119
- var base = nextProps.selectedValue || null;
120
- newState = { str: base ? formatTime(base, nextProps.format) : '' };
119
+ var base = nextProps.selectedValue || dayjs();
120
+ newState = { str: formatTime(base, nextProps.format) };
121
121
  }
122
122
  return newState;
123
123
  };
package/lib/Calendar.js CHANGED
@@ -229,79 +229,81 @@ var Calendar = function (_React$Component) {
229
229
  }
230
230
 
231
231
  var showTimeControls = showHourAndMinute && mode === 'date';
232
-
233
- children.push(_react2['default'].createElement(
232
+ var dateInputColumnElement = _react2['default'].createElement(
234
233
  'div',
235
- { className: prefixCls + '-panel', key: 'panel' },
234
+ { className: prefixCls + '-date-input-col' },
236
235
  _react2['default'].createElement(
237
236
  'div',
238
- { className: prefixCls + '-inputs' },
237
+ { className: prefixCls + '-date-input' },
238
+ dateInputElement
239
+ )
240
+ );
241
+ var datePanelElement = _react2['default'].createElement(
242
+ 'div',
243
+ {
244
+ tabIndex: this.props.focusablePanel ? 0 : undefined,
245
+ className: prefixCls + '-date-panel'
246
+ },
247
+ _react2['default'].createElement(_CalendarHeader2['default'], {
248
+ locale: locale,
249
+ mode: mode,
250
+ value: value,
251
+ onValueChange: this.setValue,
252
+ onPanelChange: this.onPanelChange,
253
+ renderFooter: renderFooter,
254
+ showTimePicker: showTimePicker,
255
+ prefixCls: prefixCls,
256
+ showHourAndMinute: showHourAndMinute
257
+ }),
258
+ timePicker && showTimePicker ? _react2['default'].createElement(
259
+ 'div',
260
+ { className: prefixCls + '-time-picker' },
239
261
  _react2['default'].createElement(
240
262
  'div',
241
- { className: prefixCls + '-date-input-col' },
242
- _react2['default'].createElement(
243
- 'div',
244
- { className: prefixCls + '-date-input' },
245
- dateInputElement
246
- )
247
- ),
248
- showTimeControls && _react2['default'].createElement(
249
- 'div',
250
- { className: prefixCls + '-time-input-col' },
251
- _react2['default'].createElement(
252
- 'div',
253
- { className: prefixCls + '-time-input' },
254
- timeInputTopElement
255
- )
263
+ { className: prefixCls + '-time-picker-panel' },
264
+ timePickerEle
256
265
  )
266
+ ) : null,
267
+ _react2['default'].createElement(
268
+ 'div',
269
+ { className: prefixCls + '-body' },
270
+ _react2['default'].createElement(_DateTable2['default'], {
271
+ locale: locale,
272
+ value: value,
273
+ selectedValue: selectedValue,
274
+ prefixCls: prefixCls,
275
+ dateRender: props.dateRender,
276
+ onSelect: this.onDateTableSelect,
277
+ disabledDate: disabledDate,
278
+ showWeekNumber: showWeekNumber,
279
+ firstDayOfWeek: firstDayOfWeek,
280
+ currentStatus: currentStatus
281
+ })
282
+ )
283
+ );
284
+
285
+ var dateTimePanelElement = showTimeControls ? _react2['default'].createElement(
286
+ 'div',
287
+ { className: prefixCls + '-date-time-panel' },
288
+ _react2['default'].createElement(
289
+ 'div',
290
+ { className: prefixCls + '-date-panel-column' },
291
+ dateInputColumnElement,
292
+ datePanelElement
257
293
  ),
258
294
  _react2['default'].createElement(
259
295
  'div',
260
- { className: prefixCls + '-date-panel-container' },
296
+ { className: prefixCls + '-time-panel-column' },
261
297
  _react2['default'].createElement(
262
298
  'div',
263
- {
264
- tabIndex: this.props.focusablePanel ? 0 : undefined,
265
- className: prefixCls + '-date-panel'
266
- },
267
- _react2['default'].createElement(_CalendarHeader2['default'], {
268
- locale: locale,
269
- mode: mode,
270
- value: value,
271
- onValueChange: this.setValue,
272
- onPanelChange: this.onPanelChange,
273
- renderFooter: renderFooter,
274
- showTimePicker: showTimePicker,
275
- prefixCls: prefixCls,
276
- showHourAndMinute: showHourAndMinute
277
- }),
278
- timePicker && showTimePicker ? _react2['default'].createElement(
279
- 'div',
280
- { className: prefixCls + '-time-picker' },
281
- _react2['default'].createElement(
282
- 'div',
283
- { className: prefixCls + '-time-picker-panel' },
284
- timePickerEle
285
- )
286
- ) : null,
299
+ { className: prefixCls + '-time-input-col' },
287
300
  _react2['default'].createElement(
288
301
  'div',
289
- { className: prefixCls + '-body' },
290
- _react2['default'].createElement(_DateTable2['default'], {
291
- locale: locale,
292
- value: value,
293
- selectedValue: selectedValue,
294
- prefixCls: prefixCls,
295
- dateRender: props.dateRender,
296
- onSelect: this.onDateTableSelect,
297
- disabledDate: disabledDate,
298
- showWeekNumber: showWeekNumber,
299
- firstDayOfWeek: firstDayOfWeek,
300
- currentStatus: currentStatus
301
- })
302
+ { className: prefixCls + '-time-input' },
303
+ timeInputTopElement
302
304
  )
303
305
  ),
304
- showTimeControls && _react2['default'].createElement(_CalendarRightPanel2['default'], {
306
+ _react2['default'].createElement(_CalendarRightPanel2['default'], {
305
307
  prefixCls: prefixCls,
306
308
  value: value,
307
309
  selectedValue: selectedValue,
@@ -311,7 +313,26 @@ var Calendar = function (_React$Component) {
311
313
  defaultMinutesTime: this.props.defaultMinutesTime,
312
314
  format: inputFormat
313
315
  })
316
+ )
317
+ ) : _react2['default'].createElement(
318
+ _react2['default'].Fragment,
319
+ null,
320
+ _react2['default'].createElement(
321
+ 'div',
322
+ { className: prefixCls + '-inputs' },
323
+ dateInputColumnElement
314
324
  ),
325
+ _react2['default'].createElement(
326
+ 'div',
327
+ { className: prefixCls + '-date-panel-container' },
328
+ datePanelElement
329
+ )
330
+ );
331
+
332
+ children.push(_react2['default'].createElement(
333
+ 'div',
334
+ { className: prefixCls + '-panel', key: 'panel' },
335
+ dateTimePanelElement,
315
336
  _react2['default'].createElement(_CalendarFooter2['default'], {
316
337
  showOk: props.showOk,
317
338
  mode: mode,
package/lib/calendar/CalendarRightPanel.js CHANGED
@@ -38,13 +38,18 @@ var CalendarRightPanel = function (_React$Component) {
38
38
 
39
39
  _this.centerScroll = function (container, index) {
40
40
  if (!container || index < 0) return;
41
- var firstItem = container.querySelector('li');
41
+ var items = container.querySelectorAll('li');
42
+ var firstItem = items[0];
43
+ var secondItem = items[1];
42
44
  var itemHeight = firstItem && firstItem.offsetHeight || 32;
43
- var containerHeight = container.clientHeight || 0;
44
- var maxScroll = Math.max(0, container.scrollHeight - containerHeight);
45
- var target = index * itemHeight - (containerHeight / 2 - itemHeight / 2);
46
- if (target < 0) target = 0;
47
- if (target > maxScroll) target = maxScroll;
45
+ var itemStep = secondItem ? secondItem.offsetTop - firstItem.offsetTop : itemHeight;
46
+ var maxScroll = Math.max(0, container.scrollHeight - container.clientHeight);
47
+ var rowsBeforeSelected = 3;
48
+ var target = Math.max(0, (index - rowsBeforeSelected) * itemStep);
49
+
50
+ if (target > maxScroll) {
51
+ target = Math.floor(maxScroll / itemStep) * itemStep;
52
+ }
48
53
  container.scrollTop = target;
49
54
  };
50
55
 
@@ -206,78 +211,77 @@ var CalendarRightPanel = function (_React$Component) {
206
211
  var selectedMinute = this.getSelectedMinute();
207
212
  var currentHour = (0, _dayjs2['default'])().format('HH');
208
213
  var currentMinute = (0, _dayjs2['default'])().format('mm');
209
- var displayHour = selectedHour || currentHour;
210
- var displayMinute = selectedMinute || currentMinute;
211
214
 
212
215
  return _react2['default'].createElement(
213
216
  'div',
214
217
  { className: prefixCls + '-right-panel' },
215
- _react2['default'].createElement(
216
- 'div',
217
- { className: prefixCls + '-right-panel-header ' + prefixCls + '-header' },
218
- displayHour,
219
- ':',
220
- displayMinute
221
- ),
222
218
  _react2['default'].createElement(
223
219
  'div',
224
220
  { className: prefixCls + '-right-panel-body' },
225
221
  _react2['default'].createElement(
226
222
  'div',
227
- { className: prefixCls + '-right-panel-col', ref: this.hoursRef },
223
+ { className: prefixCls + '-right-panel-col ' + prefixCls + '-right-panel-col-hour' },
228
224
  _react2['default'].createElement(
229
- 'ul',
230
- null,
231
- this.hours.map(function (h) {
232
- var isSelected = selectedHour && h === selectedHour;
233
- var isCurrent = !selectedHour && h === currentHour;
234
- var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
235
- return _react2['default'].createElement(
236
- 'li',
237
- {
238
- key: h,
239
- onClick: function onClick() {
240
- return _this4.onSelectHour(h);
225
+ 'div',
226
+ { className: prefixCls + '-right-panel-col-item', ref: this.hoursRef },
227
+ _react2['default'].createElement(
228
+ 'ul',
229
+ null,
230
+ this.hours.map(function (h) {
231
+ var isSelected = selectedHour && h === selectedHour;
232
+ var isCurrent = !selectedHour && h === currentHour;
233
+ var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
234
+ return _react2['default'].createElement(
235
+ 'li',
236
+ {
237
+ key: h,
238
+ onClick: function onClick() {
239
+ return _this4.onSelectHour(h);
240
+ },
241
+ className: prefixCls + '-right-panel-item',
242
+ title: h
241
243
  },
242
- className: prefixCls + '-right-panel-item',
243
- title: h
244
- },
245
- _react2['default'].createElement(
246
- 'span',
247
- { className: className },
248
- h
249
- )
250
- );
251
- })
244
+ _react2['default'].createElement(
245
+ 'span',
246
+ { className: className },
247
+ h
248
+ )
249
+ );
250
+ })
251
+ )
252
252
  )
253
253
  ),
254
254
  _react2['default'].createElement(
255
255
  'div',
256
- { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
256
+ { className: prefixCls + '-right-panel-col' },
257
257
  _react2['default'].createElement(
258
- 'ul',
259
- null,
260
- this.minutes.map(function (m) {
261
- var isSelected = selectedMinute && m === selectedMinute;
262
- var isCurrent = !selectedMinute && m === currentMinute;
263
- var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
264
- return _react2['default'].createElement(
265
- 'li',
266
- {
267
- key: m,
268
- onClick: function onClick() {
269
- return _this4.onSelectMinute(m);
258
+ 'div',
259
+ { className: prefixCls + '-right-panel-col-item', ref: this.minutesRef },
260
+ _react2['default'].createElement(
261
+ 'ul',
262
+ null,
263
+ this.minutes.map(function (m) {
264
+ var isSelected = selectedMinute && m === selectedMinute;
265
+ var isCurrent = !selectedMinute && m === currentMinute;
266
+ var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
267
+ return _react2['default'].createElement(
268
+ 'li',
269
+ {
270
+ key: m,
271
+ onClick: function onClick() {
272
+ return _this4.onSelectMinute(m);
273
+ },
274
+ className: prefixCls + '-right-panel-item',
275
+ title: m
270
276
  },
271
- className: prefixCls + '-right-panel-item',
272
- title: m
273
- },
274
- _react2['default'].createElement(
275
- 'span',
276
- { className: className },
277
- m
278
- )
279
- );
280
- })
277
+ _react2['default'].createElement(
278
+ 'span',
279
+ { className: className },
280
+ m
281
+ )
282
+ );
283
+ })
284
+ )
281
285
  )
282
286
  )
283
287
  )
package/lib/date/DateTHead.js CHANGED
@@ -92,7 +92,7 @@ var DateTHead = function (_React$Component) {
92
92
  null,
93
93
  _react2['default'].createElement(
94
94
  'tr',
95
- { role: 'row' },
95
+ { role: 'row', className: prefixCls + '-week-date-header' },
96
96
  showWeekNumberEl,
97
97
  weekDaysEls
98
98
  )
package/lib/time/TimeInput.js CHANGED
@@ -140,8 +140,8 @@ var TimeInput = function (_React$Component) {
140
140
  TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
141
141
  var newState = null;
142
142
  if (!state.hasFocus) {
143
- var base = nextProps.selectedValue || null;
144
- newState = { str: base ? formatTime(base, nextProps.format) : '' };
143
+ var base = nextProps.selectedValue || (0, _dayjs2['default'])();
144
+ newState = { str: formatTime(base, nextProps.format) };
145
145
  }
146
146
  return newState;
147
147
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/seafile-calendar",
3
- "version": "1.0.13",
3
+ "version": "1.0.14ahn.2",
4
4
  "description": "React Calendar",
5
5
  "keywords": [
6
6
  "react",