107 lines
4.3 KiB
JavaScript
107 lines
4.3 KiB
JavaScript
import React from "react";
|
|
import Head from 'next/head';
|
|
import Image from 'next/image';
|
|
import Link from "next/link";
|
|
import cookie from 'cookie';
|
|
import { connect } from "react-redux";
|
|
import numeral from "numeral";
|
|
import pluralize from 'pluralize-ru';
|
|
import { SpinnerCircular } from 'spinners-react';
|
|
import Dropzone from 'react-dropzone';
|
|
|
|
export default class FilesList extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {};
|
|
}
|
|
|
|
_handle_onAddFile = (files) =>
|
|
{
|
|
console.log("_handle_onAddFile", files);
|
|
|
|
const { name, onAddFile } = this.props;
|
|
onAddFile(name, files);
|
|
}
|
|
|
|
_handle_onRemoveFile = (file_name) =>
|
|
{
|
|
const { name, onRemoveFile } = this.props;
|
|
onRemoveFile(name, file_name);
|
|
}
|
|
|
|
_renderFileName = (name) =>
|
|
{
|
|
console.log("FilesList", "_renderFileName", { name });
|
|
let chunks = name.split(/(.{19})/).filter(O => O);
|
|
console.log({chunks});
|
|
if(chunks.length > 2)
|
|
{
|
|
chunks = chunks.slice(0, 2);
|
|
if(chunks[1].length > 17)
|
|
{
|
|
let second_line = chunks[1].split();
|
|
second_line.slice(0, 17);
|
|
second_line.push("...");
|
|
chunks[1] = second_line;
|
|
}
|
|
}
|
|
|
|
//return chunks.join("\n");
|
|
return chunks;
|
|
}
|
|
|
|
_renderFileType = (file) =>
|
|
{
|
|
return file.name.split(".").pop();
|
|
}
|
|
render()
|
|
{
|
|
const { files, checking } = this.props;
|
|
|
|
console.log("FilesList", "files", files);
|
|
|
|
return (
|
|
<div className="files_list" style={{ flexDirection: "row", display: "flex", alignItems: "flex-start", justifyContent: "flex-start", flexWrap: "wrap", gap: "2%", }}>
|
|
|
|
{ files.map((file, index) => {
|
|
if(file.name === undefined) { return null; }
|
|
return (
|
|
<div key={ index } className="dosc_list medium-icon" style={{ marginBottom: "2%", position: "relative", border: "1px dashed rgb(28, 1, 169)", width: "32%", height: "100px", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", }}>
|
|
<div className="row" style={{ alignItems: "center", justifyContent: "center", display: "flex", flexDirection: "row", flex: 1, marginBottom: "0px" }}>
|
|
<p className="doc_name extension" data-format={ this._renderFileType(file) } style={{ wordBreak: "break-all", lineHeight: "15px" }}>{ this._renderFileName(file.name) }{/*}<span style={{width: "100%"}}>Постановление</span>{*/}</p>
|
|
</div>
|
|
{ !checking && (
|
|
<div style={{ position: "absolute", top: "5px", right: "5px", width: "20px", height: "20px", background: "#edeff5", flex: 1, justifyContent: "center", display: "flex", alignItems: "center", borderRadius: "10px", cursor: "pointer" }} onClick={ () => this._handle_onRemoveFile(file.name) }>
|
|
<span style={{ color: "#919399", fontSize: "12px" }}>✕</span>
|
|
</div>
|
|
) }
|
|
</div>
|
|
)
|
|
}) }
|
|
|
|
{ !checking && (
|
|
<Dropzone onDrop={ (acceptedFiles) => this._handle_onAddFile(acceptedFiles) }>
|
|
{ ({getRootProps, getInputProps}) => (
|
|
<div className="file_upload dropzone" { ...getRootProps() } style={{ width: "32%", height: "100px", marginBottom: "25px", marginTop: "0px", }}>
|
|
<div className="files"></div>
|
|
<div>
|
|
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M28.1251 31.5H7.87402C7.57565 31.5 7.28951 31.3815 7.07853 31.1705C6.86755 30.9595 6.74902 30.6734 6.74902 30.375V5.625C6.74902 5.32663 6.86755 5.04048 7.07853 4.82951C7.28951 4.61853 7.57565 4.5 7.87402 4.5H21.3751L29.2501 12.375V30.375C29.2501 30.5227 29.221 30.669 29.1645 30.8055C29.108 30.942 29.0251 31.066 28.9206 31.1705C28.8162 31.275 28.6921 31.3578 28.5556 31.4144C28.4192 31.4709 28.2729 31.5 28.1251 31.5Z" stroke="#1C01A9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M21.375 4.5V12.375H29.2511" stroke="#1C01A9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M14.625 21.375H21.375" stroke="#1C01A9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M18 18V24.75" stroke="#1C01A9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
<label htmlFor="" className="blue unselectable">Прикрепить скан документов</label>
|
|
</div>
|
|
<input type="file" />
|
|
</div>
|
|
) }
|
|
</Dropzone>
|
|
) }
|
|
|
|
</div>
|
|
)
|
|
}
|
|
} |