@xaypay/tui 0.0.71 → 0.0.73

package/src/components/newFile/index.js

@@ -1,18 +1,19 @@
-import React, { useRef, useState, useEffect } from 'react';
+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 SvgListItemPdf from './../icon/ListItemPdf';
-import SvgListItemJpg from './../icon/ListItemJpg';
-import SvgListItemDelete from './../icon/ListItemDelete';
 import SvgDeleteComponent from './../icon/DeleteComponent';
 
 export const NewFile = ({
+    or,
     size,
     name,
     color,
@@ -23,36 +24,56 @@ export const NewFile = ({
     radius,
     change,
     border,
+    upload,
     maxSize,
     disabled,
     multiple,
     required,
     errorSize,
     labelSize,
+    removeFile,
     labelColor,
     errorColor,
     filesArray,
+    putFileHere,
     borderColor,
     uploadColor,
     defaultData,
+    formatError,
     errorMessage,
+    fileSizeText,
+    maxSizeError,
+    progressColor,
+    noChoosenFile,
     fileExtensions,
+    listItemHeight,
     backgroundColor,
     deleteComponent,
+    listItemPadding,
+    progressFontSize,
     borderHoverColor,
+    listItemErrorSize,
     progressTrackColor,
+    fileAreaImageWidth,
+    listItemErrorColor,
     labelRequiredColor,
+    progressFailedColor,
+    fileAreaImageHeight,
+    progressSuccessColor,
+    progressLoadingColor,
     hiddenBackgroundColor,
     extentionsRowMarginTop,
-    listItemBackgroundColor
+    listItemBackgroundColor,
+    listItemBackgroundErrorColor
 }) => {
     const ref = useRef(null);
     const inpRef = useRef(null);
+    const memoizedItems = useMemo(() => filesArray, [filesArray]);
+
     const [error, setError] = useState('');
-    const [image, setImage] = useState('');
-    const [progress, setProgress] = useState(5);
     const [isHover, setIsHover] = useState(false);
-    const [multipleFiles, setMultipleFiles] = useState([]);
+    const [singleFile, setSingleFile] = useState(null);
+    const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
 
     const configStyles = compereConfigs();
 
@@ -63,45 +84,70 @@ export const NewFile = ({
     };
 
     const handleRemoveFile = () => {
-        if (!multiple) {
-            setImage('');
-            onChange(null);
-        }
+        setImage(null);
+        removeFile(singleFile);
     };
 
     const handleChange = (e) => {
         const file = e.target.files;
 
-        if (file[0]) {
-            if (file[0].size <= maxSize * Math.pow(2, 20)) {
-                if (fileExtensions.includes(file[0].type.split('/')[1])) {
-                    setError('');
-                    if (multiple) {
+        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: formatError
+                            });
+                        }
+                    } else {
                         change({
+                            file: file[ix],
                             uuid: uuidv4(),
-                            file: file[0]
+                            check: maxSizeError
                         });
-                    } else {
-                        change({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])) {
+                        setError('');
+                        change(file);
+                        setSingleFile(file);
                         if (file[0].type === 'application/pdf') {
                             setImage('pdf');
                         } else {
                             setImage(URL.createObjectURL(file[0]));
                         }
+                    } else {
+                        setImage(null);
+                        setError(formatError);
                     }
                 } else {
-                    setImage('')
-                    setError('ֆայլի սխալ ֆորմատ');
+                    setImage(null);
+                    setError(maxSizeError);
                 }
-            } else {
-                setImage('')
-                setError('առավելագույն ծավալ');
             }
-        } else {
-            // TODO:
-            if (!multiple || multiple && filesArray && filesArray.length === 0) {
-                setImage('');
-                setError('Ֆայլը ընտրված չէ');
+            if (file.length === 0) {
+                setImage(null);
+                setError(noChoosenFile);
             }
         }
     };
@@ -112,6 +158,19 @@ export const NewFile = ({
         }
     };
 
+    const handleDrop = (e) => {
+        if (!disabled) {
+            e.preventDefault();
+            handleChange({target: { files: e.dataTransfer.files }});
+        }
+    };
+
+    const handleDragOver = (e) => {
+        if (!disabled) {
+            e.preventDefault();
+        }
+    };
+
     const handleMouseEnter = () => {
         setIsHover(true);
     };
@@ -126,10 +185,12 @@ export const NewFile = ({
 
     useEffect(() => {
         if (!multiple && defaultData) {
-            if (defaultData.type && defaultData.type !== 'application/pdf') {
-                setImage(defaultData.url);
-            } else {
-                setImage('pdf');
+            if (!defaultData.type) {
+                alert('Please add type in defaultData prop');
+            }
+
+            if (!defaultData.url) {
+                alert('Please add url in defaultData prop');
             }
         }
 
@@ -137,8 +198,8 @@ export const NewFile = ({
             alert('In multiple mode, you should add filesArray prop for drawing files');
         }
 
-        if (filesArray) {
-            setMultipleFiles(filesArray);
+        if (multiple) {
+            setSingleFile(null);
         }
     }, [multiple, filesArray && filesArray.length, defaultData]);
 
@@ -154,15 +215,17 @@ export const NewFile = ({
         if (!change) {
             alert('Please add change prop on File component');                    
         }
-    }, [change]);
 
-    console.log(multipleFiles, 'multipleFiles');
+        if (!removeFile) {
+            alert('Please add removeFile prop on File component');                    
+        }
+    }, [change, removeFile]);
 
     return (
         <div
             ref={ref}
             style={{
-                width: width ? width : configStyles.File.width,
+                width: width ? width : configStyles.File.width
             }}
         >
             <div
@@ -195,7 +258,6 @@ export const NewFile = ({
                 }
             </div>
 
-
             <div
                 style={{
                     width: '100%',
@@ -216,7 +278,9 @@ export const NewFile = ({
                             isHover ? borderHoverColor ? borderHoverColor : configStyles.File.borderHoverColor :
                             borderColor ? borderColor : configStyles.File.borderColor
                 }}
+                onDrop={handleDrop}
                 onClick={handleClick}
+                onDragOver={handleDragOver}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             >
@@ -226,6 +290,7 @@ export const NewFile = ({
                     type='file'
                     ref={inpRef}
                     disabled={disabled}
+                    multiple={multiple}
                     onChange={handleChange}
                 />
 
@@ -246,11 +311,16 @@ export const NewFile = ({
                     {
                         !multiple && image ?
                             image === 'pdf' ?
-                                <PDF /> :
+                                <SvgPdf /> :
                                 <img
                                     src={image}
                                     style={{
-                                        maxHeight: '100%',
+                                        display: 'block',
+                                        maxWidth: '100%',
+                                        maxHeight: '95%',
+                                        objectFit: 'contain',
+                                        width: fileAreaImageWidth ? fileAreaImageWidth : configStyles.File.fileAreaImageWidth,
+                                        height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.File.fileAreaImageHeight,
                                     }}
                                     alt='file preview'
                                 />
@@ -265,13 +335,13 @@ export const NewFile = ({
                                         margin: '0px'
                                     }}
                                 >
-                                    Տեղադրել ֆայլը այստեղ
+                                    {putFileHere ? putFileHere : configStyles.File.putFileHere}
                                     <br />
-                                    կամ <span
+                                    {or ? or : configStyles.File.or} <span
                                         style={{
                                             color: uploadColor ? uploadColor : configStyles.File.uploadColor
                                         }}
-                                    >Բեռնել</span> 
+                                    >{upload ? upload : configStyles.File.upload}</span>
                                 </p>
                             </div>
 
@@ -285,15 +355,13 @@ export const NewFile = ({
                                         margin: '0px'
                                     }}
                                 >
-                                    Առավելագույնը {maxSize}ՄԲ ( { fileExtensions.toString().split(',').join(', ') } )
+                                    {fileSizeText ? fileSizeText : configStyles.File.fileSizeText} {maxSize}ՄԲ ( { fileExtensions.toString().split(',').join(', ') } )
                                 </p>
                             </div>
                         </> 
                     }
                 </div>   
 
-
-
                 <div
                     style={{
                         position: 'absolute',
@@ -337,94 +405,38 @@ export const NewFile = ({
 
 
             {
-                multiple && multipleFiles && multipleFiles.length > 0 && multipleFiles.map((item, index) => {
-                    return (
-                        <div
-                            key={`${item.file.name}_${index}`}
-                            style={{
-                                display: 'flex',
-                                width: '100%',
-                                height: '70px',
-                                marginTop: '6px',
-                                alignItems: 'center',
-                                padding: '14px 20px',
-                                boxSizing: 'border-box',
-                                justifyContent: 'space-between',
-                                borderRadius: radius ? radius : configStyles.File.radius,
-                                backgroundColor: listItemBackgroundColor ? listItemBackgroundColor : configStyles.File.listItemBackgroundColor
-                            }}
-                        >
-                            <div
-                                style={{
-                                    width: '32px'
-                                }}
-                            >
-                                {
-                                    item.file.type.split('/')[1].toLowerCase() === 'pdf' ? <SvgListItemPdf /> :
-                                    item.file.type.split('/')[1].toLowerCase() === 'jpeg' ? <SvgListItemJpg /> : ''
-                                }
-                            </div>
-
-
-                            <div
-                                style={{
-                                    position: 'relative',
-                                    display: 'flex',
-                                    height: '40px',
-                                    margin: '0px 14px',
-                                    alignItems: 'flex-end',
-                                    width: 'calc(100% - 82px)',
-                                }}
-                            >
-
-                                <div>
-                                    <p className='new' >{item.file.name}</p>
-                                </div>
-
-                                <div
-                                    style={{
-                                        position: 'absolute',
-                                        left: '0px',
-                                        bottom: '5px',
-                                        width: '100%',
-                                        height: '4px',
-                                        borderRadius: '10px',
-                                        backgroundColor: progressTrackColor ? progressTrackColor : configStyles.File.progressTrackColor
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            width: progress + '%',
-                                            height: '100%',
-                                            borderRadius: '10px',
-                                            backgroundColor: 'green'
-                                        }}
-                                    >
-
-                                    </div>
-                                </div>
-
-                            </div>
-
-
-                            <div
-                                style={{
-                                    width: '22px',
-                                    cursor: 'pointer'
-                                }}
-                            >
-                                <SvgListItemDelete />
-                            </div>
-                        </div>
-                    )
+                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,
@@ -434,30 +446,49 @@ NewFile.propTypes = {
     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,
+    formatError: PropTypes.string,
+    putFileHere: PropTypes.string,
     borderColor: PropTypes.string,
     uploadColor: PropTypes.string,
     defaultData: PropTypes.object,
+    maxSizeError: PropTypes.string,
     errorMessage: PropTypes.string,
+    fileSizeText: PropTypes.string,
+    noChoosenFile: 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: 5,
+    maxSize: 50,
     fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };

package/src/components/newFile/newFile.stories.js

@@ -23,18 +23,21 @@ const Template = (args) => {
     });
   };
 
+  const handleRemove = (id) => {
+    setFiles(prevItems => prevItems.filter(item => item.uuid !== id));
+  };
 
-  return <NewFile change={handleChange} filesArray={files} {...args} />;
+  return <NewFile change={handleChange} filesArray={files} removeFile={handleRemove} {...args} />;
 };
 
 export const Default = Template.bind({});
 Default.args = {
   label: 'File component',
-  deleteComponent: true,
+  deleteComponent: false,
   disabled: false,
   defaultData: {
     url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
-    type: "image/png",
+    type: 'image/png',
   },
   multiple: true,
   name: 'sss'

package/src/components/pagination/index.js

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./pagination.module.css";
 import { PaginationRange, Dots } from "./paginationRange";
-import Icon from "../icon/Icon";
 
 import DotsIcon from './../../components/icon/Dots';
 import SvgNextarrow from './../../components/icon/Nextarrow';
 
 export const Pagination = ({
+    goTo,
     onChange,
     totalCount,
     siblingCount,
@@ -16,6 +16,8 @@ export const Pagination = ({
     offset,
     className,
 }) => {
+  const [inpVal, setInpVal] = useState('');
+  const [error, setError] = useState(false);
   const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
@@ -67,6 +69,43 @@ export const Pagination = ({
             : onPageChange(currentPageNumber - 4);
     };
 
+    const handleChangeInput = (e) => {
+        setError(false);
+        if (e.target.value.trim() !== '') {
+            const val = parseInt(e.target.value);
+            if (Number.isInteger(val)) {
+                setInpVal(val);
+            } else {
+                setInpVal('');
+            }
+        } else {
+            setInpVal('');
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        const forbiddenKeys = ["e", ".", "+", "-"];
+        if (forbiddenKeys.includes(e.key)) {
+            e.preventDefault();
+        }
+
+        if (e.keyCode === 13) {
+            if (inpVal === '') {
+                setError(true);
+            } else {
+                if (inpVal <= 1) {
+                    setInpVal(1);
+                    onPageChange(1);
+                } else if (inpVal >= (totalCount / offset)) {
+                    setInpVal(Math.ceil(totalCount / offset));
+                    onPageChange(Math.ceil(totalCount / offset));
+                } else {
+                    onPageChange(inpVal);
+                }
+            }
+        }
+    };
+
     let lastPage = paginationRange[paginationRange.length - 1];
     return (
         <ul className={classProps}>
@@ -74,9 +113,9 @@ export const Pagination = ({
                 style={{
                     transform: 'rotate(180deg)'
                 }}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
             >
                 <SvgNextarrow />
             </button>
@@ -157,18 +196,50 @@ export const Pagination = ({
                     </li>
                 );
             })}
+
             <button
                 onClick={onNext}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
             >
                 <SvgNextarrow />
             </button>
+
+            {
+                goTo && <div>
+                    <input
+                        onKeyDown={handleKeyDown}
+                        onInput={handleChangeInput}
+                        type='number'
+                        style={{
+                            width: '53px',
+                            height: '30px',
+                            outline: 'none',
+                            color: '#3C393E',
+                            fontSize: '13px',
+                            margin: '0px 6px',
+                            fontWeight: '500',
+                            textAlign: 'center',
+                            border: '1px solid',
+                            borderRadius: '6px',
+                            borderColor: error ? 'red' : '#00236a'
+                        }}
+                        value={inpVal}
+                    />
+                    <span
+                        style={{
+                            color: '#3C393E',
+                            fontSize: '13px'
+                        }}
+                    >Էջ</span>
+                </div>
+            }
         </ul>
     );
 };
 
 Pagination.propTypes = {
+    goTo: PropTypes.bool,
     offset: PropTypes.number,
     totalCount: PropTypes.number,
     className: PropTypes.string,

package/src/components/pagination/pagination.module.css

@@ -78,4 +78,16 @@ i {
     font-size: 12px;
     line-height: 12px;
     color: #3C393E;
-}
+}
+
+/* Works for Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}