@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/lib/ProTreeSelect/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { PropTreeSelectProps } from './propsType';
-export declare const ProTreeSelect: (props: PropTreeSelectProps, ref: React.Ref<unknown> | undefined) => React.JSX.Element;
+export declare const ProTreeSelect: (props: PropTreeSelectProps, ref: React.Ref<unknown> | undefined) => JSX.Element;
 declare const _default: React.ForwardRefExoticComponent<PropTreeSelectProps & React.RefAttributes<unknown>>;
 export default _default;

package/lib/ProTreeSelect/index.js

@@ -1,35 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ProTreeSelect = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _ahooks = require("ahooks");
 var _antd = require("antd");
-var _react = _interopRequireWildcard(require("react"));
+var _classnames3 = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _lodash = require("lodash");
-var _zatDesignProComponent = require("zat-design-pro-component");
+var _ProConfigProvider = require("../ProConfigProvider");
 var _Container = _interopRequireDefault(require("../ProForm/components/Container"));
-var _excluded = ["disabled", "code", "dataSource", "defaultDisableValue", "onChange", "useRequest", "updateDataSource", "transformResponse", "fieldNames", "tooltip", "showSearch", "filterTreeNode", "treeNodeFilterProp", "treeDefaultExpandAll", "treeCheckable", "onSearch", "otherProps", "width", "dropdownStyle", "style", "allowClear", "listHeight", "showCodeName"],
+var _excluded = ["disabled", "code", "dataSource", "defaultDisableValue", "onChange", "useRequest", "transformResponse", "fieldNames", "tooltip", "showSearch", "filterTreeNode", "treeNodeFilterProp", "treeDefaultExpandAll", "treeCheckable", "onSearch", "otherProps", "width", "dropdownStyle", "popupClassName", "style", "allowClear", "listHeight", "showCodeName", "className"],
   _excluded2 = ["children"];
-/*
- *@Date: 2023-05-19 13:31:48
- *@LastEditTime: 2023-05-19 13:31:48
- *@Author: liudongliang
- *@Description: 树选择组件
-*/
 var SHOW_PARENT = _antd.TreeSelect.SHOW_PARENT;
-var ProTreeSelect = function ProTreeSelect(props, ref) {
+var ProTreeSelect = exports.ProTreeSelect = function ProTreeSelect(props, ref) {
+  var _classnames2;
   // 全局属性配置在ConfigProvider
-  var _ref = (0, _zatDesignProComponent.useProConfig)('ProTreeSelect') || {},
+  var _ref = (0, _ProConfigProvider.useProConfig)('ProTreeSelect') || {},
     _ref$fieldNames = _ref.fieldNames,
     proSelectFieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames;
-  var _useProConfig = (0, _zatDesignProComponent.useProConfig)('ProEnum'),
+  var _useProConfig = (0, _ProConfigProvider.useProConfig)('ProEnum'),
     _useProConfig$dics = _useProConfig.dics,
     dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
   var label = 'label';
@@ -45,7 +42,6 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
     defaultDisableValue = props.defaultDisableValue,
     onChange = props.onChange,
     useRequest = props.useRequest,
-    updateDataSource = props.updateDataSource,
     transformResponse = props.transformResponse,
     fieldNames = props.fieldNames,
     _props$tooltip = props.tooltip,
@@ -63,12 +59,15 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
     otherProps = props.otherProps,
     width = props.width,
     dropdownStyle = props.dropdownStyle,
+    popupClassName = props.popupClassName,
     style = props.style,
     allowClear = props.allowClear,
     listHeight = props.listHeight,
     showCodeName = props.showCodeName,
+    className = props.className,
     selectProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var value = props.value;
+  var _props$value = props.value,
+    value = _props$value === void 0 ? undefined : _props$value;
   var _ref2 = otherProps || {},
     isView = _ref2.isView,
     viewEmpty = _ref2.viewEmpty;
@@ -139,12 +138,25 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
     }
     return copyData;
   };
