Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 66x 66x 7x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 3x 3x 3x 6x | import React, { ReactElement, useMemo } from "react";
import { FormInstance, Tabs } from 'antd';
import { useTranslation } from 'react-i18next';
import { SaveOptionProps, SaveRecordProps, Store, TableMetaProps } from "@props/RecordProps";
import { getDetailRenderFunction } from '@kernel/DetailComponentsMapping';
import { getColumnTransKey, shouldUseFrontendTrans } from '@utils/ColumnsUtils';
import { buildPath, EVENT_BUS } from "@utils/eventBus/EventBus";
const { TabPane } = Tabs;
export type DetailTabsProps = {
currentDetailTab?: string;
columns: Array<TableMetaProps>;
switchTabCallback: (key: string) => void;
record: SaveRecordProps | undefined;
domainName: string;
readonly?: boolean;
setExpandColCallback: (expandCol: string) => void;
expandCol: string;
zIndex: number;
tabBarExtraContent?: ReactElement;
form: FormInstance;
isCreate: boolean;
onValuesChange?: (changedValues: Store, allValues: Store) => void;
saveOptions?: SaveOptionProps;
parentPath?: string;
};
const DetailTabs = (props: DetailTabsProps): ReactElement => {
const {
domainName, record, currentDetailTab, columns,
switchTabCallback, readonly, expandCol, parentPath,
setExpandColCallback, zIndex, tabBarExtraContent,
form, isCreate, onValuesChange, saveOptions,
} = props;
const { t } = useTranslation();
const detailObjectsTab = useMemo(() => columns
.filter(c => isCreate ? (c.type !== 'array') : true)
.map((col, idx) => {
const { key } = col;
const Controller = getDetailRenderFunction(col);
const isCurrentDisplayTab = (currentDetailTab === key) || (currentDetailTab == null && idx === 0);
//const windowOperIcon = expandCol === "master" ? <CustomIcon type='icon-fullscreen1' /> : <CustomIcon type='icon-minimize1' />;
const windowOperIcon = (<></>);
const title = shouldUseFrontendTrans(col) ? t(getColumnTransKey(domainName, key)) : col.title;
const colPath = parentPath ? buildPath(parentPath, key) : undefined;
return <TabPane
className="relate-object-tab"
key={key}
tab={
<a
href="/#"
onClick={(event) => {
event.preventDefault();
switchTabCallback(key);
if (currentDetailTab !== key) {
setExpandColCallback('master');
} else Eif (currentDetailTab === key) {
setExpandColCallback(expandCol === 'master' ? 'master' : 'master');
}
}}
title={t('ClickToChangePanelStatus', { operation: expandCol === "master" ? "expand" : "collapse" })}
>
{<span style={isCurrentDisplayTab ? { paddingLeft: "0.8rem" } : {}}>{title}</span>}
{(isCurrentDisplayTab) && <span style={{ marginLeft: "10px" }}>{windowOperIcon}</span>}
</a>
}>
{Controller && <Controller
isCurrentActiveTab={isCurrentDisplayTab}
record={record}
column={col}
ownerClass={domainName}
readonly={readonly}
zIndex={zIndex}
form={form}
domainName={domainName}
onValuesChange={(changedValues, allValues) => {
onValuesChange?.(changedValues, allValues);
if (colPath) {
EVENT_BUS.emit(colPath, allValues[key]);
}
}}
path={colPath}
saveOptions={saveOptions}
fieldValue={form?.getFieldValue(key)}
/>
}
</TabPane>;
}), [
columns, currentDetailTab, domainName, expandCol, form, isCreate, record, parentPath,
readonly, setExpandColCallback, switchTabCallback, t, zIndex, onValuesChange, saveOptions,
]);
return (
<div className="card-container">
<Tabs
type="card"
activeKey={currentDetailTab}
tabBarExtraContent={tabBarExtraContent}
>
{detailObjectsTab}
</Tabs>
</div>
);
};
export default DetailTabs;
|