75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import ListMap from '@/components/dynamic-form/components/list-map';
|
|
import { statusType } from '@/components/dynamic-form/config/types';
|
|
import useValidateFields from '@/components/dynamic-form/hooks/use-validate-fields';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form } from 'antd';
|
|
import React, { forwardRef, useState } from 'react';
|
|
import { fieldConfig } from '../config/cloud-options-config';
|
|
|
|
const volumeOptions = fieldConfig.volumes;
|
|
|
|
const CloudOptions: React.FC<{
|
|
ref?: any;
|
|
disabled?: boolean;
|
|
}> = forwardRef((props, ref) => {
|
|
const { disabled } = props;
|
|
const intl = useIntl();
|
|
const form = Form.useFormInstance();
|
|
const volumes = Form.useWatch(['cloud_options', volumeOptions.name], form);
|
|
const [validateStatusList, setValidateStatusList] = useState<
|
|
{ [key: string]: statusType }[]
|
|
>([]);
|
|
|
|
const updateValidateStatusList = (list: { [key: string]: statusType }[]) => {
|
|
setValidateStatusList(list);
|
|
};
|
|
|
|
const { listMapValidator, toggleValidation } = useValidateFields({
|
|
requiredFields: volumeOptions.required,
|
|
setValidateStatusList: updateValidateStatusList
|
|
});
|
|
|
|
const handleOnChange = (value: any) => {
|
|
toggleValidation(true);
|
|
form.setFieldValue(['cloud_options', volumeOptions.name], value);
|
|
};
|
|
|
|
const handleOnAdd = (data: any[]) => {
|
|
toggleValidation(false);
|
|
form.setFieldValue(['cloud_options', volumeOptions.name], data);
|
|
toggleValidation(true);
|
|
};
|
|
|
|
const handleOnDelete = (deletedItem: any, data: any[]) => {
|
|
toggleValidation(false);
|
|
form.setFieldValue(['cloud_options', volumeOptions.name], data);
|
|
toggleValidation(true);
|
|
};
|
|
console.log('disabled=====', disabled);
|
|
return (
|
|
<Form.Item
|
|
name={['cloud_options', volumeOptions.name as string]}
|
|
rules={[
|
|
{
|
|
validator: listMapValidator
|
|
}
|
|
]}
|
|
>
|
|
<ListMap
|
|
validateStatusList={validateStatusList}
|
|
btnText={intl.formatMessage({ id: 'clusters.workerpool.volumes.add' })}
|
|
label={intl.formatMessage({ id: 'clusters.workerpool.volumes' })}
|
|
dataList={volumes || []}
|
|
properties={volumeOptions.properties || {}}
|
|
requiredFields={volumeOptions.required || []}
|
|
disabled={disabled}
|
|
onAdd={handleOnAdd}
|
|
onDelete={handleOnDelete}
|
|
onChange={handleOnChange}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
});
|
|
|
|
export default CloudOptions;
|