@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/InfiniteTable/components/CheckBox.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useEffect, useRef } from 'react';
+import { join } from '../../../utils/join';
+import {
+  ForwardPropsToStateFnResult,
+  getComponentStateRoot,
+  useComponentState,
+} from '../../hooks/useComponentState';
+import { NonUndefined } from '../../types/NonUndefined';
+import { CheckBoxCls } from './CheckBox.css';
+
+export type InfiniteCheckBoxPropChecked = true | false | null;
+export type InfiniteCheckBoxProps = {
+  disabled?: boolean;
+  checked?: InfiniteCheckBoxPropChecked;
+  defaultChecked?: InfiniteCheckBoxPropChecked;
+  onChange?: (checked: InfiniteCheckBoxPropChecked) => void;
+  domProps?: React.HTMLProps<HTMLElement>;
+};
+
+export type InfiniteCheckBoxMappedState = {
+  checked: NonUndefined<InfiniteCheckBoxProps['checked']>;
+  disabled: NonUndefined<InfiniteCheckBoxProps['disabled']>;
+  domProps: InfiniteCheckBoxProps['domProps'];
+};
+
+function forwardProps(): ForwardPropsToStateFnResult<
+  InfiniteCheckBoxProps,
+  InfiniteCheckBoxMappedState
+> {
+  return {
+    checked: 1,
+    disabled: (disabled) => disabled ?? false,
+    domProps: 1,
+  };
+}
+
+export interface InfiniteCheckBoxState extends InfiniteCheckBoxMappedState {}
+
+const InfiniteCheckBoxRoot = getComponentStateRoot({
+  // @ts-ignore
+  forwardProps,
+  // @ts-ignore
+  // mapPropsToState,
+  // @ts-ignore
+  // cleanup: cleanupState,
+  // @ts-ignore,
+  mappedCallbacks: {
+    checked: (checked) => {
+      return {
+        callbackName: 'onChange',
+        callbackParams: [checked],
+      };
+    },
+  },
+
+  debugName: 'InfiniteCheckBox',
+});
+
+function InfiniteCheckBoxComponent() {
+  const { componentState, componentActions } =
+    useComponentState<InfiniteCheckBoxState>();
+
+  const { checked, domProps, disabled } = componentState;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current!.indeterminate = checked == null;
+  }, [checked]);
+
+  return (
+    <input
+      {...domProps}
+      className={join('InfiniteCheckBox', CheckBoxCls, domProps?.className)}
+      type="checkbox"
+      ref={inputRef}
+      checked={!!checked}
+      disabled={disabled}
+      onChange={() => {
+        if (disabled) {
+          return;
+        }
+        componentActions.checked = !checked;
+      }}
+    />
+  );
+}
+
+export function InfiniteCheckBox(props: InfiniteCheckBoxProps) {
+  return (
+    <InfiniteCheckBoxRoot {...props}>
+      <InfiniteCheckBoxComponent />
+    </InfiniteCheckBoxRoot>
+  );
+}

package/src/components/InfiniteTable/components/FilterEditors.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import {
+  InfiniteTableFilterEditorProps,
+  InfiniteTablePropFilterEditors,
+} from '../types/InfiniteTableProps';
+
+function getFilterEditors<T>(): InfiniteTablePropFilterEditors<T> {
+  return {
+    string: StringFilterEditor,
+    number: NumberFilterEditor,
+  };
+}
+
+export const defaultFilterEditors = getFilterEditors();
+
+export function StringFilterEditor<T>(
+  props: InfiniteTableFilterEditorProps<T>,
+) {
+  return (
+    <input
+      aria-label={`Filter for ${props.ariaLabel}`}
+      type="text"
+      value={props.filterValue as any as string}
+      onChange={(event) => {
+        props.onChange(event.target.value as any as T);
+      }}
+      className={props.className}
+    />
+  );
+}
+
+export function NumberFilterEditor<T>(
+  props: InfiniteTableFilterEditorProps<T>,
+) {
+  return (
+    <input
+      aria-label={`Filter for ${props.ariaLabel}`}
+      type="number"
+      value={props.filterValue as any as number}
+      onChange={(event) => {
+        let value = event.target.value;
+        //@ts-ignore
+        if (!isNaN(value + '')) {
+          value = value + '';
+        }
+        props.onChange(value as any as T);
+      }}
+      className={props.className}
+    />
+  );
+}

package/src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Ref } from 'react';
+
+import { useInternalProps } from '../../hooks/useInternalProps';
+import { join } from '../../../../utils/join';
+
+import { flex, position, transformTranslateZero } from '../../utilities.css';
+
+export const InfiniteTableBody = React.forwardRef(function InfiniteTableBody(
+  props: React.HTMLAttributes<HTMLDivElement>,
+  ref: Ref<HTMLDivElement>,
+) {
+  const { rootClassName } = useInternalProps();
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={join(
+        `${rootClassName}Body`,
+        position.relative,
+        flex['1'],
+        transformTranslateZero,
+        props.className,
+      )}
+    />
+  );
+});

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

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

