125 lines
3.5 KiB
TypeScript
125 lines
3.5 KiB
TypeScript
import IconFont from '@/components/icon-font';
|
|
import { PageActionType } from '@/config/types';
|
|
import CollapsePanel from '@/pages/_components/collapse-panel';
|
|
import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
|
|
import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form } from 'antd';
|
|
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
import { FormData, AccessItem as ListItem } from '../config/types';
|
|
import Basic from './basic';
|
|
import Endpoints from './endpoints';
|
|
import MetaData from './meta-data';
|
|
|
|
interface ProviderFormProps {
|
|
ref?: any;
|
|
action: PageActionType;
|
|
currentData?: ListItem; // Used when action is EDIT
|
|
onFinish: (values: FormData) => Promise<void>;
|
|
}
|
|
|
|
const TABKeysMap = {
|
|
BASIC: 'basic',
|
|
METADATA: 'metadata',
|
|
ENDPOINTS: 'endpoints',
|
|
ADVANCED: 'advanced'
|
|
};
|
|
|
|
const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
|
const { action, currentData, onFinish } = props;
|
|
const intl = useIntl();
|
|
const { getScrollElementScrollableHeight } = useWrapperContext();
|
|
const [activeKey, setActiveKey] = useState<string[]>([TABKeysMap.BASIC]);
|
|
const [form] = Form.useForm();
|
|
const scrollTabsRef = useRef<any>(null);
|
|
|
|
const segmentOptions = [
|
|
{
|
|
value: TABKeysMap.BASIC,
|
|
label: intl.formatMessage({ id: 'common.title.basicInfo' }),
|
|
icon: <IconFont type="icon-basic" />,
|
|
field: 'name'
|
|
},
|
|
{
|
|
value: TABKeysMap.METADATA,
|
|
label: intl.formatMessage({ id: 'accesses.form.metadata.title' }),
|
|
icon: <IconFont type="icon-database" />,
|
|
field: 'metaSize'
|
|
},
|
|
{
|
|
value: TABKeysMap.ENDPOINTS,
|
|
label: intl.formatMessage({ id: 'accesses.form.endpoint.title' }),
|
|
icon: <IconFont type="icon-language" />,
|
|
field: 'endpoints'
|
|
}
|
|
];
|
|
|
|
const handleActiveChange = (key: string[]) => {
|
|
setActiveKey(key);
|
|
};
|
|
|
|
const handleOnCollapseChange = (keys: string | string[]) => {
|
|
setActiveKey(Array.isArray(keys) ? keys : [keys]);
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
submit: () => {
|
|
form.submit();
|
|
},
|
|
resetFields: () => {
|
|
form.resetFields();
|
|
}
|
|
}));
|
|
|
|
return (
|
|
<ScrollSpyTabs
|
|
ref={scrollTabsRef}
|
|
defaultTarget="basic"
|
|
segmentOptions={segmentOptions}
|
|
activeKey={activeKey}
|
|
setActiveKey={handleActiveChange}
|
|
segmentedTop={{
|
|
top: 0,
|
|
offsetTop: 96
|
|
}}
|
|
getScrollElementScrollableHeight={getScrollElementScrollableHeight}
|
|
>
|
|
<Form
|
|
form={form}
|
|
onFinish={onFinish}
|
|
initialValues={{
|
|
categories: [],
|
|
meta: {
|
|
size: null,
|
|
activated_size: null,
|
|
dimensions: null
|
|
}
|
|
}}
|
|
>
|
|
<Basic />
|
|
<CollapsePanel
|
|
activeKey={activeKey}
|
|
accordion={false}
|
|
onChange={handleOnCollapseChange}
|
|
items={[
|
|
{
|
|
key: TABKeysMap.METADATA,
|
|
label: intl.formatMessage({ id: 'accesses.form.metadata.title' }),
|
|
forceRender: true,
|
|
children: <MetaData></MetaData>
|
|
},
|
|
{
|
|
key: TABKeysMap.ENDPOINTS,
|
|
label: intl.formatMessage({ id: 'accesses.form.endpoint.title' }),
|
|
forceRender: true,
|
|
children: <Endpoints></Endpoints>
|
|
}
|
|
]}
|
|
></CollapsePanel>
|
|
</Form>
|
|
</ScrollSpyTabs>
|
|
);
|
|
});
|
|
|
|
export default AccessForm;
|