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

A react component library for iTwinUI

import * as React from 'react';
import { Box, getRandomValue } from '../../../utils/index.js';
import cx from 'classnames';
export const EditableCell = (props) => {
  let {
    cellElementProps: {
      className: cellElementClassName,
      style: cellElementStyle,
      ...cellElementProps
    },
    cellProps,
    onCellEdit,
    children,
    isDisabled,
    className,
    style,
    ...rest
  } = props;
  let sanitizeString = (text) => text.replace(/(\r\n|\n|\r)+/gm, ' ');
  let [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
  React.useEffect(() => {
    setValue(sanitizeString(cellProps.value));
  }, [cellProps.value]);
  let [key, setKey] = React.useState(getRandomValue(10));
  let [isDirty, setIsDirty] = React.useState(false);
  return React.createElement(
    Box,
    {
      ...cellElementProps,
      contentEditable: true,
      suppressContentEditableWarning: true,
      key: key,
      ...rest,
      className: cx(cellElementClassName, className),
      style: {
        ...cellElementStyle,
        ...style,
      },
      onInput: (e) => {
        setValue(sanitizeString(e.target.innerText));
        setIsDirty(true);
        props.onInput?.(e);
      },
      onBlur: (e) => {
        if (isDirty)
          onCellEdit(cellProps.column.id, value, cellProps.row.original);
        props.onBlur?.(e);
        setKey(getRandomValue(10));
      },
      onKeyDown: (e) => {
        if ('Enter' === e.key) e.preventDefault();
        props.onKeyDown?.(e);
      },
      onPaste: (e) => {
        e.preventDefault();
        document.execCommand(
          'inserttext',
          false,
          sanitizeString(e.clipboardData.getData('text/plain')),
        );
        props.onPaste?.(e);
      },
      onDrop: (e) => {
        e.preventDefault();
        props.onDrop?.(e);
      },
      onClick: (e) => {
        e.stopPropagation();
        props.onClick?.(e);
      },
    },
    children,
  );
};
if ('development' === process.env.NODE_ENV)
  EditableCell.displayName = 'EditableCell';