@kdcloudjs/kdesign 1.6.4 → 1.6.5-stable.1

package/es/steps/style/index.css

@@ -164,9 +164,6 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
 }
 .kd-steps-item-iconContainer {
   display: -webkit-box;
@@ -233,21 +230,11 @@
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-steps-color-wait, #999);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
 }
 .kd-steps-item-content .kd-steps-item-description {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-steps-color-wait, #999);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
 }
 .kd-steps-item-process {

package/es/steps/style/index.less

@@ -69,7 +69,6 @@
       width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
     }
 
     &-iconContainer {
@@ -126,22 +125,12 @@
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
       }
 
       .@{steps-prefix-cls}-item-description {
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
         width: @steps-vertical-description-sizing-width;
       }
     }

package/es/table/feature/mergeCellHover.d.ts

@@ -0,0 +1,3 @@
+import { TablePipeline } from '../interface';
+declare function mergeCellHover(pipeline: TablePipeline): void;
+export default mergeCellHover;

package/es/table/feature/mergeCellHover.js

@@ -0,0 +1,7 @@
+import { features } from '@kdcloudjs/table';
+
+function mergeCellHover(pipeline) {
+  pipeline.use(features.mergeCellHover());
+}
+
+export default mergeCellHover;

package/es/table/interface.d.ts

@@ -10,6 +10,14 @@ declare type TablePropsOfComponents = Pick<BaseTableProps, 'components'> & {
     };
 };
 declare type TablePropsOfExtend = Omit<BaseTableProps, 'components'>;
+export declare type TableApi = {
+    getColumns: () => any[];
+    getDataSource: () => any[];
+    getFooterDataSource: () => any[];
+};
+export declare type TableInstance = {
+    api: TableApi;
+};
 export interface TableProps extends TablePropsOfExtend, TablePropsOfComponents {
     rowSelection?: TableRowSelection;
     prefixCls?: string;

package/es/table/table.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableProps } from './interface';
-declare function Table(props: TableProps): JSX.Element;
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<unknown>>;
 export default Table;

package/es/table/table.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { Table as BaseTable, useTablePipeline } from '@kdcloudjs/table';
 import ConfigContext from '../config-provider/ConfigContext';
 import Checkbox from '../checkbox/index';
@@ -18,9 +18,9 @@ import useColumnResize from './feature/columnResize';
 import useColumnDrag from './feature/columnDrag';
 import useContextMenu from './feature/contextMenu';
 import useRangeSelection from './feature/useRangeSelection';
+import useＭergeCellHover from './feature/mergeCellHover';
 import devWarning from '../_utils/devwarning';
-
-function Table(props) {
+var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var columns = props.columns,
       dataSource = props.dataSource,
       columnDrag = props.columnDrag,
@@ -68,19 +68,32 @@ function Table(props) {
     columns: columns,
     dataSource: dataSource
   });
+  var pipelineRef = useRef(pipeline);
+  pipelineRef.current = pipeline;
 
   if (footerDataSource) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     pipeline.footerDataSource(footerDataSource);
   }
+
+  useImperativeHandle(ref, function () {
+    var _a, _b, _c;
+
+    return {
+      api: {
+        getColumns: (_a = pipelineRef.current.getColumns) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current),
+        getDataSource: (_b = pipelineRef.current.getDataSource) === null || _b === void 0 ? void 0 : _b.bind(pipelineRef.current),
+        getFooterDataSource: (_c = pipelineRef.current.getFooterDataSource) === null || _c === void 0 ? void 0 : _c.bind(pipelineRef.current)
+      }
+    };
+  });
   /* -------------------------------------------------------------------------- */
 
   /* features                                                                   */
 
   /* -------------------------------------------------------------------------- */
 
-
   useRowSelection(pipeline, rowSelection);
   useRowDetail(pipeline, rowDetail);
   useFilter(pipeline, filter);
@@ -91,6 +104,7 @@ function Table(props) {
   useColumnDrag(pipeline, columnDrag);
   useContextMenu(pipeline, contextMenu);
   useRangeSelection(pipeline, rangeSelection);
+  useＭergeCellHover(pipeline);
   /* -------------------------------------------------------------------------- */
 
   /* after useTablePipeline, merge pipeline.getProps result                     */
@@ -135,6 +149,6 @@ function Table(props) {
     scrollbarWidth: scrollbarWidth,
     scrollLoad: scrollLoad
   }));
-}
-
+});
+Table.displayName = 'Table';
 export default Table;

package/es/transfer/list.d.ts

