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

package/lib/cjs/pagination/foundation.js

@@ -4,67 +4,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _constants = require("./constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable max-len */
-
-/* eslint-disable no-param-reassign */
 class PaginationFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     const {
       currentPage,
       total,
       pageSize
-    } = this.getStates(); // If pageSize is set, pageSizeOpts does not work
-
+    } = 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;
@@ -72,96 +55,89 @@ class PaginationFoundation extends _foundation.default {
       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);
   }
-
+  updateAllPageNumbers(total, pageSize) {
+    // only need to update in small size
+    const {
+      size,
+      hoverShowPageSelect,
+      disabled
+    } = this.getProps();
+    if (size !== 'small' || !hoverShowPageSelect || disabled) {
+      return;
+    } else {
+      const pageNumbers = Array.from({
+        length: Math.ceil(total / pageSize)
+      }, (v, i) => i + 1);
+      this._adapter.updateAllPageNumbers(pageNumbers);
+    }
+  }
   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,
@@ -170,9 +146,7 @@ class PaginationFoundation extends _foundation.default {
     } = 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
@@ -190,14 +164,11 @@ class PaginationFoundation extends _foundation.default {
             - 当 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 = Array.from({
         length: totalPageNum
@@ -207,14 +178,13 @@ class PaginationFoundation extends _foundation.default {
     } else {
       switch (true) {
         case currentPage < 4:
-          pageList = [1, 2, 3, 4, '...', totalPageNum - 1, totalPageNum]; // length: (totalPageNum - 1) - 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({
@@ -222,13 +192,12 @@ class PaginationFoundation extends _foundation.default {
           }, (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
-
+          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);
@@ -236,7 +205,6 @@ class PaginationFoundation extends _foundation.default {
             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
@@ -247,51 +215,41 @@ class PaginationFoundation extends _foundation.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.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
-
+    } = 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
-
-
+  }
+  // TODO handle tab/enter events
+  handleKeyDown() {}
+  // If pageSize is not in the Opts array, insert it
   pageSizeInOpts() {
     const {
       pageSizeOpts
@@ -300,67 +258,52 @@ class PaginationFoundation extends _foundation.default {
       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 the user input is greater than totalPage
     if (page > totalPageNum) {
       page = totalPageNum;
     }
-
     if (page <= 0) {
       page = 1;
-    } // clear inputnumber
-
-
+    }
+    // clear inputnumber
     this._adapter.updateQuickJumpPage('');
-
     this.goPage(page);
   }
-
   handleQuickJumpBlur() {
     const {
       quickJumpPage
-    } = this.getStates(); // no need to operate when inputnumber blur & quickJumpPage is empty
-
+    } = 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

@@ -18,6 +18,12 @@
   color: var(--semi-color-text-2);
   padding: 0 0;
 }
+.semi-page-disabled {
+  cursor: not-allowed;
+}
+.semi-page-disabled .semi-page-total {
+  color: var(--semi-color-disabled-text);
+}
 .semi-page-item {
   font-size: 14px;
   line-height: 20px;
@@ -78,6 +84,23 @@
   min-width: 44px;
   margin: 0;
 }
+.semi-page-item-all-disabled {
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.semi-page-item-all-disabled:hover {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+.semi-page-item-all-disabled-active {
+  background-color: var(--semi-color-disabled-fill);
+  font-weight: 600;
+}
+.semi-page-item-all-disabled-active:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
 .semi-page-total {
   font-size: 14px;
   line-height: 20px;

package/lib/cjs/pagination/pagination.scss

@@ -20,6 +20,14 @@ $module: #{$prefix}-page;
         padding: $spacing-pagination_small-paddingY $spacing-pagination_small-paddingX;
     }
 
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-total {
+            color: $color-pagination_item-text-disabled;
+        }
+    }
+
     &-item {
         @include font-size-regular;
         min-width: $width-pagination_item-minWidth;
@@ -86,6 +94,27 @@ $module: #{$prefix}-page;
             min-width: $width-pagination_item_small-minWidth;
             margin: $spacing-pagination_item_small-margin;
         }
+
+        &-all-disabled {
+            border-color: $color-pagination_item-border-disabled;
+            color: $color-pagination_item-text-disabled;
+            background-color: $color-pagination_item-bg-disabled;
+            cursor: not-allowed;
+    
+            &:hover {
+                background-color: transparent;
+                color: $color-pagination_item-text-disabled;
+            }
+
+            &-active {
+                background-color: $color-pagination_item-bg-selected-disabled;
+                font-weight: $font-pagination_item_active-fontWeight;
+
+                &:hover {
+                    background-color: $color-pagination_item-bg-selected-disabled;
+                }
+            }
+        }
     }
 
     &-total {

package/lib/cjs/pagination/variables.scss

@@ -10,6 +10,7 @@ $color-pagination_item-bg-active: var(--semi-color-fill-1); // 翻页器 页码
 $color-pagination_item-text-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态文字颜色
 $color-pagination_item-icon-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态图标颜色
 $color-pagination_item-bg-disabled: transparent; // 翻页器 页码 禁用态背景颜色
+$color-pagination_item-bg-selected-disabled: var(--semi-color-disabled-fill); // 翻页器 页码 选中禁用态背景颜色
 $color-pagination_item-text-selected: var(--semi-color-primary); // 翻页器 页码 选中态文字颜色
 $color-pagination_item-bg-selected: var(--semi-color-primary-light-default); // 翻页器 页码 选中态背景颜色
 $color-pagination_quickjump_text-disabled: var(--semi-color-disabled-text); // 翻页器 快速跳转禁用态文字颜色

package/lib/cjs/popconfirm/constants.js

@@ -4,12 +4,10 @@ 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, "-popconfirm"),
-  POPOVER: "".concat(_constants.BASE_CLASS_PREFIX, "-popconfirm-popover")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-popconfirm`,
+  POPOVER: `${_constants.BASE_CLASS_PREFIX}-popconfirm-popover`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/popconfirm/popconfirm.css

@@ -11,17 +11,9 @@
   padding: 24px 24px 24px 20px;
   position: relative;
 }
-.semi-popconfirm-inner .semi-popconfirm-btn-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin-top: 24px;
-  margin-right: 24px;
-}
 .semi-popconfirm-header {
   display: flex;
   justify-content: flex-start;
-  margin-right: 68px;
 }
 .semi-popconfirm-header-title {
   font-size: 16px;
@@ -41,12 +33,15 @@
 }
 .semi-popconfirm-header-body {
   display: inline-flex;
+  flex-grow: 1;
   flex-direction: column;
 }
 .semi-popconfirm-body {
-  margin-left: 36px;
   color: var(--semi-color-text-2);
 }
+.semi-popconfirm-body-withIcon {
+  margin-left: 36px;
+}
 .semi-popconfirm-body > p {
   margin: 0;
   padding: 0;
@@ -66,10 +61,6 @@
 .semi-popover-with-arrow .semi-popconfirm-inner {
   padding: 12px 12px 12px 8px;
 }
-.semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-top: 12px;
-  margin-right: 12px;
-}
 
 .semi-popconfirm-rtl {
   direction: rtl;
@@ -77,15 +68,8 @@
 .semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 24px 20px 24px 24px;
 }
-.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  right: auto;
-  left: 0;
-  margin-right: 0;
-  margin-left: 24px;
-}
 .semi-popconfirm-rtl .semi-popconfirm-header {
   margin-right: 0;
-  margin-left: 68px;
 }
 .semi-popconfirm-rtl .semi-popconfirm-header-icon {
   margin-right: 0;
@@ -104,8 +88,4 @@
 }
 .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 12px 8px 12px 12px;
-}
-.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-right: 0;
-  margin-left: 12px;
 }

package/lib/cjs/popconfirm/popconfirm.scss

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,13 +40,15 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
 
     &-body {
-        margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
-
+        &-withIcon {
+            margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
+        }
         color: $color-popconfirm_body-text;
 
         & > p {
@@ -84,11 +77,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

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

@@ -7,6 +7,9 @@ export interface PopconfirmAdapter<P = Record<string, any>, S = Record<string, a
     notifyCancel: (e: any) => Promise<any> | void;
     notifyVisibleChange: (visible: boolean) => void;
     notifyClickOutSide: (e: any) => void;
+    focusCancelButton: () => void;
+    focusOkButton: () => void;
+    focusPrevFocusElement: () => void;
 }
 export default class PopConfirmFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PopconfirmAdapter<P, S>, P, S> {
     init(): void;
@@ -15,4 +18,5 @@ export default class PopConfirmFoundation<P = Record<string, any>, S = Record<st
     handleConfirm(e: any): void;
     handleClickOutSide(e: any): void;
     handleVisibleChange(visible: boolean): void;
+    handleFocusOperateButton(): void;
 }

package/lib/cjs/popconfirm/popconfirmFoundation.js

@@ -4,28 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+var _get2 = _interopRequireDefault(require("lodash/get"));
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable @typescript-eslint/no-empty-function */
 class PopConfirmFoundation extends _foundation.default {
   init() {}
-
   destroy() {}
-
   handleCancel(e) {
     const maybePromise = this._adapter.notifyCancel(e);
-
     if ((0, _isPromise.default)(maybePromise)) {
       this._adapter.updateCancelLoading(true);
-
       maybePromise.then(result => {
         this.handleVisibleChange(false);
-
         this._adapter.updateCancelLoading(false);
       }, errors => {
         this._adapter.updateCancelLoading(false);
@@ -34,16 +25,12 @@ class PopConfirmFoundation extends _foundation.default {
       this.handleVisibleChange(false);
     }
   }
-
   handleConfirm(e) {
     const maybePromise = this._adapter.notifyConfirm(e);
-
     if ((0, _isPromise.default)(maybePromise)) {
       this._adapter.updateConfirmLoading(true);
-
       maybePromise.then(result => {
         this._adapter.updateConfirmLoading(false);
-
         this.handleVisibleChange(false);
       }, errors => {
         this._adapter.updateConfirmLoading(false);
@@ -52,19 +39,30 @@ class PopConfirmFoundation extends _foundation.default {
       this.handleVisibleChange(false);
     }
   }
-
   handleClickOutSide(e) {
     this._adapter.notifyClickOutSide(e);
   }
-
   handleVisibleChange(visible) {
     if (!this._isControlledComponent('visible')) {
       this._adapter.setVisible(visible);
     }
-
+    if (visible) {
+      this.handleFocusOperateButton();
+    } else {
+      this._adapter.focusPrevFocusElement();
+    }
     this._adapter.notifyVisibleChange(visible);
   }
-
+  handleFocusOperateButton() {
+    const {
+      cancelButtonProps,
+      okButtonProps
+    } = this._adapter.getProps();
+    if ((0, _get2.default)(cancelButtonProps, 'autoFocus') && !(0, _get2.default)(cancelButtonProps, 'disabled')) {
+      this._adapter.focusCancelButton();
+    } else if ((0, _get2.default)(okButtonProps, 'autoFocus') && !(0, _get2.default)(okButtonProps, 'disabled')) {
+      this._adapter.focusOkButton();
+    }
+  }
 }
-
 exports.default = PopConfirmFoundation;