@zat-design/sisyphus-react 3.0.13 → 3.0.16-beta.4

package/lib/ProTreeModal/components/List.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ListProps {
+    disabled?: boolean;
+    checkedValues?: any[];
+    treeData: any[];
+    searchStr?: string;
+    showCodeName?: boolean;
+    mode?: 'render' | 'view';
+    handleOnChange?: (e: any, value: string) => void;
+    handleFilterClose?: (code: string) => void;
+}
+declare function List(props: ListProps): React.JSX.Element;
+export default List;

package/lib/ProTreeModal/components/List.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _SearchTitle = _interopRequireDefault(require("./SearchTitle"));
+var _CloseIcon = _interopRequireDefault(require("./CloseIcon"));
+function List(props) {
+  var checkedValues = props.checkedValues,
+    disabled = props.disabled,
+    treeData = props.treeData,
+    searchStr = props.searchStr,
+    showCodeName = props.showCodeName,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'render' : _props$mode,
+    handleOnChange = props.handleOnChange,
+    handleFilterClose = props.handleFilterClose;
+  if (mode === 'render') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Checkbox.Group, {
+      disabled: disabled,
+      style: {
+        width: '100%'
+      },
+      value: checkedValues
+    }, treeData.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: item.value,
+        className: "pro-tree-modal-checkbox-content"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+        onChange: function onChange(e) {
+          return handleOnChange(e, item.value);
+        },
+        value: item.value,
+        disabled: item.disabled
+      }, /*#__PURE__*/_react.default.createElement("span", null, showCodeName ? item.value : '', /*#__PURE__*/_react.default.createElement(_SearchTitle.default, {
+        label: item.title,
+        searchStr: searchStr
+      }))));
+    })));
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, treeData.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.value,
+      className: "pro-tree-modal-checkbox-content"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "pro-tree-modal-checkbox-content-look"
+    }, item.title), disabled ? null : /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
+      onClick: function onClick() {
+        return handleFilterClose(item.value);
+      }
+    }));
+  }));
+}
+var _default = List;
+exports.default = _default;

package/lib/ProTreeModal/components/SearchTitle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare function SearchTitle(props: {
+    searchStr: string;
+    label: string;
+}): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SearchTitle>;
+export default _default;

package/lib/ProTreeModal/components/SearchTitle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function SearchTitle(props) {
+  var searchStr = props.searchStr,
+    label = props.label;
+  var strTitle = label;
+  var index = strTitle.indexOf(searchStr);
+  var beforeStr = strTitle.substring(0, index);
+  var afterStr = strTitle.slice(index + searchStr.length);
+  var title = index > -1 ? /*#__PURE__*/_react.default.createElement("span", null, beforeStr, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pro-tree-modal-search-value"
+  }, searchStr), afterStr) : /*#__PURE__*/_react.default.createElement("span", null, strTitle);
+  return title;
+}
+var _default = /*#__PURE__*/(0, _react.memo)(SearchTitle);
+exports.default = _default;

package/lib/ProTreeModal/components/Tree.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ListProps {
+    disabled?: boolean;
+    checkedValues?: any[];
+    originalTreeData?: any[];
+    flatTreeData?: any[];
+    treeData: any[];
+    searchStr?: string;
+    showCodeName?: boolean;
+    mode?: 'render' | 'view';
+    onCheck?: (checkedKeys: any, info: any) => void;
+    handleFilterClose?: (code: string, node?: any) => void;
+}
+declare function List(props: ListProps): React.JSX.Element;
+export default List;

