@flatbiz/antd
Version:
1,123 lines (1,107 loc) • 48.7 kB
JavaScript
/* eslint-disable */
import './../button-operate/index.css';
import './../dialog-confirm/index.css';
import './../fba-hooks/index.css';
import './../fba-utils/index.css';
import './../input-search-wrapper/index.css';
import './../request-status/index.css';
import './index.css';
/*! @flatjs/forge MIT @flatbiz/antd */
import { treeToArray, arrayToMap, isUndefinedOrNull, treeToTiledArray, treeLeafParentsArray, isNotEmptyArray, treeToTiledMap, getUuid, toArray, treeFilter, findParentsElement, attachPropertiesToComponent } from '@flatbiz/utils';
import { isArray } from '@dimjs/lang/is-array';
import { Model } from '@dimjs/model-react';
import { arrayRemove } from '@dimjs/utils/array/array-remove';
import _CaretDownFilled from '@ant-design/icons/es/icons/CaretDownFilled.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { isString } from '@dimjs/lang/is-string';
import { c as _toConsumableArray, b as _objectSpread2, i as _defineProperty, _ as _objectWithoutProperties, a as _slicedToArray } from '../_rollupPluginBabelHelpers-BspM60Sw.js';
import { extend } from '@dimjs/utils/extend/extend';
import { get } from '@dimjs/utils/get/get';
import { forwardRef, useMemo, useState, useRef, useImperativeHandle, Fragment, isValidElement } from 'react';
import { useUpdate, useSafeState, useMemoizedFn, useDeepCompareEffect, useUpdateEffect, useDebounceFn } from 'ahooks';
import { Spin, Tree, Button, message } from 'antd';
import { cloneState } from '@dimjs/model';
import { a as ButtonOperate } from '../button-operate-BLs4OaUe.js';
import { fbaHooks } from '../fba-hooks/index.js';
import { I as InputSearchWrapper } from '../input-search-wrapper-Fw29CABR.js';
import { R as RequestStatus } from '../request-status-Cjtei7Bl.js';
import { walkThroughTree } from '@dimjs/utils/tree/walk-through-tree';
import { isObject } from '@dimjs/lang/is-object';
import 'dequal';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@ant-design/icons/es/icons/MoreOutlined.js';
import '@dimjs/lang/is-undefined';
import '@dimjs/lang/is-plain-object';
import '@dimjs/lang/is-promise';
import '../button-wrapper-BGjkUPpk.js';
import '@ant-design/icons/es/icons/LoadingOutlined.js';
import '../config-provider-wrapper-Bxh9JdL4.js';
import 'antd/es/locale/en_US.js';
import 'antd/es/locale/zh_CN.js';
import 'dayjs';
import 'dayjs/plugin/advancedFormat.js';
import 'dayjs/plugin/customParseFormat.js';
import 'dayjs/plugin/localeData.js';
import 'dayjs/plugin/utc.js';
import 'dayjs/plugin/weekday.js';
import 'dayjs/plugin/weekOfYear.js';
import 'dayjs/plugin/weekYear.js';
import '../fba-utils-CusZeveq.js';
import 'dayjs/locale/en.js';
import 'dayjs/locale/zh-cn.js';
import '../dropdown-menu-wrapper-DlstqgER.js';
import '@ant-design/icons/es/icons/ExclamationCircleFilled.js';
import '../dialog-confirm-CfR3Y2vA.js';
import '../dialog-modal-CGMNBSgq.js';
import 'react-dom/client';
import '../flex-layout-BGtMe7zr.js';
import '../use-responsive-point-Bp3D3lZT.js';
import '../text-overflow-B4NevAuv.js';
var defaultState = {
treeList: [],
treeTiledArray: [],
treeTiledArrayMap: {},
queryIsEmpty: false
};
var TreeWrapperModel = {
actions: {
setTreeList: function setTreeList(params) {
return function (state) {
state.treeList = params.treeList || [];
state.treeTiledArray = treeToArray(state.treeList, params.childrenName);
state.treeTiledArrayMap = arrayToMap(state.treeTiledArray, params.valueName);
state.requestStatus = 'request-success';
};
},
resetTreeList: function resetTreeList() {
return function (state) {
state.treeList = [];
state.treeTiledArray = [];
state.treeTiledArrayMap = {};
};
},
changeRequestStatus: function changeRequestStatus(params) {
return function (state) {
state.requestStatus = params.status;
if (params.status === 'request-error') {
state.treeList = [];
state.treeTiledArray = [];
state.treeTiledArrayMap = {};
state.requestErrorMessage = params.errorMessage || '数据查询异常';
} else {
state.requestErrorMessage = undefined;
}
};
},
treeListAppendChildren: function treeListAppendChildren(params) {
return function (state) {
var tiledArray = treeToArray(state.treeList, params.childrenName);
var treeTiledArrayMap = arrayToMap(tiledArray, params.valueName);
var target = treeTiledArrayMap[params.value];
if (target) {
if (isArray(params.appendList) && params.appendList.length > 0) {
target[params.childrenName] = params.appendList;
} else {
target.isLeaf = true;
}
}
state.treeTiledArray = tiledArray;
state.treeTiledArrayMap = treeTiledArrayMap;
};
}
},
state: defaultState
};
var treeWrapperModels = {};
/**
* ```
* 使用方式
* const [state, actions] = useTreeWrapperModel('key值').useStore();
* ```
*/
var treeWrapperModel = function treeWrapperModel(key) {
if (!treeWrapperModels[key]) {
treeWrapperModels[key] = Model(TreeWrapperModel);
}
return treeWrapperModels[key];
};
var getTreeDataList = function getTreeDataList(modelKey) {
var state = treeWrapperModel(modelKey).getState();
return state.treeList;
};
var getDefaultExpandAllKeys = function getDefaultExpandAllKeys(treeList, fieldNames) {
var allValues = treeToArray(treeList, fieldNames.children).filter(function (item) {
var childrenValue = item[fieldNames.children];
return childrenValue && childrenValue.length > 0;
}).map(function (item) {
return item[fieldNames.value];
});
return allValues;
};
var getExpandedKeys = function getExpandedKeys(value, treeList, fieldNames) {
var tiledArray = treeToTiledArray(treeList, fieldNames);
return treeLeafParentsArray(value, tiledArray, true, {
value: 'value',
parentValue: 'parentValue'
}).filter(function (item) {
var childrenValue = item[fieldNames.children];
return childrenValue && childrenValue.length > 0;
}).map(function (item) {
return item.value;
});
};
var getVauleList = function getVauleList(data, labelInValueFieldNames) {
var tempList = isUndefinedOrNull(data) ? [] : data;
tempList = isArray(tempList) ? tempList : [tempList];
tempList = tempList.map(function (item) {
if (isObject(item)) return item[labelInValueFieldNames.value];
return item;
});
return tempList;
};
var onTreeDrop = function onTreeDrop(dataList, fieldNames, info) {
var dropKey = info.node.key;
var dragKey = info.dragNode.key;
var dropPos = info.node.pos.split('-');
var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
var treeKeyName = fieldNames.value;
var treeChildrenName = fieldNames.children;
var _loop = function loop(data, key, callback) {
for (var i = 0; i < data.length; i++) {
if (data[i][treeKeyName] === key) {
return callback(data[i], i, data);
}
if (data[i][treeChildrenName]) {
_loop(data[i][treeChildrenName], key, callback);
}
}
};
var data = cloneState(dataList);
// Find dragObject
var dragObj;
_loop(data, dragKey, function (item, index, arr) {
arr.splice(index, 1);
dragObj = item;
});
if (!info.dropToGap) {
// Drop on the content
_loop(data, dropKey, function (item) {
item[treeChildrenName] = item[treeChildrenName] || [];
// where to insert 示例添加到头部，可以是随意位置
item[treeChildrenName].unshift(dragObj);
});
} else if ((info.node.props.children || []).length > 0 &&
// Has children
info.node.props.expanded &&
// Is expanded
dropPosition === 1 // On the bottom gap
) {
_loop(data, dropKey, function (item) {
item[treeChildrenName] = item[treeChildrenName] || [];
// where to insert 示例添加到头部，可以是随意位置
item[treeChildrenName].unshift(dragObj);
// in previous version, we use item.children.push(dragObj) to insert the
// item to the tail of the children
});
} else {
var ar = [];
var i;
_loop(data, dropKey, function (_item, index, arr) {
ar = arr;
i = index;
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
}
return {
dataList: data,
dragNodeData: dragNodeData(dragKey, data, fieldNames)
};
};
var dragNodeData = function dragNodeData(dorpNodeId, dataList, fieldNames) {
var id = fieldNames.value;
var children = fieldNames.children;
walkThroughTree(_defineProperty(_defineProperty({}, id, undefined), children, dataList), function (node, index, _parent) {
node['__index'] = index;
node['__parentId'] = _parent === null || _parent === void 0 ? void 0 : _parent[id];
}, children);
var tileList = treeToArray(dataList, children);
var target = tileList.find(function (item) {
return item[id] === dorpNodeId;
});
return {
parentId: target === null || target === void 0 ? void 0 : target['__parentId'],
id: target === null || target === void 0 ? void 0 : target[id],
index: target === null || target === void 0 ? void 0 : target['__index']
};
};
/**
* 由于树节点过滤后，选中了父节点不一定是全部子节点，此处进行筛查
*/
var getActualSelectKeyList = function getActualSelectKeyList(checkedValueList, treeTiledArrayMap, chidlrenKey, valueKey) {
var leafValueDataMap = {};
var hasChildrenList = [];
var retainHasChildrenValueList = [];
checkedValueList.forEach(function (item) {
var _treeTiledArrayMap$it;
if (isNotEmptyArray((_treeTiledArrayMap$it = treeTiledArrayMap[item]) === null || _treeTiledArrayMap$it === void 0 ? void 0 : _treeTiledArrayMap$it[chidlrenKey])) {
hasChildrenList.push(item);
} else {
leafValueDataMap[item] = item;
}
});
if (hasChildrenList.length > 0) {
hasChildrenList.forEach(function (item) {
var childrenTiledList = treeToArray(treeTiledArrayMap[item][chidlrenKey], chidlrenKey);
if (Object.keys(leafValueDataMap).length > childrenTiledList.length) {
var targetList = childrenTiledList.filter(function (item) {
return checkedValueList.find(function (temp) {
return temp === item[valueKey];
});
});
if (targetList.length === childrenTiledList.length) {
retainHasChildrenValueList.push(item);
}
}
});
}
return checkedValueList.filter(function (item) {
return retainHasChildrenValueList.find(function (temp) {
return temp == item;
}) || leafValueDataMap[item];
});
};
/** 移除指定节点以及所有子节点 */
var removeTargetNodeAndAllChildrenNode = function removeTargetNodeAndAllChildrenNode(checkedValueList, awitDeleteNode, chidlrenKey, valueKey) {
var awitDeleteTieldDataMap = treeToTiledMap([awitDeleteNode], {
value: valueKey,
children: chidlrenKey
});
return checkedValueList.filter(function (item) {
return !awitDeleteTieldDataMap[item];
});
};
/** 移除父节点全选下的叶子节点 */
var removeAllSelectLeafNode = function removeAllSelectLeafNode(checkedValueList, treeTiledArrayMap, chidlrenKey, valueKey) {
var awitDeleteCheckedValueMap = {};
checkedValueList.forEach(function (item) {
var _treeTiledArrayMap$it2;
var childrenList = (_treeTiledArrayMap$it2 = treeTiledArrayMap[item]) === null || _treeTiledArrayMap$it2 === void 0 ? void 0 : _treeTiledArrayMap$it2[chidlrenKey];
if (isNotEmptyArray(childrenList)) {
// hasChildrenList.push(item);
var targetMap = treeToTiledMap(childrenList, {
value: valueKey,
children: chidlrenKey
});
awitDeleteCheckedValueMap = _objectSpread2(_objectSpread2({}, awitDeleteCheckedValueMap), targetMap);
}
});
return checkedValueList.filter(function (item) {
return !awitDeleteCheckedValueMap[item];
});
};
/** 移除所有的父节点 */
var removeAllParentNode = function removeAllParentNode(checkedValueList, treeTiledArrayMap, chidlrenKey) {
return checkedValueList.filter(function (item) {
return !isNotEmptyArray(treeTiledArrayMap[item][chidlrenKey]);
});
};
/** values中的数据可能存在缺少父节点下的子节点情况，此处补齐 */
var completionParentChildrenNode = function completionParentChildrenNode(values, treeTiledArrayMap, chidlrenKey, valueKey) {
var allValues = _toConsumableArray(values);
values.forEach(function (item) {
var _treeTiledArrayMap$it3;
var childrenList = (_treeTiledArrayMap$it3 = treeTiledArrayMap[item]) === null || _treeTiledArrayMap$it3 === void 0 ? void 0 : _treeTiledArrayMap$it3[chidlrenKey];
if (isNotEmptyArray(childrenList)) {
var targetList = treeToArray(childrenList, chidlrenKey);
allValues = allValues.concat(targetList.map(function (temp) {
return temp[valueKey];
}));
}
});
return Array.from(new Set(allValues));
};
var _excluded = ["style", "serviceConfig", "effectDependencyList", "selectorTreeList", "value", "onChange", "modelKey", "checkableResponseParentNode", "checkable", "onSelectorTreeListChange", "onRequestResponseChange", "treeItemDataAdapter", "searchValue", "showSearch", "searchPlaceholder", "requestMessageConfig", "labelInValue", "disabledCanUse", "menuTriggerType", "initRootExpand", "searchResultType", "onDropNodeHandle", "onDropPrev", "labelRender", "searchStyle", "className", "defaultExpandAll", "menus", "customSearchRule", "checkableType", "clickParentNodeToggleExpand", "disableNodeSelect", "required", "executeOnChangeInRenderFirstValue"];
var compareArrays = function compareArrays(arr1, arr2) {
var sortedArr1 = arr1.slice().sort();
var sortedArr2 = arr2.slice().sort();
return JSON.stringify(sortedArr1) === JSON.stringify(sortedArr2);
};
/**
* Tree包装组件，默认返回父节点，可配置不返回
* ```
* 1. treeNode内置字段说明（如需要相关功能，可在接口中添加固定字段）
* a. disabled 禁掉响应
* b. isLeaf 设置为叶子节点 (设置了 loadData 时有效)。为 false 时会强制将其作为父节点
* c. disableCheckbox checkable模式下，treeNode复选框是否可选
* 2. 当设置selectorTreeList属性后，serviceConfig将失效
* 3. checkable=true，为多选模式
* 4. 设置value后，组件显示受控
* 5. 设置loadDataFlag=true，会动态获取children，当treeNode中包含isLeaf=true字段，表示为叶子节点，没有children了
* 6. 内置 onDrop 事件已处理数组排序，通过 onDropNodeHandle 事件可获取操作节点排序数据；自定义onDrop后，内置onDrop失效
* ```
*/
var TreeWrapper$1 = /*#__PURE__*/forwardRef(function (props, ref) {
var style = props.style,
serviceConfig = props.serviceConfig,
effectDependencyList = props.effectDependencyList,
selectorTreeList = props.selectorTreeList,
value = props.value,
onChange = props.onChange,
modelKey = props.modelKey,
_props$checkableRespo = props.checkableResponseParentNode,
checkableResponseParentNode = _props$checkableRespo === void 0 ? true : _props$checkableRespo,
checkable = props.checkable,
onSelectorTreeListChange = props.onSelectorTreeListChange,
onRequestResponseChange = props.onRequestResponseChange,
treeItemDataAdapter = props.treeItemDataAdapter,
searchValue = props.searchValue,
showSearch = props.showSearch,
searchPlaceholder = props.searchPlaceholder,
requestMessageConfig = props.requestMessageConfig,
labelInValue = props.labelInValue,
disabledCanUse = props.disabledCanUse,
menuTriggerType = props.menuTriggerType,
initRootExpand = props.initRootExpand,
searchResultType = props.searchResultType,
onDropNodeHandle = props.onDropNodeHandle,
onDropPrev = props.onDropPrev,
labelRender = props.labelRender,
searchStyle = props.searchStyle,
className = props.className,
defaultExpandAll = props.defaultExpandAll,
menus = props.menus,
customSearchRule = props.customSearchRule,
checkableType = props.checkableType,
clickParentNodeToggleExpand = props.clickParentNodeToggleExpand,
disableNodeSelect = props.disableNodeSelect,
required = props.required,
executeOnChangeInRenderFirstValue = props.executeOnChangeInRenderFirstValue,
otherProps = _objectWithoutProperties(props, _excluded);
var forceUpdate = useUpdate();
var modelKeyInner = useMemo(function () {
return modelKey || getUuid();
}, [modelKey]);
// eslint-disable-next-line no-prototype-builtins
var hasSelectorTreeList = props.hasOwnProperty('selectorTreeList');
var newServiceConfig = serviceConfig || {};
var newEffectDependencyList = effectDependencyList || [];
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
treeExpandedKeys = _useState2[0],
setTreeExpandedKeys = _useState2[1];
var _treeWrapperModel$use = treeWrapperModel(modelKeyInner).useStore(),
_treeWrapperModel$use2 = _slicedToArray(_treeWrapperModel$use, 2),
state = _treeWrapperModel$use2[0],
actions = _treeWrapperModel$use2[1];
var _useSafeState = useSafeState(false),
_useSafeState2 = _slicedToArray(_useSafeState, 2),
loading = _useSafeState2[0],
setLoading = _useSafeState2[1];
var requestPreKey = "request-progress-".concat(modelKeyInner);
var searchTypeHighlight = searchResultType === 'highlight';
var fieldNames = useMemo(function () {
return _objectSpread2({
label: 'label',
value: 'value',
children: 'children'
}, props.fieldNames);
}, [props.fieldNames]);
var menuTriggerTypeNew = menuTriggerType === undefined ? 'click' : menuTriggerType;
var responseFirstRef = useRef(true);
var innerValueListRef = useRef(undefined);
var labelInValueFieldNamesMerge = useMemo(function () {
return {
label: 'label',
value: 'value'
};
}, []);
// tree 搜索值
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
treeSearchValue = _useState4[0],
setTreeSearchValue = _useState4[1];
var valueList = useMemo(function () {
return getVauleList(value, labelInValueFieldNamesMerge);
}, [labelInValueFieldNamesMerge, value]);
fbaHooks.useEffectCustom(function () {
if (state.treeList.length > 0) {
if (responseFirstRef.current && labelInValue && executeOnChangeInRenderFirstValue && valueList.length > 0) {
var dataList = [];
var originalList = [];
valueList.forEach(function (item) {
var target = state.treeTiledArrayMap[item];
if (target) {
originalList.push(target);
dataList.push(_defineProperty(_defineProperty({}, labelInValueFieldNamesMerge.label, target[fieldNames.label]), labelInValueFieldNamesMerge.value, target[fieldNames.value]));
}
});
if (checkable) {
var _props$onChange;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, dataList ? dataList : undefined, originalList);
} else {
var _props$onChange2;
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, dataList ? dataList[0] : undefined, originalList[0]);
}
}
if (responseFirstRef.current && valueList.length === 0) {
responseFirstRef.current = false;
if (defaultExpandAll) {
setTreeExpandedKeys(getDefaultExpandAllKeys(state.treeList, fieldNames));
return;
} else if (initRootExpand && state.treeList.length) {
setTreeExpandedKeys([state.treeList[0][fieldNames.value]]);
return;
}
}
if (valueList.length > 0) {
responseFirstRef.current = false;
if (innerValueListRef.current) {
if (!compareArrays(valueList, innerValueListRef.current)) {
var innerExpandedKeys = getTreeExpandedKeys(valueList);
setTreeExpandedKeys(Array.from(new Set(treeExpandedKeys === null || treeExpandedKeys === void 0 ? void 0 : treeExpandedKeys.concat(innerExpandedKeys))));
}
} else {
var _innerExpandedKeys = getTreeExpandedKeys(valueList);
setTreeExpandedKeys(Array.from(new Set(treeExpandedKeys === null || treeExpandedKeys === void 0 ? void 0 : treeExpandedKeys.concat(_innerExpandedKeys))));
}
}
}
// 当 valueList 为空时，不去清除treeExpandedKeys数据
}, [state.treeList, JSON.stringify(valueList)]);
var valueIsEmpty = function valueIsEmpty(data) {
return data === '' || isUndefinedOrNull(data);
};
var serviceResponseHandle = function serviceResponseHandle(respData) {
var result = respData;
if (newServiceConfig.onRequestResultAdapter) {
result = newServiceConfig.onRequestResultAdapter(respData);
} else if (fieldNames.list) {
result = get(respData, fieldNames.list, []) || [];
}
if (!isArray(result)) {
console.warn('接口返回数据为非数组结构，确认是否需要配置fieldNames.list进行解析');
return [];
}
return result;
};
fbaHooks.useEffectCustom(function () {
setTreeSearchValue(searchValue);
}, [searchValue]);
var startDataSourceRequest = useMemoizedFn(function () {
return new Promise(function ($return, $error) {
var requiredParamsKeys, params, isEmpty, _newServiceConfig$onR, _respData, respDataListNew;
var $Try_1_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_1_Catch = function (error) {
try {
responseFirstRef.current = false;
setLoading(false);
void message.error(error.message || '数据查询异常...');
return $Try_1_Post();
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
if (!newServiceConfig.onRequest) {
throw new Error('onRequest 调用接口服务不能为空');
}
requiredParamsKeys = newServiceConfig.requiredParamsKeys;
params = extend({}, newServiceConfig.params);
if (requiredParamsKeys) {
isEmpty = requiredParamsKeys.find(function (key) {
return valueIsEmpty(params[key]);
});
if (isEmpty) {
void actions.changeRequestStatus({
status: 'no-dependencies-params'
});
console.warn("TreeWrapper\u7EC4\u4EF6\uFF1A\u53C2\u6570\uFF1A".concat(requiredParamsKeys.join('、'), "\u4E0D\u80FD\u4E3A\u7A7A"));
return $return();
}
}
var $Try_2_Post = function () {
try {
return $Try_1_Post();
} catch ($boundEx) {
return $Try_1_Catch($boundEx);
}
};
var $Try_2_Catch = function (error) {
try {
window[requestPreKey] = false;
setLoading(false);
void actions.changeRequestStatus({
status: 'request-error',
errorMessage: error.message
});
return $Try_2_Post();
} catch ($boundEx) {
return $Try_1_Catch($boundEx);
}
};
try {
setLoading(true);
return Promise.resolve(actions.changeRequestStatus({
status: 'request-progress'
})).then(function ($await_4) {
try {
window[requestPreKey] = true;
return Promise.resolve((_newServiceConfig$onR = newServiceConfig.onRequest) === null || _newServiceConfig$onR === void 0 ? void 0 : _newServiceConfig$onR.call(newServiceConfig, params)).then(function ($await_5) {
try {
_respData = $await_5;
onRequestResponseChange === null || onRequestResponseChange === void 0 || onRequestResponseChange(_respData);
respDataListNew = serviceResponseHandle(_respData);
if (respDataListNew.length === 0) {
responseFirstRef.current = false;
}
onChangeSelectorList(respDataListNew);
setLoading(false);
window[requestPreKey] = false;
return $Try_2_Post();
} catch ($boundEx) {
return $Try_2_Catch($boundEx);
}
}, $Try_2_Catch);
} catch ($boundEx) {
return $Try_2_Catch($boundEx);
}
}, $Try_2_Catch);
} catch (error) {
$Try_2_Catch(error);
}
} catch (error) {
$Try_1_Catch(error);
}
});
});
useDeepCompareEffect(function () {
if (hasSelectorTreeList) return;
// 当无依赖项时，如果存在缓存数据，就不在调用接口
if (newEffectDependencyList.length) {
void startDataSourceRequest();
return;
}
var allState = treeWrapperModel(modelKeyInner).getState();
if (allState.requestStatus === 'request-success') {
onSelectorTreeListChange === null || onSelectorTreeListChange === void 0 || onSelectorTreeListChange(allState.treeList);
return;
}
// 判断相同的modelKey是否已经在请求数据中，避免重复请求
if (!window[requestPreKey]) {
void startDataSourceRequest();
} else {
onSelectorTreeListChange === null || onSelectorTreeListChange === void 0 || onSelectorTreeListChange(allState.treeList);
}
}, newEffectDependencyList);
fbaHooks.useEffectCustom(function () {
if (hasSelectorTreeList) {
onChangeSelectorList(selectorTreeList || []);
}
}, [selectorTreeList]);
var onChangeSelectorList = useMemoizedFn(function (dataList) {
if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) === 0 && state.treeList.length === 0) {
void actions.changeRequestStatus({
status: 'request-success'
});
return;
}
void actions.setTreeList({
treeList: dataList || [],
childrenName: fieldNames.children,
valueName: fieldNames.value
});
onSelectorTreeListChange === null || onSelectorTreeListChange === void 0 || onSelectorTreeListChange(dataList);
});
var getTreeExpandedKeys = function getTreeExpandedKeys(valueList, refresh) {
var newTreeExpandedKeys = [];
valueList.forEach(function (value) {
var targetKeys = getExpandedKeys(value, state.treeList, fieldNames);
newTreeExpandedKeys = newTreeExpandedKeys.concat(targetKeys);
});
return newTreeExpandedKeys;
};
useUpdateEffect(function () {
if (treeSearchValue) {
var targetList = state.treeTiledArray.filter(function (item) {
var labelValue = item[fieldNames.label] || '';
if (customSearchRule) {
return customSearchRule(item, treeSearchValue);
}
return String(labelValue).toLowerCase().includes(treeSearchValue.toLowerCase());
});
var treeExpandedKeysNew = getTreeExpandedKeys(targetList.map(function (item) {
return item[fieldNames.value];
}));
setTreeExpandedKeys(Array.from(new Set(treeExpandedKeysNew)));
} else {
setTreeExpandedKeys([]);
}
}, [treeSearchValue]);
useImperativeHandle(ref, function () {
return {
onClearSelectorList: function onClearSelectorList() {
void actions.resetTreeList();
},
getTreeDataList: function getTreeDataList() {
return state.treeList;
},
getTreeTiledArray: function getTreeTiledArray() {
return state.treeTiledArray;
},
getTreeTiledArrayMap: function getTreeTiledArrayMap() {
return state.treeTiledArrayMap;
},
onChangeExpandedKeys: function onChangeExpandedKeys(dataList) {
setTreeExpandedKeys(dataList);
},
onSelectAll: function onSelectAll() {
var targetList = state.treeTiledArray.map(function (temp) {
return temp[fieldNames.value];
});
setTreeExpandedKeys(targetList);
onChange === null || onChange === void 0 || onChange(targetList, undefined, state.treeList, undefined);
},
onCancelSelectAll: function onCancelSelectAll() {
setTreeExpandedKeys([]);
onChange === null || onChange === void 0 || onChange(undefined);
},
onExpandedAll: function onExpandedAll() {
var targetList = state.treeTiledArray.map(function (temp) {
return temp[fieldNames.value];
});
setTreeExpandedKeys(targetList);
},
onCancelExpandedAll: function onCancelExpandedAll() {
setTreeExpandedKeys([]);
},
onRefresh: function onRefresh() {
forceUpdate();
}
};
});
var onExpand = useMemoizedFn(function (expandedKeys) {
setTreeExpandedKeys(expandedKeys);
});
var onInnerChange = function onInnerChange(selectedKey, operateNodeData, operateAllNodeDataList, operateInfo) {
innerValueListRef.current = toArray(selectedKey);
if (toArray(selectedKey).length === 0) {
var _props$onChange3;
var nodeValue = operateInfo === null || operateInfo === void 0 ? void 0 : operateInfo.node[fieldNames.value];
var target = state.treeTiledArrayMap[nodeValue];
(_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 || _props$onChange3.call(props, undefined, target, [target], operateInfo);
} else {
var _props$onChange4;
(_props$onChange4 = props.onChange) === null || _props$onChange4 === void 0 || _props$onChange4.call(props, selectedKey, operateNodeData, operateAllNodeDataList, operateInfo);
}
};
var onTreeChangeHandle = useMemoizedFn(function (checkedData, operateInfo) {
// 最终checkValueList
var finalCheckedValueList = [];
// 完整checkValueList
var completeCheckedValueList = [];
if (checkable) {
finalCheckedValueList = props.checkStrictly ? checkedData.checked : checkedData;
} else {
finalCheckedValueList = checkedData;
if (required && !toArray(checkedData).length) {
return;
}
if (disableNodeSelect) {
var target = state.treeTiledArrayMap[checkedData[0]];
var x = target ? disableNodeSelect(target) : false;
if (x) {
return;
}
}
}
finalCheckedValueList = toArray(finalCheckedValueList);
if (!checkable) {
completeCheckedValueList = finalCheckedValueList;
} else {
if (showSearch && treeSearchValue && !searchTypeHighlight) {
// 数据源被过滤情况
var operateNode = operateInfo === null || operateInfo === void 0 ? void 0 : operateInfo.node;
if (props.checkStrictly) {
if (operateInfo.checked == false) {
finalCheckedValueList = valueList.filter(function (item) {
return item != operateNode[fieldNames.value];
});
} else {
finalCheckedValueList = Array.from(new Set([].concat(_toConsumableArray(valueList), _toConsumableArray(finalCheckedValueList))));
}
completeCheckedValueList = finalCheckedValueList;
} else {
// 非checkStrictly=true情况
var propsCompleteValues = checkableType === '2' || checkableType === '3' ? completionParentChildrenNode(valueList, state.treeTiledArrayMap, fieldNames.children, fieldNames.value) : valueList;
if (operateInfo.checked == false) {
finalCheckedValueList = removeTargetNodeAndAllChildrenNode(_toConsumableArray(propsCompleteValues), operateNode, fieldNames.children, fieldNames.value);
} else {
finalCheckedValueList = Array.from(new Set([].concat(_toConsumableArray(propsCompleteValues), _toConsumableArray(finalCheckedValueList))));
}
completeCheckedValueList = getActualSelectKeyList(finalCheckedValueList, state.treeTiledArrayMap, fieldNames.children, fieldNames.value);
}
} else {
// 无搜索情况
completeCheckedValueList = finalCheckedValueList;
}
if (!props.checkStrictly) {
if (checkableType === '2') {
finalCheckedValueList = removeAllParentNode(completeCheckedValueList, state.treeTiledArrayMap, fieldNames.children);
} else if (checkableType === '3') {
finalCheckedValueList = removeAllSelectLeafNode(completeCheckedValueList, state.treeTiledArrayMap, fieldNames.children, fieldNames.value);
} else if (checkableResponseParentNode == false) {
finalCheckedValueList = removeAllParentNode(completeCheckedValueList, state.treeTiledArrayMap, fieldNames.children);
} else {
finalCheckedValueList = completeCheckedValueList;
}
}
}
var completeCheckedItemList = completeCheckedValueList.map(function (item) {
return state.treeTiledArrayMap[item];
});
if (labelInValue) {
var lvValue = labelInValueFieldNamesMerge.value;
var lvLabel = labelInValueFieldNamesMerge.label;
var finalCheckedList = finalCheckedValueList.map(function (item) {
return _defineProperty(_defineProperty({}, lvLabel, state.treeTiledArrayMap[item][fieldNames.label]), lvValue, state.treeTiledArrayMap[item][fieldNames.value]);
});
if (checkable) {
onInnerChange(finalCheckedList, finalCheckedValueList.map(function (item) {
return state.treeTiledArrayMap[item];
}), completeCheckedItemList, operateInfo);
} else {
onInnerChange(finalCheckedList[0], state.treeTiledArrayMap[finalCheckedValueList[0]], completeCheckedItemList, operateInfo);
}
} else {
if (checkable) {
onInnerChange(finalCheckedValueList, finalCheckedValueList.map(function (item) {
return state.treeTiledArrayMap[item];
}), completeCheckedItemList, operateInfo);
} else {
onInnerChange(finalCheckedValueList[0], state.treeTiledArrayMap[finalCheckedValueList[0]], completeCheckedItemList, operateInfo);
}
}
});
var treeItemDataAdapterHandle = useMemoizedFn(function (dataItem) {
return treeItemDataAdapter === null || treeItemDataAdapter === void 0 ? void 0 : treeItemDataAdapter(dataItem);
});
var originalDataList = useMemo(function () {
var list = cloneState(state.treeList || []);
if (treeSearchValue && searchResultType !== 'highlight') {
var resultList = treeFilter(cloneState(state.treeList || []), function (node) {
var _node$fieldNames$labe;
if (customSearchRule) {
return customSearchRule(node, treeSearchValue);
}
var value = (_node$fieldNames$labe = node[fieldNames.label]) === null || _node$fieldNames$labe === void 0 ? void 0 : _node$fieldNames$labe.toLowerCase();
return value.indexOf(treeSearchValue.toLowerCase()) >= 0;
}, {
childrenName: fieldNames.children
});
return resultList;
}
return list;
}, [customSearchRule, fieldNames.children, fieldNames.label, searchResultType, state.treeList, treeSearchValue]);
var treeData = useMemo(function () {
var _loop = function loop(data) {
return data === null || data === void 0 ? void 0 : data.map(function (item) {
var adapterItem = (treeItemDataAdapterHandle === null || treeItemDataAdapterHandle === void 0 ? void 0 : treeItemDataAdapterHandle(item)) || item;
var disabled = disabledCanUse ? undefined : adapterItem.disabled;
var strTitle = adapterItem[fieldNames.label] || '';
var titleDom;
if (treeSearchValue && isString(strTitle)) {
var strTitleNew = strTitle === null || strTitle === void 0 ? void 0 : strTitle.toLowerCase();
var index = strTitleNew.indexOf(treeSearchValue.toLowerCase());
var beforeStr = strTitle.substring(0, index);
var afterStr = strTitle.slice(index + treeSearchValue.length);
var centerStr = strTitle.slice(index, index + treeSearchValue.length);
titleDom = index > -1 ? /*#__PURE__*/jsxs("span", {
className: classNames({
'v-tree-item-disabled': adapterItem.disabled
}),
children: [beforeStr, /*#__PURE__*/jsx("span", {
className: "site-tree-search-value",
children: centerStr
}), afterStr]
}) : null;
}
if (!titleDom && adapterItem.disabled) {
titleDom = /*#__PURE__*/jsx("span", {
className: classNames({
'v-tree-item-disabled': adapterItem.disabled
}),
children: strTitle
});
}
var children = adapterItem[fieldNames.children];
return _objectSpread2(_objectSpread2({}, adapterItem), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
disabled: disabled
}, fieldNames.label, titleDom || strTitle), "_treeItemName", strTitle), "_disabled", adapterItem.disabled), fieldNames.children, isArray(children) && children.length > 0 ? _loop(children) : undefined));
});
};
return _loop(originalDataList);
}, [originalDataList, treeItemDataAdapterHandle, disabledCanUse, fieldNames.label, fieldNames.children, treeSearchValue]);
var loadData = useMemoizedFn(function (dataItem) {
// eslint-disable-next-line no-async-promise-executor
return new Promise(function (resolve, reject) {
return new Promise(function ($return, $error) {
var _props$loadDataServic, _props$loadDataServic2, _props$loadDataServic3, _props$loadDataServic4, _props$loadDataServic5, respData, respDataList;
if (dataItem[fieldNames.children]) {
resolve();
return $return();
}
var $Try_3_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_3_Catch = function (error) {
try {
void message.error(error.message || '数据加载异常...');
// 此处失败后，会重试“loadData”请求多次
reject();
return $Try_3_Post();
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
return Promise.resolve((_props$loadDataServic = props.loadDataServiceConfig) === null || _props$loadDataServic === void 0 || (_props$loadDataServic2 = _props$loadDataServic.onRequest) === null || _props$loadDataServic2 === void 0 ? void 0 : _props$loadDataServic2.call(_props$loadDataServic, ((_props$loadDataServic3 = props.loadDataServiceConfig) === null || _props$loadDataServic3 === void 0 || (_props$loadDataServic4 = _props$loadDataServic3.getParams) === null || _props$loadDataServic4 === void 0 ? void 0 : _props$loadDataServic4.call(_props$loadDataServic3, dataItem)) || {})).then(function ($await_6) {
try {
respData = $await_6;
respDataList = (_props$loadDataServic5 = props.loadDataServiceConfig) !== null && _props$loadDataServic5 !== void 0 && _props$loadDataServic5.onRequestResultAdapter ? props.loadDataServiceConfig.onRequestResultAdapter(respData) : respData;
void actions.treeListAppendChildren({
value: dataItem[fieldNames.value],
appendList: respDataList,
childrenName: fieldNames.children,
valueName: fieldNames.value
}).then(function (allState) {
onChangeSelectorList(allState.treeList);
resolve();
});
return $Try_3_Post();
} catch ($boundEx) {
return $Try_3_Catch($boundEx);
}
}, $Try_3_Catch);
} catch (error) {
$Try_3_Catch(error);
}
});
});
});
var isLeafNode = useMemoizedFn(function (nodeData) {
var children = nodeData === null || nodeData === void 0 ? void 0 : nodeData[fieldNames.children];
// 当loadDataFlag=true，考虑叶子节点显示问题
var loadDataFlag = props.loadDataFlag;
var loadHasChildren = loadDataFlag ? !nodeData.isLeaf : false;
var hasChildren = children && children.length > 0 || loadHasChildren;
return !hasChildren;
});
var titleRender = useMemoizedFn(function (nodeData) {
var stringLabel = nodeData._treeItemName || nodeData[fieldNames.label];
var buttonOperateConfig = menus === null || menus === void 0 ? void 0 : menus(_objectSpread2(_objectSpread2({}, nodeData), {}, _defineProperty({}, fieldNames.label, stringLabel)));
if (buttonOperateConfig !== null && buttonOperateConfig !== void 0 && buttonOperateConfig.operateList.length) {
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx("span", {
className: "tree-item-title",
"data-value": nodeData[fieldNames.value],
children: (labelRender === null || labelRender === void 0 ? void 0 : labelRender(nodeData)) || (nodeData === null || nodeData === void 0 ? void 0 : nodeData[fieldNames.label])
}), /*#__PURE__*/jsx(ButtonOperate, _objectSpread2(_objectSpread2({
gap: 5
}, buttonOperateConfig), {}, {
dropdownMenuProps: _objectSpread2({
placement: 'bottomRight',
isFixed: true
}, buttonOperateConfig === null || buttonOperateConfig === void 0 ? void 0 : buttonOperateConfig.dropdownMenuProps),
className: classNames('tree-item-title-operate', buttonOperateConfig.className)
}))]
});
}
return /*#__PURE__*/jsx(Fragment, {
children: /*#__PURE__*/jsx("span", {
className: "tree-item-title",
"data-value": nodeData[fieldNames.value],
children: (labelRender === null || labelRender === void 0 ? void 0 : labelRender(nodeData)) || (nodeData === null || nodeData === void 0 ? void 0 : nodeData[fieldNames.label])
})
});
});
var _useDebounceFn = useDebounceFn(function (e) {
var _props$onSearchValueC;
var value = e.target.value;
setTreeSearchValue(value);
(_props$onSearchValueC = props.onSearchValueChange) === null || _props$onSearchValueC === void 0 || _props$onSearchValueC.call(props, value);
}, {
wait: 300,
leading: false,
trailing: true
}),
onSearchChange = _useDebounceFn.run;
var iconHandle = useMemoizedFn(function (treeData) {
if (!props.icon) return null;
if (/*#__PURE__*/isValidElement(props.icon)) return props.icon;
var isLeafFlag = isLeafNode(treeData.data);
return props.icon(_objectSpread2(_objectSpread2({}, treeData), {}, {
isParent: !isLeafFlag,
isLeaf: isLeafFlag
}));
});
var treeFieldNames = useMemo(function () {
return {
title: fieldNames.label,
key: fieldNames.value,
children: fieldNames.children
};
}, [fieldNames]);
var showTree = treeData.length > 0 && state.requestStatus !== 'request-error';
var commonProps = _objectSpread2(_objectSpread2({
showLine: {
showLeafIcon: false
},
titleRender: titleRender,
blockNode: true,
switcherIcon: /*#__PURE__*/jsx(_CaretDownFilled, {}),
onDrop: function onDrop(info) {
if (onDropPrev) {
var boo = onDropPrev(info);
if (!boo) return;
}
var _onTreeDrop = onTreeDrop(originalDataList, fieldNames, info),
dataList = _onTreeDrop.dataList,
dragNodeData = _onTreeDrop.dragNodeData;
onDropNodeHandle === null || onDropNodeHandle === void 0 || onDropNodeHandle(dragNodeData);
onChangeSelectorList(dataList);
},
expandedKeys: treeExpandedKeys
}, otherProps), {}, {
fieldNames: treeFieldNames,
treeData: treeData,
onExpand: onExpand,
loadData: props.loadDataFlag ? loadData : undefined,
style: {
width: '100%'
},
icon: iconHandle,
onClick: function onClick(e) {
if (clickParentNodeToggleExpand) {
var targetEle = e.target;
var _value = targetEle.dataset.value;
if (isUndefinedOrNull(_value)) {
targetEle = findParentsElement(e.target, function (node) {
var _node$classList, _node$classList2;
return ((_node$classList = node.classList) === null || _node$classList === void 0 ? void 0 : _node$classList.contains('tree-item-title')) || ((_node$classList2 = node.classList) === null || _node$classList2 === void 0 ? void 0 : _node$classList2.contains('ant-tree-treenode'));
});
_value = targetEle.dataset.value;
}
if (!isUndefinedOrNull(_value)) {
var treeExpandedTarget = false;
if (props.loadDataFlag) {
treeExpandedTarget = treeExpandedKeys.includes(_value);
} else {
var _target$fieldNames$ch;
var target = state.treeTiledArrayMap[_value];
if (!(target !== null && target !== void 0 && (_target$fieldNames$ch = target[fieldNames.children]) !== null && _target$fieldNames$ch !== void 0 && _target$fieldNames$ch.length)) {
return;
}
treeExpandedTarget = treeExpandedKeys.includes(_value);
}
if (treeExpandedTarget) {
var newList = arrayRemove(treeExpandedKeys, _value);
setTreeExpandedKeys(_toConsumableArray(newList));
} else {
setTreeExpandedKeys([].concat(_toConsumableArray(treeExpandedKeys), [_value]));
}
}
}
}
});
var checkedProps = {
onCheck: onTreeChangeHandle,
checkable: checkable,
checkedKeys: valueList
};
var selectedProps = {
onSelect: onTreeChangeHandle,
multiple: false,
selectedKeys: valueList
};
var sceneProps = checkable ? checkedProps : selectedProps;
var cName = classNames('v-tree-wrapper', "v-tree-wrapper-menu-".concat(menuTriggerTypeNew), className);
var isSearchEmpty = state.treeList.length > 0 && !showTree && treeSearchValue;
return /*#__PURE__*/jsxs("div", {
className: cName,
style: style,
children: [!!showSearch && /*#__PURE__*/jsxs("div", {
className: "v-tree-wrapper-search-area",
style: searchStyle,
children: [/*#__PURE__*/jsx(InputSearchWrapper, {
className: "v-tree-wrapper-search",
placeholder: isUndefinedOrNull(searchPlaceholder) ? '搜索' : searchPlaceholder,
onChange: onSearchChange,
value: treeSearchValue,
allowClear: true
}), !!props.searchExtraElement && /*#__PURE__*/jsx("span", {
className: "v-tree-wrapper-search-extra",
children: props.searchExtraElement
})]
}), showTree ? /*#__PURE__*/jsxs("div", {
className: "v-tree-wrapper-tree-wrapper",
children: [/*#__PURE__*/jsx(Spin, {
spinning: state.requestStatus === 'request-progress'
}), /*#__PURE__*/jsx(Tree, _objectSpread2(_objectSpread2(_objectSpread2({}, sceneProps), commonProps), {}, {
className: "v-tree-wrapper-tree"
}))]
}) : /*#__PURE__*/jsx(RequestStatus, {
status: state.requestStatus,
loading: loading,
messageConfig: _objectSpread2({
'request-success': isSearchEmpty ? '搜索结果为空' : '暂无数据',
'request-error': state.requestErrorMessage
}, requestMessageConfig),
errorButton: /*#__PURE__*/jsx(Button, {
type: "primary",
onClick: startDataSourceRequest,
children: "\u91CD\u65B0\u83B7\u53D6\u6570\u636E"
})
})]
});
});
/**
* Tree包装组件，默认返回父节点，可配置不返回
* @param props
* @returns
* ```
* 1. treeNode内置字段说明（如需要相关功能，可在接口中添加固定字段）
* a. disabled 禁掉响应
* b. isLeaf 设置为叶子节点 (设置了 loadData 时有效)。为 false 时会强制将其作为父节点
* c. disableCheckbox checkable模式下，treeNode复选框是否可选
* 2. 当设置selectorTreeList属性后，serviceConfig将失效
* 3. checkable=true，为多选模式
* 4. 设置value后，组件显示受控
* 5. 设置loadDataFlag=true，会动态获取children，当treeNode中包含isLeaf=true字段，表示为叶子节点，没有children了
* 6. 内置 onDrop 事件已处理数组排序，通过 onDropNodeHandle 事件可获取操作节点排序数据；自定义onDrop后，内置onDrop失效
* ```
*/
var TreeWrapper = attachPropertiesToComponent(TreeWrapper$1, {
/**
* 获取树形原数据
* ```
* 参数 modelKey 与 TreeWrapper属性 modelKey相同，才能获取数据
* ```
*/
getTreeDataList: getTreeDataList
});
export { TreeWrapper };
//# sourceMappingURL=index.js.map