@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
108 lines • 4.16 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { Component } from 'react';
import classnames from 'classnames';
import { injectIntl } from 'react-intl';
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
import { TableMap } from '@atlaskit/editor-tables/table-map';
import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { clearHoverSelection, hoverTable } from '../../../pm-plugins/commands';
import { TableCssClassName as ClassName } from '../../../types';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
class CornerControlComponent extends Component {
constructor(...args) {
super(...args);
_defineProperty(this, "isActive", () => {
const {
editorView,
hoveredRows,
isResizing
} = this.props;
const {
selection
} = editorView.state;
const table = findTable(selection);
if (!table) {
return false;
}
return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
});
_defineProperty(this, "clearHoverSelection", () => {
const {
state,
dispatch
} = this.props.editorView;
clearHoverSelection()(state, dispatch);
});
_defineProperty(this, "selectTable", () => {
const {
state,
dispatch
} = this.props.editorView;
dispatch(selectTable(state.tr).setMeta('addToHistory', false));
});
_defineProperty(this, "hoverTable", () => {
const {
state,
dispatch
} = this.props.editorView;
hoverTable()(state, dispatch);
});
}
render() {
const {
isInDanger,
tableRef,
isHeaderColumnEnabled,
isHeaderRowEnabled,
intl: {
formatMessage
}
} = this.props;
if (!tableRef) {
return null;
}
const isActive = this.isActive();
return /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classnames(ClassName.CORNER_CONTROLS, {
active: isActive,
sticky: this.props.stickyTop !== undefined
}),
style: {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: this.props.stickyTop !== undefined ? `0px` : undefined
},
contentEditable: false
}, /*#__PURE__*/React.createElement("button", {
"aria-label": formatMessage(messages.cornerControl),
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
danger: isActive && isInDanger
}),
onClick: this.selectTable,
onMouseOver: this.hoverTable,
onMouseOut: this.clearHoverSelection,
onFocus: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.hoverTable : undefined,
onBlur: expValEquals('platform_editor_table_a11y_eslint_fix', 'isEnabled', true) ? this.clearHoverSelection : undefined
}), !isHeaderRowEnabled &&
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.CONTROLS_INSERT_MARKER
})), !isHeaderColumnEnabled &&
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
}, /*#__PURE__*/React.createElement("div", {
className: ClassName.CONTROLS_INSERT_MARKER
})));
}
}
export const CornerControls = injectIntl(CornerControlComponent);