package/lib/ProTreeModal/components/Tree.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _SearchTitle = _interopRequireDefault(require("./SearchTitle"));
+var _CloseIcon = _interopRequireDefault(require("./CloseIcon"));
+var _utils = require("../utils");
+function List(props) {
+  var checkedValues = props.checkedValues,
+    disabled = props.disabled,
+    treeData = props.treeData,
+    searchStr = props.searchStr,
+    originalTreeData = props.originalTreeData,
+    _props$showCodeName = props.showCodeName,
+    showCodeName = _props$showCodeName === void 0 ? false : _props$showCodeName,
+    flatTreeData = props.flatTreeData,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'render' : _props$mode,
+    onCheck = props.onCheck,
+    handleFilterClose = props.handleFilterClose;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_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);
+  (0, _react.useEffect)(function () {
+    if (searchStr) {
+      var newExpandedKeys = flatTreeData.map(function (item) {
+        if (item.title.indexOf(searchStr) > -1) {
+          return (0, _utils.getParentKey)(item.key, originalTreeData);
+        }
+        return null;
+      }).filter(function (item, i, self) {
+        return item && self.indexOf(item) === i;
+      });
+      setExpandedKeys(newExpandedKeys);
+      // setSearchValue(value);
+      setAutoExpandParent(true);
+    }
+  }, [searchStr]);
+  var _treeData = (0, _react.useMemo)(function () {
+    var loop = function loop(data) {
+      return data.map(function (item) {
+        if (item.children) {
+          return {
+            title: /*#__PURE__*/_react.default.createElement("div", {
+              key: item.value
+            }, /*#__PURE__*/_react.default.createElement("span", null, showCodeName ? item.key : '', /*#__PURE__*/_react.default.createElement(_SearchTitle.default, {
+              label: item.title,
+              searchStr: searchStr
+            }))),
+            key: item.key,
+            children: loop(item.children)
+          };
+        }
+        return {
+          title: /*#__PURE__*/_react.default.createElement("div", {
+            key: item.value
+          }, /*#__PURE__*/_react.default.createElement("span", null, showCodeName ? item.key : '', /*#__PURE__*/_react.default.createElement(_SearchTitle.default, {
+            label: item.title,
+            searchStr: searchStr
+          }))),
+          key: item.key
+        };
+      });
+    };
+    if (mode === 'view') {
+      return;
+    }
+    var newTreeData = originalTreeData.filter(function (item) {
+      return expandedKeys.length && searchStr ? expandedKeys.includes(item.key) : true;
+    });
+    return loop(newTreeData);
+  }, [searchStr, expandedKeys]);
+  var treeViewData = (0, _react.useMemo)(function () {
+    var loop = function loop(data) {
+      return data.map(function (item) {
+        if (item.children) {
+          return {
+            title: /*#__PURE__*/_react.default.createElement("div", {
+              key: item.key,
+              className: "pro-tree-modal-checkbox-content pro-tree-modal-tree-content"
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: "pro-tree-modal-checkbox-content-look"
+            }, /*#__PURE__*/_react.default.createElement("span", null, showCodeName ? item.key : '', item.title)), disabled ? null : /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
+              onClick: function onClick() {
+                return handleFilterClose(item.key, item);
+              }
+            })),
+            key: item.key,
+            children: loop(item.children)
+          };
+        }
+        return {
+          title: /*#__PURE__*/_react.default.createElement("div", {
+            key: item.key,
+            className: "pro-tree-modal-checkbox-content pro-tree-modal-tree-content"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "pro-tree-modal-checkbox-content-look"
+          }, item.title), disabled ? null : /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
+            onClick: function onClick() {
+              return handleFilterClose(item.key, item);
+            }
+          })),
+          key: item.key
+        };
+      });
+    };
+    return loop(treeData);
+  }, [treeData]);
+  var onExpand = function onExpand(newExpandedKeys) {
+    setExpandedKeys(newExpandedKeys);
+    setAutoExpandParent(false);
+  };
+  if (mode === 'render') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+      disabled: disabled,
+      style: {
+        width: '100%'
+      },
+      checkable: true,
+      treeData: _treeData,
+      onExpand: onExpand,
+      expandedKeys: expandedKeys,
+      autoExpandParent: autoExpandParent,
+      // onSelect={onSelect}
+      onCheck: onCheck,
+      checkedKeys: checkedValues
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+    style: {
+      width: '100%'
+    },
+    selectable: false,
+    treeData: treeViewData
+  }));
+}
+var _default = List;
+exports.default = _default;

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

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

