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

package/es/ProTreeModal/components/Tree.js

@@ -1,11 +1,19 @@
 import "antd/es/tree/style";
 import _Tree from "antd/es/tree";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useMemo, useState } from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["checkedValues", "disabled", "treeData", "searchStr", "originalTreeData", "showCodeName", "checkStrictly", "flatTreeData", "mode", "fieldNames", "tags", "onCheck", "handleFilterClose", "optionRender"];
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-plusplus */
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import ListComponent from './List';
 import SearchTitle from './SearchTitle';
 import CloseIcon from './CloseIcon';
-import { getParentKey } from '../utils';
-function List(props) {
+import { filterCheckedNodes, getParentKey } from '../utils';
+var tagsBgColors = ['rgba(0, 106, 255,0.16)', 'rgba(0, 196, 74,0.16)', 'rgba(255, 140, 0,0.16)', 'rgba(255, 80, 80,0.16)', 'rgba(97, 97, 97, 0.16)'];
+var tagsColors = ['#006AFF', '#00C44A', '#FF8C00', '#FF5050', '#616161'];
+function List(props, ref) {
   var checkedValues = props.checkedValues,
     disabled = props.disabled,
     treeData = props.treeData,
@@ -13,11 +21,19 @@ function List(props) {
     originalTreeData = props.originalTreeData,
     _props$showCodeName = props.showCodeName,
     showCodeName = _props$showCodeName === void 0 ? false : _props$showCodeName,
+    _props$checkStrictly = props.checkStrictly,
+    checkStrictly = _props$checkStrictly === void 0 ? false : _props$checkStrictly,
     flatTreeData = props.flatTreeData,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'render' : _props$mode,
+    fieldNames = props.fieldNames,
+    tags = props.tags,
     onCheck = props.onCheck,
-    handleFilterClose = props.handleFilterClose;
+    handleFilterClose = props.handleFilterClose,
+    optionRender = props.optionRender,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     expandedKeys = _useState2[0],
@@ -26,124 +42,179 @@ function List(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     autoExpandParent = _useState4[0],
     setAutoExpandParent = _useState4[1];
-  var onSelect = function onSelect(selectedKeysValue, info) {
-    console.log('selectedKeysValue', selectedKeysValue);
-    console.log('onSelect', info);
-    // setSelectedKeys(selectedKeysValue);
-  };
-
-  console.log('checkedValues', checkedValues);
   useEffect(function () {
     if (searchStr) {
       var newExpandedKeys = flatTreeData.map(function (item) {
-        if (item.title.indexOf(searchStr) > -1) {
-          return getParentKey(item.key, originalTreeData);
+        var title = item[fieldNameValue] + item[fieldNameLabel];
+        if ((title === null || title === void 0 ? void 0 : title.indexOf(searchStr)) > -1) {
+          return getParentKey(item[fieldNameValue], originalTreeData, fieldNames);
         }
         return null;
       }).filter(function (item, i, self) {
         return item && self.indexOf(item) === i;
       });
       setExpandedKeys(newExpandedKeys);
-      // setSearchValue(value);
       setAutoExpandParent(true);
     }
   }, [searchStr]);
   var _treeData = useMemo(function () {
-    var loop = function loop(data) {
-      return data.map(function (item) {
-        if (item.children) {
-          return {
-            title: /*#__PURE__*/React.createElement("div", {
-              key: item.value
-            }, /*#__PURE__*/React.createElement("span", null, showCodeName ? item.key : '', /*#__PURE__*/React.createElement(SearchTitle, {
-              label: item.title,
-              searchStr: searchStr
-            }))),
-            key: item.key,
-            children: loop(item.children)
-          };
-        }
-        return {
-          title: /*#__PURE__*/React.createElement("div", {
-            key: item.value
-          }, /*#__PURE__*/React.createElement("span", null, showCodeName ? item.key : '', /*#__PURE__*/React.createElement(SearchTitle, {
-            label: item.title,
-            searchStr: searchStr
-          }))),
-          key: item.key
-        };
-      });
-    };
-    if (mode === 'view') {
-      return;
+    function fn() {
+      var loop = function loop(data, index) {
+        index++;
+        return data.map(function (item) {
+          var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+          if (item[fieldNames.children]) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              title: _jsxs("div", {
+                className: "pro-tree-modal-tree-node",
+                children: [tags && tags.length ? _jsx("div", {
+                  className: "pro-tree-modal-tree-node-tag",
+                  style: {
+                    backgroundColor: tagsBgColors[index],
+                    color: tagsColors[index]
+                  },
+                  children: _jsx("span", {
+                    children: tags[index]
+                  })
+                }) : null, _jsx("span", {
+                  children: optionRender ? optionRender(item, searchStr) : _jsx(SearchTitle, {
+                    label: title,
+                    searchStr: searchStr
+                  })
+                })]
+              }),
+              key: item[fieldNameValue],
+              children: loop(item[fieldNames.children], index)
+            });
+          }
+          return _objectSpread(_objectSpread({}, item), {}, {
+            title: _jsxs("div", {
+              className: "pro-tree-modal-tree-node",
+              children: [tags && tags.length ? _jsx("div", {
+                className: "pro-tree-modal-tree-node-tag",
+                style: {
+                  backgroundColor: tagsBgColors[index],
+                  color: tagsColors[index]
+                },
+                children: _jsx("span", {
+                  children: tags[index]
+                })
+              }) : null, _jsx("span", {
+                children: optionRender ? optionRender(item, searchStr) : _jsx(SearchTitle, {
+                  label: title,
+                  searchStr: searchStr
+                })
+              })]
+            }),
+            key: item[fieldNameValue]
+          });
+        });
+      };
+      if (mode === 'view') {
+        return;
+      }
+      var newTreeData = originalTreeData;
+      if (searchStr) {
+        newTreeData = filterCheckedNodes(originalTreeData, [], searchStr, fieldNames);
+      }
+      return loop(newTreeData, -1);
     }
-    var newTreeData = originalTreeData.filter(function (item) {
-      return expandedKeys.length && searchStr ? expandedKeys.includes(item.key) : true;
-    });
-    return loop(newTreeData);
-  }, [searchStr, expandedKeys]);
+    return fn();
+  }, [searchStr, expandedKeys, showCodeName]);
   var treeViewData = useMemo(function () {
-    var loop = function loop(data) {
+    var loop = function loop(data, index) {
+      index++;
       return data.map(function (item) {
-        if (item.children) {
-          return {
-            title: /*#__PURE__*/React.createElement("div", {
-              key: item.key,
-              className: "pro-tree-modal-checkbox-content pro-tree-modal-tree-content"
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "pro-tree-modal-checkbox-content-look"
-            }, /*#__PURE__*/React.createElement("span", null, showCodeName ? item.key : '', item.title)), disabled ? null : /*#__PURE__*/React.createElement(CloseIcon, {
+        var title = showCodeName ? "".concat(item[fieldNameValue], "-").concat(item[fieldNameLabel]) : item[fieldNameLabel];
+        if (item[fieldNames.children]) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            title: _jsxs("div", {
+              className: "pro-tree-modal-checkbox-content pro-tree-modal-tree-content",
+              children: [_jsxs("div", {
+                className: "pro-tree-modal-checkbox-content-look pro-tree-modal-tree-node",
+                children: [tags && tags.length ? _jsx("div", {
+                  className: "pro-tree-modal-tree-node-tag",
+                  style: {
+                    backgroundColor: tagsBgColors[index],
+                    color: tagsColors[index]
+                  },
+                  children: _jsx("span", {
+                    children: tags[index]
+                  })
+                }) : null, _jsx("span", {
+                  children: optionRender ? optionRender(item) : title
+                })]
+              }), disabled ? null : _jsx(CloseIcon, {
+                onClick: function onClick() {
+                  return handleFilterClose(item[fieldNameValue], item);
+                }
+              })]
+            }),
+            key: item[fieldNameValue],
+            children: loop(item[fieldNames.children], index)
+          });
+        }
+        return _objectSpread(_objectSpread({}, item), {}, {
+          title: _jsxs("div", {
+            className: "pro-tree-modal-checkbox-content pro-tree-modal-tree-content",
+            children: [_jsx("div", {
+              className: "pro-tree-modal-checkbox-content-look",
+              children: optionRender ? optionRender(item) : title
+            }), disabled ? null : _jsx(CloseIcon, {
               onClick: function onClick() {
-                return handleFilterClose(item.key, item);
+                return handleFilterClose(item[fieldNameValue], item);
               }
-            })),
-            key: item.key,
-            children: loop(item.children)
-          };
-        }
-        return {
-          title: /*#__PURE__*/React.createElement("div", {
-            key: item.key,
-            className: "pro-tree-modal-checkbox-content pro-tree-modal-tree-content"
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "pro-tree-modal-checkbox-content-look"
-          }, item.title), disabled ? null : /*#__PURE__*/React.createElement(CloseIcon, {
-            onClick: function onClick() {
-              return handleFilterClose(item.key, item);
-            }
-          })),
-          key: item.key
-        };
+            })]
+          }),
+          key: item[fieldNameValue]
+        });
       });
     };
