react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
58 lines • 2.09 kB
JavaScript
// Imported from yandex-ui. Source: https://github.com/bem/yandex-ui/
import { directions } from '../directions';
import { getLayoutRect, distanceAndSkiddingToXY } from '../utils';
/**
* 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 = 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 = 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.reduce(function (acc, placement) {
acc[placement] = 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
*/
export var offset = {
name: 'offset',
enabled: true,
fn: offsetFn,
phase: 'main',
requires: ['popperOffsets']
};