@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/InfiniteTable/components/cell.css.ts

@@ -0,0 +1,192 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { InfiniteClsShiftingColumns } from '../InfiniteCls.css';
+
+import { ThemeVars } from '../theme.css';
+import {
+  alignItems,
+  display,
+  flexFlow,
+  position,
+  userSelect,
+  whiteSpace,
+  willChange,
+} from '../utilities.css';
+
+export const columnAlignCellStyle = styleVariants({
+  center: { justifyContent: 'center' },
+  start: { justifyContent: 'flex-start' },
+  end: { justifyContent: 'flex-start', flexFlow: 'row-reverse' },
+});
+
+export const CellBorderObject = {
+  borderLeft: `${ThemeVars.components.Cell.borderWidth} solid transparent`,
+  borderRight: `${ThemeVars.components.Cell.borderWidth} solid transparent`,
+};
+
+export const CellClsVariants = styleVariants({
+  shifting: {
+    transition: 'left 300ms',
+  },
+  dragging: {
+    transition: 'none',
+  },
+});
+
+export const CellCls = style([
+  display.flex,
+  flexFlow.row,
+  alignItems.center,
+  position.absolute,
+  willChange.transform,
+  whiteSpace.nowrap,
+  userSelect.none,
+  {
+    padding: ThemeVars.components.Cell.padding,
+    ...CellBorderObject,
+  },
+]);
+
+export const ColumnCellCls = style([
+  CellCls,
+  {
+    selectors: {
+      [`${InfiniteClsShiftingColumns} &`]: {
+        // color: 'red',
+        transition: `transform ${ThemeVars.components.Cell.reorderEffectDuration}`,
+      },
+    },
+  },
+]);
+
+export const ColumnCellVariantsObject = {
+  first: {
+    borderTopLeftRadius: ThemeVars.components.Cell.borderRadius,
+    borderBottomLeftRadius: ThemeVars.components.Cell.borderRadius,
+  },
+  last: {
+    borderTopRightRadius: ThemeVars.components.Cell.borderRadius,
+    borderBottomRightRadius: ThemeVars.components.Cell.borderRadius,
+  },
+  groupByField: {},
+  firstInCategory: {},
+  lastInCategory: {},
+  pinnedStart: {},
+  pinnedEnd: {},
+  unpinned: {},
+  pinnedStartLastInCategory: {},
+  pinnedStartFirstInCategory: {},
+  pinnedEndFirstInCategory: {},
+  pinnedEndLastInCategory: {},
+};
+
+export const SelectionCheckboxCls = style({
+  marginInline: ThemeVars.components.SelectionCheckBox.marginInline,
+});
+
+export const ColumnCellRecipe = recipe({
+  base: [
+    {
+      color: ThemeVars.components.Cell.color,
+    },
+  ],
+  variants: {
+    dragging: { false: {}, true: {} },
+    rowActive: {
+      false: {},
+      true: {},
+    },
+    zebra: {
+      false: {},
+      even: {
+        background: ThemeVars.components.Row.background,
+      },
+      odd: {
+        background: ThemeVars.components.Row.oddBackground,
+      },
+    },
+    rowSelected: {
+      true: {
+        background: ThemeVars.components.Row.selectedBackground,
+      },
+      false: {},
+      null: {},
+    },
+    first: {
+      true: {
+        borderTopLeftRadius: ThemeVars.components.Cell.borderRadius,
+        borderBottomLeftRadius: ThemeVars.components.Cell.borderRadius,
+      },
+      false: {},
+    },
+    last: {
+      true: {
+        borderTopRightRadius: ThemeVars.components.Cell.borderRadius,
+        borderBottomRightRadius: ThemeVars.components.Cell.borderRadius,
+      },
+      false: {},
+    },
+    groupByField: {
+      true: ColumnCellVariantsObject.groupByField,
+      false: {},
+    },
+    firstInCategory: {
+      true: ColumnCellVariantsObject.firstInCategory,
+      false: {},
+    },
+    lastInCategory: {
+      true: ColumnCellVariantsObject.lastInCategory,
+      false: {},
+    },
+    pinned: {
+      start: {
+        // 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,
+    },
+    {
+      variants: {
+        pinned: 'start',
+        firstInCategory: true,
+      },
+      style: ColumnCellVariantsObject.pinnedStartFirstInCategory,
+    },
+    {
+      variants: {
+        pinned: 'end',
+        firstInCategory: true,
+      },
+      style: ColumnCellVariantsObject.pinnedEndFirstInCategory,
+    },
+    {
+      variants: {
+        pinned: 'end',
+        lastInCategory: true,
+      },
+      style: ColumnCellVariantsObject.pinnedEndLastInCategory,
+    },
+  ],
+});
+
+export type ColumnCellVariantsType = RecipeVariants<typeof ColumnCellRecipe>;

package/src/components/InfiniteTable/components/icons/ArrowDown.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { TableIconProps, Icon } from './Icon';
+
+export const ArrowDown = (props: Omit<TableIconProps, 'children'>) => {
+  return (
+    <Icon {...props}>
+      <path
+        fill="currentColor"
+        d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"
+      />
+    </Icon>
+  );
+};

package/src/components/InfiniteTable/components/icons/ArrowUp.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { TableIconProps, Icon } from './Icon';
+
+export const ArrowUp = (props: Omit<TableIconProps, 'children'>) => {
+  return (
+    <Icon {...props}>
+      <path
+        fill="currentColor"
+        d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"
+      />
+    </Icon>
+  );
+};

package/src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { cursor, fill, flex, transform } from '../../utilities.css';
+
+export const ExpanderIconCls = style([
+  fill.accentColor,
+  flex.none,
+  cursor.pointer,
+]);
+
+export const ExpanderIconClsVariants = recipe({
+  variants: {
+    expanded: {
+      true: transform.rotate90,
+      false: {},
+    },
+    direction: {
+      end: {},
+      start: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        expanded: false,
+        direction: 'end',
+      },
+      style: transform.rotate180,
+    },
+  ],
+});

