@semcore/data-table 3.0.10 → 3.1.2

package/src/Head.tsx

@@ -1,142 +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 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 '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<AsProps> {
-  columns: Column[] = [];
-
-  static displayName: string;
-
-  bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {
-    this.asProps.$onSortClick(name, event);
-  };
-
-  bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {
-    if (event.code === 'Enter') {
-      this.asProps.$onSortClick(name, event);
-    }
-  };
-
-  renderColumns(columns: Column[], width: number) {
-    return columns.map((column) => this.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?.length > 0;
-    const cSize = isGroup ? flattenColumns(column.columns).length : 1;
-    const [name, value] = getFixedStyle(column, this.columns);
-
-    const style = {
-      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}
-        use={use}
-        fixed={column.fixed}
-        resizable={column.resizable}
-        sortable={column.sortable}
-        active={column.active}
-        group={isGroup}
-        tabIndex={column.sortable && 0}
-        {...column.props}
-        onClick={callAllEventHandlers(
-          column.props.onClick,
-          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,
-        )}
-        onKeyDown={callAllEventHandlers(
-          column.props.onKeyDown,
-          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,
-        )}
-        style={style}
-        hidden={hidden}
-      >
-        {isGroup ? (
-          <>
-            <SColumn groupHead use={use}>
-              <div>{column.props.children}</div>
-            </SColumn>
-            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>
-          </>
-        ) : (
-          <>
-            <div>{column.props.children}</div>
-            {column.sortable ? <SSortIcon active={column.active} /> : null}
-          </>
-        )}
-      </SColumn>,
-    );
-  }
-
-  render() {
-    const SHead = Root;
-    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;
-    const SHeadWrapper = Box;
-
-    this.columns = flattenColumns(columnsChildren);
-
-    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);
-
-    logger.warn(
-      sticky,
-      "'sticky' property is deprecated, use '<Sticky/>' wrapper",
-      this.asProps['data-ui-name'] || Head.displayName,
-    );
-
-    return sstyled(styles)(
-      <SHeadWrapper sticky={sticky}>
-        <ScrollArea
-          styles={scrollStyles}
-          use:left={`${offsetLeftSum}px`}
-          use:right={`${offsetRightSum}px`}
-          shadow
-          onResize={onResize}
-        >
-          <ScrollArea.Container ref={$scrollRef}>
-            <SHead render={Box}>
-              {this.renderColumns(columnsChildren, 100 / this.columns.length)}
-            </SHead>
-          </ScrollArea.Container>
-        </ScrollArea>
-        {Children.origin}
-      </SHeadWrapper>,
-    );
-  }
-}
-
-export default Head;

package/src/index.ts

@@ -1,2 +0,0 @@
-export { default } from './DataTable';
-export * from './DataTable';

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

