@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/calendar/foundation.js

@@ -4,100 +4,73 @@ import { parseEvent, parseAllDayEvent, calcWeekData, getCurrDate, parseWeeklyAll
 export default class CalendarFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, 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 && isSameDay(displayValue, 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 || 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
-
+    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 = getPos(getCurrDate());
-
     this._adapter.updateCurrPos(round(pos));
-
     const frameFunc = () => {
       const timestamp = Date.now();
-
       if (!startTime) {
         startTime = timestamp;
       }
-
       const time = timestamp - startTime;
-
       if (time > 30000) {
         pos = getPos(getCurrDate());
-
         this._adapter.updateCurrPos(round(pos));
-
         startTime = timestamp;
       }
-
       this.raf = requestAnimationFrame(frameFunc);
     };
-
     this.raf = requestAnimationFrame(frameFunc);
   }
-
   getWeeklyData(value, dateFnsLocale) {
     const data = {};
     const {
@@ -107,13 +80,10 @@ export default class CalendarFoundation extends BaseFoundation {
       locale: dateFnsLocale,
       weekStartsOn
     });
-    data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
-
+    data.week = calcWeekData(value, null, 'week', dateFnsLocale, weekStartsOn);
     this._adapter.setWeeklyData(data);
-
     return data;
   }
-
   getRangeData(value, dateFnsLocale) {
     const data = {};
     const {
@@ -125,13 +95,11 @@ export default class CalendarFoundation extends BaseFoundation {
       locale: dateFnsLocale,
       weekStartsOn
     });
-    data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale, weekStartsOn);
-
+    const startDate = startOfDay(range[0]);
+    data.week = calcRangeData(value, startDate, len, 'week', dateFnsLocale, weekStartsOn);
     this._adapter.setRangeData(data);
-
     return data;
   }
-
   getMonthlyData(value, dateFnsLocale) {
     const monthStart = startOfMonth(value);
     const data = {};
@@ -142,15 +110,12 @@ export default class CalendarFoundation extends BaseFoundation {
       weekStartsOn
     });
     [...Array(numberOfWeek).keys()].map(ind => {
-      data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
+      data[ind] = calcWeekData(addDays(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
     });
-
     this._adapter.setMonthlyData(data);
-
     return data;
-  } // ================== Daily Event ==================
-
-
+  }
+  // ================== Daily Event ==================
   _parseEvents(events) {
     const parsed = {
       allDay: [],
@@ -163,46 +128,36 @@ export default class CalendarFoundation extends BaseFoundation {
     });
     return parsed;
   }
-
   getParseDailyEvents(events, date) {
     if (!date) {
       date = this._getDate();
     }
-
     const parsed = this._parseEvents(events);
-
     const {
       displayValue
     } = this.getProps();
     const key = startOfDay(date).toString();
     parsed.allDay = convertEventsArrToMap(parsed.allDay, 'date', startOfDay, displayValue).get(key);
     parsed.day = convertEventsArrToMap(parsed.day, 'date', null, displayValue).get(key);
-
     if (!parsed.allDay) {
       parsed.allDay = [];
     }
-
     if (!parsed.day) {
       parsed.day = [];
     }
-
     parsed.day = parsed.day.map(item => renderDailyEvent(item));
     return parsed;
   }
-
   parseDailyEvents() {
     const {
       events,
       displayValue
     } = this.getProps();
     const parsed = this.getParseDailyEvents(events, displayValue);
-
     this._adapter.setParsedEvents(parsed);
-
     this._adapter.cacheEventKeys(events.map(i => i.key));
-  } // ================== Weekly Event ==================
-
-
+  }
+  // ================== Weekly Event ==================
   _parseWeeklyEvents(events, weekStart) {
     const {
       weekStartsOn
@@ -216,7 +171,6 @@ export default class CalendarFoundation extends BaseFoundation {
     });
     return parsed;
   }
