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

package/lib/es/pagination/foundation.js

@@ -0,0 +1,355 @@
+/* eslint-disable max-len */
+
+/* eslint-disable no-param-reassign */
+import BaseFoundation from '../base/foundation';
+import { numbers } from './constants';
+
+class PaginationFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  init() {
+    const {
+      currentPage,
+      total,
+      pageSize
+    } = this.getStates(); // If pageSize is set, pageSizeOpts does not work
+
+    this._updateDisabled({
+      currentPage,
+      total,
+      pageSize
+    });
+
+    this._updatePageList({
+      currentPage,
+      total,
+      pageSize
+    });
+
+    this._registerEventHandler();
+  }
+
+  destroy() {
+    this._unregisterEventHandler();
+  }
+
+  _registerEventHandler() {
+    this._adapter.registerKeyDownHandler(this.handleKeyDown);
+  }
+
+  _unregisterEventHandler() {
+    this._adapter.unregisterKeyDownHandler(this.handleKeyDown);
+  }
+
+  _updateDisabled(pageInfo) {
+    const {
+      currentPage,
+      total,
+      pageSize
+    } = pageInfo;
+
+    const totalPageNum = this._getTotalPageNumber(total, pageSize);
+
+    let prevIsDisabled = false;
+    let nextIsDisabled = false;
+
+    if (currentPage === 1) {
+      prevIsDisabled = true;
+      nextIsDisabled = totalPageNum < 2;
+    } else if (currentPage === totalPageNum) {
+      prevIsDisabled = false;
+      nextIsDisabled = true;
+    }
+
+    this._adapter.setDisabled(prevIsDisabled, nextIsDisabled);
+  }
+
+  goPage(targetPageIndex) {
+    if (targetPageIndex === '...') {
+      return;
+    }
+
+    const {
+      pageSize,
+      currentPage
+    } = this.getStates();
+
+    const isControlComponent = this._isInProps('currentPage');
+
+    if (targetPageIndex === currentPage) {
+      return;
+    }
+
+    if (!isControlComponent) {
+      this.updatePage(targetPageIndex);
+
+      this._adapter.notifyPageChange(targetPageIndex);
+
+      this._adapter.notifyChange(targetPageIndex, pageSize);
+    } else {
+      this._adapter.notifyPageChange(targetPageIndex);
+
+      this._adapter.notifyChange(targetPageIndex, pageSize);
+    }
+  }
+
+  updatePage() {
+    let targetPageIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let total = arguments.length > 1 ? arguments[1] : undefined;
+    let pageSize = arguments.length > 2 ? arguments[2] : undefined;
+
+    // maybe undefined or null
+    if (total === null || typeof total === 'undefined') {
+      total = this.getState('total');
+    }
+
+    if (pageSize === null || typeof pageSize === 'undefined') {
+      pageSize = this.getState('pageSize');
+    }
+
+    this._updateDisabled({
+      currentPage: targetPageIndex,
+      total,
+      pageSize
+    });
+
+    this._updatePageList({
+      currentPage: targetPageIndex,
+      total,
+      pageSize
+    });
+
+    this._adapter.updateTotal(total);
+
+    this._adapter.setCurrentPage(targetPageIndex);
+
+    this._adapter.updatePageSize(pageSize);
+  }
+
+  goPrev() {
+    const {
+      currentPage
+    } = this.getStates();
+
+    if (currentPage > 1) {
+      this.goPage(currentPage - 1);
+    }
+  }
+
+  goNext() {
+    const {
+      currentPage,
+      total,
+      pageSize
+    } = this.getStates();
+
+    const totalPageNum = this._getTotalPageNumber(total, pageSize);
+
+    if (currentPage <= totalPageNum - 1) {
+      this.goPage(currentPage + 1);
+    }
+  }
+
+  _updatePageList(pageListInfo) {
+    const {
+      currentPage,
+      total,
+      pageSize
+    } = pageListInfo;
+    let pageList = [];
+    let restLeftPageList = []; // pages before ...
+
+    let restRightPageList = []; // pages after ...
+
+    /** Pager truncation logic (t is the total number of pages, c is the current page):
+         - No need to truncate when t<=7 pages
+         - When t>7
+             - When c<4, the fourth is a truncation symbol (...)
+             - When c=4, the sixth is the truncation symbol (...)
+             - When 4<c<t-3, the second and sixth are truncation symbols (...)
+             - When t-3<=c<=t, the second is the truncation symbol (...), followed by the 5th from the bottom-the 1st from the bottom
+         Truncation character + number, the total number is 7
+         分页器截断逻辑（t为总页数，c为当前页）：
+        - t<=7 页的时候不需要截断
+        - 当 t>7 时
+            - 当 c<4 时，第4个为截断符号（...）
+            - 当 c=4 时，第6个为截断符号（...）
+            - 当 4<c<t-3 时，第2个与第6个为截断符号（...）
+            - 当 t-3<=c<=t 时，第 2 个为截断符号（...），后面为倒数第5个-倒数第1个
+        截断符+数字 总共个数为7个
+    */
+
+    const totalPageNum = this._getTotalPageNumber(total, pageSize);
+
+    const {
+      PAGE_SHOW_MAX,
+      REST_PAGE_MAX_SIZE
+    } = numbers;
+
+    if (totalPageNum <= PAGE_SHOW_MAX) {
+      pageList = Array.from({
+        length: totalPageNum
+      }, (v, i) => i + 1);
+      restLeftPageList = [];
+      restRightPageList = [];
+    } else {
+      switch (true) {
+        case currentPage < 4:
+          pageList = [1, 2, 3, 4, '...', totalPageNum - 1, totalPageNum]; // length: (totalPageNum - 1) - 4
+
+          restRightPageList = Array.from({
+            length: Math.min(totalPageNum - 6, REST_PAGE_MAX_SIZE)
+          }, (v, i) => i + 5);
+          restLeftPageList = [];
+          break;
+
+        case currentPage === 4:
+          pageList = [1, 2, 3, 4, 5, '...', totalPageNum];
+          restRightPageList = Array.from({
+            length: Math.min(totalPageNum - 6, REST_PAGE_MAX_SIZE)
+          }, (v, i) => i + 6);
+          restLeftPageList = [];
+          break;
+
+        case 4 < currentPage && currentPage < totalPageNum - 3:
+          const middle = Array.from({
+            length: 3
+          }, (v, i) => currentPage + (i - 1));
+          pageList = [1].concat('...', middle, '...', totalPageNum); // length: total-(currentPage+1)-1
+
+          restRightPageList = Array.from({
+            length: Math.min(totalPageNum - currentPage - 2, REST_PAGE_MAX_SIZE)
+          }, (v, i) => currentPage + i + 2);
+          restLeftPageList = Array.from({
+            length: Math.min(currentPage - 3, REST_PAGE_MAX_SIZE)
+          }, (v, i) => i + 2);
+          break;
+
+        case currentPage - 3 <= currentPage && currentPage <= totalPageNum:
+          const right = Array.from({
+            length: 5
+          }, (v, i) => totalPageNum - (4 - i));
+          pageList = [1, '...'].concat(right);
+          restRightPageList = [];
+          restLeftPageList = Array.from({
+            length: Math.min(right[0] - 2, REST_PAGE_MAX_SIZE)
+          }, (v, i) => i + 2);
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    this._adapter.setPageList({
+      pageList,
+      restLeftPageList,
+      restRightPageList
+    }); // this._adapter.setRestLeftPageList(restLeftPageList);
+    // this._adapter.setRestRightPageList(restRightPageList);
+
+  }
+
+  changePageSize(newPageSize) {
+    const {
+      pageSize
+    } = this.getStates();
+
+    this._adapter.updatePageSize(newPageSize);
+
+    this._adapter.notifyPageSizeChange(newPageSize);
+
+    const {
+      total,
+      currentPage
+    } = this.getStates(); // After converting the switching page capacity, which page is the current page
+
+    const currentPageFirstItemIndex = (currentPage - 1) * pageSize + 1;
+    const newCurrentPage = Math.ceil(currentPageFirstItemIndex / newPageSize);
+    this.updatePage(newCurrentPage, total, newPageSize);
+
+    if (currentPage !== newCurrentPage) {
+      this._adapter.notifyPageChange(newCurrentPage);
+    }
+
+    this._adapter.notifyChange(newCurrentPage, newPageSize);
+  } // TODO handle tab/enter events
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  handleKeyDown() {} // If pageSize is not in the Opts array, insert it
+
+
+  pageSizeInOpts() {
+    const {
+      pageSizeOpts
+    } = this.getProps();
+    const {
+      pageSize
+    } = this.getStates();
+    const newPageSizeOpts = [...pageSizeOpts];
+
+    if (newPageSizeOpts.indexOf(pageSize) === -1) {
+      const firstLargerIndex = newPageSizeOpts.findIndex(el => el > pageSize);
+      newPageSizeOpts.splice(firstLargerIndex, 0, pageSize);
+    }
+
+    return newPageSizeOpts;
+  }
+
+  handleQuickJumpNumberChange(targetPage) {
+    this._adapter.updateQuickJumpPage(targetPage);
+  }
+
+  _handleQuickJump(quickJumpPage) {
+    let page = Number(quickJumpPage);
+    const {
+      pageSize,
+      total
+    } = this.getStates();
+
+    const totalPageNum = this._getTotalPageNumber(total, pageSize);
+
+    if (Number.isNaN(page)) {
+      return;
+    } // If the user input is greater than totalPage
+
+
+    if (page > totalPageNum) {
+      page = totalPageNum;
+    }
+
+    if (page <= 0) {
+      page = 1;
+    } // clear inputnumber
+
+
+    this._adapter.updateQuickJumpPage('');
+
+    this.goPage(page);
+  }
+
+  handleQuickJumpBlur() {
+    const {
+      quickJumpPage
+    } = this.getStates(); // no need to operate when inputnumber blur & quickJumpPage is empty
+
+    if (typeof quickJumpPage === 'string' && quickJumpPage || typeof quickJumpPage === 'number') {
+      this._handleQuickJump(quickJumpPage);
+    }
+  }
+
+  handleQuickJumpEnterPress(targetPage) {
+    this._handleQuickJump(targetPage);
+  }
+
+  _getTotalPageNumber(total, pageSize) {
+    const totalPageNum = Math.ceil(total / pageSize);
+    return totalPageNum;
+  }
+
+}
+
+export default PaginationFoundation;

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

@@ -0,0 +1,13 @@
+declare const cssClasses: {
+    PREFIX: string;
+    POPOVER: string;
+};
+declare const strings: {
+    POSITION_SET: string[];
+    TRIGGER_SET: string[];
+};
+declare const numbers: {
+    SPACING: number;
+    DEFAULT_Z_INDEX: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/popconfirm/constants.js

@@ -0,0 +1,14 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-popconfirm`,
+  POPOVER: `${BASE_CLASS_PREFIX}-popconfirm-popover`
+};
+const strings = {
+  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom']
+};
+const numbers = {
+  SPACING: 4,
+  DEFAULT_Z_INDEX: 1030
+};
+export { cssClasses, strings, numbers };

package/lib/es/popconfirm/popconfirmFoundation.d.ts

@@ -0,0 +1,18 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setVisible: (visible: boolean) => void;
+    updateConfirmLoading: (loading: boolean) => void;
+    updateCancelLoading: (loading: boolean) => void;
+    notifyConfirm: (e: any) => Promise<any> | void;
+    notifyCancel: (e: any) => Promise<any> | void;
+    notifyVisibleChange: (visible: boolean) => void;
+    notifyClickOutSide: (e: any) => void;
+}
+export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
+    init(): void;
+    destroy(): void;
+    handleCancel(e: any): void;
+    handleConfirm(e: any): void;
+    handleClickOutSide(e: any): void;
+    handleVisibleChange(visible: boolean): void;
+}

package/lib/es/popconfirm/popconfirmFoundation.js

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import BaseFoundation from '../base/foundation';
+import isPromise from '../utils/isPromise';
+export default class PopConfirmFoundation extends BaseFoundation {
+  init() {}
+
+  destroy() {}
+
+  handleCancel(e) {
+    const maybePromise = this._adapter.notifyCancel(e);
+
+    if (isPromise(maybePromise)) {
+      this._adapter.updateCancelLoading(true);
+
+      maybePromise.then(result => {
+        this.handleVisibleChange(false);
+
+        this._adapter.updateCancelLoading(false);
+      }, errors => {
+        this._adapter.updateCancelLoading(false);
+      });
+    } else {
+      this.handleVisibleChange(false);
+    }
+  }
+
+  handleConfirm(e) {
+    const maybePromise = this._adapter.notifyConfirm(e);
+
+    if (isPromise(maybePromise)) {
+      this._adapter.updateConfirmLoading(true);
+
+      maybePromise.then(result => {
+        this._adapter.updateConfirmLoading(false);
+
+        this.handleVisibleChange(false);
+      }, errors => {
+        this._adapter.updateConfirmLoading(false);
+      });
+    } else {
+      this.handleVisibleChange(false);
+    }
+  }
+
+  handleClickOutSide(e) {
+    this._adapter.notifyClickOutSide(e);
+  }
+
+  handleVisibleChange(visible) {
+    if (!this._isControlledComponent('visible')) {
+      this._adapter.setVisible(visible);
+    }
+
+    this._adapter.notifyVisibleChange(visible);
+  }
+
+}

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

@@ -0,0 +1,25 @@
+declare const cssClasses: {
+    PREFIX: string;
+    ARROW: string;
+};
+declare const strings: {
+    readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
+    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom"];
+    readonly DEFAULT_ARROW_STYLE: {
+        readonly borderOpacity: "1";
+        readonly backgroundColor: "var(--semi-color-bg-3)";
+        readonly borderColor: "var(--semi-color-border)";
+    };
+};
+declare const numbers: {
+    ARROW_BOUNDING: {
+        offsetY: number;
+        offsetX: number;
+        height: number;
+        width: 24;
+    };
+    SPACING: number;
+    SPACING_WITH_ARROW: number;
+    DEFAULT_Z_INDEX: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/popover/constants.js

@@ -0,0 +1,27 @@
+import { numbers as tooltipNumbers } from '../tooltip/constants';
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-popover`,
+  ARROW: `${BASE_CLASS_PREFIX}-popover-icon-arrow`
+};
+const strings = {
+  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  DEFAULT_ARROW_STYLE: {
+    borderOpacity: '1',
+    backgroundColor: 'var(--semi-color-bg-3)',
+    // borderColor: 'var(--semi-color-shadow)',
+    borderColor: 'var(--semi-color-border)'
+  }
+};
+const numbers = {
+  ARROW_BOUNDING: Object.assign(Object.assign({}, tooltipNumbers.ARROW_BOUNDING), {
+    offsetY: 6,
+    offsetX: 0,
+    height: 8
+  }),
+  SPACING: 4,
+  SPACING_WITH_ARROW: 10,
+  DEFAULT_Z_INDEX: 1030
+};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,15 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    types: string[];
+    DEFAULT_TYPE: string;
+    STROKE_DEFAULT: string;
+    strokeLineCap: string[];
+    DEFAULT_LINECAP: string;
+    sizes: string[];
+    DEFAULT_SIZE: string;
+    directions: string[];
+    DEFAULT_DIRECTION: string;
+};
+export { cssClasses, strings };

package/lib/es/progress/constants.js

@@ -0,0 +1,17 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-progress`
+};
+const strings = {
+  types: ['line', 'circle'],
+  DEFAULT_TYPE: 'line',
+  STROKE_DEFAULT: 'var(--semi-color-success)',
+  strokeLineCap: ['square', 'round'],
+  DEFAULT_LINECAP: 'round',
+  sizes: ['default', 'small', 'large'],
+  DEFAULT_SIZE: 'default',
+  directions: ['vertical', 'horizontal'],
+  DEFAULT_DIRECTION: 'horizontal'
+};
+const numbers = {};
+export { cssClasses, strings };

package/lib/es/progress/generates.d.ts

@@ -0,0 +1,7 @@
+declare type StrokeSet = {
+    percent: number;
+    color: string;
+};
+declare type StrokeArr = Array<StrokeSet>;
+declare function generateColor(s: StrokeArr, percent: number, gradient: boolean): string | undefined;
+export { generateColor, StrokeArr };