@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts

@@ -0,0 +1,358 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { InfiniteClsRecipe } from '../../InfiniteCls.css';
+import { ThemeVars } from '../../theme.css';
+import {
+  alignItems,
+  cssEllipsisClassName,
+  display,
+  flexFlow,
+  height,
+  justifyContent,
+  overflow,
+  position,
+  visibility,
+  width,
+} from '../../utilities.css';
+import {
+  CellBorderObject,
+  CellCls,
+  CellClsVariants,
+  ColumnCellVariantsObject,
+} from '../cell.css';
+
+export { CellCls, CellClsVariants };
+
+export const HeaderSortIconCls = style([position.relative], 'SortIconCls');
+
+export const HeaderSortIconRecipe = recipe({
+  variants: {
+    align: {
+      start: {
+        marginLeft: ThemeVars.components.HeaderCell.sortIconMargin,
+      },
+      center: {
+        marginLeft: ThemeVars.components.HeaderCell.sortIconMargin,
+      },
+      end: {
+        marginRight: ThemeVars.components.HeaderCell.sortIconMargin,
+      },
+    },
+  },
+});
+
+export const HeaderSortIconIndexCls = style({
+  lineHeight: 0,
+  fontSize: 10,
+  borderRadius: '50%',
+  padding: 1,
+  position: 'absolute',
+  transition: 'top 0.2s',
+  top: 0,
+  right: 2,
+});
+
+export const HeaderScrollbarPlaceholderCls = style([
+  {
+    background: ThemeVars.components.Header.background,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+  position.absolute,
+]);
+
+export const HeaderClsRecipe = recipe({
+  base: [
+    // flexFlow.column,
+    display.block,
+    position.absolute,
+    {
+      background: ThemeVars.components.Header.background,
+      color: ThemeVars.components.Header.color,
+    },
+  ],
+
+  variants: {
+    pinned: {
+      start: {},
+      end: {},
+      false: {},
+    },
+    firstInCategory: {
+      true: {},
+      false: {},
+    },
+    lastInCategory: {
+      true: {},
+      false: {},
+    },
+    overflow: {
+      true: { zIndex: 10 },
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        overflow: true,
+        pinned: 'start',
+      },
+      style: {
+        ...ColumnCellVariantsObject.pinnedStartLastInCategory,
+        vars: {},
+      },
+    },
+    {
+      variants: {
+        pinned: 'start',
+        firstInCategory: true,
+      },
+      style: ColumnCellVariantsObject.pinnedStartFirstInCategory,
+    },
+    {
+      variants: {
+        overflow: true,
+        pinned: 'end',
+      },
+      style: {
+        ...ColumnCellVariantsObject.pinnedEndFirstInCategory,
+        vars: {},
+      },
+    },
+    {
+      variants: {
+        pinned: 'end',
+        lastInCategory: true,
+      },
+      style: ColumnCellVariantsObject.pinnedEndLastInCategory,
+    },
+  ],
+});
+
+export const HeaderCellProxy = style([
+  {
+    background: ThemeVars.components.HeaderCell.hoverBackground,
+    color: ThemeVars.components.Cell.color,
+    opacity: 0.8,
+    padding: ThemeVars.components.Cell.padding,
+    paddingLeft: 20,
+    zIndex: 2_000,
+  },
+  cssEllipsisClassName,
+]);
+
+export const HeaderCellRecipe = recipe({
+  base: [
+    {
+      ...CellBorderObject,
+      background: ThemeVars.components.HeaderCell.background,
+      padding: 0,
+      borderRight: ThemeVars.components.Cell.border,
+      ':hover': {
+        background: ThemeVars.components.HeaderCell.hoverBackground,
+      },
+    },
+
+    display.block,
+  ],
+  variants: {
+    rowActive: { false: {}, true: {} },
+    rowSelected: { false: {}, true: {}, null: {} },
+    zebra: {
+      false: {},
+      even: {},
+      odd: {},
+    },
+    dragging: {
+      true: {},
+      false: {},
+    },
+
+    first: {
+      true: ColumnCellVariantsObject.first,
+      false: {},
+    },
+    last: {
+      true: ColumnCellVariantsObject.last,
+      false: {},
+    },
+    groupByField: {
+      true: ColumnCellVariantsObject.groupByField,
+      false: {},
+    },
+    firstInCategory: {
+      true: {
+        ...ColumnCellVariantsObject.firstInCategory,
+      },
+      false: {},
+    },
+    lastInCategory: {
+      true: {
+        ...ColumnCellVariantsObject.lastInCategory,
+      },
+      false: {},
+    },
+    pinned: {
+      start: {
+        ...ColumnCellVariantsObject.pinnedStart,
+
+        zIndex: 10,
+        // vars: {
+        //   [ThemeVars.components.Cell.reorderEffectDuration]: '0',
+        // },
+      },
+      end: {
+        // vars: {
+        //   [ThemeVars.components.Cell.reorderEffectDuration]: '0',
+        // },
+      },
+      false: {},
+    },
+    filtered: {
+      true: {},
+      false: {},
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: {
+        pinned: 'start',
+        lastInCategory: true,
+      },
+      style: {
+        ...ColumnCellVariantsObject.pinnedStartLastInCategory,
+        selectors: {
+          [`${InfiniteClsRecipe({
+            hasPinnedStartOverflow: true,
+          })} &`]: {
+            vars: {
+              [ThemeVars.components.Cell.border]:
+                ThemeVars.components.Cell.borderInvisible,
+            },
+          },
+        },
+      },
+    },
+    {
+      variants: {
+        pinned: 'end',
+        firstInCategory: true,
+      },
+      style: ColumnCellVariantsObject.pinnedEndFirstInCategory,
+    },
+    {
+      variants: {
+        pinned: false,
+        lastInCategory: true,
+      },
+      style: {
+        // selectors: {
+        //   [`${InfiniteClsRecipe({
+        //     hasPinnedEndOverflow: true,
+        //   })} &`]: {
+        borderRight: ThemeVars.components.Cell.border,
+        vars: {
+          // [ThemeVars.components.Cell.border]:
+          //   ThemeVars.components.Cell.borderInvisible,
+        },
+        // },
+        // },
+      },
+    },
+  ],
+});
+
+export const HeaderMenuIconCls = style(
+  [
+    position.relative,
+    display.flex,
+    flexFlow.column,
+
+    justifyContent.spaceAround,
+    visibility.hidden,
+    {
+      cursor: 'context-menu',
+      paddingBlockStart: '2px',
+      paddingBlockEnd: '2px',
+      width: ThemeVars.components.HeaderCell.iconSize,
+      height: ThemeVars.components.HeaderCell.iconSize,
+      selectors: {
+        '&:active': {
+          top: '1px',
+        },
+        [`${HeaderCellRecipe({})}:hover &`]: {
+          visibility: 'visible',
+        },
+      },
+    },
+  ],
+  'MenuIconCls',
+);
+
+export type HeaderCellVariantsType = RecipeVariants<typeof HeaderCellRecipe>;
+
+export const HeaderCellContentRecipe = recipe(
+  {
+    base: [
+      {
+        padding: ThemeVars.components.HeaderCell.padding,
+      },
+      height['100%'],
+      width['100%'],
+      display.flex,
+      flexFlow.row,
+      alignItems.center,
+    ],
+    variants: {
+      filtered: {
+        false: {},
+        true: {},
+      },
+    },
+  },
+  'HeaderCellContentRecipe',
+);
+
+export type HeaderCellContentVariantsType = Required<
+  RecipeVariants<typeof HeaderCellContentRecipe>
+>;
+
+export const HeaderWrapperCls = style([
+  {
+    background: ThemeVars.components.Header.background,
+  },
+  overflow.hidden,
+  position.relative,
+  display.flex,
+  flexFlow.row,
+]);
+
+export const HeaderGroupCls = style([
+  display.flex,
+  flexFlow.row,
+  alignItems.center,
+  {
+    padding: ThemeVars.components.Cell.padding,
+    borderBottom: ThemeVars.components.Cell.border,
+    borderRight: ThemeVars.components.Cell.border,
+    background: ThemeVars.components.HeaderCell.background,
+  },
+]);
+
+export const HeaderFilterCls = style([
+  display.flex,
+  flexFlow.row,
+  alignItems.center,
+  position.relative,
+  {
+    // paddingLeft: ThemeVars.components.HeaderCell.paddingX,
+    // paddingRight: ThemeVars.components.HeaderCell.paddingY,
+
+    borderTop: ThemeVars.components.Cell.border,
+  },
+]);
+
+export const HeaderFilterEditorCls = style([width['100%'], height['100%']]);

