feat(components): add new prop to Table component to draw rows like L…

…ibraryCardAsset aspect fix(components): fix Table's boder bottom color --- Ticket: task/MainLibrary-MiniCards-92 Reviewed-by: @MIGUELez11 Refs: #156
leemonade · May 24, 2024 · b16eae9 · b16eae9
1 parent 757d588
commit b16eae9
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 9 deletions.
diff --git a/packages/components/src/form/ColorInput/ColorInput.js b/packages/components/src/form/ColorInput/ColorInput.js
@@ -121,7 +121,6 @@ const ColorInput = forwardRef(
     const [opened, setOpened] = useState(false);
     const [inputValue, setInputValue] = useState('');
     const closeRef = useClickOutside(() => setOpened(false));
-    console.log('inputValue', inputValue);
 
     useEffect(() => {
       const isNullWhenClearable = clearable && value === null;

diff --git a/packages/components/src/informative/Table/Table.js b/packages/components/src/informative/Table/Table.js
@@ -18,6 +18,7 @@ export const TABLE_DEFAULT_PROPS = {
   headerStyles: {},
   sortable: false,
   selectable: false,
+  isAssetList: false,
 };
 export const TABLE_PROP_TYPES = {
   columns: PropTypes.arrayOf(PropTypes.any),
@@ -34,6 +35,7 @@ export const TABLE_PROP_TYPES = {
   rowsExpanded: PropTypes.arrayOf(PropTypes.any),
   styleRow: PropTypes.object,
   selectable: PropTypes.bool,
+  isAssetList: PropTypes.bool,
 };
 
 const Table = ({
@@ -51,6 +53,7 @@ const Table = ({
   useSticky,
   styleTable,
   selectable,
+  isAssetList,
 }) => {
   const plugins = [];
   if (useSticky) {
@@ -98,7 +101,23 @@ const Table = ({
     onChangeData({ newData });
   };
 
-  const { theme, classes, cx } = TableStyles({ headerStyles }, { name: 'Table' });
+  const { theme, classes, cx } = TableStyles({ headerStyles, isAssetList }, { name: 'Table' });
+
+  const getCellClass = (index, totalCells, isSortable) => {
+    if (isSortable) {
+      if (index === totalCells - 1) {
+        return classes.assetBorderBoxRight;
+      }
+      return classes.assetBorderBoxCenter;
+    }
+    if (index === 0) {
+      return classes.assetBorderBoxLeft;
+    }
+    if (index === totalCells - 1) {
+      return classes.assetBorderBoxRight;
+    }
+    return classes.assetBorderBoxCenter;
+  };
 
   // Render the UI for your table
   return (
@@ -156,8 +175,8 @@ const Table = ({
                         <tr
                           {...row.getRowProps({
                             className: cx({
-                              [classes.tr]: i < rows.length - 1,
-                              [classes.trSelectable]: selectable,
+                              [classes.tr]: !isAssetList && i < rows.length - 1,
+                              [classes.trSelectable]: !isAssetList && selectable,
                             }),
                           })}
                           onClick={() => onClickRow(row)}
@@ -171,7 +190,10 @@ const Table = ({
                           ref={draggableProvided.innerRef}
                         >
                           {!!sortable && (
-                            <td style={{ verticalAlign: 'middle' }}>
+                            <td
+                              style={{ verticalAlign: 'middle' }}
+                              className={classes.assetBorderBoxLeft}
+                            >
                               <Box
                                 className={classes.sortIcon}
                                 style={{ paddingLeft: snapshot.isDragging ? 10 : 0 }}
@@ -187,6 +209,7 @@ const Table = ({
                                 className: classes.td,
                                 style: cell.column.tdStyle,
                               })}
+                              className={getCellClass(k, row.cells.length, sortable)}
                             >
                               <TableCell
                                 cell={cell}

diff --git a/packages/components/src/informative/Table/Table.styles.js b/packages/components/src/informative/Table/Table.styles.js
@@ -2,30 +2,56 @@ import { createStyles } from '@mantine/styles';
 import { getPaddings } from '../../theme.mixins';
 
 const TableStyles = createStyles(
-  (theme, { disabled, canAdd, hideHeaderBorder, headerStyles = {} } = {}) => {
+  (theme, { disabled, canAdd, hideHeaderBorder, headerStyles = {}, isAssetList } = {}) => {
     const reset = {
       margin: 0,
       padding: 0,
       border: 0,
       outline: 0,
     };
+    const assetBorderBoxLeft = {
+      border: `1px solid ${theme.other.table.border.color.default}`,
+      borderRight: 'none',
+      borderTopLeftRadius: 4,
+      borderBottomLeftRadius: 4,
+      paddingLeft: 16,
+      height: '100%',
+      alignContent: 'center',
+    };
+    const assetBorderBoxCenter = {
+      border: `1px solid ${theme.other.table.border.color.default}`,
+      borderRight: 'none',
+      borderLeft: 'none',
+      height: '100%',
+      alignContent: 'center',
+    };
+    const assetBorderBoxRight = {
+      border: `1px solid ${theme.other.table.border.color.default}`,
+      borderLeft: 'none',
+      borderTopRightRadius: 4,
+      borderBottomRightRadius: 4,
+      height: '100%',
+      alignContent: 'center',
+    };
     return {
       root: {
         ...reset,
         width: '100%',
         borderCollapse: 'separate',
-        borderSpacing: 0,
+        borderSpacing: isAssetList ? '0 16px' : '0',
       },
       trHeader: {
         ...headerStyles,
       },
       tr: {
         ...reset,
         '& td': {
-          borderBottom: `1px solid rgba(0, 0, 0, 0.05)`,
+          borderBottom: isAssetList ? undefined : `1px solid rgba(0, 0, 0, 0.05)`,
+          alignContent: 'center',
         },
         '& th': {
           borderBottom: disabled && `1px solid rgba(0, 0, 0, 0.05)`,
+          verticalAlign: 'middle',
         },
         '&:after': !disabled && {
           content: '"@"',
@@ -60,6 +86,9 @@ const TableStyles = createStyles(
           borderBottomRightRadius: 3,
         },
       },
+      trAsset: {
+        display: 'none',
+      },
       th: {
         ...reset,
         ...getPaddings(theme.spacing['2'], theme.spacing['3']),
@@ -69,12 +98,20 @@ const TableStyles = createStyles(
       td: {
         ...reset,
         verticalAlign: 'middle',
-        // display: 'inline-flex',
       },
       sortIcon: {
         color: theme.other.buttonAction.content.color.primary.default,
         cursor: 'grab',
       },
+      assetBorderBoxLeft: {
+        ...(isAssetList ? assetBorderBoxLeft : {}),
+      },
+      assetBorderBoxCenter: {
+        ...(isAssetList ? assetBorderBoxCenter : {}),
+      },
+      assetBorderBoxRight: {
+        ...(isAssetList ? assetBorderBoxRight : {}),
+      },
     };
   },
 );