improve exports and release version patch

infinite-table · Oct 17, 2024 · e76dd95 · e76dd95
1 parent 03a0018
commit e76dd95
Show file tree

Hide file tree

Showing 13 changed files with 432 additions and 41 deletions.
diff --git a/examples/src/pages/tests/table/context-menus/custom-filter-menu.page.tsx b/examples/src/pages/tests/table/context-menus/custom-filter-menu.page.tsx
@@ -0,0 +1,223 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  InfiniteTablePropColumns,
+  DataSource,
+  useInfiniteHeaderCell,
+  useInfinitePortalContainer,
+  alignNode,
+  InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+import { createPortal } from 'react-dom';
+import { FilterIcon } from 'lucide-react';
+
+type Developer = {
+  id: number;
+
+  firstName: string;
+  lastName: string;
+
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+
+  age: number;
+};
+
+const data: Developer[] = [
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Bob',
+    age: 20,
+    canDesign: 'yes',
+    currency: 'USD',
+    preferredLanguage: 'JavaScript',
+    stack: 'frontend',
+  },
+  {
+    id: 2,
+    firstName: 'Marry',
+    lastName: 'Bob',
+    age: 25,
+    canDesign: 'yes',
+    currency: 'USD',
+    preferredLanguage: 'JavaScript',
+    stack: 'frontend',
+  },
+  {
+    id: 3,
+    firstName: 'Bill',
+    lastName: 'Bobson',
+    age: 30,
+    canDesign: 'no',
+    currency: 'CAD',
+    preferredLanguage: 'TypeScript',
+    stack: 'frontend',
+  },
+  {
+    id: 4,
+    firstName: 'Mark',
+    lastName: 'Twain',
+    age: 31,
+    canDesign: 'yes',
+    currency: 'CAD',
+    preferredLanguage: 'Rust',
+    stack: 'backend',
+  },
+  {
+    id: 5,
+    firstName: 'Matthew',
+    lastName: 'Hilson',
+    age: 29,
+    canDesign: 'yes',
+    currency: 'CAD',
+    preferredLanguage: 'Go',
+    stack: 'backend',
+  },
+];
+
+function ColumnFilterMenuIcon() {
+  const { renderBag, htmlElementRef: alignToRef } = useInfiniteHeaderCell();
+
+  const portalContainer = useInfinitePortalContainer();
+
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!domRef.current || !alignToRef.current) {
+      return;
+    }
+
+    alignNode(domRef.current, {
+      alignTo: alignToRef.current,
+      alignPosition: [
+        ['TopRight', 'BottomRight'],
+        ['TopRight', 'BottomRight'],
+      ],
+    });
+  });
+
+  const domRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      onMouseDown={(e) => {
+        if (e.nativeEvent) {
+          // @ts-ignore
+          e.nativeEvent.__insideMenu = true;
+        }
+      }}
+      onPointerDown={(event) => {
+        event.stopPropagation();
+
+        if (visible) {
+          setVisible(false);
+          return;
+        }
+
+        setVisible(true);
+
+        function handleMouseDown(event: MouseEvent) {
+          // @ts-ignore
+          if (event.__insideMenu !== true) {
+            setVisible(false);
+            document.documentElement.removeEventListener(
+              'mousedown',
+              handleMouseDown,
+            );
+          }
+        }
+        document.documentElement.addEventListener('mousedown', handleMouseDown);
+      }}
+    >
+      <FilterIcon size={16} />
+      {createPortal(
+        <div
+          ref={domRef}
+          style={{
+            position: 'absolute',
+            color: 'white',
+            top: 0,
+            overflow: 'visible',
+            background: 'var(--infinite-background)',
+            border: `1px solid currentColor`,
+            left: 0,
+            width: 200,
+            padding: 10,
+            display: visible ? 'block' : 'none',
+          }}
+        >
+          {renderBag.filterEditor}
+        </div>,
+        portalContainer!,
+      )}
+    </div>
+  );
+}
+
+const customHeader: InfiniteTableColumn<any>['renderHeader'] = ({
+  renderBag,
+}) => {
+  return (
+    <>
+      {renderBag.header}
+      <div style={{ flex: 1 }}></div>
+
+      {renderBag.filterIcon}
+
+      {renderBag.menuIcon}
+      <ColumnFilterMenuIcon />
+    </>
+  );
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  firstName: {
+    field: 'firstName',
+    renderHeader: customHeader,
+    defaultFilterable: false,
+  },
+  age: {
+    field: 'age',
+    type: 'number',
+
+    renderHeader: customHeader,
+  },
+
+  stack: { field: 'stack', renderMenuIcon: false },
+  currency: { field: 'currency' },
+};
+
+export default () => {
+  return (
+    <>
+      <React.StrictMode>
+        <DataSource<Developer>
+          data={data}
+          primaryKey="id"
+          defaultFilterValue={[]}
+        >
+          <InfiniteTable<Developer>
+            domProps={{
+              style: {
+                margin: '5px',
+
+                height: '80vh',
+                width: '80vw',
+                border: '1px solid gray',
+                position: 'relative',
+              },
+            }}
+            showColumnFilters={true}
+            columnDefaultWidth={300}
+            columnMinWidth={50}
+            columns={columns}
+          />
+        </DataSource>
+      </React.StrictMode>
+    </>
+  );
+};
diff --git a/...mponents/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx b/...mponents/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
@@ -4,6 +4,7 @@ import { join } from '../../../../utils/join';
 
 import { useInfiniteTable } from '../../hooks/useInfiniteTable';
 import { useInfiniteTableState } from '../../hooks/useInfiniteTableState';