package/src/components/InfiniteTable/components/icons/ExpanderIcon.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+import { join } from '../../../../utils/join';
+import { isControlled } from '../../../utils/isControlled';
+import { ExpanderIconCls, ExpanderIconClsVariants } from './ExpanderIcon.css';
+import { InfiniteTableIconClassName } from './InfiniteTableIconClassName';
+
+type ExpanderIconProps = {
+  size?: number;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onChange?: (expanded: boolean) => void;
+  style?: React.CSSProperties;
+  className?: string;
+  direction?: 'end' | 'start';
+};
+
+export function ExpanderIcon(props: ExpanderIconProps) {
+  const { size = 24, direction = 'start' } = props;
+
+  const [expanded, setExpanded] = useState(
+    props.expanded ?? props.defaultExpanded,
+  );
+
+  const onClick = () => {
+    props.onChange?.(!expanded);
+    if (!isControlled('expanded', props)) {
+      setExpanded(!expanded);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isControlled('expanded', props)) {
+      setExpanded(props.expanded);
+    }
+  }, [props.expanded]);
+  return (
+    <svg
+      data-name="expander-icon"
+      xmlns="http://www.w3.org/2000/svg"
+      height={`${size}px`}
+      viewBox="0 0 24 24"
+      width={`${size}px`}
+      style={props.style}
+      onClick={onClick}
+      className={join(
+        props.className,
+        ExpanderIconCls,
+        ExpanderIconClsVariants({
+          direction: direction || 'start',
+          expanded,
+        }),
+        `${InfiniteTableIconClassName}`,
+        `${InfiniteTableIconClassName}-expander`,
+        `InfiniteIcon-expander--${expanded ? 'expanded' : 'collapsed'}`,
+        `InfiniteIcon-expander--${direction === 'end' ? 'end' : 'start'}`,
+      )}
+    >
+      <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+    </svg>
+  );
+}