-    return loop(treeData);
+    return loop(treeData, -1);
   }, [treeData]);
   var onExpand = function onExpand(newExpandedKeys) {
     setExpandedKeys(newExpandedKeys);
     setAutoExpandParent(false);
   };
   if (mode === 'render') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Tree, {
+    return _jsx(_Fragment, {
+      children: _jsx(_Tree, {
+        disabled: disabled,
+        style: {
+          width: '100%'
+        },
+        checkable: true,
+        treeData: _treeData,
+        onExpand: onExpand,
+        expandedKeys: expandedKeys,
+        autoExpandParent: autoExpandParent,
+        selectable: false,
+        onCheck: onCheck,
+        checkedKeys: checkedValues,
+        checkStrictly: checkStrictly
+      })
+    });
+  }
+  return _jsx(_Fragment, {
+    children: checkStrictly ? _jsx(ListComponent, _objectSpread({
+      mode: mode,
+      treeData: treeData,
+      searchStr: searchStr,
+      handleFilterClose: handleFilterClose,
+      fieldNames: fieldNames,
+      showCodeName: showCodeName,
       disabled: disabled,
+      ref: ref
+    }, restProps)) : _jsx(_Tree, {
       style: {
         width: '100%'
       },
-      checkable: true,
-      treeData: _treeData,
-      onExpand: onExpand,
-      expandedKeys: expandedKeys,
-      autoExpandParent: autoExpandParent,
-      // onSelect={onSelect}
-      onCheck: onCheck,
-      checkedKeys: checkedValues
-    }));
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Tree, {
-    style: {
-      width: '100%'
-    },
-    selectable: false,
-    treeData: treeViewData
-  }));
+      defaultExpandAll: true,
+      autoExpandParent: true,
+      selectable: false,
+      treeData: treeViewData,
+      blockNode: true
+    })
+  });
 }
