@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Cascader/CascaderContext.d.ts

@@ -1,12 +1,18 @@
-/// <reference types="react" />
-import { CascaderMenuProps } from './typings';
+import { ReactNode } from 'react';
+import { CascaderMenuProps, CascaderNode } from './typings';
 interface CascaderContextProps {
     props: CascaderMenuProps;
     loading?: string;
     searchText?: string;
-    onSelect: (level: number, node: object) => void;
+    onSelect: (level: number, node: object, checkStrictly?: boolean) => void;
     onCheckedChange: (_level: number, node: object, checked: boolean) => void;
     getDataType: (level: number) => boolean;
+    nodeFormatter?: (params: {
+        node?: CascaderNode;
+        data?: any;
+    }) => ReactNode;
+    /** 自定义建议项格式化函数 */
+    suggestionItemFormatter?: (item: CascaderNode[]) => ReactNode;
 }
 export declare const CascaderContext: import("react").Context<CascaderContextProps>;
 export {};

package/dist/Cascader/CascaderContext.js

@@ -8,5 +8,7 @@ export var CascaderContext = /*#__PURE__*/createContext({
   props: {},
   getDataType: function getDataType() {
     return false;
-  }
+  },
+  nodeFormatter: null,
+  suggestionItemFormatter: null
 });

package/dist/Cascader/CascaderDropdown.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { OptionNode } from './typings';
+import { CascaderNode } from './typings';
 interface Props {
     /** 用于分隔选项的字符 */
     separator: string;
-    options: OptionNode[][];
+    options: CascaderNode[][];
     value: string[] | string[][];
-    checkedNodes: () => OptionNode[][];
+    checkedNodes: () => CascaderNode[][];
+    onClearSearch: () => void;
 }
 declare const CascaderDropdown: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export default CascaderDropdown;

package/dist/Cascader/CascaderDropdown.js

@@ -13,6 +13,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
 import last from 'lodash/last';
 import React, { memo, useContext, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import Icon from "../Icon/Icon";
 import Scrollbar from "../Scrollbar/Scrollbar";
 import { useClassNames } from "../hooks";
@@ -21,21 +23,27 @@ var CascaderDropdown = /*#__PURE__*/memo(function (props) {
   var _useContext = useContext(CascaderContext),
     menuProps = _useContext.props,
     onSelect = _useContext.onSelect,
-    onCheckedChange = _useContext.onCheckedChange;
+    onCheckedChange = _useContext.onCheckedChange,
+    suggestionItemFormatter = _useContext.suggestionItemFormatter;
   var options = props.options,
     separator = props.separator,
     value = props.value,
-    checkedNodes = props.checkedNodes;
-  var _menuProps$valueKey = menuProps.valueKey,
-    valueKey = _menuProps$valueKey === void 0 ? 'value' : _menuProps$valueKey,
-    _menuProps$labelKey = menuProps.labelKey,
-    labelKey = _menuProps$labelKey === void 0 ? 'label' : _menuProps$labelKey,
+    checkedNodes = props.checkedNodes,
+    onClearSearch = props.onClearSearch;
+  var _menuProps$value = menuProps.value,
+    valueKey = _menuProps$value === void 0 ? 'value' : _menuProps$value,
+    _menuProps$label = menuProps.label,
+    labelKey = _menuProps$label === void 0 ? 'label' : _menuProps$label,
     multiple = menuProps.multiple;
   var _useClassNames = useClassNames('cascader'),
     e = _useClassNames.e,
     is = _useClassNames.is;
   var ulRef = useRef(null);
   var scrollBarRef = useRef(null);
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useState = useState(multiple ? value.map(function (item) {
       return item.join(separator);
     }) : [value.join(separator)]),
@@ -68,14 +76,15 @@ var CascaderDropdown = /*#__PURE__*/memo(function (props) {
               onSelect(node.__level, node);
             });
           }
+          onClearSearch();
         }
-      }, /*#__PURE__*/React.createElement("span", null, item.map(function (node) {
+      }, suggestionItemFormatter ? suggestionItemFormatter(item) : item.map(function (node) {
         return node[labelKey];
-      }).join(separator)), multiple && checkedNode.includes(key) ? /*#__PURE__*/React.createElement(Icon, {
+      }).join(separator), multiple && checkedNode.includes(key) ? /*#__PURE__*/React.createElement(Icon, {
         name: "check"
       }) : null);
     });
