@xaypay/tui 0.0.80 → 0.0.82

package/src/components/table/index.js

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
+import TH from './th';
+import TD from './td';
+
 import { compereConfigs } from './../../utils';
 
 const Table = ({
-  tableHeadItems,
-  tableBodyItems,
+  dataBody,
+  dataHeader,
 
   tHeadColor,
   tHeadFamily,
@@ -22,22 +25,36 @@ const Table = ({
   tBodyFontFamily,
 
   tBodyRowBorder,
-  tBodyMarginTop,
+
+  handleCheckedBody,
+  handleCheckedHeader,
+  handleHeaderItemClick,
+  handleBodyActionClick
 }) => {
+  const [body, setBody] = useState([]);
+  const [header, setHeader] = useState([]);
   
   const configStyles = compereConfigs();
 
+  useEffect(() => {
+    setBody(dataBody);
+  }, [dataBody]);
+
+  useEffect(() => {
+    setHeader(dataHeader);
+  }, [dataHeader]);
+
   return (
     <>
       <table
         style={{
-          width: '1475px',
+          width: '2000px',
           borderCollapse: 'collapse'
         }}
       >
 
         {
-          tableHeadItems && tableHeadItems.length > 0 && <thead>
+          header && header.length > 0 && <thead>
             <tr
               style={{
                 color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
@@ -45,21 +62,19 @@ const Table = ({
               }}
             >
               {
-                tableHeadItems.map((item, index) => {
+                header.map((item, index) => {
                   return (
-                    <th
+                    <TH
+                      item={item}
                       key={`${item}_${index}`}
-                      style={{
-                        cursor: 'pointer',
-                        padding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
-                        fontFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
-                        fontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
-                        borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
-                        borderTopRightRadius: index === tableHeadItems.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
-                      }}
-                    >
-                      {item.type === 'show' ? item.content : ''}
-                    </th>
+                      tHeadFamily={tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily}
+                      handleCheckedHeader={handleCheckedHeader ? handleCheckedHeader : _ => _}
+                      tHeadPadding={tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding}
+                      handleHeaderItemClick={handleHeaderItemClick ? handleHeaderItemClick : _ => _}
+                      tHeadFontWeight={tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight}
+                      borderTopLeftRadius={index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'}
+                      borderTopRightRadius={index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'}
+                    />
                   )
                 })
               }
@@ -68,87 +83,41 @@ const Table = ({
         }
 
         {
-          tableBodyItems && tableBodyItems.length > 0 && <tbody
+          body && body.length > 0 && <tbody
             style={{
-              overflow: 'auto',
               boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
             }}
           >
-
             {
-              
-              tableBodyItems.map((item, index) => {
-                const monst = Object.entries(item);
+              body.map((item, index) => {
                 return (
-                  <>
-                    {/* {
-                      tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop && index === 0 && <tr>
-                        <td
-                          style={{
-                            height: tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop
-                          }}
-                        >
-                        </td>
-                      </tr>
-                    } */}
-                    
-                    <tr
-                      key={`${item.id}_${index}`}
-                      style={{
-                        borderBottom: index === tableBodyItems.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
-                      }}
-                    >
-                      { 
-                        Object.values(item).map((innerItem, innerIndex) => {
-                          if (monst[innerIndex][0] !== 'id') {
-                            return (
-                              <td
-                                key={`${innerItem}_${innerIndex}`}
-                                style={{
-                                  color: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
-                                  padding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
-                                  fontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
-                                  textAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
-                                  fontFamily: tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily,
-                                  fontWeight: tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight,
-                                  borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder
-                                }}
-                              >
-                                {
-                                  Array.isArray(innerItem)
-                                    ? innerItem.length > 0
-                                      ? innerItem.map((newItem, newIndex) => {
-                                          if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
-                                            return Object.values(newItem).map((actionItem, actionIndex) => {
-                                              return (
-                                                <span
-                                                  key={`${actionItem}_${actionIndex}`}
-                                                  style={{
-                                                    cursor: 'pointer'
-                                                  }}
-                                                >
-                                                  { actionItem }
-                                                </span>
-                                              )
-                                            })
-                                          } else {
-                                            return <span
-                                              key={`${newItem}_${newIndex}`}
-                                            >
-                                              {newItem}
-                                            </span>
-                                          }
-                                        })
-                                      : ''
-                                    : innerItem
-                                }
-                              </td>
-                            )
-                          }
-                        })
-                      }
-                    </tr>
-                  </>
+                  <tr
+                    key={`${item}_${index}`}
+                    style={{
+                      borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
+                    }}
+                  >
+                    { 
+                      Object.values(item).map((innerItem, innerIndex) => {
+                          return (
+                            <TD
+                              item={innerItem}
+                              id={item.id ? item.id : ''}
+                              key={`${innerItem}_${innerIndex}`}
+                              handleCheckedBody={handleCheckedBody ? handleCheckedBody : _ => _}
+                              tBodyColor={tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor}
+                              tBodyPadding={tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding}
+                              handleBodyActionClick={handleBodyActionClick ? handleBodyActionClick : _ => _}
+                              tBodyFontSize={tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize}
+                              tBodyTextAlign={tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign}
+                              tBodyFontFamily={tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily}
+                              tBodyFontWeight={tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight}
+                              borderRight={innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder}
+                            />
+                          )
+                      })
+                    }
+                  </tr>
                 )
               })
             }
@@ -160,8 +129,8 @@ const Table = ({
 };
 
 Table.propTypes = {
-  tableHeadItems: PropTypes.array,
-  tableBodyItems: PropTypes.array,
+  dataBody: PropTypes.array,
+  dataHeader: PropTypes.array,
 
   tHeadColor: PropTypes.string,
   tHeadFamily: PropTypes.string,
@@ -178,7 +147,11 @@ Table.propTypes = {
   tBodyFontFamily: PropTypes.string,
 
   tBodyRowBorder: PropTypes.string,
-  tBodyMarginTop: PropTypes.string
+
+  handleCheckedBody: PropTypes.func,
+  handleCheckedHeader: PropTypes.func,
+  handleHeaderItemClick: PropTypes.func,
+  handleBodyActionClick: PropTypes.func
 };
 
 export default Table;

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

@@ -0,0 +1,28 @@
+.sorting-arrows::after {
+    content: "▲";
+    position: absolute;
+    right: 0px;
+    font-size: 11px;
+    top: calc(50% - 12px);
+}
+
+.sorting-arrows::before {
+    content: "▼";
+    position: absolute;
+    right: 0px;
+    font-size: 11px;
+    bottom: calc(50% - 12px);
+}
+
+.td-span {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.td-span > svg {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: -1;
+}