@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/calendar/foundation.js

@@ -0,0 +1,483 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _now = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/date/now"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/entries"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _keys2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _dateFns = require("date-fns");
+
+var _eventUtil = require("./eventUtil");
+
+class CalendarFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  init() {}
+
+  destroy() {
+    this.raf && cancelAnimationFrame(this.raf);
+  }
+
+  initCurrTime() {
+    const {
+      showCurrTime,
+      displayValue
+    } = this.getProps();
+
+    if (showCurrTime && (0, _dateFns.isSameDay)(displayValue, (0, _eventUtil.getCurrDate)())) {
+      this._adapter.updateShowCurrTime();
+
+      this.getCurrLocation();
+    }
+  }
+
+  notifyScrollHeight(height) {
+    this._adapter.updateScrollHeight(height);
+  }
+
+  closeCard(e, key) {
+    this._adapter.unregisterClickOutsideHandler();
+
+    this._adapter.notifyClose(e, key);
+  }
+
+  _getDate() {
+    const {
+      displayValue
+    } = this.getProps();
+    return displayValue || (0, _eventUtil.getCurrDate)();
+  }
+
+  showCard(e, key) {
+    this._adapter.unregisterClickOutsideHandler();
+
+    const bodyWidth = document.querySelector('body').clientWidth;
+    const popoverWidth = 110;
+    const spacing = bodyWidth - e.target.getBoundingClientRect().right - popoverWidth;
+
+    this._adapter.openCard(key, spacing > 0);
+
+    this._adapter.registerClickOutsideHandler(key, () => {
+      this.closeCard(null, key);
+    });
+  }
+
+  formatCbValue(val) {
+    const date = val.shift();
+    const dateArr = [date.getFullYear(), date.getMonth(), date.getDate(), ...val]; // @ts-ignore skip
+
+    return new Date(...dateArr);
+  }
+  /**
+   *
+   * find the location of showCurrTime red line
+   */
+
+
+  getCurrLocation() {
+    let startTime = null;
+    let pos = (0, _eventUtil.getPos)((0, _eventUtil.getCurrDate)());
+
+    this._adapter.updateCurrPos((0, _eventUtil.round)(pos));
+
+    const frameFunc = () => {
+      const timestamp = (0, _now.default)();
+
+      if (!startTime) {
+        startTime = timestamp;
+      }
+
+      const time = timestamp - startTime;
+
+      if (time > 30000) {
+        pos = (0, _eventUtil.getPos)((0, _eventUtil.getCurrDate)());
+
+        this._adapter.updateCurrPos((0, _eventUtil.round)(pos));
+
+        startTime = timestamp;
+      }
+
+      this.raf = requestAnimationFrame(frameFunc);
+    };
+
+    this.raf = requestAnimationFrame(frameFunc);
+  }
+
+  getWeeklyData(value, dateFnsLocale) {
+    const data = {};
+    data.month = (0, _dateFns.format)(value, 'LLL', {
+      locale: dateFnsLocale
+    });
+    data.week = (0, _eventUtil.calcWeekData)(value, 'week', dateFnsLocale);
+
+    this._adapter.setWeeklyData(data);
+
+    return data;
+  }
+
+  getRangeData(value, dateFnsLocale) {
+    const data = {};
+    const {
+      range
+    } = this.getProps();
+    const len = (0, _dateFns.differenceInCalendarDays)(range[1], range[0]);
+    data.month = (0, _dateFns.format)(value, 'LLL', {
+      locale: dateFnsLocale
+    });
+    data.week = (0, _eventUtil.calcRangeData)(value, range[0], len, 'week', dateFnsLocale);
+
+    this._adapter.setRangeData(data);
+
+    return data;
+  }
+
+  getMonthlyData(value, dateFnsLocale) {
+    var _context, _context2;
+
+    const monthStart = (0, _dateFns.startOfMonth)(value);
+    const data = {};
+    const numberOfWeek = (0, _dateFns.getWeeksInMonth)(value);
+    (0, _map.default)(_context = [...(0, _keys.default)(_context2 = Array(numberOfWeek)).call(_context2)]).call(_context, ind => {
+      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), 'month', dateFnsLocale);
+    });
+
+    this._adapter.setMonthlyData(data);
+
+    return data;
+  } // ================== Daily Event ==================
+
+
+  _parseEvents(events) {
+    var _context3;
+
+    const parsed = {
+      allDay: [],
+      day: []
+    };
+    (0, _forEach.default)(_context3 = (0, _map.default)(events).call(events, event => (0, _eventUtil.parseEvent)(event))).call(_context3, item => {
+      (0, _forEach.default)(item).call(item, i => {
+        i.allDay ? parsed.allDay.push(i) : parsed.day.push(i);
+      });
+    });
+    return parsed;
+  }
+
+  getParseDailyEvents(events, date) {
+    var _context4;
+
+    if (!date) {
+      date = this._getDate();
+    }
+
+    const parsed = this._parseEvents(events);
+
+    const {
+      displayValue
+    } = this.getProps();
+    const key = (0, _dateFns.startOfDay)(date).toString();
+    parsed.allDay = (0, _eventUtil.convertEventsArrToMap)(parsed.allDay, 'date', _dateFns.startOfDay, displayValue).get(key);
+    parsed.day = (0, _eventUtil.convertEventsArrToMap)(parsed.day, 'date', null, displayValue).get(key);
+
+    if (!parsed.allDay) {
+      parsed.allDay = [];
+    }
+
+    if (!parsed.day) {
+      parsed.day = [];
+    }
+
+    parsed.day = (0, _map.default)(_context4 = parsed.day).call(_context4, item => (0, _eventUtil.renderDailyEvent)(item));
+    return parsed;
+  }
+
+  parseDailyEvents() {
+    const {
+      events,
+      displayValue
+    } = this.getProps();
+    const parsed = this.getParseDailyEvents(events, displayValue);
+
+    this._adapter.setParsedEvents(parsed);
+
+    this._adapter.cacheEventKeys((0, _map.default)(events).call(events, i => i.key));
+  } // ================== Weekly Event ==================
+
+
+  _parseWeeklyEvents(events, weekStart) {
+    var _context5, _context6;
+
+    let parsed = [[]];
+    const filtered = (0, _eventUtil.filterWeeklyEvents)(events, weekStart);
+    (0, _forEach.default)(_context5 = (0, _sort.default)(_context6 = [...(0, _keys.default)(filtered).call(filtered)]).call(_context6, (a, b) => (0, _eventUtil.sortDate)(a, b))).call(_context5, item => {
+      var _context7;
+
+      const startDate = new Date(item);
+      const curr = (0, _filter.default)(_context7 = filtered.get(item)).call(_context7, event => (0, _dateFns.isSameDay)(event.date, startDate));
+      parsed = (0, _eventUtil.parseWeeklyAllDayEvent)(curr, startDate, weekStart, parsed);
+    });
+    return parsed;
+  }
+
+  _renderWeeklyAllDayEvent(events) {
+    const res = [];
+    (0, _forEach.default)(events).call(events, row => {
+      const event = (0, _filter.default)(row).call(row, item => 'leftPos' in item);
+      res.push(...event);
+    });
+    return res;
+  } // return parsed weekly allday events
+
+
+  parseWeeklyAllDayEvents(events) {
+    const {
+      week
+    } = this._adapter.getWeeklyData();
+
+    const weekStart = week[0].date;
+
+    const parsed = this._parseWeeklyEvents(events, weekStart);
+
+    const res = this._renderWeeklyAllDayEvent(parsed);
+
+    return res;
+  }
+
+  getParsedWeeklyEvents(events) {
+    const parsed = this._parseEvents(events);
+
+    const {
+      displayValue
+    } = this.getProps();
+    const result = {};
+    result.allDay = (0, _eventUtil.convertEventsArrToMap)(parsed.allDay, 'start', _dateFns.startOfDay, displayValue);
+    result.day = (0, _eventUtil.convertEventsArrToMap)(parsed.day, 'date', null, displayValue);
+    return result;
+  } // return parsed weekly allday events
+
+
+  parseWeeklyEvents() {
+    const {
+      events
+    } = this.getProps();
+    const parsed = this.getParsedWeeklyEvents(events);
+
+    this._adapter.setParsedEvents(parsed);
+
+    this._adapter.cacheEventKeys((0, _map.default)(events).call(events, i => i.key));
+  } // ================== Monthly Event ==================
+
+
+  pushDayEventIntoWeekMap(item, index, map) {
+    if (index in map) {
+      map[index].push(item);
+    } else {
+      map[index] = [item];
+    }
+  }
+
+  convertMapToArray(weekMap, weekStart) {
+    const eventArray = [];
+
+    for (const entry of (0, _entries.default)(weekMap).call(weekMap)) {
+      const [key, value] = entry;
+      const map = new _map2.default();
+      map.set(key, value);
+
+      const weekEvents = this._parseWeeklyEvents(map, weekStart);
+
+      eventArray.push(...weekEvents);
+    }
+
+    return eventArray;
+  }
+
+  getParseMonthlyEvents(itemLimit) {
+    var _context8, _context9;
+
+    const parsed = {};
+    const {
+      displayValue,
+      events
+    } = this.getProps();
+
+    const currDate = this._getDate();
+
+    const firstDayOfMonth = (0, _dateFns.startOfMonth)(displayValue);
+    const lastDayOfMonth = (0, _dateFns.endOfMonth)(displayValue);
+    const res = [];
+    (0, _forEach.default)(_context8 = (0, _sort.default)(events).call(events, (prev, next) => {
+      if ((0, _dateFns.isBefore)(prev.start, next.start)) {
+        return -1;
+      }
+
+      if ((0, _dateFns.isAfter)(prev.start, next.start)) {
+        return 1;
+      }
+
+      return 0;
+    })).call(_context8, event => {
+      const parsedEvent = (0, _eventUtil.parseAllDayEvent)(event, event.allDay, currDate);
+      res.push(...parsedEvent);
+    });
+    (0, _filter.default)(res).call(res, item => (0, _dateFns.isSameMonth)(item.date, displayValue));
+    (0, _forEach.default)(res).call(res, item => {
+      // WeekInd calculation error, need to consider the boundary situation at the beginning/end of the month
+      // When the date falls within the month
+      if ((0, _dateFns.isSameMonth)(item.date, displayValue)) {
+        const weekInd = (0, _dateFns.getWeekOfMonth)(item.date) - 1;
+        this.pushDayEventIntoWeekMap(item, weekInd, parsed);
+        return;
+      } // When the date is within the previous month
+
+
+      if ((0, _dateFns.isBefore)(item.date, firstDayOfMonth)) {
+        if ((0, _dateFns.isSameWeek)(item.date, firstDayOfMonth)) {
+          this.pushDayEventIntoWeekMap(item, 0, parsed);
+        }
+
+        return;
+      } // When the date is within the next month
+
+
+      if ((0, _dateFns.isAfter)(item.date, lastDayOfMonth)) {
+        if ((0, _dateFns.isSameWeek)(item.date, lastDayOfMonth)) {
+          const weekInd = (0, _dateFns.getWeekOfMonth)(lastDayOfMonth) - 1;
+          this.pushDayEventIntoWeekMap(item, weekInd, parsed);
+        }
+
+        return;
+      }
+    });
+    (0, _forEach.default)(_context9 = (0, _keys2.default)(parsed)).call(_context9, key => {
+      const week = parsed[key];
+      parsed[key] = {};
+      const weekStart = (0, _dateFns.startOfWeek)(week[0].date);
+      const weekMap = (0, _eventUtil.convertEventsArrToMap)(week, 'start', _dateFns.startOfDay); // When there are multiple events in a week, multiple events should be parsed
+      // const oldParsedWeeklyEvent = this._parseWeeklyEvents(weekMap, weekStart);
+
+      const parsedWeeklyEvent = this.convertMapToArray(weekMap, weekStart);
+      parsed[key].day = (0, _eventUtil.collectDailyEvents)(parsedWeeklyEvent);
+      parsed[key].display = this._renderDisplayEvents(parsedWeeklyEvent);
+    });
+    return parsed;
+  }
+
+  parseMonthlyEvents(itemLimit) {
+    const {
+      events
+    } = this.getProps();
+    const parsed = this.getParseMonthlyEvents(itemLimit);
+
+    this._adapter.setParsedEvents(parsed);
+
+    this._adapter.setItemLimit(itemLimit);
+
+    this._adapter.cacheEventKeys((0, _map.default)(events).call(events, i => i.key));
+  }
+
+  _renderDisplayEvents(events) {
+    // Limits should not be added when calculating the relative position of each event, because there will be calculations that separate two events in the middle of the week
+    let displayEvents = (0, _slice.default)(events).call(events);
+
+    if (displayEvents.length) {
+      displayEvents = this._renderWeeklyAllDayEvent(displayEvents);
+    }
+
+    return displayEvents;
+  } // ================== Range Event ==================
+
+
+  _parseRangeEvents(events) {
+    var _context10, _context11;
+
+    let parsed = [[]];
+    const [start, end] = this.getProp('range');
+    const filtered = (0, _eventUtil.filterEvents)(events, start, end);
+    (0, _forEach.default)(_context10 = (0, _sort.default)(_context11 = [...(0, _keys.default)(filtered).call(filtered)]).call(_context11, (a, b) => (0, _eventUtil.sortDate)(a, b))).call(_context10, item => {
+      var _context12;
+
+      const startDate = new Date(item);
+      const curr = (0, _filter.default)(_context12 = filtered.get(item)).call(_context12, event => (0, _dateFns.isSameDay)(event.date, startDate));
+      parsed = (0, _eventUtil.parseRangeAllDayEvent)(curr, startDate, start, end, parsed);
+    });
+    return parsed;
+  }
+
+  _renderRangeAllDayEvent(events) {
+    let res = [];
+    (0, _forEach.default)(events).call(events, row => {
+      const event = (0, _filter.default)(row).call(row, item => 'leftPos' in item);
+      res = [...res, ...event];
+    });
+    return res;
+  } // return parsed weekly allday events
+
+
+  parseRangeAllDayEvents(events) {
+    const parsed = this._parseRangeEvents(events);
+
+    const res = this._renderRangeAllDayEvent(parsed);
+
+    return res;
+  }
+
+  getParsedRangeEvents(events) {
+    const parsed = this._parseEvents(events);
+
+    const [start] = this.getProp('range');
+    parsed.allDay = (0, _eventUtil.convertEventsArrToMap)(parsed.allDay, 'start', _dateFns.startOfDay, start);
+    parsed.day = (0, _eventUtil.convertEventsArrToMap)(parsed.day, 'date', null, start);
+    return parsed;
+  } // return parsed weekly allday events
+
+
+  parseRangeEvents() {
+    const {
+      events
+    } = this.getProps();
+    const parsed = this.getParsedRangeEvents(events);
+
+    this._adapter.setParsedEvents(parsed);
+
+    this._adapter.cacheEventKeys((0, _map.default)(events).call(events, i => i.key));
+  }
+
+  checkWeekend(val) {
+    return (0, _eventUtil.checkWeekend)(val);
+  }
+
+}
+
+exports.default = CalendarFoundation;

