@xaypay/tui 0.0.81 → 0.0.83

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import Table from './index';
+import React, { useState, useEffect } from 'react';
+import Table from '.';
 
 import { ReactComponent as ReactSVGPlus } from './../../assets/plus.svg';
 import { ReactComponent as ReactSVGMinus } from './../../assets/minus.svg';
@@ -14,285 +14,425 @@ export default {
     title: 'Components/Table'
 };
 
-const Template = (args) => {
-    const handleHeaderItemClick = (e) => {
-        console.log(e.target.innerText);
-    };
-    
-    const handleBodyActionClick = (e) => {
-        console.log(e.target.id, 'e.target.id - - - - id');
-        console.log(e.target.getAttribute('type'), 'e.target.type - - - - type');
-    };
+const headerData = [
+    {
+        type: 'show',
+        content: 'Հ/Հ',
+        checkBox: {
+            checked: false,
+            checkedColor: 'orange',
+            unCheckedColor: 'orange'
+        },
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'ՀՎՀՀ',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Վարչ․շրջան',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Վճար',
+        checkBox: {
+            checked: false,
+            checkedColor: 'orange',
+            unCheckedColor: 'orange'
+        },
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Ամսաթիվ',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Մուտքի ամս․',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Հավելյալ ինֆորմացիա',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Ստեղծված',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: 'Գործողություն',
+        sortingArrows: true
+    },
+    {
+        type: 'show',
+        content: <ReactSVG />,
+        sortingArrows: false,
+    }
+];
 
-    const [tableDataInfo, setTableDataInfo] = useState({
-        header: [
-            {
-                type: 'show',
-                content: 'Հ/Հ',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
-            },
-            {
-                type: 'show',
-                content: 'ՀՎՀՀ',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
-            },
-            {
-                type: 'show',
-                content: 'Վարչ․շրջան',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
-            },
-            {
-                type: 'show',
-                content: 'Վճար',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
-            },
+const bodyData = [
+    {
+        hh: {
+            id: 19854,
+            content: 19854,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 10195524
+        },
+        shrjan: {
+            content: 'Շենգավիթ'
+        },
+        pay: {
+            id: 19854,
+            content: 7000,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Ամսաթիվ',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
+                id: 19854,
+                type: 'attach',
+                content: <ReactSVGAttach />
             },
             {
-                type: 'show',
-                content: 'Մուտքի ամս․',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
-            },
+                id: 19854,
+                type: 'plus',
+                content: <ReactSVGPlus />
+            }
+        ]
+    },
+    {
+        hh: {
+            id: 19954,
+            content: 19954,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 14595524
+        },
+        shrjan: {
+            content: 'Կենտրոն'
+        },
+        pay: {
+            id: 19954,
+            content: 7840,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Հավելյալ ինֆորմացիա',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
+                id: 19954,
+                type: 'minus',
+                content: <ReactSVGMinus />
             },
             {
-                type: 'show',
-                content: 'Ստեղծված',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
-            },
+                id: 19954,
+                type: 'delete',
+                content: <ReactSVGDelete />
+            }
+        ]
+    },
+    {
+        hh: {
+            id: 20037,
+            content: 20037,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 14595524
+        },
+        shrjan: {
+            content: 'Շենգավիթ'
+        },
+        pay: {
+            id: 20037,
+            content: 6541,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
             {
-                type: 'show',
-                content: 'Գործողություն',
-                sortingArrows: true,
-                onClick: handleHeaderItemClick
+                id: 20037,
+                type: 'attach',
+                content: <ReactSVGAttach />
             },
             {
-                type: 'show',
-                content: <ReactSVG />,
-                sortingArrows: false,
-                onClick: handleHeaderItemClick
+                id: 20037,
+                type: 'plus',
+                content: <ReactSVGPlus />
             }
-        ],
-        body: [
-            {
-                hh: 19854,
-                hvhh: 10195524,
-                shrjan: 'Շենգավիթ',
-                pay: 7000,
-                startDate: '27.05.2022',
-                enterDate: '27.05.2022',
-                info: {
-                    id: 19854,
-                    openArrow: <ReactSVGArrowUp />,
-                    closeArrow: <ReactSVGArrowDown />,
-                    contentTitle: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
-                    contentList: [
-                        'Ակտիվ է => Այո',
-                        'Lorem just => ipsum',
-                        'Dolor sit => amet',
-                        'text for => test',
-                    ]
+        ]
+    },
+    {
+        hh: {
+            id: 21031,
+            content: 21031,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        hvhh: {
+            content: 14595524
+        },
+        shrjan: {
+            content: 'Կենտրոն'
+        },
+        pay: {
+            id: 21031,
+            content: 9845,
+            checkBox: {
+                checked: false,
+                checkedColor: 'green',
+                unCheckedColor: 'green'
+            }
+        },
+        startDate: {
+            content: '27.05.2022'
+        },
+        enterDate: {
+            content: '27.05.2022'
+        },
+        info: {
+            openArrow: <ReactSVGArrowUp />,
+            closeArrow: <ReactSVGArrowDown />,
+            content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
+            contentList: [
+                'Ակտիվ է => Այո',
+                'Lorem just => ipsum',
+                'Dolor sit => amet',
+                'text for => test',
+            ]
+        },
+        create: {
+            content: '27.05.2022'
+        },
+        actions: [
+            [
+                {
+                    id: 20037,
+                    type: 'attach',
+                    content: <ReactSVGAttach />
                 },
-                create: '27.05.2022',
-                actions: [
-                    {
-                        id: 19854,
-                        type: 'attach',
-                        content: <ReactSVGAttach />,
-                        onClick: handleBodyActionClick
-                    },
-                    {
-                        id: 19954,
-                        type: 'plus',
-                        content: <ReactSVGPlus />,
-                        onClick: handleBodyActionClick
-                    }
-                ]
-            },
-            {
-                hh: 19954,
-                hvhh: 14595524,
-                shrjan: 'Շենգավիթ',
-                pay: 7840,
-                startDate: '27.05.2022',
-                enterDate: '27.05.2022',
-                info: {
-                    id: 19854,
-                    openArrow: <ReactSVGArrowUp />,
-                    closeArrow: <ReactSVGArrowDown />,
-                    contentTitle: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
-                    contentList: [
-                        'Ակտիվ է => Այո',
-                        'Lorem just => ipsum',
-                        'Dolor sit => amet',
-                        'text for => test',
-                    ]
+                {
+                    id: 20037,
+                    type: 'plus',
+                    content: <ReactSVGPlus />
+                }
+            ],
+            [
+                {
+                    id: 21031,
+                    type: 'minus',
+                    content: <ReactSVGMinus />
                 },
-                create: '27.05.2022',
-                actions: [
-                    {
-                        id: 20101,
-                        type: 'minus',
-                        content: <ReactSVGMinus />,
-                        onClick: handleBodyActionClick
-                    },
-                    {
-                        id: 21554,
-                        type: 'delete',
-                        content: <ReactSVGDelete />,
-                        onClick: handleBodyActionClick
-                    }
-                ]
-            }
+                {
+                    id: 21031,
+                    type: 'delete',
+                    content: <ReactSVGDelete />
+                }
+            ]
         ]
-    });
-
-    return <Table data={tableDataInfo} {...args} />;
-};
-
-export const Default = Template.bind({});
-Default.args = {};
+    }
+];
 