@@ -32,5 +32,5 @@ export interface TransferListProps {
     showRemove?: boolean;
     pagination?: PaginationType;
 }
-declare const TransferList: React.FC<TransferListProps>;
+declare const TransferList: React.ForwardRefExoticComponent<TransferListProps & React.RefAttributes<unknown>>;
 export default TransferList;

package/es/transfer/list.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import React, { useState } from 'react';
+import React, { useState, useImperativeHandle } from 'react';
 import { omit } from '../_utils/omit';
 import Search from './search';
 import DefaultListBody, { OmitProps } from './list-body';
@@ -19,7 +19,7 @@ function isRenderResultPlainObject(result) {
   return result && ! /*#__PURE__*/React.isValidElement(result) && Object.prototype.toString.call(result) === '[object Object]';
 }
 
-var TransferList = function TransferList(props) {
+var ITransferList = function ITransferList(props, ref) {
   var _classNames;
 
   var prefixCls = props.prefixCls,
@@ -50,6 +50,11 @@ var TransferList = function TransferList(props) {
 
 
   var footerDom = footer && footer(props);
+  useImperativeHandle(ref, function () {
+    return {
+      onClear: onClear
+    };
+  });
 
   var renderItem = function renderItem(item) {
     var renderResult = render(item);
@@ -226,6 +231,7 @@ var TransferList = function TransferList(props) {
   }, getSelectAllLabel(checkedKeys.length, filteredItems.length))), listBody, listFooter);
 };
 
+var TransferList = /*#__PURE__*/React.forwardRef(ITransferList);
 TransferList.defaultProps = {
   dataSource: [],
   titleText: '',

package/es/transfer/transfer.d.ts

@@ -29,5 +29,5 @@ export interface TransferProps {
     pagination?: PaginationType;
     footer?: (props: TransferListProps) => React.ReactNode;
 }
-declare const Transfer: React.FC<TransferProps>;
+declare const Transfer: React.ForwardRefExoticComponent<TransferProps & React.RefAttributes<unknown>>;
 export default Transfer;

package/es/transfer/transfer.js

@@ -6,7 +6,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import List from './list';
 import Operation from './operation';
@@ -14,7 +14,7 @@ import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import noDataImg from './img/transfer-empty.png';
 
-var Transfer = function Transfer(props) {
+var InternalTransfer = function InternalTransfer(props, ref) {
   var _classNames;
 
   var _useContext = useContext(ConfigContext),
@@ -75,6 +75,8 @@ var Transfer = function Transfer(props) {
       targetSelectedKeys = _useState4[0],
       setTargetSelectedKeys = _useState4[1];
 
+  var leftListRef = useRef(null);
+  var rightListRef = useRef(null);
   var leftActive = targetSelectedKeys.length > 0;
   var rightActive = sourceSelectedKeys.length > 0;
   var mergedPagination = !children && pagination;
@@ -82,6 +84,25 @@ var Transfer = function Transfer(props) {
   var rightTitle = titles[1] || transferLang.rightTitle;
   var leftPlaceholder = searchPlaceholder[0] || transferLang.searchPlaceholder[0];
   var rightPlaceholder = searchPlaceholder[1] || transferLang.searchPlaceholder[1];
+  useImperativeHandle(ref, function () {
+    return {
+      clearSearch: clearSearch
+    };
+  });
+
+  var clearSearch = function clearSearch(position) {
+    var _a, _b;
+
+    if (position === 'left' || position === undefined) {
+      ;
+      (_a = leftListRef === null || leftListRef === void 0 ? void 0 : leftListRef.current) === null || _a === void 0 ? void 0 : _a.onClear();
+    }
+
+    if (position === 'right' || position === undefined) {
+      ;
+      (_b = rightListRef === null || rightListRef === void 0 ? void 0 : rightListRef.current) === null || _b === void 0 ? void 0 : _b.onClear();
+    }
+  };
 
   var setStateKeys = function setStateKeys(direction, keys) {
     if (direction === 'left') {
@@ -301,7 +322,8 @@ var Transfer = function Transfer(props) {
     showSelectAll: showSelectAll,
     pagination: mergedPagination,
     noDataContent: handleNoDataContent(noDataContent, 'left'),
-    footer: footer
+    footer: footer,
+    ref: leftListRef
   }), /*#__PURE__*/React.createElement(Operation, {
     className: "".concat(transferPrefixCls, "-operation"),
     rightActive: rightActive,
@@ -335,8 +357,11 @@ var Transfer = function Transfer(props) {
     pagination: mergedPagination,
     noDataContent: handleNoDataContent(noDataContent, 'right'),
     footer: footer,
-    showRemove: oneWay
+    showRemove: oneWay,
+    ref: rightListRef
   }));
 };
 
+var Transfer = /*#__PURE__*/React.forwardRef(InternalTransfer);
+Transfer.displayName = 'Transfer';
 export default Transfer;

package/es/upload/style/index.css

@@ -207,7 +207,6 @@
   visibility: visible;
   -webkit-transform: translateX(0);
           transform: translateX(0);
-  background-color: var(--kd-c-upload-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
 .kd-upload .kd-upload-text-list-item.error i,
 .kd-upload .kd-upload-text-list-item.error .kd-upload-text-list-item-name {
@@ -234,7 +233,7 @@
   padding: 0 var(--kd-c-upload-text-list-item-padding-horizontal, 20px);
   height: var(--kd-c-upload-list-item-height, 44px);
   line-height: var(--kd-c-upload-list-item-height, 44px);
-  background-color: transparent;
+  background: transparent;
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translateX(5px);

package/es/upload/style/index.less

@@ -80,7 +80,6 @@
           opacity: 1;
           visibility: visible;
           transform: translateX(0);
-          background-color: @upload-background-color-hover;
         }
       }
 
@@ -113,7 +112,7 @@
         padding: 0 @upload-text-list-item-padding-horizontal;
         height: @upload-list-item-height;
         line-height: @upload-list-item-height;
-        background-color: transparent;
+        background: transparent;
         opacity: 0;
         visibility: hidden;
         transform: translateX(5px);

package/lib/cascader/cascader.js

@@ -164,7 +164,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var handleClear = function handleClear() {
-    setValue([]);
+    onChange([]);
   };
 
   var inputProps = {
@@ -196,7 +196,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(_input.default, (0, _extends2.default)({}, inputProps)), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-picker-label")
   }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(_icon.default, {
-    type: "close",
+    type: "close-solid",
     className: "".concat(prefixCls, "-picker-close"),
     onClick: handleClear
   })));

package/lib/cascader/style/index.css

@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-clear-color-text, #666);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -196,6 +196,9 @@
   -webkit-transform: scale(0.9) translateY(-50%);
           transform: scale(0.9) translateY(-50%);
 }
+.kd-cascader-picker-close:hover {
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+}
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/lib/cascader/style/index.less

@@ -99,10 +99,14 @@
     opacity: 0;
     cursor: pointer;
     visibility: hidden;
-    color: @cascader-active-color;
+    color: @cascader-clear-color;
     transition: all 0.1s;
     transform-origin: 50% 50%;
     transform: scale(0.9) translateY(-50%);
+
+    &:hover {
+      color: @cascader-active-color;
+    }
   }
 }
 

