@xaypay/tui 0.0.69 → 0.0.71

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>
     );

package/src/components/textarea/index.js

@@ -32,10 +32,12 @@ export const Textarea = ({
     backgroundColor,
     borderFocusColor,
     borderHoverColor,
+    showCharacterCount,
     labelRequiredColor
 }) => {
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
+    const [innerValue, setInnerValue] = useState('');
 
     const configStyles = compereConfigs();
 
@@ -55,6 +57,20 @@ export const Textarea = ({
         setIsFocus(false);
     };
 
+    const handleChange = (e) => {
+        const value = e.target.value;
+        onChange(value);
+        if (maxLength) {
+            if (value.length > maxLength) {
+                onChange(value.substr(0, maxLength));
+            }
+        } else {
+            if (value.length > configStyles.TEXTAREA.maxLength) {
+                onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+            }
+        }
+    };
+
     useEffect(() => {
         if (value === undefined) {
             alert('Please add value prop on Textarea component');
@@ -63,34 +79,57 @@ export const Textarea = ({
         if (!onChange) {
             alert('Please add onChange function on Textarea component');
         }
+
+        setInnerValue(value);
     }, [value, onChange]);
 
     return (
-        <>
-            {
-                label
-                ? <label
-                    style={{
-                        color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
-                        fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
-                        display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
-                        fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
-                    }}
-                  >
-                    {label}
-                    {
-                        required &&
-                        <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
-                    }
-                  </label>
-                : ''
-            }
+        <div
+            style={{
+                width: width ? width : configStyles.TEXTAREA.width,
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: label ? 'space-between' : 'flex-end'
+                }}
+            >
+                {
+                    label
+                    ? <label
+                        style={{
+                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                            display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
+                            fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
+                        }}
+                    >
+                        {label}
+                        {
+                            required &&
+                            <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
+                        }
+                    </label>
+                    : ''
+                }
+
+                {
+                    showCharacterCount && maxLength && <span
+                        style={{
+                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        }}
+                    >{ maxLength - value.length } նիշ</span>
+                }
+            </div>
             <textarea
                 style={{
+                    width: '100%',
                     outline: 'none',
                     overflow: 'auto',
                     fontSize: size ? size : configStyles.TEXTAREA.size,
-                    width: width ? width : configStyles.TEXTAREA.width,
                     height: height ? height : configStyles.TEXTAREA.height,
                     border: border ? border : configStyles.TEXTAREA.border,
                     padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -106,19 +145,15 @@ export const Textarea = ({
                                  borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
                     resize: resize ? resize : configStyles.TEXTAREA.resize,
                 }}
+                value={innerValue}
                 onBlur={handleBlur}
-                onChange={onChange}
                 onFocus={handleFocus}
+                onChange={handleChange}
                 placeholder={placeholder}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
-                value={
-                    maxLength ? value.length > maxLength ? value.substr(0, maxLength) : value :
-                    configStyles.TEXTAREA.maxLength ? value.length > configStyles.TEXTAREA.maxLength ? value.substr(0, configStyles.TEXTAREA.maxLength) : value :
-                    value
-                }
             ></textarea>
-        </>
+        </div>
     );
 };
 
@@ -145,6 +180,7 @@ Textarea.propTypes = {
     placeholder: PropTypes.string,
     labelDisplay: PropTypes.string,
     backgroundColor: PropTypes.string,
+    showCharacterCount: PropTypes.bool,
     value: PropTypes.string.isRequired,
     borderFocusColor: PropTypes.string,
     borderHoverColor: PropTypes.string,