@xaypay/tui 0.0.109 → 0.0.110

package/src/components/table/index.js

@@ -4,15 +4,22 @@ import PropTypes from 'prop-types'
 import TH from './th'
 import TD from './td'
 
+import SvgUpArrow from './../icon/UpArrow'
+import SvgDownArrow from './../icon/DownArrow'
+
 import { compereConfigs } from './../../utils'
 
-const Table = ({
+export const Table = ({
+    getData,
     dataBody,
+    arrowShow,
     dataHeader,
+    arrowColumn,
 
     tHeadColor,
     tHeadFamily,
     tHeadPadding,
+    tHeadFontSize,
     tHeadFontWeight,
     tHeadBorderRadius,
     tHeadBackgroundColor,
@@ -25,73 +32,201 @@ const Table = ({
     tBodyFontFamily,
 
     tBodyRowBorder,
+    openListColor,
 }) => {
     const [body, setBody] = useState([])
     const [header, setHeader] = useState([])
+    const [disableArr, setDisableArr] = useState([])
+    const [checkedArray, setCheckedArray] = useState([])
 
     const configStyles = compereConfigs()
 
-    const [checkedFirstCount, setCheckedFirstCount] = useState(0)
-    const [checkedSecondCount, setCheckedSecondCount] = useState(0)
-
     const handleHeaderItemClick = (e) => {
         e.stopPropagation()
-        console.log(e.target.innerText)
+
+        if (!e.target.tagName.startsWith('svg') && e.target.innerText !== undefined && e.target.innerText !== '') {
+            let removeItemIndex
+            let headerWithoutArrow
+
+            header.map((item, index) => {
+                if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+                    removeItemIndex = index
+                }
+            })
+
+            if (removeItemIndex !== undefined) {
+                const firstPart = header.slice(0, removeItemIndex)
+                const secondPart = header.slice(removeItemIndex + 1, header.length)
+                headerWithoutArrow = [...firstPart, ...secondPart]
+            }
+
+            const returnedData = {
+                from: 'header',
+                content: e.target.innerText,
+                row: headerWithoutArrow !== undefined ? headerWithoutArrow : header,
+            }
+
+            getData(returnedData)
+        }
+    }
+
+    const handleBodyActionClick = (e, data) => {
+        e.stopPropagation()
+        // const dataRow =
+
+        const actionData = {
+            row: '',
+            item: data.item,
+            id: data.item.id,
+            items: data.items,
+            type: data.item.type,
+            rowIndex: data.index,
+            itemIndex: data.innerIndex,
+            itemInnerIndex: data.itemIndex,
+        }
+
+        console.log(actionData)
+    }
+
+    const handleSetCheckboxArray = (data) => {
+        let checkedItems = []
+        data.map((item, index) => {
+            item.map((innerItem, innerIndex) => {
+                if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+                    if (!checkedItems[innerIndex]) {
+                        checkedItems[innerIndex] = []
+                    }
+                    checkedItems[innerIndex].push({
+                        rowCount: index,
+                        columnCount: innerIndex,
+                        checked: innerItem.checkBox.checked,
+                    })
+                }
+            })
+        })
+        return checkedItems
     }
 
-    const handleBodyActionClick = (e) => {
-        console.log(e.target.id, 'e.target.id - - - - id')
-        console.log(e.target.getAttribute('type'), 'e.target.type - - - - type')
+    const handleSetInsertIndex = (data, count) => {
+        let arrowColumnCount
+        if (typeof count !== 'number') {
+            alert('arrowColumn props must be a number, please check it')
+        } else {
+            if (count <= 0) {
+                arrowColumnCount = 0
+            } else {
+                if (count >= data.length - 1) {
+                    arrowColumnCount = data.length
+                } else {
+                    arrowColumnCount = count
+                }
+            }
+        }
+        return arrowColumnCount
+    }
+
+    const handleInsertArrow = (data, count, arrowObject) => {
+        if (count === 0) {
+            data.unshift(arrowObject)
+        } else if (count >= data.length - 1) {
+            data.push(arrowObject)
+        } else {
+            data.splice(count, 0, arrowObject)
+        }
+        return data
+    }
+
+    const handleTransformDataForInsertArrow = (data, count, type) => {
+        const arrowObject = {
+            status: 'close',
+            checkIndex: null,
+            arrowComponent: true,
+            openArrow: <SvgUpArrow />,
+            closeArrow: <SvgDownArrow />,
+        }
+
+        if (type === 'body') {
+            return data.map((item, index) => {
+                const newObjWithArrow = { ...arrowObject }
+                newObjWithArrow.checkIndex = index
+                return handleInsertArrow(item, count, newObjWithArrow)
+            })
+        } else {
+            const newObjWithArrow = { ...arrowObject }
+            newObjWithArrow.checkIndex = count
+            return handleInsertArrow(data, count, newObjWithArrow)
+        }
     }
 
     const handleCheckedHeader = (data, e) => {
         e.stopPropagation()
-        let checkableItemIndex
+        let removeItemIndex
         let checkableItemBool
-        const updatedHeader = dataHeader.slice()
-        const updatedBody = dataBody.slice().map((item) => Object.values(item))
+        let checkableItemIndex
+        let headerWithoutArrow
+        let checkableBodyRowItems = []
+
+        const updatedHeader = header.slice()
+        const updatedBody = body.slice().map((item) => Object.values(item))
         const newData = updatedHeader.map((item, index) => {
             if (item.content === data.content) {
                 checkableItemIndex = index
                 checkableItemBool = !item.checkBox.checked
                 item.checkBox.checked = !item.checkBox.checked
             }
+            if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+                removeItemIndex = index
+            }
             return item
         })
 
-        const newUpdatedBody = updatedBody.map((item) => {
+        const newUpdatedBody = updatedBody.map((item, index) => {
             return item.map((innerItem, innerIndex) => {
                 if (checkableItemIndex === innerIndex) {
                     innerItem.checkBox.checked = checkableItemBool
+                    checkableBodyRowItems.push({ column: innerIndex, columnItem: innerItem })
+                    handleHeaderCheckedUpdate({
+                        row: index,
+                        column: innerIndex,
+                        checked: { checked: checkableItemBool },
+                    })
                 }
                 return innerItem
             })
         })
+
+        if (removeItemIndex !== undefined) {
+            const firstPart = newData.slice(0, removeItemIndex)
+            const secondPart = newData.slice(removeItemIndex + 1, newData.length)
+            headerWithoutArrow = [...firstPart, ...secondPart]
+        }
+
+        const returnedData = {
+            from: 'header',
+            content: data.content,
+            checkBox: data.checkBox,
+            columnArray: checkableBodyRowItems,
+            row: headerWithoutArrow !== undefined ? headerWithoutArrow : newData,
+        }
+
+        getData(returnedData)
+
         setHeader(newData)
         setBody(newUpdatedBody)
     }
 
     const handleCheckedBody = (data, e) => {
         e.stopPropagation()
-        console.log(data, ' - - - - - >>> data')
-        const updatedBody = dataBody.slice().map((item) => Object.values(item))
-        const newData = updatedBody.map((item) => {
+        const updatedBody = body.slice().map((item) => Object.values(item))
+        const newData = updatedBody.map((item, index) => {
             return item.map((innerItem, innerIndex) => {
-                if (innerItem.id === data.id && innerItem.content === data.content) {
-                    if (innerIndex === 0) {
-                        if (innerItem.checkBox.checked === false) {
-                            setCheckedFirstCount((prev) => prev + 1)
-                        } else {
-                            setCheckedFirstCount((prev) => prev - 1)
-                        }
-                    } else if (innerIndex === 3) {
-                        if (innerItem.checkBox.checked === false) {
-                            setCheckedSecondCount((prev) => prev + 1)
-                        } else {
-                            setCheckedSecondCount((prev) => prev - 1)
-                        }
-                    }
+                if (innerItem.id === data.id && innerItem.content === data.content && innerItem.checkBox) {
                     innerItem.checkBox.checked = !innerItem.checkBox.checked
+                    handleHeaderCheckedUpdate({
+                        row: index,
+                        column: innerIndex,
+                        checked: innerItem.checkBox,
+                    })
                 }
                 return innerItem
             })
@@ -99,43 +234,239 @@ const Table = ({
         setBody(newData)
     }
 
-    const handleHeaderCheckedUpdate = () => {
-        const updatedHeader = dataHeader.slice()
+    const handleHeaderCheckedUpdate = (checkedData) => {
+        const updatedHeader = header.slice()
+        const newCheckedArray = checkedArray.map((item, index) => {
+            return item.map((innerItem, innerIndex) => {
+                if (index === checkedData.column) {
+                    if (innerIndex === checkedData.row) {
+                        innerItem.checked = checkedData.checked.checked
+                    }
+                }
+                return innerItem
+            })
+        })
 
         const newData = updatedHeader.map((item, index) => {
-            if (checkedFirstCount === dataBody.length && index === 0) {
-                item.checkBox.checked = true
-            } else if (checkedFirstCount !== dataBody.length && index === 0) {
-                item.checkBox.checked = false
+            if (newCheckedArray[index]) {
+                const tempCheckedArray = []
+                newCheckedArray[index].map((innerItem) => {
+                    tempCheckedArray.push(innerItem.checked)
+                })
+                if (tempCheckedArray.every((i) => i)) {
+                    item.checkBox.checked = true
+                } else {
+                    item.checkBox.checked = false
+                }
             }
+            return item
+        })
 
-            if (checkedSecondCount === dataBody.length && index === 3) {
-                item.checkBox.checked = true
-            } else if (checkedSecondCount !== dataBody.length && index === 3) {
-                item.checkBox.checked = false
+        setHeader(newData)
+        setCheckedArray(newCheckedArray)
+    }
+
+    const handleCheckArrowAction = (item, rowPosition) => {
+        const status = item.status
+        const checkedOpenableRow = body[rowPosition].map((innerItem) => {
+            if (Object.prototype.hasOwnProperty.call(innerItem, 'status')) {
+                if (status === 'close') {
+                    innerItem.status = 'open'
+                } else {
+                    innerItem.status = 'close'
+                }
             }
+            return innerItem
+        })
+        setBody((prev) => {
+            prev[rowPosition] = checkedOpenableRow
+            return [...prev]
+        })
+    }
+
+    const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex) => {
+        let single = {}
+        const allArrows = []
+        const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
+            if (index === arrowIndex) {
+                if (item.status === 'close') {
+                    item.status = 'open'
+                } else {
+                    item.status = 'close'
+                }
+                single = item
+            }
+
+            if (
+                Object.prototype.hasOwnProperty.call(item, 'status') &&
+                !Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
+            ) {
+                allArrows.push(item)
+            }
+
             return item
         })
-        setHeader(newData)
+
+        const checkedOpenableRowArrow = checkedOpenableRow.map((item) => {
+            if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+                if (single && single.status === 'close') {
+                    item.status = 'close'
+                } else if (single && single.status === 'open') {
+                    if (allArrows.every((i) => i.status === 'open')) {
+                        item.status = 'open'
+                    }
+                }
+            }
+            return item
+        })
+
+        setBody((prev) => {
+            prev[arrowRowIndex] = checkedOpenableRowArrow
+            return [...prev]
+        })
     }
 
-    useEffect(() => {
-        handleHeaderCheckedUpdate()
-    }, [checkedFirstCount, checkedSecondCount])
+    const handleCheckArrowActionHeader = (e, item) => {
+        e.stopPropagation()
+        const checkedOpenableAllRows = header.map((innerItem, innerIndex) => {
+            if (item.checkIndex === innerIndex) {
+                if (item.status === 'close') {
+                    innerItem.status = 'open'
+                } else {
+                    innerItem.status = 'close'
+                }
+            }
+            return innerItem
+        })
+
+        const checkedOpenableAllRowsBody = body.map((innerItem) => {
+            return innerItem.map((iElem) => {
+                if (Object.prototype.hasOwnProperty.call(iElem, 'status')) {
+                    if (item.status === 'open') {
+                        iElem.status = 'open'
+                    } else {
+                        iElem.status = 'close'
+                    }
+                }
+                return iElem
+            })
+        })
+        setHeader(() => checkedOpenableAllRows)
+        setBody(() => checkedOpenableAllRowsBody)
+    }
+
+    const handleCheckDots = (e, item, index, innerIndex) => {
+        e.stopPropagation()
+        const checkBodyMore = body.map((elemItem, elemIndex) => {
+            return elemItem.map((elemInnerItem, elemInnerIndex) => {
+                if (elemIndex === index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+                    if (elemInnerIndex === innerIndex) {
+                        if (item.dotsStatus === 'deActive') {
+                            elemInnerItem.dotsStatus = 'active'
+                        } else {
+                            elemInnerItem.dotsStatus = 'deActive'
+                        }
+                    }
+                } else if (elemIndex !== index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+                    if (elemInnerIndex === innerIndex) {
+                        elemInnerItem.dotsStatus = 'deActive'
+                    }
+                }
+                return elemInnerItem
+            })
+        })
+        setBody(() => checkBodyMore)
+    }
+
+    const handleCheckDisable = (arr, disableArr) => {
+        let headerWithDisabled = []
+        if (disableArr && disableArr.length > 0) {
+            headerWithDisabled = arr.map((item, index) => {
+                if (disableArr[index]) {
+                    if (Object.prototype.hasOwnProperty.call(item, 'checkBox')) {
+                        item.checkBox.disabled = true
+                    }
+                }
+                return item
+            })
+        }
+        return headerWithDisabled
+    }
 
     useEffect(() => {
-        setBody(dataBody)
-    }, [dataBody])
+        let checkedItems = []
+        const disabledArray = []
+        const checkBodyForChackedItems = dataBody.slice().map((item) => Object.values(item))
+
+        if (arrowShow) {
+            const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn)
+
+            const checkForInsertArrow = handleTransformDataForInsertArrow(
+                checkBodyForChackedItems,
+                arrowColumnCount,
+                'body'
+            )
+
+            checkForInsertArrow.map((item, index) => {
+                item.map((innerItem, innerIndex) => {
+                    if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+                        if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+                            if (innerItem.checkBox.disabled === true) {
+                                if (!disabledArray[innerIndex]) {
+                                    disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
+                                }
+                            }
+                        }
+                    }
+                })
+            })
+
+            checkedItems = handleSetCheckboxArray(checkForInsertArrow)
+            setBody(() => checkForInsertArrow)
+        } else {
+            checkedItems = handleSetCheckboxArray(checkBodyForChackedItems)
+            checkBodyForChackedItems.map((item, index) => {
+                item.map((innerItem, innerIndex) => {
+                    if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+                        if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+                            if (innerItem.checkBox.disabled === true) {
+                                if (!disabledArray[innerIndex]) {
+                                    disabledArray[innerIndex] = { rowIndex: index, columnIndex: innerIndex }
+                                }
+                            }
+                        }
+                    }
+                })
+            })
+            setBody(() => dataBody)
+        }
+
+        setDisableArr(disabledArray)
+        setCheckedArray(() => checkedItems)
+    }, [dataBody, arrowColumn, arrowShow])
 
     useEffect(() => {
-        setHeader(dataHeader)
-    }, [dataHeader])
+        if (arrowShow) {
+            const header = dataHeader.slice()
+
+            const arrowColumnCount = handleSetInsertIndex(header, arrowColumn)
+
+            const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header')
+
+            const headerWithDisabled = handleCheckDisable(checkForInsertArrow, disableArr)
+
+            setHeader(() => (headerWithDisabled.length > 0 ? headerWithDisabled : checkForInsertArrow))
+        } else {
+            const headerWithDisabled = handleCheckDisable(dataHeader, disableArr)
+            setHeader(() => (headerWithDisabled.length > 0 ? headerWithDisabled : dataHeader))
+        }
+    }, [dataHeader, arrowColumn, arrowShow, disableArr])
 
     return (
         <>
             <table
                 style={{
-                    width: '2000px',
+                    width: '100%',
                     borderCollapse: 'collapse',
                 }}
             >
@@ -154,10 +485,12 @@ const Table = ({
                                     <TH
                                         item={item}
                                         key={`${item}_${index}`}
+                                        handleCheckedHeader={handleCheckedHeader}
+                                        handleHeaderItemClick={handleHeaderItemClick}
+                                        handleCheckArrowActionHeader={handleCheckArrowActionHeader}
                                         tHeadFamily={tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily}
-                                        handleCheckedHeader={handleCheckedHeader ? handleCheckedHeader : (_) => _}
                                         tHeadPadding={tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding}
-                                        handleHeaderItemClick={handleHeaderItemClick ? handleHeaderItemClick : (_) => _}
+                                        tHeadFontSize={tHeadFontSize ? tHeadFontSize : configStyles.TABLE.tHeadFontSize}
                                         tHeadFontWeight={
                                             tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight
                                         }
@@ -202,20 +535,23 @@ const Table = ({
                                     }}
                                 >
                                     {Object.values(item).map((innerItem, innerIndex) => {
-                                        console.log(innerItem, ' - - - - - >>>>')
                                         return (
                                             <TD
+                                                index={index}
                                                 item={innerItem}
+                                                innerIndex={innerIndex}
                                                 id={item.id ? item.id : ''}
-                                                key={`${innerItem}_${innerIndex}`}
-                                                handleCheckedBody={handleCheckedBody ? handleCheckedBody : (_) => _}
+                                                handleCheckDots={handleCheckDots}
+                                                key={`${innerItem}_${index}_${innerIndex}`}
+                                                openListColor={
+                                                    openListColor ? openListColor : configStyles.TABLE.openListColor
+                                                }
+                                                handleCheckedBody={handleCheckedBody}
+                                                handleBodyActionClick={handleBodyActionClick}
                                                 tBodyColor={tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor}
                                                 tBodyPadding={
                                                     tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding
                                                 }
-                                                handleBodyActionClick={
-                                                    handleBodyActionClick ? handleBodyActionClick : (_) => _
-                                                }
                                                 tBodyFontSize={
                                                     tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize
                                                 }
@@ -237,6 +573,8 @@ const Table = ({
                                                         ? 'none'
                                                         : configStyles.TABLE.tBodyRowBorder
                                                 }
+                                                handleCheckArrowAction={handleCheckArrowAction}
+                                                handleOpenCloseRowSingleArrow={handleOpenCloseRowSingleArrow}
                                             />
                                         )
                                     })}
@@ -251,12 +589,16 @@ const Table = ({
 }
 
 Table.propTypes = {
+    getData: PropTypes.func,
     dataBody: PropTypes.array,
+    arrowShow: PropTypes.bool,
     dataHeader: PropTypes.array,
+    arrowColumn: PropTypes.number,
 
     tHeadColor: PropTypes.string,
     tHeadFamily: PropTypes.string,
     tHeadPadding: PropTypes.string,
+    tHeadFontSize: PropTypes.string,
     tHeadFontWeight: PropTypes.number,
     tHeadBorderRadius: PropTypes.string,
     tHeadBackgroundColor: PropTypes.string,
@@ -269,8 +611,5 @@ Table.propTypes = {
     tBodyFontFamily: PropTypes.string,
 
     tBodyRowBorder: PropTypes.string,
-
-    setTableDataHeader: PropTypes.func,
+    openListColor: PropTypes.string,
 }
-
-export default Table

package/src/components/table/table.module.css

@@ -17,7 +17,6 @@
 .td-span {
     position: relative;
     display: inline-block;
-    cursor: pointer;
 }
 
 .td-span > svg {
@@ -25,4 +24,43 @@
     top: 0px;
     left: 0px;
     z-index: -1;
-}
+}
+
+.list-text {
+    cursor: pointer;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
+    margin: 0px 0px 8px 0px;
+    text-overflow: ellipsis;
+}
+
+.dots-option-item {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 39px;
+    cursor: pointer;
+    padding: 10px;
+    margin-bottom: 2px;
+    box-sizing: border-box;
+}
+
+.dots-option-item::after {
+    content: '';
+    position: absolute;
+    top: calc(100% - 2px);
+    left: 10px;
+    height: 2px;
+    width: calc(100% - 20px);
+    background-color: #EEEEEE;
+    border-radius: 1px;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    -ms-border-radius: 1px;
+    -o-border-radius: 1px;
+}
+
+.dots-option-item:last-child::after {
+    display: none;
+}