@xaypay/tui 0.0.71 → 0.0.72

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,53 @@ export const NewFile = ({
     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
+    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,44 +81,69 @@ 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: 'ֆայլի սխալ ֆորմատ'
+                            });
+                        }
+                    } else {
                         change({
+                            file: file[ix],
                             uuid: uuidv4(),
-                            file: file[0]
+                            check: 'առավելագույն ծավալ'
                         });
-                    } else {
-                        change({file});
+                    }
+                }
+            }
+            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('')
-                    setError('ֆայլի սխալ ֆորմատ');
+                    setImage(null);
+                    setError('առավելագույն ծավալ');
                 }
-            } else {
-                setImage('')
-                setError('առավելագույն ծավալ');
             }
-        } else {
-            // TODO:
-            if (!multiple || multiple && filesArray && filesArray.length === 0) {
-                setImage('');
+            if (file.length === 0) {
+                setImage(null);
                 setError('Ֆայլը ընտրված չէ');
             }
         }
@@ -112,6 +155,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 +182,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 +195,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 +212,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 +255,6 @@ export const NewFile = ({
                 }
             </div>
 
-
             <div
                 style={{
                     width: '100%',
@@ -216,7 +275,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 +287,7 @@ export const NewFile = ({
                     type='file'
                     ref={inpRef}
                     disabled={disabled}
+                    multiple={multiple}
                     onChange={handleChange}
                 />
 
@@ -246,11 +308,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 +332,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 +352,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 +402,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 +443,46 @@ 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,
+    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: 5,
+    maxSize: 50,
     fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };

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

@@ -23,8 +23,11 @@ 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({});
@@ -34,7 +37,7 @@ Default.args = {
   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/textarea/index.js

@@ -24,17 +24,21 @@ export const Textarea = ({
     boxSizing,
     maxLength,
     labelSize,
+    errorSize,
     labelColor,
+    errorColor,
     borderColor,
     labelWeight,
     placeholder,
     labelDisplay,
+    errorMesaage,
     backgroundColor,
     borderFocusColor,
     borderHoverColor,
     showCharacterCount,
     labelRequiredColor
 }) => {
+    const [error, setError] = useState('');
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
     const [innerValue, setInnerValue] = useState('');
@@ -63,10 +67,16 @@ export const Textarea = ({
         if (maxLength) {
             if (value.length > maxLength) {
                 onChange(value.substr(0, maxLength));
+                setError('Նիշերի քանակը գերազանցում է');
+            } else {
+                setError('');
             }
         } else {
             if (value.length > configStyles.TEXTAREA.maxLength) {
+                setError('Նիշերի քանակը գերազանցում է');
                 onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+            } else {
+                setError('');
             }
         }
     };
@@ -83,6 +93,14 @@ export const Textarea = ({
         setInnerValue(value);
     }, [value, onChange]);
 
+    useEffect(() => {
+        if (errorMesaage) {
+            setError(errorMesaage);
+        } else {
+            setError('');
+        }
+    }, [errorMesaage]);
+
     return (
         <div
             style={{
@@ -140,7 +158,8 @@ export const Textarea = ({
                     maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
                     boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
                     backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-                    borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
+                    borderColor: error ? errorColor ? errorColor : configStyles.TEXTAREA.errorColor :
+                                 isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
                                  isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
                                  borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
                     resize: resize ? resize : configStyles.TEXTAREA.resize,
@@ -153,6 +172,16 @@ export const Textarea = ({
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             ></textarea>
+            {
+                error ? <span
+                    style={{
+                        marginTop: '6px',
+                        display: 'inline-block',
+                        fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
+                        color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+                    }}
+                >{ error }</span> : ''
+            }
         </div>
     );
 };

package/src/stories/configuration.stories.mdx

@@ -519,4 +519,46 @@ import StackAlt from './assets/stackalt.svg';
   range: 'for example. 72',                             // for captcha range                 (add itself on each component)
   getRange: 'is must be function',                      // for captcha get current range     (add itself on each component)
 }
+```
+
+### NewFile
+``` 
+{
+  or: 'կամ',                                            // for file place text
+  weight: 400,                                          // for file place font weight
+  size: '12px',                                         // for file font size
+  radius: '6px',                                        // for file place border radius
+  width: '440px',                                       // for file width
+  height: '200px',                                      // for file choose place height
+  color: '#3C393E',                                     // for file place color
+  upload: 'Բեռնել',                                     // for file place text
+  labelSize: '16px',                                    // for file font size
+  border: '2px dashed',                                 // for file choose place border
+  errorColor: '#ee0000',                                // for file error message color
+  labelColor: '#4A4A4D',                                // for file color
+  errorColor: '#ee0000',                                // for file place error color
+  borderColor: '#D1D1D1',                               // for file choose place border color
+  listItemHeight: '70px',                               // for file list item height
+  uploadColor: '#0DA574',                               // for file place upload text color
+  progressColor: '#4A4A4D',                             // for file progress bar color
+  progressFontSize: '16px',                             // for file progress bar font size
+  listItemErrorSize: '16px',                            // for file multiple mode error font size
+  backgroundColor: '#F8F8F8',                           // for file choose place background color
+  listItemErrorColor: 'black',                          // for file multiple mode error color
+  borderHoverColor: '#00236A',                          // for file border color, when hover is happening
+  fileAreaImageHeight: 'auto',                          // for file place choosen image preview height
+  listItemPadding: '14px 20px',                         // for file list item padding
+  fileSizeText: 'Առավելագույնը',                        // for file place file size text
+  fileAreaImageWidth: '27.8rem',                        // for file place choosen image preview width
+  labelRequiredColor: '#ee0000',                        // for file label required color
+  progressTrackColor: '#E5E8E8',                        // for file item progress track background color
+  extentionsRowMarginTop: '40px',                       // for file extentions row margin top
+  progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
+  progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
+  progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+  listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+  putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
+  hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+  listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
+}
 ```