+  var defaultOnSuccessFun = function defaultOnSuccessFun(res) {
+    var _res$status = res.status,
+      status = _res$status === void 0 ? 200 : _res$status,
+      msg = res.message,
+      data = res.data;
+    if (status !== 200) {
+      _antd.message.error(msg);
+      return;
+    }
+    setState({
+      selectList: data || [],
+      origDataSource: data || []
+    });
+  };
   // 配置了异步数据源，拉取枚举数据逻辑 如果有code不掉接口从local里根据code取值
   var fetchFunction = (0, _ahooks.useRequest)(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, (0, _objectSpread2.default)({
     manual: true,
     onSuccess: function onSuccess(data) {
       // 用户配置了处理枚举函数
-      // console.log('异步加载数据成功', data);
       if (transformResponse && typeof transformResponse === 'function') {
         var responseData = transformResponse(data);
         var resultData = transferDataSource(responseData, showCodeName);
@@ -152,6 +164,8 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
           selectList: countChild(resultData),
           origDataSource: resultData
         });
+      } else {
+        defaultOnSuccessFun(data);
       }
     },
     debounceWait: 300
@@ -198,13 +212,14 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
   }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, defaultDisableValue]);
   // disable默认值
   if (defaultDisableValue) {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      title: defaultDisableValue
-    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
-      disabled: true,
-      defaultValue: defaultDisableValue,
-      style: props === null || props === void 0 ? void 0 : props.style
-    }));
+    return (0, _jsxRuntime.jsx)("span", {
+      title: defaultDisableValue,
+      children: (0, _jsxRuntime.jsx)(_antd.Input, {
+        disabled: true,
+        defaultValue: defaultDisableValue,
+        style: props === null || props === void 0 ? void 0 : props.style
+      })
+    });
   }
   /**
    * 根据值进行回显
@@ -234,75 +249,88 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
   // 纯展示处理
   if (isView || props.isView) {
     if (Array.isArray(value)) {
-      return /*#__PURE__*/_react.default.createElement(_Container.default, {
+      return (0, _jsxRuntime.jsx)(_Container.default, {
         tooltip: true,
-        viewEmpty: viewEmpty
-      }, transToLabel(value));
+        viewEmpty: viewEmpty,
+        children: transToLabel(value)
+      });
     }