+const Template = (args) => {
+    const [tableDataHeader, setTableDataHeader] = useState(headerData);
+    const [tableDataBody, setTableDataBody] = useState(bodyData);
 
+    const [checkedFirstCount, setCheckedFirstCount] = useState(0);
+    const [checkedSecondCount, setCheckedSecondCount] = useState(0);
 
+    const handleHeaderItemClick = (e) => {
+        e.stopPropagation();
+        console.log(e.target.innerText);
+    };
+    
+    const handleBodyActionClick = (e) => {
+        console.log(e.target.id, 'e.target.id - - - - id');
+        console.log(e.target.getAttribute('type'), 'e.target.type - - - - type');
+    };
 
+    const handleCheckedHeader = (e, content) => {
+        e.stopPropagation();
+        let checkableItemIndex;
+        let checkableItemBool;
+        const updatedHeader = tableDataHeader.slice();
+        const updatedBody = tableDataBody.slice().map(item => Object.values(item));
+        const newData = updatedHeader.map((item, index) => {
+            if (item.content === content) {
+                checkableItemIndex = index;
+                checkableItemBool = !item.checkBox.checked;
+                item.checkBox.checked = !item.checkBox.checked;
+            }
+            return item;
+        });
+        
+        const newUpdatedBody = updatedBody.map(item => {
+            return item.map((innerItem, innerIndex) => {
+                if (checkableItemIndex === innerIndex) {
+                    innerItem.checkBox.checked = checkableItemBool;
+                }
+                return innerItem;
+            });
+        });
+        setTableDataHeader(newData);
+        setTableDataBody(newUpdatedBody);
+    };
 
+    const handleCheckedBody = (e, content, id) => {
+        e.stopPropagation();
 
+        const updatedBody = tableDataBody.slice().map(item => Object.values(item));
+        const newData = updatedBody.map(item => {
+            return item.map((innerItem, innerIndex) => {
+                if (innerItem.id === id && innerItem.content === 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);
+                        }
+                    }
+                    innerItem.checkBox.checked = !innerItem.checkBox.checked;
+                }
+                return innerItem;
+            });
+        });
+        setTableDataBody(newData);
+    };
 
