@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.1-alpha.0

package/lib/cjs/overflowList/index.js

@@ -4,101 +4,73 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/overflowList/constants");
-
 var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
-
 var _intersectionObserver = _interopRequireDefault(require("./intersectionObserver"));
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/overflowList/foundation"));
-
 require("@douyinfe/semi-foundation/lib/cjs/overflowList/overflowList.css");
-
 var _utils = require("../_utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable arrow-body-style */
+
 const prefixCls = _constants.cssClasses.PREFIX;
 const Boundary = _constants.strings.BOUNDARY_MAP;
 const OverflowDirection = _constants.strings.OVERFLOW_DIR;
-const RenderMode = _constants.strings.MODE_MAP; // reference to https://github.com/palantir/blueprint/blob/1aa71605/packages/core/src/components/overflow-list/overflowList.tsx#L34
-
+const RenderMode = _constants.strings.MODE_MAP;
+// reference to https://github.com/palantir/blueprint/blob/1aa71605/packages/core/src/components/overflow-list/overflowList.tsx#L34
 class OverflowList extends _baseComponent.default {
   constructor(props) {
     var _this;
-
     super(props);
     _this = this;
     this.scroller = null;
     this.spacer = null;
-
     this.isScrollMode = () => {
       const {
         renderMode
       } = this.props;
       return renderMode === RenderMode.SCROLL;
     };
-
     this.resize = function () {
       let entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
       var _a;
-
       const containerWidth = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target.clientWidth;
-
       _this.setState({
         containerWidth,
         overflowStatus: 'calculating'
       });
     };
-
     this.reintersect = entries => {
       this.foundation.handleIntersect(entries);
     };
-
     this.mergeRef = (ref, node, key) => {
       this.itemRefs[key] = node;
-
       if (typeof ref === 'function') {
         ref(node);
       } else if (typeof ref === 'object' && ref && 'current' in ref) {
         ref.current = node;
       }
     };
-
     this.renderOverflow = () => {
       const overflow = this.foundation.getOverflowItem();
       return this.props.overflowRenderer(overflow);
     };
-
     this.getItemKey = (item, defaultKey) => {
       const {
         itemKey
       } = this.props;
-
       if ((0, _isFunction2.default)(itemKey)) {
         return itemKey(item);
       }
-
       return (0, _get2.default)(item, itemKey || 'key', defaultKey);
     };
-
     this.renderItemList = () => {
       const {
         className,
@@ -114,15 +86,12 @@ class OverflowList extends _baseComponent.default {
         overflowStatus
       } = this.state;
       let overflow = this.renderOverflow();
-
       if (!this.isScrollMode()) {
         if (Array.isArray(overflow)) {
           overflow = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, overflow);
         }
-
         if ( /*#__PURE__*/_react.default.isValidElement(overflow)) {
           const child = /*#__PURE__*/_react.default.cloneElement(overflow);
-
           overflow = /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
             onResize: _ref => {
               let [entry] = _ref;
@@ -136,7 +105,6 @@ class OverflowList extends _baseComponent.default {
           }, child));
         }
       }
-
       const inner = renderMode === RenderMode.SCROLL ? [overflow[0], /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(wrapperClassName, `${prefixCls}-scroll-wrapper`),
         ref: ref => {
@@ -159,9 +127,7 @@ class OverflowList extends _baseComponent.default {
           key
         } = item;
         const element = visibleItemRenderer(item, idx);
-
         const child = /*#__PURE__*/_react.default.cloneElement(element);
-
         return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
           key: key,
           onResize: _ref2 => {
@@ -173,7 +139,6 @@ class OverflowList extends _baseComponent.default {
           className: `${prefixCls}-item`
         }, child));
       }), collapseFrom === Boundary.END ? overflow : null];
-
       const list = /*#__PURE__*/_react.default.createElement('div', {
         className: (0, _classnames.default)(`${prefixCls}`, className),
         style: Object.assign(Object.assign({}, style), renderMode === RenderMode.COLLAPSE ? {
@@ -181,14 +146,11 @@ class OverflowList extends _baseComponent.default {
           visibility: overflowStatus === "calculating" ? "hidden" : "visible"
         } : null)
       }, ...inner);
-
       return list;
     };
-
     this.onItemResize = (entry, item, idx) => {
       const key = this.getItemKey(item, idx);
       const width = this.itemSizeMap.get(key);
-
       if (!width) {
         this.itemSizeMap.set(key, entry.target.clientWidth);
       } else if (width !== entry.target.clientWidth) {
@@ -198,19 +160,17 @@ class OverflowList extends _baseComponent.default {
           overflowStatus: 'calculating'
         });
       }
-
       const {
         maxCount
-      } = this.state; // 已经按照最大值maxCount渲染完毕，触发真正的渲染
+      } = this.state;
+      // 已经按照最大值maxCount渲染完毕，触发真正的渲染
       // Already rendered maxCount items, trigger the real rendering