@@ -1,295 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SDataTable {
-  position: relative;
-}
-
-SHeadWrapper {
-  position: relative;
-}
-
-SHeadWrapper[sticky] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-SHead {
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  min-width: fit-content;
-  z-index: 0;
-}
-
-SColumn {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  font-size: var(--fs-100);
-  color: var(--gray-800);
-  box-sizing: border-box;
-  position: relative;
-
-  &:focus {
-    outline: none;
-    box-shadow: var(--keyboard-focus);
-  }
-}
-
-SColumn[hidden] {
-  height: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  border: none !important;
-}
-
-SColumn[use='primary'] {
-  padding: 12px;
-  border-right: 1px solid var(--gray-100);
-  border-bottom: 1px solid var(--gray-100);
-  background-color: var(--gray-50);
-}
-
-SColumn[use='secondary'] {
-  padding: 8px;
-  border-bottom: 1px solid var(--gray-300);
-  background-color: var(--white);
-}
-
-SColumn[use]:last-child {
-  border-right: none;
-}
-
-SColumn[group][use] {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  align-items: normal;
-  border-bottom: none;
-  padding: 0;
-}
-
-SColumn[groupHead][use] {
-  justify-content: center;
-  border-right: none;
-  /* for resizable */
-  z-index: 1;
-}
-
-SColumn[groupHead][use='primary'] {
-  border-bottom: 1px solid var(--gray-100);
-}
-
-SColumn[groupHead][use='secondary'] {
-  border-bottom: 1px solid var(--gray-100);
-}
-
-SColumn[sortable] {
-  cursor: pointer;
-
-  &[use='primary']:hover {
-    background-color: var(--gray-100);
-  }
-}
-
-SColumn[active][use='primary'] {
-  background-color: var(--gray-100);
-}
-
-SColumn[resizable] {
-  &:hover:after {
-    background: var(--gray-100);
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: -1px;
-    height: 100vh;
-    width: 1px;
-    background: transparent;
-    cursor: col-resize;
-  }
-}
-
-SColumn[fixed] {
-  position: sticky;
-  /* because up resizable */
-  z-index: 2;
-}
-
-SSortIcon {
-  fill: var(--gray-300);
-  margin-left: 6px;
-}
-
-SSortIcon[active] {
-  fill: var(--gray-400);
-}
-
-SBodyWrapper {
-  position: relative;
-}
-
-SBody {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  min-width: fit-content;
-}
-
-SRow {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-
-/* DEFAULT THEME */
-SRow[active] > SCell:not([theme]),
-SRow:hover > SCell:not([theme]),
-SRow SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
-}
-
-/* MUTED THEME */
-SRow[theme='muted'] SCell:not([theme]) {
-  background-color: #f2f3f4;
-}
-
-SRow:hover > SCell[theme='muted'],
-SRow[theme='muted'][active] > SCell:not([theme]),
-SRow[theme='muted']:hover > SCell:not([theme]),
-SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: #f6f7f7;
-}
-
-/* INFO THEME */
-SRow[theme='info'] SCell:not([theme]) {
-  background-color: var(--blue-50);
-}
-
-SRow:hover > SCell[theme='info'],
-SRow[theme='info'][active] > SCell:not([theme]),
-SRow[theme='info']:hover > SCell:not([theme]),
-SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--blue-100);
-}
-
-/* SUCCESS THEME */
-SRow[theme='success'] SCell:not([theme]) {
-  background-color: var(--green-50);
-}
-
-SRow:hover > SCell[theme='success'],
-SRow[theme='success'][active] > SCell:not([theme]),
-SRow[theme='success']:hover > SCell:not([theme]),
-SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--green-100);
-}
-
-/* WARNING THEME */
-SRow[theme='warning'] SCell:not([theme]) {
-  background-color: var(--orange-50);
-}
-
-SRow:hover > SCell[theme='warning'],
-SRow[theme='warning'][active] > SCell:not([theme]),
-SRow[theme='warning']:hover > SCell:not([theme]),
-SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--orange-100);
-}
-
-/* DANGER THEME */
-SRow[theme='danger'] SCell:not([theme]) {
-  background-color: var(--red-50);
-}
-
-SRow:hover > SCell[theme='danger'],
-SRow[theme='danger'][active] > SCell:not([theme]),
-SRow[theme='danger']:hover > SCell:not([theme]),
-SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--red-100);
-}
-
-SRow[positioned] {
-  position: absolute;
-}
-
-SCell {
-  display: flex;
-  flex: 1;
-  flex-basis: auto;
-  font-size: var(--fs-200);
-  line-height: var(--lh-200);
-  color: var(--gray-800);
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--gray-100);
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-SCell[use='primary'] {
-  padding: 12px;
-  min-height: 45px;
-  background-color: var(--white);
-}
-
-SCell[use='secondary'] {
-  padding: 8px;
-  min-height: 37px;
-  background-color: var(--white);
-}
-
-SCell[fixed] {
-  position: sticky;
-  z-index: 1;
-}
-
-SCell[theme='muted'] {
-  background-color: #f2f3f4;
-}
-
-SCell[theme='info'] {
-  background-color: var(--blue-50);
-}
-
-SCell[theme='success'] {
-  background-color: var(--green-50);
-}
-
-SCell[theme='warning'] {
-  background-color: var(--orange-50);
-}
-
-SCell[theme='danger'] {
-  background-color: var(--red-50);
-}
-
-SScrollAreaBar[orientation='horizontal'] {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  margin-top: -12px;
-  z-index: 2;
-}
-
-SScrollAreaBar[orientation='vertical'] {
-  width: 12px;
-}
-
-SScrollAreaBar[orientation='horizontal'] {
-  margin-left: calc(var(--left) + 4px);
-  margin-right: calc(var(--right) + 4px);
-  width: calc(100% - var(--offsetSum) - 8px);
-}
-
-SHeightHold {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  pointer-events: none;
-  /* should be under other layers */
-  z-index: -1;
-}

package/src/style/scroll-area.shadow.css

@@ -1,6 +0,0 @@
-SShadowHorizontal:before {
-  left: var(--left) !important;
-}
-SShadowHorizontal:after {
-  right: var(--right) !important;
-}

package/src/types.ts

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

@@ -1,55 +0,0 @@
-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(' + ')})`];
-};