package/src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Ref } from 'react';
+
+import { join } from '../../../../utils/join';
+import { useInternalProps } from '../../hooks/useInternalProps';
+import { display, flexFlow, position } from '../../utilities.css';
+
+export const InfiniteTableFooter = React.forwardRef(
+  function InfiniteTableFooter<_T>(
+    props: React.HTMLAttributes<HTMLDivElement>,
+    ref: Ref<HTMLDivElement>,
+  ) {
+    const { rootClassName } = useInternalProps();
+
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={join(
+          `${rootClassName}Footer`,
+          position.relative,
+          display.flex,
+          flexFlow.row,
+          props.className,
+        )}
+      >
+        {/* Showing {dataArray.length} from {unfilteredCount} */}
+      </div>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+import {
+  DataSourceFilterValueItem,
+  DataSourcePropFilterTypes,
+} from '../../../DataSource';
+import { Renderable } from '../../../types/Renderable';
+import { internalProps } from '../../internalProps';
+import { InfiniteTableFilterEditorProps } from '../../types';
+
+import { HeaderFilterCls, HeaderFilterEditorCls } from './header.css';
+
+const { rootClassName } = internalProps;
+export type InfiniteTableColumnHeaderFilterProps<T> = {
+  filterEditor: React.FC<InfiniteTableFilterEditorProps<T>>;
+  filterTypes: DataSourcePropFilterTypes<T>;
+  columnFilterValue: DataSourceFilterValueItem<T> | null;
+  columnLabel: Renderable;
+  columnFilterType?: string;
+  columnHeaderHeight: number;
+  onChange: (value: DataSourceFilterValueItem<T> | null) => void;
+};
+
+export const InfiniteTableColumnHeaderFilterClassName = `${rootClassName}HeaderCell__filter`;
+
+const stopPropagation = (e: React.PointerEvent<any>) => e.stopPropagation();
+
+export function InfiniteTableColumnHeaderFilter<T>(
+  props: InfiniteTableColumnHeaderFilterProps<T>,
+) {
+  const [theValue, setTheValue] = useState(
+    props.columnFilterValue?.filterValue ?? '',
+  );
+
+  const onInputChange = (filterValue: any) => {
+    setTheValue(filterValue);
+    props.onChange(filterValue);
+  };
+
+  useEffect(() => {
+    if (props.columnFilterValue) {
+      if (theValue !== props.columnFilterValue.filterValue) {
+        setTheValue(props.columnFilterValue.filterValue);
+      }
+    } else {
+      //reset to empty value if no filter value defined
+      const currentFilterType =
+        props.filterTypes[props.columnFilterType ?? 'string'];
+
+      if (currentFilterType) {
+        const emptyValue = [...currentFilterType.emptyValues][0];
+        if (emptyValue !== theValue) {
+          setTheValue(emptyValue);
+        }
+      }
+    }
+  }, [props.columnFilterValue?.filterValue]);
+
+  const filterType = props.columnFilterValue
+    ? props.columnFilterValue.filterType
+    : props.columnFilterType ?? 'string';
+
+  const operator = props.columnFilterValue
+    ? props.columnFilterValue.operator
+    : props.filterTypes[filterType]
+    ? props.filterTypes[filterType].defaultOperator
+    : props.filterTypes.string.defaultOperator;
+
+  const filterEditorProps = {
+    ariaLabel: `Filter for ${props.columnLabel}`,
+    filterValue: theValue,
+    className: HeaderFilterEditorCls,
+    operator,
+    filterType,
+    onChange: onInputChange,
+  };
+
+  const FilterEditor = props.filterEditor;
+
+  return (
+    <div
+      onPointerUp={stopPropagation}
+      onPointerDown={stopPropagation}
+      className={`${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`}
+      style={{ height: props.columnHeaderHeight }}
+    >
+      {FilterEditor ? <FilterEditor {...filterEditorProps} /> : null}
+    </div>
+  );
+}
+
+export function InfiniteTableColumnHeaderFilterEmpty() {
+  return (
+    <div
+      onPointerUp={stopPropagation}
+      onPointerDown={stopPropagation}
+      className={`${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`}
+      style={{ height: '100%' }}
+    />
+  );
+}

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

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
+import { join } from '../../../../utils/join';
+import { RawTable } from '../../../HeadlessTable/RawTable';
+
+import {
+  TableRenderCellFn,
+  TableRenderCellFnParam,
+} from '../../../HeadlessTable/ReactHeadlessTableRenderer';
+import { ScrollPosition } from '../../../types/ScrollPosition';
+import { useInfiniteTable } from '../../hooks/useInfiniteTable';
+import { internalProps } from '../../internalProps';
+import { InfiniteTableComputedColumnGroup } from '../../types/InfiniteTableProps';
+
+import { HeaderClsRecipe } from './header.css';
+import { InfiniteTableHeaderCell } from './InfiniteTableHeaderCell';
+import { InfiniteTableHeaderGroup } from './InfiniteTableHeaderGroup';
+import type { InfiniteTableHeaderProps } from './InfiniteTableHeaderTypes';
+
+// import { transformTranslateZero } from '../../utilities.css';
+
+const { rootClassName } = internalProps;
+
+export const TableHeaderClassName = `${rootClassName}Header`;
+
+function InfiniteTableHeaderFn<T>(
+  props: InfiniteTableHeaderProps<T> & React.HTMLAttributes<HTMLDivElement>,
+) {
+  const {
+    bodyBrain,
+    headerBrain: brain,
+    columns,
+    style,
+    className,
+    columnHeaderHeight,
+    columnAndGroupTreeInfo,
+
+    columnGroupsMaxDepth,
+  } = props;
+
+  const {
+    computed,
+    componentState: { headerBrain, headerOptions },
+  } = useInfiniteTable<T>();
+
+  const { computedColumnsMap, showColumnFilters } = computed;
+
+  useEffect(() => {
+    const onScroll = (scrollPosition: ScrollPosition) => {
+      if (domRef.current) {
+        domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+      }
+    };
+
+    const removeOnScroll = brain.onScroll(onScroll);
+
+    return removeOnScroll;
+  }, [brain]);
+
+  const domRef = useRef<HTMLDivElement | null>(null);
+
+  const headerCls = HeaderClsRecipe({
+    overflow: false,
+  });
+
+  const domProps: React.HTMLProps<HTMLDivElement> = {
+    ref: domRef,
+    className: join(
+      TableHeaderClassName,
+
+      `${TableHeaderClassName}--virtualized`,
+      className,
+      headerCls,
+    ),
+    style: { ...style, height: columnHeaderHeight },
+  };
+
+  const renderCell: TableRenderCellFn = useCallback(
+    (params: TableRenderCellFnParam) => {
+      const {
+        rowIndex,
+        colIndex,
+        domRef,
+        height,
+        widthWithColspan,
+        heightWithRowspan,
+        hidden,
+      } = params;
+
+      const column = columns[colIndex];
+      if (!column || hidden) {
+        return null;
+      }
+      const colGroupItem = columnAndGroupTreeInfo
+        ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex])
+        : null;
+
+      if (colGroupItem && colGroupItem.type === 'group') {
+        const columns = colGroupItem.columnItems.map((item) => item.ref);
+        const computedColumnGroup: InfiniteTableComputedColumnGroup = {
+          ...colGroupItem.ref,
+          id: colGroupItem.id,
+          uniqueGroupId: colGroupItem.uniqueGroupId,
+          depth: colGroupItem.depth,
+          columns: columns.map((c) => c.id),
+          computedWidth: colGroupItem.computedWidth,
+          groupOffset: colGroupItem.groupOffset,
+        };
+
+        return (
+          <InfiniteTableHeaderGroup
+            bodyBrain={bodyBrain}
+            columnGroupsMaxDepth={columnGroupsMaxDepth}
+            domRef={domRef}
+            columns={columns}
+            width={widthWithColspan}
+            height={height}
+            columnGroup={computedColumnGroup}
+          />
+        );
+      }
+
+      return (
+        <InfiniteTableHeaderCell<T>
+          domRef={domRef}
+          column={column}
+          headerOptions={headerOptions}
+          width={widthWithColspan}
+          height={heightWithRowspan}
+          columnsMap={computedColumnsMap}
+        />
+      );
+    },
+
+    // leave columnHeaderHeight here, as it's needed even
+    // since it can change - eg, when the corresponding CSS variable changes
+    // do it needs to trigger a re-render
+    [
+      headerOptions,
+      columns,
+      columnHeaderHeight,
+      columnAndGroupTreeInfo,
+      columnGroupsMaxDepth,
+      showColumnFilters,
+    ],
+  );
+
+  return (
+    <div {...domProps}>
+      <RawTable
+        name="header"
+        renderCell={renderCell}
+        brain={headerBrain}
+        cellHoverClassNames={[]}
+      />
+    </div>
+  );
+}
+
+export const InfiniteTableHeader = React.memo(
+  InfiniteTableHeaderFn,
+) as typeof InfiniteTableHeaderFn;