@xaypay/tui 0.0.70 → 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;

package/src/components/newFile/index.js

@@ -0,0 +1,488 @@
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+
+import FileItem from './fileItem';
+
+import { compereConfigs } from './../../utils';
+
+import SvgPdf from './../icon/PDF';
+import SvgUpload from './../icon/Upload';
+import SvgRemoveFile from './../icon/RemoveFile';
+import SvgDeleteComponent from './../icon/DeleteComponent';
+
+export const NewFile = ({
+    or,
+    size,
+    name,
+    color,
+    label,
+    width,
+    weight,
+    height,
+    radius,
+    change,
+    border,
+    upload,
+    maxSize,
+    disabled,
+    multiple,
+    required,
+    errorSize,
+    labelSize,
+    removeFile,
+    labelColor,
+    errorColor,
+    filesArray,
+    putFileHere,
+    borderColor,
+    uploadColor,
+    defaultData,
+    errorMessage,
+    fileSizeText,
+    progressColor,
+    fileExtensions,
+    listItemHeight,
+    backgroundColor,
+    deleteComponent,
+    listItemPadding,
+    progressFontSize,
+    borderHoverColor,
+    listItemErrorSize,
+    progressTrackColor,
+    fileAreaImageWidth,
+    listItemErrorColor,
+    labelRequiredColor,
+    progressFailedColor,
+    fileAreaImageHeight,
+    progressSuccessColor,
+    progressLoadingColor,
+    hiddenBackgroundColor,
+    extentionsRowMarginTop,
+    listItemBackgroundColor,
+    listItemBackgroundErrorColor
+}) => {
+    const ref = useRef(null);
+    const inpRef = useRef(null);
+    const memoizedItems = useMemo(() => filesArray, [filesArray]);
+
+    const [error, setError] = useState('');
+    const [isHover, setIsHover] = useState(false);
+    const [singleFile, setSingleFile] = useState(null);
+    const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+
+    const configStyles = compereConfigs();
+
+    const handleRemoveComponent = () => {
+        const node = ReactDOM.findDOMNode(ref.current);
+        const parent = node.parentNode;
+        parent.removeChild(node);
+    };
+
+    const handleRemoveFile = () => {
+        setImage(null);
+        removeFile(singleFile);
+    };
+
+    const handleChange = (e) => {
+        const file = e.target.files;
+
+        if (multiple) {
+            setError('');
+            setImage(null);
+            for (let ix = 0; ix < file.length; ix++) {
+                if (file[ix]) {
+                    if (file[ix].size <= maxSize * Math.pow(2, 20)) {
+                        if (fileExtensions.includes(file[ix].type.split('/')[1])) {
+                            change({
+                                id: '',
+                                check: '',
+                                status: '',
+                                file: file[ix],
+                                uuid: uuidv4()
+                            });
+                        } else {
+                            change({
+                                file: file[ix],
+                                uuid: uuidv4(),
+                                check: 'ֆայլի սխալ ֆորմատ'
+                            });
+                        }
+                    } else {
+                        change({
+                            file: file[ix],
+                            uuid: uuidv4(),
+                            check: 'առավելագույն ծավալ'
+                        });
+                    }
+                }
+            }
+            if (file.length === 0 && memoizedItems.length === 0) {
+                setError('Ֆայլը ընտրված չէ');
+            }
+        } else {
+            if (file[0]) {
+                if (file[0].size <= maxSize * Math.pow(2, 20)) {
+                    if (fileExtensions.includes(file[0].type.split('/')[1])) {
+                        setError('');
+                        change(file);
+                        setSingleFile(file);
+                        if (file[0].type === 'application/pdf') {
+                            setImage('pdf');
+                        } else {
+                            setImage(URL.createObjectURL(file[0]));
+                        }
+                    } else {
+                        setImage(null);
+                        setError('ֆայլի սխալ ֆորմատ');
+                    }
+                } else {
+                    setImage(null);
+                    setError('առավելագույն ծավալ');
+                }
+            }
+            if (file.length === 0) {
+                setImage(null);
+                setError('Ֆայլը ընտրված չէ');
+            }
+        }
+    };
+
+    const handleClick = () => {
+        if (!image) {
+            inpRef.current.click();
+        }
+    };
+
+    const handleDrop = (e) => {
+        if (!disabled) {
+            e.preventDefault();
+            handleChange({target: { files: e.dataTransfer.files }});
+        }
+    };
+
+    const handleDragOver = (e) => {
+        if (!disabled) {
+            e.preventDefault();
+        }
+    };
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+
+    const handleStopPropagation = (e) => {
+        e.stopPropagation();
+    };
+
+    useEffect(() => {
+        if (!multiple && defaultData) {
+            if (!defaultData.type) {
+                alert('Please add type in defaultData prop');
+            }
+
+            if (!defaultData.url) {
+                alert('Please add url in defaultData prop');
+            }
+        }
+
+        if (multiple && !filesArray) {
+            alert('In multiple mode, you should add filesArray prop for drawing files');
+        }
+
+        if (multiple) {
+            setSingleFile(null);
+        }
+    }, [multiple, filesArray && filesArray.length, defaultData]);
+
+    useEffect(() => {
+        if (errorMessage) {
+            setError(errorMessage);
+        } else {
+            setError('');
+        }
+    }, [errorMessage]);
+
+    useEffect(() => {
+        if (!change) {
+            alert('Please add change prop on File component');                    
+        }
+
+        if (!removeFile) {
+            alert('Please add removeFile prop on File component');                    
+        }
+    }, [change, removeFile]);
+
+    return (
+        <div
+            ref={ref}
+            style={{
+                width: width ? width : configStyles.File.width
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    marginBottom: '6px',
+                    alignItems: 'center',
+                    justifyContent: label ? 'space-between' : 'flex-end'
+                }}
+            >
+                {
+                    label && <label
+                                style={{
+                                    color: labelColor ? labelColor : configStyles.File.labelColor,
+                                    fontSize: labelSize ? labelSize : configStyles.File.labelSize,
+                                }}
+                            >
+                                {label}
+                                {required &&
+                                    <sup
+                                        style={{color: labelRequiredColor ? labelRequiredColor : configStyles.File.labelRequiredColor}}
+                                    >*</sup>
+                                }
+                            </label>
+                }
+                {
+                    deleteComponent && <span style={{cursor: 'pointer'}} onClick={handleRemoveComponent}>
+                        <SvgDeleteComponent />
+                    </span>
+                }
+            </div>
+
+            <div
+                style={{
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    position: 'relative',
+                    boxSizing: 'border-box',
+                    justifyContent: 'center',
+                    cursor: !disabled ? 'pointer' : 'not-allowed',
+                    height: height ? height : configStyles.File.height,
+                    border: border ? border : configStyles.File.border,
+                    borderRadius: radius ? radius : configStyles.File.radius ,
+                    backgroundColor: backgroundColor ? backgroundColor : configStyles.File.backgroundColor,
+                    borderColor:
+                        error ?
+                            errorColor ? errorColor : configStyles.File.errorColor :
+                            disabled ? borderColor ? borderColor : configStyles.File.borderColor :
+                            isHover ? borderHoverColor ? borderHoverColor : configStyles.File.borderHoverColor :
+                            borderColor ? borderColor : configStyles.File.borderColor
+                }}
+                onDrop={handleDrop}
+                onClick={handleClick}
+                onDragOver={handleDragOver}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <input
+                    hidden
+                    name={name}
+                    type='file'
+                    ref={inpRef}
+                    disabled={disabled}
+                    multiple={multiple}
+                    onChange={handleChange}
+                />
+
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        textAlign: 'center',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        color: color ? color : configStyles.File.color,
+                        fontSize: size ? size : configStyles.File.size,
+                        fontWeight: weight ? weight : configStyles.File.weight,
+                    }}
+                >
+                    {
+                        !multiple && image ?
+                            image === 'pdf' ?
+                                <SvgPdf /> :
+                                <img
+                                    src={image}
+                                    style={{
+                                        display: 'block',
+                                        maxWidth: '100%',
+                                        maxHeight: '95%',
+                                        objectFit: 'contain',
+                                        width: fileAreaImageWidth ? fileAreaImageWidth : configStyles.File.fileAreaImageWidth,
+                                        height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.File.fileAreaImageHeight,
+                                    }}
+                                    alt='file preview'
+                                />
+                        : <>
+                            <div>
+                                <SvgUpload />
+                            </div>
+
+                            <div>
+                                <p
+                                    style={{
+                                        margin: '0px'
+                                    }}
+                                >
+                                    {putFileHere ? putFileHere : configStyles.File.putFileHere}
+                                    <br />
+                                    {or ? or : configStyles.File.or} <span
+                                        style={{
+                                            color: uploadColor ? uploadColor : configStyles.File.uploadColor
+                                        }}
+                                    >{upload ? upload : configStyles.File.upload}</span>
+                                </p>
+                            </div>
+
+                            <div
+                                style={{
+                                    marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.File.extentionsRowMarginTop
+                                }}
+                            >
+                                <p
+                                    style={{
+                                        margin: '0px'
+                                    }}
+                                >
+                                    {fileSizeText ? fileSizeText : configStyles.File.fileSizeText} {maxSize}ՄԲ ( { fileExtensions.toString().split(',').join(', ') } )
+                                </p>
+                            </div>
+                        </> 
+                    }
+                </div>   
+
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: '0px',
+                        left: '0px',
+                        zIndex: '1', 
+                        width: '100%',
+                        height: '100%',
+                        padding: '10px',
+                        cursor: 'default',
+                        boxSizing: 'border-box',
+                        alignItems: 'flex-start',
+                        justifyContent: 'flex-end',
+                        borderRadius: radius ? radius : configStyles.File.radius,
+                        display: !multiple && !disabled && image && !error && isHover ? 'flex' : 'none',
+                        backgroundColor: hiddenBackgroundColor ? hiddenBackgroundColor : configStyles.File.hiddenBackgroundColor
+                    }}
+                    onClick={handleStopPropagation}
+                >
+                    <div
+                        style={{
+                            cursor: 'pointer'
+                        }}
+                        onClick={handleRemoveFile}
+                    >
+                        <SvgRemoveFile />
+                    </div>
+                </div>
+            </div>
+
+            {
+                error ? <span
+                    style={{
+                        marginTop: '6px',
+                        display: 'inline-block',
+                        color: errorColor ? errorColor : configStyles.File.errorColor,
+                        fontSize: errorSize ? errorSize : configStyles.File.errorSize
+                    }}
+                >{ error }</span> : ''
+            }
+
+
+            {
+                multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
+                    return <FileItem
+                        key={item.uuid}
+                        uuid={item.uuid}
+                        check={item.check}
+                        status={item.status}
+                        size={item.file.size}
+                        name={item.file.name}
+                        removeFile={removeFile}
+                        radius={radius ? radius : configStyles.File.radius}
+                        fileFormat={item.file.type.split('/')[1].toLowerCase()}
+                        progressColor={progressColor ? progressColor : configStyles.File.progressColor}
+                        listItemHeight={listItemHeight ? listItemHeight : configStyles.File.listItemHeight}
+                        listItemPadding={listItemPadding ? listItemPadding : configStyles.File.listItemPadding}
+                        progressFontSize={progressFontSize ? progressFontSize : configStyles.File.progressFontSize}
+                        listItemErrorSize={listItemErrorSize ? listItemErrorSize : configStyles.File.listItemErrorSize}
+                        listItemErrorColor={listItemErrorColor ? listItemErrorColor : configStyles.File.listItemErrorColor}
+                        progressTrackColor={progressTrackColor ? progressTrackColor : configStyles.File.progressTrackColor}
+                        progressFailedColor={progressFailedColor ? progressFailedColor : configStyles.File.progressFailedColor}
+                        progressSuccessColor={progressSuccessColor ? progressSuccessColor : configStyles.File.progressSuccessColor}
+                        progressLoadingColor={progressLoadingColor ? progressLoadingColor : configStyles.File.progressLoadingColor}
+                        listItemBackgroundColor={listItemBackgroundColor ? listItemBackgroundColor : configStyles.File.listItemBackgroundColor}
+                        listItemBackgroundErrorColor={listItemBackgroundErrorColor ? listItemBackgroundErrorColor : configStyles.File.listItemBackgroundErrorColor}
+                    />
+                })
+            }
+        </div>
+    );
+};
+
+NewFile.propTypes = {
+    or: PropTypes.string,
+    size: PropTypes.string,
+    label: PropTypes.string,
+    width: PropTypes.string,
+    color: PropTypes.string,
+    height: PropTypes.string,
+    disabled: PropTypes.bool,
+    radius: PropTypes.string,
+    border: PropTypes.string,
+    required: PropTypes.bool,
+    upload: PropTypes.string,
+    weight: PropTypes.number,
+    maxSize: PropTypes.number,
+    errorSize: PropTypes.string,
+    labelSize: PropTypes.string,
+    labelColor: PropTypes.string,
+    errorColor: PropTypes.string,
+    putFileHere: PropTypes.string,
+    borderColor: PropTypes.string,
+    uploadColor: PropTypes.string,
+    defaultData: PropTypes.object,
+    errorMessage: PropTypes.string,
+    fileSizeText: PropTypes.string,
+    progressColor: PropTypes.string,
+    deleteComponent: PropTypes.bool,
+    listItemHeight: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    change: PropTypes.func.isRequired,
+    listItemPadding: PropTypes.string,
+    progressFontSize: PropTypes.string,
+    borderHoverColor: PropTypes.string,
+    listItemErrorSize: PropTypes.string,
+    labelRequiredColor: PropTypes.string,
+    progressTrackColor: PropTypes.string,
+    fileAreaImageWidth: PropTypes.string,
+    listItemErrorColor: PropTypes.string,
+    removeFile: PropTypes.func.isRequired,
+    fileAreaImageHeight: PropTypes.string,
+    progressFailedColor: PropTypes.string,
+    progressSuccessColor: PropTypes.string,
+    progressLoadingColor: PropTypes.string,
+    hiddenBackgroundColor: PropTypes.string,
+    extentionsRowMarginTop: PropTypes.string,
+    listItemBackgroundColor: PropTypes.string,
+    listItemBackgroundErrorColor: PropTypes.string,
+    filesArray: PropTypes.arrayOf(PropTypes.object),
+    fileExtensions: PropTypes.arrayOf(PropTypes.string)
+};
+
+NewFile.defaultProps = {
+    maxSize: 50,
+    fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
+};