-    return /*#__PURE__*/_react.default.createElement(_Container.default, {
-      viewEmpty: viewEmpty
-    }, value ? transToLabel([value]) : null);
+    return (0, _jsxRuntime.jsx)(_Container.default, {
+      viewEmpty: viewEmpty,
+      children: value ? transToLabel([value]) : null
+    });
   }
   var Icon = function Icon() {
-    return /*#__PURE__*/_react.default.createElement("svg", {
+    return (0, _jsxRuntime.jsx)("svg", {
       className: "icon",
-      viewBox: "0 0 1024 1024",
+      viewBox: "0 0 1433 1024",
       version: "1.1",
       xmlns: "http://www.w3.org/2000/svg",
-      "p-id": "3598",
+      "p-id": "2318",
       width: "1em",
-      height: "1em"
-    }, /*#__PURE__*/_react.default.createElement("path", {
-      d: "M228.288 468.864l220.16 220.16 397.568-397.568 45.248 45.248-442.88 442.88L183.04 514.048z",
-      "p-id": "3599",
-      fill: "currentColor"
-    }));
+      height: "1em",
+      children: (0, _jsxRuntime.jsx)("path", {
+        d: "M209.92 337.2032l362.0864 361.984L1223.68 47.5136l144.7936 144.896-796.4672 796.4672-506.88-506.88z",
+        "p-id": "2319",
+        fill: "currentColor"
+      })
+    });
   };
   /**
-   * <svg t="1684480846438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3598" width="200" height="200"><path d="M228.288 468.864l220.16 220.16 397.568-397.568 45.248 45.248-442.88 442.88L183.04 514.048z" p-id="3599"></path></svg>
    * 自定义渲染子树
    * @param node 每个节点数据对象
    * @returns 整个react节点树
    */
   var renderTreeNode = function renderTreeNode(node, grade) {
     var children = node.children,
-      icon = node.icon;
+      icon = node.icon,
+      hideNodeClass = node.hideNodeClass;
     var labelText = node[label];
-    var titleHtml = /*#__PURE__*/_react.default.createElement("span", {
+    var value = node[code];
+    var titleHtml = (0, _jsxRuntime.jsx)("span", {
       dangerouslySetInnerHTML: {
         __html: labelText
       }
     });
-    var title = treeCheckable ? titleHtml : /*#__PURE__*/_react.default.createElement("span", {
-      className: "check-option-text"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "check-option-text-content"
-    }, titleHtml), /*#__PURE__*/_react.default.createElement("span", {
-      className: "check-mark-icon"
-    }, /*#__PURE__*/_react.default.createElement(Icon, null)));
-    var value = node[code];
+    var searchKey = '';
+    if (showCodeName) {
+      searchKey = "".concat(value, "-").concat(labelText);
+    } else {
+      searchKey = labelText;
+    }
+    var title = treeCheckable ? titleHtml : (0, _jsxRuntime.jsxs)("span", {
+      className: "check-option-text",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "check-option-text-content",
+        children: titleHtml
+      }), (0, _jsxRuntime.jsx)("span", {
+        className: "check-mark-icon",
+        children: (0, _jsxRuntime.jsx)(Icon, {})
+      })]
+    });
     if (!children) {
-      return /*#__PURE__*/_react.default.createElement(_antd.TreeSelect.TreeNode, {
-        key: value,
+      return (0, _jsxRuntime.jsx)(_antd.TreeSelect.TreeNode, {
         value: value,
         title: title,
+        label: searchKey,
         disabled: node.disabled,
         checkable: node.checkable,
         icon: icon,
-        className: "za-pro-tree-select-node-".concat(grade)
-      });
+        className: "node-val-".concat(value)
+      }, value);
     }
     var sonGrade = grade + 1;
