@infinite-table/infinite-react 0.4.13 → 0.5.0

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Ref, useEffect } from 'react';
+
+import { useInternalProps } from '../../hooks/useInternalProps';
+import { join } from '../../../../utils/join';
+
+import { decamelize } from '../../../utils/decamelize';
+import { ThemeVars } from '../../theme.css';
+import { FooterCls } from '../../InfiniteCls.css';
+import { raf } from '../../../../utils/raf';
+
+const defaultStyle: React.CSSProperties = {
+  padding: ThemeVars.spacing[2],
+  textAlign: 'end',
+  opacity: '1',
+  visibility: 'visible',
+  display: 'block',
+  fontSize: '0.85rem',
+  background: 'white',
+  color: 'black',
+};
+
+const anchorStyle: React.CSSProperties = {
+  opacity: 1,
+  visibility: 'visible',
+  display: 'inline-block',
+  pointerEvents: 'all',
+  color: 'black',
+  textDecoration: 'underline',
+};
+
+const enforceStyle = (node: HTMLElement | null, style: React.CSSProperties) => {
+  if (!node) {
+    // TODO protect against Footer node removal
+    return;
+  }
+  for (const [propertyName, propertyValue] of Object.entries(style)) {
+    node.style.setProperty(
+      decamelize(propertyName),
+      propertyValue,
+      'important',
+    );
+  }
+};
+
+export const InfiniteTableLicenseFooter = React.forwardRef(
+  function InfiniteTableLicenseFooter(
+    props: React.HTMLAttributes<HTMLDivElement>,
+    ref: Ref<HTMLDivElement>,
+  ) {
+    const { rootClassName } = useInternalProps();
+
+    const domRef = React.useRef<HTMLDivElement | null>(null);
+    const domCallback = React.useCallback((node: HTMLDivElement | null) => {
+      domRef.current = node;
+      if (!ref) {
+        return;
+      }
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      }
+    }, []);
+
+    useEffect(() => {
+      const forceStyle = () => {
+        raf(() => {
+          enforceStyle(domRef.current, defaultStyle);
+          enforceStyle(
+            domRef.current?.firstElementChild as HTMLElement | null,
+            anchorStyle,
+          );
+        });
+      };
+
+      forceStyle();
+
+      const intervalId = setInterval(forceStyle, 1000);
+
+      return () => {
+        clearInterval(intervalId);
+      };
+    }, []);
+
+    return (
+      <div
+        ref={domCallback}
+        {...props}
+        className={join(
+          `${rootClassName}-Footer`,
+          FooterCls,
+
+          props.className,
+        )}
+        style={defaultStyle}
+      >
+        Powered by{' '}
+        <a
+          href="https://infinite-table.com"
+          rel="noopener noreferrer"
+          role="link"
+          target="_blank"
+        >
+          Infinite Table
+        </a>
+      </div>
+    );
+  },
+);

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import { join } from '../../../../utils/join';
+import { stripVar } from '../../../../utils/stripVar';
+
+import { internalProps } from '../../internalProps';
+import { InternalVars } from '../../theme.css';
+import {
+  cssEllipsisClassName,
+  justifyContent,
+  overflow,
+} from '../../utilities.css';
+import { ColumnCellCls } from '../cell.css';
+
+import { InfiniteTableCellProps } from './InfiniteTableCellTypes';
+
+const { rootClassName } = internalProps;
+
+export const InfiniteTableCellClassName = `${rootClassName}Cell`;
+export const InfiniteTableCellContentClassName = `${rootClassName}Cell_content`;
+
+const columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
+const columnReorderEffectDurationAtIndex = stripVar(
+  InternalVars.columnReorderEffectDurationAtIndex,
+);
+
+function InfiniteTableCellFn<T>(
+  props: InfiniteTableCellProps<T> & React.HTMLAttributes<HTMLElement>,
+) {
+  const {
+    cssEllipsis = true,
+    virtualized = true,
+    skipColumnShifting = false,
+
+    contentStyle,
+    column,
+    domRef,
+    width,
+
+    contentClassName,
+
+    rowId,
+
+    afterChildren,
+    beforeChildren,
+
+    cellType,
+    cssPosition: _cssPosition,
+    renderChildren,
+    ...domProps
+  } = props;
+
+  const children = renderChildren();
+
+  // TODO very important - dont access any context here,
+  // otherwise we'll be re-rendering all cells every time
+  // something changes, and this could be very costly for performance
+  // so remove the call to useInfiniteTableState
+  const style = {
+    width: `var(${columnWidthAtIndex}-${column.computedVisibleIndex})`,
+    transition: `transform var(${columnReorderEffectDurationAtIndex}-${column.computedVisibleIndex}, 0s)`,
+    ...domProps.style,
+  } as React.CSSProperties;
+
+  const finalDOMProps = {
+    ...domProps,
+    style,
+
+    // do not remove this from here, as it's being used by auto sizing - the `useAutoSizeColumns` fn hook
+    'data-column-id': column.id,
+    'data-z-index': style.zIndex,
+    className: join(
+      domProps.className,
+
+      justifyContent[column.align ?? 'start'],
+      InfiniteTableCellClassName,
+      ColumnCellCls,
+      // shifting
+      //   ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}`
+      //   : '',
+    ),
+    children: (
+      <>
+        {beforeChildren}
+        {
+          <div
+            className={join(
+              InfiniteTableCellContentClassName,
+              cssEllipsis ? cssEllipsisClassName : overflow.hidden,
+              contentClassName,
+            )}
+            style={contentStyle}
+          >
+            {children}
+          </div>
+        }
+        {afterChildren}
+      </>
+    ),
+  };
+
+  if (rowId != null) {
+    //@ts-ignore
+    finalDOMProps['data-row-id'] = `${rowId}`;
+  }
+
+  const RenderComponent =
+    cellType === 'body'
+      ? column.components?.ColumnCell
+      : column.components?.HeaderCell;
+  if (RenderComponent) {
+    return <RenderComponent {...finalDOMProps} />;
+  }
+  return <div {...finalDOMProps} ref={domRef} />;
+}
+
+export const InfiniteTableCell = React.memo(
+  InfiniteTableCellFn,
+) as typeof InfiniteTableCellFn;
+// export const TableCell = TableCellFn;

