@flatbiz/antd
Version:
560 lines (549 loc) • 23.7 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import _RedoOutlined from '@ant-design/icons/es/icons/RedoOutlined.js';
import { isString } from '@dimjs/lang/is-string';
import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2, i as _defineProperty } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { useState, useMemo, useRef, isValidElement } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Select, Button } from 'antd';
import { c as classNames } from './index-C6y8q2MK.js';
import { isUndefinedOrNull, toArray, getUuid, valueIsEqual, arrayFind } from '@flatbiz/utils';
import { F as FlexLayout } from './flex-layout-BGtMe7zr.js';
import { R as RequestStatus } from './request-status-Cjtei7Bl.js';
import _SyncOutlined from '@ant-design/icons/es/icons/SyncOutlined.js';
import { fbaHooks } from './fba-hooks/index.js';
import { I as IconWrapper } from './icon-wrapper-DE97bI14.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { isDeepEqual } from '@dimjs/lang/is-deep-equal';
import { isArray } from '@dimjs/lang/is-array';
import { get } from '@dimjs/utils/get/get';
import { sort } from '@dimjs/utils/json/sort';
import pubSub from 'pubsub-js';
import { isObject } from '@dimjs/lang/is-object';
var _excluded$1 = ["onRefreshRequest", "loading"];
var RefreshIcon = function RefreshIcon(props) {
var onRefreshRequest = props.onRefreshRequest,
loading = props.loading,
otherProps = _objectWithoutProperties(props, _excluded$1);
var _useState = useState(loading),
_useState2 = _slicedToArray(_useState, 2),
innerLoading = _useState2[0],
setInnerLoading = _useState2[1];
var hoverTips = useMemo(function () {
if (props.requestStatus === 'no-dependencies-params') {
var _props$requestMessage;
return ((_props$requestMessage = props.requestMessageConfig) === null || _props$requestMessage === void 0 ? void 0 : _props$requestMessage['no-dependencies-params']) || '未获取到必要的查询条件';
}
return undefined;
}, [props.requestMessageConfig, props.requestStatus]);
var onRefresh = useMemoizedFn(function () {
if (props.requestStatus === 'no-dependencies-params') {
return;
}
setInnerLoading(true);
onRefreshRequest();
});
fbaHooks.useEffectCustom(function () {
if (innerLoading && !loading) {
setInnerLoading(false);
}
}, [loading]);
return /*#__PURE__*/jsx(IconWrapper, _objectSpread2(_objectSpread2({}, otherProps), {}, {
icon: /*#__PURE__*/jsx(_SyncOutlined, {
spin: innerLoading,
style: {
color: '#9b9797'
}
}),
onClick: onRefresh,
hoverTips: hoverTips
}));
};
var useRequest = function useRequest(options) {
var cacheKey = options.cacheKey,
serviceConfig = options.serviceConfig,
hasOuterSelectorList = options.hasOuterSelectorList,
outerSelectorList = options.outerSelectorList,
onRespDataChange = options.onRespDataChange,
onSelectorRequestError = options.onSelectorRequestError,
onChange = options.onChange,
useCache = options.useCache,
fieldNames = options.fieldNames;
var serviceRequestParams = serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.params;
var requiredParamsKeys = (serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.requiredParamsKeys) || [];
var hasServiceRequestParams = serviceRequestParams && Object.keys(serviceRequestParams).length > 0;
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
stateSelectorList = _useState2[0],
setStateSelectorList = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
requestStatus = _useState4[0],
setRequestStatus = _useState4[1];
var _useState5 = useState(Date.now()),
_useState6 = _slicedToArray(_useState5, 2),
refreshKey = _useState6[0],
setRefreshKey = _useState6[1];
var serviceRequestParamsStringify = useMemo(function () {
try {
if (hasServiceRequestParams) {
var sortDataStringify = JSON.stringify(sort(serviceRequestParams));
if (sortDataStringify === '{}') {
return undefined;
}
return sortDataStringify;
}
} catch (_error) {
//
}
return undefined;
}, [hasServiceRequestParams, serviceRequestParams]);
// 将 undefined => 'undefined'
var serviceRequestCahceKey = "".concat(serviceRequestParamsStringify);
var serviceRequestCahceStatusKey = "".concat(serviceRequestParamsStringify, "_status");
var pubSubKey = "".concat(cacheKey, "_").concat(serviceRequestCahceKey);
// 上一个参数值
var prevServiceRequestParamsStringify = fbaHooks.usePrevious(serviceRequestParamsStringify);
var prevParams = fbaHooks.usePrevious(serviceRequestParams);
var serviceRespDataAdapter = function serviceRespDataAdapter(respData) {
var result = respData;
if (serviceConfig !== null && serviceConfig !== void 0 && serviceConfig.onRequestResultAdapter) {
result = serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.onRequestResultAdapter(respData);
} else if (fieldNames !== null && fieldNames !== void 0 && fieldNames.list) {
result = get(respData, fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.list);
}
if (result && !isArray(result)) {
console.warn('待渲染数据为非数组结构', result);
return [];
}
return result || [];
};
var getWindowCacheData = function getWindowCacheData() {
var _window$__selector_wr;
return (_window$__selector_wr = window['__selector_wrapper_']) === null || _window$__selector_wr === void 0 ? void 0 : _window$__selector_wr[cacheKey];
};
var getWindowCacheValue = function getWindowCacheValue() {
var _getWindowCacheData;
return (_getWindowCacheData = getWindowCacheData()) === null || _getWindowCacheData === void 0 ? void 0 : _getWindowCacheData[serviceRequestCahceKey];
};
var getWindowCacheStatus = function getWindowCacheStatus() {
var _getWindowCacheData2;
return (_getWindowCacheData2 = getWindowCacheData()) === null || _getWindowCacheData2 === void 0 ? void 0 : _getWindowCacheData2[serviceRequestCahceStatusKey];
};
var setWindowCache = function setWindowCache(key, value) {
if (!window['__selector_wrapper_']) {
window['__selector_wrapper_'] = {};
}
if (!window['__selector_wrapper_'][cacheKey]) {
window['__selector_wrapper_'][cacheKey] = {};
}
window['__selector_wrapper_'][cacheKey][key] = value;
};
var onChangeRequestStatus = function onChangeRequestStatus(status) {
setWindowCache(serviceRequestCahceStatusKey, status);
setRequestStatus(status);
};
var onRequest = function onRequest() {
return new Promise(function ($return, $error) {
var _serviceConfig$onRequ, respData, respAdapterData;
var $Try_2_Catch = function (error) {
try {
console.error(error);
onChangeRequestStatus('request-error');
setStateSelectorList(undefined);
setTimeout(function () {
pubSub.publish(pubSubKey, {
status: 'request-error'
});
});
onSelectorRequestError === null || onSelectorRequestError === void 0 || onSelectorRequestError(error);
return $return(Promise.reject());
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
onChangeRequestStatus('request-progress');
return Promise.resolve(serviceConfig === null || serviceConfig === void 0 || (_serviceConfig$onRequ = serviceConfig.onRequest) === null || _serviceConfig$onRequ === void 0 ? void 0 : _serviceConfig$onRequ.call(serviceConfig, serviceRequestParams || {})).then(function ($await_7) {
try {
respData = $await_7;
respAdapterData = serviceRespDataAdapter(respData);
setWindowCache(serviceRequestCahceKey, respAdapterData);
onChangeRequestStatus('request-success');
setTimeout(function () {
pubSub.publish(pubSubKey, {
status: 'request-success',
respData: respAdapterData
});
});
return $return(respAdapterData);
} catch ($boundEx) {
return $Try_2_Catch($boundEx);
}
}, $Try_2_Catch);
} catch (error) {
$Try_2_Catch(error);
}
});
};
fbaHooks.useEffectCustomAsync(function () {
return new Promise(function ($return, $error) {
var isEmpty, _serviceConfig$onRequ2, respData, respAdapterData, status, dataList, _respAdapterData;
if (hasOuterSelectorList) {
setRequestStatus('request-success');
setStateSelectorList(outerSelectorList);
onRespDataChange === null || onRespDataChange === void 0 || onRespDataChange(outerSelectorList);
return $return();
}
if (requiredParamsKeys.length > 0) {
isEmpty = serviceRequestParams ? requiredParamsKeys.find(function (key) {
return isUndefinedOrNull(serviceRequestParams[key]);
}) : true;
if (isEmpty) {
// 当依赖项查询条件为空时，清空当前缓存数据
setStateSelectorList([]);
setRequestStatus('no-dependencies-params');
/**
* 怎么判断数据是从有到无的
* 每一次 params 变少，只要 上一次 params 值存在，就应该清空 value 值
*/
if (prevServiceRequestParamsStringify) {
onChange === null || onChange === void 0 || onChange(undefined);
}
return $return();
}
// 不使用缓存模式
if (useCache === false) {
// 判断参数是否发生变化
if (isDeepEqual(serviceRequestParams, prevParams)) {
return $return();
}
var $Try_3_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_3_Catch = function (error) {
try {
console.error(error);
setRequestStatus('request-error');
setStateSelectorList(undefined);
onSelectorRequestError === null || onSelectorRequestError === void 0 || onSelectorRequestError(error);
return $Try_3_Post();
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
setRequestStatus('request-progress');
return Promise.resolve(serviceConfig === null || serviceConfig === void 0 || (_serviceConfig$onRequ2 = serviceConfig.onRequest) === null || _serviceConfig$onRequ2 === void 0 ? void 0 : _serviceConfig$onRequ2.call(serviceConfig, serviceRequestParams || {})).then(function ($await_8) {
try {
respData = $await_8;
respAdapterData = serviceRespDataAdapter(respData);
setRequestStatus('request-success');
setStateSelectorList(respAdapterData);
onRespDataChange === null || onRespDataChange === void 0 || onRespDataChange(respAdapterData);
return $Try_3_Post();
} catch ($boundEx) {
return $Try_3_Catch($boundEx);
}
}, $Try_3_Catch);
} catch (error) {
$Try_3_Catch(error);
}
}
return $If_5.call(this);
}
/**
* 此处无法判断 调用props.onChange?.(undefined);
* A、B、C
* 例如：C依赖A、B，当外部只修改了一个元素，理论上应该应该清空C value 值（调用onChange(undefined)），如果此时外部直接回填A、B、C时，C无法回填成功；该场景只能在A、B的onChange事件中，清空C
*/
// if (prevServiceRequestParamsStringify) {
// props.onChange?.(undefined);
// }
function $If_5() {
status = getWindowCacheStatus();
if (status === 'request-success') {
dataList = getWindowCacheValue();
setStateSelectorList(dataList);
setRequestStatus(status);
onRespDataChange === null || onRespDataChange === void 0 || onRespDataChange(dataList);
return $return();
}
if (status === 'request-progress') {
setRequestStatus(status);
pubSub.subscribe(pubSubKey, function (_msg, _ref) {
var status = _ref.status,
respData = _ref.respData;
if (status === 'request-success') {
setRequestStatus(status);
setStateSelectorList(respData);
onRespDataChange === null || onRespDataChange === void 0 || onRespDataChange(respData);
} else {
setRequestStatus('request-error');
setStateSelectorList(undefined);
}
});
return $return();
}
var $Try_4_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_4_Catch = function (error) {
try {
console.error(error);
setRequestStatus('request-error');
setStateSelectorList(undefined);
onSelectorRequestError === null || onSelectorRequestError === void 0 || onSelectorRequestError(error);
return $Try_4_Post();
} catch ($boundEx) {
return $error($boundEx);
}
};
try {
return Promise.resolve(onRequest()).then(function ($await_9) {
try {
_respAdapterData = $await_9;
setStateSelectorList(_respAdapterData);
setRequestStatus('request-success');
onRespDataChange === null || onRespDataChange === void 0 || onRespDataChange(_respAdapterData);
return $Try_4_Post();
} catch ($boundEx) {
return $Try_4_Catch($boundEx);
}
}, $Try_4_Catch);
} catch (error) {
$Try_4_Catch(error);
}
}
return $If_5.call(this);
});
}, [JSON.stringify(serviceRequestParams), outerSelectorList, refreshKey]);
var onRefreshRequest = function onRefreshRequest() {
if (requestStatus === 'request-success') {
onChangeRequestStatus('request-init');
}
setRefreshKey(Date.now());
};
return {
requestStatus: requestStatus,
stateSelectorList: stateSelectorList,
serviceRequestParamsStringify: serviceRequestParamsStringify,
onRefreshRequest: onRefreshRequest
};
};
/**
* value存在两种格式
* 1. string | number;
* 2. labelInValue 格式
* @param data
* @param labelInValueFieldNames
* @returns
*/
var getVauleList = function getVauleList(data, valueKey) {
var valueList = toArray(data);
valueList = valueList.map(function (item) {
if (isObject(item)) return item[valueKey];
return item;
});
return valueList;
};
var _excluded = ["serviceConfig", "showAllOption", "onSelectorListChange", "onSelectorListAllChange", "onSelectorRequestError", "onLabelRenderAdapter", "requestMessageConfig", "selectorList", "modelKey", "fieldNames", "value", "labelInValue", "useCache", "style", "className", "showRefreshIcon"];
/**
* 选择器包装组件
* ```
* 1. 不支持搜索调用服务模式，可使用组件 SelectorWrapperSearch
* 2. 修改文案【未获取到必要的查询条件】，通过参数 requestMessageConfig={{'no-dependencies-params': '自定义文案'}} 配置
* ```
*/
var SelectorWrapper = function SelectorWrapper(props) {
var serviceConfig = props.serviceConfig,
showAllOption = props.showAllOption,
onSelectorListChange = props.onSelectorListChange,
onSelectorListAllChange = props.onSelectorListAllChange,
onSelectorRequestError = props.onSelectorRequestError,
onLabelRenderAdapter = props.onLabelRenderAdapter,
requestMessageConfig = props.requestMessageConfig,
outerSelectorList = props.selectorList,
modelKey = props.modelKey,
fieldNames = props.fieldNames,
value = props.value,
labelInValue = props.labelInValue,
useCache = props.useCache,
style = props.style,
className = props.className,
showRefreshIcon = props.showRefreshIcon,
otherProps = _objectWithoutProperties(props, _excluded);
var firstRenderSelectList = useRef(true);
var modelKeyInner = useMemo(function () {
return modelKey || getUuid();
}, [modelKey]);
// props 是否存在 selectorList，selectorList = undefined 也算存在
var hasOuterSelectorList = Object.prototype.hasOwnProperty.call(props, 'selectorList');
var mergeFieldNames = _objectSpread2({
label: 'label',
value: 'value',
disabled: 'disabled'
}, fieldNames);
var optionsItemLabelField = mergeFieldNames.label,
optionsItemValueField = mergeFieldNames.value,
optionsItemDisabledField = mergeFieldNames.disabled;
var allOptionConfig = useMemo(function () {
if (!showAllOption) return null;
var isTrue = showAllOption === true;
return _defineProperty(_defineProperty({}, optionsItemLabelField, isTrue ? '全部' : showAllOption.label), optionsItemValueField, isTrue ? '' : showAllOption.value);
}, [optionsItemLabelField, optionsItemValueField, showAllOption]);
var isMultiple = valueIsEqual(props.mode, ['multiple']);
var _useRequest = useRequest({
fieldNames: mergeFieldNames,
cacheKey: modelKeyInner,
hasOuterSelectorList: hasOuterSelectorList,
onChange: props.onChange,
serviceConfig: serviceConfig,
outerSelectorList: outerSelectorList,
onRespDataChange: function onRespDataChange(dataList) {
if (firstRenderSelectList.current) {
onSelectorListChange === null || onSelectorListChange === void 0 || onSelectorListChange(dataList || []);
firstRenderSelectList.current = false;
}
onSelectorListAllChange === null || onSelectorListAllChange === void 0 || onSelectorListAllChange(dataList || []);
},
onSelectorRequestError: onSelectorRequestError,
useCache: useCache === undefined ? true : useCache
}),
requestStatus = _useRequest.requestStatus,
stateSelectorList = _useRequest.stateSelectorList,
onRefreshRequest = _useRequest.onRefreshRequest;
var onRespChange = useMemoizedFn(function (selectedList) {
if (labelInValue) {
if (isMultiple) {
var _props$onChange;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, selectedList, selectedList);
} else {
var _props$onChange2;
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, selectedList[0], selectedList);
}
} else {
var valueList = selectedList.map(function (item) {
return item[optionsItemValueField];
});
if (isMultiple) {
var _props$onChange3;
(_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 || _props$onChange3.call(props, valueList, selectedList);
} else {
var _props$onChange4;
(_props$onChange4 = props.onChange) === null || _props$onChange4 === void 0 || _props$onChange4.call(props, valueList[0], selectedList[0]);
}
}
});
var onInnerChange = useMemoizedFn(function (_value, otherParams) {
var _props$onChange5;
if (!otherParams) return (_props$onChange5 = props.onChange) === null || _props$onChange5 === void 0 ? void 0 : _props$onChange5.call(props, undefined);
var selectedList = toArray(otherParams);
var targetList = [];
selectedList.forEach(function (item) {
if (showAllOption && allOptionConfig && item.value === allOptionConfig[optionsItemValueField]) {
targetList.push(allOptionConfig);
} else {
var filterTarget = arrayFind(stateSelectorList || [], item.value, optionsItemValueField);
if (filterTarget) {
targetList.push(filterTarget);
}
}
});
onRespChange(targetList);
});
var selectorAllList = useMemo(function () {
if (requestStatus !== 'request-success') return [];
if (!stateSelectorList || stateSelectorList.length === 0) return [];
if (!allOptionConfig) return stateSelectorList;
return [allOptionConfig].concat(stateSelectorList);
}, [allOptionConfig, requestStatus, stateSelectorList]);
var loading = requestStatus === 'request-progress';
var selectValue = useMemo(function () {
var targetList = getVauleList(value, optionsItemValueField);
return isMultiple ? targetList : targetList[0];
}, [isMultiple, optionsItemValueField, value]);
var filterOption = useMemoizedFn(function (input, option) {
var children = toArray(option.children);
var mergeString = '';
var hasValidElementItem = children.find(function (item) {
return /*#__PURE__*/isValidElement(item);
});
if (!hasValidElementItem) {
children.forEach(function (item) {
if (isString(item)) mergeString += item;
});
} else {
mergeString = isString(option === null || option === void 0 ? void 0 : option.label) ? option.label : undefined;
}
return mergeString.toLowerCase().indexOf(input.toLowerCase()) >= 0;
});
return /*#__PURE__*/jsxs(FlexLayout, {
fullIndex: 0,
style: _objectSpread2({
width: '100%',
alignItems: 'center'
}, style),
direction: "horizontal",
gap: 10,
className: classNames('v-selector-wrapper', className),
children: [/*#__PURE__*/jsx(Select, _objectSpread2(_objectSpread2({
showSearch: true,
allowClear: true,
popupMatchSelectWidth: false,
filterOption: filterOption
}, otherProps), {}, {
style: {
width: '100%'
},
value: selectValue,
loading: loading,
onChange: onInnerChange,
fieldNames: undefined,
suffixIcon: requestStatus === 'request-error' ? /*#__PURE__*/jsx(_RedoOutlined, {
spin: loading,
onClick: onRefreshRequest
}) : otherProps.suffixIcon,
notFoundContent: /*#__PURE__*/jsx(RequestStatus, {
status: requestStatus,
loading: loading,
messageConfig: _objectSpread2({
'request-init': '暂无数据'
}, requestMessageConfig),
errorButton: /*#__PURE__*/jsx(Button, {
type: "primary",
onClick: onRefreshRequest,
children: "\u91CD\u65B0\u83B7\u53D6\u6570\u636E"
})
}),
children: selectorAllList.map(function (item, index) {
var _props$icon;
var value = item[optionsItemValueField];
var label = item[optionsItemLabelField];
return /*#__PURE__*/jsxs(Select.Option, {
value: value,
label: label,
disabled: item[optionsItemDisabledField],
children: [props.showIcon ? /*#__PURE__*/jsx("span", {
className: "v-selector-item-icon",
children: (_props$icon = props.icon) === null || _props$icon === void 0 ? void 0 : _props$icon.call(props, item, index)
}) : null, onLabelRenderAdapter ? onLabelRenderAdapter(item) : label]
}, "".concat(value, "-").concat(index));
})
})), showRefreshIcon ? /*#__PURE__*/jsx(RefreshIcon, {
onRefreshRequest: onRefreshRequest,
loading: loading,
requestStatus: requestStatus,
requestMessageConfig: requestMessageConfig
}) : null]
});
};
export { SelectorWrapper as S };
//# sourceMappingURL=selector-wrapper-BQPBflNE.js.map