-
   _renderWeeklyAllDayEvent(events) {
     const res = [];
     events.forEach(row => {
@@ -224,26 +178,19 @@ export default class CalendarFoundation extends BaseFoundation {
       res.push(...event);
     });
     return res;
-  } // return parsed weekly allday events
-
-
+  }
+  // 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();
@@ -251,21 +198,17 @@ export default class CalendarFoundation extends BaseFoundation {
     result.allDay = convertEventsArrToMap(parsed.allDay, 'start', startOfDay, displayValue);
     result.day = convertEventsArrToMap(parsed.day, 'date', null, displayValue);
     return result;
-  } // return parsed weekly allday events
-
-
+  }
+  // return parsed weekly allday events
   parseWeeklyEvents() {
     const {
       events
     } = this.getProps();
     const parsed = this.getParsedWeeklyEvents(events);
-
     this._adapter.setParsedEvents(parsed);
-
     this._adapter.cacheEventKeys(events.map(i => i.key));
-  } // ================== Monthly Event ==================
-
-
+  }
+  // ================== Monthly Event ==================
   pushDayEventIntoWeekMap(item, index, map) {
     if (index in map) {
       map[index].push(item);
@@ -273,23 +216,17 @@ export default class CalendarFoundation extends BaseFoundation {
       map[index] = [item];
     }
   }
-
   convertMapToArray(weekMap, weekStart) {
     const eventArray = [];
-
+    const map = new Map();
     for (const entry of weekMap.entries()) {
       const [key, value] = entry;
-      const map = new Map();
       map.set(key, value);
-
-      const weekEvents = this._parseWeeklyEvents(map, weekStart);
-
-      eventArray.push(...weekEvents);
     }
-
+    const weekEvents = this._parseWeeklyEvents(map, weekStart);
+    eventArray.push(...weekEvents);
     return eventArray;
   }
-
   getParseMonthlyEvents(itemLimit) {
     const parsed = {};
     const {
@@ -297,9 +234,7 @@ export default class CalendarFoundation extends BaseFoundation {
       events,
       weekStartsOn
     } = this.getProps();
-
     const currDate = this._getDate();
-
     const firstDayOfMonth = startOfMonth(displayValue);
     const lastDayOfMonth = endOfMonth(displayValue);
     const res = [];
@@ -307,11 +242,9 @@ export default class CalendarFoundation extends BaseFoundation {
       if (isBefore(prev.start, next.start)) {
         return -1;
       }
-
       if (isAfter(prev.start, next.start)) {
         return 1;
       }
-
       return 0;
     }).forEach(event => {
       const parsedEvent = parseAllDayEvent(event, event.allDay, currDate);
@@ -327,20 +260,17 @@ export default class CalendarFoundation extends BaseFoundation {
         }) - 1;
         this.pushDayEventIntoWeekMap(item, weekInd, parsed);
         return;
-      } // When the date is within the previous month
-
-
+      }
+      // When the date is within the previous month
       if (isBefore(item.date, firstDayOfMonth)) {
         if (isSameWeek(item.date, firstDayOfMonth, {
           weekStartsOn
         })) {
           this.pushDayEventIntoWeekMap(item, 0, parsed);
         }
-
         return;
-      } // When the date is within the next month
-
-
+      }
+      // When the date is within the next month
       if (isAfter(item.date, lastDayOfMonth)) {
         if (isSameWeek(item.date, lastDayOfMonth, {
           weekStartsOn
@@ -350,7 +280,6 @@ export default class CalendarFoundation extends BaseFoundation {
           }) - 1;
           this.pushDayEventIntoWeekMap(item, weekInd, parsed);
         }
-
         return;
       }
     });
@@ -360,41 +289,33 @@ export default class CalendarFoundation extends BaseFoundation {
       const weekStart = startOfWeek(week[0].date, {
         weekStartsOn
       });
-      const weekMap = convertEventsArrToMap(week, 'start', startOfDay); // When there are multiple events in a week, multiple events should be parsed
+      const weekMap = convertEventsArrToMap(week, 'start', 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 = 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(events.map(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 = events.slice();
-
     if (displayEvents.length) {
       displayEvents = this._renderWeeklyAllDayEvent(displayEvents);
     }
-
     return displayEvents;
-  } // ================== Range Event ==================
-
-
+  }
+  // ================== Range Event ==================
   _parseRangeEvents(events) {
     let parsed = [[]];
     const [start, end] = this.getProp('range');
@@ -406,7 +327,6 @@ export default class CalendarFoundation extends BaseFoundation {
     });
     return parsed;
   }
-
   _renderRangeAllDayEvent(events) {
     let res = [];
     events.forEach(row => {
@@ -414,40 +334,30 @@ export default class CalendarFoundation extends BaseFoundation {
       res = [...res, ...event];
     });
     return res;
-  } // return parsed weekly allday events
-
-
+  }
+  // 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 = convertEventsArrToMap(parsed.allDay, 'start', startOfDay, start);
     parsed.day = convertEventsArrToMap(parsed.day, 'date', null, start);
     return parsed;
-  } // return parsed weekly allday events
-
-
+  }
+  // return parsed weekly allday events
   parseRangeEvents() {
     const {
       events
     } = this.getProps();
     const parsed = this.getParsedRangeEvents(events);
-
     this._adapter.setParsedEvents(parsed);
-
     this._adapter.cacheEventKeys(events.map(i => i.key));
   }
