@flatbiz/antd
Version:
293 lines (288 loc) • 12.5 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import _CloseCircleFilled from '@ant-design/icons/es/icons/CloseCircleFilled.js';
import _RedoOutlined from '@ant-design/icons/es/icons/RedoOutlined.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2, i as _defineProperty, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { isArray } from '@dimjs/lang/is-array';
import { get } from '@dimjs/utils/get/get';
import { extend } from '@dimjs/utils/extend/extend';
import { forwardRef, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
import { useSafeState, useMemoizedFn } from 'ahooks';
import { Cascader, Button, Flex } from 'antd';
import { toArray, isUndefinedOrNull, treeNodeParentsList } from '@flatbiz/utils';
import { fbaHooks } from './fba-hooks/index.js';
import { R as RequestStatus } from './request-status-Cjtei7Bl.js';
import { isPlainObject } from '@dimjs/lang/is-plain-object';
import { jsx, jsxs } from 'react/jsx-runtime';
var getValues = function getValues(value) {
var values = toArray(value);
return values.map(function (item) {
return isPlainObject(item) ? item === null || item === void 0 ? void 0 : item['value'] : item;
});
};
var _excluded = ["serviceConfig", "fieldNames", "isDynamicLoad", "requestMessageConfig", "onSelectorListChange", "responseType", "labelInValue"];
/**
* 级联选择器包装组件
* ```
* 1. 数据源中 value 不能重复
* 2. 不支持多选
* 3. modelKey的配置是为了缓存数据，只缓存初始化数据，如果isDynamicLoad=true，动态获取的数据不再缓存
* 4. onChange操作第一个参数返回叶子节点value（可配置返回多级），第二个参数返回选中的多级数据
* 5. isDynamicLoad=true 会在请求中添加当前选中option的fieldNames.value为key的数据
* 6. @flatbiz/antd@5.0.25 删除 modelKey 字段
* 7. serviceConfig.params 参数发生变化时，会重新请求数据
* ```
*/
var CascaderWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
var serviceConfig = props.serviceConfig,
fieldNames = props.fieldNames,
isDynamicLoad = props.isDynamicLoad,
requestMessageConfig = props.requestMessageConfig,
onSelectorListChange = props.onSelectorListChange,
responseType = props.responseType,
labelInValue = props.labelInValue,
otherProps = _objectWithoutProperties(props, _excluded);
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
dataList = _useState2[0],
setDataList = _useState2[1];
var _useState3 = useState('request-init'),
_useState4 = _slicedToArray(_useState3, 2),
status = _useState4[0],
setStatus = _useState4[1];
var requestMessageConfigRef = useRef(requestMessageConfig);
var _useSafeState = useSafeState(false),
_useSafeState2 = _slicedToArray(_useSafeState, 2),
loading = _useSafeState2[0],
setLoading = _useSafeState2[1];
var fieldNamesMerge = extend(true, {
label: 'label',
value: 'value',
children: 'children'
}, fieldNames);
var _useState5 = useState(),
_useState6 = _slicedToArray(_useState5, 2),
valueList = _useState6[0],
setValueList = _useState6[1];
var prevParams = fbaHooks.usePrevious(JSON.stringify((serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.params) || {}));
var paramsStr = useMemo(function () {
return JSON.stringify((serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.params) || {});
}, [serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.params]);
useEffect(function () {
requestMessageConfigRef.current = requestMessageConfig;
}, [requestMessageConfig]);
var serviceRespDataAdapter = function serviceRespDataAdapter(respData) {
if (serviceConfig !== null && serviceConfig !== void 0 && serviceConfig.onRequestResultAdapter) {
return serviceConfig.onRequestResultAdapter(respData);
}
if (fieldNames !== null && fieldNames !== void 0 && fieldNames.list) {
respData = get(respData, fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.list);
}
if (!isArray(respData)) {
console.warn('接口返回数据不是数组类型，已被忽略', respData);
return [];
}
return respData;
};
var startDataSourceRequest = useMemoizedFn(function () {
return new Promise(function ($return, $error) {
var _serviceConfig$onRequ, params, target, _props$onChange, respData, respAdapterData;
if (!(serviceConfig !== null && serviceConfig !== void 0 && serviceConfig.onRequest)) {
return $error(new Error('onRequest 调用接口服务不能为空'));
}
var $Try_1_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_1_Catch = function (error) {
try {
setLoading(false);
requestMessageConfigRef.current = _objectSpread2(_objectSpread2({}, requestMessageConfigRef.current), {}, {
'request-error': error.message || '获取数据异常'
});
setStatus('request-error');
return $Try_1_Post();
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
params = serviceConfig.params || {};
// 判断必填参数是否完整
if (serviceConfig !== null && serviceConfig !== void 0 && serviceConfig.requiredParamsKeys) {
target = serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.requiredParamsKeys.find(function (item) {
return isUndefinedOrNull(params[item]);
});
if (target) {
// 当依赖项查询条件为空时，清空当前缓存数据
setDataList([]);
setStatus('no-dependencies-params');
if (props.value) {
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, undefined);
}
return $return();
}
}
setLoading(true);
setStatus('request-progress');
return Promise.resolve((_serviceConfig$onRequ = serviceConfig.onRequest) === null || _serviceConfig$onRequ === void 0 ? void 0 : _serviceConfig$onRequ.call(serviceConfig, params)).then(function ($await_2) {
try {
respData = $await_2;
respAdapterData = serviceRespDataAdapter(respData);
if (isDynamicLoad) {
respAdapterData.map(function (item) {
item.isLeaf = item.isLeaf || false;
});
}
setLoading(false);
setDataList(respAdapterData || []);
onSelectorListChange === null || onSelectorListChange === void 0 || onSelectorListChange(respAdapterData || []);
setStatus('request-success');
return $Try_1_Post();
} catch ($boundEx) {
return $Try_1_Catch($boundEx);
}
}, $Try_1_Catch);
} catch (error) {
$Try_1_Catch(error);
}
});
});
fbaHooks.useEffectCustom(function () {
var values = getValues(props.value);
if (values.length > 0) {
if (responseType === 'all') {
setValueList(values);
} else {
var filterList = treeNodeParentsList(values[0], dataList, true, fieldNamesMerge).reverse();
if (filterList.length === 0) {
setValueList([props.value]);
} else {
setValueList(filterList);
}
}
} else {
setValueList(undefined);
}
}, [dataList, props.value]);
useImperativeHandle(ref, function () {
return {
getCascaderList: function getCascaderList() {
return dataList;
}
};
});
fbaHooks.useEffectCustom(function () {
if (prevParams) {
if (paramsStr !== prevParams) {
void startDataSourceRequest();
}
}
}, [prevParams, paramsStr]);
var onAgainRequest = useMemoizedFn(function () {
void startDataSourceRequest();
});
fbaHooks.useEffectCustom(function () {
void startDataSourceRequest();
}, []);
var loadData = function loadData(selectedOptions) {
return new Promise(function ($return, $error) {
var _serviceConfig$onRequ2, targetOption, respData, respAdapterData;
targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
return Promise.resolve(serviceConfig === null || serviceConfig === void 0 || (_serviceConfig$onRequ2 = serviceConfig.onRequest) === null || _serviceConfig$onRequ2 === void 0 ? void 0 : _serviceConfig$onRequ2.call(serviceConfig, _objectSpread2(_objectSpread2({}, serviceConfig.params), {}, _defineProperty({}, fieldNamesMerge.value, targetOption[fieldNamesMerge.value])))).then(function ($await_3) {
try {
respData = $await_3;
respAdapterData = serviceRespDataAdapter(respData);
if (!respAdapterData || respAdapterData.length === 0) {
targetOption.isLeaf = true;
} else {
respAdapterData.map(function (item) {
item.isLeaf = item.isLeaf || false;
});
targetOption.children = respAdapterData;
}
targetOption.loading = false;
onSelectorListChange === null || onSelectorListChange === void 0 || onSelectorListChange(dataList || []);
setDataList(_toConsumableArray(dataList));
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
});
};
var onChange = useMemoizedFn(function (values, selectList) {
if (labelInValue !== true) {
if (responseType === 'all') {
var _props$onChange2;
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, values, selectList);
} else {
var _props$onChange3;
(_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 || _props$onChange3.call(props, values === null || values === void 0 ? void 0 : values[values.length - 1], selectList);
}
} else {
var labelInValueList = selectList === null || selectList === void 0 ? void 0 : selectList.map(function (item) {
return {
label: item[fieldNamesMerge.label],
value: item[fieldNamesMerge.value]
};
});
if (responseType === 'all') {
var _props$onChange4;
(_props$onChange4 = props.onChange) === null || _props$onChange4 === void 0 || _props$onChange4.call(props, labelInValueList, selectList);
} else {
var _props$onChange5;
(_props$onChange5 = props.onChange) === null || _props$onChange5 === void 0 || _props$onChange5.call(props, labelInValueList === null || labelInValueList === void 0 ? void 0 : labelInValueList[labelInValueList.length - 1], selectList);
}
}
});
var onClear = useMemoizedFn(function () {
var _props$onChange6;
void ((_props$onChange6 = props.onChange) === null || _props$onChange6 === void 0 ? void 0 : _props$onChange6.call(props, undefined));
});
return /*#__PURE__*/jsx(Cascader, _objectSpread2(_objectSpread2({
showSearch: true,
allowClear: true
}, otherProps), {}, {
popupClassName: classNames('cascader-wrapper-popup', otherProps.popupClassName),
notFoundContent: /*#__PURE__*/jsx(RequestStatus, {
status: status,
loading: loading,
messageConfig: requestMessageConfigRef.current,
errorButton: /*#__PURE__*/jsx(Button, {
type: "primary",
onClick: onAgainRequest,
ghost: true,
children: "\u91CD\u65B0\u83B7\u53D6\u6570\u636E"
})
}),
loading: loading,
loadData: isDynamicLoad ? loadData : undefined,
fieldNames: fieldNamesMerge,
suffixIcon: status === 'request-error' ? /*#__PURE__*/jsxs(Flex, {
style: {
display: 'inline-flex',
gap: 10
},
children: [/*#__PURE__*/jsx(_RedoOutlined, {
spin: loading,
onClick: onAgainRequest
}), /*#__PURE__*/jsx(_CloseCircleFilled, {
style: {
color: '#ff4d4f'
}
})]
}) : undefined,
options: dataList,
value: valueList,
multiple: false,
onChange: onChange,
onClear: onClear
}));
});
export { CascaderWrapper as C };
//# sourceMappingURL=cascader-wrapper-Dfvl5cRd.js.map