-  }, [checkedNode, e, is, labelKey, multiple, onCheckedChange, onSelect, options, separator, valueKey]);
+  }, [checkedNode, e, is, labelKey, multiple, onCheckedChange, onClearSearch, onSelect, options, separator, valueKey, suggestionItemFormatter]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["dorpdown"])))),
     onClick: function onClick(event) {
@@ -89,6 +98,8 @@ var CascaderDropdown = /*#__PURE__*/memo(function (props) {
     ref: ulRef
   }, list, (options === null || options === void 0 ? void 0 : options.length) === 0 && /*#__PURE__*/React.createElement("li", {
     className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["empty-text"]))))
-  }, "\u6682\u65E0\u6570\u636E"))));
+  }, t('el.cascader.noMatch', {
+    lng: locale
+  })))));
 });
 export default CascaderDropdown;

package/dist/Cascader/CascaderMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { OptionNode } from './typings';
+import { CascaderNode } from './typings';
 interface Props {
-    data: OptionNode[];
+    data: CascaderNode[];
     level: number;
     value: string;
 }

package/dist/Cascader/CascaderMenu.js

@@ -7,9 +7,12 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 /* eslint-disable indent */
 import classNames from 'classnames';
 import React, { forwardRef, memo, useCallback, useContext, useImperativeHandle, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import Checkbox from "../Checkbox/Checkbox";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import Icon from "../Icon/Icon";
+import { Radio } from "../Radio";
 import Scrollbar from "../Scrollbar/Scrollbar";
 import { useClassNames } from "../hooks";
 import { CascaderContext } from "./CascaderContext";
@@ -22,20 +25,26 @@ var CascaderMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, r
     menuProps = _useContext.props,
     onSelect = _useContext.onSelect,
     onCheckedChange = _useContext.onCheckedChange,
-    loading = _useContext.loading;
-  var _menuProps$valueKey = menuProps.valueKey,
-    valueKey = _menuProps$valueKey === void 0 ? 'value' : _menuProps$valueKey,
-    _menuProps$labelKey = menuProps.labelKey,
-    labelKey = _menuProps$labelKey === void 0 ? 'label' : _menuProps$labelKey,
-    _menuProps$disabledKe = menuProps.disabledKey,
-    disabledKey = _menuProps$disabledKe === void 0 ? 'disabled' : _menuProps$disabledKe,
+    loading = _useContext.loading,
+    nodeFormatter = _useContext.nodeFormatter;
+  var _menuProps$value = menuProps.value,
+    valueKey = _menuProps$value === void 0 ? 'value' : _menuProps$value,
+    _menuProps$label = menuProps.label,
+    labelKey = _menuProps$label === void 0 ? 'label' : _menuProps$label,
+    _menuProps$disabled = menuProps.disabled,
+    disabledKey = _menuProps$disabled === void 0 ? 'disabled' : _menuProps$disabled,
     multiple = menuProps.multiple,
-    expandTrigger = menuProps.expandTrigger;
+    expandTrigger = menuProps.expandTrigger,
+    checkStrictly = menuProps.checkStrictly;
   var _useClassNames = useClassNames('cascader'),
     b = _useClassNames.b,
     be = _useClassNames.be,
     is = _useClassNames.is;
   var ulRef = useRef(null);
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _scrollToSelected = useCallback(function () {
     var _ulRef$current;
     if ((_ulRef$current = ulRef.current) !== null && _ulRef$current !== void 0 && (_ulRef$current = _ulRef$current.resizeRef) !== null && _ulRef$current !== void 0 && _ulRef$current.current) {
@@ -67,7 +76,7 @@ var CascaderMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, r
     return /*#__PURE__*/React.createElement("li", {
       key: item.__id,
       className: classNames(b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["node"]))), {
-        'in-active-path': multiple ? item.__checked || item.__indeterminate : value === item[valueKey]
+        'in-active-path': multiple ? item.__checked || item.__indeterminate || value === item[valueKey] : value === item[valueKey]
       }, is({
         disabled: item[disabledKey]
       })),
@@ -75,6 +84,9 @@ var CascaderMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, r
         if (!item[disabledKey]) {
           if (expandTrigger === 'click' || item.__leaf) {
             onSelect === null || onSelect === void 0 || onSelect(level, item);
+            if (item.__leaf && multiple) {
+              onCheckedChange === null || onCheckedChange === void 0 || onCheckedChange(level, item, !item.__checked);
+            }
           }
         }
       },
@@ -83,13 +95,34 @@ var CascaderMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, r
           onSelect === null || onSelect === void 0 || onSelect(level, item);
         }
       }
