@flatbiz/antd
Version:
315 lines (307 loc) • 11.3 kB
JavaScript
/* eslint-disable */
import './../fba-hooks/index.css';
import './index.css';
/*! @flatjs/forge MIT @flatbiz/antd */
import { f as fbaUtils } from '../fba-utils-CusZeveq.js';
import { a as _slicedToArray, b as _objectSpread2 } from '../_rollupPluginBabelHelpers-BspM60Sw.js';
import { fbaHooks } from '../fba-hooks/index.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { isDeepEqual } from '@dimjs/lang/is-deep-equal';
import { forwardRef, useState, useRef, useMemo, useImperativeHandle, Fragment } from 'react';
import { useMemoizedFn } from 'ahooks';
import { Result, Button, Spin } from 'antd';
import { getValueOrDefault, toArray, isUndefinedOrNull } from '@flatbiz/utils';
import { jsx, jsxs } from 'react/jsx-runtime';
import '@dimjs/lang/is-array';
import '../use-responsive-point-Bp3D3lZT.js';
var _fbaHooks$createCtx = fbaHooks.createCtx(),
_fbaHooks$createCtx2 = _slicedToArray(_fbaHooks$createCtx, 2),
useLocalLoadingCtx = _fbaHooks$createCtx2[0],
LocalLoadingCtxProvider = _fbaHooks$createCtx2[1];
/**
* 局部加载，包含接口数据处理逻辑
* ```
* 包括
* 1. loading显示效果、error显示效果、获取服务数据
* 2. 当 serviceConfig.params 值与上一次值不相等时，会主动发起服务调用
* 3. 通过 serviceConfig.requiredParamsKeys 设置服务调用必填字段
* 4. 通过 ref.onRequest 可主动发起服务调用
* 5. 子组件通过下面方式主动发起服务调用
* const localLoadingApi = LocalLoading.useLocalLoading();
* localLoadingApi.onRequest();
* 6. 如果内部需要滚动条，可设置 contentScroll = true （外部有高度或者设置style.height 才能生效）
* ```
*/
var LocalLoadingInner = /*#__PURE__*/forwardRef(function (props, ref) {
var serviceConfig = props.serviceConfig,
isAsync = props.isAsync,
children = props.children,
errorRender = props.errorRender,
loadingSpinProps = props.loadingSpinProps,
textConfigs = props.textConfigs,
showRequiredError = props.showRequiredError,
contentScroll = props.contentScroll,
contentStyle = props.contentStyle,
height = props.height;
var _useState = useState('init'),
_useState2 = _slicedToArray(_useState, 2),
status = _useState2[0],
setStatus = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
respData = _useState4[0],
setRespData = _useState4[1];
var loadingHeight = props.loadingHeight === undefined ? 100 : props.loadingHeight;
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
loading = _useState6[0],
setLoading = _useState6[1];
var errorRef = useRef();
var prevParams = fbaHooks.usePrevious(serviceConfig.params);
var loadingSpinContent = getValueOrDefault(loadingSpinProps === null || loadingSpinProps === void 0 ? void 0 : loadingSpinProps.content, /*#__PURE__*/jsx("span", {}));
var loadingSpinBgColor = getValueOrDefault(loadingSpinProps === null || loadingSpinProps === void 0 ? void 0 : loadingSpinProps.bgColor, 'rgba(0,0,0,0.01)');
var loadingSpinTip = getValueOrDefault(loadingSpinProps === null || loadingSpinProps === void 0 ? void 0 : loadingSpinProps.tip, 'Loading');
var requiredErrorText = textConfigs === null || textConfigs === void 0 ? void 0 : textConfigs.requiredErrorText;
// 用于直接发起接口调用，不能用于比较
var serviceParams = useMemo(function () {
var _serviceConfig$invali;
if (!serviceConfig.params || toArray(serviceConfig.invalidParamKey).length === 0) {
return serviceConfig.params;
}
var newParams = _objectSpread2({}, serviceConfig.params);
(_serviceConfig$invali = serviceConfig.invalidParamKey) === null || _serviceConfig$invali === void 0 || _serviceConfig$invali.forEach(function (key) {
newParams[key] = undefined;
});
return newParams;
}, [serviceConfig]);
// 判断必要参数是否完整
var validateRequiredParamsComplete = useMemoizedFn(function (params) {
var keys = serviceConfig === null || serviceConfig === void 0 ? void 0 : serviceConfig.requiredParamsKeys;
if (keys !== null && keys !== void 0 && keys.length) {
var target = keys.find(function (item) {
return isUndefinedOrNull(params === null || params === void 0 ? void 0 : params[item]);
});
if (target) {
return {
complete: false,
message: requiredErrorText || "LocalLoading\u6E32\u67D3\u7F3A\u5C11\u5FC5\u586B\u53C2\u6570\uFF1A".concat(keys.join('、'))
};
}
}
return {
complete: true
};
});
var completeResult = useMemo(function () {
return validateRequiredParamsComplete(serviceConfig.params);
}, [validateRequiredParamsComplete, serviceConfig.params]);
var onInitRequest = function onInitRequest(params) {
return new Promise(function ($return, $error) {
var $Try_1_Finally = function ($Try_1_Exit) {
return function ($Try_1_Value) {
try {
setLoading(false);
return $Try_1_Exit && $Try_1_Exit.call(this, $Try_1_Value);
} catch ($boundEx) {
return $error($boundEx);
}
}.bind(this);
}.bind(this);
var mergeProps, _respData;
var $Try_1_Post = function () {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
};
var $Try_1_Catch = function (error) {
try {
console.error(error);
setStatus('error');
errorRef.current = error.message;
return $Try_1_Finally($Try_1_Post)();
} catch ($boundEx) {
return $Try_1_Finally($error)($boundEx);
}
};
try {
mergeProps = _objectSpread2(_objectSpread2({}, serviceParams), params);
setLoading(true);
return Promise.resolve(serviceConfig.onRequest(mergeProps)).then(function ($await_3) {
try {
_respData = $await_3;
setStatus('success');
setRespData(_respData);
return $Try_1_Finally($Try_1_Post)();
} catch ($boundEx) {
return $Try_1_Catch($boundEx);
}
}, $Try_1_Catch);
} catch (error) {
$Try_1_Catch(error);
}
});
};
fbaHooks.useEffectCustomAsync(function () {
return new Promise(function ($return, $error) {
if (completeResult.complete) {
return Promise.resolve(onInitRequest()).then(function ($await_4) {
try {
return $If_2.call(this);
} catch ($boundEx) {
return $error($boundEx);
}
}.bind(this), $error);
}
function $If_2() {
return $return();
}
return $If_2.call(this);
});
}, []);
fbaHooks.useEffectCustom(function () {
if (completeResult.complete) {
if (prevParams) {
if (!isDeepEqual(serviceConfig.params, prevParams)) {
if (status === 'error') {
setStatus('init');
}
void onInitRequest();
}
}
}
}, [prevParams, serviceConfig.params]);
useImperativeHandle(ref, function () {
return {
onRefresh: onInitRequest
};
});
if (!completeResult.complete) {
if (!showRequiredError) {
return /*#__PURE__*/jsx(Fragment, {});
}
return /*#__PURE__*/jsx(LocalLoadingCtxProvider, {
value: {
onRequest: onInitRequest
},
children: /*#__PURE__*/jsxs("div", {
className: classNames('local-loading-error', props.className),
children: [/*#__PURE__*/jsx("div", {
className: "local-loading-area"
}), /*#__PURE__*/jsx(Result, {
status: "error",
subTitle: completeResult.message
})]
})
});
}
if (status === 'error') {
if (errorRender) {
return errorRender({
message: errorRef.current
});
}
return /*#__PURE__*/jsx(LocalLoadingCtxProvider, {
value: {
onRequest: onInitRequest
},
children: /*#__PURE__*/jsxs("div", {
className: classNames('local-loading-error', props.className),
children: [/*#__PURE__*/jsx("div", {
className: "local-loading-area"
}), /*#__PURE__*/jsx(Result, {
status: "error",
subTitle: errorRef.current || '数据处理异常',
extra: [/*#__PURE__*/jsx(Button, {
type: "primary",
ghost: true,
size: "small",
onClick: function onClick() {
setStatus('init');
void onInitRequest();
},
children: "\u91CD\u65B0\u83B7\u53D6"
}, "console")]
})]
})
});
}
if (status !== 'success' && !isAsync) {
return /*#__PURE__*/jsx("div", {
className: classNames('fba-local-loading-process', props.className),
style: {
height: loadingHeight,
display: 'flex',
justifyContent: 'center',
position: 'relative',
backgroundColor: 'var(--block-bg-color)'
},
children: /*#__PURE__*/jsx(Spin, {
spinning: loading,
tip: loadingSpinTip,
wrapperClassName: "local-loading-spin-wrapper",
className: "local-loading-spin",
style: {
'--local-loading-spin-bgColor': loadingSpinBgColor
},
children: loadingSpinContent
})
});
}
var className = classNames('fba-local-loading', {
'fll-content-scroll': contentScroll
}, props.className);
var rootStyle = _objectSpread2({
height: height
}, props.style);
return /*#__PURE__*/jsx(LocalLoadingCtxProvider, {
value: {
onRequest: onInitRequest
},
children: /*#__PURE__*/jsxs("div", {
className: className,
style: rootStyle,
children: [loading ? /*#__PURE__*/jsx(Spin, {
spinning: loading,
tip: loadingSpinTip,
wrapperClassName: "local-loading-spin-wrapper",
className: "local-loading-spin",
style: {
'--local-loading-spin-bgColor': loadingSpinBgColor
},
children: loadingSpinContent
}) : null, /*#__PURE__*/jsx("div", {
className: "local-loading-content",
style: contentStyle,
children: children(respData)
})]
})
});
});
/**
* 局部加载，包含接口数据处理逻辑
* ```
* 包括
* 1. loading显示效果、error显示效果、获取服务数据
* 2. 当 serviceConfig.params 值与上一次值不相等时，会主动发起服务调用
* 3. 通过 serviceConfig.requiredParamsKeys 设置服务调用必填字段
* 4. 通过 ref.onRequest 可主动发起服务调用
* 5. 子组件通过下面方式主动发起服务调用
* const localLoadingApi = LocalLoading.useLocalLoading();
* localLoadingApi.onRequest();
* 6. 如果内部需要滚动条，可设置 contentScroll = true （外部有高度或者设置style.height 才能生效）
* ```
*/
var LocalLoading = fbaUtils.attachPropertiesToComponent(LocalLoadingInner, {
useLocalLoading: function useLocalLoading() {
var ctx = useLocalLoadingCtx();
return {
onRequest: function onRequest(params) {
ctx.onRequest(params);
}
};
}
});
export { LocalLoading };
//# sourceMappingURL=index.js.map