pocko-ui 1.0.15 → 1.0.17
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/SelectInput/index.d.ts +3 -1
- package/SelectInput/index.js +1 -1
- package/Trees/index.d.ts +2 -2
- package/Trees/index.js +1 -1
- package/package.json +1 -1
package/SelectInput/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ interface Props {
|
|
|
6
6
|
wrapperClassName?: string;
|
|
7
7
|
wrapperConentInputClassName?: string;
|
|
8
8
|
popupMenuClassName?: string;
|
|
9
|
+
renderOption?: (item: any) => React.ReactNode;
|
|
9
10
|
id: string | any;
|
|
10
11
|
name: string | any;
|
|
11
12
|
kbcode?: string | any;
|
|
@@ -27,5 +28,6 @@ interface Props {
|
|
|
27
28
|
}
|
|
28
29
|
export default function SelectInput({ type, label, wrapperClassName, wrapperConentInputClassName, popupMenuClassName, id, name, kbcode, dropdownRender, inputId, titleId, defaultValue, index, onChange, onKeyDown, size, zIndex, isHandleInput, isDisableBodyScroll, dataService, dataServiceFunction, // 默认调用 retrieveList 函数
|
|
29
30
|
dataServiceFunctionParams, // 调用函数的传参
|
|
30
|
-
dataServiceRetrieve,
|
|
31
|
+
dataServiceRetrieve, // 默认不是检索类的
|
|
32
|
+
renderOption, }: Props): JSX.Element;
|
|
31
33
|
export {};
|
package/SelectInput/index.js
CHANGED
|
@@ -56,7 +56,7 @@ eval("\n\nmodule.exports = function (item) {\n var content = item[1];\n var cs
|
|
|
56
56
|
\***********************/
|
|
57
57
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
58
58
|
|
|
59
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ SelectInput)\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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! body-scroll-lock */ \"../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js\");\n/* harmony import */ var _utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/useKeyboardNavigation */ \"./src/utils/useKeyboardNavigation.ts\");\n/* harmony import */ var _utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/userDropDown */ \"./src/utils/userDropDown.ts\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\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 _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\n// my-utils\n\n\n\n\nfunction SelectInput(_ref) {\n var _dropdown$current, _dropdown$current2;\n var _ref$type = _ref.type,\n type = _ref$type === void 0 ? \"COMMON\" : _ref$type,\n label = _ref.label,\n wrapperClassName = _ref.wrapperClassName,\n wrapperConentInputClassName = _ref.wrapperConentInputClassName,\n popupMenuClassName = _ref.popupMenuClassName,\n id = _ref.id,\n name = _ref.name,\n _ref$kbcode = _ref.kbcode,\n kbcode = _ref$kbcode === void 0 ? \"kb_code\" : _ref$kbcode,\n dropdownRender = _ref.dropdownRender,\n inputId = _ref.inputId,\n titleId = _ref.titleId,\n defaultValue = _ref.defaultValue,\n index = _ref.index,\n onChange = _ref.onChange,\n onKeyDown = _ref.onKeyDown,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"auto\" : _ref$size,\n _ref$zIndex = _ref.zIndex,\n zIndex = _ref$zIndex === void 0 ? 1101 : _ref$zIndex,\n _ref$isHandleInput = _ref.isHandleInput,\n isHandleInput = _ref$isHandleInput === void 0 ? false : _ref$isHandleInput,\n _ref$isDisableBodyScr = _ref.isDisableBodyScroll,\n isDisableBodyScroll = _ref$isDisableBodyScr === void 0 ? false : _ref$isDisableBodyScr,\n dataService = _ref.dataService,\n _ref$dataServiceFunct = _ref.dataServiceFunction,\n dataServiceFunction = _ref$dataServiceFunct === void 0 ? \"retrieveList\" : _ref$dataServiceFunct,\n dataServiceFunctionParams = _ref.dataServiceFunctionParams,\n _ref$dataServiceRetri = _ref.dataServiceRetrieve,\n dataServiceRetrieve = _ref$dataServiceRetri === void 0 ? false : _ref$dataServiceRetri;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState2 = _slicedToArray(_useState, 2),\n keyword = _useState2[0],\n setKeyword = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n value = _useState4[0],\n setValue = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState6 = _slicedToArray(_useState5, 2),\n isShow = _useState6[0],\n setIsShow = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState8 = _slicedToArray(_useState7, 2),\n loading = _useState8[0],\n setLoading = _useState8[1];\n\n // 调用dataService获取的值\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n _useState10 = _slicedToArray(_useState9, 2),\n dataServiceList = _useState10[0],\n setDataServiceList = _useState10[1];\n var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n _useState12 = _slicedToArray(_useState11, 2),\n initialData = _useState12[0],\n setInitialData = _useState12[1]; // 用来保存初始接口数据\n var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState14 = _slicedToArray(_useState13, 2),\n hasFetchedData = _useState14[0],\n setHasFetchedData = _useState14[1]; // 判断是否已经调用过接口\n\n // 判断下拉框位置\n var _useDropdown = (0,_utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__.useDropdown)(isShow, setIsShow, dataServiceList, loading),\n dropdown = _useDropdown.dropdown,\n dropdownContent = _useDropdown.dropdownContent;\n\n // 键盘逻辑\n var _useKeyboardNavigatio = (0,_utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__.useKeyboardNavigation)(dataServiceList.length, function (index) {\n return chooseOption(dataServiceList[index]);\n }, onKeyDown),\n focusedOption = _useKeyboardNavigatio.focusedOption,\n setFocusedOption = _useKeyboardNavigatio.setFocusedOption,\n handleKeyDown = _useKeyboardNavigatio.handleKeyDown,\n handleOptionFocus = _useKeyboardNavigatio.handleOptionFocus,\n handleOptionBlur = _useKeyboardNavigatio.handleOptionBlur;\n var dropDownList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n return dataServiceList;\n }, [dataServiceList]);\n\n // input框输入\n var handleInputChange = function handleInputChange(event) {\n var newValue = event.target.value.trim().toLowerCase();\n setKeyword(newValue);\n\n // 当允许手动输入时,触发 onChange 事件,将输入值传递给父组件\n if (isHandleInput) {\n if (index) {\n onChange(newValue, index);\n } else {\n onChange(newValue);\n }\n }\n };\n\n // 单选选择option\n function chooseOption(item) {\n setIsShow(false);\n if (index) {\n onChange(item, index);\n } else {\n onChange(item);\n }\n setValue(item[name]);\n setKeyword(\"\"); // 清空关键词以重置列表\n setFocusedOption(null); // 重置焦点选项为 null\n\n // 失去焦点\n setTimeout(function () {\n var input = document.getElementById(\"\".concat(inputId));\n input.blur();\n }, 0);\n }\n\n // 多选判断是否勾选\n function toggleSelection(item) {\n var exists = value.some(function (i) {\n return i[id] === item[id];\n });\n var newValue;\n if (exists) {\n newValue = value.filter(function (i) {\n return i[id] !== item[id];\n });\n } else {\n newValue = [].concat(_toConsumableArray(value), [item]);\n }\n setValue(newValue);\n if (index) {\n onChange(newValue, index);\n } else {\n onChange(newValue);\n }\n\n // 如果需要向父组件传递多选结果,可以在此调用 onChange\n // onChange(newValue)\n }\n\n // 检索\n var handleSearch = function handleSearch(keyword, searchArray) {\n var filteredList = searchArray.filter(function (obj) {\n var _obj$name;\n var nameMatch = obj[name] ? (_obj$name = obj[name]) === null || _obj$name === void 0 ? void 0 : _obj$name.includes(keyword) : false;\n var kbcodeMatch = obj[kbcode] ? obj[kbcode].includes(keyword) : false;\n return nameMatch || kbcodeMatch;\n });\n return filteredList;\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (isShow) {\n setLoading(true);\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] = keyword || \"*\"; // 替换为 keyword 或 '*'\n }\n\n // 如果该参数是true,则代表是retrieve接口,实时搜索\n if (dataServiceRetrieve) {\n dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n if (result.length > 0) {\n setDataServiceList(result);\n } else {\n setDataServiceList([]);\n }\n })[\"finally\"](function () {\n setLoading(false);\n });\n } else {\n if (!hasFetchedData) {\n // 如果没有调用过接口,则调用一次\n dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n setHasFetchedData(true); // 标记已经获取过数据\n\n if (result.length > 0) {\n setInitialData(result); // 保存原始数据\n setDataServiceList(result);\n } else {\n setDataServiceList([]);\n setInitialData([]);\n }\n })[\"finally\"](function () {\n setLoading(false);\n });\n } else {\n // 本地过滤检索\n var filteredList = handleSearch(keyword, initialData);\n setDataServiceList(filteredList);\n setLoading(false);\n }\n }\n } else {\n var _filteredList = handleSearch(keyword, dropdownRender);\n setDataServiceList(_filteredList);\n setLoading(false);\n }\n } else {\n setDataServiceList([]);\n setHasFetchedData(false);\n setInitialData([]);\n }\n }, [keyword, isShow, dropdownRender]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (defaultValue) {\n setValue(defaultValue);\n var renderList = dropdownRender.length > 0 ? dropdownRender : dropDownList;\n\n // 根据 defaultValue 找到对应的选项索引,并设置 focusedOption\n var defaultOptionIndex = renderList.findIndex(function (item) {\n return item[name] === defaultValue;\n });\n if (defaultOptionIndex !== -1) {\n setFocusedOption(defaultOptionIndex);\n } else {\n setFocusedOption(null); // 如果没有找到匹配项,重置为 null\n }\n } else {\n setValue(\"\");\n setFocusedOption(null); // 没有默认值时,重置 focusedOption\n }\n }, [defaultValue, dropDownList, dropdownRender]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(wrapperClassName, \"select-input__wrapper\")\n }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === \"string\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", null, label) : label) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__content\",\n style: {\n width: typeof size === \"number\" ? \"\".concat(size, \"px\") : \"auto\"\n },\n ref: dropdown\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n type: \"text\",\n onChange: handleInputChange,\n id: inputId,\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(wrapperConentInputClassName, \"form-control\"), \"select-input__content__input\"),\n onFocus: function onFocus() {\n if (isDisableBodyScroll) {\n var targetElement = document.body;\n (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.disableBodyScroll)(targetElement);\n }\n if (type === \"MULTI\") {\n setKeyword(\"\");\n }\n setIsShow(true);\n var title = document.getElementById(\"\".concat(titleId));\n title.classList.add(\"text-secondary-emphasis\", \"z-n1\");\n },\n onBlur: function onBlur() {\n var title = document.getElementById(\"\".concat(titleId));\n var input = document.getElementById(\"\".concat(inputId));\n title.classList.remove(\"text-secondary-emphasis\", \"z-n1\");\n input.value = \"\";\n setTimeout(function () {\n if (isDisableBodyScroll) {\n (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.clearAllBodyScrollLocks)();\n }\n if (type === \"COMMON\") {\n setKeyword(\"\");\n // setIsShow(false);\n }\n setFocusedOption(null);\n }, 100);\n },\n onKeyDown: handleKeyDown,\n autoComplete: \"off\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"select-input__content__arrow \".concat(isShow ? \"select-input__content__arrow--reverse\" : \"\"),\n onClick: function onClick() {\n var input = document.getElementById(\"\".concat(inputId));\n input.focus();\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n width: \"10px\",\n height: \"10px\",\n viewBox: \"0 -4.5 20 20\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n stroke: \"none\",\n strokeWidth: \"1\",\n fill: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n transform: \"translate(-180.000000, -6684.000000)\",\n className: \"arrow-fill-g\",\n fill: \"#a5a5a5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n transform: \"translate(56.000000, 160.000000)\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n d: \"M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39\"\n })))))), isShow && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n ref: dropdownContent,\n className: \"select-input__popup__menu position-absolute shadow border rounded \".concat(isShow ? \"select-input__popup__menu--isShow\" : \"\", \" \").concat((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(popupMenuClassName)),\n style: {\n zIndex: zIndex,\n width: \"\".concat((_dropdown$current = dropdown.current) === null || _dropdown$current === void 0 ? void 0 : _dropdown$current.getBoundingClientRect().width, \"px\")\n }\n }, loading && dataService ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1\"\n }, \"\\u52A0\\u8F7D\\u4E2D...\") : dropDownList.length !== 0 ? type === \"COMMON\" ? dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n key: item[id] || \"\",\n onMouseDown: function onMouseDown(e) {\n e.stopPropagation();\n chooseOption(item);\n },\n onFocus: function onFocus() {\n return handleOptionFocus(item);\n },\n onBlur: handleOptionBlur,\n \"data-id\": item[id],\n \"data-name\": item[name]\n }, item[name]);\n }) : dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n key: item[id] || \"\",\n onMouseDown: function onMouseDown(e) {\n e.stopPropagation();\n toggleSelection(item);\n },\n onFocus: function onFocus() {\n return handleOptionFocus(item);\n },\n onBlur: handleOptionBlur,\n \"data-id\": item[id],\n \"data-name\": item[name]\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n type: \"checkbox\",\n className: \"form-check-input me-2\",\n onMouseDown: function onMouseDown(e) {\n return e.stopPropagation();\n },\n checked: value.some(function (i) {\n return i[id] === item[id];\n }),\n onChange: function onChange() {\n return toggleSelection(item);\n }\n }), item[name]);\n }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1\"\n }, \"\\u6CA1\\u6709\\u66F4\\u591A\\u6570\\u636E\")), document.body), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n id: \"\".concat(titleId),\n className: \"position-absolute ms-2 select-input__content__word__container\",\n style: {\n transform: \"translateY(-50%)\",\n top: \"50%\",\n width: \"\".concat((_dropdown$current2 = dropdown.current) === null || _dropdown$current2 === void 0 ? void 0 : _dropdown$current2.getBoundingClientRect().width, \"px\")\n },\n onMouseDown: function onMouseDown(e) {\n e.preventDefault();\n var input = document.getElementById(\"\".concat(inputId));\n input.focus();\n },\n title: Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n return item[name];\n }).join(\", \") : value\n }, type === \"COMMON\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, value) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n return item[name];\n }).join(\", \") : value))));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
|
|
59
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ SelectInput)\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 react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! body-scroll-lock */ \"../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js\");\n/* harmony import */ var _utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/useKeyboardNavigation */ \"./src/utils/useKeyboardNavigation.ts\");\n/* harmony import */ var _utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/userDropDown */ \"./src/utils/userDropDown.ts\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\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 _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\n// my-utils\n\n\n\n\nfunction SelectInput(_ref) {\n var _dropdown$current, _dropdown$current2;\n var _ref$type = _ref.type,\n type = _ref$type === void 0 ? \"COMMON\" : _ref$type,\n label = _ref.label,\n wrapperClassName = _ref.wrapperClassName,\n wrapperConentInputClassName = _ref.wrapperConentInputClassName,\n popupMenuClassName = _ref.popupMenuClassName,\n id = _ref.id,\n name = _ref.name,\n _ref$kbcode = _ref.kbcode,\n kbcode = _ref$kbcode === void 0 ? \"kb_code\" : _ref$kbcode,\n dropdownRender = _ref.dropdownRender,\n inputId = _ref.inputId,\n titleId = _ref.titleId,\n defaultValue = _ref.defaultValue,\n index = _ref.index,\n onChange = _ref.onChange,\n onKeyDown = _ref.onKeyDown,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? \"auto\" : _ref$size,\n _ref$zIndex = _ref.zIndex,\n zIndex = _ref$zIndex === void 0 ? 1101 : _ref$zIndex,\n _ref$isHandleInput = _ref.isHandleInput,\n isHandleInput = _ref$isHandleInput === void 0 ? false : _ref$isHandleInput,\n _ref$isDisableBodyScr = _ref.isDisableBodyScroll,\n isDisableBodyScroll = _ref$isDisableBodyScr === void 0 ? false : _ref$isDisableBodyScr,\n dataService = _ref.dataService,\n _ref$dataServiceFunct = _ref.dataServiceFunction,\n dataServiceFunction = _ref$dataServiceFunct === void 0 ? \"retrieveList\" : _ref$dataServiceFunct,\n dataServiceFunctionParams = _ref.dataServiceFunctionParams,\n _ref$dataServiceRetri = _ref.dataServiceRetrieve,\n dataServiceRetrieve = _ref$dataServiceRetri === void 0 ? false : _ref$dataServiceRetri,\n renderOption = _ref.renderOption;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState2 = _slicedToArray(_useState, 2),\n keyword = _useState2[0],\n setKeyword = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"),\n _useState4 = _slicedToArray(_useState3, 2),\n value = _useState4[0],\n setValue = _useState4[1];\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState6 = _slicedToArray(_useState5, 2),\n isShow = _useState6[0],\n setIsShow = _useState6[1];\n var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState8 = _slicedToArray(_useState7, 2),\n loading = _useState8[0],\n setLoading = _useState8[1];\n\n // 调用dataService获取的值\n var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n _useState10 = _slicedToArray(_useState9, 2),\n dataServiceList = _useState10[0],\n setDataServiceList = _useState10[1];\n var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),\n _useState12 = _slicedToArray(_useState11, 2),\n initialData = _useState12[0],\n setInitialData = _useState12[1]; // 用来保存初始接口数据\n var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState14 = _slicedToArray(_useState13, 2),\n hasFetchedData = _useState14[0],\n setHasFetchedData = _useState14[1]; // 判断是否已经调用过接口\n\n // 判断下拉框位置\n var _useDropdown = (0,_utils_userDropDown__WEBPACK_IMPORTED_MODULE_4__.useDropdown)(isShow, setIsShow, dataServiceList, loading),\n dropdown = _useDropdown.dropdown,\n dropdownContent = _useDropdown.dropdownContent;\n\n // 键盘逻辑\n var _useKeyboardNavigatio = (0,_utils_useKeyboardNavigation__WEBPACK_IMPORTED_MODULE_3__.useKeyboardNavigation)(dataServiceList.length, function (index) {\n return chooseOption(dataServiceList[index]);\n }, onKeyDown),\n focusedOption = _useKeyboardNavigatio.focusedOption,\n setFocusedOption = _useKeyboardNavigatio.setFocusedOption,\n handleKeyDown = _useKeyboardNavigatio.handleKeyDown,\n handleOptionFocus = _useKeyboardNavigatio.handleOptionFocus,\n handleOptionBlur = _useKeyboardNavigatio.handleOptionBlur;\n var dropDownList = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {\n return dataServiceList;\n }, [dataServiceList]);\n\n // input框输入\n var handleInputChange = function handleInputChange(event) {\n var newValue = event.target.value.trim().toLowerCase();\n setKeyword(newValue);\n\n // 当允许手动输入时,触发 onChange 事件,将输入值传递给父组件\n if (isHandleInput) {\n if (index) {\n onChange(newValue, index);\n } else {\n onChange(newValue);\n }\n }\n };\n\n // 单选选择option\n function chooseOption(item) {\n setIsShow(false);\n if (index) {\n onChange(item, index);\n } else {\n onChange(item);\n }\n setValue(item[name]);\n setKeyword(\"\"); // 清空关键词以重置列表\n setFocusedOption(null); // 重置焦点选项为 null\n\n // 失去焦点\n setTimeout(function () {\n var input = document.getElementById(\"\".concat(inputId));\n input.blur();\n }, 0);\n }\n\n // 多选判断是否勾选\n function toggleSelection(item) {\n var exists = value.some(function (i) {\n return i[id] === item[id];\n });\n var newValue;\n if (exists) {\n newValue = value.filter(function (i) {\n return i[id] !== item[id];\n });\n } else {\n newValue = [].concat(_toConsumableArray(value), [item]);\n }\n setValue(newValue);\n if (index) {\n onChange(newValue, index);\n } else {\n onChange(newValue);\n }\n\n // 如果需要向父组件传递多选结果,可以在此调用 onChange\n // onChange(newValue)\n }\n\n // 检索\n var handleSearch = function handleSearch(keyword, searchArray) {\n var filteredList = searchArray.filter(function (obj) {\n var _obj$name;\n var nameMatch = obj[name] ? (_obj$name = obj[name]) === null || _obj$name === void 0 ? void 0 : _obj$name.includes(keyword) : false;\n var kbcodeMatch = obj[kbcode] ? obj[kbcode].includes(keyword) : false;\n return nameMatch || kbcodeMatch;\n });\n return filteredList;\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (isShow) {\n setLoading(true);\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] = keyword || \"*\"; // 替换为 keyword 或 '*'\n }\n\n // 如果该参数是true,则代表是retrieve接口,实时搜索\n if (dataServiceRetrieve) {\n dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n if (result.length > 0) {\n setDataServiceList(result);\n } else {\n setDataServiceList([]);\n }\n })[\"finally\"](function () {\n setLoading(false);\n });\n } else {\n if (!hasFetchedData) {\n // 如果没有调用过接口,则调用一次\n dataService[dataServiceFunction].apply(dataService, _toConsumableArray(params)).then(function (result) {\n setHasFetchedData(true); // 标记已经获取过数据\n\n if (result.length > 0) {\n setInitialData(result); // 保存原始数据\n setDataServiceList(result);\n } else {\n setDataServiceList([]);\n setInitialData([]);\n }\n })[\"finally\"](function () {\n setLoading(false);\n });\n } else {\n // 本地过滤检索\n var filteredList = handleSearch(keyword, initialData);\n setDataServiceList(filteredList);\n setLoading(false);\n }\n }\n } else {\n var _filteredList = handleSearch(keyword, dropdownRender);\n setDataServiceList(_filteredList);\n setLoading(false);\n }\n } else {\n setDataServiceList([]);\n setHasFetchedData(false);\n setInitialData([]);\n }\n }, [keyword, isShow, dropdownRender]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (defaultValue) {\n setValue(defaultValue);\n var renderList = dropdownRender.length > 0 ? dropdownRender : dropDownList;\n\n // 根据 defaultValue 找到对应的选项索引,并设置 focusedOption\n var defaultOptionIndex = renderList.findIndex(function (item) {\n return item[name] === defaultValue;\n });\n if (defaultOptionIndex !== -1) {\n setFocusedOption(defaultOptionIndex);\n } else {\n setFocusedOption(null); // 如果没有找到匹配项,重置为 null\n }\n } else {\n setValue(\"\");\n setFocusedOption(null); // 没有默认值时,重置 focusedOption\n }\n }, [defaultValue, dropDownList, dropdownRender]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(wrapperClassName, \"select-input__wrapper\")\n }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === \"string\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"label\", null, label) : label) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__content\",\n style: {\n width: typeof size === \"number\" ? \"\".concat(size, \"px\") : \"auto\"\n },\n ref: dropdown\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n type: \"text\",\n onChange: handleInputChange,\n id: inputId,\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsWrite)(wrapperConentInputClassName, \"form-control\"), \"select-input__content__input\"),\n onFocus: function onFocus() {\n if (isDisableBodyScroll) {\n var targetElement = document.body;\n (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.disableBodyScroll)(targetElement);\n }\n if (type === \"MULTI\") {\n setKeyword(\"\");\n }\n setIsShow(true);\n var title = document.getElementById(\"\".concat(titleId));\n title.classList.add(\"text-secondary-emphasis\", \"z-n1\");\n },\n onBlur: function onBlur() {\n var title = document.getElementById(\"\".concat(titleId));\n var input = document.getElementById(\"\".concat(inputId));\n title.classList.remove(\"text-secondary-emphasis\", \"z-n1\");\n input.value = \"\";\n setTimeout(function () {\n if (isDisableBodyScroll) {\n (0,body_scroll_lock__WEBPACK_IMPORTED_MODULE_2__.clearAllBodyScrollLocks)();\n }\n if (type === \"COMMON\") {\n setKeyword(\"\");\n // setIsShow(false);\n }\n setFocusedOption(null);\n }, 100);\n },\n onKeyDown: handleKeyDown,\n autoComplete: \"off\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"select-input__content__arrow \".concat(isShow ? \"select-input__content__arrow--reverse\" : \"\"),\n onClick: function onClick() {\n var input = document.getElementById(\"\".concat(inputId));\n input.focus();\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"svg\", {\n width: \"10px\",\n height: \"10px\",\n viewBox: \"0 -4.5 20 20\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n stroke: \"none\",\n strokeWidth: \"1\",\n fill: \"none\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n transform: \"translate(-180.000000, -6684.000000)\",\n className: \"arrow-fill-g\",\n fill: \"#a5a5a5\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"g\", {\n transform: \"translate(56.000000, 160.000000)\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"path\", {\n d: \"M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39\"\n })))))), isShow && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n ref: dropdownContent,\n className: \"select-input__popup__menu position-absolute shadow border rounded \".concat(isShow ? \"select-input__popup__menu--isShow\" : \"\", \" \").concat((0,_utils_cls__WEBPACK_IMPORTED_MODULE_5__.clsCombine)(popupMenuClassName)),\n style: {\n zIndex: zIndex,\n width: \"\".concat((_dropdown$current = dropdown.current) === null || _dropdown$current === void 0 ? void 0 : _dropdown$current.getBoundingClientRect().width, \"px\")\n }\n }, loading && dataService ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1\"\n }, \"\\u52A0\\u8F7D\\u4E2D...\") : dropDownList.length !== 0 ? type === \"COMMON\" ? dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n key: item[id] || \"\",\n onMouseDown: function onMouseDown(e) {\n e.stopPropagation();\n chooseOption(item);\n },\n onFocus: function onFocus() {\n return handleOptionFocus(item);\n },\n onBlur: handleOptionBlur,\n \"data-id\": item[id],\n \"data-name\": item[name]\n }, renderOption ? renderOption(item) // 使用自定义渲染函数\n : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, item[name]) // 默认渲染\n );\n }) : dropDownList === null || dropDownList === void 0 ? void 0 : dropDownList.map(function (item, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1 \".concat(index + 1 === dropDownList.length ? \"\" : \"border-bottom\", \" \").concat(focusedOption === index ? \"text-bg-primary\" : \"\"),\n key: item[id] || \"\",\n onMouseDown: function onMouseDown(e) {\n e.stopPropagation();\n toggleSelection(item);\n },\n onFocus: function onFocus() {\n return handleOptionFocus(item);\n },\n onBlur: handleOptionBlur,\n \"data-id\": item[id],\n \"data-name\": item[name]\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", {\n type: \"checkbox\",\n className: \"form-check-input me-2\",\n onMouseDown: function onMouseDown(e) {\n return e.stopPropagation();\n },\n checked: value.some(function (i) {\n return i[id] === item[id];\n }),\n onChange: function onChange() {\n return toggleSelection(item);\n }\n }), renderOption ? renderOption(item) // 使用自定义渲染函数\n : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, item[name]) // 默认渲染\n );\n }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"select-input__popup__list py-1 px-1\"\n }, \"\\u6CA1\\u6709\\u66F4\\u591A\\u6570\\u636E\")), document.body), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n id: \"\".concat(titleId),\n className: \"position-absolute ms-2 select-input__content__word__container\",\n style: {\n transform: \"translateY(-50%)\",\n top: \"50%\",\n width: \"\".concat((_dropdown$current2 = dropdown.current) === null || _dropdown$current2 === void 0 ? void 0 : _dropdown$current2.getBoundingClientRect().width, \"px\")\n },\n onMouseDown: function onMouseDown(e) {\n e.preventDefault();\n var input = document.getElementById(\"\".concat(inputId));\n input.focus();\n },\n title: Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n return item[name];\n }).join(\", \") : value\n }, type === \"COMMON\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, value) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, Array.isArray(value) && value.length > 0 ? value.map(function (item) {\n return item[name];\n }).join(\", \") : value))));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
|
|
60
60
|
|
|
61
61
|
/***/ }),
|
|
62
62
|
|
package/Trees/index.d.ts
CHANGED
|
@@ -8,10 +8,10 @@ interface Props {
|
|
|
8
8
|
data: any[];
|
|
9
9
|
defaultId?: any;
|
|
10
10
|
treeDataItemClick?: Function;
|
|
11
|
-
|
|
11
|
+
renderCustomContent?: (node: any) => JSX.Element;
|
|
12
12
|
dataService?: any;
|
|
13
13
|
dataServiceFunction?: string;
|
|
14
14
|
dataServiceFunctionParams?: any[];
|
|
15
15
|
}
|
|
16
|
-
export default function Index({ treesRef, id, name, wrapperClassName, data, defaultId, treeDataItemClick,
|
|
16
|
+
export default function Index({ treesRef, id, name, wrapperClassName, data, defaultId, treeDataItemClick, renderCustomContent, dataService, dataServiceFunction, dataServiceFunctionParams, }: Props): JSX.Element;
|
|
17
17
|
export {};
|
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 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 _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 _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) {\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 = !!item.children && item.children.length > 0; // 判断是否有子节点\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 }, hasChildren || !item.active ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"arrow\",\n onClick: function onClick() {\n 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 })))) : /*#__PURE__*/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 })))) : null, /*#__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]), item.customContent && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"custom-content\"\n }, item.customContent))), 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)));\n }));\n};\nfunction Index(_ref) {\n var treesRef = _ref.treesRef,\n id = _ref.id,\n name = _ref.name,\n wrapperClassName = _ref.wrapperClassName,\n data = _ref.data,\n defaultId = _ref.defaultId,\n treeDataItemClick = _ref.treeDataItemClick,\n createCustomContent = _ref.createCustomContent,\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 callback(node); // 修改当前节点\n } else if (node.children && node.children.length > 0) {\n node.children = _updateTreeNode(node.children, nodeId, callback); // 递归修改子节点\n }\n return node;\n });\n };\n\n // 节点点击逻辑\n var toggleNode = function toggleNode(node) {\n if (!node.children || node.children.length === 0) {\n // 如果没有子节点,动态加载\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.loading = true;\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 customContent: createCustomContent && createCustomContent(item)\n });\n });\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.children = _toConsumableArray(newChildren); // 填充子节点\n n.active = true; // 展开当前节点\n n.loading = false;\n });\n });\n } else {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.children = [];\n n.active = true;\n n.loading = false;\n });\n });\n }\n });\n } else {\n setTimeout(function () {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.active = true;\n n.loading = false;\n });\n });\n }, 100);\n }\n } else {\n // 如果已有子节点,直接切换 active 状态\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.active = !n.active;\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)));\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 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 _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 _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, renderCustomContent) {\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 = !!item.children && item.children.length > 0; // 判断是否有子节点\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 }, hasChildren || !item.active ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", {\n className: \"arrow\",\n onClick: function onClick() {\n 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 })))) : /*#__PURE__*/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 })))) : null, /*#__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, renderCustomContent)));\n }));\n};\nfunction Index(_ref) {\n var treesRef = _ref.treesRef,\n id = _ref.id,\n name = _ref.name,\n wrapperClassName = _ref.wrapperClassName,\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 callback(node); // 修改当前节点\n } else if (node.children && node.children.length > 0) {\n node.children = _updateTreeNode(node.children, nodeId, callback); // 递归修改子节点\n }\n return node;\n });\n };\n\n // 节点点击逻辑\n var toggleNode = function toggleNode(node) {\n if (!node.children || node.children.length === 0) {\n // 如果没有子节点,动态加载\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.loading = true;\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 n.children = _toConsumableArray(newChildren); // 填充子节点\n n.active = true; // 展开当前节点\n n.loading = false;\n });\n });\n } else {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.children = [];\n n.active = true;\n n.loading = false;\n });\n });\n }\n });\n } else {\n setTimeout(function () {\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.active = true;\n n.loading = false;\n });\n });\n }, 100);\n }\n } else {\n // 如果已有子节点,直接切换 active 状态\n setTreeData(function (prevData) {\n return _updateTreeNode(prevData, node[id], function (n) {\n n.active = !n.active;\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, renderCustomContent)));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
|
|
50
50
|
|
|
51
51
|
/***/ }),
|
|
52
52
|
|