@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
90 lines (87 loc) • 4.29 kB
JavaScript
;
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
var _getDragBehaviour = require("../../../pm-plugins/drag-and-drop/utils/getDragBehaviour");
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); }
var RowDropTarget = function RowDropTarget(_ref) {
var index = _ref.index,
localId = _ref.localId,
style = _ref.style;
var dropTargetRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
if (!dropTargetRef.current) {
return;
}
return (0, _adapter.dropTargetForElements)({
element: dropTargetRef.current,
canDrop: function canDrop(_ref2) {
var _data$indexes, _data$indexes2;
var source = _ref2.source,
input = _ref2.input;
var data = source.data;
var behaviour = (0, _getDragBehaviour.getDragBehaviour)(input);
// A move drop is limited too where it can go, however a clone can drop can go anywhere.
var isDropValid = behaviour === 'move' ? ((_data$indexes = data.indexes) === null || _data$indexes === void 0 ? void 0 : _data$indexes.indexOf(index)) === -1 : behaviour === 'clone';
return (
// Only draggables of row type can be dropped on this target
data.type === 'table-row' &&
// Only draggables which came from the same table can be dropped on this target
data.localId === localId &&
// Only draggables which DO NOT include this drop targets index can be dropped
!!((_data$indexes2 = data.indexes) !== null && _data$indexes2 !== void 0 && _data$indexes2.length) && isDropValid
);
},
getDropEffect: function getDropEffect(_ref3) {
var input = _ref3.input;
return (0, _getDragBehaviour.getDragBehaviour)(input) === 'clone' ? 'copy' : 'move';
},
getIsSticky: function getIsSticky() {
return true;
},
getData: function getData(_ref4) {
var _srcData$indexes;
var source = _ref4.source,
input = _ref4.input,
element = _ref4.element;
var data = {
localId: localId,
type: 'table-row',
targetIndex: index
};
var srcData = source.data;
var behaviour = (0, _getDragBehaviour.getDragBehaviour)(input);
// During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
var allowedEdges = behaviour === 'move' ? (_srcData$indexes = srcData.indexes) === null || _srcData$indexes === void 0 ? void 0 : _srcData$indexes.reduce(function (acc, v) {
if (v - index === -1) {
acc.shift();
}
if (v - index === 1) {
acc.pop();
}
return acc;
}, ['top', 'bottom']) : ['top', 'bottom'];
return (0, _closestEdge.attachClosestEdge)(data, {
input: input,
element: element,
allowedEdges: allowedEdges
});
}
});
}, [index, localId]);
return /*#__PURE__*/_react.default.createElement("div", {
ref: dropTargetRef
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: style,
"data-drop-target-index": index,
"data-drop-target-localid": localId,
"data-testid": "table-floating-row-controls-drop-target"
});
};
var _default = exports.default = RowDropTarget;