Skip to content

Commit

Permalink
version 1.4.0
Browse files Browse the repository at this point in the history
  • Loading branch information
morrys committed Nov 30, 2023
1 parent 152ac3c commit 52be652
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 189 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@netservice/astrea-react-ds",
"version": "1.3.0",
"version": "1.4.0",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"license": "Apache-2.0",
Expand Down
182 changes: 92 additions & 90 deletions src/components/components/DragDrop.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import * as React from 'react';
import { Accept, useDropzone } from 'react-dropzone';
import {
Box,
Button,
CircularProgress,
MenuItem,
Typography,
useTheme,
} from '@mui/material';
import { Box, Button, MenuItem, Typography, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import FileUploadIcon from '@mui/icons-material/FileUpload';
Expand Down Expand Up @@ -64,19 +57,19 @@ export function DragDrop({
};

const onDrop = React.useCallback(
(acceptedFiles: File[]) => {
const array: File[] = [...images];
const uniqueFiles: File[] = [];
(acceptedFiles: File[]) => {
const array: File[] = [...images];
const uniqueFiles: File[] = [];

acceptedFiles.forEach((file: File) => {
if (!array.some((e: File) => e.name === file.name)) {
uniqueFiles.push(file);
}
});
acceptedFiles.forEach((file: File) => {
if (!array.some((e: File) => e.name === file.name)) {
uniqueFiles.push(file);
}
});

onUpdate([...array, ...uniqueFiles]);
},
[images]
onUpdate([...array, ...uniqueFiles]);
},
[images]
);

const removeImage = (index: number) => {
Expand Down Expand Up @@ -137,35 +130,41 @@ export function DragDrop({
style={{ margin: '0 25px 0 25px' }}
{...getRootProps({ className: 'dropzone' })}
>
<Box
mt={3}
mb={2}
p={5}
sx={{minHeight:'300px', border: !isDragActive?'1px dashed grey': '1px dashed #308A7D',background:'#F0F0F0'}}
display={!multiple && images.length != 0 ? 'none' : ''}
>
<input {...getInputProps()} />
<Box sx={{ textAlign: 'center' }}>
<FileUploadIcon color="disabled" sx={{ fontSize: 50 }} />
</Box>
{isDragActive?
<Box textAlign={'center'} padding={'0 5px 0 5px'}>
<input {...getInputProps()} />
{t('dragDrop.labels.rilasciaFile')}
</Box>
:
<Box textAlign={'center'}>
{t('dragDrop.labels.textDrag')}
</Box>
}
<Box
mt={3}
mb={2}
p={5}
sx={{
minHeight: '300px',
border: !isDragActive
? '1px dashed grey'
: '1px dashed #308A7D',
background: '#F0F0F0',
}}
display={!multiple && images.length != 0 ? 'none' : ''}
>
<input {...getInputProps()} />
<Box sx={{ textAlign: 'center' }}>
<FileUploadIcon color="disabled" sx={{ fontSize: 50 }} />
</Box>
{isDragActive ? (
<Box textAlign={'center'} padding={'0 5px 0 5px'}>
<input {...getInputProps()} />
{t('dragDrop.labels.rilasciaFile')}
</Box>
) : (
<Box textAlign={'center'}>
{t('dragDrop.labels.textDrag')}
</Box>
)}
</Box>
<Box
display={!multiple && images.length != 0 ? 'none' : ''}
mb={2}
textAlign={'center'}
>
<Button sx={{ width: '100%' }} variant="contained">
{t('dragDrop.labels.loadFromFile')?.toUpperCase()}
{t('dragDrop.labels.loadFromFile')}
</Button>
</Box>
</div>
Expand All @@ -176,53 +175,59 @@ export function DragDrop({
</Typography>
</Box>

{
images.length <=0 ?
<Box>
<Typography component="h4" variant="h4" margin={3} padding={0}>
{t('dragDrop.noFile')}
</Typography>
</Box>
:null
}
{images.length <= 0 ? (
<Box>
<Typography
component="h6"
variant="h6"
margin={3}
padding={0}
style={{ fontWeight: 700 }}
>
{t('dragDrop.uploadedFile')}
</Typography>
<Typography component="h6" variant="h6" margin={3} padding={0}>
{t('dragDrop.noFile')}
</Typography>
</Box>
) : null}

<Box margin={3} padding={0}>
{!multiple &&
images.map((image, index) => {
return (
<Box key={image.name}>
<Box
p={3}
pt={0}
sx={{ display: 'flex', justifyContent: 'space-between' }}
>
<Box
p={2}
border={(theme as any).custom.borders[0]}
sx={{ width: '90%', display: 'flex' }}
>
<InsertDriveFileIcon sx={{ color: '#308A7D' }} />
<Box pl={2}>{image.name}</Box>
</Box>
<Box
p={1}
sx={{
display: 'flex',
backgroundColor: '#f7e1e0',
width: '10%',
cursor: 'pointer',
}}
onClick={() => removeImage(index)}
>
<DeleteOutlineIcon
sx={{ marginLeft: 1, color: 'red', margin: 'auto' }}
/>
</Box>
</Box>
images.map((image, index) => {
return (
<Box key={image.name}>
<Box
p={3}
pt={0}
sx={{ display: 'flex', justifyContent: 'space-between' }}
>
<Box
p={2}
border={(theme as any).custom.borders[0]}
sx={{ width: '90%', display: 'flex' }}
>
<InsertDriveFileIcon sx={{ color: '#308A7D' }} />
<Box pl={2}>{image.name}</Box>
</Box>
<Box
p={1}
sx={{
display: 'flex',
backgroundColor: '#f7e1e0',
width: '10%',
cursor: 'pointer',
}}
onClick={() => removeImage(index)}
>
<DeleteOutlineIcon
sx={{ marginLeft: 1, color: 'red', margin: 'auto' }}
/>
</Box>
);
})
}
</Box>
</Box>
);
})}
</Box>

{multiple &&
Expand All @@ -241,13 +246,10 @@ export function DragDrop({
sx={{ width: '90%' }}
>
<Box display={'flex'}>
<InsertDriveFileIcon sx={{ color: "#308A7D" }} />
<Box pl={2}>
{image.name}
</Box>
<InsertDriveFileIcon sx={{ color: '#308A7D' }} />
<Box pl={2}>{image.name}</Box>
</Box>
<Box sx={{ display: 'flex' }} mt={2}>

{attachmentTypes ? (
<ValidatedSelect
validate={required}
Expand All @@ -268,7 +270,7 @@ export function DragDrop({
))}
</ValidatedSelect>
) : (
<></>
<></>
)}
</Box>
</Box>
Expand Down
82 changes: 40 additions & 42 deletions src/components/components/FileUpload.tsx
Original file line number Diff line number Diff line change
@@ -1,51 +1,49 @@
import React, {useEffect, useRef, useState} from 'react';
import { Button, Input } from '@mui/material';
import React, { useEffect, useRef, useState } from 'react';
import { Input } from '@mui/material';

/**
* File Upload Component
* @author vadim.chilinciuc
*
*/

function FileUpload({ onChange, value }: any) {
const inputRef = useRef<HTMLInputElement>(null);
const [selectedFile, setSelectedFile] = useState<any>(value);

// Function to handle file selection
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files && event.target.files[0];
setSelectedFile(file);

if (onChange) {
onChange(file);
}
};

if(!value){
if (inputRef.current) {
inputRef.current.value = '';
}
}



useEffect(() => {
inputRef.current = document.querySelector("#file-input");

}, []);



return (
<div>
<Input
type="file"
onChange={handleFileSelect}
style={{ border: '1px solid black' }}
id="file-input"
/>
</div>
);
export interface FileUploadProps {
value?: File;
onChange?: (e: any) => void;
}

export default FileUpload;
export function FileUpload({ onChange, value }: FileUploadProps) {
const inputRef = useRef<HTMLInputElement | null>(null);
const [selectedFile, setSelectedFile] = useState<any>(value);

// Function to handle file selection
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files && event.target.files[0];
setSelectedFile(file);

if (onChange) {
onChange(file);
}
};

if (!value) {
if (inputRef.current) {
inputRef.current.value = '';
}
}

useEffect(() => {
inputRef.current = document.querySelector('#file-input');
}, []);

return (
<div>
<Input
type="file"
onChange={handleFileSelect}
disableUnderline
id="file-input"
/>
</div>
);
}
Loading

0 comments on commit 52be652

Please sign in to comment.