@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
168 lines • 7.51 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import classnames from 'classnames';
import { isSSR } from '@atlaskit/editor-common/core-utils';
import { Selection } from '@atlaskit/editor-prosemirror/state';
import { isRowSelected } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { clearHoverSelection } from '../../../pm-plugins/commands';
import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
import { TableCssClassName as ClassName } from '../../../types';
import { tableBorderColor } from '../../consts';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
export default class NumberColumn extends Component {
constructor(...args) {
super(...args);
_defineProperty(this, "hoverRows", index => {
return this.props.tableActive ? this.props.hoverRows([index]) : null;
});
_defineProperty(this, "selectRow", (index, event) => {
const {
tableActive,
editorView,
selectRow
} = this.props;
// If selection is outside the table then first reset the selection inside table
if (!tableActive && event.target && event.target instanceof Node) {
const {
doc,
selection,
tr
} = editorView.state;
const pos = editorView.posAtDOM(event.target, 1);
const $pos = doc.resolve(pos);
const newPos = selection.head > pos ?
// Selection is after table
// nodeSize - 3 will move the position inside last table cell
Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) :
// Selection is before table
Selection.near($pos);
editorView.dispatch(tr.setSelection(newPos));
}
selectRow(index, event.shiftKey);
});
_defineProperty(this, "clearHoverSelection", () => {
const {
tableActive,
editorView
} = this.props;
if (tableActive) {
const {
state,
dispatch
} = editorView;
clearHoverSelection()(state, dispatch);
}
});
_defineProperty(this, "getCellStyles", (index, rowHeight) => {
const {
stickyTop,
hasHeaderRow
} = this.props;
if (stickyTop && hasHeaderRow && index === 0) {
const topOffset = 0;
return {
height: rowHeight,
top: `${topOffset}px`
};
}
return {
height: rowHeight
};
});
_defineProperty(this, "getClassNames", (index, isButtonDisabled = false) => {
const {
hoveredRows,
editorView,
isInDanger,
isResizing,
tableActive
} = this.props;
const isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
[ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
[ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive
});
});
}
render() {
const {
tableRef,
hasHeaderRow,
isDragAndDropEnabled,
tableActive,
updateCellHoverLocation
} = this.props;
const rowHeights = getRowHeights(tableRef);
if (isSSR()) {
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ClassName.NUMBERED_COLUMN,
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
borderLeft:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
visibility: 'hidden' // Ensure the column is not visible during SSR
},
contentEditable: false
});
}
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: ClassName.NUMBERED_COLUMN,
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
borderLeft:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
visibility: 'visible'
},
contentEditable: false
}, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
key: `wrapper-${index}`
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: this.getClassNames(index, true),
"data-index": index
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: this.getCellStyles(index, rowHeight),
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => updateCellHoverLocation(index) : undefined,
onMouseOver: () => updateCellHoverLocation(index)
}, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
// Ignored via go/ees005
role: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined
// eslint-disable-next-line react/no-array-index-key
,
key: `wrapper-${index}`
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: this.getClassNames(index),
"data-index": index
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: this.getCellStyles(index, rowHeight),
onClick: event => this.selectRow(index, event),
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => this.hoverRows(index) : undefined,
onMouseOver: () => this.hoverRows(index),
tabIndex: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined,
onKeyDown: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.selectRow(index, event);
}
} : undefined,
onMouseOut: this.clearHoverSelection,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
}, hasHeaderRow ? index > 0 ? index : null : index + 1)));
}
}