package/src/components/InfiniteTable/components/icons/Icon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export type TableIconProps = {
+  children: React.ReactNode;
+  size?: number;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+export const Icon = (props: TableIconProps) => {
+  const size = props.size ?? `var(--ITableHeaderCell-icon-size)`;
+  const style = { flex: 'none', width: size, height: size, ...props.style };
+  return (
+    //@ts-ignore
+    <svg viewBox="0 0 24 24" {...props} style={style}>
+      {props.children}
+    </svg>
+  );
+};

package/src/components/InfiniteTable/components/icons/InfiniteTableIconClassName.ts

@@ -0,0 +1 @@
+export const InfiniteTableIconClassName = 'InfiniteTableIcon';

package/src/components/InfiniteTable/components/icons/LoadingIcon.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+import { cursor, stroke, flex } from '../../utilities.css';
+
+export const LoadingIconCls = style([
+  stroke.accentColor,
+  flex.none,
+  cursor.pointer,
+]);

package/src/components/InfiniteTable/components/icons/LoadingIcon.tsx

@@ -0,0 +1,45 @@
+import { TableIconProps } from './Icon';
+import * as React from 'react';
+import { join } from '../../../../utils/join';
+import { LoadingIconCls } from './LoadingIcon.css';
+
+export const LoadingIcon = (props: Omit<TableIconProps, 'children'>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        margin: 'auto',
+        display: 'block',
+        shapeRendering: 'auto',
+      }}
+      width="24px"
+      height="24px"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      className={join(
+        props.className,
+        LoadingIconCls,
+        'InfiniteIcon',
+        'InfiniteIcon-loading',
+      )}
+    >
+      <circle
+        cx="50"
+        cy="50"
+        fill="none"
+        strokeWidth="10"
+        r="35"
+        strokeDasharray="164.93361431346415 56.97787143782138"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          repeatCount="indefinite"
+          dur="1s"
+          values="0 50 50;360 50 50"
+          keyTimes="0;1"
+        />
+      </circle>
+    </svg>
+  );
+};

