@schema-render/search-table-react
Version:
Conditional search table component.
107 lines (106 loc) • 4.71 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SettingOutlined, SyncOutlined } from "@ant-design/icons";
import { useMemoizedFn, utils } from "@schema-render/core-react";
import { cij } from "@schema-render/form-render-react";
import { Button, Space, Tabs, Tooltip } from "antd";
import { isValidElement } from "react";
const { classNames } = utils;
// 隐藏 Tabs 下划线
const tabsHideLine = cij`
> div::before {
content: none !important;
}
`;
export default function useTitle({ locale, title = {}, loading, globalStateRef, runRequest, openSettingModal }) {
var _title_leftExtraContent, _title_rightExtraContent, _title_tabs, _title_tabs1, _title_tabs2;
// Tab Change 事件处理
const handleTabChange = useMemoizedFn((activeKey)=>{
var // 触发 onChange 事件
_title_tabs_onChange, _title_tabs;
// 数据请求中，不允许连续切换 Tab
if (loading) {
return;
}
// 设置 tab 正在切换
globalStateRef.current.isTabChanging = true;
(_title_tabs = title.tabs) === null || _title_tabs === void 0 ? void 0 : (_title_tabs_onChange = _title_tabs.onChange) === null || _title_tabs_onChange === void 0 ? void 0 : _title_tabs_onChange.call(_title_tabs, activeKey);
// 等事件 setState 值更新完毕后再发起请求
setTimeout(/**
* 1、Tab 切换分页重置到第一页
* 2、请求完毕更新 isTabChanging 值
*/ ()=>runRequest({
current: 1
}).finally(()=>globalStateRef.current.isTabChanging = false), 0);
});
// 公共插槽参数
const comRenderParams = {
loading
};
// 额外的左右侧内容
const leftExtraContent = (_title_leftExtraContent = title.leftExtraContent) === null || _title_leftExtraContent === void 0 ? void 0 : _title_leftExtraContent.call(title, comRenderParams);
const rightExtraContent = (_title_rightExtraContent = title.rightExtraContent) === null || _title_rightExtraContent === void 0 ? void 0 : _title_rightExtraContent.call(title, comRenderParams);
let tabBarLeftExtraContent = null;
let tabBarRightExtraContent = null;
// 列设置按钮
const settingBtn = title.showSetting ? /*#__PURE__*/ _jsx(Tooltip, {
title: locale.SearchTable.settingTips,
children: /*#__PURE__*/ _jsx(Button, {
icon: /*#__PURE__*/ _jsx(SettingOutlined, {}),
disabled: loading,
onClick: openSettingModal
})
}) : null;
// 刷新按钮
const refreshBtn = title.showRefresh ? /*#__PURE__*/ _jsx(Tooltip, {
title: locale.SearchTable.refreshTips,
children: /*#__PURE__*/ _jsx(Button, {
icon: /*#__PURE__*/ _jsx(SyncOutlined, {}),
disabled: loading,
onClick: ()=>runRequest()
})
}) : null;
// Antd tabBarExtraContent 标准化处理
if ((_title_tabs = title.tabs) === null || _title_tabs === void 0 ? void 0 : _title_tabs.tabBarExtraContent) {
if (/*#__PURE__*/ isValidElement(title.tabs.tabBarExtraContent)) {
tabBarRightExtraContent = title.tabs.tabBarExtraContent;
} else {
const extraContent = title.tabs.tabBarExtraContent;
tabBarLeftExtraContent = extraContent.left;
tabBarRightExtraContent = extraContent.right;
}
}
const tabBarExtraContent = {
left: tabBarLeftExtraContent || leftExtraContent ? /*#__PURE__*/ _jsxs(Space, {
size: 10,
style: {
marginRight: 16
},
children: [
tabBarLeftExtraContent,
leftExtraContent
]
}) : null,
right: tabBarRightExtraContent || rightExtraContent || refreshBtn || settingBtn ? /*#__PURE__*/ _jsxs(Space, {
size: 10,
children: [
tabBarRightExtraContent,
rightExtraContent,
refreshBtn,
settingBtn
]
}) : null
};
// 标题节点内容
const titleNodeHolder = tabBarExtraContent.left || tabBarExtraContent.right || title.tabs ? /*#__PURE__*/ _jsx(Tabs, {
...title.tabs,
className: classNames(title.className, (_title_tabs1 = title.tabs) === null || _title_tabs1 === void 0 ? void 0 : _title_tabs1.className, {
[tabsHideLine]: !title.tabs
}),
style: title.style || ((_title_tabs2 = title.tabs) === null || _title_tabs2 === void 0 ? void 0 : _title_tabs2.style),
tabBarExtraContent: tabBarExtraContent,
onChange: handleTabChange
}) : null;
return {
titleNodeHolder
};
}