@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
146 lines (145 loc) • 6.7 kB
JavaScript
import React, { useCallback } from 'react';
import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
import { findTable } from '@atlaskit/editor-tables/utils';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
import { isTableNested } from '../../pm-plugins/utils/nodes';
import { TableCssClassName as ClassName } from '../../types';
import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
import NumberColumn from './NumberColumn';
import { DragControlsWithSelection } from './RowControls/DragControls';
// Row controls
export var TableFloatingControls = function TableFloatingControls(_ref) {
var _findTable;
var editorView = _ref.editorView,
tableRef = _ref.tableRef,
tableNode = _ref.tableNode,
isInDanger = _ref.isInDanger,
isResizing = _ref.isResizing,
isNumberColumnEnabled = _ref.isNumberColumnEnabled,
isHeaderRowEnabled = _ref.isHeaderRowEnabled,
isHeaderColumnEnabled = _ref.isHeaderColumnEnabled,
tableActive = _ref.tableActive,
hasHeaderRow = _ref.hasHeaderRow,
hoveredRows = _ref.hoveredRows,
stickyHeader = _ref.stickyHeader,
isDragAndDropEnabled = _ref.isDragAndDropEnabled,
hoveredCell = _ref.hoveredCell,
isTableHovered = _ref.isTableHovered,
tableWrapperWidth = _ref.tableWrapperWidth,
api = _ref.api,
isChromelessEditor = _ref.isChromelessEditor;
var _selectRow = useCallback(function (row, expand) {
var state = editorView.state,
dispatch = editorView.dispatch;
var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
if (browser.ie_version === 11) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
editorView.dom.blur();
}
selectRow(row, expand)(state, dispatch);
}, [editorView]);
var _selectRows = useCallback(function (rowIndexes) {
var state = editorView.state,
dispatch = editorView.dispatch;
var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
if (browser.ie_version === 11) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
editorView.dom.blur();
}
selectRows(rowIndexes)(state, dispatch);
}, [editorView]);
var _hoverRows = useCallback(function (rows, danger) {
var state = editorView.state,
dispatch = editorView.dispatch;
hoverRows(rows, danger)(state, dispatch);
}, [editorView]);
// re-use across numbered columns and row controls
var updateCellHoverLocation = useCallback(function (rowIndex) {
var state = editorView.state,
dispatch = editorView.dispatch;
if (tableActive) {
// For context: Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
// of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
// also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
// current column index. We can just force it to 0.
hoverCell(rowIndex, 0)(state, dispatch);
}
}, [editorView, tableActive]);
if (!tableRef) {
return null;
}
var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS : ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
var tablePos = (_findTable = findTable(editorView.state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
var shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: wrapperClassName
}, /*#__PURE__*/React.createElement("div", {
onMouseDown: function onMouseDown(e) {
return !isDragAndDropEnabled && e.preventDefault();
}
}, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
editorView: editorView,
hoverRows: _hoverRows,
tableRef: tableRef,
tableActive: tableActive,
hoveredRows: hoveredRows,
hasHeaderRow: hasHeaderRow,
isInDanger: isInDanger,
isResizing: isResizing,
selectRow: _selectRow,
updateCellHoverLocation: updateCellHoverLocation,
stickyTop: stickyTop,
isDragAndDropEnabled: isDragAndDropEnabled
}) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
editorView: editorView,
tableRef: tableRef,
isInDanger: isInDanger,
isResizing: isResizing,
api: api
}), /*#__PURE__*/React.createElement(DragControlsWithSelection, {
tableRef: tableRef,
tableNode: tableNode,
hoveredCell: hoveredCell,
isTableHovered: isTableHovered,
editorView: editorView,
tableActive: tableActive,
isInDanger: isInDanger,
isResizing: isResizing
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
tableWidth: tableWrapperWidth,
hoverRows: _hoverRows,
selectRow: _selectRow,
selectRows: _selectRows,
updateCellHoverLocation: updateCellHoverLocation,
api: api
})) : /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
editorView: editorView,
tableRef: tableRef,
isInDanger: isInDanger,
isResizing: isResizing,
isHeaderRowEnabled: isHeaderRowEnabled,
isHeaderColumnEnabled: isHeaderColumnEnabled,
hoveredRows: hoveredRows,
stickyTop: tableActive ? stickyTop : undefined,
tableActive: tableActive,
hoverRows: _hoverRows,
selectRow: _selectRow,
api: api
}))))
);
};
export default TableFloatingControls;