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

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'EditableCell', {
  enumerable: true,
  get: function () {
    return EditableCell;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _index = require('../../../utils/index.js');
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
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((0, _index.getRandomValue)(10));
  let [isDirty, setIsDirty] = _react.useState(false);
  return _react.createElement(
    _index.Box,
    {
      ...cellElementProps,
      contentEditable: true,
      suppressContentEditableWarning: true,
      key: key,
      ...rest,
      className: (0, _classnames.default)(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((0, _index.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';