@xaypay/tui 0.0.105 → 0.0.107

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

@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import Table from '.';
+import React, { useState } from 'react'
+import Table from '.'
 
-import { ReactComponent as ReactSVGPlus } from './../../assets/plus.svg';
-import { ReactComponent as ReactSVGMinus } from './../../assets/minus.svg';
-import { ReactComponent as ReactSVGDelete } from './../../assets/delete.svg';
-import { ReactComponent as ReactSVGAttach } from './../../assets/attach.svg';
-import { ReactComponent as ReactSVGArrowUp } from './../../assets/up-arrow.svg';
-import { ReactComponent as ReactSVGArrowDown } from './../../assets/down-arrow.svg';
-import { ReactComponent as ReactSVG } from './../../assets/table-settings-icon.svg';
+import { ReactComponent as ReactSVGPlus } from './../../assets/plus.svg'
+import { ReactComponent as ReactSVGMinus } from './../../assets/minus.svg'
+import { ReactComponent as ReactSVGDelete } from './../../assets/delete.svg'
+import { ReactComponent as ReactSVGAttach } from './../../assets/attach.svg'
+import { ReactComponent as ReactSVGArrowUp } from './../../assets/up-arrow.svg'
+import { ReactComponent as ReactSVGArrowDown } from './../../assets/down-arrow.svg'
+import { ReactComponent as ReactSVG } from './../../assets/table-settings-icon.svg'
 
 export default {
     component: Table,
-    title: 'Components/Table'
-};
+    title: 'Components/Table',
+}
 
 const headerData = [
     {
@@ -21,19 +21,19 @@ const headerData = [
         checkBox: {
             checked: false,
             checkedColor: 'orange',
-            unCheckedColor: 'orange'
+            unCheckedColor: 'orange',
         },
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'ՀՎՀՀ',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'Վարչ․շրջան',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
@@ -41,41 +41,41 @@ const headerData = [
         checkBox: {
             checked: false,
             checkedColor: 'orange',
-            unCheckedColor: 'orange'
+            unCheckedColor: 'orange',
         },
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'Ամսաթիվ',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'Մուտքի ամս․',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'Հավելյալ ինֆորմացիա',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'Ստեղծված',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: 'Գործողություն',
-        sortingArrows: true
+        sortingArrows: true,
     },
     {
         type: 'show',
         content: <ReactSVG />,
         sortingArrows: false,
-    }
-];
+    },
+]
 
 const bodyData = [
     {
@@ -84,15 +84,16 @@ const bodyData = [
             content: 19854,
             checkBox: {
                 checked: false,
+                disabled: true,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         hvhh: {
-            content: 10195524
+            content: 10195524,
         },
         shrjan: {
-            content: 'Շենգավիթ'
+            content: 'Շենգավիթ',
         },
         pay: {
             id: 19854,
@@ -100,41 +101,36 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         startDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         enterDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         info: {
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
-            contentList: [
-                'Ակտիվ է => Այո',
-                'Lorem just => ipsum',
-                'Dolor sit => amet',
-                'text for => test',
-            ]
+            contentList: ['Ակտիվ է => Այո', 'Lorem just => ipsum', 'Dolor sit => amet', 'text for => test'],
         },
         create: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         actions: [
             {
                 id: 19854,
                 type: 'attach',
-                content: <ReactSVGAttach />
+                content: <ReactSVGAttach />,
             },
             {
                 id: 19854,
                 type: 'plus',
-                content: <ReactSVGPlus />
-            }
-        ]
+                content: <ReactSVGPlus />,
+            },
+        ],
     },
     {
         hh: {
@@ -143,14 +139,14 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         hvhh: {
-            content: 14595524
+            content: 14595524,
         },
         shrjan: {
-            content: 'Կենտրոն'
+            content: 'Կենտրոն',
         },
         pay: {
             id: 19954,
@@ -158,41 +154,36 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         startDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         enterDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         info: {
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
-            contentList: [
-                'Ակտիվ է => Այո',
-                'Lorem just => ipsum',
-                'Dolor sit => amet',
-                'text for => test',
-            ]
+            contentList: ['Ակտիվ է => Այո', 'Lorem just => ipsum', 'Dolor sit => amet', 'text for => test'],
         },
         create: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         actions: [
             {
                 id: 19954,
                 type: 'minus',
-                content: <ReactSVGMinus />
+                content: <ReactSVGMinus />,
             },
             {
                 id: 19954,
                 type: 'delete',
-                content: <ReactSVGDelete />
-            }
-        ]
+                content: <ReactSVGDelete />,
+            },
+        ],
     },
     {
         hh: {
@@ -201,14 +192,14 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         hvhh: {
-            content: 14595524
+            content: 14595524,
         },
         shrjan: {
-            content: 'Շենգավիթ'
+            content: 'Շենգավիթ',
         },
         pay: {
             id: 20037,
@@ -216,41 +207,36 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         startDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         enterDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         info: {
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
-            contentList: [
-                'Ակտիվ է => Այո',
-                'Lorem just => ipsum',
-                'Dolor sit => amet',
-                'text for => test',
-            ]
+            contentList: ['Ակտիվ է => Այո', 'Lorem just => ipsum', 'Dolor sit => amet', 'text for => test'],
         },
         create: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         actions: [
             {
                 id: 20037,
                 type: 'attach',
-                content: <ReactSVGAttach />
+                content: <ReactSVGAttach />,
             },
             {
                 id: 20037,
                 type: 'plus',
-                content: <ReactSVGPlus />
-            }
-        ]
+                content: <ReactSVGPlus />,
+            },
+        ],
     },
     {
         hh: {
@@ -259,14 +245,14 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         hvhh: {
-            content: 14595524
+            content: 14595524,
         },
         shrjan: {
-            content: 'Կենտրոն'
+            content: 'Կենտրոն',
         },
         pay: {
             id: 21031,
@@ -274,174 +260,76 @@ const bodyData = [
             checkBox: {
                 checked: false,
                 checkedColor: 'green',
-                unCheckedColor: 'green'
-            }
+                unCheckedColor: 'green',
+            },
         },
         startDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         enterDate: {
-            content: '27.05.2022'
+            content: '27.05.2022',
         },
         info: {
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
-            contentList: [
-                'Ակտիվ է => Այո',
-                'Lorem just => ipsum',
-                'Dolor sit => amet',
-                'text for => test',
-            ]
+            contentList: ['Ակտիվ է => Այո', 'Lorem just => ipsum', 'Dolor sit => amet', 'text for => test'],
         },
         create: [
             [
                 {
-                    content: '21'
-                }
+                    content: '21',
+                },
             ],
             [
                 {
-                    content: '13'
-                }
-            ]
+                    content: '13',
+                },
+            ],
         ],
         actions: [
             [
                 {
                     id: 21031,
                     type: 'attach',
-                    content: <ReactSVGAttach />
+                    content: <ReactSVGAttach />,
                 },
                 {
                     id: 21031,
                     type: 'plus',
-                    content: <ReactSVGPlus />
-                }
+                    content: <ReactSVGPlus />,
+                },
             ],
             [
                 {
                     id: 21031,
                     type: 'minus',
-                    content: <ReactSVGMinus />
+                    content: <ReactSVGMinus />,
                 },
                 {
                     id: 21031,
                     type: 'delete',
-                    content: <ReactSVGDelete />
-                }
-            ]
-        ]
-    }
-];
+                    content: <ReactSVGDelete />,
+                },
+            ],
+        ],
+    },
+]
 
 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);
-    };
-
-    useEffect(() => {
-        handleHeaderCheckedUpdate();
-    }, [checkedFirstCount, checkedSecondCount]);
-    
+    const [tableDataHeader, setTableDataHeader] = useState(headerData)
+    const [tableDataBody, setTableDataBody] = useState(bodyData)
 
-    return <Table
-        {...args}
-        dataBody={tableDataBody}
-        dataHeader={tableDataHeader}
-        handleCheckedBody={handleCheckedBody}
-        handleCheckedHeader={handleCheckedHeader}
-        handleBodyActionClick={handleBodyActionClick}
-        handleHeaderItemClick={handleHeaderItemClick}
-    />;
-};
+    return (
+        <Table
+            {...args}
+            dataBody={tableDataBody}
+            dataHeader={tableDataHeader}
+            setTableDataBody={setTableDataBody}
+            setTableDataHeader={setTableDataHeader}
+        />
+    )
+}
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default = Template.bind({})
+Default.args = {}