package/lib/cjs/calendar/rtl.scss

@@ -0,0 +1,134 @@
+$module: #{$prefix}-calendar;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module}-day,
+    .#{$module}-week,
+    .#{$module}-month {
+        direction: rtl;
+    }
+
+    .#{$module}-day,
+    .#{$module}-week {
+
+        &-sticky-left {
+            left: auto;
+            right: $spacing-calendar_sticky_left-left;
+        }
+
+        .#{$module}-all-day {
+            .#{$module}-tag {
+                text-align: left;
+                padding-right: 0;
+                padding-left: $spacing-calendar_allDay_tag-paddingRight;
+            }
+        }
+
+        .#{$module}-time {
+            padding-right: 0;
+            padding-left: $spacing-calendar_time-paddingRight;
+
+            &-item {
+                text-align: left;
+            }
+        }
+
+        .#{$module}-time .#{$module}-time-items {
+            margin-left: 0;
+            margin-right: auto;
+        }
+    }
+
+    .#{$module}-week {
+        .#{$module}-grid-skeleton-row-line::after {
+            left: 0;
+            right: 0;
+        }
+
+        .#{$module}-grid-skeleton li {
+            border-right: 0;
+            border-left: $width-calendar-border-default solid $color-calendar_day-border;
+        }
+
+        .#{$module}-grid:last-child {
+            .#{$module}-grid-content li {
+                border-left: 0;
+            }
+        }
+
+        .#{$module}-all-day {
+
+            &-content {
+                padding-left: auto;
+                padding-right: $spacing-calendar_allDay_content-paddingLeft;
+                .#{$module}-all-day-skeleton {
+
+                    li {
+                        border-right: 0;
+                        border-left: $width-calendar-border-default solid $color-calendar_day-border;
+
+                        &:last-child {
+                            border-left: $width-calendar-border-default solid transparent;
+                        }
+                    }
+                }
+            }
+        }
+
+        & &-tag {
+            text-align: left;
+
+            &:first-child {
+                padding-right: auto;
+                padding-left: $spacing-calendar_tag_child-paddingRight;
+            }
+        }
+    }
+
+    .#{$module}-month {
+
+        &-grid-row,
+        &-skeleton {
+
+            li {
+                text-align: left;
+                padding-right: auto;
+                padding-left: $spacing-calendar_skeletion_grid_row_li-paddingRight;
+
+                span {
+                    text-align: left;
+                }
+            }
+        }
+
+        &-skeleton {
+
+            li {
+                border-right: 0;
+                border-left: $width-calendar-border-default solid $color-calendar_day-border;
+            }
+
+            li:last-child {
+                border-left: none;
+            }
+
+            .#{$module}-month-event-card-wrapper {
+                right: auto;
+                left: $spacing-calendar_month_event_card_wrapper-right;
+            }
+        }
+
+        &-date {
+            right: auto;
+            left: $spacing-calendar_month_date-right;
+        }
+    }
+
+    .#{$module}-month-event-card {
+
+        &-close {
+            margin-right: 0;
+            margin-left: $spacing-calendar_month_event_card_close-marginRight;
+        }
+    }
+}