pocko-ui 1.1.11 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Trees/index.js +1 -1
- package/package.json +1 -1
package/Trees/index.js
CHANGED
|
@@ -46,7 +46,7 @@ eval("\n\nmodule.exports = function (item) {\n var content = item[1];\n var cs
|
|
|
46
46
|
\***********************/
|
|
47
47
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
48
48
|
|
|
49
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Index)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\nvar _getMenuNodes = function getMenuNodes(id, name, menuList, toggleNode, chooseId, handleItemClick, checkHasChildren, renderCustomContent, arrowIcons, leafIcon) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"ul\", {\n className: \"tree__diagram\"\n }, menuList.map(function (item, index) {\n var isChosen = chooseId == item[id]; // 判断是否被点击\n var hasChildren = checkHasChildren(item); // 判断是否有子节点(根据外部列表参数判断)\n\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", {\n className: \"tree__diagram__item\",\n key: item[id] || index,\n \"data-id\": item[id],\n \"data-item\": JSON.stringify(item)\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"tree__item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n \"data-isexpand\": hasChildren,\n className: \"arrow\",\n onClick: function onClick() {\n console.log(\"hasChildren：\", hasChildren);\n if (hasChildren) toggleNode(item);\n }\n }, item.loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"loading-icon\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 512 512\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z\"\n })))) :\n // 无子节点且提供了无子节点时图标\n !hasChildren ? leafIcon !== null && leafIcon !== void 0 ? leafIcon : null : arrowIcons && arrowIcons.length > 0 ? arrowIcons.length === 1 ?\n /*#__PURE__*/\n // 只提供了一个图标时，需要有旋转动画\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"var\", {\n className: \"default-icon \".concat(item.active ? \"rotated\" : \"\")\n }, arrowIcons[0]) :\n /*#__PURE__*/\n // 提供了2个图标，即展开、收缩，无旋转动画\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"no-animation-icon\"\n }, item.active ? arrowIcons[1] : arrowIcons[0]) :\n /*#__PURE__*/\n // 默认svg\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"var\", {\n className: \"default-icon \".concat(item.active ? \"rotated\" : \"\")\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n width: \"0.75em\",\n height: \"0.75em\",\n viewBox: \"0 0 20 20\",\n fill: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n d: \"M15.795 11.272L7.795 16.272C6.79593 16.8964 5.5 16.1782 5.5 15L5.5 5.00002C5.5 3.82186 6.79593 3.1036 7.795 3.72802L15.795 8.72802C16.735 9.31552 16.735 10.6845 15.795 11.272Z\",\n fill: \"currentColor\"\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"link-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"hoverable \".concat(isChosen ? \"is-active\" : \"\"),\n onClick: function onClick() {\n handleItemClick(item);\n }\n }, item.icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"var\", null, item.icon), item[name]), renderCustomContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"custom-content\"\n }, renderCustomContent(item)))), item.active && hasChildren && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"tree__children\"\n }, _getMenuNodes(id, name, item.children, toggleNode, chooseId, handleItemClick, checkHasChildren, renderCustomContent, arrowIcons, leafIcon)));\n }));\n};\nfunction Index(_ref) {\n var treesRef = _ref.treesRef,\n id = _ref.id,\n name = _ref.name,\n wrapperClassName = _ref.wrapperClassName,\n arrowIcons = _ref.arrowIcons,\n leafIcon = _ref.leafIcon,\n hasChildrenFn = _ref.hasChildrenFn,\n data = _ref.data,\n defaultId = _ref.defaultId,\n treeDataItemClick = _ref.treeDataItemClick,\n renderCustomContent = _ref.renderCustomContent,\n dataService = _ref.dataService,\n dataServiceFunction = _ref.dataServiceFunction,\n dataServiceFunctionParams = _ref.dataServiceFunctionParams;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(data),\n _useState2 = _slicedToArray(_useState, 2),\n treeData = _useState2[0],\n setTreeData = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n _useState4 = _slicedToArray(_useState3, 2),\n chooseId = _useState4[0],\n setChooseId = _useState4[1];\n var handleItemClick = function handleItemClick(item) {\n setChooseId(item[id]);\n if (treeDataItemClick) {\n treeDataItemClick(item);\n }\n };\n\n // 递归更新某个节点的 active 和 children\n var _updateTreeNode = function updateTreeNode(nodes, nodeId, callback) {\n return nodes.map(function (node) {\n if (node[id] === nodeId) {\n return _objectSpread(_objectSpread({}, node), callback(node));\n } else if (Array.isArray(node.children) && node.children.length > 0) {\n return _objectSpread(_objectSpread({}, node), {}, {\n children: _updateTreeNode(node.children, nodeId, callback)\n });\n } else {\n return node;\n }\n });\n };\n\n // 判断节点\n var checkHasChildren = function checkHasChildren(n) {\n return (hasChildrenFn === null || hasChildrenFn === void 0 ? void 0 : hasChildrenFn(n)) || Array.isArray(n.children) && n.children.length > 0;\n };\n\n // 节点点击逻辑\n var toggleNode = function toggleNode(node) {\n console.log(\"node：\", node);\n var mayHave = checkHasChildren(node); // 业务上“可能有子节点”\n var loaded = Array.isArray(node.children) && node.children.length > 0; // 确实已经往 children 塞了数据\n\n console.log(\"mayHave：\", mayHave);\n console.log(\"loaded：\", loaded);\n if (mayHave && !loaded) {\n // 如果没有子节点，动态加载\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n loading: true\n };\n });\n });\n if (dataService && dataServiceFunction) {\n var params = _toConsumableArray(dataServiceFunctionParams || []);\n\n // 检查是否有 $QUERY_STRING，如果有，替换 keyword\n var queryIndex = params.indexOf(\"$QUERY_STRING\");\n if (queryIndex !== -1) {\n params[queryIndex] = node;\n }\n dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n if (result.length > 0) {\n var newChildren = result.map(function (item) {\n return _objectSpread(_objectSpread({}, item), {}, {\n active: false,\n loading: false,\n children: []\n });\n });\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n children: _toConsumableArray(newChildren),\n active: true,\n loading: false\n };\n });\n });\n } else {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n children: [],\n active: true,\n loading: false\n };\n });\n });\n }\n });\n } else {\n setTimeout(function () {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n active: true,\n loading: false\n };\n });\n });\n }, 100);\n }\n } else {\n // 如果已有子节点，直接切换 active 状态\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n active: !n.active\n };\n });\n });\n }\n };\n\n // 外部调用，更新数据\n var updatedTreeNode = function updatedTreeNode(node, updatedId, newValue) {\n setTreeData(function (prevData) {\n // 如果 newValue 是空字符串，删除节点\n if (newValue === \"\") {\n var _removeNode = function removeNode(nodes, nodeId) {\n return nodes.filter(function (n) {\n return n[updatedId] !== nodeId;\n }) // 过滤掉目标节点\n .map(function (n) {\n return _objectSpread(_objectSpread({}, n), {}, {\n children: n.children ? _removeNode(n.children, nodeId) : [] // 递归处理子节点\n });\n });\n };\n return _removeNode(prevData, node[updatedId]);\n }\n\n // 若 newValue 不是空字符串，更新节点\n return _updateTreeNode(prevData, node[updatedId], function (n) {\n // 遍历新值的字段，与当前节点比较，更新有差异的字段\n Object.keys(newValue).forEach(function (key) {\n if (key === \"children\" && Array.isArray(newValue[key])) {\n // 合并 children\n var existingChildren = n.children || [];\n var newChildren = newValue[key];\n\n // 合并逻辑：以新值为主，保留未被新值覆盖的原有子节点\n var mergedChildren = [].concat(_toConsumableArray(existingChildren.filter(function (child) {\n return !newChildren.some(function (newChild) {\n return newChild[updatedId] === child[updatedId];\n });\n })), _toConsumableArray(newChildren));\n n.children = mergedChildren; // 更新合并后的 children\n } else if (n[key] !== newValue[key]) {\n n[key] = newValue[key]; // 更新有差异的字段\n }\n });\n n.active = true; // 展开当前节点\n n.loading = false; // 停止 loading 状态\n });\n });\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (data.length > 0) {\n setTreeData(data);\n } else {\n setTreeData([]);\n }\n }, [data]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (defaultId) {\n setChooseId(defaultId);\n } else {\n setChooseId(null);\n }\n }, [defaultId]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(treesRef, function () {\n return {\n updatedTreeNode: updatedTreeNode\n };\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, treeData.length > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"nav\", {\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsCombine)(\"trees__wrapper\", wrapperClassName)\n }, _getMenuNodes(id, name, treeData, toggleNode, chooseId, handleItemClick, checkHasChildren, renderCustomContent, arrowIcons, leafIcon)));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
|
|
49
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Index)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _createForOfIteratorHelper(r, e) { var t = \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && \"number\" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t[\"return\"] || t[\"return\"](); } finally { if (u) throw o; } } }; }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\nvar _getMenuNodes = function getMenuNodes(id, name, menuList, toggleNode, chooseId, handleItemClick, checkHasChildren, renderCustomContent, arrowIcons, leafIcon) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"ul\", {\n className: \"tree__diagram\"\n }, menuList.map(function (item, index) {\n var isChosen = chooseId == item[id]; // 判断是否被点击\n var hasChildren = checkHasChildren(item); // 判断是否有子节点(根据外部列表参数判断)\n\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"li\", {\n className: \"tree__diagram__item\",\n key: item[id] || index,\n \"data-id\": item[id],\n \"data-item\": JSON.stringify(item)\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"tree__item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n \"data-isexpand\": hasChildren,\n className: \"arrow\",\n onClick: function onClick() {\n if (hasChildren) toggleNode(item);\n }\n }, item.loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"loading-icon\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n width: \"1em\",\n height: \"1em\",\n viewBox: \"0 0 512 512\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n fill: \"currentColor\",\n d: \"M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z\"\n })))) :\n // 无子节点且提供了无子节点时图标\n !hasChildren ? leafIcon !== null && leafIcon !== void 0 ? leafIcon : null : arrowIcons && arrowIcons.length > 0 ? arrowIcons.length === 1 ?\n /*#__PURE__*/\n // 只提供了一个图标时，需要有旋转动画\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"var\", {\n className: \"default-icon \".concat(item.active ? \"rotated\" : \"\")\n }, arrowIcons[0]) :\n /*#__PURE__*/\n // 提供了2个图标，即展开、收缩，无旋转动画\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"no-animation-icon\"\n }, item.active ? arrowIcons[1] : arrowIcons[0]) :\n /*#__PURE__*/\n // 默认svg\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"var\", {\n className: \"default-icon \".concat(item.active ? \"rotated\" : \"\")\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n width: \"0.75em\",\n height: \"0.75em\",\n viewBox: \"0 0 20 20\",\n fill: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n d: \"M15.795 11.272L7.795 16.272C6.79593 16.8964 5.5 16.1782 5.5 15L5.5 5.00002C5.5 3.82186 6.79593 3.1036 7.795 3.72802L15.795 8.72802C16.735 9.31552 16.735 10.6845 15.795 11.272Z\",\n fill: \"currentColor\"\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"link-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"hoverable \".concat(isChosen ? \"is-active\" : \"\"),\n onClick: function onClick() {\n handleItemClick(item);\n }\n }, item.icon && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"var\", null, item.icon), item[name]), renderCustomContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"custom-content\"\n }, renderCustomContent(item)))), item.active && hasChildren && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"tree__children\"\n }, _getMenuNodes(id, name, item.children, toggleNode, chooseId, handleItemClick, checkHasChildren, renderCustomContent, arrowIcons, leafIcon)));\n }));\n};\nfunction Index(_ref) {\n var treesRef = _ref.treesRef,\n id = _ref.id,\n name = _ref.name,\n wrapperClassName = _ref.wrapperClassName,\n arrowIcons = _ref.arrowIcons,\n leafIcon = _ref.leafIcon,\n hasChildrenFn = _ref.hasChildrenFn,\n data = _ref.data,\n defaultId = _ref.defaultId,\n treeDataItemClick = _ref.treeDataItemClick,\n renderCustomContent = _ref.renderCustomContent,\n dataService = _ref.dataService,\n dataServiceFunction = _ref.dataServiceFunction,\n dataServiceFunctionParams = _ref.dataServiceFunctionParams;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(data),\n _useState2 = _slicedToArray(_useState, 2),\n treeData = _useState2[0],\n setTreeData = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),\n _useState4 = _slicedToArray(_useState3, 2),\n chooseId = _useState4[0],\n setChooseId = _useState4[1];\n var handleItemClick = function handleItemClick(item) {\n setChooseId(item[id]);\n if (treeDataItemClick) {\n treeDataItemClick(item);\n }\n };\n\n // 递归更新某个节点的 active 和 children\n var _updateTreeNode = function updateTreeNode(nodes, nodeId, callback) {\n return nodes.map(function (node) {\n if (node[id] === nodeId) {\n return _objectSpread(_objectSpread({}, node), callback(node));\n } else if (Array.isArray(node.children) && node.children.length > 0) {\n return _objectSpread(_objectSpread({}, node), {}, {\n children: _updateTreeNode(node.children, nodeId, callback)\n });\n } else {\n return node;\n }\n });\n };\n\n // 判断节点\n var checkHasChildren = function checkHasChildren(n) {\n return (hasChildrenFn === null || hasChildrenFn === void 0 ? void 0 : hasChildrenFn(n)) || Array.isArray(n.children) && n.children.length > 0;\n };\n\n // 节点点击逻辑\n var toggleNode = function toggleNode(node) {\n var mayHave = checkHasChildren(node); // 业务上“可能有子节点”\n var loaded = Array.isArray(node.children) && node.children.length > 0; // 确实已经往 children 塞了数据\n\n if (mayHave && !loaded) {\n // 如果没有子节点，动态加载\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n loading: true\n };\n });\n });\n if (dataService && dataServiceFunction) {\n var params = _toConsumableArray(dataServiceFunctionParams || []);\n\n // 检查是否有 $QUERY_STRING，如果有，替换 keyword\n var queryIndex = params.indexOf(\"$QUERY_STRING\");\n if (queryIndex !== -1) {\n params[queryIndex] = node;\n }\n dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n if (result.length > 0) {\n var newChildren = result.map(function (item) {\n return _objectSpread(_objectSpread({}, item), {}, {\n active: false,\n loading: false,\n children: []\n });\n });\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n children: _toConsumableArray(newChildren),\n active: true,\n loading: false\n };\n });\n });\n } else {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n children: [],\n active: true,\n loading: false\n };\n });\n });\n }\n });\n } else {\n setTimeout(function () {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n active: true,\n loading: false\n };\n });\n });\n }, 100);\n }\n } else {\n // 如果已有子节点，直接切换 active 状态\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n return {\n active: !n.active\n };\n });\n });\n }\n };\n\n // 外部调用，更新数据\n var updatedTreeNode = function updatedTreeNode(idValue, newValue) {\n setTreeData(function (prevData) {\n // 1. 删除节点（约定 newValue === 'DELETE' 表示删除）\n if (newValue === \"DELETE\") {\n var _removeNode = function removeNode(nodes) {\n return nodes.filter(function (n) {\n return n[id] !== idValue;\n }).map(function (n) {\n return _objectSpread(_objectSpread({}, n), {}, {\n children: Array.isArray(n.children) ? _removeNode(n.children) : []\n });\n });\n };\n return _removeNode(prevData);\n }\n\n // 2. 更新节点\n var _updateNode = function updateNode(nodes) {\n return nodes.map(function (n) {\n if (n[id] === idValue) {\n // 找到目标节点，合并所有 newValue 字段\n return _objectSpread(_objectSpread(_objectSpread({}, n), newValue), {}, {\n // 展开并停止 loading\n active: true,\n loading: false\n });\n }\n if (Array.isArray(n.children) && n.children.length > 0) {\n // 递归更新子节点\n return _objectSpread(_objectSpread({}, n), {}, {\n children: _updateNode(n.children)\n });\n }\n return n;\n });\n };\n return _updateNode(prevData);\n });\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (data.length > 0) {\n setTreeData(data);\n } else {\n setTreeData([]);\n }\n }, [data]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (defaultId) {\n setChooseId(defaultId);\n } else {\n setChooseId(null);\n }\n }, [defaultId]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(treesRef, function () {\n return {\n updatedTreeNode: updatedTreeNode,\n // 获取父节点的方法\n findNodeWithParentById: function findNodeWithParentById(targetId) {\n var _recursiveFind = function recursiveFind(nodes) {\n var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n var _iterator = _createForOfIteratorHelper(nodes),\n _step;\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var n = _step.value;\n if (n[id] === targetId) {\n return {\n node: n,\n parent: parent\n };\n }\n if (Array.isArray(n.children) && n.children.length > 0) {\n var found = _recursiveFind(n.children, n);\n if (found) return found;\n }\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n return null;\n };\n return _recursiveFind(treeData, null);\n }\n };\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, treeData.length > 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"nav\", {\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_2__.clsCombine)(\"trees__wrapper\", wrapperClassName)\n }, _getMenuNodes(id, name, treeData, toggleNode, chooseId, handleItemClick, checkHasChildren, renderCustomContent, arrowIcons, leafIcon)));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
|
|
50
50
|
|
|
51
51
|
/***/ }),
|
|
52
52
|
|