@xaypay/tui 0.0.111 → 0.0.113

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,7 +2,7 @@ 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'
@@ -266,8 +266,7 @@ 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 (

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
             }
         }

package/src/components/table/index.js

@@ -7,7 +7,7 @@ import TD from './td'
 import SvgUpArrow from './../icon/UpArrow'
 import SvgDownArrow from './../icon/DownArrow'
 
-import { compereConfigs } from './../../utils'
+import { compereConfigs, hasOwnerProperty } from './../../utils'
 
 export const Table = ({
     getData,
@@ -48,7 +48,7 @@ export const Table = ({
         bodyData.map((item, index) => {
             if (index === data.index) {
                 item.map((innerItem, innerIndex) => {
-                    if (Object.prototype.hasOwnProperty.call(innerItem, 'arrowComponent')) {
+                    if (hasOwnerProperty(innerItem, 'arrowComponent')) {
                         removeItemIndex = innerIndex
                     }
                 })
@@ -73,7 +73,7 @@ export const Table = ({
             let headerWithoutArrow
 
             header.map((item, index) => {
-                if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+                if (hasOwnerProperty(item, 'arrowComponent')) {
                     removeItemIndex = index
                 }
             })
@@ -121,7 +121,7 @@ export const Table = ({
         let checkedItems = []
         data.map((item, index) => {
             item.map((innerItem, innerIndex) => {
-                if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+                if (hasOwnerProperty(innerItem, 'checkBox')) {
                     if (!checkedItems[innerIndex]) {
                         checkedItems[innerIndex] = []
                     }
@@ -203,7 +203,7 @@ export const Table = ({
                 checkableItemBool = !item.checkBox.checked
                 item.checkBox.checked = !item.checkBox.checked
             }
-            if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+            if (hasOwnerProperty(item, 'arrowComponent')) {
                 removeItemIndex = index
             }
             return item
@@ -255,7 +255,7 @@ export const Table = ({
                 if (
                     innerItem.id === data.id &&
                     innerItem.content == data.content &&
-                    Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')
+                    hasOwnerProperty(innerItem, 'checkBox')
                 ) {
                     innerItem.checkBox.checked = !innerItem.checkBox.checked
                     handleHeaderCheckedUpdate({
@@ -318,7 +318,7 @@ export const Table = ({
     const handleCheckArrowAction = (item, rowPosition) => {
         const status = item.status
         const checkedOpenableRow = body[rowPosition].map((innerItem) => {
-            if (Object.prototype.hasOwnProperty.call(innerItem, 'status')) {
+            if (hasOwnerProperty(innerItem, 'status')) {
                 if (status === 'close') {
                     innerItem.status = 'open'
                 } else {
@@ -346,10 +346,7 @@ export const Table = ({
                 single = item
             }
 
-            if (
-                Object.prototype.hasOwnProperty.call(item, 'status') &&
-                !Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
-            ) {
+            if (hasOwnerProperty(item, 'status') && !hasOwnerProperty(item, 'arrowComponent')) {
                 allArrows.push(item)
             }
 
@@ -357,7 +354,7 @@ export const Table = ({
         })
 
         const checkedOpenableRowArrow = checkedOpenableRow.map((item) => {
-            if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+            if (hasOwnerProperty(item, 'arrowComponent')) {
                 if (single && single.status === 'close') {
                     item.status = 'close'
                 } else if (single && single.status === 'open') {
@@ -390,7 +387,7 @@ export const Table = ({
 
         const checkedOpenableAllRowsBody = body.map((innerItem) => {
             return innerItem.map((iElem) => {
-                if (Object.prototype.hasOwnProperty.call(iElem, 'status')) {
+                if (hasOwnerProperty(iElem, 'status')) {
                     if (item.status === 'open') {
                         iElem.status = 'open'
                     } else {
@@ -408,7 +405,7 @@ export const Table = ({
         e.stopPropagation()
         const checkBodyMore = body.map((elemItem, elemIndex) => {
             return elemItem.map((elemInnerItem, elemInnerIndex) => {
-                if (elemIndex === index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+                if (elemIndex === index && hasOwnerProperty(elemInnerItem, 'dots')) {
                     if (elemInnerIndex === innerIndex) {
                         if (item.dotsStatus === 'deActive') {
                             elemInnerItem.dotsStatus = 'active'
@@ -416,7 +413,7 @@ export const Table = ({
                             elemInnerItem.dotsStatus = 'deActive'
                         }
                     }
-                } else if (elemIndex !== index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+                } else if (elemIndex !== index && hasOwnerProperty(elemInnerItem, 'dots')) {
                     if (elemInnerIndex === innerIndex) {
                         elemInnerItem.dotsStatus = 'deActive'
                     }
@@ -432,7 +429,7 @@ export const Table = ({
         if (disableArr && disableArr.length > 0) {
             headerWithDisabled = arr.map((item, index) => {
                 if (disableArr[index]) {
-                    if (Object.prototype.hasOwnProperty.call(item, 'checkBox')) {
+                    if (hasOwnerProperty(item, 'checkBox')) {
                         item.checkBox.disabled = true
                     }
                 }
@@ -484,6 +481,18 @@ export const Table = ({
         getData(moreData)
     }
 
+    const handleTableClick = () => {
+        const checkBodyMore = body.map((elemItem) => {
+            return elemItem.map((elemInnerItem) => {
+                if (hasOwnerProperty(elemInnerItem, 'dots')) {
+                    elemInnerItem.dotsStatus = 'deActive'
+                }
+                return elemInnerItem
+            })
+        })
+        setBody(() => checkBodyMore)
+    }
+
     useEffect(() => {
         let checkedItems = []
         const disabledArray = []
@@ -499,8 +508,8 @@ export const Table = ({
             )
             const insert = checkForInsertArrow.map((item, index) => {
                 item.map((innerItem, innerIndex) => {
-                    if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
-                        if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+                    if (hasOwnerProperty(innerItem, 'checkBox')) {
+                        if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
                             if (innerItem.checkBox.disabled === true) {
                                 if (!disabledArray[innerIndex]) {
                                     disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
@@ -516,8 +525,8 @@ export const Table = ({
         } else {
             const insert = checkBodyForChackedItems.map((item, index) => {
                 item.map((innerItem, innerIndex) => {
-                    if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
-                        if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+                    if (hasOwnerProperty(innerItem, 'checkBox')) {
+                        if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
                             if (innerItem.checkBox.disabled === true) {
                                 if (!disabledArray[innerIndex]) {
                                     disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
@@ -560,6 +569,7 @@ export const Table = ({
                     width: '100%',
                     borderCollapse: 'collapse',
                 }}
+                onClick={handleTableClick}
             >
                 {header && header.length > 0 && (
                     <thead>

package/src/components/table/table.stories.js

@@ -435,16 +435,7 @@ const Template = (args) => {
         console.log(tData, ' data from table click action, with getData props')
     }
 
-    return (
-        <Table
-            {...args}
-            arrowShow
-            arrowColumn={3}
-            dataBody={bodyData}
-            dataHeader={headerData}
-            getData={handleGetData}
-        />
-    )
+    return <Table {...args} dataBody={bodyData} dataHeader={headerData} getData={handleGetData} />
 }
 
 export const Default = Template.bind({})