@xaypay/tui 0.0.119 → 0.0.121

package/src/components/newFile/fileItem.js

@@ -1,281 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import SvgHeic from './../icon/Heic'
-import SvgWrong from './../icon/Wrong'
-import SvgListItemPdf from './../icon/ListItemPdf'
-import SvgListItemJpg from './../icon/ListItemJpg'
-import SvgListItemPng from './../icon/ListItemPng'
-import SvgListItemJpeg from './../icon/ListItemJpeg'
-import SvgListItemDelete from './../icon/ListItemDelete'
-
-// eslint-disable-next-line react/display-name
-const FileItem = React.memo(
-    ({
-        size,
-        name,
-        uuid,
-        check,
-        radius,
-        status,
-        removeFile,
-        fileFormat,
-        progressColor,
-        listItemHeight,
-        listItemPadding,
-        progressFontSize,
-        listItemErrorSize,
-        timeForRemoveError,
-        listItemErrorColor,
-        progressTrackColor,
-        progressFailedColor,
-        progressSuccessColor,
-        progressLoadingColor,
-        listItemBackgroundColor,
-        listItemBackgroundErrorColor,
-    }) => {
-        const [i, setI] = useState((_) => _)
-        const [t, setT] = useState((_) => _)
-        const [progress, setProgress] = useState(7)
-
-        const handleRemoveItem = (id) => {
-            removeFile(id)
-        }
-
-        useEffect(() => {
-            let time = Math.floor(Math.random() * (1100 - 900 + 1)) + 900
-            let fileSizeInMB = Math.round(size / (1024 * 1024))
-            if (fileSizeInMB > 5) {
-                const times = [
-                    Math.floor(Math.random() * (1700 - 1300 + 1)) + 1300,
-                    Math.floor(Math.random() * (3200 - 2800 + 1)) + 2800,
-                    Math.floor(Math.random() * (4700 - 4300 + 1)) + 4300,
-                    Math.floor(Math.random() * (6200 - 5800 + 1)) + 5800,
-                    Math.floor(Math.random() * (7700 - 7300 + 1)) + 7300,
-                ]
-                const index = Math.min(Math.floor((size - 1) / 15), times.length - 1)
-                time = times[index]
-            }
-            setI(
-                setInterval(() => {
-                    setProgress((prev) => {
-                        return (prev += 7)
-                    })
-                }, time)
-            )
-            return () => {
-                setI((_) => _)
-                setT((_) => _)
-                clearTimeout(t)
-                clearInterval(i)
-            }
-        }, [])
-
-        useEffect(() => {
-            if (progress > 84) {
-                clearInterval(i)
-            }
-        }, [progress])
-
-        useEffect(() => {
-            if (status === 'success') {
-                setProgress(100)
-                clearInterval(i)
-            }
-
-            if (status === 'failed') {
-                setProgress(0)
-                clearInterval(i)
-            }
-        }, [status])
-
-        useEffect(() => {
-            if (check !== '') {
-                setT(
-                    setTimeout(() => {
-                        removeFile(uuid)
-                    }, timeForRemoveError)
-                )
-            }
-        }, [check])
-
-        return (
-            <div
-                style={{
-                    width: '100%',
-                    display: 'flex',
-                    marginTop: '6px',
-                    alignItems: 'center',
-                    borderRadius: radius,
-                    height: listItemHeight,
-                    boxSizing: 'border-box',
-                    padding: listItemPadding,
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    border: check !== '' ? `1px solid ${listItemErrorColor}` : '',
-                    backgroundColor: check !== '' ? listItemBackgroundErrorColor : listItemBackgroundColor,
-                }}
-            >
-                {check !== '' ? (
-                    <>
-                        <div
-                            style={{
-                                width: '32px',
-                            }}
-                        >
-                            <SvgWrong />
-                        </div>
-
-                        <div
-                            style={{
-                                position: 'relative',
-                                display: 'flex',
-                                height: '40px',
-                                margin: '0px',
-                                alignItems: 'flex-end',
-                                width: 'calc(100% - 40px)',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    display: 'flex',
-                                    paddingTop: '5px',
-                                    color: progressColor,
-                                    boxSizing: 'border-box',
-                                    flexDirection: 'column',
-                                    fontSize: listItemErrorSize,
-                                }}
-                            >
-                                <p
-                                    style={{
-                                        margin: '0px',
-                                        overflow: 'hidden',
-                                        whiteSpace: 'nowrap',
-                                        textOverflow: 'ellipsis',
-                                        width: '100%',
-                                        maxWidth: '100%',
-                                    }}
-                                >
-                                    {name}
-                                </p>
-                                <p
-                                    style={{
-                                        margin: '0px',
-                                        overflow: 'hidden',
-                                        whiteSpace: 'nowrap',
-                                        textOverflow: 'ellipsis',
-                                        width: '100%',
-                                        maxWidth: '100%',
-                                        color: listItemErrorColor,
-                                    }}
-                                >
-                                    {check ? check : ''}
-                                </p>
-                            </div>
-                        </div>
-                    </>
-                ) : (
-                    <>
-                        <div
-                            style={{
-                                width: '32px',
-                            }}
-                        >
-                            {fileFormat === 'pdf' ? (
-                                <SvgListItemPdf />
-                            ) : fileFormat === 'jpg' ? (
-                                <SvgListItemJpg />
-                            ) : fileFormat === 'png' ? (
-                                <SvgListItemPng />
-                            ) : fileFormat === 'jpeg' ? (
-                                <SvgListItemJpeg />
-                            ) : fileFormat === 'heic' || fileFormat === 'heif' ? (
-                                <SvgHeic />
-                            ) : (
-                                ''
-                            )}
-                        </div>
-
-                        <div
-                            style={{
-                                position: 'relative',
-                                display: 'flex',
-                                height: '40px',
-                                margin: '0px 14px',
-                                alignItems: 'flex-end',
-                                width: 'calc(100% - 82px)',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    display: 'flex',
-                                    paddingTop: '5px',
-                                    color: progressColor,
-                                    boxSizing: 'border-box',
-                                    alignItems: 'flex-start',
-                                    fontSize: progressFontSize,
-                                    justifyContent: 'space-between',
-                                }}
-                            >
-                                <p
-                                    style={{
-                                        margin: '0px',
-                                        overflow: 'hidden',
-                                        whiteSpace: 'nowrap',
-                                        textOverflow: 'ellipsis',
-                                        maxWidth: 'calc(100% - 56px)',
-                                    }}
-                                >
-                                    {name}
-                                </p>
-
-                                <span>{progress} %</span>
-                            </div>
-
-                            <div
-                                style={{
-                                    position: 'absolute',
-                                    left: '0px',
-                                    bottom: '5px',
-                                    width: '100%',
-                                    height: '4px',
-                                    borderRadius: '10px',
-                                    backgroundColor: progressTrackColor,
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        height: '100%',
-                                        borderRadius: '10px',
-                                        width: status === 'failed' ? '100%' : progress + '%',
-                                        backgroundColor:
-                                            status === 'success'
-                                                ? progressSuccessColor
-                                                : status === 'failed'
-                                                ? progressFailedColor
-                                                : progressLoadingColor,
-                                    }}
-                                ></div>
-                            </div>
-                        </div>
-
-                        <div
-                            style={{
-                                width: '22px',
-                                cursor: 'pointer',
-                            }}
-                            onClick={() => handleRemoveItem(uuid)}
-                        >
-                            <SvgListItemDelete />
-                        </div>
-                    </>
-                )}
-            </div>
-        )
-    }
-)
-
-export default FileItem