react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
65 lines (63 loc) • 2.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.offset = void 0;
var _directions = require("../directions");
var _utils = require("../utils");
// Imported from yandex-ui. Source: https://github.com/bem/yandex-ui/
/**
* Use it instead default offset modifier because we need consider tail size
* for offset and round a offset for correct alignment
*/
function offsetFn(_a) {
var state = _a.state,
options = _a.options;
var _b = options.offset,
offset = _b === void 0 ? [0, 0] : _b,
tailOffset = options.tailOffset;
// TODO: #bug `tailOffset` is never apply and useless
// probably this mod unnecessary and should replace to `arrowOverflow`
// who will prevent out arrow of popup for any cases
if (state.modifiersData.arrow && tailOffset) {
if (state.modifiersData.arrow.x) {
state.modifiersData.arrow.x += tailOffset;
}
if (state.modifiersData.arrow.y) {
state.modifiersData.arrow.y += tailOffset;
}
}
if (state.modifiersData.popperOffsets && state.elements.arrow) {
var width = (0, _utils.getLayoutRect)(state.elements.arrow).width;
// Displace tail on half size, such as it should fit to square
// to correct positioning for all directions
var _c = (0, _utils.distanceAndSkiddingToXY)(state.placement, [0, width / 2]),
x_1 = _c.x,
y_1 = _c.y;
state.modifiersData.popperOffsets.x += x_1;
state.modifiersData.popperOffsets.y += y_1;
}
var data = _directions.directions.reduce(function (acc, placement) {
acc[placement] = (0, _utils.distanceAndSkiddingToXY)(placement, offset);
return acc;
}, {});
var _d = data[state.placement],
x = _d.x,
y = _d.y;
if (state.modifiersData.popperOffsets) {
state.modifiersData.popperOffsets.x = Math.ceil(state.modifiersData.popperOffsets.x + x);
state.modifiersData.popperOffsets.y = Math.ceil(state.modifiersData.popperOffsets.y + y);
}
// Write to use it in `detectOverflow` modifier
state.modifiersData.offset = data;
}
/**
* Modifier to set offsets for popup and tail
*/
var offset = exports.offset = {
name: 'offset',
enabled: true,
fn: offsetFn,
phase: 'main',
requires: ['popperOffsets']
};