@xaypay/tui 0.0.119 → 0.0.121

package/src/components/newFile/index.js

@@ -1,731 +0,0 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react'
-import PropTypes from 'prop-types'
-import { v4 as uuidv4 } from 'uuid'
-import classnames from 'classnames'
-
-import FileItem from './fileItem'
-
-import { compereConfigs } from './../../utils'
-import { Button } from './../button'
-
-import SvgPdf from './../icon/PDF'
-import SvgHeic from './../icon/Heic'
-import SvgUpload from './../icon/Upload'
-import SvgRequired from './../icon/Required'
-import SvgRemoveFile from './../icon/RemoveFile'
-import SvgDeleteComponent from './../icon/DeleteComponent'
-
-export const NewFile = ({
-    or,
-    size,
-    name,
-    color,
-    label,
-    weight,
-    height,
-    radius,
-    change,
-    border,
-    upload,
-    preview,
-    maxSize,
-    maxWidth,
-    disabled,
-    multiple,
-    required,
-    className,
-    errorSize,
-    labelSize,
-    removeFile,
-    labelColor,
-    errorColor,
-    filesArray,
-    componentId,
-    putFileHere,
-    borderColor,
-    uploadColor,
-    defaultData,
-    formatError,
-    errorMessage,
-    fileSizeText,
-    maxSizeError,
-    progressColor,
-    noChoosenFile,
-
-    uploadBtnFont,
-    uploadBtnSize,
-    uploadBtnLabel,
-    uploadBtnColor,
-    uploadBtnHeight,
-    uploadBtnBackgroundColor,
-
-    fileExtensions,
-    listItemHeight,
-    backgroundColor,
-    deleteComponent,
-    removeComponent,
-    listItemPadding,
-    progressFontSize,
-    borderHoverColor,
-    maxCHoosenLength,
-    listItemErrorSize,
-    progressTrackColor,
-    fileAreaImageWidth,
-    listItemErrorColor,
-    timeForRemoveError,
-    progressFailedColor,
-    fileAreaImageHeight,
-    progressSuccessColor,
-    progressLoadingColor,
-    hiddenBackgroundColor,
-    maxCHoosenLengthError,
-    extentionsRowMarginTop,
-    listItemBackgroundColor,
-    listItemBackgroundErrorColor,
-    maxCHoosenLengthErrorHideTime,
-}) => {
-    const ref = useRef(null)
-    const inpRef = useRef(null)
-    const configStyles = compereConfigs()
-    const memoizedItems = useMemo(() => filesArray, [filesArray])
-    const classProps = classnames(className ? className : configStyles.FILE.className)
-
-    const [error, setError] = useState('')
-    const [isHover, setIsHover] = useState(false)
-    const [singleFile, setSingleFile] = useState(null)
-    const [choosenFileCount, setChoosenFileCount] = useState(0)
-    const [image, setImage] = useState(
-        !multiple ? (defaultData ? (defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf') : null) : null
-    )
-
-    const handleRemoveComponent = () => {
-        if (!multiple) {
-            removeFile && removeFile(singleFile)
-        } else {
-            removeFile && removeFile(filesArray)
-        }
-        removeComponent(componentId)
-    }
-
-    const handleRemoveFile = () => {
-        setImage(null)
-        setSingleFile(null)
-        removeFile && removeFile(singleFile)
-    }
-
-    const handleUploadFiles = (file) => {
-        if (maxCHoosenLength && choosenFileCount > 0) {
-            if (file.length > choosenFileCount || file.length + memoizedItems.length > choosenFileCount) {
-                setError(
-                    maxCHoosenLengthError
-                        ? maxCHoosenLengthError
-                        : `Դիմումին կարող եք կցել առավելագույնը ${choosenFileCount} ֆայլ`
-                )
-                const clearFunc = () => {
-                    clearTimeout(time)
-                }
-                const time = setTimeout(
-                    () => {
-                        setError('')
-                        clearFunc()
-                    },
-                    maxCHoosenLengthErrorHideTime && typeof maxCHoosenLengthErrorHideTime === 'number'
-                        ? Math.round(maxCHoosenLengthErrorHideTime)
-                        : 3000
-                )
-            } else {
-                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]) ||
-                                (fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif')
-                            ) {
-                                change({
-                                    id: '',
-                                    check: '',
-                                    status: '',
-                                    file: file[ix],
-                                    uuid: uuidv4(),
-                                })
-                            } else {
-                                change({
-                                    file: file[ix],
-                                    uuid: uuidv4(),
-                                    check: formatError,
-                                })
-                            }
-                        } else {
-                            change({
-                                file: file[ix],
-                                uuid: uuidv4(),
-                                check: maxSizeError,
-                            })
-                        }
-                    }
-                }
-            }
-        } else {
-            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]) ||
-                            (fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif')
-                        ) {
-                            change({
-                                id: '',
-                                check: '',
-                                status: '',
-                                file: file[ix],
-                                uuid: uuidv4(),
-                            })
-                        } else {
-                            change({
-                                file: file[ix],
-                                uuid: uuidv4(),
-                                check: formatError,
-                            })
-                        }
-                    } else {
-                        change({
-                            file: file[ix],
-                            uuid: uuidv4(),
-                            check: maxSizeError,
-                        })
-                    }
-                }
-            }
-        }
-    }
-
-    const handleChange = (e) => {
-        const file = e.target.files
-
-        if (multiple) {
-            setError('')
-            setImage(null)
-            handleUploadFiles(file)
-
-            if (file.length === 0 && memoizedItems.length === 0) {
-                setError(noChoosenFile)
-            }
-        } else {
-            if (file[0]) {
-                if (file[0].size <= maxSize * Math.pow(2, 20)) {
-                    if (
-                        fileExtensions.includes(file[0].type.split('/')[1]) ||
-                        (fileExtensions.includes('heic') &&
-                            (file[0].type === 'image/heif' || file[0].type === 'image/heic'))
-                    ) {
-                        setError('')
-                        change(file)
-                        setSingleFile(file)
-                        if (file[0].type === 'application/pdf') {
-                            setImage('pdf')
-                        } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic') {
-                            setImage('heic')
-                        } else {
-                            setImage(URL.createObjectURL(file[0]))
-                        }
-                    } else {
-                        setImage(null)
-                        setError(formatError)
-                    }
-                } else {
-                    setImage(null)
-                    setError(maxSizeError)
-                }
-            }
-            if (file.length === 0) {
-                setImage(null)
-                setError(noChoosenFile)
-            }
-        }
-    }
-
-    const handleClick = () => {
-        inpRef.current.files = null
-        inpRef.current.value = null
-        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)
-        }
-
-        if (multiple && !removeFile) {
-            alert('Please add removeFile prop on NewFile component, it is a require in multiple mode')
-        }
-
-        if (maxCHoosenLength) {
-            if (typeof maxCHoosenLength !== 'number') {
-                alert('maxCHoosenLength prop must be a number, please check it!')
-            } else {
-                if (maxCHoosenLength <= 0) {
-                    setChoosenFileCount(1)
-                } else {
-                    setChoosenFileCount(Math.round(maxCHoosenLength))
-                }
-            }
-        }
-    }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength])
-
-    useEffect(() => {
-        if (deleteComponent && !removeComponent) {
-            alert(
-                'Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true'
-            )
-        }
-    }, [deleteComponent])
-
-    useEffect(() => {
-        if (errorMessage) {
-            setError(errorMessage)
-        } else {
-            setError('')
-        }
-    }, [errorMessage])
-
-    useEffect(() => {
-        if (!change) {
-            alert('Please add change prop on File component')
-        }
-    }, [change])
-
-    return (
-        <div
-            ref={ref}
-            style={{
-                width: '100%',
-                maxWidth: maxWidth ? maxWidth : configStyles.FILE.maxWidth,
-            }}
-            className={classProps}
-        >
-            <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>
-                                <SvgRequired />
-                            </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 && preview ? (
-                        image === 'pdf' ? (
-                            <SvgPdf />
-                        ) : image === 'heif' || image === 'heic' ? (
-                            <SvgHeic />
-                        ) : (
-                            <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"
-                            />
-                        )
-                    ) : 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
-                                style={{
-                                    width: '100%',
-                                    padding: '5px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    boxSizing: 'border-box',
-                                    justifyContent: 'space-between',
-                                }}
-                            >
-                                <Button
-                                    contentWidth
-                                    onClick={(_) => _}
-                                    font={uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont}
-                                    size={uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize}
-                                    label={uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel}
-                                    color={uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor}
-                                    height={uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight}
-                                    hoverColor={uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor}
-                                    backgroundColor={
-                                        uploadBtnBackgroundColor
-                                            ? uploadBtnBackgroundColor
-                                            : configStyles.FILE.uploadBtnBackgroundColor
-                                    }
-                                    backgroundHoverColor={
-                                        uploadBtnBackgroundColor
-                                            ? uploadBtnBackgroundColor
-                                            : configStyles.FILE.uploadBtnBackgroundColor
-                                    }
-                                />
-                                <p
-                                    style={{
-                                        margin: '0px',
-                                        marginLeft: '5px',
-                                        overflow: 'hidden',
-                                        whiteSpace: 'nowrap',
-                                        textOverflow: 'ellipsis',
-                                    }}
-                                >
-                                    {singleFile ? (
-                                        singleFile[0].name
-                                    ) : (
-                                        <span>
-                                            {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize} ՄԲ
-                                            ( {fileExtensions.toString().split(',').join(', ')} )
-                                        </span>
-                                    )}
-                                </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}
-                            timeForRemoveError={timeForRemoveError}
-                            removeFile={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,
-    preview: PropTypes.bool,
-    label: 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,
-    maxWidth: PropTypes.string,
-    removeFile: PropTypes.func,
-    className: PropTypes.string,
-    errorSize: PropTypes.string,
-    labelSize: PropTypes.string,
-    labelColor: PropTypes.string,
-    errorColor: PropTypes.string,
-    formatError: PropTypes.string,
-    putFileHere: PropTypes.string,
-    borderColor: PropTypes.string,
-    uploadColor: PropTypes.string,
-    defaultData: PropTypes.object,
-    componentId: PropTypes.number,
-    maxSizeError: PropTypes.string,
-    errorMessage: PropTypes.string,
-    fileSizeText: PropTypes.string,
-    noChoosenFile: PropTypes.string,
-    progressColor: PropTypes.string,
-    deleteComponent: PropTypes.bool,
-    removeComponent: PropTypes.func,
-
-    uploadBtnFont: PropTypes.string,
-    uploadBtnSize: PropTypes.string,
-    uploadBtnLabel: PropTypes.string,
-    uploadBtnColor: PropTypes.string,
-    uploadBtnHeight: PropTypes.string,
-    uploadBtnBackgroundColor: PropTypes.string,
-
-    listItemHeight: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    change: PropTypes.func.isRequired,
-    listItemPadding: PropTypes.string,
-    maxCHoosenLength: PropTypes.number,
-    progressFontSize: PropTypes.string,
-    borderHoverColor: PropTypes.string,
-    listItemErrorSize: PropTypes.string,
-    timeForRemoveError: PropTypes.number,
-    progressTrackColor: PropTypes.string,
-    fileAreaImageWidth: PropTypes.string,
-    listItemErrorColor: PropTypes.string,
-    fileAreaImageHeight: PropTypes.string,
-    progressFailedColor: PropTypes.string,
-    progressSuccessColor: PropTypes.string,
-    progressLoadingColor: PropTypes.string,
-    hiddenBackgroundColor: PropTypes.string,
-    maxCHoosenLengthError: PropTypes.string,
-    extentionsRowMarginTop: PropTypes.string,
-    listItemBackgroundColor: PropTypes.string,
-    listItemBackgroundErrorColor: PropTypes.string,
-    maxCHoosenLengthErrorHideTime: PropTypes.number,
-    filesArray: PropTypes.arrayOf(PropTypes.object),
-    fileExtensions: PropTypes.arrayOf(PropTypes.string),
-}
-
-NewFile.defaultProps = {
-    maxSize: 10,
-    preview: true,
-    timeForRemoveError: 5000,
-    fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic'],
-}