@xaypay/tui 0.0.70 → 0.0.71

package/src/components/input/index.js

@@ -64,7 +64,7 @@ export const Input = ({
     errorAnimationDuration,
     ...props
 }) => {
-    const phoneNumberRegex = /^\d{8}$/;
+    const phoneNumberRegex = /^\d+$/;
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const [innerValue, setInnerValue] = useState('');
@@ -100,33 +100,36 @@ export const Input = ({
         
         setInnerValue(currentValue);
         if (type === 'tel') {
-            if (currentValue.length > 8) {
-                setInnerValue(currentValue.substr(0, 8));
-            }
-
-            if (!phoneNumberRegex.test(currentValue) && telErrorMessage) {
-                setInnerErrorMessage(telErrorMessage);
+            if (!phoneNumberRegex.test(currentValue)) {
+                telErrorMessage && setInnerErrorMessage(telErrorMessage);
+                setInnerValue('');
             } else {
                 setInnerErrorMessage('');
+                if (currentValue.length > 8) {
+                    setInnerValue(currentValue.substr(0, 8));
+                    if (onChange) {
+                        onChange(currentValue.substr(0, 8));
+                    }
+                } else {
+                    setInnerValue(currentValue);
+                    if (onChange) {
+                        onChange(currentValue);
+                    }
+                }
             }
         } 
 
         if (maxLength && currentValue.length > maxLength && type !== 'tel') {
             setInnerValue(currentValue.substr(0, maxLength));
+            if (onChange) {
+                onChange(currentValue.substr(0, maxLength));
+            }
         }
 
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
-        }
-
-        if (onChange) {
-            onChange(currentValue);
-            if (type === 'tel' && currentValue.length > 8) {
-                onChange(currentValue.substr(0, 8));
-            }
-
-            if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-                onChange(currentValue.substr(0, maxLength));
+            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            if (onChange) {
+                onChange(currentValue);
             }
         }
     };
@@ -140,19 +143,27 @@ export const Input = ({
     };
 
     useEffect(() => {
+        if (errorMessage) {
+            setInnerErrorMessage(errorMessage);
+        } else {
+            setInnerErrorMessage('');
+        }
+
         if (value !== undefined && value !== null) {
             setInnerValue(value);
             if (type === 'tel') {
-                if (value.length > 8) {
-                    setInnerValue(value.substr(0, 8));
-                }
-
-                if (!phoneNumberRegex.test(value) && telErrorMessage) {
-                    setInnerErrorMessage(telErrorMessage);
+                if (!phoneNumberRegex.test(currentValue)) {
+                    telErrorMessage && setInnerErrorMessage(telErrorMessage);
+                    setInnerValue('');
                 } else {
                     setInnerErrorMessage('');
+                    if (value.length > 8) {
+                        setInnerValue(value.substr(0, 8));
+                    } else {
+                        setInnerValue(value);
+                    }
                 }
-            }
+            } 
 
             if (maxLength && value.length > maxLength && type !== 'tel') {
                 setInnerValue(value.substr(0, maxLength));
@@ -162,12 +173,6 @@ export const Input = ({
                 !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
             }
         }
-
-        if (errorMessage) {
-            setInnerErrorMessage(errorMessage);
-        } else {
-            setInnerErrorMessage('');
-        }
     }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
     
     return (

package/src/components/newFile/index.js

@@ -0,0 +1,463 @@
+import React, { useRef, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+
+import { compereConfigs } from './../../utils';
+
+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 = ({
+    size,
+    name,
+    color,
+    label,
+    width,
+    weight,
+    height,
+    radius,
+    change,
+    border,
+    maxSize,
+    disabled,
+    multiple,
+    required,
+    errorSize,
+    labelSize,
+    labelColor,
+    errorColor,
+    filesArray,
+    borderColor,
+    uploadColor,
+    defaultData,
+    errorMessage,
+    fileExtensions,
+    backgroundColor,
+    deleteComponent,
+    borderHoverColor,
+    progressTrackColor,
+    labelRequiredColor,
+    hiddenBackgroundColor,
+    extentionsRowMarginTop,
+    listItemBackgroundColor
+}) => {
+    const ref = useRef(null);
+    const inpRef = useRef(null);
+    const [error, setError] = useState('');
+    const [image, setImage] = useState('');
+    const [progress, setProgress] = useState(5);
+    const [isHover, setIsHover] = useState(false);
+    const [multipleFiles, setMultipleFiles] = useState([]);
+
+    const configStyles = compereConfigs();
+
+    const handleRemoveComponent = () => {
+        const node = ReactDOM.findDOMNode(ref.current);
+        const parent = node.parentNode;
+        parent.removeChild(node);
+    };
+
+    const handleRemoveFile = () => {
+        if (!multiple) {
+            setImage('');
+            onChange(null);
+        }
+    };
+
+    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) {
+                        change({
+                            uuid: uuidv4(),
+                            file: file[0]
+                        });
+                    } else {
+                        change({file});
+                        if (file[0].type === 'application/pdf') {
+                            setImage('pdf');
+                        } else {
+                            setImage(URL.createObjectURL(file[0]));
+                        }
+                    }
+                } else {
+                    setImage('')
+                    setError('ֆայլի սխալ ֆորմատ');
+                }
+            } else {
+                setImage('')
+                setError('առավելագույն ծավալ');
+            }
+        } else {
+            // TODO:
+            if (!multiple || multiple && filesArray && filesArray.length === 0) {
+                setImage('');
+                setError('Ֆայլը ընտրված չէ');
+            }
+        }
+    };
+
+    const handleClick = () => {
+        if (!image) {
+            inpRef.current.click();
+        }
+    };
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+
+    const handleStopPropagation = (e) => {
+        e.stopPropagation();
+    };
+
+    useEffect(() => {
+        if (!multiple && defaultData) {
+            if (defaultData.type && defaultData.type !== 'application/pdf') {
+                setImage(defaultData.url);
+            } else {
+                setImage('pdf');
+            }
+        }
+
+        if (multiple && !filesArray) {
+            alert('In multiple mode, you should add filesArray prop for drawing files');
+        }
+
+        if (filesArray) {
+            setMultipleFiles(filesArray);
+        }
+    }, [multiple, filesArray && filesArray.length, defaultData]);
+
+    useEffect(() => {
+        if (errorMessage) {
+            setError(errorMessage);
+        } else {
+            setError('');
+        }
+    }, [errorMessage]);
+
+    useEffect(() => {
+        if (!change) {
+            alert('Please add change prop on File component');                    
+        }
+    }, [change]);
+
+    console.log(multipleFiles, 'multipleFiles');
+
+    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
+                }}
+                onClick={handleClick}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <input
+                    hidden
+                    name={name}
+                    type='file'
+                    ref={inpRef}
+                    disabled={disabled}
+                    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' ?
+                                <PDF /> :
+                                <img
+                                    src={image}
+                                    style={{
+                                        maxHeight: '100%',
+                                    }}
+                                    alt='file preview'
+                                />
+                        : <>
+                            <div>
+                                <SvgUpload />
+                            </div>
+
+                            <div>
+                                <p
+                                    style={{
+                                        margin: '0px'
+                                    }}
+                                >
+                                    Տեղադրել ֆայլը այստեղ
+                                    <br />
+                                    կամ <span
+                                        style={{
+                                            color: uploadColor ? uploadColor : configStyles.File.uploadColor
+                                        }}
+                                    >Բեռնել</span> 
+                                </p>
+                            </div>
+
+                            <div
+                                style={{
+                                    marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.File.extentionsRowMarginTop
+                                }}
+                            >
+                                <p
+                                    style={{
+                                        margin: '0px'
+                                    }}
+                                >
+                                    Առավելագույնը {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 && 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>
+                    )
+                })
+            }
+
+        </div>
+    );
+};
+
+NewFile.propTypes = {
+    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,
+    weight: PropTypes.number,
+    maxSize: PropTypes.number,
+    errorSize: PropTypes.string,
+    labelSize: PropTypes.string,
+    labelColor: PropTypes.string,
+    errorColor: PropTypes.string,
+    borderColor: PropTypes.string,
+    uploadColor: PropTypes.string,
+    defaultData: PropTypes.object,
+    errorMessage: PropTypes.string,
+    deleteComponent: PropTypes.bool,
+    backgroundColor: PropTypes.string,
+    change: PropTypes.func.isRequired,
+    borderHoverColor: PropTypes.string,
+    labelRequiredColor: PropTypes.string,
+    progressTrackColor: PropTypes.string,
+    hiddenBackgroundColor: PropTypes.string,
+    extentionsRowMarginTop: PropTypes.string,
+    listItemBackgroundColor: PropTypes.string,
+    filesArray: PropTypes.arrayOf(PropTypes.object),
+    fileExtensions: PropTypes.arrayOf(PropTypes.string)
+};
+
+NewFile.defaultProps = {
+    maxSize: 5,
+    fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
+};

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

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { NewFile } from './index';
+
+export default {
+  component: NewFile,
+  title: 'Components/NewFile',
+  argTypes: {
+    change: {
+      control: 'function'
+    }
+  }
+};
+
+const Template = (args) => {
+  const [files, setFiles] = useState([]);
+
+  const handleChange = (file) => {
+    setFiles(prev => {
+      return [
+        ...prev,
+        file
+      ]
+    });
+  };
+
+
+  return <NewFile change={handleChange} filesArray={files} {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'File component',
+  deleteComponent: true,
+  disabled: false,
+  defaultData: {
+    url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
+    type: "image/png",
+  },
+  multiple: true,
+  name: 'sss'
+};

package/src/components/pagination/index.js

@@ -6,7 +6,7 @@ import { PaginationRange, Dots } from "./paginationRange";
 import Icon from "../icon/Icon";
 
 import DotsIcon from './../../components/icon/Dots';
-import SvgNextArrow from './../../components/icon/NextArrow';
+import SvgNextarrow from './../../components/icon/Nextarrow';
 
 export const Pagination = ({
     onChange,
@@ -78,7 +78,7 @@ export const Pagination = ({
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
             >
-                <SvgNextArrow />
+                <SvgNextarrow />
             </button>
 
             {paginationRange.map((pageNumber, id) => {
@@ -115,7 +115,7 @@ export const Pagination = ({
                                             transform: 'rotate(180deg)'
                                         }}
                                     >
-                                        <SvgNextArrow />
+                                        <SvgNextarrow />
                                     </span>
                                 </>
                             ) : (
@@ -132,7 +132,7 @@ export const Pagination = ({
                                             `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
                                         }
                                     >
-                                        <SvgNextArrow />
+                                        <SvgNextarrow />
                                     </span>
                                 </>
                             )}
@@ -162,7 +162,7 @@ export const Pagination = ({
                 className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
             >
-                <SvgNextArrow />
+                <SvgNextarrow />
             </button>
         </ul>
     );