package/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCellTypes.ts

@@ -0,0 +1,74 @@
+import { CSSProperties } from 'react';
+
+import { InfiniteTableComputedColumn } from '../..';
+import { Renderable } from '../../../types/Renderable';
+import { OnResizeFn } from '../../../types/Size';
+import {
+  InfiniteTableRowInfo,
+  InfiniteTablePropGroupRenderStrategy,
+  InfiniteTablePropRowStyle,
+  InfiniteTablePropRowClassName,
+  InfiniteTablePropHeaderOptions,
+} from '../../types';
+import { InfiniteTableToggleGroupRowFn } from '../../types/InfiniteTableColumn';
+
+export type InfiniteTableBaseCellProps<T> = {
+  column: InfiniteTableComputedColumn<T>;
+
+  rowId?: any;
+
+  renderChildren: () => Renderable;
+  width: number;
+  cssEllipsis?: boolean;
+  // children: Renderable;
+  contentStyle?: CSSProperties;
+  contentClassName?: string;
+  virtualized?: boolean;
+  skipColumnShifting?: boolean;
+
+  beforeChildren?: Renderable;
+  afterChildren?: Renderable;
+
+  cssPosition?: CSSProperties['position'];
+  domRef?: React.RefCallback<HTMLElement>;
+};
+export type InfiniteTableCellProps<T> =
+  | ({
+      cellType: 'header';
+    } & InfiniteTableBaseCellProps<T>)
+  | ({
+      cellType: 'body';
+    } & InfiniteTableBaseCellProps<T>);
+
+export interface InfiniteTableColumnCellProps<T>
+  extends Omit<
+    InfiniteTableCellProps<T>,
+    'children' | 'cellType' | 'renderChildren'
+  > {
+  columnsMap: Map<string, InfiniteTableComputedColumn<T>>;
+  fieldsToColumn: Map<keyof T, InfiniteTableComputedColumn<T>>;
+  onMouseEnter?: VoidFunction;
+  onMouseLeave?: VoidFunction;
+  showZebraRows: boolean;
+  virtualized: boolean;
+  hidden: boolean;
+  rowInfo: InfiniteTableRowInfo<T>;
+  groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
+  getData: () => InfiniteTableRowInfo<T>[];
+  toggleGroupRow: InfiniteTableToggleGroupRowFn;
+  rowIndex: number;
+  rowHeight: number;
+  rowStyle?: InfiniteTablePropRowStyle<T>;
+  rowClassName?: InfiniteTablePropRowClassName<T>;
+}
+
+export interface InfiniteTableHeaderCellProps<T>
+  extends Omit<
+    InfiniteTableCellProps<T>,
+    'children' | 'cellType' | 'renderChildren'
+  > {
+  columnsMap: Map<string, InfiniteTableComputedColumn<T>>;
+  height: number;
+  headerOptions: InfiniteTablePropHeaderOptions;
+  onResize?: OnResizeFn;
+}