+    const handleHeaderCheckedUpdate = () => {
+        const updatedHeader = tableDataHeader.slice();
 
+        const newData = updatedHeader.map((item, index) => {
+            if (checkedFirstCount === tableDataBody.length && index === 0) {
+                item.checkBox.checked = true;
+            } else if (checkedFirstCount !== tableDataBody.length && index === 0) {
+                item.checkBox.checked = false;
+            }
 
+            if (checkedSecondCount === tableDataBody.length && index === 3) {
+                item.checkBox.checked = true;
+            } else if (checkedSecondCount !== tableDataBody.length && index === 3) {
+                item.checkBox.checked = false;
+            }
+            return item;
+        });
+        setTableDataHeader(newData);
+    };
 
-// {
-//     header: [
-//         "Hello" | <component></component>,
-//         "Title 2",
-//         {
-//             type: 'hide',
-//             icon: svg
-//         }
-//     ]
+    useEffect(() => {
+        handleHeaderCheckedUpdate();
+    }, [checkedFirstCount, checkedSecondCount]);
+    
 
-//     body: [
-//         {
-//             color: 'red',
-//             colorStatus: 'left' | "row" | "right",
-//             data: [
-//                 "jkashdkjha",
-//                 "jkashdkjha 1",
-//                 "jkashdkjha 2",
-//                 {
-//                     type: "image",
-//                     svg: <SVG></SVG>,
-//                     click: onclick()
-//                 },
-//                 {
-//                     type: "action",
-//                     data: [
-//                         {
-//                             icon: svg,
-//                             title?: 'sadas',
-//                             click: onclick()
-//                         },
-//                         {
-//                             icon: svg,
-//                             group: [
-//                                 {
-//                                     icon: svg,
-//                                     title?: 'sadas',
-//                                     click: onclick()
-//                                 },
-//                                 {
-//                                     icon: svg,
-//                                     title?: 'sadas',
-//                                     click: onclick()
-//                                 }
-//                             ]
-//                         }
-//                     ]
-//                 },
-//                 {
-//                     type: "action",
-//                     data: [
-//                         [
-//                             {
-//                                 icon: svg,
-//                                 title?: 'sadas',
-//                                 click: onclick()
-//                             },
-//                             {
-//                                 icon: svg,
-//                                 group: [
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     },
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     }
-//                                 ]
-//                             }
-//                         ],
-//                         [
-//                             {
-//                                 icon: svg,
-//                                 title?: 'sadas',
-//                                 click: onclick()
-//                             },
-//                             {
-//                                 icon: svg,
-//                                 group: [
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     },
-//                                     {
-//                                         icon: svg,
-//                                         title?: 'sadas',
-//                                         click: onclick()
-//                                     }
-//                                 ]
-//                             }
-//                         ]
-//                     ]
-//                 },
-//                 {
-//                     type: "accordion",
-//                     title: 'asdasdsa',
-//                     openKeys: [
-//                         't1',
-//                         't2',
-//                         't3'
-//                     ]
-//                 },
-//                 {
-//                     type: "text",
-//                     accourdionData: [
-//                         'asdasd',
-//                         <Component></Component>,
-//                         'asdasd',
-//                         'asdasd'
-//                     ]
-//                 }
-//             ]
-//         }
-//     ]
-// }
+    return <Table
+        {...args}
+        dataBody={tableDataBody}
+        dataHeader={tableDataHeader}
+        handleCheckedBody={handleCheckedBody}
+        handleCheckedHeader={handleCheckedHeader}
+        handleBodyActionClick={handleBodyActionClick}
+        handleHeaderItemClick={handleHeaderItemClick}
+    />;
+};
 
+export const Default = Template.bind({});
+Default.args = {};