package/src/components/InfiniteTable/components/icons/MenuIcon.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { join } from '../../../../utils/join';
+import { ThemeVars } from '../../theme.css';
+
+import { HeaderMenuIconCls } from '../InfiniteTableHeader/header.css';
+import { InfiniteTableIconClassName } from './InfiniteTableIconClassName';
+
+type MenuIconProps = {
+  lineWidth?: number;
+  lineStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  className?: string;
+  domProps?: React.HTMLAttributes<HTMLDivElement>;
+};
+
+const defaultLineStyle: React.CSSProperties = {
+  width: '100%',
+  pointerEvents: 'none',
+};
+
+const lineClassName = `${InfiniteTableIconClassName}-menu`;
+
+export function MenuIcon(props: MenuIconProps) {
+  const { style, className, domProps } = props;
+
+  const lineStyle = {
+    ...defaultLineStyle,
+    borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`,
+    ...props.lineStyle,
+  };
+
+  return (
+    <div
+      {...domProps}
+      style={style}
+      onPointerDown={(e) => e.stopPropagation()}
+      className={join(
+        className,
+        HeaderMenuIconCls,
+        InfiniteTableIconClassName,
+        `${InfiniteTableIconClassName}-menu`,
+      )}
+    >
+      <div className={lineClassName} style={lineStyle}></div>
+      <div className={lineClassName} style={lineStyle}></div>
+      <div className={lineClassName} style={lineStyle}></div>
+    </div>
+  );
+}

package/src/components/InfiniteTable/components/icons/SortIcon.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import { join } from '../../../../utils/join';
+import { HeaderSortIconIndexCls } from '../InfiniteTableHeader/header.css';
+import { InfiniteTableIconClassName } from './InfiniteTableIconClassName';
+
+type SortIconProps = {
+  direction: 1 | -1 | 0;
+  size?: number;
+  lineWidth?: number;
+  lineStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  className?: string;
+  index?: number;
+};
+
+const defaultLineStyle: React.CSSProperties = {
+  marginTop: 2,
+  marginBottom: 2,
+  transition: `width 0.25s, opacity 0.25s`,
+};
+
+export function SortIcon(props: SortIconProps) {
+  const [rendered, setRendered] = useState(true);
+  const [opacity, setOpacity] = useState(0);
+
+  const { direction, lineWidth = 1, style, className, index } = props;
+
+  const showIndex = index != null && index > 0;
+
+  const size = props.size ?? 16;
+
+  const part = Math.floor(size / 4);
+
+  const sizes = direction
+    ? [size - 3 * part, size - 2 * part, size - part]
+    : [0, 0, 0];
+
+  if (direction === -1) {
+    sizes.reverse();
+  }
+
+  const lineStyle = {
+    ...defaultLineStyle,
+    borderTop: `${lineWidth}px solid currentColor`,
+    ...props.lineStyle,
+    opacity,
+  };
+
+  useEffect(() => {
+    const newOpacity = direction != 0 ? 1 : 0;
+
+    if (!rendered && newOpacity) {
+      setRendered(true);
+    }
+    if (newOpacity !== opacity) {
+      const rafId = requestAnimationFrame(() => {
+        setOpacity(newOpacity);
+      });
+
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
+    }
+    return () => {};
+  }, [direction, rendered]);
+
+  const onTransitionEnd = () => {
+    const hidden = opacity === 0 && direction === 0;
+    const newRendered = !hidden;
+    if (newRendered !== rendered) {
+      setRendered(newRendered);
+    }
+  };
+
+  if (!rendered) {
+    return null;
+  }
+
+  const indexStyle: React.CSSProperties = {};
+
+  if (direction === -1) {
+    indexStyle.top = '100%';
+  }
+
+  return (
+    <div
+      style={{ ...style, width: size }}
+      className={join(
+        className,
+        InfiniteTableIconClassName,
+        `${InfiniteTableIconClassName}-sort`,
+      )}
+    >
+      {showIndex ? (
+        <div
+          data-name="index"
+          style={indexStyle}
+          className={HeaderSortIconIndexCls}
+        >
+          {index}
+        </div>
+      ) : null}
+      <div
+        style={{ width: sizes[0], ...lineStyle }}
+        onTransitionEnd={onTransitionEnd}
+      ></div>
+      <div style={{ width: sizes[1], ...lineStyle }}></div>
+      <div style={{ width: sizes[2], ...lineStyle }}></div>
+    </div>
+  );
+}

package/src/components/InfiniteTable/eventHandlers/eventHandlerTypes.ts

@@ -0,0 +1,57 @@
+import {
+  DataSourceState,
+  DataSourceComponentActions,
+  RowSelectionState,
+} from '../../DataSource';
+import { InfiniteTableSelectionApi } from '../api/getSelectionApi';
+import {
+  InfiniteTableApi,
+  InfiniteTableComputedValues,
+  InfiniteTableState,
+} from '../types';
+import { InfiniteTableActions } from '../types/InfiniteTableState';
+
+export type InfiniteTableEventHandlerAbstractContext<T> = {
+  getComputed: () => InfiniteTableComputedValues<T>;
+  getState: () => {
+    activeRowIndex: InfiniteTableState<T>['activeRowIndex'];
+    activeCellIndex: InfiniteTableState<T>['activeCellIndex'];
+    keyboardNavigation: InfiniteTableState<T>['keyboardNavigation'];
+    keyboardSelection: InfiniteTableState<T>['keyboardSelection'];
+  };
+  actions: InfiniteTableActions<T>;
+  cloneRowSelection: (
+    rowSelection: RowSelectionState<T>,
+  ) => RowSelectionState<T>;
+  getDataSourceState: () => {
+    rowSelection: DataSourceState<T>['rowSelection'];
+    groupBy: DataSourceState<T>['groupBy'];
+    selectionMode: DataSourceState<T>['selectionMode'];
+    dataArray: { id: string; isGroupRow: boolean; groupKeys?: any[] }[];
+  };
+  dataSourceActions: DataSourceComponentActions<T>;
+  api: {
+    selectionApi: InfiniteTableSelectionApi;
+  };
+};
+
+export type InfiniteTableEventHandlerContext<T> = {
+  getComputed: () => InfiniteTableComputedValues<T>;
+  getState: () => InfiniteTableState<T>;
+  actions: InfiniteTableActions<T>;
+  cloneRowSelection: (
+    rowSelection: RowSelectionState<T>,
+  ) => RowSelectionState<T>;
+  getDataSourceState: () => DataSourceState<T>;
+  dataSourceActions: DataSourceComponentActions<T>;
+  api: InfiniteTableApi<T>;
+};
+
+export type InfiniteTableKeyboardEventHandlerContext<T> =
+  InfiniteTableEventHandlerContext<T>;
+
+export type InfiniteTableCellClickEventHandlerContext<T> =
+  InfiniteTableEventHandlerContext<T> & {
+    rowIndex: number;
+    colIndex: number;
+  };