@xaypay/tui 0.0.71 → 0.0.72

package/src/components/newFile/fileItem.js

@@ -0,0 +1,213 @@
+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);
+        }
+
+        if (status === 'failed') {
+            setProgress(0);
+            clearInterval(i);
+        }
+    }, [status]);
+
+    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>
+
+
+                    <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;