81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { FileAddOutlined, UploadOutlined } from '@ant-design/icons';
|
||
import { Button, Input, Modal, Upload } from 'antd';
|
||
import { useEffect, useState } from 'react';
|
||
import CustomModalCloseIcon from '../../components/CustomModalCloseIcon';
|
||
|
||
const { Dragger } = Upload;
|
||
|
||
type ReplaceDocModalProps = {
|
||
open: boolean;
|
||
docName: string;
|
||
organizationName: string | null;
|
||
submitting: boolean;
|
||
onCancel: () => void;
|
||
onSubmit: (file: File, reason: string) => void;
|
||
};
|
||
|
||
export default function ReplaceDocModal({ open, docName, organizationName, submitting, onCancel, onSubmit }: ReplaceDocModalProps) {
|
||
const [reason, setReason] = useState('');
|
||
const [file, setFile] = useState<File | null>(null);
|
||
|
||
// при каждом открытии — пустая форма
|
||
useEffect(() => {
|
||
if (open) {
|
||
setReason('');
|
||
setFile(null);
|
||
}
|
||
}, [open]);
|
||
|
||
return (
|
||
<Modal
|
||
title='Замена документа'
|
||
open={open}
|
||
onCancel={onCancel}
|
||
onOk={() => file && onSubmit(file, reason.trim())}
|
||
okText='Загрузить'
|
||
okButtonProps={{
|
||
icon: <UploadOutlined />,
|
||
disabled: file === null || reason.trim().length === 0,
|
||
}}
|
||
closeIcon={<CustomModalCloseIcon />}
|
||
centered
|
||
confirmLoading={submitting}>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||
{organizationName && <span>{organizationName}</span>}
|
||
<div
|
||
style={{
|
||
backgroundColor: 'rgb(248, 250, 252)',
|
||
borderRadius: 6,
|
||
fontSize: 12,
|
||
color: '#667085',
|
||
padding: '8px 10px',
|
||
}}>
|
||
Заменяемый документ: {docName}
|
||
</div>
|
||
|
||
<Input placeholder='Укажите причину замены' value={reason} maxLength={4000} onChange={(e) => setReason(e.target.value)} />
|
||
|
||
<Dragger
|
||
multiple={false}
|
||
style={{ borderStyle: 'dashed' }}
|
||
fileList={file ? [{ uid: 'replace', name: file.name, status: 'done' }] : []}
|
||
maxCount={1}
|
||
accept='.xls,.xlsx,.xlsb,.pdf,.png,.jpg,.jpeg'
|
||
beforeUpload={(f) => {
|
||
setFile(f);
|
||
return false;
|
||
}}
|
||
onRemove={() => setFile(null)}>
|
||
<p className='ant-upload-drag-icon'>
|
||
<FileAddOutlined />
|
||
</p>
|
||
<p className='ant-upload-text' style={{ color: '#667085' }}>
|
||
Перетащите файл сюда
|
||
</p>
|
||
<Button>Выбрать документ</Button>
|
||
</Dragger>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|