@semcore/data-table 1.5.3 → 2.1.0

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;

package/src/DataTable.jsx

@@ -1,283 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import { Box } 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 Head from './Head';
-import Body from './Body';
-
-import style from './style/data-table.shadow.css';
-
-const MAP_SORT_DIRECTION = {
-  desc: 'asc',
-  asc: 'desc',
-};
-const DEFAULT_SORT_DIRECTION = 'desc';
-
-const ROW_GROUP = Symbol('ROW_GROUP');
-
-const cssVarReg = /[:;]/g;
-
-function createCssVarForWidth(name) {
-  return `--${name.replace(cssVarReg, '_')}_width`;
-}
-
-class RootDefinitionTable extends Component {
-  static displayName = 'DefinitionTable';
-
-  static style = style;
-
-  static defaultProps = {
-    use: 'primary',
-    sort: [],
-    data: [],
-  };
-
-  columns = [];
-
-  tableRef = React.createRef();
-
-  constructor(props) {
-    super(props);
-
-    const createRef = syncScroll();
-    // first create body ref for master scroll
-    this.scrollBodyRef = createRef('body');
-    this.scrollHeadRef = createRef('head');
-  }
-
-  handlerSortClick = (name, e) => {
-    const column = this.columns.find((c) => c.name === name);
-    return fire(
-      this,
-      'onSortChange',
-      [
-        column.name,
-        column.active ? MAP_SORT_DIRECTION[column.sortDirection] : column.sortDirection,
-      ],
-      e,
-    );
-  };
-
-  handlerResize = () => {
-    this.forceUpdate();
-  };
-
-  scrollToUp = () => {
-    this.tableRef?.current?.scrollIntoView({
-      block: 'nearest',
-      inline: 'nearest',
-      behavior: 'smooth',
-    });
-  };
-
-  setVarStyle(columns) {
-    columns.forEach((column) => {
-      this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);
-    }, {});
-  }
-
-  childrenToColumns(children, options = { fixed: undefined }) {
-    const { sort } = this.asProps;
-    const columnsChildren = [];
-    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;
-      const isGroup = !name;
-      let columns = null;
-
-      if (isGroup) {
-        columns = this.childrenToColumns(children, {
-          fixed,
-        });
-        name = flattenColumns(columns)
-          .map((c) => c.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((c) => c.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: {
-          ref: column?.props?.ref || React.createRef(),
-          children,
-          ...props,
-        },
-      });
-    });
-    return columnsChildren;
-  }
-
-  getHeadProps(props) {
-    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) {
-    const { data, use } = this.asProps;
-    const propsCells = {};
-    const $propsRow = [];
-    React.Children.forEach(props.children, (child) => {
-      if (React.isValidElement(child)) {
-        const { name, children, ...other } = child.props;
-        if (child.type === DefinitionTable.Cell && name) {
-          name.split('/').forEach((name) => {
-            propsCells[name] = propsCells[name] || [];
-            propsCells[name].push({
-              ...other,
-              getCellProps: children,
-            });
-          });
-        }
-        if (child.type === DefinitionTable.Row) {
-          $propsRow.push({
-            ...other,
-            getRowProps: children,
-          });
-        }
-      }
-    });
-
-    return {
-      columns: this.columns,
-      rows: this.dataToRows(data, propsCells),
-      use,
-      $propsRow,
-      $scrollRef: this.scrollBodyRef,
-    };
-  }
-
-  dataToRows(data, propsCells) {
-    const columns = this.columns;
-
-    function parseData(data, options = { exclude: [] }) {
-      return data.map((row) => {
-        const columnsGroups = Object.keys(row).reduce((acc, name) => {
-          const names = name.split('/');
-          if (names.length >= 2) {
-            acc.push([names, row[name]]);
-          }
-          return acc;
-        }, []);
-        const nameColumnsGroup = columnsGroups
-          .reduce((acc, [names]) => acc.concat(names), [])
-          .filter((name, i, arr) => arr.indexOf(name) === i);
-        const rowsGroup = row[ROW_GROUP] || [];
-        const nameRowsGroup = rowsGroup
-          .reduce((acc, row) => acc.concat(Object.keys(row)), [])
-          .filter((name, i, arr) => arr.indexOf(name) === i);
-        let isGroupRow = false;
-
-        const cells = [];
-        cells._row = row;
-        return columns.reduce((acc, column) => {
-          const columnGroup = columnsGroups.find((group) => group[0]?.includes(column.name));
-          if (columnGroup) {
-            const [names, data] = columnGroup;
-            if (names[0] === column.name) {
-              acc.push({
-                name: names.join('/'),
-                cssVar: names.map(createCssVarForWidth),
-                fixed: column.fixed,
-                data,
-                rendersCell: propsCells[column.name] || [],
-              });
-            }
-          } else if (column.name in row) {
-            acc.push({
-              name: column.name,
-              cssVar: column.cssVar,
-              fixed: column.fixed,
-              data: row[column.name],
-              rendersCell: propsCells[column.name] || [],
-            });
-          } else if (!isGroupRow && nameRowsGroup.includes(column.name)) {
-            // TODO: сделать универсально
-            isGroupRow = true;
-            acc.push(
-              parseData(rowsGroup, {
-                exclude: [...Object.keys(row), ...nameColumnsGroup],
-              }),
-            );
-          } else if (![...options.exclude, ...nameRowsGroup].includes(column.name)) {
-            acc.push({
-              name: column.name,
-              cssVar: column.cssVar,
-              fixed: column.fixed,
-              data: null,
-              rendersCell: propsCells[column.name] || [],
-            });
-          }
-          return acc;
-        }, 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>,
-    );
-  }
-}
-
-function ComponentDefinition() {
-  return null;
-}
-
-const DefinitionTable = createComponent(
-  RootDefinitionTable,
-  {
-    Head,
-    Body,
-    Column: ComponentDefinition,
-    Cell: ComponentDefinition,
-    Row: ComponentDefinition,
-  },
-  {},
-);
-
-export { ROW_GROUP };
-export default DefinitionTable;

package/src/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/utils.js

@@ -1,54 +0,0 @@
-export function getScrollOffsetValue(columns) {
-  return columns.reduce(
-    (acc, c) => {
-      if (c.fixed === 'left') {
-        acc[0] += c.width;
-      }
-      if (c.fixed === 'right') {
-        acc[1] += c.width;
-      }
-      return acc;
-    },
-    [0, 0],
-  );
-}
-
-export function flattenColumns(columns) {
-  return columns.reduce((acc, c) => {
-    let columns = [c];
-    if (c.columns) {
-      columns = flattenColumns(c.columns);
-    }
-    acc = acc.concat(columns);
-    return acc;
-  }, []);
-}
-
-export function getFixedStyle(column, columns) {
-  const side = column.fixed;
-  if (!side) return [undefined, undefined];
-  const names = column.name.split('/');
-  const nameSideMap = {
-    left: names[0],
-    right: names[names.length - 1],
-  };
-  const name = nameSideMap[side];
-  const index = columns.findIndex((c) => c.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((c) => `var(--${c.name}_width)`);
-  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];
-}