@xaypay/tui 0.0.105 → 0.0.107

package/src/components/newFile/fileItem.js

@@ -1,213 +1,236 @@
-import React, { useEffect, useState } from 'react';
-
-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';
-
-const FileItem = React.memo(({
-    size,
-    name,
-    uuid,
-    check,
-    radius,
-    status,
-    removeFile,
-    fileFormat,
-    progressColor,
-    listItemHeight,
-    listItemPadding,
-    progressFontSize,
-    listItemErrorSize,
-    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(_ => _);
-            clearTimeout(t);
-            clearInterval(i);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (progress > 84) {
-            clearInterval(i);
-        }
-    }, [progress]);
-
-    useEffect(() => {
-        if (status === 'success') {
-            setProgress(100);
-            clearInterval(i);
+import React, { useEffect, useState } from 'react'
+
+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)
         }
 
-        if (status === 'failed') {
-            setProgress(0);
-            clearInterval(i);
-        }
-    }, [status]);
+        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((_) => _)
+                clearTimeout(t)
+                clearInterval(i)
+            }
+        }, [])
 
-    useEffect(() => {
-        if (check !== '') {
-            setT(setTimeout(() => {
-                removeFile(uuid);
-            }, 3500));
-        }
-    }, [check]);
-    
-    return (
-        <div
-            style={{
-                width: '100%',
-                display: 'flex',
-                marginTop: '6px',
-                alignItems: 'center',
-                borderRadius: radius,
-                height: listItemHeight,
-                boxSizing: 'border-box',
-                padding: listItemPadding,
-                flexDirection: check !== '' ? 'column' : 'row',
-                justifyContent: check !== '' ? 'space-around' : 'space-between',
-                backgroundColor: check !== '' ? listItemBackgroundErrorColor : listItemBackgroundColor
-            }}
-        >
-            {
-                check !== ''
-                ? <>
-                    <p style={{
-                        margin: '0px',
-                        color: listItemErrorColor,
-                        fontSize: listItemErrorSize
-                    }}>{ name }</p>
-                    <p style={{
-                        margin: '0px',
-                        color: listItemErrorColor,
-                        fontSize: listItemErrorSize
-                    }}>{ check }</p>
-                </>
-                : <>
-                    <div
-                        style={{
-                            width: '32px'
-                        }}
-                    >
-                        {
-                            fileFormat === 'pdf' ? <SvgListItemPdf /> :
-                            fileFormat === 'jpg' ? <SvgListItemJpg /> :
-                            fileFormat === 'png' ? <SvgListItemPng /> :
-                            fileFormat === 'jpeg' ? <SvgListItemJpeg /> : ''
-                        }
-                    </div>
+        useEffect(() => {
+            if (progress > 84) {
+                clearInterval(i)
+            }
+        }, [progress])
 
+        useEffect(() => {
+            if (status === 'success') {
+                setProgress(100)
+                clearInterval(i)
+            }
 
-                    <div
-                        style={{
-                            position: 'relative',
-                            display: 'flex',
-                            height: '40px',
-                            margin: '0px 14px',
-                            alignItems: 'flex-end',
-                            width: 'calc(100% - 82px)'
-                        }}
-                    >
+            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: check !== '' ? 'column' : 'row',
+                    justifyContent: check !== '' ? 'space-around' : 'space-between',
+                    backgroundColor: check !== '' ? listItemBackgroundErrorColor : listItemBackgroundColor,
+                }}
+            >
+                {check !== '' ? (
+                    <>
+                        <p
+                            style={{
+                                margin: '0px',
+                                color: listItemErrorColor,
+                                fontSize: listItemErrorSize,
+                            }}
+                        >
+                            {name}
+                        </p>
+                        <p
+                            style={{
+                                margin: '0px',
+                                color: listItemErrorColor,
+                                fontSize: listItemErrorSize,
+                            }}
+                        >
+                            {check}
+                        </p>
+                    </>
+                ) : (
+                    <>
                         <div
                             style={{
-                                width: '100%',
-                                height: '100%',
-                                display: 'flex',
-                                paddingTop: '5px',
-                                color: progressColor,
-                                boxSizing: 'border-box',
-                                alignItems: 'flex-start',
-                                fontSize: progressFontSize,
-                                justifyContent: 'space-between'
+                                width: '32px',
                             }}
                         >
-                            <p
-                                style={{
-                                    margin: '0px',
-                                    overflow: 'hidden',
-                                    whiteSpace: 'nowrap',
-                                    textOverflow: 'ellipsis',
-                                    maxWidth: 'calc(100% - 56px)'
-                                }}
-                            >{name}</p>
-
-                            <span>
-                                {progress} %
-                            </span>
+                            {fileFormat === 'pdf' ? (
+                                <SvgListItemPdf />
+                            ) : fileFormat === 'jpg' ? (
+                                <SvgListItemJpg />
+                            ) : fileFormat === 'png' ? (
+                                <SvgListItemPng />
+                            ) : fileFormat === 'jpeg' ? (
+                                <SvgListItemJpeg />
+                            ) : (
+                                ''
+                            )}
                         </div>
 
                         <div
                             style={{
-                                position: 'absolute',
-                                left: '0px',
-                                bottom: '5px',
-                                width: '100%',
-                                height: '4px',
-                                borderRadius: '10px',
-                                backgroundColor: progressTrackColor
+                                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',
-                                    width: status === 'failed' ? '100%' : progress + '%',
-                                    backgroundColor: status === 'success' ? progressSuccessColor : status === 'failed' ? progressFailedColor : progressLoadingColor
+                                    backgroundColor: progressTrackColor,
                                 }}
-                            ></div>
+                            >
+                                <div
+                                    style={{
+                                        height: '100%',
+                                        borderRadius: '10px',
+                                        width: status === 'failed' ? '100%' : progress + '%',
+                                        backgroundColor:
+                                            status === 'success'
+                                                ? progressSuccessColor
+                                                : status === 'failed'
+                                                ? progressFailedColor
+                                                : progressLoadingColor,
+                                    }}
+                                ></div>
+                            </div>
                         </div>
 
-                    </div>
-
-
-                    <div
-                        style={{
-                            width: '22px',
-                            cursor: 'pointer'
-                        }}
-                        onClick={() => handleRemoveItem(uuid)}
-                    >
-                        <SvgListItemDelete />
-                    </div>
-                </>
-            }
-        </div>
-    )
-});
-
-export default FileItem;
+                        <div
+                            style={{
+                                width: '22px',
+                                cursor: 'pointer',
+                            }}
+                            onClick={() => handleRemoveItem(uuid)}
+                        >
+                            <SvgListItemDelete />
+                        </div>
+                    </>
+                )}
+            </div>
+        )
+    }
+)
+
+export default FileItem