package/src/components/InfiniteTable/components/InfiniteTableHeader/index.tsx

@@ -0,0 +1 @@
+export * from './InfiniteTableHeader';

package/src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { computeGroupResize } from '../../../flexbox';
+import { MatrixBrain } from '../../../VirtualBrain/MatrixBrain';
+import { useInfiniteTable } from '../../hooks/useInfiniteTable';
+import {
+  InfiniteTableComputedColumn,
+  InfiniteTablePropColumnSizing,
+} from '../../types';
+import { InfiniteTableComputedColumnGroup } from '../../types/InfiniteTableProps';
+
+import { GroupResizeHandle } from './ResizeHandle/GroupResizeHandle';
+
+export function useColumnGroupResizeHandle<T>(
+  groupColumns: InfiniteTableComputedColumn<T>[],
+  config: {
+    bodyBrain: MatrixBrain;
+    groupHeight: number;
+    columnGroup: InfiniteTableComputedColumnGroup;
+    columnGroupsMaxDepth: number;
+  },
+) {
+  const { bodyBrain, groupHeight, columnGroup, columnGroupsMaxDepth } = config;
+  const {
+    computed: { computedVisibleColumns },
+    getState,
+    getComputed,
+    componentActions,
+  } = useInfiniteTable<T>();
+
+  const lastColumnInGroup = groupColumns[groupColumns.length - 1];
+
+  const computeResizeForDiff = useCallback(
+    (diff: number) => {
+      const state = getState();
+      const { columnSizing, viewportReservedWidth, bodySize } = state;
+
+      const columns = getComputed().computedVisibleColumns;
+
+      let atLeastOneFlex = false;
+
+      const columnSizingWithFlex = columns.reduce((acc, col) => {
+        if (col.computedFlex) {
+          acc[col.id] = { ...columnSizing[col.id], flex: col.computedWidth }; // we explicitly need to have here `{ flex: col.computedWidth }` and not `{ flex: col.computedFlex }`
+          // this is to make the test #advancedcolumnresizing work
+
+          atLeastOneFlex = true;
+        }
+        return acc;
+      }, {} as InfiniteTablePropColumnSizing);
+
+      const columnSizingForResize = atLeastOneFlex
+        ? {
+            // #advancedcolumnresizing-important
+            // yep, this order is correct - first apply current columnSizing from state
+            ...columnSizing,
+
+            // and then for flex columns, we override with actual computed widths from above
+            ...columnSizingWithFlex,
+          }
+        : columnSizing;
+
+      const result = computeGroupResize({
+        availableSize: bodySize.width,
+        reservedWidth: viewportReservedWidth || 0,
+        dragHandleOffset: diff,
+        dragHandlePositionAfter: lastColumnInGroup.computedVisibleIndex,
+        columnSizing: columnSizingForResize,
+        columnGroupSize: groupColumns.length,
+        items: columns.map((c) => {
+          return {
+            id: c.id,
+            resizable: c.computedResizable,
+            computedFlex: c.computedFlex,
+            computedWidth: c.computedWidth,
+            computedMinWidth: c.computedMinWidth,
+            computedMaxWidth: c.computedMaxWidth,
+          };
+        }),
+      });
+
+      return result;
+    },
+    [lastColumnInGroup],
+  );
+
+  const onColumnResize = useCallback(
+    (diff: number) => {
+      const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
+
+      componentActions.viewportReservedWidth = reservedWidth;
+
+      componentActions.columnSizing = columnSizing;
+    },
+    [computeResizeForDiff],
+  );
+
+  const groupResizable = groupColumns.some((c) => c.computedResizable);
+  const resizeHandle = groupResizable ? (
+    <GroupResizeHandle
+      brain={bodyBrain}
+      style={{
+        // height: groupHeight * (columnGroupsMaxDepth - columnGroup.depth + 2),
+        height: groupHeight * (columnGroupsMaxDepth - columnGroup.depth + 2),
+      }}
+      columns={computedVisibleColumns}
+      groupColumns={groupColumns}
+      computeResize={computeResizeForDiff}
+      onResize={onColumnResize}
+    />
+  ) : null;
+
+  return resizeHandle;
+}

