@semcore/data-table 3.0.9 → 3.1.1

package/src/Body.tsx

@@ -1,262 +0,0 @@
-import React from 'react';
-import { Component, sstyled, Root } from '@semcore/core';
-import { Box, Flex, IBoxProps } from '@semcore/flex-box';
-import ScrollArea from '@semcore/scroll-area';
-import { getFixedStyle, getScrollOffsetValue } from './utils';
-import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
-import assignProps, { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
-import ResizeObserver from 'resize-observer-polyfill';
-import scrollStyles from './style/scroll-area.shadow.css';
-import syncScroll from '@semcore/utils/lib/syncScroll';
-import trottle from '@semcore/utils/lib/rafTrottle';
-
-const testEnv = process.env.NODE_ENV === 'test';
-
-const getCellsByColumn = (cells: NestedCells): RowData => {
-  const flattenCells = cells.flat(20) as Cell[];
-  return Object.fromEntries(flattenCells.map((cell) => [cell.name, cell.data]));
-};
-
-type AsProps = {
-  rows: NestedCells[];
-  columns: Column[];
-  $scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
-  onResize: ResizeObserverCallback;
-  rowPropsLayers: PropsLayer[];
-  use: 'primary' | 'secondary';
-  uniqueKey: string;
-  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };
-};
-
-type State = {
-  rowHeight: number | undefined;
-  scrollAreaHeight: undefined | number;
-  scrollOffset: number;
-};
-
-class Body extends Component<AsProps, State> {
-  state: State = {
-    rowHeight: undefined,
-    scrollAreaHeight: undefined,
-    scrollOffset: 0,
-  };
-
-  firstRowRef = React.createRef<HTMLElement>();
-  firstRowResizeObserver: ResizeObserver | null = null;
-
-  getRowHeight = () => {
-    const { virtualScroll } = this.asProps;
-    const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
-    return rowHeightFromProps || this.state.rowHeight;
-  };
-
-  renderCells(cells: NestedCells, rowData: RowData, index: number) {
-    const SCell = Flex;
-    const { styles, columns, use } = this.asProps;
-    return cells.map((cell) => {
-      if (Array.isArray(cell)) {
-        const SGroupCell = 'div';
-        return sstyled(styles)(
-          <SGroupCell data-ui-name="group-cell">
-            {this.renderRows(cell as NestedCells[])}
-          </SGroupCell>,
-        );
-      } else {
-        const column = columns.find((c) => c.name === cell.name);
-        const [name, value] = getFixedStyle(cell, columns);
-        const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(
-          (name) => `var(${name})`,
-        );
-        type CellProps = IBoxProps & {
-          name: string;
-          children: React.ReactNode;
-          style: React.CSSProperties;
-        };
-
-        let props: CellProps = {
-          name: cell.name,
-          children: <>{cell.data}</>,
-          justifyContent: column?.props?.justifyContent,
-          style: {
-            width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,
-          },
-        };
-        if (name !== undefined && value !== undefined) {
-          props.style[name] = value;
-        }
-
-        for (const cellPropLayer of cell.cellPropsLayers || []) {
-          const { childrenPropsGetter = (p) => p, ...other } = cellPropLayer;
-          const propsCell = assignProps(other, props);
-          props = assignProps(childrenPropsGetter(propsCell, rowData, index), propsCell);
-        }
-
-        return sstyled(styles)(
-          <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,
-        ) as React.ReactElement;
-      }
-    }, [] as React.ReactElement[]);
-  }
-
-  renderRow(
-    cells: NestedCells,
-    { dataIndex, topOffset, nested }: { dataIndex: number; topOffset?: number; nested: boolean },
-  ) {
-    const SRow = Box;
-    const { styles, rowPropsLayers, uniqueKey, virtualScroll } = this.asProps;
-    const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
-
-    const rowData = cells.flatRowData || getCellsByColumn(cells);
-    const key = rowData[uniqueKey] ? String(rowData[uniqueKey]) : `row_${dataIndex}`;
-    const needToMeasureHeight = dataIndex === 0 && !nested && !rowHeightFromProps;
-
-    let props = {
-      children: this.renderCells(cells, rowData, dataIndex),
-      theme: undefined,
-      active: undefined,
-      positioned: topOffset !== undefined,
-      top: topOffset,
-      ref: needToMeasureHeight ? this.firstRowRef : undefined,
-      key,
-    };
-
-    for (const rowPropsLayer of rowPropsLayers) {
-      const { childrenPropsGetter = (p) => p, ...other } = rowPropsLayer;
-      const propsRow = assignProps(other, props);
-      props = assignProps(childrenPropsGetter(propsRow, rowData, dataIndex), propsRow);
-    }
-
-    return sstyled(styles)(<SRow {...props} />);
-  }
-
-  renderRows(rows: NestedCells[]) {
-    return rows.map((cells, dataIndex) => this.renderRow(cells, { dataIndex, nested: false }));
-  }
-
-  renderVirtualizedRows(rows: NestedCells[]) {
-    if (rows.length === 0) return [];
-
-    const { virtualScroll } = this.asProps;
-    const { scrollOffset, scrollAreaHeight } = this.state;
-    const rowHeight = this.getRowHeight();
-
-    const tollerance = (typeof virtualScroll === 'object' ? virtualScroll?.tollerance : 2) ?? 2;
-    const startIndex = Math.max(Math.floor(scrollOffset / rowHeight!) - tollerance, 0);
-    const lastIndex = Math.min(
-      Math.ceil((scrollOffset + scrollAreaHeight!) / rowHeight!) + tollerance,
-      rows.length,
-    );
-
-    const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
-    const needToMeasureFirstRowHeight = !rowHeightFromProps;
-
-    const firstRow = { cells: rows[0], dataIndex: 0, topOffset: 0 };
-    const visibleRows = rowHeight !== undefined ? rows.slice(startIndex, lastIndex) : [];
-    const processedVisibleRows = visibleRows.map((cells, index) => ({
-      cells,
-      dataIndex: startIndex + index,
-      topOffset: rowHeight! * (startIndex + index),
-    }));
-    if (needToMeasureFirstRowHeight && startIndex !== 0) {
-      processedVisibleRows.unshift(firstRow);
-    }
-
-    return processedVisibleRows.map(({ cells, dataIndex, topOffset }) =>
-      this.renderRow(cells, { dataIndex, topOffset, nested: false }),
-    );
-  }
-
-  handleFirstRowResize = trottle((entries: ResizeObserverEntry[]) => {
-    const { contentRect } = entries[0];
-    const { height } = contentRect;
-    this.setState((oldState: State) => {
-      if (oldState.rowHeight === height) return oldState;
-      return { rowHeight: height };
-    });
-  });
-
-  handleScrollAreaResize = trottle((entries: ResizeObserverEntry[]) => {
-    const { virtualScroll } = this.asProps;
-    if (!virtualScroll) return;
-    const { contentRect } = entries[0];
-    const { height } = contentRect;
-    this.setState((oldState: State) => {
-      if (oldState.scrollAreaHeight === height) return oldState;
-      return { scrollAreaHeight: height };
-    });
-  });
-
-  handleScrollAreaScroll = (event: React.SyntheticEvent<HTMLElement>) => {
-    const { scrollTop } = event.target as HTMLElement;
-    const { virtualScroll } = this.asProps;
-    if (virtualScroll) {
-      this.setState((oldState: State) => {
-        if (oldState.scrollOffset === scrollTop) return oldState;
-        return { scrollOffset: scrollTop };
-      });
-    }
-  };
-
-  setupRowSizeObserver = () => {
-    if (!this.firstRowRef.current) return;
-    if (!this.asProps.virtualScroll) return;
-    this.firstRowResizeObserver = new ResizeObserver(this.handleFirstRowResize);
-    this.firstRowResizeObserver.observe(this.firstRowRef.current);
-  };
-
-  componentWillUnmount() {
-    this.firstRowResizeObserver?.disconnect();
-  }
-
-  render() {
-    const SBody = Root;
-    const SBodyWrapper = Box;
-    const SScrollAreaBar = ScrollArea.Bar;
-    const SHeightHold = Box;
-    const { Children, styles, rows, columns, $scrollRef, virtualScroll, onResize } = this.asProps;
-
-    const columnsInitialized = columns.reduce((sum, { width }) => sum + width, 0) > 0 || testEnv;
-
-    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
-    const offsetSum = offsetLeftSum + offsetRightSum;
-
-    const rowHeight = this.getRowHeight();
-    const holdHeight =
-      rowHeight !== undefined && virtualScroll ? rowHeight * rows.length : undefined;
-
-    if (virtualScroll && columnsInitialized && !rowHeight) {
-      new Promise(() => this.setupRowSizeObserver());
-    }
-
-    return sstyled(styles)(
-      <SBodyWrapper>
-        <ScrollArea
-          shadow
-          styles={scrollStyles}
-          use:left={`${offsetLeftSum}px`}
-          use:right={`${offsetRightSum}px`}
-          onResize={callAllEventHandlers(onResize, this.handleScrollAreaResize)}
-          onScroll={this.handleScrollAreaScroll}
-        >
-          <ScrollArea.Container ref={$scrollRef}>
-            <SBody render={Box}>
-              {holdHeight && <SHeightHold hMin={holdHeight} aria-hidden={true} />}
-              {columnsInitialized && !virtualScroll ? this.renderRows(rows) : null}
-              {columnsInitialized && virtualScroll ? this.renderVirtualizedRows(rows) : null}
-            </SBody>
-          </ScrollArea.Container>
-          <SScrollAreaBar
-            orientation="horizontal"
-            left={`${offsetLeftSum}px`}
-            right={`${offsetRightSum}px`}
-            offsetSum={`${offsetSum}px`}
-          />
-          <SScrollAreaBar orientation="vertical" />
-        </ScrollArea>
-        {Children.origin}
-      </SBodyWrapper>,
-    );
-  }
-}
-
-export default Body;

