@infinite-table/infinite-react 0.5.1 → 0.5.2

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

@@ -1,96 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

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

@@ -1,31 +0,0 @@
-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

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

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

@@ -1,102 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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;