-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d57f8b3
commit 1f94633
Showing
12 changed files
with
348 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -72,3 +72,7 @@ export { | |
export { | ||
CheckoutTip, | ||
} from './extraTip/CheckoutTip' | ||
|
||
export { | ||
B3Upload, | ||
} from './upload/B3Upload' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,209 @@ | ||
import { | ||
Box, | ||
Button, | ||
} from '@mui/material' | ||
|
||
import Grid from '@mui/material/Unstable_Grid2' | ||
|
||
import { | ||
useRef, | ||
useState, | ||
} from 'react' | ||
|
||
import { | ||
DropzoneArea, | ||
} from 'react-mui-dropzone' | ||
|
||
import styled from '@emotion/styled' | ||
|
||
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile' | ||
import { | ||
B3Dialog, | ||
} from '../B3Dialog' | ||
|
||
import { | ||
B3UploadLoadding, | ||
} from './B3UploadLoadding' | ||
|
||
import { | ||
removeEmptyRow, | ||
parseEmptyData, | ||
} from './utils' | ||
|
||
const FileUploadContainer = styled(Box)(() => ({ | ||
width: '100%', | ||
border: '1px dashed #1976D2', | ||
borderRadius: '5px', | ||
position: 'relative', | ||
'& .file-upload-area': { | ||
height: '200px', | ||
'& .MuiSvgIcon-root': { | ||
display: 'none', | ||
}, | ||
}, | ||
})) | ||
|
||
export const B3Upload = () => { | ||
const uploadRef = useRef<HTMLInputElement>(null) | ||
const [step, setStep] = useState<string>('init') | ||
|
||
const handleChange = async (files: File[]) => { | ||
// init loadding end | ||
const file = files.length > 0 ? files[0] : null | ||
|
||
if (file) { | ||
const reader = new FileReader() | ||
|
||
reader.addEventListener('load', async (b: any) => { | ||
const csvdata = b.target.result | ||
|
||
if (csvdata) { | ||
setStep('loadding') | ||
const content = csvdata.split('\n') | ||
const EmptyData = removeEmptyRow(content) | ||
const parseData = parseEmptyData(EmptyData) | ||
console.log(EmptyData, parseData) | ||
|
||
// DOTO: | ||
await new Promise((r) => { | ||
setTimeout(() => { | ||
r('1') | ||
}, 5000) | ||
}) | ||
setStep('end') | ||
} | ||
}) | ||
|
||
reader.readAsBinaryString(file) | ||
} | ||
} | ||
|
||
const openFile = () => { | ||
if (uploadRef.current) uploadRef.current.children[1].click() | ||
} | ||
|
||
const content = ( | ||
<Box sx={{ | ||
width: 'auto', | ||
position: 'absolute', | ||
transform: 'translate(-50%, -50%)', | ||
top: '50%', | ||
left: '50%', | ||
}} | ||
> | ||
<Grid | ||
container | ||
rowSpacing={1.5} | ||
display="flex" | ||
direction="column" | ||
justifyContent="center" | ||
> | ||
<Grid | ||
display="flex" | ||
justifyContent="center" | ||
xs={12} | ||
> | ||
<InsertDriveFileIcon /> | ||
</Grid> | ||
|
||
<Grid | ||
display="flex" | ||
justifyContent="center" | ||
xs={12} | ||
> | ||
<Box sx={{ | ||
fontSize: '16px', | ||
fontWeight: '400', | ||
color: '#5E637A', | ||
}} | ||
> | ||
Drag & drop file here | ||
</Box> | ||
</Grid> | ||
|
||
<Grid | ||
display="flex" | ||
xs={12} | ||
sx={{ | ||
fontWeight: 400, | ||
fontSize: '14px', | ||
}} | ||
> | ||
<Box | ||
sx={{ | ||
color: '#8C93AD', | ||
whiteSpace: 'nowrap', | ||
}} | ||
> | ||
File types: CSV, maximum size: 50MB. | ||
</Box> | ||
<Box | ||
sx={{ | ||
color: '#1976D2', | ||
cursor: 'pointer', | ||
whiteSpace: 'nowrap', | ||
}} | ||
> | ||
Download sample | ||
</Box> | ||
</Grid> | ||
|
||
<Grid | ||
display="flex" | ||
justifyContent="center" | ||
xs={12} | ||
> | ||
<Button | ||
onClick={openFile} | ||
variant="outlined" | ||
> | ||
Upload file | ||
</Button> | ||
</Grid> | ||
|
||
</Grid> | ||
</Box> | ||
) | ||
|
||
return ( | ||
|
||
<B3Dialog | ||
isOpen | ||
title="test" | ||
maxWidth="lg" | ||
> | ||
<Box | ||
sx={{ | ||
height: '200px', | ||
minWidth: '600px', | ||
}} | ||
> | ||
|
||
{ | ||
step === 'init' && ( | ||
<FileUploadContainer ref={uploadRef}> | ||
{content} | ||
<DropzoneArea | ||
dropzoneClass="file-upload-area" | ||
filesLimit={1} | ||
onChange={handleChange} | ||
showPreviews={false} | ||
showPreviewsInDropzone={false} | ||
showAlerts={false} | ||
dropzoneText="" | ||
/> | ||
</FileUploadContainer> | ||
) | ||
} | ||
|
||
{ | ||
step === 'loadding' && <B3UploadLoadding step={step} /> | ||
} | ||
|
||
{ | ||
step === 'end' && <Box>123123</Box> | ||
} | ||
</Box> | ||
</B3Dialog> | ||
) | ||
} |
102 changes: 102 additions & 0 deletions
102
apps/storefront/src/components/upload/B3UploadLoadding.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
import { | ||
useState, | ||
useEffect, | ||
} from 'react' | ||
|
||
import CircularProgress, { | ||
CircularProgressProps, | ||
} from '@mui/material/CircularProgress' | ||
import Typography from '@mui/material/Typography' | ||
import { | ||
Box, | ||
} from '@mui/material' | ||
|
||
function CircularProgressWithLabel( | ||
props: CircularProgressProps & { value: number }, | ||
) { | ||
return ( | ||
<Box sx={{ | ||
position: 'relative', display: 'inline-flex', | ||
}} | ||
> | ||
<CircularProgress | ||
variant="determinate" | ||
{...props} | ||
/> | ||
<Box | ||
sx={{ | ||
top: 0, | ||
left: 0, | ||
bottom: 0, | ||
right: 0, | ||
position: 'absolute', | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
}} | ||
> | ||
<Typography | ||
variant="caption" | ||
component="div" | ||
color="text.secondary" | ||
> | ||
{`${Math.round(props.value)}%`} | ||
|
||
</Typography> | ||
</Box> | ||
</Box> | ||
) | ||
} | ||
|
||
interface B3UploadLoaddingProps { | ||
step: string, | ||
} | ||
|
||
const B3UploadLoadding = (props: B3UploadLoaddingProps) => { | ||
const { | ||
step, | ||
} = props | ||
const [progress, setProgress] = useState<number>(0) | ||
|
||
useEffect(() => { | ||
const timer = setInterval(() => { | ||
setProgress((prevProgress) => (prevProgress === 95 ? 95 : prevProgress + 1)) | ||
if (step === 'end') { | ||
setProgress(100) | ||
clearInterval(timer) | ||
} | ||
}, 100) | ||
return () => { | ||
if (timer) clearInterval(timer) | ||
} | ||
}, []) | ||
return ( | ||
<Box | ||
sx={{ | ||
width: '100%', | ||
height: '100%', | ||
display: 'flex', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
flexDirection: 'column', | ||
}} | ||
> | ||
<CircularProgressWithLabel value={progress} /> | ||
<Box | ||
sx={{ | ||
fontWeight: 400, | ||
fontSize: '14px', | ||
color: '#8C93AD', | ||
mt: '10px', | ||
}} | ||
> | ||
Uploading file... | ||
|
||
</Box> | ||
</Box> | ||
) | ||
} | ||
|
||
export { | ||
B3UploadLoadding, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
export const removeEmptyRow = (arr: string[]) => { | ||
const tmpArr = arr | ||
if (tmpArr[tmpArr.length - 1] === '') { | ||
tmpArr.pop() | ||
} | ||
tmpArr.shift() | ||
|
||
return tmpArr | ||
} | ||
|
||
export const parseEmptyData = (arr: string[]) => { | ||
if (arr.length) { | ||
const tmpArr = arr.map((item: string) => { | ||
const products = item.split(',') | ||
return { | ||
sku: products[0], | ||
qty: products[1].replace(/[\r\n]/g, ''), | ||
} | ||
}) | ||
return tmpArr | ||
} | ||
return [] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.