in-progress virtualization

elastic · Oct 22, 2020 · b0d616f · b0d616f
1 parent a61138c
commit b0d616f
Show file tree

Hide file tree

Showing 12 changed files with 783 additions and 389 deletions.
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -6,6 +6,7 @@ import React, {
   useState,
   createContext,
   useContext,
+  useRef,
 } from 'react';
 import { fake } from 'faker';
 
@@ -158,6 +159,70 @@ const columns = [
   },
 ];
 
+const leadingControlColumns = [
+  {
+    id: 'actions',
+    width: 40,
+    headerCellRender: () => null,
+    rowCellRender: function RowCellRender() {
+      const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+      return (
+        <div>
+          <EuiPopover
+            isOpen={isPopoverOpen}
+            panelPaddingSize="s"
+            anchorPosition="upCenter"
+            button={
+              <EuiButtonIcon
+                aria-label="show actions"
+                iconType="boxesHorizontal"
+                color="text"
+                onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+              />
+            }
+            closePopover={() => setIsPopoverOpen(false)}
+            ownFocus={true}>
+            <EuiPopoverTitle>Actions</EuiPopoverTitle>
+            <div style={{ width: 150 }}>
+              <button onClick={() => {}}>
+                <EuiFlexGroup
+                  alignItems="center"
+                  component="span"
+                  gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      aria-label="Pin selected items"
+                      iconType="pin"
+                      color="text"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>Pin</EuiFlexItem>
+                </EuiFlexGroup>
+              </button>
+              <EuiSpacer size="s" />
+              <button onClick={() => {}}>
+                <EuiFlexGroup
+                  alignItems="center"
+                  component="span"
+                  gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      aria-label="Delete selected items"
+                      iconType="trash"
+                      color="text"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>Delete</EuiFlexItem>
+                </EuiFlexGroup>
+              </button>
+            </div>
+          </EuiPopover>
+        </div>
+      );
+    },
+  },
+];
+
 const trailingControlColumns = [
   {
     id: 'actions',
@@ -183,7 +248,7 @@ const trailingControlColumns = [
             ownFocus={true}>
             <EuiPopoverTitle>Actions</EuiPopoverTitle>
             <div style={{ width: 150 }}>
-              <button onClick={() => {}} component="span">
+              <button onClick={() => {}}>
                 <EuiFlexGroup
                   alignItems="center"
                   component="span"
@@ -285,12 +350,17 @@ export default () => {
     };
   }, []);
 
+  const onColumnResize = useRef((eventData) => {
+    console.log(eventData);
+  });
+
   return (
     <DataContext.Provider value={raw_data}>
       <EuiDataGrid
         aria-label="Data grid demo"
         columns={columns}
         columnVisibility={{ visibleColumns, setVisibleColumns }}
+        leadingControlColumns={leadingControlColumns}
         trailingControlColumns={trailingControlColumns}
         rowCount={raw_data.length}
         renderCellValue={renderCellValue}
@@ -302,9 +372,7 @@ export default () => {
           onChangeItemsPerPage: onChangeItemsPerPage,
           onChangePage: onChangePage,
         }}
-        onColumnResize={(eventData) => {
-          console.log(eventData);
-        }}
+        onColumnResize={onColumnResize.current}
       />
     </DataContext.Provider>
   );

diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
@@ -21,6 +21,7 @@ import React, {
   Fragment,
   useState,
   useMemo,
+  useCallback,
   ReactElement,
   ChangeEvent,
 } from 'react';
@@ -82,18 +83,23 @@ export const useColumnSelector = (
   );
 
   const { visibleColumns, setVisibleColumns } = columnVisibility;
-  const visibleColumnIds = new Set(visibleColumns);
+  const visibleColumnIds = useMemo(() => new Set(visibleColumns), [
+    visibleColumns,
+  ]);
 
   const [isOpen, setIsOpen] = useState(false);
 
-  function setColumns(nextColumns: string[]) {
-    setSortedColumns(nextColumns);
+  const setColumns = useCallback(
+    (nextColumns: string[]) => {
+      setSortedColumns(nextColumns);
 
-    const nextVisibleColumns = nextColumns.filter((id) =>
-      visibleColumnIds.has(id)
-    );
-    setVisibleColumns(nextVisibleColumns);
-  }
+      const nextVisibleColumns = nextColumns.filter((id) =>
+        visibleColumnIds.has(id)
+      );
+      setVisibleColumns(nextVisibleColumns);
+    },
+    [setSortedColumns, setVisibleColumns, visibleColumnIds]
+  );
 
   function onDragEnd({
     source: { index: sourceIndex },
@@ -293,17 +299,20 @@ export const useColumnSelector = (
   /**
    * Used for moving columns left/right, available in the headers actions menu
    */
-  const switchColumnPos = (fromColId: string, toColId: string) => {
-    const moveFromIdx = sortedColumns.indexOf(fromColId);
-    const moveToIdx = sortedColumns.indexOf(toColId);
-    if (moveFromIdx === -1 || moveToIdx === -1) {
-      return;
-    }
-    const nextSortedColumns = [...sortedColumns];
-    nextSortedColumns.splice(moveFromIdx, 1);
-    nextSortedColumns.splice(moveToIdx, 0, fromColId);
-    setColumns(nextSortedColumns);
-  };
+  const switchColumnPos = useCallback(
+    (fromColId: string, toColId: string) => {
+      const moveFromIdx = sortedColumns.indexOf(fromColId);
+      const moveToIdx = sortedColumns.indexOf(toColId);
+      if (moveFromIdx === -1 || moveToIdx === -1) {
+        return;
+      }
+      const nextSortedColumns = [...sortedColumns];
+      nextSortedColumns.splice(moveFromIdx, 1);
+      nextSortedColumns.splice(moveToIdx, 0, fromColId);
+      setColumns(nextSortedColumns);
+    },
+    [setColumns, sortedColumns]
+  );
 
   return [
     columnSelector,