-
   checkWeekend(val) {
     return checkWeekend(val);
   }
-
 }

package/lib/es/card/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-card")
+  PREFIX: `${BASE_CLASS_PREFIX}-card`
 };
 const strings = {
   SHADOWS: ['hover', 'always'],

package/lib/es/carousel/carousel.css

@@ -34,16 +34,20 @@
 .semi-carousel-content-slide .semi-carousel-content-item-slide-out {
   display: block;
   animation: semi-carousel-content-item-keyframe-slide-out;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-slide .semi-carousel-content-item-slide-in {
   display: block;
   animation: semi-carousel-content-item-keyframe-slide-in;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-reverse .semi-carousel-content-item-slide-out {
   animation: semi-carousel-content-item-keyframe-slide-out-reverse;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-reverse .semi-carousel-content-item-slide-in {
   animation: semi-carousel-content-item-keyframe-slide-in-reverse;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-indicator {
   display: flex;

package/lib/es/carousel/carousel.scss

@@ -44,21 +44,25 @@ $module: #{$prefix}-carousel;
             .#{$module}-content-item-slide-out {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
+                animation-fill-mode: forwards;
             }
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
                 animation: #{$module}-content-item-keyframe-slide-out-reverse;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 animation: #{$module}-content-item-keyframe-slide-in-reverse;
+                animation-fill-mode: forwards;
             }
         }
     }

package/lib/es/carousel/constants.js

@@ -1,14 +1,14 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  CAROUSEL: "".concat(BASE_CLASS_PREFIX, "-carousel"),
-  CAROUSEL_INDICATOR: "".concat(BASE_CLASS_PREFIX, "-carousel-indicator"),
-  CAROUSEL_INDICATOR_LINE: "".concat(BASE_CLASS_PREFIX, "-carousel-indicator-line"),
-  CAROUSEL_INDICATOR_DOT: "".concat(BASE_CLASS_PREFIX, "-carousel-indicator-dot"),
-  CAROUSEL_INDICATOR_COLUMNAR: "".concat(BASE_CLASS_PREFIX, "-carousel-indicator-columnar"),
-  CAROUSEL_INDICATOR_INACTIVE: "".concat(BASE_CLASS_PREFIX, "-carousel-indicator-inactive"),
-  CAROUSEL_INDICATOR_ACTIVE: "".concat(BASE_CLASS_PREFIX, "-carousel-indicator-active"),
-  CAROUSEL_CONTENT: "".concat(BASE_CLASS_PREFIX, "-carousel-content"),
-  CAROUSEL_ARROW: "".concat(BASE_CLASS_PREFIX, "-carousel-arrow")
+  CAROUSEL: `${BASE_CLASS_PREFIX}-carousel`,
+  CAROUSEL_INDICATOR: `${BASE_CLASS_PREFIX}-carousel-indicator`,
+  CAROUSEL_INDICATOR_LINE: `${BASE_CLASS_PREFIX}-carousel-indicator-line`,
+  CAROUSEL_INDICATOR_DOT: `${BASE_CLASS_PREFIX}-carousel-indicator-dot`,
+  CAROUSEL_INDICATOR_COLUMNAR: `${BASE_CLASS_PREFIX}-carousel-indicator-columnar`,
+  CAROUSEL_INDICATOR_INACTIVE: `${BASE_CLASS_PREFIX}-carousel-indicator-inactive`,
+  CAROUSEL_INDICATOR_ACTIVE: `${BASE_CLASS_PREFIX}-carousel-indicator-active`,
+  CAROUSEL_CONTENT: `${BASE_CLASS_PREFIX}-carousel-content`,
+  CAROUSEL_ARROW: `${BASE_CLASS_PREFIX}-carousel-arrow`
 };
 const numbers = {
   DEFAULT_ACTIVE_INDEX: 0,

package/lib/es/carousel/foundation.d.ts

@@ -9,6 +9,8 @@ export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any
 declare class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CarouselAdapter<P, S>, P, S> {
     constructor(adapter: CarouselAdapter<P, S>);
     _interval: any;
+    _forcePlay: boolean;
+    setForcePlay(forcePlay: boolean): void;
     play(interval: number): void;
     stop(): void;
     goTo(activeIndex: number): void;