@yandex/ui/usePopper/modifiers/applyStyles.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.applyStyles = void 0;
/**
 * Модификатор, применяющий стили на DOM-элемент при изменении расположения на странице.
 */
exports.applyStyles = {
    name: 'applyStyles',
    enabled: true,
    fn: applyStylesFn,
    effect: applyStylesEffect,
    phase: 'write',
    requires: ['computeStyles'],
};
// Применяем стили напрямую на DOM-элемент в обход
// react-рендера для повышения производительности.
function applyStylesFn(_a) {
    var state = _a.state;
    Object.keys(state.elements).forEach(function (name) {
        var style = state.styles[name] || {};
        var attributes = state.attributes[name] || {};
        // @ts-ignore (Параметр state не является перечисляемым)
        var element = state.elements[name];
        if (!(element instanceof HTMLElement)) {
            return;
        }
        Object.assign(element.style, style);
        Object.keys(attributes).forEach(function (name) {
            var value = attributes[name];
            if (value === false) {
                element.removeAttribute(name);
            }
            else {
                element.setAttribute(name, value === true ? '' : value);
            }
        });
    });
}
// Не используем applyStyles из popper, т.к. нам важно
// сохранять текущую позицию для завершения анимации,
// в popper происходит очистка всех стилей при закрытии.
function applyStylesEffect(_a) {
    var state = _a.state;
    var initialPopperStyles = {
        position: state.options.strategy,
        left: 0,
        top: 0,
        margin: 0,
    };
    Object.assign(state.elements.popper.style, initialPopperStyles);
}