-    }, multiple && /*#__PURE__*/React.createElement(Checkbox, {
+    }, checkStrictly && !multiple && /*#__PURE__*/React.createElement(Radio, {
+      checked: item.__checked,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      onChange: function onChange(e) {
+        if (!item[disabledKey]) {
+          onSelect === null || onSelect === void 0 || onSelect(level, item, true);
+        }
+      }
+    }), multiple && /*#__PURE__*/React.createElement(Checkbox, {
       checked: item.__checked,
       indeterminate: item.__indeterminate,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
       onChange: function onChange(checked) {
-        return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(level, item, checked);
+        if (!item[disabledKey]) {
+          if (expandTrigger === 'click' || item.__leaf) {
+            onSelect === null || onSelect === void 0 || onSelect(level, item, checkStrictly);
+          }
+        }
+        onCheckedChange === null || onCheckedChange === void 0 || onCheckedChange(level, item, checked);
       }
-    }), /*#__PURE__*/React.createElement("span", {
+    }), nodeFormatter ? nodeFormatter === null || nodeFormatter === void 0 ? void 0 : nodeFormatter({
+      node: item,
+      data: item.data
+    }) : /*#__PURE__*/React.createElement("span", {
       className: be('node', 'label')
     }, item[labelKey]), !item.__leaf && loading !== item.__id && /*#__PURE__*/React.createElement(Icon, {
       name: "angle-right",
@@ -100,6 +133,15 @@ var CascaderMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, r
       spin: true,
       className: be('node', 'postfix')
     }));
-  }), (data === null || data === void 0 ? void 0 : data.length) === 0 && (loading ? '正在加载数据...' : '暂无数据!'));
-}));
+  }), (data === null || data === void 0 ? void 0 : data.length) === 0 && (loading ? t('el.cascader.loading', {
+    lng: locale
+  }) : t('el.cascader.noData', {
+    lng: locale
+  })));
+})
+// (prev, next) => {
+//     console.log(isEqual(prev, next));
+//     return isEqual(prev, next);
+// },
+);
 export default CascaderMenu;

package/dist/Cascader/CascaderPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CascaderPanelProps, CascaderRef } from './typings';
+declare const CascaderPanel: React.MemoExoticComponent<React.ForwardRefExoticComponent<CascaderPanelProps & React.RefAttributes<CascaderRef>>>;
+export default CascaderPanel;

package/dist/Cascader/CascaderPanel.js

@@ -0,0 +1,11 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef, memo } from 'react';
+import Cascader from "./Cascader";
+var CascaderPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Cascader, _extends({}, props, {
+    ref: ref,
+    panel: true
+  }));
+}));
+CascaderPanel.displayName = 'ElCascaderPanel';
+export default CascaderPanel;

package/dist/Cascader/index.d.ts

@@ -1,2 +1,5 @@
+import { CascaderPanelProps } from './typings';
 export { default as Cascader } from './Cascader';
-export type { CascaderMenuProps, CascaderProps } from './typings';
+export { default as CascaderPanel } from './CascaderPanel';
+export type { CascaderMenuProps, CascaderRef } from './typings';
+export type { CascaderPanelProps as CascaderProps };

package/dist/Cascader/index.js

@@ -1 +1,2 @@
-export { default as Cascader } from "./Cascader";
+export { default as Cascader } from "./Cascader";
+export { default as CascaderPanel } from "./CascaderPanel";

package/dist/Cascader/typings.d.ts

