@qsxy/element-plus-react 1.0.0-next.16 → 1.0.0-next.18

package/dist/Pagination/typings.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { BaseProps, NativeProps } from '../types/common';
+import { IconName } from '../Icon';
+import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface PaginationRef {
     /** 当前页数 */
     pageNum: number;
@@ -12,9 +13,13 @@ export interface PaginationRef {
 }
 export interface PaginationProps extends BaseProps, NativeProps {
     /** 当前页数 */
-    current?: number;
-    /** 默认的当前页数 */
-    defaultCurrent?: number;
+    currentPage?: number;
+    /** 当前页数的默认初始值，不设置时默认为 1 */
+    defaultCurrentPage?: number;
+    /** 分页大小 */
+    size?: TypeAttributes.Size;
+    /** 是否为分页按钮添加背景色 */
+    background?: boolean;
     /** 禁用分页 */
     disabled?: boolean;
     /** 数据总数 */
@@ -23,47 +28,41 @@ export interface PaginationProps extends BaseProps, NativeProps {
     defaultPageSize?: number;
     /** 每页条数 */
     pageSize?: number;
+    /** 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 */
+    pagerCount?: number;
     /** 指定每页可以显示多少条 */
-    pageSizeOptions?: Array<string>;
+    pageSizes?: Array<number>;
+    /** 组件布局，子组件名用逗号分隔 'prev, pager, next, sizes, jumper, ->, total' */
+    layout?: string;
+    /** 替代图标显示的上一页文字 */
+    prevText?: string;
+    /** 上一页的图标， 比 prevText 优先级更高 */
+    prevIcon?: IconName | React.ReactElement;
+    /** 替代图标显示的下一页文字 */
+    nextText?: string;
+    /** 下一页的图标， 比 nextText 优先级更高 */
+    nextIcon?: IconName | React.ReactElement;
     /** 只有一页时是否隐藏分页器 */
     hideOnSinglePage?: boolean;
-    /**  */
-    showPrevNextJumpers?: boolean;
     /** 是否可以快速跳转至某页 */
-    showQuickJumper?: boolean | {
-        goButton: React.ReactElement;
-    };
     /** 用于显示数据总量和当前数据顺序 */
     showTotal?: (total: number, [from, to]: [number, number]) => React.ReactElement | boolean | string;
-    /** 是否显示较少页面内容 */
-    showLessItems?: boolean;
-    /** 是否显示原生 tooltip 页码提示 */
-    showTitle?: boolean;
-    /** 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true */
-    showSizeChanger?: boolean;
+    /** currentPage 改变时触发 */
     /** pageSize 变化的回调 */
-    onShowSizeChange?: (current?: number, size?: number) => void;
-    /** 用于自定义页码的结构，可用于优化 SEO */
-    itemRender?: (page: number, type: PageType, element: React.ReactElement) => React.ReactElement<{
-        disabled?: boolean;
-    }>;
+    onSizeChange?: (pageSize: number, currentPage: number) => void;
     /** 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 */
-    onChange?: (current: number, pageSize: number) => void;
+    onChange?: (currentPage: number, pageSize: number) => void;
     /** 当添加该属性时，显示为简单分页 */
     simple?: boolean;
-    /** 当为 small 时，是小尺寸分页 */
-    size?: 'small';
 }
 export type PageType = 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
 export interface PagerProps extends BaseProps, NativeProps {
     /** 页数 */
     page: number;
-    /** 是否显示原生 tooltip 页码提示 */
-    showTitle?: boolean;
     /** 是否激活状态 */
     active?: boolean;
+    /** 是否禁用状态 */
+    disabled?: boolean;
     /** 点击事件 */
     onClick?: (page: number) => void;
-    /** 用于自定义页码的结构，可用于优化 SEO */
-    itemRender?: (current: number, type: PageType, element: React.ReactElement) => React.ReactElement;
 }

package/dist/Select/SelectCore.js

@@ -184,7 +184,7 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
   /** 动态计算下拉框宽度 */
   var handleEnter = useCallback(function (node) {
     if (visible && contentRef.current && containerRef.current) {
-      var _selectDropdownRef$cu;
+      var _selectDropdownRef$cu, _selectDropdownRef$cu2;
       var rect = containerRef.current.getBoundingClientRect();
       // const { width } = contentRef.current.getBoundingClientRect();
       var options = Array.from(contentRef.current.querySelectorAll(".".concat(be('dropdown', 'item'), ">span")));
@@ -203,13 +203,14 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
       }
       (_selectDropdownRef$cu = selectDropdownRef.current) === null || _selectDropdownRef$cu === void 0 || _selectDropdownRef$cu.scrollToSelected();
       onEnter === null || onEnter === void 0 || onEnter(node);
+      (_selectDropdownRef$cu2 = selectDropdownRef.current) === null || _selectDropdownRef$cu2 === void 0 || _selectDropdownRef$cu2.onEnter();
     }
   }, [be, onEnter, popperStyle, props.maxWidth, visible]);
 
   /** 关闭下拉框后清空搜索项 */
   var handleAfterLeave = useCallback(function (node) {
-    var _selectDropdownRef$cu2;
-    (_selectDropdownRef$cu2 = selectDropdownRef.current) === null || _selectDropdownRef$cu2 === void 0 || _selectDropdownRef$cu2.clear();
+    var _selectDropdownRef$cu3;
+    (_selectDropdownRef$cu3 = selectDropdownRef.current) === null || _selectDropdownRef$cu3 === void 0 || _selectDropdownRef$cu3.clear();
     afterLeave === null || afterLeave === void 0 || afterLeave(node);
   }, [afterLeave]);
 
@@ -245,10 +246,10 @@ var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
 
   /** 重置值 */
   var onClear = useCallback(function () {
-    var _selectDropdownRef$cu3;
+    var _selectDropdownRef$cu4;
     setValue(multiple ? [] : '');
     setLabel('');
-    (_selectDropdownRef$cu3 = selectDropdownRef.current) === null || _selectDropdownRef$cu3 === void 0 || _selectDropdownRef$cu3.hover('');
+    (_selectDropdownRef$cu4 = selectDropdownRef.current) === null || _selectDropdownRef$cu4 === void 0 || _selectDropdownRef$cu4.hover('');
     onChange === null || onChange === void 0 || onChange(multiple ? [] : '', multiple ? [] : '');
     setCreateItem('');
     onClearProp === null || onClearProp === void 0 || onClearProp();

package/dist/Select/SelectDropdown.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -9,7 +9,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import trim from 'lodash/trim';
 import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import scrollIntoView from 'scroll-into-view-if-needed';
 import { Divider } from "../Divider";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
@@ -24,6 +23,9 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$multiple = props.multiple,
     multiple = _props$multiple === void 0 ? false : _props$multiple,
     filterMethod = props.filterMethod,
+    _props$remote = props.remote,
+    remote = _props$remote === void 0 ? false : _props$remote,
+    remoteMethod = props.remoteMethod,
     loadingText = props.loadingText,
     noMatchText = props.noMatchText,
     noDataText = props.noDataText,
@@ -40,6 +42,7 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     be = _useClassNames.be,
     is = _useClassNames.is;
   var ulRef = useRef(null);
+  var remoteSearchRef = useRef(null);
 
   // 下拉项高亮
   var _useState = useState(value),
@@ -51,6 +54,8 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     searchText = _useState4[0],
     setSearchText = _useState4[1];
+  // const [remoteSearch, setRemoteSearch] = useState('');
+  // const remoteSearch = useMemo(() => searchInstance.current?.getValue(), [searchInstance]);
 
   /** 搜索时 */
   useEffect(function () {
@@ -77,6 +82,11 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     setSearchText(keywords);
   }, [searchText]);
+
+  /** 搜索 */
+  var onRemote = useCallback(function (val) {
+    remoteMethod === null || remoteMethod === void 0 || remoteMethod(val);
+  }, [remoteMethod]);
   var filterAction = useCallback(function (p) {
     if (isNotEmpty(searchText) && isNotEmpty(p.value)) {
       if (filterMethod) {
@@ -94,19 +104,33 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [filterMethod, searchText]);
   var scrollToSelected = useCallback(function () {
-    var _ulRef$current;
-    var node = (_ulRef$current = ulRef.current) === null || _ulRef$current === void 0 ? void 0 : _ulRef$current.querySelectorAll('.selected');
-    if (node && node.length > 0) {
-      scrollIntoView(node[0], {
-        scrollMode: 'if-needed',
-        block: 'center'
-      });
-    }
+    // const node = ulRef.current?.querySelectorAll('.selected');
+    // if (node && node.length > 0) {
+    //     scrollIntoView(node[0], {
+    //         scrollMode: 'if-needed',
+    //         block: 'center',
+    //     });
+    // }
   }, []);
+
+  // useEffect(() => {
+  //     if (remoteSearch == '') {
+  //         remoteMethod?.('');
+  //     }
+  // }, [remoteSearch]);
+
   useImperativeHandle(ref, function () {
     return {
       clear: function clear() {
-        return setSearchText('');
+        setSearchText('');
+        remoteMethod === null || remoteMethod === void 0 || remoteMethod('');
+      },
+      onEnter: function onEnter() {
+        setTimeout(function () {
+          var _searchInstance$curre, _remoteSearchRef$curr;
+          (_searchInstance$curre = searchInstance.current) === null || _searchInstance$curre === void 0 || _searchInstance$curre.focus();
+          (_remoteSearchRef$curr = remoteSearchRef.current) === null || _remoteSearchRef$curr === void 0 || _remoteSearchRef$curr.focus();
+        }, 500);
       },
       hover: setHover,
       scrollToSelected: scrollToSelected
@@ -195,7 +219,7 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
       return event.stopPropagation();
     },
     ref: contentRef
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, filterable && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, filterable && !remote ? /*#__PURE__*/React.createElement("div", {
     className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["search"]))),
     onClick: function onClick(event) {
       return event.stopPropagation();
@@ -204,8 +228,9 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: searchInstance,
     placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
     clearable: true,
-    plain: true,
-    debounceInput: true,
+    plain: true
+    // debounceInput
+    ,
     onClear: onClearSearch,
     onChange: onSearch,
     prefix: /*#__PURE__*/React.createElement(Icon, {
@@ -216,7 +241,32 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
     style: {
       margin: 0
     }
-  })), /*#__PURE__*/React.createElement(SelectContext.Provider, {
+  })) : null, filterable && remote ? /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["search"]))),
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: remoteSearchRef
+    // value={remoteSearch}
+    ,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
+    clearable: true,
+    plain: true,
+    debounceInput: true,
+    onClear: function onClear() {
+      return onRemote('');
+    },
+    onChange: onRemote,
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      prefix: "fal",
+      name: "search"
+    })
+  }), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      margin: 0
+    }
+  })) : null, /*#__PURE__*/React.createElement(SelectContext.Provider, {
     value: {
       value: value,
       onChoose: onChoose,

package/dist/Select/typings.d.ts

@@ -70,6 +70,10 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     size?: TypeAttributes.Size;
     /** 是否追加到body下 */
     appendToBody?: boolean;
+    /** 其中的选项是否从服务器远程加载 */
+    remote?: boolean;
+    /** 自定义搜索方法 */
+    remoteMethod?: (searchText: string) => void;
     /** 标签类型 */
     tagType?: TypeAttributes.Appearance;
     /** 标签效果 */
@@ -112,6 +116,7 @@ export interface SelectDropdownProps extends SelectProps {
 }
 export interface SelectDropdownRef {
     clear: () => void;
+    onEnter: () => void;
     hover: (value: ValueType) => void;
     scrollToSelected: () => void;
 }

package/dist/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
 import { TableProps, TableRef } from './typings';
 declare const ForwardTable: <RecordType extends object = any>(props: TableProps<RecordType> & {
-    ref?: React.Ref<TableRef<RecordType>>;
+    ref?: Ref<TableRef<RecordType>>;
 }) => React.ReactElement;
 type InternalTableType = typeof ForwardTable;
 interface TableInterface extends InternalTableType {

package/dist/Table/hooks/useSelection.d.ts

@@ -12,7 +12,7 @@ export declare const useSelection: <T>(props: TableProps<T>, data: T[]) => {
     };
     dispatch: import("react").Dispatch<Action>;
     oldActiveRow: import("react").MutableRefObject<T>;
-    setCurrentRow: (row?: T) => void;
+    setCurrentRow: (row?: T | null) => void;
     disabledRows: import("react").MutableRefObject<T[]>;
     toggleRowSelection: (row: T, selected: boolean) => void;
     toggleAllSelection: () => void;
@@ -33,10 +33,10 @@ export interface Action {
  * @param payload
  * @returns
  */
-export declare const activeRow: <T>(payload: T) => Action;
+export declare const activeRow: <T>(payload: State<T>['currentRow']) => Action;
 /**
  * 多选模式下选中行
  * @param payload
  * @returns
  */
-export declare const onCheck: <T>(payload: Pick<State<T>, "selection" | "isIndeterminate">) => Action;
+export declare const onCheck: <T>(payload: Pick<State<T>, 'isIndeterminate' | 'selection'>) => Action;

package/dist/Table/util.d.ts

@@ -10,10 +10,8 @@ export declare const TableIdManager: {
 export declare const getStyle: (element: HTMLElement, styleName: keyof React.CSSProperties) => string;
 export declare let removePopper: () => void | undefined;
 export declare function createTablePopper(parentNode: HTMLElement | undefined, trigger: HTMLElement, popperContent: string, tooltipRef: React.MutableRefObject<TooltipRef>): void;
-export declare const getRowIdentity: <T>(row: T, rowKey: string | ((data: {
-    row: T;
-}) => string)) => string;
-export declare const getRowIndex: <T>(index: number | ((index: number, row?: T) => number), rowIndex: number, row: T) => number;
+export declare const getRowIdentity: <T>(row: T, rowKey: TableProps<T>['rowKey']) => string;
+export declare const getRowIndex: <T>(index: TableColumnCtx<T>['index'], rowIndex: number, row: T) => number;
 export declare function parseHeight(height: number | string): string | number;
 /**
  *  ��д�߼�

package/dist/Transfer/ListBody.js

@@ -86,7 +86,7 @@ var ListBody = function ListBody(props) {
         className: b(_templateObject || (_templateObject = _taggedTemplateLiteral(["pagination"]))),
         total: filteredRenderItems.length,
         pageSize: mergedPagination.pageSize,
-        current: current,
+        currentPage: current,
         onChange: onPageChange
       });
     }

package/dist/TreeSelect/TreeSelect.d.ts

@@ -1,6 +1,6 @@
 import React, { RefObject } from 'react';
 import { TreeSelectProps, TreeSelectRef } from './typings';
-declare const ForwardTreeSelect: <RecordType extends object = any>(props: TreeSelectProps<RecordType, string | number | readonly string[]> & {
+declare const ForwardTreeSelect: <RecordType extends object = any>(props: TreeSelectProps<RecordType> & {
     ref?: RefObject<TreeSelectRef>;
 }) => React.ReactElement;
 type InternalDirectoryTreeType = typeof ForwardTreeSelect;