-
       if (this.itemSizeMap.size === maxCount) {
         this.setState({
           overflowStatus: 'calculating'
         });
       }
     };
-
     this.state = {
       direction: OverflowDirection.GROW,
       lastOverflowCount: 0,
@@ -229,34 +189,28 @@ class OverflowList extends _baseComponent.default {
     this.itemRefs = {};
     this.itemSizeMap = new Map();
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const {
       prevProps
     } = prevState;
     const newState = {};
     newState.prevProps = props;
-
     const needUpdate = name => {
       return !prevProps && name in props || prevProps && !(0, _isEqual2.default)(prevProps[name], props[name]);
     };
-
     if (needUpdate('items') || needUpdate('style')) {
       // reset visible state if the above props change.
       newState.direction = OverflowDirection.GROW;
       newState.lastOverflowCount = 0;
       newState.maxCount = 0;
-
       if (props.renderMode === RenderMode.SCROLL) {
         newState.visible = props.items;
         newState.overflow = [];
       } else {
         let maxCount = props.items.length;
-
         if (Math.floor(prevState.containerWidth / _constants.numbers.MINIMUM_HTML_ELEMENT_WIDTH) !== 0) {
           maxCount = Math.min(maxCount, Math.floor(prevState.containerWidth / _constants.numbers.MINIMUM_HTML_ELEMENT_WIDTH));
         }
-
         const isCollapseFromStart = props.collapseFrom === Boundary.START;
         const visible = isCollapseFromStart ? (0, _utils.cloneDeep)(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
         const overflow = isCollapseFromStart ? (0, _utils.cloneDeep)(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
@@ -264,14 +218,11 @@ class OverflowList extends _baseComponent.default {
         newState.overflow = overflow;
         newState.maxCount = maxCount;
       }
-
       newState.pivot = -1;
       newState.overflowStatus = "calculating";
     }
-
     return newState;
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       updateVisibleState: visibleState => {
@@ -288,38 +239,32 @@ class OverflowList extends _baseComponent.default {
       getItemSizeMap: () => this.itemSizeMap
     });
   }
-
   componentDidUpdate(prevProps, prevState) {
     const prevItemsKeys = prevProps.items.map(item => item.key);
-    const nowItemsKeys = this.props.items.map(item => item.key); // Determine whether to update by comparing key values
-
+    const nowItemsKeys = this.props.items.map(item => item.key);
+    // Determine whether to update by comparing key values
     if (!(0, _isEqual2.default)(prevItemsKeys, nowItemsKeys)) {
       this.itemRefs = {};
       this.setState({
         visibleState: new Map()
       });
     }
-
     const {
       overflow,
       containerWidth,
       visible,
       overflowStatus
     } = this.state;
-
     if (this.isScrollMode() || overflowStatus !== "calculating") {
       return;
     }
-
     this.foundation.handleCollapseOverflow();
   }
-
   render() {
     const list = this.renderItemList();
     const {
       renderMode
     } = this.props;
-
     if (renderMode === RenderMode.SCROLL) {
       return /*#__PURE__*/_react.default.createElement(_intersectionObserver.default, {
         onIntersect: this.reintersect,
@@ -328,14 +273,11 @@ class OverflowList extends _baseComponent.default {
         items: this.itemRefs
       }, list);
     }
-
     return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
       onResize: this.resize
     }, list);
   }
-
 }
-
 OverflowList.defaultProps = {
   collapseFrom: 'end',
   minVisibleItems: 0,

package/lib/cjs/overflowList/intersectionObserver.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactUtils = require("../_base/reactUtils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class ReactIntersectionObserver extends _react.default.PureComponent {
   componentDidMount() {
     const {
@@ -37,63 +30,51 @@ class ReactIntersectionObserver extends _react.default.PureComponent {
     }, option));
     this.observeElement();
   }
-
   componentDidUpdate() {
     const {
       items
     } = this.props;
     const itemKeys = Object.keys(items);
-
     if (!(0, _isEqual2.default)(this.cachedKeys, itemKeys)) {
       this.observeElement(true);
       this.cachedKeys = itemKeys;
     }
   }
-
   componentWillUnmount() {
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
     }
   }
-
   observeElement() {
     let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     const {
       items
     } = this.props;
-
     if ((0, _isEmpty2.default)(items)) {
       // stop everything if not defined
       this.observer.disconnect();
       return;
     }
-
     if (force) {
       this.observer.disconnect();
-    } // observer callback is invoked immediately when observing new elements
-
-
+    }
+    // observer callback is invoked immediately when observing new elements
     Object.keys(items).forEach(key => {
       const node = items[key];
-
       if (!(node && (0, _reactUtils.isHTMLElement)(node))) {
         return;
       }
-
       this.observer.observe(node);
     });
   }
-
   render() {
     const {
       children
     } = this.props;
     return children;
   }
-
 }
