@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

package/lib/es/notification/notificationFoundation.js

@@ -0,0 +1,54 @@
+import _isNumber from "lodash/isNumber";
+import BaseFoundation from '../base/foundation';
+export default class NotificationFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, NotificationFoundation.defaultAdapter), adapter));
+    this._timer = null;
+    this._id = null; // cache id
+  }
+
+  init() {
+    this._startCloseTimer();
+
+    this._id = this.getProp('id');
+  }
+
+  destroy() {
+    this._clearCloseTimer();
+  }
+
+  _startCloseTimer() {
+    // unit: s
+    const duration = this.getProp('duration');
+
+    if (duration && _isNumber(duration)) {
+      this._timer = setTimeout(() => {
+        this.close(); // call parent to remove itself
+      }, duration * 1000);
+    }
+  }
+
+  close(e) {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    this._adapter.notifyWrapperToRemove(this._id);
+
+    this._adapter.notifyClose();
+  }
+
+  _clearCloseTimer() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
+
+  restartCloseTimer() {
+    this._clearCloseTimer();
+
+    this._startCloseTimer();
+  }
+
+}

package/lib/es/notification/notificationListFoundation.d.ts

@@ -0,0 +1,28 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { NoticeInstance, NoticePosition, NoticeProps } from '../notification/notificationFoundation';
+import { strings } from './constants';
+export interface NotificationListProps {
+}
+export interface NotificationListState {
+    notices: NoticeInstance[];
+    removedItems: NoticeInstance[];
+}
+export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
+    updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
+    getNotices: () => NoticeInstance[];
+}
+export interface ConfigProps {
+    top?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    right?: number | string;
+    duration?: number;
+    position?: NoticePosition;
+    zIndex?: number;
+    direction?: typeof strings.directions[number];
+}
+export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
+    addNotice(opts: NoticeProps): void;
+    removeNotice(id: string): void;
+    destroyAll(): void;
+}

package/lib/es/notification/notificationListFoundation.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-useless-constructor */
+import BaseFoundation from '../base/foundation';
+export default class NotificationListFoundation extends BaseFoundation {
+  addNotice(opts) {
+    // let notices = this._adapter.getNotices();
+    const notices = this._adapter.getNotices(); // opts = { ...opts, id };
+    // if (opts.duration) {
+    //     setTimeout(() => {
+    //         this.removeNotice(opts.id);
+    //     }, opts.duration * 1000);
+    // }
+
+
+    this._adapter.updateNotices([opts, ...notices]); // return id;
+
+  }
+
+  removeNotice(id) {
+    let notices = this._adapter.getNotices(); // let notices = this._adapter.getNotices();
+
+
+    const removedItems = [];
+    notices = notices.filter(notice => {
+      if (notice.id === id) {
+        removedItems.push(notice);
+        return false;
+      }
+
+      return true;
+    });
+
+    this._adapter.updateNotices(notices, removedItems); // This must be updated at the same time https://github.com/facebook/react/issues/12312
+
+  }
+
+  destroyAll() {
+    const notices = this._adapter.getNotices();
+
+    if (notices.length > 0) {
+      this._adapter.updateNotices([], notices);
+    }
+  }
+
+}

package/lib/es/overflowList/constants.d.ts

@@ -0,0 +1,25 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    BOUNDARY_SET: ("end" | "start")[];
+    POSITION_SET: string[];
+    MODE_SET: string[];
+    MODE_MAP: {
+        COLLAPSE: string;
+        SCROLL: string;
+    };
+    BOUNDARY_MAP: {
+        readonly START: "start";
+        readonly END: "end";
+    };
+    OVERFLOW_DIR: {
+        NONE: number;
+        GROW: number;
+        SHRINK: number;
+    };
+};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/overflowList/constants.js

@@ -0,0 +1,29 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: BASE_CLASS_PREFIX + '-overflow-list'
+};
+const MODE_MAP = {
+  COLLAPSE: 'collapse',
+  SCROLL: 'scroll'
+};
+const BOUNDARY_MAP = {
+  START: 'start',
+  END: 'end'
+};
+const OVERFLOW_DIR = {
+  NONE: 0,
+  GROW: 1,
+  SHRINK: 2
+};
+const strings = {
+  BOUNDARY_SET: Object.values(BOUNDARY_MAP),
+  POSITION_SET: ['vertical', 'horizontal'],
+  MODE_SET: Object.values(MODE_MAP),
+  MODE_MAP,
+  BOUNDARY_MAP,
+  OVERFLOW_DIR
+};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,17 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface OverflowListAdapter extends DefaultAdapter {
+    updateStates: (state: any) => void;
+    updateVisibleState: (visible: Map<string, boolean>) => void;
+    notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
+}
+declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
+    constructor(adapter: OverflowListAdapter);
+    previousY: any;
+    isScrollMode: () => boolean;
+    getOverflowItem(): Array<Array<Record<string, any>>>;
+    handleIntersect(entries: Array<IntersectionObserverEntry>): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
+}
+export default OverflowListFoundation;

package/lib/es/overflowList/foundation.js

