@wix/design-system
Version:
@wix/design-system
209 lines (205 loc) • 7.72 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.dragAndDropDriverFactory = exports.changeItemDepth = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _findInstance = require("./findInstance");
var _dragAndDropTestUtils = require("./dragAndDropTestUtils");
var _constants = require("../../DragAndDrop/Draggable/constants");
var _dragAndDropPuppeteerDriverFactory = require("./dragAndDropPuppeteerDriverFactory");
var _dragAndDropPlaywrightDriverFactory = require("./dragAndDropPlaywrightDriverFactory");
var _actCompat = require("../../utils/test-utils/unidriver/actCompat");
var _isPuppeteerUniDriver = require("../test-utils/unidriver/isPuppeteerUniDriver");
var _isPlaywrightUniDriver = require("../test-utils/unidriver/isPlaywrightUniDriver");
var getManager = instance => (0, _dragAndDropTestUtils.getInstanceOfDraggableProvider)(instance).getManager();
var getDraggableId = (element, dataHook) => element.querySelector("[data-hook=\"".concat(dataHook, "\"]")).getAttribute(_constants.dataAttributes.id);
var simulateMouseMove = (dndInstance, draggableId) => {
getManager(dndInstance).getBackend().simulateHover([(0, _dragAndDropTestUtils.getInstanceOfDraggableTarget)(dndInstance, draggableId).getHandlerId()]);
};
var dragAndDropDriverFactory = _ref => {
var {
base,
element
} = _ref;
var isPuppeteer = (0, _isPuppeteerUniDriver.isPuppeteerUniDriver)(base);
var isPlaywright = (0, _isPlaywrightUniDriver.isPlaywrightUniDriver)(base);
// Only create drivers when needed to avoid errors from incompatible APIs
var getDragAndDropPuppeteerDriver = () => (0, _dragAndDropPuppeteerDriverFactory.dragAndDropPuppeteerDriverFactory)({
base,
element
});
var getDragAndDropPlaywrightDriver = () => (0, _dragAndDropPlaywrightDriverFactory.dragAndDropPlaywrightDriverFactory)({
base
});
return {
beginDrag: function () {
var _beginDrag = (0, _asyncToGenerator2.default)(function* (_ref2) {
var {
dataHook
} = _ref2;
if (isPlaywright) {
return getDragAndDropPlaywrightDriver().beginDrag({
dataHook
});
}
if (isPuppeteer) {
return getDragAndDropPuppeteerDriver().beginDrag({
dataHook
});
}
var dndInstance = (0, _findInstance.findInstance)(element);
var draggableId = getDraggableId(element, dataHook);
var handleId = (0, _dragAndDropTestUtils.getInstanceOfDraggableSource)(dndInstance, draggableId).getHandlerId();
yield (0, _actCompat.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
getManager(dndInstance).getBackend().simulateBeginDrag([handleId]);
}));
});
function beginDrag(_x) {
return _beginDrag.apply(this, arguments);
}
return beginDrag;
}(),
dragOver: function () {
var _dragOver = (0, _asyncToGenerator2.default)(function* (_ref4) {
var {
dataHook,
offset
} = _ref4;
if (isPlaywright) {
return getDragAndDropPlaywrightDriver().dragOver({
dataHook,
offset
});
}
if (isPuppeteer) {
return getDragAndDropPuppeteerDriver().dragOver({
dataHook,
offset
});
}
var dndInstance = (0, _findInstance.findInstance)(element);
var draggableId = getDraggableId(element, dataHook);
if (offset) {
getManager(dndInstance).getMonitor().getClientOffset = vi.fn(() => offset);
// on horizontal item move we have to simulate one more mouse move event
// in order to get correct drop target
yield (0, _actCompat.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
simulateMouseMove(dndInstance, draggableId);
}));
}
yield (0, _actCompat.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
simulateMouseMove(dndInstance, draggableId);
}));
});
function dragOver(_x2) {
return _dragOver.apply(this, arguments);
}
return dragOver;
}(),
endDrag: function () {
var _endDrag = (0, _asyncToGenerator2.default)(function* (item) {
if (isPlaywright) {
return getDragAndDropPlaywrightDriver().endDrag();
}
if (isPuppeteer) {
return getDragAndDropPuppeteerDriver().endDrag({
dataHook: item.dataHook
});
}
var backend = getManager((0, _findInstance.findInstance)(element)).getBackend();
yield (0, _actCompat.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
backend.simulateDrop();
backend.simulateEndDrag();
}));
});
function endDrag(_x3) {
return _endDrag.apply(this, arguments);
}
return endDrag;
}(),
getItemPosition: function () {
var _getItemPosition = (0, _asyncToGenerator2.default)(function* (_ref8) {
var {
dataHook
} = _ref8;
var draggableItems = yield base.$$("[".concat(_constants.dataAttributes.draggableTarget, "]")).map(/*#__PURE__*/function () {
var _ref9 = (0, _asyncToGenerator2.default)(function* (item) {
return {
dataHook: yield (yield item.$$("[".concat(_constants.dataAttributes.draggableSource, "]")).get(0)).attr('data-hook')
};
});
return function (_x5) {
return _ref9.apply(this, arguments);
};
}());
return draggableItems.findIndex(item => item.dataHook === dataHook);
});
function getItemPosition(_x4) {
return _getItemPosition.apply(this, arguments);
}
return getItemPosition;
}(),
getItemDepth: function () {
var _getItemDepth = (0, _asyncToGenerator2.default)(function* (_ref0) {
var {
dataHook
} = _ref0;
var depth = yield base.$("[data-hook=\"".concat(dataHook, "\"]")).attr(_constants.dataAttributes.depth);
return parseInt(depth, 10);
});
function getItemDepth(_x6) {
return _getItemDepth.apply(this, arguments);
}
return getItemDepth;
}()
};
};
exports.dragAndDropDriverFactory = dragAndDropDriverFactory;
var changeItemDepthByOneLevel = /*#__PURE__*/function () {
var _ref10 = (0, _asyncToGenerator2.default)(function* (_ref1) {
var {
dragAndDropDriver,
dataHook,
offset
} = _ref1;
yield dragAndDropDriver.beginDrag({
dataHook
});
yield dragAndDropDriver.dragOver({
dataHook,
offset: {
x: offset,
y: 0
}
});
yield dragAndDropDriver.endDrag({
dataHook
});
});
return function changeItemDepthByOneLevel(_x7) {
return _ref10.apply(this, arguments);
};
}();
var changeItemDepth = exports.changeItemDepth = /*#__PURE__*/function () {
var _ref12 = (0, _asyncToGenerator2.default)(function* (_ref11) {
var {
dragAndDropDriver,
depthLevel,
threshold,
dataHook
} = _ref11;
for (var i = 0; i < Math.abs(depthLevel); i++) {
// we have to move one level at a time,
// so the drop targets could be registered successfully
yield changeItemDepthByOneLevel({
dragAndDropDriver,
dataHook,
offset: depthLevel > 0 ? threshold : threshold * -1
});
}
});
return function changeItemDepth(_x8) {
return _ref12.apply(this, arguments);
};
}();
//# sourceMappingURL=dragAndDropDriverFactory.js.map