package/lib/cascader/style/token.less

@@ -19,6 +19,7 @@
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #666);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/lib/input/style/index.css

@@ -225,7 +225,7 @@ textarea {
 .kd-input-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
@@ -318,7 +318,7 @@ textarea {
       -ms-flex-pack: center;
           justify-content: center;
   word-break: keep-all;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
 }
 .kd-input-wrapper .kd-input-suffix {
   margin-left: 4px;
@@ -472,7 +472,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;

package/lib/input/style/token.less

@@ -13,7 +13,7 @@
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
 @input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
-@input-affix-color: var(~'@{input-prefix}-affix-color-text', @color-text-primary);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/lib/locale/locale.d.ts

@@ -37,6 +37,8 @@ declare class LocaleCache {
         'Pagination.prevPage': string;
         'Pagination.nextPage': string;
         'Pagination.total': string;
+        'Pagination.page': string;
+        'Pagination.row': string;
         'Pagination.first': string;
         'Pagination.last': string;
         'Pagination.perPage': string;
@@ -62,9 +64,6 @@ declare class LocaleCache {
         'CityPicker.internation': string;
         'CityPicker.common': string;
         'CityPicker.noData': string;
-        /**
-         * 获取所有语言包数据
-         */
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;

package/lib/locale/zh-CN.d.ts

@@ -11,6 +11,8 @@ declare const locale: {
     'Pagination.prevPage': string;
     'Pagination.nextPage': string;
     'Pagination.total': string;
+    'Pagination.page': string;
+    'Pagination.row': string;
     'Pagination.first': string;
     'Pagination.last': string;
     'Pagination.perPage': string;

package/lib/locale/zh-CN.js

@@ -25,7 +25,9 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
   'Progress.success': '加载成功',
   'Pagination.prevPage': '上一页',
   'Pagination.nextPage': '下一页',
-  'Pagination.total': '共{total}页',
+  'Pagination.total': '共{page}页{row}条',
+  'Pagination.page': '共{page}页',
+  'Pagination.row': '共{row}条',
   'Pagination.first': '第一页',
   'Pagination.last': '最后一页',
   'Pagination.perPage': '{size}条/页',

package/lib/pagination/pagination.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { DropDownProps } from '../dropdown';
 export declare const PageTypes: ["basic", "bill", "simple", "less", "nicety"];
+export declare const TotalTypes: ["page", "row", "all"];
 export declare type pageType = typeof PageTypes[number];
+export declare type totalType = typeof TotalTypes[number];
 export interface IPaginationProps {
     total?: number;
     current?: number;
@@ -12,6 +14,7 @@ export interface IPaginationProps {
     bordered?: boolean;
     pageType?: pageType;
     showTitle?: boolean;
+    showTotal?: boolean | totalType;
     defaultCurrent?: number;
     defaultPageSize?: number;
     showSizeChanger?: boolean;

package/lib/pagination/pagination.js

@@ -11,7 +11,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PageTypes = void 0;
+exports.default = exports.TotalTypes = exports.PageTypes = void 0;
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
@@ -55,6 +55,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var PageTypes = (0, _type.tuple)('basic', 'bill', 'simple', 'less', 'nicety');
 exports.PageTypes = PageTypes;
+var TotalTypes = (0, _type.tuple)('page', 'row', 'all');
+exports.TotalTypes = TotalTypes;
 
 var Pagination = function Pagination(props) {
   var _context4;
@@ -236,14 +238,30 @@ var Pagination = function Pagination(props) {
       size: size
     }));
   }));
+  var mapShowTotal = {
+    basic: 'page',
+    nicety: 'row'
+  };
+  var mapTotalText = {
+    page: locale.getLangMsg('Pagination', 'page', {
+      page: totalPage
+    }),
+    row: locale.getLangMsg('Pagination', 'row', {
+      row: total
+    }),
+    all: locale.getLangMsg('Pagination', 'total', {
+      page: totalPage,
+      row: total
+    })
+  };
+  var showTotal = props.showTotal ? props.showTotal === true ? 'page' : props.showTotal : mapShowTotal[pageType];
+  var Total = showTotal && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-total")
+  }, mapTotalText[showTotal]);
   var normalPagination = /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)(prefixCls, className),
     style: style
