128 lines
3.7 KiB
TypeScript
128 lines
3.7 KiB
TypeScript
import { isObjectNull } from '@/utils/is-null';
|
|
import { Button, Form, Input, message, Modal, Select } from 'antd';
|
|
import { useEffect, useState } from 'react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { useDeckPageStore } from './deck-store';
|
|
export const FormModal = () => {
|
|
const [form] = Form.useForm();
|
|
const [options, setOptions] = useState<{ label: string; value: any }[]>([]);
|
|
const deckPageStore = useDeckPageStore(
|
|
useShallow((state) => {
|
|
return {
|
|
showEdit: state.showEdit,
|
|
setShowEdit: state.setShowEdit,
|
|
pageData: state.pageData,
|
|
getPageData: state.getPageData,
|
|
formData: state.formData,
|
|
setFormData: state.setFormData,
|
|
id: state.id,
|
|
setSelected: state.setSelected,
|
|
getSeleted: state.getSeleted,
|
|
};
|
|
}),
|
|
);
|
|
useEffect(() => {
|
|
if (!deckPageStore.showEdit) return;
|
|
const pageData = deckPageStore.getPageData() || [];
|
|
const data = pageData.map((item) => {
|
|
const { container } = item?.data || {};
|
|
const label = container?.title;
|
|
return {
|
|
label: label || item.id,
|
|
value: item.id,
|
|
};
|
|
});
|
|
setOptions(data);
|
|
const selected = deckPageStore.getSeleted();
|
|
const { cid } = selected?.data || {};
|
|
if (cid) {
|
|
form.setFieldsValue({ cid });
|
|
return;
|
|
}
|
|
const isNull = isObjectNull(deckPageStore.formData);
|
|
if (isNull) {
|
|
form.setFieldsValue({});
|
|
form.resetFields();
|
|
} else {
|
|
form.setFieldsValue(deckPageStore.formData);
|
|
}
|
|
}, [deckPageStore.showEdit, deckPageStore.pageData]);
|
|
const onFinish = async (values: any) => {
|
|
const pageData = deckPageStore.getPageData() || [];
|
|
const page = pageData.find((item) => item.id === values.cid);
|
|
if (!page) {
|
|
message.error('Page not found');
|
|
return;
|
|
}
|
|
const cid = values.cid;
|
|
if (!cid) {
|
|
return;
|
|
}
|
|
const el = document.querySelector(`[data-cid="${values.cid}"]`);
|
|
if (el) {
|
|
const data = (el as HTMLDivElement).dataset;
|
|
const { cid, pid } = data;
|
|
document.querySelectorAll('.active').forEach((item) => {
|
|
item.classList.remove('active');
|
|
});
|
|
el.classList.add('active');
|
|
// el.scrollIntoView({ behavior: 'smooth', });
|
|
deckPageStore.setSelected({ type: 'active', data: { cid, pid, rid: deckPageStore.id } });
|
|
}
|
|
onClose();
|
|
};
|
|
const onClose = () => {
|
|
deckPageStore.setShowEdit(false);
|
|
deckPageStore.setFormData({});
|
|
form.setFieldsValue({});
|
|
};
|
|
return (
|
|
<Modal
|
|
title={'Select a element'}
|
|
open={deckPageStore.showEdit}
|
|
onClose={() => deckPageStore.setShowEdit(false)}
|
|
destroyOnClose
|
|
footer={false}
|
|
width={800}
|
|
onCancel={onClose}>
|
|
<Form
|
|
className='mt-4'
|
|
form={form}
|
|
onFinish={onFinish}
|
|
labelCol={{
|
|
span: 4,
|
|
}}
|
|
wrapperCol={{
|
|
span: 20,
|
|
}}>
|
|
<Form.Item name='id' hidden>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name='cid' label='cid'>
|
|
<Select
|
|
options={options.map((item) => {
|
|
return {
|
|
label: (
|
|
<div className='flex justify-between text-black'>
|
|
{item.label}
|
|
<div>{item.value}</div>
|
|
</div>
|
|
),
|
|
value: item.value,
|
|
};
|
|
})}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label=' ' colon={false}>
|
|
<Button type='primary' htmlType='submit'>
|
|
Choose
|
|
</Button>
|
|
<Button className='ml-2' htmlType='reset' onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|