@@ -0,0 +1,160 @@
+import _cloneDeep from "lodash/cloneDeep";
+import _get from "lodash/get";
+import BaseFoundation from '../base/foundation';
+import { strings } from './constants';
+const Boundary = strings.BOUNDARY_MAP;
+const OverflowDirection = strings.OVERFLOW_DIR;
+
+class OverflowListFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.previousY = undefined;
+
+    this.isScrollMode = () => {
+      const {
+        renderMode
+      } = this.getProps();
+      return renderMode === 'scroll';
+    };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return _cloneDeep(items).reverse();
+    };
+  }
+
+  getOverflowItem() {
+    const {
+      items
+    } = this.getProps();
+    const {
+      visibleState,
+      overflow
+    } = this.getStates();
+
+    if (!this.isScrollMode()) {
+      return overflow;
+    }
+
+    const visibleStateArr = items.map(_ref => {
+      let {
+        key
+      } = _ref;
+      return Boolean(visibleState.get(key));
+    });
+    const visibleStart = visibleStateArr.indexOf(true);
+    const visibleEnd = visibleStateArr.lastIndexOf(true);
+    const overflowList = [];
+    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items;
+    return overflowList;
+  }
+
+  handleIntersect(entries) {
+    const visibleState = _cloneDeep(this.getState('visibleState'));
+
+    const res = {};
+    entries.forEach(entry => {
+      const itemKey = _get(entry, 'target.dataset.scrollkey');
+
+      const visible = entry.isIntersecting;
+      res[itemKey] = entry;
+      visibleState.set(itemKey, visible);
+    });
+    let someItemVisible = false;
+
+    for (const value of visibleState.values()) {
+      if (value) {
+        someItemVisible = true;
+        break;
+      }
+    } // Any item is visible, indicating that the List is visible
+
+
+    const wholeListVisible = someItemVisible; // If scrolling in the vertical direction makes the List invisible, no processing is required. 
+    // If this.previousY is undefined, it means that the List is mounted for the first time and will not be processed.
+
+    const [entry1] = entries;
+    const currentY = entry1.boundingClientRect.y;
+
+    if (!wholeListVisible && this.previousY !== undefined && currentY !== this.previousY) {
+      this.previousY = currentY;
+      return;
+    }
+
+    this.previousY = currentY;
+
+    this._adapter.updateVisibleState(visibleState);
+
+    this._adapter.notifyIntersect(res);
+  }
+
+  handleCollapseOverflow() {
+    const {
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
+    const {
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
+    } = this.getStates();
+    const {
+      items,
+      onOverflow
+    } = this.getProps();
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
+
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
+
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
+
+
+      if (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
+      }
+
+      _pivot++;
+    }
+
+    if (overflowed) {
+      const pivot = Math.max(minVisibleItems, _pivot);
+      const isCollapseFromStart = collapseFrom === Boundary.START;
+      const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+      const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+
+      this._adapter.updateStates({
+        overflowStatus: "overflowed",
+        pivot: pivot,
+        visible,
+        overflow
+      }); // trigger onOverflow
+
+
+      if (statePivot !== pivot) {
+        onOverflow(overflow);
+      }
+
+      return;
+    }
+  }
+
+}
+
+export default OverflowListFoundation;

package/lib/es/pagination/constants.d.ts

@@ -0,0 +1,12 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-page";
+};
+declare const strings: {};
+declare const numbers: {
+    readonly PAGE_SHOW_MAX: 7;
+    readonly REST_PAGE_SHOW_MAX: 5;
+    readonly DEFAULT_PAGE_SIZE: 10;
+    readonly PAGE_SIZE_OPTION: readonly [10, 20, 40, 100];
+    readonly REST_PAGE_MAX_SIZE: 1000000;
+};
+export { cssClasses, strings, numbers };

package/lib/es/pagination/constants.js

@@ -0,0 +1,13 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-page`
+};
+const strings = {};
+const numbers = {
+  PAGE_SHOW_MAX: 7,
+  REST_PAGE_SHOW_MAX: 5,
+  DEFAULT_PAGE_SIZE: 10,
+  PAGE_SIZE_OPTION: [10, 20, 40, 100],
+  REST_PAGE_MAX_SIZE: 1000000
+};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,52 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface PaginationAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setPageList: (pageListState: AdapterPageList) => void;
+    setDisabled: (prevIsDisabled: boolean, nextIsDisabled: boolean) => void;
+    updateTotal: (total: number) => void;
+    updatePageSize: (pageSize: number) => void;
+    updateQuickJumpPage: (quickJumpPage: string | number) => void;
+    setCurrentPage: (pageIndex: number) => void;
+    registerKeyDownHandler: (handler: KeyDownHandler) => void;
+    unregisterKeyDownHandler: (handler: KeyDownHandler) => void;
+    notifyPageChange: (pageIndex: number) => void;
+    notifyPageSizeChange: (pageSize: number) => void;
+    notifyChange: (pageIndex: number, pageSize: number) => void;
+}
+export declare type PageRenderText = number | '...';
+export declare type PageList = PageRenderText[];
+export interface AdapterPageList {
+    pageList: PageRenderText[];
+    restLeftPageList: number[];
+    restRightPageList: number[];
+}
+export declare type KeyDownHandler = any;
+declare class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PaginationAdapter<P, S>, P, S> {
+    constructor(adapter: PaginationAdapter<P, S>);
+    init(): void;
+    destroy(): void;
+    _registerEventHandler(): void;
+    _unregisterEventHandler(): void;
+    _updateDisabled(pageInfo: {
+        currentPage: number;
+        total: number;
+        pageSize: number;
+    }): void;
+    goPage(targetPageIndex: number | '...'): void;
+    updatePage(targetPageIndex?: number, total?: number, pageSize?: number): void;
+    goPrev(): void;
+    goNext(): void;
+    _updatePageList(pageListInfo: {
+        currentPage: number;
+        total: number;
+        pageSize: number;
+    }): void;
+    changePageSize(newPageSize: number): void;
+    handleKeyDown(): void;
+    pageSizeInOpts(): any[];
+    handleQuickJumpNumberChange(targetPage: string | number): void;
+    _handleQuickJump(quickJumpPage: string | number): void;
+    handleQuickJumpBlur(): void;
+    handleQuickJumpEnterPress(targetPage: any): void;
+    _getTotalPageNumber(total: number, pageSize: number): number;
+}
+export default PaginationFoundation;