@semcore/data-table 1.5.4 → 2.2.0

package/src/{Head.jsx → Head.tsx}

@@ -6,46 +6,64 @@ import SortDesc from '@semcore/icon/SortDesc/m';
 import SortAsc from '@semcore/icon/SortAsc/m';
 import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
+import type { Column } from './types';
 import logger from '@semcore/utils/lib/logger';
+import type ResizeObserverCallback from 'resize-observer-polyfill';
 
 import scrollStyles from './style/scroll-area.shadow.css';
 
 const SORTING_ICON = {
   desc: SortDesc,
   asc: SortAsc,
+} as const;
+
+type AsProps = {
+  $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
+  $scrollRef: (instance: unknown) => void;
+  use: 'primary' | 'secondary';
+  columnsChildren: Column[];
+  onResize: ResizeObserverCallback;
+  sticky: boolean;
+  ['data-ui-name']: string;
 };
 
-class Head extends Component {
-  columns = [];
+class Head extends Component<AsProps> {
+  columns: Column[] = [];
+
+  static displayName: string;
 
-  bindHandlerSortClick = (name) => (e) => {
-    this.asProps.$onSortClick(name, e);
+  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {
+    this.asProps.$onSortClick(name, event);
   };
 
-  bindHandlerKeyDown = (name) => (e) => {
-    if (e.keyCode === 13) {
-      this.asProps.$onSortClick(name, e);
+  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {
+    if (event.code === 'Enter') {
+      this.asProps.$onSortClick(name, event);
     }
   };
 
-  renderColumns(columns, width) {
+  renderColumns(columns: Column[], width: number) {
     return columns.map((column) => this.renderColumn(column, width));
   }
 
-  renderColumn(column, width) {
+  renderColumn(column: Column, width: number) {
     const { styles, use, hidden } = this.asProps;
     const SColumn = Flex;
     const SHead = Box;
     const SSortIcon = SORTING_ICON[column.sortDirection];
-    const isGroup = !!column.columns;
+    const isGroup = column.columns?.length > 0;
     const cSize = isGroup ? flattenColumns(column.columns).length : 1;
     const [name, value] = getFixedStyle(column, this.columns);
+
     const style = {
-      [name]: value,
       flexBasis: column.props.flex === undefined && `${width * cSize}%`,
       ...column.props.style,
     };
 
+    if (name !== undefined && value !== undefined) {
+      style[name] = value;
+    }
+
     return sstyled(styles)(
       <SColumn
         key={column.name}

package/src/style/data-table.shadow.css

@@ -209,9 +209,13 @@ SRow[theme='danger']:hover SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 85%));
 }
 
+SRow[positioned] {
+  position: absolute;
+}
+
 SCell {
   display: flex;
-  flex: 0 0 auto;
+  flex: 1;
   font-size: 14px;
   color: var(--gray20);
   line-height: 20px;
@@ -275,3 +279,10 @@ SScrollAreaBar[orientation='horizontal'] {
   margin-right: calc(var(--right) + 4px);
   width: calc(100% - var(--offsetSum) - 8px);
 }
+
+SHeightHold {
+  position: absolute;
+  top: 0;
+  width: 100px;
+  /* pointer-events: none; */
+}

package/src/types.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ROW_GROUP } from './DataTable';
+
+export type PseudoChildPropsGetter = (
+  props: { [propName: string]: unknown },
+  rowData: { [columnName: string]: unknown },
+  index: number,
+) => { [propName: string]: unknown };
+export type PropsLayer = {
+  childrenPropsGetter?: PseudoChildPropsGetter;
+  [propName: string]: unknown;
+};
+
+export type SortDirection = 'asc' | 'desc';
+export type Column<
+  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },
+> = {
+  name: string;
+  active: boolean;
+  width: number;
+  fixed?: 'left' | 'right';
+  resizable?: boolean;
+  sortable?: boolean | SortDirection;
+  sortDirection: SortDirection;
+  cssVar: string | string[];
+  data?: unknown;
+  props: {
+    name: string;
+  } & Partial<{
+    onClick: (event: React.MouseEvent) => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    ref: React.RefObject<HTMLElement>;
+    style: React.CSSProperties;
+    fixed: 'left' | 'right';
+    children: React.ReactNode[];
+    resizable: boolean;
+    sortable: boolean | SortDirection;
+    sortDirection: SortDirection;
+  }> &
+    Props;
+  columns: Column[];
+};
+export type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {
+  cellPropsLayers: PropsLayer[];
+};
+export type RowData<
+  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },
+> = Data &
+  Partial<{
+    name: string;
+    [ROW_GROUP]: RowData[];
+  }>;
+export type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };

package/src/utils.ts

@@ -0,0 +1,55 @@
+import type { Column } from './types';
+
+export const getScrollOffsetValue = (columns: Column[]) =>
+  columns.reduce(
+    (acc, column) => {
+      if (column.fixed === 'left') {
+        acc[0] += column.width;
+      }
+      if (column.fixed === 'right') {
+        acc[1] += column.width;
+      }
+      return acc;
+    },
+    [0, 0] as [leftOffset: number, rightOffset: number],
+  );
+
+export const flattenColumns = (columns: Column[]) =>
+  columns.reduce((acc, column) => {
+    const hasNestedColumns = 'columns' in column && column.columns.length > 0;
+    const columns: Column[] = hasNestedColumns ? flattenColumns(column.columns) : [column];
+    acc = acc.concat(columns);
+    return acc;
+  }, [] as Column[]);
+
+export const getFixedStyle = (
+  cell: Pick<Column, 'name' | 'fixed'>,
+  columns: Column[],
+): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {
+  const side = cell.fixed;
+  if (!side) return [undefined, undefined];
+  const names = cell.name.split('/');
+  const nameSideMap = {
+    left: names[0],
+    right: names[names.length - 1],
+  };
+  const name = nameSideMap[side];
+  const index = columns.findIndex((column) => column.name === name);
+
+  if (index === -1) return [undefined, undefined];
+
+  const startIndexSideMap = {
+    left: 0,
+    right: index,
+  };
+  const endIndexSideMap = {
+    left: index,
+    right: columns.length - 1,
+  };
+  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+
+  if (columnsFixed.length < 1) return [side, 0];
+
+  const vars = columnsFixed.map((column) => `var(--${column.name}_width)`);
+  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];
+};

package/lib/types/index.d.ts

@@ -1,99 +0,0 @@
-import React from 'react';
-import { PropGetterFn } from '@semcore/core';
-import { IBoxProps, IFlexProps } from '@semcore/flex-box';
-
-/* utils type */
-type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
-  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
-};
-type ReturnEl = React.ReactElement | null;
-/* utils type */
-
-type ChildRenderFn<Props> = Props & {
-  children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };
-};
-
-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;
-}
-
-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[];
-}
-
-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;
-}
-
-interface IDataTableCtx {
-  getHeadProps: PropGetterFn;
-  getBodyProps: PropGetterFn;
-}
-
-declare const ROW_GROUP: unique symbol;
-
-declare const DataTable: (<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 DataTable;

package/src/Body.jsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import { Component, sstyled, Root } from '@semcore/core';
-import { Box, Flex } from '@semcore/flex-box';
-import ScrollArea from '@semcore/scroll-area';
-import { getFixedStyle, getScrollOffsetValue } from './utils';
-import assignProps from '@semcore/utils/lib/assignProps';
-
-import scrollStyles from './style/scroll-area.shadow.css';
-
-function getCellsByColumn(row) {
-  return row.reduce((acc, cell) => {
-    acc[cell.name] = acc[cell.name]
-      ? Array.isArray(acc[cell.name])
-        ? acc[cell.name].concat(cell.data)
-        : [acc[cell.name], cell.data]
-      : cell.data;
-    return acc;
-  }, {});
-}
-
-class Body extends Component {
-  renderRows(rows) {
-    const SRow = Box;
-    const { styles, $propsRow } = this.asProps;
-
-    return rows.map((row, index) => {
-      const cellsByColumn = row._row || getCellsByColumn(row);
-      const props = $propsRow.reduce(
-        (acc, { getRowProps = (p) => p, ...other }) => {
-          const propsRow = assignProps(other, acc);
-          return assignProps(getRowProps(propsRow, cellsByColumn, index), propsRow);
-        },
-        {
-          children: this.renderCells(row, cellsByColumn, index),
-        },
-      );
-      return sstyled(styles)(
-        <SRow key={index} theme={props.theme} active={props.active} {...props} />,
-      );
-    });
-  }
-
-  renderCells(row, cellsByColumn, index) {
-    const SCell = Flex;
-    const { styles, columns, use } = this.asProps;
-    return row.reduce((acc, cell) => {
-      if (Array.isArray(cell)) {
-        acc = acc.concat(<div>{this.renderRows(cell)}</div>);
-      } 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(
-          (n) => `var(${n})`,
-        );
-        const props = (cell.rendersCell || []).reduce(
-          (acc, { getCellProps = (p) => p, ...other }) => {
-            const propsCell = assignProps(other, acc);
-            return assignProps(getCellProps(propsCell, cellsByColumn, index), propsCell);
-          },
-          {
-            name: cell.name,
-            children: cell.data,
-            justifyContent: column?.props?.justifyContent,
-            style: {
-              [name]: value,
-              width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,
-            },
-          },
-        );
-
-        acc.push(
-          sstyled(styles)(
-            <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,
-          ),
-        );
-      }
-      return acc;
-    }, []);
-  }
-
-  render() {
-    const SBody = Root;
-    const SBodyWrapper = Box;
-    const SScrollAreaBar = ScrollArea.Bar;
-    const { Children, styles, rows, columns, $scrollRef, onResize } = this.asProps;
-
-    const initializeColumns = !!columns.reduce((acc, c) => acc + c.width, 0);
-
-    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
-    const offsetSum = offsetLeftSum + offsetRightSum;
-
-    return sstyled(styles)(
-      <SBodyWrapper>
-        <ScrollArea
-          shadow
-          styles={scrollStyles}
-          use:left={`${offsetLeftSum}px`}
-          use:right={`${offsetRightSum}px`}
-          onResize={onResize}
-        >
-          <ScrollArea.Container ref={$scrollRef}>
-            <SBody render={Box}>{initializeColumns ? this.renderRows(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;