package/lib/ProTreeModal/components/Trigger.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _reactSvg = require("react-svg");
+var _view = _interopRequireDefault(require("../../assets/view.svg"));
+function Trigger(props) {
+  var checkedValues = props.checkedValues,
+    handleClick = props.handleClick,
+    handleClearAll = props.handleClearAll,
+    value = props.value,
+    disabled = props.disabled;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    onClick: handleClick,
+    value: checkedValues.length === 0 ? null : "\u5DF2\u9009\u62E9".concat(checkedValues.length, "\u9879"),
+    addonAfter: /*#__PURE__*/_react.default.createElement("div", {
+      className: "pro-enum-input-addonAfter"
+    }, /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
+      className: "viewSvg",
+      src: _view.default,
+      onClick: handleClick
+    })),
+    placeholder: "\u8BF7\u9009\u62E9",
+    allowClear: !disabled,
+    onChange: function onChange() {
+      return handleClearAll();
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    type: "hidden",
+    value: value
+  }));
+}
+var _default = Trigger;
+exports.default = _default;

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

@@ -0,0 +1,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';

package/lib/ProTreeModal/components/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CloseIcon", {
+  enumerable: true,
+  get: function get() {
+    return _CloseIcon.default;
+  }
+});
+Object.defineProperty(exports, "ListView", {
+  enumerable: true,
+  get: function get() {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "SearchTitle", {
+  enumerable: true,
+  get: function get() {
+    return _SearchTitle.default;
+  }
+});
+Object.defineProperty(exports, "TreeView", {
+  enumerable: true,
+  get: function get() {
+    return _Tree.default;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function get() {
+    return _Trigger.default;
+  }
+});
+var _CloseIcon = _interopRequireDefault(require("./CloseIcon"));
+var _Trigger = _interopRequireDefault(require("./Trigger"));
+var _SearchTitle = _interopRequireDefault(require("./SearchTitle"));
+var _List = _interopRequireDefault(require("./List"));
+var _Tree = _interopRequireDefault(require("./Tree"));

package/lib/ProTreeModal/data/datasource.d.ts

@@ -0,0 +1,5 @@
+declare const dataSource: {
+    title: string;
+    value: string;
+}[];
+export default dataSource;

package/lib/ProTreeModal/data/datasource.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var dataSource = [{
+  title: '01-中意财产保险有限公司黑龙江分公司',
+  value: 'A'
+}, {
+  title: '0101-中意财产保险有限公司黑龙江分公司市场部',
+  value: 'B'
+}, {
+  title: '01010173-中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',
+  value: 'C'
+}, {
+  title: '选项四',
+  value: 'D'
+}, {
+  title: '0201-中意财产保险有限公司成都分公司市场部',
+  value: 'E'
+}];
+var _default = dataSource;
+exports.default = _default;

package/lib/ProTreeModal/data/mock.d.ts

@@ -0,0 +1,9 @@
+declare const serverRequest: (params: {
+    pageNum: number;
+    pageSize: number;
+}) => any;
+declare const treeRequest: (params: {
+    pageNum: number;
+    pageSize: number;
+}) => any;
+export { serverRequest, treeRequest };

package/lib/ProTreeModal/data/mock.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.treeRequest = exports.serverRequest = void 0;
+var _mockjs = _interopRequireDefault(require("mockjs"));
+var serverRequest = function serverRequest(params) {
+  return _mockjs.default.mock({
+    code: 200,
+    message: null,
+    data: {
+      'list|10': [{
+        value: '@guid',
+        title: '@ctitle(5,50)',
+        disabled: false
+      }]
+    }
+  });
+};
+exports.serverRequest = serverRequest;
+var treeRequest = function treeRequest(params) {
+  return _mockjs.default.mock({
+    code: 200,
+    message: null,
+    data: {
+      'list|10': [{
+        key: '@guid',
+        title: '@ctitle(5,50)',
+        disabled: false,
+        'children|1-5': [{
+          key: '@guid',
+          title: '@ctitle(5,50)',
+          disabled: false,
+          'children|1-3': [{
+            key: '@guid',
+            title: '@ctitle(3,10)',
+            disabled: false,
+            children: []
+          }]
+        }]
+      }]
+    }
+  });
+};
+exports.treeRequest = treeRequest;

package/lib/ProTreeModal/index.d.ts

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