react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
52 lines (51 loc) • 1.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.applyMaxHeight = void 0;
var _core = require("@popperjs/core");
var _utils = _interopRequireDefault(require("../utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Imported from yandex-ui. Source: https://github.com/bem/yandex-ui/
var __assign = void 0 && (void 0).__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
// TODO: #bug this mod can decrease height when we have free space
// probably we should apply different strategies to calc this depends of placement (x or y direction)
function applyMaxHeightFn(_a) {
var state = _a.state,
options = _a.options;
var userMaxHeight = options.maxHeight,
_b = options.padding,
padding = _b === void 0 ? 16 : _b;
var overflow = (0, _core.detectOverflow)(state, {
padding: padding
});
var _c = (state.modifiersData.preventOverflow || {}).y,
y = _c === void 0 ? 0 : _c;
var height = state.rects.popper.height;
var basePlacement = (0, _utils.default)(state.placement);
var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
var maxHeight = height - overflow[heightProp] - y;
var popupMaxHeight = userMaxHeight ? Math.min(maxHeight - y, userMaxHeight) : maxHeight;
state.styles.popper = __assign(__assign({}, state.styles.popper), {
maxHeight: "".concat(popupMaxHeight, "px")
});
}
/**
* Modifier to set optimal height of popup within viewport
*/
var applyMaxHeight = exports.applyMaxHeight = {
name: 'applyMaxHeight',
enabled: true,
fn: applyMaxHeightFn,
phase: 'main',
requires: ['computeStyles']
};