@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/overflowList/overflowList.css

@@ -0,0 +1,23 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-overflow-list {
+  display: flex;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+.semi-overflow-list-spacer {
+  flex-shrink: 1;
+  width: 1px;
+}
+.semi-overflow-list-scroll-wrapper {
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+}
+
+.semi-rtl .semi-overflow-list,
+.semi-portal-rtl .semi-overflow-list {
+  direction: rtl;
+}

package/lib/cjs/overflowList/overflowList.scss

@@ -0,0 +1,20 @@
+$module: #{$prefix}-overflow-list;
+
+.#{$module} {
+    display: flex;
+    flex-wrap: nowrap;
+    min-width: 0;
+    &-spacer {
+        flex-shrink: 1;
+        width: 1px;
+    }
+
+    &-scroll-wrapper {
+        display: flex;
+        flex: 1;
+        flex-wrap: nowrap;
+        overflow-x: scroll;
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/overflowList/rtl.scss

@@ -0,0 +1,8 @@
+$module: #{$prefix}-overflow-list;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+    }
+}

package/lib/cjs/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/cjs/pagination/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-page")
+};
+exports.cssClasses = cssClasses;
+const strings = {};
+exports.strings = 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
+};
+exports.numbers = numbers;

package/lib/cjs/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;

package/lib/cjs/pagination/foundation.js

@@ -0,0 +1,385 @@
+"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 _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _isNan = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/number/is-nan"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _constants = require("./constants");
+
+/* eslint-disable max-len */
+
+/* eslint-disable no-param-reassign */
+class PaginationFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, 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) {
+    var _context, _context2;
+
+    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
+    } = _constants.numbers;
+
+    if (totalPageNum <= PAGE_SHOW_MAX) {
+      pageList = (0, _from.default)({
+        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 = (0, _from.default)({
+            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 = (0, _from.default)({
+            length: Math.min(totalPageNum - 6, REST_PAGE_MAX_SIZE)
+          }, (v, i) => i + 6);
+          restLeftPageList = [];
+          break;
+
+        case 4 < currentPage && currentPage < totalPageNum - 3:
+          const middle = (0, _from.default)({
+            length: 3
+          }, (v, i) => currentPage + (i - 1));
+          pageList = (0, _concat.default)(_context = [1]).call(_context, '...', middle, '...', totalPageNum); // length: total-(currentPage+1)-1
+
+          restRightPageList = (0, _from.default)({
+            length: Math.min(totalPageNum - currentPage - 2, REST_PAGE_MAX_SIZE)
+          }, (v, i) => currentPage + i + 2);
+          restLeftPageList = (0, _from.default)({
+            length: Math.min(currentPage - 3, REST_PAGE_MAX_SIZE)
+          }, (v, i) => i + 2);
+          break;
+
+        case currentPage - 3 <= currentPage && currentPage <= totalPageNum:
+          const right = (0, _from.default)({
+            length: 5
+          }, (v, i) => totalPageNum - (4 - i));
+          pageList = (0, _concat.default)(_context2 = [1, '...']).call(_context2, right);
+          restRightPageList = [];
+          restLeftPageList = (0, _from.default)({
+            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 ((0, _indexOf.default)(newPageSizeOpts).call(newPageSizeOpts, pageSize) === -1) {
+      const firstLargerIndex = (0, _findIndex.default)(newPageSizeOpts).call(newPageSizeOpts, el => el > pageSize);
+      (0, _splice.default)(newPageSizeOpts).call(newPageSizeOpts, 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 ((0, _isNan.default)(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;
+  }
+
+}
+
+var _default = PaginationFoundation;
+exports.default = _default;

package/lib/cjs/pagination/pagination.css

@@ -0,0 +1,155 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-page {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  align-items: center;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+.semi-page-small {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  color: var(--semi-color-text-2);
+  padding: 0 0;
+}
+.semi-page-item {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  min-width: 32px;
+  border: 0px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  height: 32px;
+  margin-left: 4px;
+  margin-right: 4px;
+  font-weight: 400;
+  color: var(--semi-color-text-0);
+  border-radius: var(--semi-border-radius-small);
+  text-align: center;
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.semi-page-item:hover {
+  border-color: transparent;
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+.semi-page-item-rest-opening {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+.semi-page-item:active {
+  border-color: transparent;
+  background-color: var(--semi-color-fill-1);
+  color: var(--semi-color-text-0);
+}
+.semi-page-item-active {
+  border-color: transparent;
+  color: var(--semi-color-primary);
+  font-weight: 600;
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-page-item-active:hover {
+  border-color: transparent;
+  color: var(--semi-color-primary);
+  background-color: var(--semi-color-primary-light-default);
+}
+.semi-page-item-disabled {
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.semi-page-item-disabled:hover {
+  background-color: transparent;
+}
+.semi-page-item-small {
+  min-width: 44px;
+  margin: 0;
+}
+.semi-page-total {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: var(--semi-color-text-2);
+}
+.semi-page-prev, .semi-page-next {
+  color: var(--semi-color-tertiary);
+  cursor: pointer;
+}
+.semi-page-prev.semi-page-item-disabled, .semi-page-next.semi-page-item-disabled {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+.semi-page-quickjump {
+  margin-left: 24px;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--semi-color-text-0);
+}
+.semi-page-quickjump-input-number {
+  max-width: 50px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.semi-page-quickjump-disabled {
+  color: var(--semi-color-disabled-text);
+}
+.semi-page .semi-select {
+  user-select: none;
+}
+
+.semi-select-dropdown {
+  user-select: none;
+}
+
+.semi-page-rest-list {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.semi-page-rest-list > div {
+  position: relative;
+}
+.semi-page-rest-item {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.semi-page-rest-item:hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-page-rest-item:active {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi-rtl .semi-page,
+.semi-portal-rtl .semi-page {
+  direction: rtl;
+}
+.semi-rtl .semi-page-item,
+.semi-portal-rtl .semi-page-item {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.semi-rtl .semi-page-prev, .semi-rtl .semi-page-next,
+.semi-portal-rtl .semi-page-prev,
+.semi-portal-rtl .semi-page-next {
+  transform: scaleX(-1);
+}