wix-style-react
Version:
wix-style-react
88 lines • 3.14 kB
JavaScript
import * as React from 'react';
const isTestEnv = process.env.NODE_ENV === 'test';
export function getParentNode(element) {
if (element.nodeName === 'HTML') {
return element;
}
// @ts-ignore
return element.parentNode || element.host;
}
function getStyleComputedProperty(element) {
// NOTE: 1 DOM access here
const window = element.ownerDocument.defaultView;
// @ts-ignore
return window.getComputedStyle(element, null);
}
// @ts-ignore
export function getScrollParent(element) {
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
if (!element) {
return document.body;
}
switch (element.nodeName) {
case 'HTML':
case 'BODY':
return element.ownerDocument.body;
case '#document':
// @ts-ignore
return element.body;
default:
}
// Firefox want us to check `-x` and `-y` variations as well
const { overflow, overflowX, overflowY } = getStyleComputedProperty(element);
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return element;
}
return getScrollParent(getParentNode(element));
}
export const buildChildrenObject = (children, childrenObject) => {
return React.Children.toArray(children).reduce((acc, child) => {
if (!React.isValidElement(child)) {
return acc;
}
if (!child.type || !child.type.displayName) {
return acc;
}
const name = child.type.displayName.split('.').pop();
// @ts-ignore
acc[name] = child;
return acc;
}, childrenObject || {});
};
export const createComponentThatRendersItsChildren = (displayName) => {
const Element = ({ children }) => typeof children === 'string'
? React.createElement('div', {}, children)
: children;
Element.displayName = displayName;
return Element;
};
export const noop = () => null;
export const isReactElement = (child, Element) => {
return child && child.type === Element;
};
export const isStatelessComponent = (Component) => !(Component.prototype && Component.prototype.render);
export const attachClasses = (node, classnames) => node && node.classList.add(...classnames.split(' '));
export const detachClasses = (node, classnames) => node && node.classList.remove(...classnames.split(' '));
export const shouldAnimatePopover = ({ timeout, }) => {
if (typeof timeout === 'object') {
const { enter, exit } = timeout;
return (typeof enter !== 'undefined' &&
typeof exit !== 'undefined' &&
(enter > 0 || exit > 0));
}
return !!timeout;
};
export const getArrowShift = (shift, direction) => {
if (!shift && !isTestEnv) {
return {};
}
if (direction.startsWith('top') || direction.startsWith('bottom')) {
return { left: `${shift}px` };
}
if (direction.startsWith('left') || direction.startsWith('right')) {
return { top: `${shift}px` };
}
// Arrow can't be shifted when using automatic positioning
return {};
};
//# sourceMappingURL=utils.js.map