@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
99 lines • 4.72 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import { injectIntl } from 'react-intl';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { clearHoverSelection } from '../../../pm-plugins/commands';
import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
import { TableCssClassName as ClassName } from '../../../types';
import { tableControlsSpacing, tableToolbarSize } from '../../consts';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
class RowControlsComponent extends Component {
constructor(...args) {
super(...args);
_defineProperty(this, "clearHoverSelection", () => {
const {
state,
dispatch
} = this.props.editorView;
clearHoverSelection()(state, dispatch);
});
}
render() {
const {
editorView,
tableRef,
hoveredRows,
isInDanger,
isResizing,
intl: {
formatMessage
},
selection: selectionState
} = this.props;
if (!tableRef) {
return null;
}
const {
selection
} = editorView.state;
const rowHeights = getRowHeights(tableRef);
const rowsParams = getRowsParams(rowHeights);
const firstRow = tableRef.querySelector('tr');
const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: ClassName.ROW_CONTROLS
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.ROW_CONTROLS_INNER
}, rowsParams.map(({
startIndex,
endIndex,
height
}, index) => {
// if previous row was header row, add its height to our margin
let marginTop = -1;
if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
marginTop += rowHeights[index - 1] + tableToolbarSize;
}
const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
key: startIndex,
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
height: height,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginTop: `${marginTop}px`,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: thisRowSticky ? `3px` : undefined,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
paddingTop: thisRowSticky ?
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
`${tableControlsSpacing - 2}px` : undefined
}
}, /*#__PURE__*/React.createElement("button", {
"aria-label": formatMessage(messages.rowControl),
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
onClick: event => this.props.selectRow(startIndex, event.shiftKey),
onMouseOver: () => this.props.hoverRows([startIndex]),
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? () => this.props.hoverRows([startIndex]) : undefined,
onMouseOut: this.clearHoverSelection,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined,
"data-start-index": startIndex,
"data-end-index": endIndex
}), /*#__PURE__*/React.createElement("div", {
className: ClassName.CONTROLS_INSERT_MARKER
}));
})))
);
}
}
export const RowControls = injectIntl(RowControlsComponent);