-
 exports.default = ReactIntersectionObserver;
 ReactIntersectionObserver.propTypes = {
   onIntersect: _propTypes.default.func,

package/lib/cjs/pagination/index.d.ts

@@ -40,8 +40,8 @@ export interface PaginationState {
     restLeftPageList: number[];
     restRightPageList: number[];
 }
-export declare type PaginationLocale = Locale['Pagination'];
-export declare type PopoverPosition = Position;
+export type PaginationLocale = Locale['Pagination'];
+export type PopoverPosition = Position;
 export type { PageList };
 export default class Pagination extends BaseComponent<PaginationProps, PaginationState> {
     static contextType: React.Context<ContextValue>;

package/lib/cjs/pagination/index.js

@@ -4,51 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactWindow = require("react-window");
-
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/pagination/foundation"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/pagination/constants");
-
 require("@douyinfe/semi-foundation/lib/cjs/pagination/pagination.css");
-
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
-
 var _semiIcons = require("@douyinfe/semi-icons");
-
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
-
 var _context = _interopRequireDefault(require("../configProvider/context"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 var _index = _interopRequireDefault(require("../select/index"));
-
 var _index2 = _interopRequireDefault(require("../inputNumber/index"));
-
 var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
 var _index3 = _interopRequireDefault(require("../popover/index"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable max-len */
-
 /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
 const prefixCls = _constants.cssClasses.PREFIX;
 const {
   Option
 } = _index.default;
-
 class Pagination extends _baseComponent.default {
   constructor(props) {
     super(props);
@@ -69,7 +49,6 @@ class Pagination extends _baseComponent.default {
     this.renderSmallPage = this.renderSmallPage.bind(this);
     (0, _warning.default)(Boolean(props.showSizeChanger && props.hideOnSinglePage), '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears');
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       setPageList: pageListState => {
@@ -122,15 +101,12 @@ class Pagination extends _baseComponent.default {
       }
     });
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   componentDidUpdate(prevProps) {
     const pagerProps = {
       currentPage: this.props.currentPage,
@@ -138,24 +114,21 @@ class Pagination extends _baseComponent.default {
       pageSize: this.props.pageSize
     };
     let pagerHasChanged = false;
-
     if (prevProps.currentPage !== this.props.currentPage) {
-      pagerHasChanged = true; // this.foundation.updatePage(this.props.currentPage);
+      pagerHasChanged = true;
+      // this.foundation.updatePage(this.props.currentPage);
     }
 
     if (prevProps.total !== this.props.total) {
       pagerHasChanged = true;
     }
-
     if (prevProps.pageSize !== this.props.pageSize) {
       pagerHasChanged = true;
     }
-
     if (pagerHasChanged) {
       this.foundation.updatePage(pagerProps.currentPage, pagerProps.total, pagerProps.pageSize);
     }
   }
-
   renderPrevBtn() {
     const {
       prevText
@@ -179,7 +152,6 @@ class Pagination extends _baseComponent.default {
       size: "large"
     }));
   }
-
   renderNextBtn() {
     const {
       nextText
@@ -203,7 +175,6 @@ class Pagination extends _baseComponent.default {
       size: "large"
     }));
   }
-
   renderPageSizeSwitch(locale) {
     // rtl modify the default position
     const {
@@ -218,14 +189,12 @@ class Pagination extends _baseComponent.default {
       pageSize
     } = this.state;
     const switchCls = (0, _classnames.default)(`${prefixCls}-switch`);
-
     if (!showSizeChanger) {
       return null;
     }
-
     const newPageSizeOpts = this.foundation.pageSizeInOpts();
-    const pageSizeToken = locale.pageSize; // Display pageSize in a specific language format order
-
+    const pageSizeToken = locale.pageSize;
+    // Display pageSize in a specific language format order
     const options = newPageSizeOpts.map(size => /*#__PURE__*/_react.default.createElement(Option, {
       value: size,
       key: size
@@ -242,7 +211,6 @@ class Pagination extends _baseComponent.default {
       dropdownClassName: `${prefixCls}-select-dropdown`
     }, options));
   }
-
   renderQuickJump(locale) {
     const {
       showQuickJumper
@@ -252,13 +220,10 @@ class Pagination extends _baseComponent.default {
       total,
       pageSize
     } = this.state;
-
     if (!showQuickJumper) {
       return null;
     }
-
     const totalPageNum = this.foundation._getTotalPageNumber(total, pageSize);
-
     const isDisabled = totalPageNum === 1;
     const quickJumpCls = (0, _classnames.default)({
       [`${prefixCls}-quickjump`]: true,
@@ -276,7 +241,6 @@ class Pagination extends _baseComponent.default {
       onChange: v => this.foundation.handleQuickJumpNumberChange(v)
     }), /*#__PURE__*/_react.default.createElement("span", null, locale.page));
   }
-
   renderPageList() {
     const {
       pageList,
@@ -290,8 +254,8 @@ class Pagination extends _baseComponent.default {
     } = this.props;
     return pageList.map((page, i) => {
       const pageListClassName = (0, _classnames.default)(`${prefixCls}-item`, {
-        [`${prefixCls}-item-active`]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
-
+        [`${prefixCls}-item-active`]: currentPage === page
+        // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
       });
 
       const pageEl = /*#__PURE__*/_react.default.createElement("li", {
@@ -301,7 +265,6 @@ class Pagination extends _baseComponent.default {
         "aria-label": page === '...' ? 'More' : `Page ${page}`,
         "aria-current": currentPage === page ? "page" : false
       }, page);
-
       if (page === '...') {
         let content;
         i < 3 ? content = restLeftPageList : content = restRightPageList;
@@ -314,11 +277,9 @@ class Pagination extends _baseComponent.default {
           zIndex: popoverZIndex
         }, pageEl);
       }
-
       return pageEl;
     });
   }
-
   renderRestPageList(restList) {
     // The number of pages may be tens of thousands, here is virtualized with the help of react-window
     const {
@@ -326,7 +287,6 @@ class Pagination extends _baseComponent.default {
     } = this.context;
     const className = (0, _classnames.default)(`${prefixCls}-rest-item`);
     const count = restList.length;
-
     const row = item => {
       const {
         index,
@@ -342,7 +302,6 @@ class Pagination extends _baseComponent.default {
         "aria-label": `${page}`
       }, page);
     };
-
     const itemHeight = 32;
     const listHeight = count >= 5 ? itemHeight * 5 : itemHeight * count;
     return (
@@ -361,7 +320,6 @@ class Pagination extends _baseComponent.default {
       }, row)
     );
   }
-
   renderSmallPage(locale) {
     const {
       className,
@@ -377,20 +335,16 @@ class Pagination extends _baseComponent.default {
       pageSize
     } = this.state;
     const totalPageNum = Math.ceil(total / pageSize);
-
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
-
     const pageNumbers = Array.from({
       length: Math.ceil(total / pageSize)
     }, (v, i) => i + 1);
     const pageList = this.renderRestPageList(pageNumbers);
-
     const page = /*#__PURE__*/_react.default.createElement("div", {
       className: `${prefixCls}-item ${prefixCls}-item-small`
     }, currentPage, "/", totalPageNum, " ");
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: paginationCls,
       style: style
@@ -398,7 +352,6 @@ class Pagination extends _baseComponent.default {
       content: pageList
     }, page) : page, this.renderNextBtn(), this.renderQuickJump(locale));
   }
-
   renderDefaultPage(locale) {
     const {
       total,
@@ -414,11 +367,9 @@ class Pagination extends _baseComponent.default {
     const paginationCls = (0, _classnames.default)(className, `${prefixCls}`);
     const showTotalCls = `${prefixCls}-total`;
     const totalPageNum = Math.ceil(total / pageSize);
-
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
-
     const totalNum = Math.ceil(total / pageSize);
     const totalToken = locale.total.replace('${total}', totalNum.toString());
     return /*#__PURE__*/_react.default.createElement("ul", {
@@ -428,7 +379,6 @@ class Pagination extends _baseComponent.default {
       className: showTotalCls
     }, totalToken) : null, this.renderPrevBtn(), this.renderPageList(), this.renderNextBtn(), this.renderPageSizeSwitch(locale), this.renderQuickJump(locale));
   }
-
   render() {
     const {
       size
@@ -437,9 +387,7 @@ class Pagination extends _baseComponent.default {
       componentName: "Pagination"
     }, locale => size === 'small' ? this.renderSmallPage(locale) : this.renderDefaultPage(locale));
   }
-
 }
-
 exports.default = Pagination;
 Pagination.contextType = _context.default;
 Pagination.propTypes = {