@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
155 lines (153 loc) • 8.05 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TableFloatingControls = void 0;
var _react = _interopRequireWildcard(require("react"));
var _browser = require("@atlaskit/editor-common/browser");
var _utils = require("@atlaskit/editor-tables/utils");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _commands = require("../../pm-plugins/commands");
var _nodes = require("../../pm-plugins/utils/nodes");
var _types = require("../../types");
var _DragCornerControls = require("./CornerControls/DragCornerControls");
var _FloatingControlsWithSelection = require("./FloatingControlsWithSelection");
var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
var _DragControls = require("./RowControls/DragControls");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// Row controls
var TableFloatingControls = exports.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 = (0, _react.useCallback)(function (row, expand) {
var state = editorView.state,
dispatch = editorView.dispatch;
var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
if (browser.ie_version === 11) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
editorView.dom.blur();
}
(0, _commands.selectRow)(row, expand)(state, dispatch);
}, [editorView]);
var _selectRows = (0, _react.useCallback)(function (rowIndexes) {
var state = editorView.state,
dispatch = editorView.dispatch;
var browser = (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) ? (0, _browser.getBrowserInfo)() : _browser.browser;
if (browser.ie_version === 11) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
editorView.dom.blur();
}
(0, _commands.selectRows)(rowIndexes)(state, dispatch);
}, [editorView]);
var _hoverRows = (0, _react.useCallback)(function (rows, danger) {
var state = editorView.state,
dispatch = editorView.dispatch;
(0, _commands.hoverRows)(rows, danger)(state, dispatch);
}, [editorView]);
// re-use across numbered columns and row controls
var updateCellHoverLocation = (0, _react.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.
(0, _commands.hoverCell)(rowIndex, 0)(state, dispatch);
}
}, [editorView, tableActive]);
if (!tableRef) {
return null;
}
var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
var wrapperClassName = isDragAndDropEnabled ? isChromelessEditor ? _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + _types.TableCssClassName.TABLE_CHROMELESS : _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types.TableCssClassName.ROW_CONTROLS_WRAPPER;
var tablePos = (_findTable = (0, _utils.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 && (0, _nodes.isTableNested)(editorView.state, tablePos);
var shouldShowCornerControls = isNested && !(0, _platformFeatureFlags.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.default.createElement("div", {
className: wrapperClassName
}, /*#__PURE__*/_react.default.createElement("div", {
onMouseDown: function onMouseDown(e) {
return !isDragAndDropEnabled && e.preventDefault();
}
}, isNumberColumnEnabled ? /*#__PURE__*/_react.default.createElement(_NumberColumn.default, {
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.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControlsWithSelection, {
editorView: editorView,
tableRef: tableRef,
isInDanger: isInDanger,
isResizing: isResizing,
api: api
}), /*#__PURE__*/_react.default.createElement(_DragControls.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.default.createElement(_FloatingControlsWithSelection.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
}))))
);
};
var _default = exports.default = TableFloatingControls;