package/src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { computeResize } from '../../../flexbox';
+import { useInfiniteTable } from '../../hooks/useInfiniteTable';
+import {
+  InfiniteTableComputedColumn,
+  InfiniteTablePropColumnSizing,
+} from '../../types';
+import { ResizeHandle } from './ResizeHandle';
+
+export function useColumnResizeHandle<T>(
+  column: InfiniteTableComputedColumn<T>,
+) {
+  const {
+    computed: { computedVisibleColumns },
+    getState,
+    getComputed,
+    componentActions,
+  } = useInfiniteTable<T>();
+  const computeResizeForDiff = useCallback(
+    ({
+      diff,
+      shareSpaceOnResize,
+    }: {
+      diff: number;
+      shareSpaceOnResize: boolean;
+    }) => {
+      const state = getState();
+      const { columnSizing, viewportReservedWidth, bodySize } = state;
+
+      const columns = getComputed().computedVisibleColumns;
+
+      let atLeastOneFlex = false;
+
+      const columnSizingWithFlex = columns.reduce((acc, col) => {
+        if (col.computedFlex) {
+          acc[col.id] = { ...columnSizing[col.id], flex: col.computedWidth }; // we explicitly need to have here `{ flex: col.computedWidth }` and not `{ flex: col.computedFlex }`
+          // this is to make the test #advancedcolumnresizing work
+
+          atLeastOneFlex = true;
+        }
+        return acc;
+      }, {} as InfiniteTablePropColumnSizing);
+
+      const columnSizingForResize = atLeastOneFlex
+        ? {
+            // #advancedcolumnresizing-important
+            // yep, this order is correct - first apply current columnSizing from state
+            ...columnSizing,
+
+            // and then for flex columns, we override with actual computed widths from above
+            ...columnSizingWithFlex,
+          }
+        : columnSizing;
+
+      const result = computeResize({
+        shareSpaceOnResize,
+        availableSize: bodySize.width,
+        reservedWidth: viewportReservedWidth || 0,
+        dragHandleOffset: diff,
+        dragHandlePositionAfter: column.computedVisibleIndex,
+        columnSizing: columnSizingForResize,
+        items: columns.map((c) => {
+          return {
+            id: c.id,
+            computedFlex: c.computedFlex,
+            computedWidth: c.computedWidth,
+            computedMinWidth: c.computedMinWidth,
+            computedMaxWidth: c.computedMaxWidth,
+          };
+        }),
+      });
+
+      // TODO I think this can be removed
+
+      // if (
+      //   activeCellIndex &&
+      //   activeCellIndex[1] >= column.computedVisibleIndex
+      // ) {
+      //   const activeColumn = columns[activeCellIndex[1]];
+      //   const currentColumn = columns[column.computedVisibleIndex];
+
+      //   if (activeCellIndex[1] === currentColumn.computedVisibleIndex) {
+      //     setInfiniteColumnWidth(
+      //       currentColumn.computedVisibleIndex,
+      //       currentColumn.computedWidth + result.adjustedDiff,
+      //       domRef.current,
+      //     );
+      //   } else if (activeColumn) {
+      //     setInfiniteColumnOffset(
+      //       activeColumn.computedVisibleIndex,
+      //       activeColumn.computedOffset + result.adjustedDiff,
+      //       domRef.current,
+      //     );
+      //   }
+
+      //   if (
+      //     shareSpaceOnResize &&
+      //     activeCellIndex[1] === currentColumn.computedVisibleIndex + 1 &&
+      //     activeColumn
+      //   ) {
+      //     setInfiniteColumnWidth(
+      //       activeColumn.computedVisibleIndex,
+      //       activeColumn.computedWidth - result.adjustedDiff,
+      //       domRef.current,
+      //     );
+      //   }
+      // }
+
+      return result;
+    },
+    [column],
+  );
+
+  const onColumnResize = useCallback(
+    ({
+      diff,
+      shareSpaceOnResize,
+    }: {
+      diff: number;
+      shareSpaceOnResize: boolean;
+    }) => {
+      const { columnSizing, reservedWidth } = computeResizeForDiff({
+        diff,
+        shareSpaceOnResize,
+      });
+
+      if (!shareSpaceOnResize) {
+        componentActions.viewportReservedWidth = reservedWidth;
+      }
+      componentActions.columnSizing = columnSizing;
+    },
+    [computeResizeForDiff],
+  );
+
+  const resizeHandle = column.computedResizable ? (
+    <ResizeHandle
+      columns={computedVisibleColumns}
+      columnIndex={column.computedVisibleIndex}
+      computeResize={computeResizeForDiff}
+      onResize={onColumnResize}
+    />
+  ) : null;
+
+  return resizeHandle;
+}

package/src/components/InfiniteTable/components/InfiniteTableLicenseFooter/footer.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+import { ThemeVars } from '../../theme.css';
+
+export const FooterCls = style({
+  padding: ThemeVars.spacing[2],
+  position: 'relative',
+});