chrone: sperate client and server to different repos.

src/components/Datatable/TableRow.js

@@ -0,0 +1,90 @@
+import React, { useCallback, useContext } from 'react';
+import { ContextMenu } from 'components';
+import classNames from 'classnames';
+import useContextMenu from 'react-use-context-menu';
+
+import TableContext from './TableContext';
+import { saveInvoke, ConditionalWrapper } from 'utils';
+
+/**
+ * Table row context wrapper.
+ */
+function TableRowContextMenu({ children, row }) {
+  // Table context.
+  const {
+    props: { ContextMenu: ContextMenuContent },
+    table,
+  } = useContext(TableContext);
+
+  const [
+    bindMenu,
+    bindMenuItem,
+    useContextTrigger,
+    { coords, setVisible, isVisible },
+  ] = useContextMenu();
+
+  const [bindTrigger] = useContextTrigger({
+    collect: () => 'Title',
+  });
+
+  const handleClose = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  return (
+    <div class="tr-context" {...bindTrigger}>
+      {children}
+
+      <ContextMenu
+        bindMenu={bindMenu}
+        isOpen={isVisible}
+        coords={coords}
+        onClosed={handleClose}
+      >
+        <ContextMenuContent {...table} row={row} />
+      </ContextMenu>
+    </div>
+  );
+}
+
+/**
+ * Table row.
+ */
+export default function TableRow({ row, className, style }) {
+  const {
+    props: {
+      TableCellRenderer,
+      rowClassNames,
+      ContextMenu: ContextMenuContent,
+    },
+  } = useContext(TableContext);
+
+  return (
+    <div
+      {...row.getRowProps({
+        className: classNames(
+          'tr',
+          { 'is-expanded': row.isExpanded && row.canExpand },
+          saveInvoke(rowClassNames, row),
+          className,
+        ),
+        style,
+      })}
+    >
+      <ConditionalWrapper
+        condition={ContextMenuContent}
+        wrapper={TableRowContextMenu}
+        row={row}
+      >
+        {row.cells.map((cell, index) => (
+          <TableCellRenderer
+            key={index}
+            cell={cell}
+            row={row}
+            index={index + 1}
+          />
+        ))}
+      </ConditionalWrapper>
+    </div>
+  );
+}