feat: auto-assignment by clicking on the row of the table

close #1487
cheminfo · Apr 21, 2022 · 132afb1 · 132afb1
1 parent b593cb6
commit 132afb1
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 26 deletions.
diff --git a/src/component/elements/ReactTable/Elements/ReactTableRow.tsx b/src/component/elements/ReactTable/Elements/ReactTableRow.tsx
@@ -1,11 +1,33 @@
 /** @jsxImportSource @emotion/react */
 
-import { useMemo, forwardRef, useEffect } from 'react';
+import { css, CSSObject } from '@emotion/react';
+import { useMemo, forwardRef, useEffect, useCallback } from 'react';
 
 import { HighlightedSource, useHighlight } from '../../../highlight/index';
-import { HighlightedRowStyle, ConstantlyHighlightedRowStyle } from '../Style';
 
-interface ReactTableRowProps {
+function highlightStyle(isActive: boolean, row): CSSObject {
+  if (isActive) {
+    return { backgroundColor: '#ff6f0057' };
+  } else if (row.original?.isConstantlyHighlighted === true) {
+    return { backgroundColor: '#f5f5dc' };
+  }
+  return {};
+}
+
+const rowCss = css`
+  &:hover {
+    background-color: #ff6f0091 !important;
+  }
+
+  &:active {
+    background-color: #ff6f0070 !important;
+  }
+`;
+
+export interface ClickEvent {
+  onClick?: (event: Event, data: unknown) => void;
+}
+interface ReactTableRowProps extends ClickEvent {
   row: any;
   highlightedSource?: HighlightedSource;
   onContextMenu: () => void;
@@ -28,6 +50,7 @@ function ReactTableRow(props: ReactTableRowProps, ref) {
     row,
     highlightedSource = HighlightedSource.UNKNOWN,
     onContextMenu,
+    onClick,
   } = props;
   const data = useMemo(
     () => ({
@@ -45,22 +68,20 @@ function ReactTableRow(props: ReactTableRowProps, ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const clickHandler = useCallback(
+    (event: Event) => {
+      onClick?.(event, row);
+    },
+    [onClick, row],
+  );
+
   return useMemo(() => {
     return (
       <tr
         ref={ref}
         onContextMenu={onContextMenu}
         key={row.getRowProps().key}
-        css={
-          highlight.isActive
-            ? HighlightedRowStyle
-            : Object.prototype.hasOwnProperty.call(
-                row.original,
-                'isConstantlyHighlighted',
-              ) && row.original.isConstantlyHighlighted === true
-            ? ConstantlyHighlightedRowStyle
-            : null
-        }
+        css={[highlightStyle(highlight.isActive, row), onClick && rowCss]}
         {...row.getRowProps()}
         {...highlight.onHover}
       >
@@ -81,6 +102,7 @@ function ReactTableRow(props: ReactTableRowProps, ref) {
                   return false;
                 }}
                 style={{ padding, ...style }}
+                onClick={clickHandler}
               >
                 {cell.render('Cell')}
               </td>
@@ -89,7 +111,15 @@ function ReactTableRow(props: ReactTableRowProps, ref) {
         })}
       </tr>
     );
-  }, [highlight.isActive, highlight.onHover, onContextMenu, ref, row]);
+  }, [
+    clickHandler,
+    highlight.isActive,
+    highlight.onHover,
+    onClick,
+    onContextMenu,
+    ref,
+    row,
+  ]);
 }
 
 export default forwardRef(ReactTableRow);
diff --git a/src/component/elements/ReactTable/ReactTable.tsx b/src/component/elements/ReactTable/ReactTable.tsx
@@ -18,15 +18,15 @@ import useCombinedRefs from '../../hooks/useCombinedRefs';
 import ContextMenu from '../ContextMenu';
 
 import ReactTableHeader from './Elements/ReactTableHeader';
-import ReactTableRow from './Elements/ReactTableRow';
+import ReactTableRow, { ClickEvent } from './Elements/ReactTableRow';
 import { ReactTableStyle } from './Style';
 import {
   ReactTableProvider,
   useReactTableContext,
 } from './utility/ReactTableContext';
 import useRowSpan, { prepareRowSpan } from './utility/useRowSpan';
 
-interface ReactTableProps {
+interface ReactTableProps extends ClickEvent {
   data: any;
   columns: any;
   highlightedSource?: HighlightedSource;
@@ -61,6 +61,7 @@ const ReactTableInner = forwardRef(function ReactTableInner(
     approxItemHeight = 40,
     enableVirtualScroll = false,
     groupKey,
+    onClick,
   } = props;
 
   const contextRef = useRef<any>(null);
@@ -138,6 +139,7 @@ const ReactTableInner = forwardRef(function ReactTableInner(
                 row={row}
                 {...row.getRowProps()}
                 onContextMenu={(e) => contextMenuHandler(e, row)}
+                onClick={onClick}
                 highlightedSource={highlightedSource}
               />
             );

diff --git a/src/component/elements/ReactTable/Style.ts b/src/component/elements/ReactTable/Style.ts
@@ -1,13 +1,5 @@
 import { css } from '@emotion/react';
 
-const HighlightedRowStyle = css`
-  background-color: #ff6f0057;
-`;
-
-const ConstantlyHighlightedRowStyle = css`
-  background-color: #f5f5dc;
-`;
-
 const ReactTableStyle = css`
   border-spacing: 0;
   border: 1px solid #dedede;
@@ -50,4 +42,4 @@ const ReactTableStyle = css`
   }
 `;
 
-export { ReactTableStyle, HighlightedRowStyle, ConstantlyHighlightedRowStyle };
+export { ReactTableStyle };
diff --git a/src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx b/src/component/panels/AutomaticAssignment/AutomaticAssignmentTable.tsx
@@ -66,7 +66,7 @@ function PeaksTable({ data }: AutomaticAssignmentTableProps) {
   );
 
   return data && data.length > 0 ? (
-    <ReactTable data={data} columns={COLUMNS} />
+    <ReactTable data={data} columns={COLUMNS} onClick={assignHandler} />
   ) : (
     <NoTableData />
   );