+import { height } from '../../utilities.css';
 import { FilterIcon } from '../icons/FilterIcon';
 
 import { getColumnLabel } from './getColumnLabel';
@@ -109,8 +110,7 @@ export function InfiniteTableColumnHeaderFilterEmpty() {
       onPointerDown={stopPropagation}
       className={`${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterRecipe(
         { active: false },
-      )}`}
-      style={{ height: '100%' }}
+      )} ${height['50%']}`}
     />
   );
 }

diff --git a/...e/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx b/...e/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
@@ -268,10 +268,13 @@ export function InfiniteTableHeaderCell<T>(
     column.components?.MenuIcon || components?.MenuIcon || MenuIcon;
   const menuIcon = <MenuIconCmp {...menuIconProps} />;
 
+  const domRef = useRef<HTMLElement | null>(null);
+
   const initialRenderParam: InfiniteTableColumnHeaderParam<T> = {
     horizontalLayoutPageIndex,
     dragging,
     domRef: ref,
+    htmlElementRef: domRef,
     insideColumnMenu: false,
     column,
     columnsMap,
@@ -466,8 +469,6 @@ export function InfiniteTableHeaderCell<T>(
     return all;
   };
 
-  const domRef = useRef<HTMLElement | null>(null);
-
   useEffect(() => {
     let clearOnResize: null | (() => void) = null;
     const node = domRef.current;
@@ -593,6 +594,27 @@ export function InfiniteTableHeaderCell<T>(
     'data-sort-index': `${column.computedSortIndex ?? -1}`,
   };
 
+  const columnFilterEditor = column.computedFilterable ? (
+    <InfiniteTableColumnHeaderFilter
+      horizontalLayoutPageIndex={horizontalLayoutPageIndex}
+      filterEditor={FilterEditor}
+      filterOperatorSwitch={
+        FilterOperatorSwitch ?? InfiniteTableFilterOperatorSwitch
+      }
+      operator={operator}
+      filterTypes={filterTypes}
+      onChange={debouncedOnFilterValueChange}
+      columnFilterType={filterTypeKey}
+      columnLabel={column.field || column.name || column.id}
+      columnFilterValue={column.computedFilterValue}
+      columnHeaderHeight={columnHeaderHeight}
+    />
+  ) : (
+    <InfiniteTableColumnHeaderFilterEmpty />
+  );
+
+  renderParam.renderBag.filterEditor = columnFilterEditor;
+
   return (
     <ContextProvider value={renderParam}>
       <InfiniteTableCell<T>
@@ -643,26 +665,7 @@ export function InfiniteTableHeaderCell<T>(
         cssEllipsis={headerCSSEllipsis}
         afterChildren={
           <>
-            {showColumnFilters ? (
-              column.computedFilterable ? (
-                <InfiniteTableColumnHeaderFilter
-                  horizontalLayoutPageIndex={horizontalLayoutPageIndex}
-                  filterEditor={FilterEditor}
-                  filterOperatorSwitch={
-                    FilterOperatorSwitch ?? InfiniteTableFilterOperatorSwitch
-                  }
-                  operator={operator}
-                  filterTypes={filterTypes}
-                  onChange={debouncedOnFilterValueChange}
-                  columnFilterType={filterTypeKey}
-                  columnLabel={column.field || column.name || column.id}
-                  columnFilterValue={column.computedFilterValue}
-                  columnHeaderHeight={columnHeaderHeight}
-                />
-              ) : (
-                <InfiniteTableColumnHeaderFilterEmpty />
-              )
-            ) : null}
+            {showColumnFilters ? columnFilterEditor : null}
             {resizeHandle}
           </>
         }

diff --git a/source/src/components/InfiniteTable/hooks/useInfinitePortalContainer.ts b/source/src/components/InfiniteTable/hooks/useInfinitePortalContainer.ts
@@ -0,0 +1,13 @@
+import { useMasterDetailContext } from '../../DataSource/publicHooks/useDataSourceState';
+import { useInfiniteTable } from './useInfiniteTable';
+
+export function useInfinitePortalContainer() {
+  const masterContext = useMasterDetailContext();
+
+  const masterState = masterContext ? masterContext.getMasterState() : null;
+  const infiniteState = useInfiniteTable().getState();
+
+  const portalContainer = (masterState || infiniteState).portalDOMRef.current;
+
+  return portalContainer;
+}
diff --git a/source/src/components/InfiniteTable/index.tsx b/source/src/components/InfiniteTable/index.tsx
@@ -93,6 +93,7 @@ import { DEBUG_NAME } from './InfiniteDebugName';
 import { useToggleWrapRowsHorizontally } from './hooks/useToggleWrapRowsHorizontally';
 import { useHorizontalLayout } from './hooks/useHorizontalLayout';
 import { useDebugMode } from './hooks/useDebugMode';
+import { useInfinitePortalContainer } from './hooks/useInfinitePortalContainer';
 
 export const InfiniteTableClassName = internalProps.rootClassName;
 
@@ -605,6 +606,7 @@ export {
   useInfiniteHeaderCell,
   useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor,
+  useInfinitePortalContainer,
   eventMatchesKeyboardShortcut,
   useGridScroll,
   useVisibleColumnSizes,

diff --git a/source/src/components/InfiniteTable/types/InfiniteTableColumn.ts b/source/src/components/InfiniteTable/types/InfiniteTableColumn.ts
@@ -68,11 +68,13 @@ export type InfiniteTableColumnHeaderParam<
     menuIcon?: Renderable;
     menuIconProps?: MenuIconProps;
     filterIcon?: Renderable;
+    filterEditor?: Renderable;
     selectionCheckBox?: Renderable;
   };
 } & (
   | {
       domRef: InfiniteTableCellProps<DATA_TYPE>['domRef'];
+      htmlElementRef: React.MutableRefObject<HTMLElement | null>;
       insideColumnMenu: false;
     }
   | {
@@ -160,6 +162,7 @@ export type InfiniteTableColumnCellContextType<
 export type InfiniteTableHeaderCellContextType<DATA_TYPE> =
   InfiniteTableColumnHeaderParam<DATA_TYPE> & {
     domRef: InfiniteTableCellProps<DATA_TYPE>['domRef'];
+    htmlElementRef: React.MutableRefObject<HTMLElement | null>;
     insideColumnMenu: false;
   };
 

diff --git a/source/src/components/InfiniteTable/types/index.ts b/source/src/components/InfiniteTable/types/index.ts
@@ -57,6 +57,7 @@ import type {
   InfiniteTablePropMultiSortBehavior,
   InfiniteTablePropKeyboardShorcut,
   InfiniteTablePropColumnGroupVisibility,
+  InfiniteTablePropGetContextMenuItems,
 } from './InfiniteTableProps';
 import type { InfiniteTableState } from './InfiniteTableState';
 
@@ -115,4 +116,5 @@ export type {
   InfiniteTableColumnValueFormatterParams,
   ScrollStopInfo,
   TableRenderRange,
+  InfiniteTablePropGetContextMenuItems,
 };
diff --git a/source/src/components/InfiniteTable/utilities.css.ts b/source/src/components/InfiniteTable/utilities.css.ts
@@ -105,6 +105,7 @@ export const userSelect = styleVariants({
 
 export const height = styleVariants({
   '100%': { height: '100%' },
+  '50%': { height: '50%' },
   '0': { height: '0' },
 });
 export const width = styleVariants({