@itwin/itwinui-react/esm/core/Table/cells/DefaultCell.js

A react component library for iTwinUI

import * as React from 'react';
import { defaultColumn } from 'react-table';
import cx from 'classnames';
import { Box, lineClamp, ShadowRoot } from '../../../utils/index.js';
import { TableInstanceContext } from '../utils.js';
export const DefaultCellRendererPropsChildren = React.createContext(void 0);
export const DefaultCell = (props) => {
  let instance = React.useContext(TableInstanceContext);
  let isCustomCell = React.useMemo(
    () =>
      instance?.columns.find(({ id }) => props.cellProps.column.id === id)
        ?.Cell !== defaultColumn.Cell,
    [instance, props.cellProps.column.id],
  );
  let isCellRendererChildrenCustom =
    React.useContext(DefaultCellRendererPropsChildren) !== props.children;
  let isDefaultTextCell =
    'string' == typeof props.cellProps.value &&
    !isCustomCell &&
    !isCellRendererChildrenCustom;
  let {
    cellElementProps: {
      className: cellElementClassName,
      style: cellElementStyle,
      ...cellElementProps
    },
    children,
    startIcon,
    endIcon,
    cellProps,
    isDisabled,
    className,
    style,
    status,
    clamp = isDefaultTextCell,
    ...rest
  } = props;
  let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
  return React.createElement(
    Box,
    {
      ...cellElementPropsRest,
      key: cellElementKey,
      ...rest,
      className: cx(cellElementClassName, className),
      'aria-disabled': isDisabled?.(cellProps.row.original) || void 0,
      'data-iui-status': status,
      style: {
        ...cellElementStyle,
        ...style,
      },
    },
    React.createElement(
      ShadowRoot,
      {
        key: `${cellElementKey}-shadow-root`,
        flush: false,
        css: css,
      },
      React.createElement('slot', {
        name: 'start',
      }),
      React.createElement(
        TableCellContent,
        {
          shouldRenderWrapper: isDefaultTextCell,
        },
        clamp
          ? React.createElement(
              'div',
              {
                className: lineClamp.className,
              },
              React.createElement('slot', null),
            )
          : React.createElement('slot', null),
      ),
      React.createElement('slot', {
        name: 'end',
      }),
      React.createElement('slot', {
        name: 'shadows',
      }),
    ),
    startIcon &&
      React.createElement(
        Box,
        {
          className: 'iui-table-cell-start-icon',
          slot: 'start',
          key: `${cellElementKey}-start`,
        },
        startIcon,
      ),
    children,
    endIcon &&
      React.createElement(
        Box,
        {
          className: 'iui-table-cell-end-icon',
          slot: 'end',
          key: `${cellElementKey}-end`,
        },
        endIcon,
      ),
  );
};
if ('development' === process.env.NODE_ENV)
  DefaultCell.displayName = 'DefaultCell';
let TableCellContent = (props) => {
  let { children, shouldRenderWrapper } = props;
  return shouldRenderWrapper
    ? React.createElement(
        'div',
        {
          className: '_iui-table-cell-default-content',
          onClick: (e) => e.stopPropagation(),
        },
        children,
      )
    : children;
};
let css = `
._iui-table-cell-default-content {
  position: relative;
  isolation: isolate;
}
._iui-table-cell-default-content::before {
  content: '';
  display: block;
  position: absolute;
  inset: -6px;
  z-index: -1;
}
${lineClamp.css}
`;