react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
59 lines (58 loc) • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.applyStyles = void 0;
// Imported from yandex-ui. Source: https://github.com/bem/yandex-ui/
/**
* Apply styles and attributes right on DOM elements to improve performance
*/
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 use name as key to elements
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);
}
});
});
}
/**
* Not use `applyStyles` from popper, cuz there effect will cleanup,
* but we need save position for animate
*/
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);
}
/**
* Modifier to apply styles right on DOM elements while change position
*
* This modifier may be faster than `updateStyles` cuz don't trigger render,
* but it not idiomatic for react and it make execution flow inconsistent
*/
var applyStyles = exports.applyStyles = {
name: 'applyStyles',
enabled: true,
fn: applyStylesFn,
effect: applyStylesEffect,
phase: 'write',
requires: ['computeStyles']
};