-    return /*#__PURE__*/_react.default.createElement(_antd.TreeSelect.TreeNode, {
-      key: value,
+    return (0, _jsxRuntime.jsx)(_antd.TreeSelect.TreeNode, {
       value: value,
       title: title,
+      label: searchKey,
       disabled: node.disabled,
       checkable: node.checkable,
-      className: "za-pro-tree-select-node-".concat(grade)
-    }, children.map(function (child) {
-      return renderTreeNode(child, sonGrade);
-    }));
+      className: "node-val-".concat(value),
+      children: children.map(function (child) {
+        return renderTreeNode(child, sonGrade);
+      })
+    }, value);
   };
   /**
    * 从树形数据中找出用户搜索得数据，并且将搜索字符串高亮标识
@@ -315,7 +343,6 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
       var currentAllNodeChild = []; // 记录当前节点得所有子节点
       // 遍历数组
       for (var i = 0; i < data.length; i++) {
-        var _item$children;
         var item = data[i];
         // 一直递归到最后一层子节点
         var currentNodeChild = []; // 记录当前节点下得子节点匹配到的节点个数
@@ -324,18 +351,19 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
         }
         // 迭代完子节点向上回溯，如果有匹配到得子节点，那么加入当前节点得孩子对象上,否则加入得是空数组
         item.children = currentNodeChild;
-        var tag = false;
+        // let tag = false;
         // 判断节点title是否包含关键字 如果有，那么直接进行下一循环
         if (item[label].indexOf(keyWord) > -1) {
           var regExp = new RegExp(keyWord);
           item[label] = item[label].replace(regExp, "<span class=\"highlight-search-text\">".concat(keyWord, "</span>"));
-          tag = true;
-        }
-        if (tag || (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) {
-          // 如果子节点有匹配项或者自己匹配了那么都加入结果中
-          currentAllNodeChild.push(item);
         }
+        currentAllNodeChild.push(item);
+        // if (tag || item?.children?.length) {
+        //   // 如果子节点有匹配项或者自己匹配了那么都加入结果中
+        //   currentAllNodeChild.push(item);
+        // }
       }
+
       return currentAllNodeChild;
     };
     sourceList = filterData(sourceList);
@@ -353,10 +381,69 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
       selectList: result || []
     });
   };
-  var handleChange = function handleChange(value, option) {
-    onChange && onChange(value, option, null);
+  function findTreeNode(treeList, nodeValue) {
+    var result = {};
+    var filterData = function filterData(data) {
+      for (var i = 0; i < data.length; i++) {
+        var item = data[i];
+        if (item[code] === nodeValue) {
+          result.value = nodeValue;
+          result.label = item[label];
+          return null;
+        }
+        // 一直递归到最后一层子节点
+        if (item.children && item.children.length > 0) {
+          filterData(item.children);
+        }
+      }
+    };
+    filterData(treeList);
+    return result;
+  }
+  function getLabelByValue(treeList, nodeValue) {
+    var result = nodeValue;
+    if (nodeValue) {
+      if (Array.isArray(nodeValue)) {
+        result = [];
+        nodeValue.map(function (item) {
+          var res = findTreeNode(treeList, item === null || item === void 0 ? void 0 : item.value);
+          res && result.push(res);
+          return item;
+        });
+      } else {
+        result = findTreeNode(treeList, nodeValue[code]);
+      }
+    }
+    return result;
+  }
+  var handleChange = function handleChange(newVal, option) {
+    // newVal回来得一定是label、value
+    var result = newVal;
+    if (props === null || props === void 0 ? void 0 : props.labelInValue) {
+      result = getLabelByValue(selectList, newVal);
+    }
+    onChange && onChange(result, selectList, null);
     // 重置搜索
-    searchTreeEvent('');
+    showSearch && searchTreeEvent('');
+  };
+  /**
+   * 全局点击事件, 如果是单选的情况那么点击选中节点后取消勾选
+   * @param e 事件源
+   */
+  var nodeChangeEvent = function nodeChangeEvent(e) {
+    var el = e.target;
+    var classStr = el.className;
+    if (classStr && !treeCheckable) {
+      var _classStr$split = classStr.split(' '),
+        _classStr$split2 = (0, _slicedToArray2.default)(_classStr$split, 1),
+        valStr = _classStr$split2[0];
+      if (valStr && classStr.startsWith('node-val-')) {
+        var choiceVal = valStr.replace('node-val-', '');
+        if (value === choiceVal) {
+          onChange && onChange(undefined, [], null);
+        }
+      }
+    }
   };
   // 如果单选情况下只有10条那么设置class控制样式
   var tenCountClass = '';