-export default List;
+export default /*#__PURE__*/forwardRef(List);

package/es/ProTreeModal/components/Trigger.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 interface TriggerProps {
     checkedValues: any[];
     value: any;
     disabled?: boolean;
+    isView?: boolean;
+    checkAll?: boolean;
+    triggerStyle?: CSSProperties;
     handleClick: () => void;
     handleClearAll: () => void;
 }
-declare function Trigger(props: TriggerProps): React.JSX.Element;
+declare function Trigger(props: TriggerProps): JSX.Element;
 export default Trigger;

package/es/ProTreeModal/components/Trigger.js

@@ -1,6 +1,9 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "antd/es/input/style";
 import _Input from "antd/es/input";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { CloseOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
 import viewSvg from '../../assets/view.svg';
 function Trigger(props) {
@@ -8,25 +11,47 @@ function Trigger(props) {
     handleClick = props.handleClick,
     handleClearAll = props.handleClearAll,
     value = props.value,
-    disabled = props.disabled;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input, {
-    onClick: handleClick,
-    value: checkedValues.length === 0 ? null : "\u5DF2\u9009\u62E9".concat(checkedValues.length, "\u9879"),
-    addonAfter: /*#__PURE__*/React.createElement("div", {
-      className: "pro-enum-input-addonAfter"
-    }, /*#__PURE__*/React.createElement(ReactSVG, {
-      className: "viewSvg",
-      src: viewSvg,
-      onClick: handleClick
-    })),
-    placeholder: "\u8BF7\u9009\u62E9",
-    allowClear: !disabled,
-    onChange: function onChange() {
-      return handleClearAll();
-    }
-  }), /*#__PURE__*/React.createElement(_Input, {
-    type: "hidden",
-    value: value
-  }));
+    checkAll = props.checkAll,
+    disabled = props.disabled,
+    isView = props.isView,
+    triggerStyle = props.triggerStyle;
+  return _jsxs(_Fragment, {
+    children: [isView ? _jsxs("div", {
+      className: "pro-tree-modal-isView",
+      children: [_jsx("div", {
+        children: checkedValues.length === 0 ? '-' : checkAll ? '全选' : "\u5DF2\u9009\u62E9".concat(checkedValues.length, "\u9879")
+      }), _jsx("div", {
+        className: "pro-enum-input-addonAfter",
+        children: _jsx(ReactSVG, {
+          className: "viewSvg",
+          src: viewSvg,
+          onClick: handleClick
+        })
+      })]
+    }) : _jsx(_Input, {
+      className: classNames(disabled ? 'trigger-no-hover' : ''),
+      onClick: handleClick,
+      value: checkedValues.length === 0 ? null : checkAll ? '全选' : "\u5DF2\u9009\u62E9".concat(checkedValues.length, "\u9879"),
+      addonAfter: _jsxs("div", {
+        className: "pro-enum-input-addonAfter",
+        children: [checkedValues.length > 0 && !disabled && _jsx("span", {
+          className: "close-icon",
+          children: _jsx(CloseOutlined, {
+            onClick: handleClearAll
+          })
+        }), _jsx(ReactSVG, {
+          className: "viewSvg",
+          src: viewSvg,
+          onClick: handleClick
+        })]
+      }),
+      placeholder: "\u8BF7\u9009\u62E9",
+      disabled: disabled,
+      style: _objectSpread({}, triggerStyle)
+    }), _jsx(_Input, {
+      type: "hidden",
+      value: value
+    })]
+  });
 }
 export default Trigger;

package/es/ProTreeModal/components/index.d.ts

@@ -3,3 +3,4 @@ export { default as Trigger } from './Trigger';
 export { default as SearchTitle } from './SearchTitle';
 export { default as ListView } from './List';
 export { default as TreeView } from './Tree';
+export { default as Cascader } from './Cascader';

package/es/ProTreeModal/components/index.js

@@ -2,4 +2,5 @@ export { default as CloseIcon } from './CloseIcon';
 export { default as Trigger } from './Trigger';
 export { default as SearchTitle } from './SearchTitle';
 export { default as ListView } from './List';
-export { default as TreeView } from './Tree';
+export { default as TreeView } from './Tree';
+export { default as Cascader } from './Cascader';

package/es/ProTreeModal/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { ProTreeModalProps } from './propsType';
 import './style/index.less';
-declare const ProTreeModal: (props: ProTreeModalProps) => React.JSX.Element;
+export declare const CASCADER = "CASCADER";
+declare const ProTreeModal: (props: ProTreeModalProps) => JSX.Element;
 export default ProTreeModal;