refactor: clickable table rows style

src/components/common/CRNList/cmp.tsx

@@ -335,6 +335,7 @@ export default function CRNList(props: CRNListProps) {
             onSort: handleSortItems,
             rowProps: handleRowProps,
             loadingPlaceholder,
+            clickableRows: true,
           }}
         />
       </div>

src/components/common/EntityTable/cmp.tsx

@@ -1,9 +1,10 @@
 import { memo } from 'react'
 import { StyledTable } from './styles'
 import { TableProps } from '@aleph-front/core'
+import { StyledTableProps } from '../Table'
 
 export const EntityTable = <T extends Record<string, unknown>>(
-  props: TableProps<T>,
+  props: TableProps<T> & StyledTableProps,
 ) => {
   return <StyledTable {...(props as any)} />
 }

src/components/common/NodesTable/styles.tsx

@@ -3,11 +3,13 @@ import { TableProps } from '@aleph-front/core'
 import styled from 'styled-components'
 import tw from 'twin.macro'
 import Table from '../Table'
+import { StyledTableProps as StyledTablePropsBase } from '../Table/types'
 
 export type StyledTableProps<T extends AlephNode> = Omit<
   TableProps<T>,
   'borderType' | 'rowNoise' | 'stickyHeader'
->
+> &
+  StyledTablePropsBase
 
 export const StyledTable = styled(Table as any).attrs(
   (props: StyledTableProps<any>) => {
@@ -24,7 +26,7 @@ export const StyledTable = styled(Table as any).attrs(
     ${tw`whitespace-nowrap`}
   }
 
-  /* 
+  /*
   tbody tr {
     cursor: default;
   } */

src/components/common/Table/index.ts

@@ -1 +1,2 @@
 export { default } from './styles'
+export * from './types'

src/components/common/Table/styles.tsx

@@ -1,10 +1,19 @@
 import tw from 'twin.macro'
 import styled, { css } from 'styled-components'
 import { Table, addClasses } from '@aleph-front/core'
-
-export const StyledTable = styled(Table<any>).attrs(addClasses('tp-body3'))`
-  ${({ theme }) => {
+import { StyledTableProps } from './types'
+
+export const StyledTable = styled(Table<any>).attrs(
+  addClasses('tp-body3'),
+)<StyledTableProps>`
+  ${({
+    theme,
+    clickableRows = false,
+    rowBackgroundColors = ['light0', 'purple1'],
+    hoverHighlight = true,
+  }) => {
     const { duration, timing } = theme.transition
+    const [color1, color2] = rowBackgroundColors
 
     return css`
       .check-button {
@@ -42,13 +51,13 @@ export const StyledTable = styled(Table<any>).attrs(addClasses('tp-body3'))`
 
       tbody {
         tr {
-          cursor: pointer;
-          background: ${({ theme }) => theme.color.purple1};
+          cursor: ${clickableRows ? 'pointer' : 'default'};
+          background: ${theme.color[color2]};
           height: 4rem;
 
           td {
             transition: all ${timing} ${duration.fast}ms 0ms;
-            background: ${theme.color.light0};
+            background: ${theme.color[color1]};
 
             &.fx-noise-light {
               background: ${theme.color.light1};
@@ -57,21 +66,20 @@ export const StyledTable = styled(Table<any>).attrs(addClasses('tp-body3'))`
 
           &:hover,
           &._active {
-            td {
-              color: ${theme.color.main0};
-            }
-
             .check-button {
               visibility: visible;
               opacity: 1;
             }
           }
 
-          &:hover {
-            td {
-              background: ${theme.color.purple4}50;
+          ${hoverHighlight &&
+          css`
+            &:hover {
+              td {
+                background: ${theme.color.purple4}50;
+              }
             }
-          }
+          `}
 
           &._active {
             cursor: not-allowed;

src/components/common/Table/types.ts

@@ -0,0 +1,32 @@
+type ThemeColorKey =
+  | 'white'
+  | 'black'
+  | 'translucid'
+  | 'base0'
+  | 'base1'
+  | 'base2'
+  | 'main0'
+  | 'main1'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'disabled'
+  | 'disabled2'
+  | 'background'
+  | 'contentBackground'
+  | 'foreground'
+  | 'text'
+  | 'light0'
+  | 'light1'
+  | 'purple0'
+  | 'purple1'
+  | 'purple2'
+  | 'purple3'
+  | 'purple4'
+
+export type StyledTableProps = {
+  clickableRows?: boolean
+  rowBackgroundColors?: [ThemeColorKey, ThemeColorKey]
+  hoverHighlight?: boolean
+}

src/components/form/SelectInstanceSpecs/cmp.tsx

@@ -238,6 +238,7 @@ export const SelectInstanceSpecs = memo((props: SelectInstanceSpecsProps) => {
           rowProps={handleRowProps}
           columns={columns}
           data={data}
+          clickableRows
         />
         {specsCtrl.fieldState.error && (
           <FormError error={specsCtrl.fieldState.error} />