@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
202 lines (201 loc) • 11.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.toggleDragMenuWithAnalytics = exports.moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalytics = exports.cloneSourceWithAnalytics = exports.clearDropTargetWithAnalytics = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
var _utils = require("@atlaskit/editor-tables/utils");
var _analytics2 = require("../utils/analytics");
var _dragMenu = require("../utils/drag-menu");
var _selection = require("../utils/selection");
var _commands = require("./commands");
var _pluginFactory = require("./plugin-factory");
var clearDropTargetWithAnalytics = exports.clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
return function (inputMethod, sourceType, sourceIndexes, status, tr) {
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref) {
var _sourceIndexes$length;
var selection = _ref.selection;
var _getSelectedTableInfo = (0, _analytics2.getSelectedTableInfo)(selection),
totalRowCount = _getSelectedTableInfo.totalRowCount,
totalColumnCount = _getSelectedTableInfo.totalColumnCount;
return {
action: sourceType === 'table-row' ? _analytics.TABLE_ACTION.MOVED_ROW : _analytics.TABLE_ACTION.MOVED_COLUMN,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
attributes: {
inputMethod: inputMethod,
count: (_sourceIndexes$length = sourceIndexes === null || sourceIndexes === void 0 ? void 0 : sourceIndexes.length) !== null && _sourceIndexes$length !== void 0 ? _sourceIndexes$length : 0,
distance: 0,
status: status,
totalRowCount: totalRowCount,
totalColumnCount: totalColumnCount
},
eventType: _analytics.EVENT_TYPE.TRACK
};
})(editorAnalyticsAPI)(function (state, dispatch) {
if (dispatch) {
(0, _commands.clearDropTarget)(tr)(state, dispatch);
}
return true;
});
};
};
var moveSourceWithAnalytics = exports.moveSourceWithAnalytics = function moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotify, getIntl) {
return function (inputMethod, sourceType, sourceIndexes, targetIndex, tr) {
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref2) {
var selection = _ref2.selection;
var direction = sourceIndexes[0] > targetIndex ? -1 : 1;
var _getSelectedTableInfo2 = (0, _analytics2.getSelectedTableInfo)(selection),
totalRowCount = _getSelectedTableInfo2.totalRowCount,
totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
return {
action: sourceType === 'table-row' ? _analytics.TABLE_ACTION.MOVED_ROW : _analytics.TABLE_ACTION.MOVED_COLUMN,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
attributes: {
inputMethod: inputMethod,
count: sourceIndexes.length,
// This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
// of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
distance: Math.min.apply(Math, (0, _toConsumableArray2.default)(sourceIndexes.map(function (v) {
return Math.abs(targetIndex - v);
}))) * direction,
// If a drop doesn't actually change anything then we're going to mark the event as cancelled.
status: sourceIndexes.includes(targetIndex) ? _analytics.TABLE_STATUS.CANCELLED : _analytics.TABLE_STATUS.SUCCESS,
totalRowCount: totalRowCount,
totalColumnCount: totalColumnCount
},
eventType: _analytics.EVENT_TYPE.TRACK
};
})(editorAnalyticsAPI)(function (state, dispatch) {
if (dispatch) {
(0, _commands.moveSource)(sourceType, sourceIndexes, targetIndex, tr)(state, dispatch);
// Only considering single row/column movement for screen reader as only single row/column selection is supported via keyboard atm.
if ((inputMethod === _analytics.INPUT_METHOD.TABLE_CONTEXT_MENU || _analytics.INPUT_METHOD.SHORTCUT) && sourceIndexes.length === 1 && ariaNotify && getIntl) {
var direction = sourceIndexes[0] > targetIndex ? -1 : 1; // -1 for left/up , 1 for right/down
var _getSelectedTableInfo3 = (0, _analytics2.getSelectedTableInfo)(state.selection),
totalRowCount = _getSelectedTableInfo3.totalRowCount,
totalColumnCount = _getSelectedTableInfo3.totalColumnCount;
ariaNotify(getIntl().formatMessage(sourceType === 'table-row' ? direction > 0 ? _messages.tableMessages.rowMovedDown : _messages.tableMessages.rowMovedUp : direction > 0 ? _messages.tableMessages.columnMovedRight : _messages.tableMessages.columnMovedLeft, {
index: targetIndex + 1,
total: sourceType === 'table-row' ? totalRowCount : totalColumnCount
}), {
priority: 'important'
});
}
}
return true;
});
};
};
var moveSourceWithAnalyticsViaShortcut = exports.moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI, ariaNotify, getIntl) {
return function (sourceType, direction) {
return function (state, dispatch) {
var selection = state.selection;
var isCellSelection = selection instanceof _cellSelection.CellSelection;
var selectionRect = isCellSelection ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
if (!selectionRect) {
return false;
}
var isRow = sourceType === 'table-row';
var selectedIndexes = isRow ? (0, _selection.getSelectedRowIndexes)(selectionRect) : (0, _selection.getSelectedColumnIndexes)(selectionRect);
if (selectedIndexes.length === 0) {
return false;
}
var _getSelectedTableInfo4 = (0, _analytics2.getSelectedTableInfo)(selection),
totalRowCount = _getSelectedTableInfo4.totalRowCount,
totalColumnCount = _getSelectedTableInfo4.totalColumnCount;
if (!(0, _dragMenu.canMove)(sourceType, direction, isRow ? totalRowCount : totalColumnCount, selection, selectionRect)) {
return false;
}
var targetIndex = (0, _dragMenu.getTargetIndex)(selectedIndexes, direction);
return moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotify, getIntl)(_analytics.INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
};
};
};
var cloneSourceWithAnalytics = exports.cloneSourceWithAnalytics = function cloneSourceWithAnalytics(editorAnalyticsAPI) {
return function (inputMethod, sourceType, sourceIndexes, targetIndex, targetDirection, tr) {
return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref3) {
var selection = _ref3.selection;
var direction = sourceIndexes[0] > targetIndex ? -1 : 1;
var _getSelectedTableInfo5 = (0, _analytics2.getSelectedTableInfo)(selection),
totalRowCount = _getSelectedTableInfo5.totalRowCount,
totalColumnCount = _getSelectedTableInfo5.totalColumnCount;
return {
action: sourceType === 'table-row' ? _analytics.TABLE_ACTION.CLONED_ROW : _analytics.TABLE_ACTION.CLONED_COLUMN,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
attributes: {
inputMethod: inputMethod,
count: sourceIndexes.length,
// This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
// of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
distance: Math.min.apply(Math, (0, _toConsumableArray2.default)(sourceIndexes.map(function (v) {
return Math.abs(targetIndex - v);
}))) * direction,
// If a drop doesn't actually change anything then we're going to mark the event as cancelled.
status: sourceIndexes.includes(targetIndex) ? _analytics.TABLE_STATUS.CANCELLED : _analytics.TABLE_STATUS.SUCCESS,
totalRowCount: totalRowCount,
totalColumnCount: totalColumnCount
},
eventType: _analytics.EVENT_TYPE.TRACK
};
})(editorAnalyticsAPI)(function (state, dispatch) {
if (dispatch) {
(0, _commands.cloneSource)(sourceType, sourceIndexes, targetIndex, targetDirection, tr)(state, dispatch);
}
return true;
});
};
};
var toggleDragMenuWithAnalytics = exports.toggleDragMenuWithAnalytics = function toggleDragMenuWithAnalytics(editorAnalyticsAPI) {
return function (isDragMenuOpen, direction, index) {
var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
previousOpenState = _getPluginState.isDragMenuOpen,
previousDragMenuDirection = _getPluginState.dragMenuDirection,
previousDragMenuIndex = _getPluginState.dragMenuIndex;
if (previousOpenState === isDragMenuOpen && previousDragMenuDirection === direction && previousDragMenuIndex === index) {
return undefined;
}
var updatedMenuOpenState;
if (isDragMenuOpen !== undefined) {
updatedMenuOpenState = isDragMenuOpen;
} else {
// menu open but menu direction changed, means user clicked on drag handle of different row/column
// menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
// 2 scenarios above , menu should remain open.
if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
updatedMenuOpenState = true;
} else {
updatedMenuOpenState = !previousOpenState;
}
}
if (updatedMenuOpenState) {
var _ref4;
// We only want to fire analytics when the menu is opened
return {
action: _analytics.TABLE_ACTION.DRAG_MENU_OPENED,
actionSubject: _analytics.ACTION_SUBJECT.TABLE,
actionSubjectId: null,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
inputMethod: trigger === 'keyboard' ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE,
direction: (_ref4 = direction !== null && direction !== void 0 ? direction : previousDragMenuDirection) !== null && _ref4 !== void 0 ? _ref4 : 'column'
}
};
}
return undefined;
})(editorAnalyticsAPI)(function (state, dispatch) {
if (dispatch) {
(0, _commands.toggleDragMenu)(isDragMenuOpen, direction, index, trigger)(state, dispatch);
}
return true;
});
};
};