@@ -2,12 +2,12 @@ import React from 'react';
 import { InputRef } from '../Input/typings';
 import { PopperOptions } from '../Popper';
 import { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
-export type ValueType = string[] | string[][];
-export interface CascaderProps<V = ValueType, S = any> extends Omit<FormControlBaseProps<V>, 'onChange' | 'value' | 'defaultValue'>, BaseProps, NativeProps, AnimationEventProps, PopperOptions {
+export type CascaderValue = string[] | string[][];
+export interface CascaderProps<V = CascaderValue, S = any> extends Omit<FormControlBaseProps<V>, 'onChange' | 'value' | 'defaultValue'>, BaseProps, NativeProps, AnimationEventProps, PopperOptions {
     /** 初始值 */
-    defaultValue?: ValueType;
+    defaultValue?: CascaderValue;
     /** 值（可控） */
-    value?: ValueType;
+    value?: CascaderValue;
     /** 可选项数据源，键名可通过 Props 属性配置 */
     options?: any[];
     /** 配置选项 */
@@ -23,23 +23,9 @@ export interface CascaderProps<V = ValueType, S = any> extends Omit<FormControlB
     /** 是否可搜索 */
     filterable?: boolean;
     /** 自定义搜索方法 */
-    filterMethod?: (val: ValueType, searchText: string) => boolean;
+    filterMethod?: (val: CascaderValue, searchText: string) => boolean;
     /** 占位符 */
     placeholder?: string;
-    /** 选项为空时显示的文字 */
-    noDataText?: string;
-    /** 搜索条件无匹配时显示的文字 */
-    noMatchText?: string;
-    /** 是否正在从远程获取数据 */
-    loading?: boolean;
-    /** 远程加载时显示的文字 */
-    loadingText?: string;
-    /**  */
-    required?: boolean;
-    /** 表单校验错误提示 */
-    error?: boolean;
-    /** 表单校验警告提示 */
-    warning?: boolean;
     /** 多选时是否将选中值按文字的形式展示 */
     collapseTags?: boolean;
     /** 需要显示的 Tag 的最大数量 只有当 collapseTags 设置为 true 时才会生效。 */
@@ -60,13 +46,32 @@ export interface CascaderProps<V = ValueType, S = any> extends Omit<FormControlB
     append?: React.ReactElement | string | number;
     lable?: string;
     /** 是否追加到body下 */
-    appendToBody?: boolean;
+    /** 折叠标签的提示最大高度 */
+    maxCollapseTagsTooltipHeight?: string | number;
+    /** 是否显示成面板 */
+    panel?: boolean;
     /** 选中值发生变化时触发 */
-    onChange?: (value: ValueType, level?: number, label?: string | string[], node?: S[] | S[][]) => void;
+    onChange?: (value: CascaderValue, level?: number, label?: string | string[], node?: S[] | S[][]) => void;
+    /** 清空选项时触发 */
+    onClear?: () => void;
+    /** 可见性改变时触发 */
+    onVisibleChange?: (visible: boolean) => void;
+    /** 展开状态改变时触发 */
+    onExpandChange?: (node: CascaderNode) => void;
+    /** 移除标签时触发 */
+    onRemoveTag?: (node: CascaderNode) => void;
     /** 是否可以选择 */
     shouldSelect?: (node?: object, level?: number) => boolean;
     labelFormatter?: (level?: number, node?: object[]) => string;
+    /** 自定义节点格式化函数 */
+    nodeFormatter?: (params: {
+        node?: CascaderNode;
+        data?: any;
+    }) => React.ReactNode;
+    /** 自定义建议项格式化函数 */
+    suggestionItemFormatter?: (item: CascaderNode[]) => React.ReactNode;
 }
+export type CascaderPanelProps = Omit<CascaderProps, 'panel'>;
 export interface CascaderMenuProps {
     /** 次级菜单的展开方式 */
     expandTrigger?: 'click' | 'hover';
@@ -81,25 +86,29 @@ export interface CascaderMenuProps {
     /** 加载动态数据的方法，仅在 lazy 为 true 时有效 */
     lazyLoad?: (node: object, resolve?: (value: object[]) => void, reject?: () => void) => void;
     /** 指定选项的值为选项对象的某个属性值 */
-    valueKey?: string;
+    value?: string;
     /** 指定选项标签为选项对象的某个属性值 */
-    labelKey?: string;
+    label?: string;
     /** 指定选项的子选项为选项对象的某个属性值 */
-    childrenKey?: string;
+    children?: string;
     /** 指定选项的禁用为选项对象的某个属性值 */
-    disabledKey?: string;
+    disabled?: string;
     /** 指定选项的叶子节点的标志位为选项对象的某个属性值 */
-    leafKey?: string;
+    leaf?: string;
 }
 export interface CascaderRef {
-    inputInstance?: InputRef;
+    ref?: React.RefObject<HTMLDivElement>;
+    input?: React.RefObject<InputRef>;
+    presentText?: string;
     setLabel: (label: string) => void;
-    onClear: () => void;
+    clear: () => void;
     /** 重置懒加载的节点，适用于动态懒加载配置 */
     resetNodes: () => void;
-    setVisible: (visible: boolean) => void;
+    /** 获取选中的节点 */
+    getCheckedNodes: () => CascaderNode[][];
+    togglePopperVisible: (visible: boolean) => void;
 }
-export interface OptionNode extends Object {
+export interface CascaderNode extends Object {
     /**
      * 主键
      * @private
@@ -130,11 +139,16 @@ export interface OptionNode extends Object {
      * @private
      */
     __indeterminate?: boolean;
+    /**
+     * 节点数据
+     * @private
+     */
+    data?: object;
     /**
      * 时子节点集合
      * @private
      */
-    children?: OptionNode[];
+    children?: CascaderNode[];
     /**
      * 树形组件时子节点集合
      * @private

package/dist/Cascader/useCascader.d.ts

@@ -1,18 +1,17 @@
-import { Key } from '../Tree';
-import { CascaderProps, OptionNode } from './typings';
+import { CascaderNode, CascaderProps } from './typings';
 export declare const useCascader: (initialData: object[], props: CascaderProps, value: string[] | string[][]) => {
     /** 最高层级 */
     allLevel: number;
     /** 选项数据 */
-    optionData: Record<string, OptionNode[]>;
+    optionData: Record<string, CascaderNode[]>;
     /**
      * 懒加载时存储option
      * @param nodes
      * @param level 层级
      */
-    storeOptionData: (nodes: object[], level: number, parent: OptionNode, { isCover }: {
+    storeOptionData: (nodes: object[], level: number, parent: CascaderNode, { isCover }: {
         isCover?: boolean;
-    }) => OptionNode[];
+    }) => CascaderNode[];
     /**
      * 获取选中的值
      * @param level 层级
@@ -30,32 +29,33 @@ export declare const useCascader: (initialData: object[], props: CascaderProps,
      * @param level 层级
      * @returns
      */
-    getSelectedLabel: (labelFormatter?: (node?: OptionNode[]) => string) => string;
+    getSelectedLabel: (labelFormatter?: (node?: CascaderNode[]) => string) => string;
     /**
      * 设置任意层级节点的标签
      * @param level 层级
      * @param value
      */
-    setSelectedNode: (level: number, node: OptionNode) => void;
+    setSelectedNode: (level: number, node: CascaderNode) => void;
     setSelectedValue: (level: number, val: string) => void;
-    getSelectedNode: () => OptionNode[];
+    getSelectedNode: () => CascaderNode[];
     /**
      * 设置选中节点
      * @param level 层级
      * @param node 当前节点
      * @param checked 是否选中
      */
-    setCheckedNode: (level: number, node: OptionNode, checked: boolean) => void;
-    getCheckedNodes: () => OptionNode[][];
+    setCheckedNode: (level: number, node: CascaderNode, checked: boolean) => void;
+    setStrictlyCheckedNode: (level: number, node: CascaderNode, checked: boolean) => void;
+    getCheckedNodes: () => CascaderNode[][];
     getCheckedValue: () => string[][];
     getCheckedLabel: () => any[][];
-    loopGetParent: (level: number, node: OptionNode, result?: OptionNode[]) => OptionNode[];
+    loopGetParent: (level: number, node: CascaderNode, result?: CascaderNode[]) => CascaderNode[];
     /**
      * 获取任意节点的option数据
      * @param level 层级
      * @returns
      */
-    getOptions: (level: number) => OptionNode[];
+    getOptions: (level: number) => CascaderNode[];
     /** 清空值 */
     clearSelected: () => void;
     /**
@@ -63,26 +63,13 @@ export declare const useCascader: (initialData: object[], props: CascaderProps,
      * @param node
      * @param isLeaf
      */
-    setNodeLeaf: (node: OptionNode, isLeaf: boolean) => void;
+    setNodeLeaf: (node: CascaderNode, isLeaf: boolean) => void;
     /**
      * 获取数据类型
      * @param level 层级
      * @returns
      */
     getDataType: (level: number) => any;
-    /**
-     * 获取扩展key
-     * @param level 层级
-     * @returns
-     */
-    getExpandedKeys: (level: number) => Key[];
-    /**
-     * 设置扩展key
-     * @param level 层级
-     * @param keys
-     * @returns
-     */
-    setExpandedKeys: (level: number, keys: Key[]) => void;
-    handleSearch: (searchText: string) => OptionNode[][];
+    handleSearch: (searchText: string) => CascaderNode[][];
     resetNodes: () => void;
 };