@@ -367,8 +454,8 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
     var noneChild = true;
     var loopCount = function loopCount(data) {
       data.map(function (item) {
-        var _item$children2;
-        if (item === null || item === void 0 ? void 0 : (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) {
+        var _item$children;
+        if (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) {
           noneChild = false;
         }
         return item;
@@ -378,10 +465,17 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
     return noneChild ? 'ten-count-tree-node' : '';
   };
   tenCountClass = countTen(selectList);
+  var cls = (0, _classnames3.default)((0, _defineProperty2.default)({
+    'pro-tree-select': true
+  }, "".concat(className), className));
+  var innerClass = treeCheckable ? 'checkable-tree pro' : "".concat(tenCountClass, " signal-tree");
+  var dropDownClassName = (0, _classnames3.default)((_classnames2 = {
+    'pro-tree-select-drop-down-container': true
+  }, (0, _defineProperty2.default)(_classnames2, "".concat(innerClass), true), (0, _defineProperty2.default)(_classnames2, "".concat(popupClassName), popupClassName), _classnames2));
   var treeProps = (0, _objectSpread2.default)({
     disabled: disabled,
     showSearch: showSearch,
-    filterTreeNode: false,
+    // filterTreeNode: filterTreeNodeEvent,
     treeDefaultExpandAll: treeDefaultExpandAll,
     treeCheckable: treeCheckable,
     showCheckedStrategy: SHOW_PARENT,
@@ -390,22 +484,30 @@ var ProTreeSelect = function ProTreeSelect(props, ref) {
     dropdownStyle: (0, _objectSpread2.default)({
       maxHeight: 320,
       overflow: 'auto',
-      width: 'auto!important',
       maxWidth: '580px'
     }, dropdownStyle),
     listHeight: listHeight || 320,
     style: (0, _objectSpread2.default)({
       width: width || '100%'
     }, style),
-    popupClassName: treeCheckable ? 'checkable-tree' : "".concat(tenCountClass, " signal-tree"),
+    popupClassName: dropDownClassName,
     onSearch: searchTreeEvent,
     allowClear: allowClear || true,
-    showArrow: true
+    showArrow: true,
+    treeNodeFilterProp: treeNodeFilterProp,
+    virtual: false
   }, selectProps);
-  return /*#__PURE__*/_react.default.createElement(_antd.TreeSelect, (0, _objectSpread2.default)({}, treeProps), selectList.map(function (node) {
-    return renderTreeNode(node, 1);
-  }));
+  if (value === null) {
+    delete treeProps.value;
+  }
+  return (0, _jsxRuntime.jsx)("div", {
+    onClick: nodeChangeEvent,
+    className: cls,
+    children: (0, _jsxRuntime.jsx)(_antd.TreeSelect, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, treeProps), {}, {
+      children: selectList.map(function (node) {
+        return renderTreeNode(node, 1);
+      })
+    }))
+  });
 };
-exports.ProTreeSelect = ProTreeSelect;
-var _default = /*#__PURE__*/(0, _react.forwardRef)(ProTreeSelect);
-exports.default = _default;
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(ProTreeSelect);

package/lib/ProTreeSelect/propsType.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import type { TreeSelectProps } from 'antd';
 import { Service, Options, Result } from 'ahooks/lib/useRequest/src/types';
 import { ProFormOtherProps } from '../ProForm/propsType';
@@ -53,11 +53,9 @@ export interface PropTreeSelectProps extends Omit<TreeSelectProps, 'onSearch'> {
     code?: string;
     /** 数据源 */
     dataSource?: DataOption[];
-    /** 兼容 2.0 版本、3.0 使用view 模式 */
+    /** 兼容 2.0 版本、3.0 使用view 模式,查看模式值 */
     defaultDisableValue?: string;
-    /** 兼容 2.0 版本、3.0 使用 transformResponse */
-    updateDataSource?: (data: any, setSelectList: any) => void;
-    /** 格式化数据 */
+    /** 格式化接口响应数据 */
     transformResponse?: (data: any) => DataOption[];
     /** 是否展示 tooltip、当 label 特别长的时候使用 */
     tooltip?: boolean;
@@ -66,8 +64,6 @@ export interface PropTreeSelectProps extends Omit<TreeSelectProps, 'onSearch'> {
     /** 集成表单 form 的属性 */
     otherProps?: ProFormOtherProps;
     onSearch?: (value: string, useRequest: Result<any, any>) => void;
-    /** 自定义展示 */
-    optionRender?: (value: DataOption) => string | ReactNode;
     /** 远程请求接口 */
     useRequest?: {
         service: Service<any, any>;
@@ -75,8 +71,6 @@ export interface PropTreeSelectProps extends Omit<TreeSelectProps, 'onSearch'> {
     };
 }
 export interface ProSelectAction {
-    /** 实例方法、根据 code ｜ code[] 批量获取数据 */
-    getValueObject?: (code: string | string[], key?: string) => any;
     /** 获取发生请求的 useRequest 的 ref */
     useRequestRef: Result<any, any>;
 }
@@ -85,6 +79,7 @@ export interface TreeNodeData extends DataOption {
     value: string;
     children?: TreeNodeData[];
     icon?: React.ReactNode;
+    hideNodeClass?: string;
 }
 export interface TreeSelectFormProps {
     type: string;
@@ -93,3 +88,10 @@ export interface TreeSelectFormProps {
     fieldProps?: PropTreeSelectProps;
     [key: string]: any;
 }
+export interface ResponseData {
+    status: number;
+    message: string;
+    data: any;
+    success?: boolean;
+    code?: number;
+}