-  }, pageType === 'basic' && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-total")
-  }, locale.getLangMsg('Pagination', 'total', {
-    total: totalPage
-  })), showJumper && /*#__PURE__*/React.createElement("span", {
+  }, Total, showJumper && /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, locale.getLangMsg('Pagination', 'order', {
     order: /*#__PURE__*/React.createElement("input", {
@@ -304,18 +322,20 @@ var Pagination = function Pagination(props) {
     type: "arrow-down",
     className: (0, _classnames.default)("".concat(prefixCls, "-dropdown-icon"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-dropdown-icon-open"), isOpen))
   })))));
-  var simplePagination = /*#__PURE__*/React.createElement("ul", {
-    className: (0, _classnames.default)(prefixCls, 'simple', {
+  var simplePagination = /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)(prefixCls, 'simple', className),
+    style: style
+  }, Total, /*#__PURE__*/React.createElement("ul", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-action"), {
       bordered: bordered,
       disabled: disabled
-    }, className),
-    style: style
-  }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
+    })
+  }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('action-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
     disabled: page === 1 || disabled
   }, /*#__PURE__*/React.createElement(_icon.default, {
     type: "arrow-left"
-  }))), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('item', (0, _concat.default)(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
+  }))), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('action-item', (0, _concat.default)(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, showJumper ? /*#__PURE__*/React.createElement("input", {
     type: "text",
@@ -327,12 +347,12 @@ var Pagination = function Pagination(props) {
     value: inputPage === undefined ? page : inputPage
   }) : page), "/ ", /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-total")
-  }, totalPage)), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
+  }, totalPage)), /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('action-item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handleNext,
     disabled: page === totalPage || disabled
   }, /*#__PURE__*/React.createElement(_icon.default, {
     type: "arrow-right"
-  }))));
+  })))));
   var lessPages = genArray(1, totalPage);
   var lessPagination = /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)(prefixCls, 'less', {
@@ -340,7 +360,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
@@ -385,7 +405,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", (0, _extends2.default)({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,