package/src/DataTable.tsx

@@ -1,443 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root, PropGetterFn } from '@semcore/core';
-import { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';
-import syncScroll from '@semcore/utils/lib/syncScroll';
-import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
-import fire from '@semcore/utils/lib/fire';
-import { flattenColumns } from './utils';
-import type {
-  RowData,
-  SortDirection,
-  PseudoChildPropsGetter,
-  PropsLayer,
-  NestedCells,
-  Column,
-} from './types';
-import Head from './Head';
-import Body from './Body';
-
-import style from './style/data-table.shadow.css';
-
-const REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {
-  desc: 'asc',
-  asc: 'desc',
-};
-const DEFAULT_SORT_DIRECTION: SortDirection = 'desc';
-
-const ROW_GROUP = Symbol('ROW_GROUP');
-
-const cssVarReg = /[:;]/g;
-
-const createCssVarForWidth = (name: string) => {
-  return `--${name.replace(cssVarReg, '_')}_width`;
-};
-
-type AsProps = {
-  use: 'primary' | 'secondary';
-  sort: SortDirection[];
-  data: RowData[];
-  uniqueKey: string;
-};
-
-type HeadAsProps = {
-  children: React.ReactChild;
-};
-type BodyAsProps = {
-  children: React.ReactChild;
-};
-
-/* utils type */
-type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
-  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
-};
-type ReturnEl = React.ReactElement | null;
-type ChildRenderFn<Props> = Props & {
-  children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };
-};
-/* utils type */
-
-export type DataTableData = { [key: string]: unknown };
-export type DataTableSort = [string, 'desc' | 'asc'];
-export type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
-export type DataTableUse = 'primary' | 'secondary';
-export type DataTableRow = DataTableCell[];
-export type DataTableCell = {
-  /** Name of column */
-  name: string;
-  /** Data of column */
-  data: React.ReactNode;
-  [key: string]: unknown;
-};
-
-export interface IDataTableProps extends IBoxProps {
-  /** Theme for table
-   * @default primary
-   * */
-  use?: DataTableUse;
-  /** Data for table */
-  data?: DataTableData[];
-  /** Active sort object */
-  sort?: DataTableSort;
-  /** Handler call when will request change sort */
-  onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
-  /** Field name in one data entity that is unique accross all set of data
-   * @default id
-   */
-  uniqueKey?: string;
-}
-
-export interface IDataTableHeadProps extends IBoxProps {
-  /** Sticky header table
-   * @deprecated
-   * */
-  sticky?: boolean;
-
-  /** Hidden header */
-  hidden?: boolean;
-}
-
-export interface IDataTableColumnProps extends IFlexProps {
-  /** Unique name column */
-  name?: string;
-  /** Enable sort for column also if you pass string you can set default sort */
-  sortable?: boolean | 'desc' | 'asc';
-  /** Enable resize for column
-   * @ignore */
-  resizable?: boolean;
-  /** Fixed column on the left/right */
-  fixed?: 'left' | 'right';
-}
-
-export interface IDataTableBodyProps extends IBoxProps {
-  /** Rows table */
-  rows?: DataTableRow[];
-  /** When enabled, only visually acessable rows are rendered.
-   * `tollerance` property controls how many rows outside of viewport are render.
-   * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.
-   * @default { tollerance: 2 }
-   */
-  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };
-}
-
-export interface IDataTableRowProps extends IBoxProps {
-  /** Theme for row */
-  theme?: DataTableTheme;
-  /** Displays row as active/hover */
-  active?: boolean;
-}
-
-export interface IDataTableCellProps extends IFlexProps {
-  /** Unique name column or columns separated by / */
-  name: string;
-  /** Theme for cell */
-  theme?: DataTableTheme;
-}
-
-class RootDefinitionTable extends Component<AsProps> {
-  static displayName = 'DefinitionTable';
-
-  static style = style;
-
-  static defaultProps = {
-    use: 'primary',
-    uniqueKey: 'id',
-    sort: [],
-    data: [],
-  } as AsProps;
-
-  columns: Column[] = [];
-
-  tableRef = React.createRef<HTMLElement>();
-  scrollBodyRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;
-  scrollHeadRef: null | ReturnType<ReturnType<typeof syncScroll>> = null;
-
-  constructor(props: AsProps) {
-    super(props);
-
-    const createRef = syncScroll();
-    // first create body ref for master scroll
-    this.scrollBodyRef = createRef('body');
-    this.scrollHeadRef = createRef('head');
-  }
-
-  handlerSortClick = (name: string, event: React.MouseEvent) => {
-    const column = this.columns.find((column) => column.name === name)!;
-    return fire(
-      this,
-      'onSortChange',
-      [
-        column.name,
-        column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,
-      ],
-      event,
-    );
-  };
-
-  handlerResize = () => {
-    this.forceUpdate();
-  };
-
-  scrollToUp = () => {
-    this.tableRef?.current?.scrollIntoView({
-      block: 'nearest',
-      inline: 'nearest',
-      behavior: 'smooth',
-    });
-  };
-
-  setVarStyle(columns: Column[]) {
-    for (const column of columns) {
-      if (Array.isArray(column.cssVar)) {
-        for (const cssVar of column.cssVar) {
-          this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);
-        }
-      } else {
-        this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);
-      }
-    }
-  }
-
-  childrenToColumns(
-    children: React.ReactNode,
-    options: { fixed?: 'left' | 'right' } = { fixed: undefined },
-  ) {
-    const { sort } = this.asProps;
-    const columnsChildren: Column[] = [];
-    React.Children.forEach(children, (child) => {
-      if (!React.isValidElement(child)) return;
-      if (child.type !== DefinitionTable.Column) return;
-
-      let {
-        children,
-        name,
-        fixed = options.fixed,
-        resizable,
-        sortable,
-        ...props
-      } = child.props as Column['props'];
-      const isGroup = !name;
-      let columns: Column[] = [];
-
-      if (isGroup) {
-        columns = this.childrenToColumns(children, { fixed });
-        name = flattenColumns(columns)
-          .map(({ name }) => name)
-          .join('/');
-        if (!columns.length) return;
-        children = React.Children.toArray(children).filter(
-          (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),
-        );
-      }
-
-      const column = this.columns.find((column) => column.name === name);
-
-      columnsChildren.push({
-        get width() {
-          return this.props.ref.current?.getBoundingClientRect().width || 0;
-        },
-        name,
-        cssVar: createCssVarForWidth(name),
-        fixed,
-        resizable,
-        active: sort[0] === name,
-        sortable,
-        sortDirection:
-          sort[0] === name
-            ? sort[1]
-            : column?.sortDirection ||
-              (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
-        columns,
-        props: {
-          name,
-          ref: column?.props?.ref || React.createRef(),
-          children,
-          ...props,
-        },
-      });
-    });
-    return columnsChildren;
-  }
-
-  getHeadProps(props: HeadAsProps) {
-    const { use } = this.asProps;
-    const columnsChildren = this.childrenToColumns(props.children);
-    this.columns = flattenColumns(columnsChildren);
-    return {
-      $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),
-      columnsChildren,
-      use,
-      onResize: this.handlerResize,
-      $scrollRef: this.scrollHeadRef,
-    };
-  }
-
-  getBodyProps(props: BodyAsProps) {
-    const { data, use, uniqueKey } = this.asProps;
-
-    const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};
-    const rowPropsLayers: PropsLayer[] = [];
-
-    React.Children.forEach(props.children, (child) => {
-      if (React.isValidElement(child)) {
-        const { name, children, ...other } = child.props as {
-          name?: string;
-          children?: PseudoChildPropsGetter;
-        } & { [propName: string]: unknown };
-        if (child.type === DefinitionTable.Cell && name) {
-          name.split('/').forEach((name) => {
-            cellPropsLayers[name] = cellPropsLayers[name] || [];
-            cellPropsLayers[name].push({
-              ...other,
-              childrenPropsGetter: children,
-            });
-          });
-        }
-        if (child.type === DefinitionTable.Row) {
-          rowPropsLayers.push({
-            ...other,
-            childrenPropsGetter: children,
-          });
-        }
-      }
-    });
-
-    const result = {
-      columns: this.columns,
-      rows: this.dataToRows(data, cellPropsLayers),
-      uniqueKey,
-      use,
-      rowPropsLayers,
-      $scrollRef: this.scrollBodyRef,
-    };
-
-    return result;
-  }
-
-  dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {
-    const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>
-      data.map((row) => {
-        const groupByName: {
-          [columnName: string]: {
-            groupedColumns: string[];
-            groupData: { [columnName: string]: unknown };
-          };
-        } = {};
-        const groupedColumns: { [columnname: string]: true } = {};
-        const ungroupedColumns: { [columnname: string]: true } = {};
-        for (const rowKey in row) {
-          const columnNames = rowKey.split('/');
-          if (columnNames.length >= 2) {
-            for (const column of columnNames) {
-              groupByName[column] = {
-                groupedColumns: columnNames,
-                groupData: row[rowKey] as { [columnName: string]: unknown },
-              };
-              groupedColumns[rowKey] = true;
-            }
-          } else {
-            ungroupedColumns[rowKey] = true;
-          }
-        }
-        const rowsGroup = row[ROW_GROUP] || [];
-        const rowsGroupedNames = Object.fromEntries(
-          rowsGroup
-            .map((subRow) => Object.keys(subRow))
-            .flat()
-            .map((key) => [key, true]),
-        );
-
-        let isGroup = false;
-
-        const cells: NestedCells = this.columns
-          .map((column) => {
-            if (groupByName[column.name]) {
-              const { groupedColumns, groupData } = groupByName[column.name];
-              if (groupedColumns[0] === column.name) {
-                return {
-                  name: groupedColumns.join('/'),
-                  cssVar: groupedColumns.map(createCssVarForWidth),
-                  fixed: column.fixed,
-                  data: groupData,
-                  cellPropsLayers: cellPropsLayers[column.name] || [],
-                };
-              }
-            } else if (column.name in row) {
-              return {
-                name: column.name,
-                cssVar: column.cssVar,
-                fixed: column.fixed,
-                data: row[column.name],
-                cellPropsLayers: cellPropsLayers[column.name] || [],
-              };
-            } else if (!isGroup && rowsGroupedNames[column.name]) {
-              // TODO: make it work not only with first group
-              isGroup = true;
-              return parseData(rowsGroup, {
-                ...ungroupedColumns,
-                ...groupedColumns,
-              });
-            } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {
-              return {
-                name: column.name,
-                cssVar: column.cssVar,
-                fixed: column.fixed,
-                data: null,
-                cellPropsLayers: cellPropsLayers[column.name] || [],
-              };
-            }
-          })
-          .filter((column) => column !== undefined)
-          .map((column) => column!);
-
-        cells.flatRowData = row;
-        return cells;
-      });
-
-    return parseData(data, {});
-  }
-
-  componentDidUpdate() {
-    this.setVarStyle(this.columns);
-  }
-
-  render() {
-    const SDataTable = Root;
-    const { Children, styles } = this.asProps;
-
-    return sstyled(styles)(
-      <SDataTable render={Box} __excludeProps={['data']} ref={this.tableRef}>
-        <Children />
-      </SDataTable>,
-    );
-  }
-}
-
-interface IDataTableCtx {
-  getHeadProps: PropGetterFn;
-  getBodyProps: PropGetterFn;
-}
-
-function ComponentDefinition() {
-  return null;
-}
-
-const DefinitionTable = createComponent(
-  RootDefinitionTable,
-  {
-    Head,
-    Body,
-    Column: ComponentDefinition,
-    Cell: ComponentDefinition,
-    Row: ComponentDefinition,
-  },
-  {},
-) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {
-  Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;
-  Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;
-  Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;
-  Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;
-  Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;
-};
-
-export { ROW_GROUP };
-export default DefinitionTable;