@xaypay/tui 0.0.112 → 0.0.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/icon/Zoom.js

@@ -0,0 +1,21 @@
+import * as React from 'react'
+const SvgZoom = ({ title, titleId, ...props }) => (
+    <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 14C3 7.925 7.925 3 14 3s11 4.925 11 11-4.925 11-11 11S3 20.075 3 14ZM14 1C6.82 1 1 6.82 1 14s5.82 13 13 13c3.23 0 6.185-1.178 8.458-3.128l6.835 6.835a1 1 0 0 0 1.414-1.414l-6.835-6.835A12.949 12.949 0 0 0 27 14c0-7.18-5.82-13-13-13Zm1 9a1 1 0 1 0-2 0v3h-3a1 1 0 1 0 0 2h3v3a1 1 0 1 0 2 0v-3h3a1 1 0 1 0 0-2h-3v-3Z"
+            fill="#fff"
+        />
+    </svg>
+)
+export default SvgZoom

package/src/components/input/index.js

@@ -52,6 +52,7 @@ export const Input = ({
     maxNumSize,
     labelColor,
     errorColor,
+    withoutDot,
     borderRight,
     placeholder,
     errorZindex,
@@ -215,6 +216,17 @@ export const Input = ({
                     change(newStr)
                 }
             }
+
+            if (withoutDot && !/^\d+$/.test(currentValue)) {
+                const newStr = currentValue.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+                    return b + c.replace(/\./g, '')
+                })
+                setInnerValue(newStr)
+                if (change) {
+                    change(newStr)
+                }
+            }
+
             if (currentValue === '') {
                 setInnerValue('')
                 if (change) {
@@ -357,6 +369,17 @@ export const Input = ({
                             change(newStr)
                         }
                     }
+
+                    if (withoutDot && !/^\d+$/.test(value)) {
+                        const newStr = value.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+                            return b + c.replace(/\./g, '')
+                        })
+                        setInnerValue(newStr)
+                        if (change) {
+                            change(newStr)
+                        }
+                    }
+
                     if (value === '') {
                         setInnerValue('')
                         if (change) {
@@ -591,6 +614,7 @@ Input.propTypes = {
     padding: PropTypes.string,
     fontSize: PropTypes.string,
     tooltip: PropTypes.element,
+    withoutDot: PropTypes.bool,
     marginTop: PropTypes.string,
     transform: PropTypes.string,
     className: PropTypes.string,

package/src/components/input/input.stories.js

@@ -23,6 +23,4 @@ const Template = (args) => {
 export const Default = Template.bind({})
 Default.args = {
     type: InputTypes.TEXT,
-    minNumSize: 1,
-    maxNumSize: 8.8,
 }

package/src/components/modal/index.js

@@ -2,11 +2,12 @@ import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-import { compereConfigs } from './../../utils'
+import { compereConfigs, hasOwnerProperty } from './../../utils'
 import styles from './modal.module.css'
 
 import SvgNext from './../icon/Next'
 import SvgPrev from './../icon/Prev'
+import SvgZoom from './../icon/Zoom'
 import SvgCloseIcon from './../icon/CloseIcon'
 import SvgCloseSlide from './../icon/CloseSlide'
 
@@ -18,6 +19,7 @@ export const Modal = ({
     height,
     padding,
     setShow,
+    zoomIcon,
     selected,
     children,
     minWidth,
@@ -34,17 +36,18 @@ export const Modal = ({
     borderStyle,
     borderWidth,
     borderColor,
+    imageMargin,
+    showZoomIcon,
     outsideClose,
     headerWeight,
     headerHeight,
+    imageMaxWidth,
     justifyContent,
+    imageWrapWidth,
     backgroundColor,
+    imageWrapHeight,
     grayDecorHeight,
     layerBackgroundColor,
-    imageMargin,
-    imageMaxWidth,
-    imageWrapWidth,
-    imageWrapHeight,
 }) => {
     const [select, setSelect] = useState(0)
     const [innerData, setInnerData] = useState([])
@@ -82,6 +85,12 @@ export const Modal = ({
         }
     }
 
+    const handleOpenInNewTab = (url) => {
+        const imageLink = document.createElement('a')
+        ;(imageLink.href = url), (imageLink.target = '_blank')
+        imageLink.click()
+    }
+
     useEffect(() => {
         if (type === 'images') {
             if (data) {
@@ -266,35 +275,60 @@ export const Modal = ({
                                         innerData.length > 0 &&
                                         innerData.map((item, index) => {
                                             if (select === index) {
-                                                // eslint-disable-next-line no-prototype-builtins
-                                                if (!item.hasOwnProperty('url')) {
+                                                if (!hasOwnerProperty(item, 'url')) {
                                                     alert('Please add url property in data prop on each element')
                                                 } else {
                                                     return (
-                                                        <img
-                                                            style={{
-                                                                display: 'block',
-                                                                objectFit: 'cover',
-                                                                objectPosition: 'center',
-                                                                margin: imageMargin
-                                                                    ? imageMargin
-                                                                    : configStyles.MODAL.imageMargin,
-                                                                borderRadius: radius
-                                                                    ? radius
-                                                                    : configStyles.MODAL.radius,
-                                                                width: imageWidth
-                                                                    ? imageWidth
-                                                                    : configStyles.MODAL.imageWidth,
-                                                                height: imageHeight
-                                                                    ? imageHeight
-                                                                    : configStyles.MODAL.imageHeight,
-                                                                maxWidth: imageMaxWidth
-                                                                    ? imageMaxWidth
-                                                                    : configStyles.MODAL.imageMaxWidth,
-                                                            }}
-                                                            src={item.url}
-                                                            key={item.id ? item.id : index}
-                                                        />
+                                                        <span key={`${item.url}_${item.id ? item.id : '007'}_${index}`}>
+                                                            <img
+                                                                style={{
+                                                                    display: 'block',
+                                                                    objectFit: 'cover',
+                                                                    objectPosition: 'center',
+                                                                    margin: imageMargin
+                                                                        ? imageMargin
+                                                                        : configStyles.MODAL.imageMargin,
+                                                                    borderRadius: radius
+                                                                        ? radius
+                                                                        : configStyles.MODAL.radius,
+                                                                    width: imageWidth
+                                                                        ? imageWidth
+                                                                        : configStyles.MODAL.imageWidth,
+                                                                    height: imageHeight
+                                                                        ? imageHeight
+                                                                        : configStyles.MODAL.imageHeight,
+                                                                    maxWidth: imageMaxWidth
+                                                                        ? imageMaxWidth
+                                                                        : configStyles.MODAL.imageMaxWidth,
+                                                                }}
+                                                                src={item.url}
+                                                            />
+                                                            {showZoomIcon ? (
+                                                                <div
+                                                                    style={{
+                                                                        top: '0px',
+                                                                        left: '0px',
+                                                                        zIndex: '10',
+                                                                        right: '0px',
+                                                                        bottom: '0px',
+                                                                        margin: 'auto',
+                                                                        display: 'flex',
+                                                                        maxWidth: '40px',
+                                                                        maxHeight: '40px',
+                                                                        cursor: 'pointer',
+                                                                        overflow: 'hidden',
+                                                                        position: 'absolute',
+                                                                        alignItems: 'center',
+                                                                        justifyContent: 'center',
+                                                                    }}
+                                                                    onClick={() => handleOpenInNewTab(item.url)}
+                                                                >
+                                                                    {zoomIcon ? zoomIcon : <SvgZoom />}
+                                                                </div>
+                                                            ) : (
+                                                                ''
+                                                            )}
+                                                        </span>
                                                     )
                                                 }
                                             }
@@ -361,26 +395,28 @@ Modal.propTypes = {
     mMaxWidth: PropTypes.string,
     minHeight: PropTypes.string,
     className: PropTypes.string,
+    zoomIcon: PropTypes.element,
     alignItems: PropTypes.string,
     mMaxHeight: PropTypes.string,
     headerText: PropTypes.string,
     imageWidth: PropTypes.string,
     headerSize: PropTypes.string,
     outsideClose: PropTypes.bool,
+    showZoomIcon: PropTypes.bool,
+    imageMargin: PropTypes.string,
     borderStyle: PropTypes.string,
     borderWidth: PropTypes.string,
     headerColor: PropTypes.string,
     imageHeight: PropTypes.string,
     headerWeight: PropTypes.string,
     headerHeight: PropTypes.string,
+    imageMaxWidth: PropTypes.string,
     justifyContent: PropTypes.string,
+    imageWrapWidth: PropTypes.string,
     backgroundColor: PropTypes.string,
     grayDecorHeight: PropTypes.string,
-    layerBackgroundColor: PropTypes.string,
-    imageMargin: PropTypes.string,
-    imageMaxWidth: PropTypes.string,
-    imageWrapWidth: PropTypes.string,
     imageWrapHeight: PropTypes.string,
+    layerBackgroundColor: PropTypes.string,
 }
 
 Modal.defaultProps = {

package/src/components/modal/modal.stories.js

@@ -64,7 +64,7 @@ const Template = ({ className }) => {
                 Change type to {type === 'content' ? 'images' : 'content'}
             </button>
             {show && (
-                <Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
+                <Modal type={type} selected={0} showZoomIcon data={data} setShow={setShow} className={className}>
                     <div
                         style={{
                             width: '400px',

package/src/components/newAutocomplete/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 
 import classnames from 'classnames'
-import { compereConfigs } from './../../utils'
+import { compereConfigs, hasOwnerProperty } from './../../utils'
 
 import SvgRequired from './../icon/Required'
 
@@ -351,8 +351,7 @@ export const NewAutocomplete = ({
         options &&
             options.length > 0 &&
             options.map((item) => {
-                // eslint-disable-next-line no-prototype-builtins
-                if (!item.hasOwnProperty(keyNames.name)) {
+                if (!hasOwnerProperty(item, keyNames.name)) {
                     alert(`Please add ${keyNames.name} property in items of options array`)
                 }
             })

package/src/components/newFile/fileItem.js

@@ -64,6 +64,7 @@ const FileItem = React.memo(
             )
             return () => {
                 setI((_) => _)
+                setT((_) => _)
                 clearTimeout(t)
                 clearInterval(i)
             }

package/src/components/newFile/index.js

@@ -1,5 +1,4 @@
 import React, { useRef, useState, useEffect, useMemo } from 'react'
-import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -56,6 +55,7 @@ export const NewFile = ({
     listItemPadding,
     progressFontSize,
     borderHoverColor,
+    maxCHoosenLength,
     listItemErrorSize,
     progressTrackColor,
     fileAreaImageWidth,
@@ -66,9 +66,11 @@ export const NewFile = ({
     progressSuccessColor,
     progressLoadingColor,
     hiddenBackgroundColor,
+    maxCHoosenLengthError,
     extentionsRowMarginTop,
     listItemBackgroundColor,
     listItemBackgroundErrorColor,
+    maxCHoosenLengthErrorHideTime,
 }) => {
     const ref = useRef(null)
     const inpRef = useRef(null)
@@ -77,6 +79,7 @@ export const NewFile = ({
     const [error, setError] = useState('')
     const [isHover, setIsHover] = useState(false)
     const [singleFile, setSingleFile] = useState(null)
+    const [choosenFileCount, setChoosenFileCount] = useState(0)
     const [image, setImage] = useState(
         !multiple ? (defaultData ? (defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf') : null) : null
     )
@@ -84,10 +87,6 @@ export const NewFile = ({
     const configStyles = compereConfigs()
 
     const handleRemoveComponent = () => {
-        // eslint-disable-next-line react/no-find-dom-node
-        const node = ReactDOM.findDOMNode(ref.current)
-        const parent = node.parentNode
-        parent.removeChild(node)
         if (!multiple) {
             removeFile && removeFile(singleFile)
         } else {
@@ -101,12 +100,59 @@ export const NewFile = ({
         removeFile && removeFile(singleFile)
     }
 
-    const handleChange = (e) => {
-        const file = e.target.files
-
-        if (multiple) {
-            setError('')
-            setImage(null)
+    const handleUploadFiles = (file) => {
+        if (maxCHoosenLength && choosenFileCount > 0) {
+            if (file.length > choosenFileCount || file.length + memoizedItems.length > choosenFileCount) {
+                setError(
+                    maxCHoosenLengthError
+                        ? maxCHoosenLengthError
+                        : `Դիմումին կարող եք կցել առավելագույնը ${choosenFileCount} ֆայլ`
+                )
+                const clearFunc = () => {
+                    clearTimeout(time)
+                }
+                const time = setTimeout(
+                    () => {
+                        setError('')
+                        clearFunc()
+                    },
+                    maxCHoosenLengthErrorHideTime && typeof maxCHoosenLengthErrorHideTime === 'number'
+                        ? Math.round(maxCHoosenLengthErrorHideTime)
+                        : 3000
+                )
+            } else {
+                for (let ix = 0; ix < file.length; ix++) {
+                    if (file[ix]) {
+                        if (file[ix].size <= maxSize * Math.pow(2, 20)) {
+                            if (
+                                fileExtensions.includes(file[ix].type.split('/')[1]) ||
+                                (fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif')
+                            ) {
+                                change({
+                                    id: '',
+                                    check: '',
+                                    status: '',
+                                    file: file[ix],
+                                    uuid: uuidv4(),
+                                })
+                            } else {
+                                change({
+                                    file: file[ix],
+                                    uuid: uuidv4(),
+                                    check: formatError,
+                                })
+                            }
+                        } else {
+                            change({
+                                file: file[ix],
+                                uuid: uuidv4(),
+                                check: maxSizeError,
+                            })
+                        }
+                    }
+                }
+            }
+        } else {
             for (let ix = 0; ix < file.length; ix++) {
                 if (file[ix]) {
                     if (file[ix].size <= maxSize * Math.pow(2, 20)) {
@@ -137,6 +183,17 @@ export const NewFile = ({
                     }
                 }
             }
+        }
+    }
+
+    const handleChange = (e) => {
+        const file = e.target.files
+
+        if (multiple) {
+            setError('')
+            setImage(null)
+            handleUploadFiles(file)
+
             if (file.length === 0 && memoizedItems.length === 0) {
                 setError(noChoosenFile)
             }
@@ -229,7 +286,19 @@ export const NewFile = ({
         if (multiple && !removeFile) {
             alert('Please add removeFile prop on NewFile component, it is a require in multiple mode')
         }
-    }, [multiple, removeFile, filesArray && filesArray.length, defaultData])
+
+        if (maxCHoosenLength) {
+            if (typeof maxCHoosenLength !== 'number') {
+                alert('maxCHoosenLength prop must be a number, please check it!')
+            } else {
+                if (maxCHoosenLength <= 0) {
+                    setChoosenFileCount(1)
+                } else {
+                    setChoosenFileCount(Math.round(maxCHoosenLength))
+                }
+            }
+        }
+    }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength])
 
     useEffect(() => {
         if (deleteComponent && !removeComponent) {
@@ -556,6 +625,7 @@ NewFile.propTypes = {
     backgroundColor: PropTypes.string,
     change: PropTypes.func.isRequired,
     listItemPadding: PropTypes.string,
+    maxCHoosenLength: PropTypes.number,
     progressFontSize: PropTypes.string,
     borderHoverColor: PropTypes.string,
     listItemErrorSize: PropTypes.string,
@@ -568,9 +638,11 @@ NewFile.propTypes = {
     progressSuccessColor: PropTypes.string,
     progressLoadingColor: PropTypes.string,
     hiddenBackgroundColor: PropTypes.string,
+    maxCHoosenLengthError: PropTypes.string,
     extentionsRowMarginTop: PropTypes.string,
     listItemBackgroundColor: PropTypes.string,
     listItemBackgroundErrorColor: PropTypes.string,
+    maxCHoosenLengthErrorHideTime: PropTypes.number,
     filesArray: PropTypes.arrayOf(PropTypes.object),
     fileExtensions: PropTypes.arrayOf(PropTypes.string),
 }

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

@@ -25,12 +25,13 @@ const Template = (args) => {
     }
 
     const handleRemoveComponent = (componentId) => {
-        console.log(componentId)
+        alert(`You want to remove component with id, ${componentId}`)
     }
 
     return (
         <NewFile
             {...args}
+            removeFromDOM
             componentId={2}
             filesArray={files}
             change={handleChange}

package/src/components/select/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { compereConfigs } from './../../utils'
+import { compereConfigs, hasOwnerProperty } from './../../utils'
 import { SingleCheckbox } from '../singleCheckbox'
 
 import ReactArrowIcon from '../icon/Arrow'
@@ -152,8 +152,7 @@ export const Select = ({
 
     const isObjectEmpty = (obj) => {
         for (var key in obj) {
-            // eslint-disable-next-line no-prototype-builtins
-            if (obj.hasOwnProperty(key)) {
+            if (hasOwnerProperty(obj, key)) {
                 return false
             }
         }