@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
76 lines • 4.09 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
// VENDOR
import * as React from 'react';
import styled from '@xstyled/styled-components';
import { display as displayStyles } from '@xstyled/system';
import classNames from 'classnames';
import { PositionContainer } from '../utils/PositionContainer';
// UTILS
import { get } from '../utils/get/get';
const StyledPopOver = styled('div') `
${displayStyles}
position: relative;
display: inline-flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
`;
export class PopOver extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {
width: 0,
height: 0,
containerHeight: 0,
containerWidth: 0,
};
this.popOverContainerRef = React.createRef();
this.popOverRef = React.createRef();
}
// TODO: why the fuck not just use the code in the dropdown/abstract that out and inject it into two instances?
componentDidMount() {
const { current: popOver } = this.popOverRef;
const { current: popOverContainer } = this.popOverContainerRef;
this.setState({
height: get(popOver, 'clientHeight', 0),
width: get(popOver, 'clientWidth', 0),
containerHeight: get(popOverContainer, 'clientHeight', 0),
containerWidth: get(popOverContainer, 'clientWidth', 0),
});
}
componentDidUpdate(prevProps) {
const { showArrow: prevShowArrow, position: prevPosition, spacing: prevSpacing, active: prevActive, } = prevProps;
const { showArrow, position, spacing, active } = this.props;
if ((active && !prevActive) ||
showArrow !== prevShowArrow ||
position !== prevPosition ||
spacing !== prevSpacing) {
const { current: popOver } = this.popOverRef;
const { current: popOverContainer, } = this.popOverContainerRef;
this.setState({
height: get(popOver, 'clientHeight', 0),
width: get(popOver, 'clientWidth', 0),
containerHeight: get(popOverContainer, 'clientHeight', 0),
containerWidth: get(popOverContainer, 'clientWidth', 0),
});
}
}
render() {
const _a = this.props, { arrowIndent, arrowSize, background = '#000000', children, className, border, borderRadius, color = '#ffffff', content, delay, debug, shadow, spacing = 8, maxWidth, position = 'bottomStart', showArrow, display = 'inline-block', active } = _a, props = __rest(_a, ["arrowIndent", "arrowSize", "background", "children", "className", "border", "borderRadius", "color", "content", "delay", "debug", "shadow", "spacing", "maxWidth", "position", "showArrow", "display", "active"]);
const { height, containerHeight, containerWidth, width } = this.state;
return (React.createElement(StyledPopOver, Object.assign({ className: classNames('anchor-pop-over', className), display: display }, props, { ref: this.popOverRef }),
children,
React.createElement(PositionContainer, { ref: this.popOverContainerRef, active: active, arrowIndent: arrowIndent, arrowSize: arrowSize, background: background, border: border, borderRadius: borderRadius, children: content, className: "anchor-pop-over-element", color: color, containerHeight: containerHeight, containerWidth: containerWidth, height: height, width: width, delay: delay, debug: debug, shadow: shadow, spacing: spacing, maxWidth: maxWidth, position: position, showArrow: showArrow })));
}
}
//# sourceMappingURL=PopOver.component.js.map