smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
256 lines (234 loc) • 9.15 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var index = require('../index-6d498b59.js');
var DOMHelper = require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Div = require('../element/Div.js');
var reactDom = require('react-dom');
var ArrowElement = require('../ArrowElement-d3a1a777.js');
const customKeys = {
size$: (v, t) => `
font-size: ${t.popover.fontSize[v]};
.src-popover-header {
padding: ${t.popover.headerPadding[v].y} ${t.popover.headerPadding[v].x};
}
.src-popover-body {
padding: ${t.popover.bodyPadding[v].y} ${t.popover.bodyPadding[v].x};
}
`
};
var PopoverElement = styled__default(Div).attrs({ customKeys })(({ theme, type, arrow, isArrowInHeader }) => `
position: fixed;
z-index: ${theme.src.zIndex.popover};
left: 0;
top: 0;
box-sizing: border-box;
border: solid 1px ${theme.src.type[type].popover.border};
background: ${theme.src.type[type].popover.background};
font-family: ${theme.src.fontFamily.popover};
> * {
color: ${theme.src.type[type].font};
fill: ${theme.src.type[type].font};
}
.src-popover-header {
border-bottom: solid 1px ${theme.src.type[type].popover.headerBorder};
background: ${theme.src.type[type].popover.headerBackground};
}
${arrow == "right"
? `
${ArrowElement.ArrowElement} {
&:before {
left: 0;
border-width: .5rem .5rem .5rem 0;
border-right-color: ${theme.src.type[type].popover.border};
}
&:after {
left: 1px;
border-width: .5rem .5rem .5rem 0;
border-right-color: ${theme.src.type[type].popover.background};
}
}
${isArrowInHeader
? `
.src-popover-header ~ ${ArrowElement.ArrowElement} {
&:after {
border-right-color: ${theme.src.type[type].popover.headerBackground};
}
}
` : ""}
` : ""}
${arrow == "left"
? `
${ArrowElement.ArrowElement} {
&:before {
right: 0;
border-width: .5rem 0 .5rem .5rem;
border-left-color: ${theme.src.type[type].popover.border};
}
&:after {
right: 1px;
border-width: .5rem 0 .5rem .5rem;
border-left-color: ${theme.src.type[type].popover.background};
}
}
${isArrowInHeader
? `
.src-popover-header ~ ${ArrowElement.ArrowElement} {
&:after {
border-left-color: ${theme.src.type[type].popover.headerBackground};
}
}
` : ""}
` : ""}
${arrow == "top"
? `
${ArrowElement.ArrowElement} {
&:before {
bottom: 0;
border-width: .5rem .5rem 0;
border-top-color: ${theme.src.type[type].popover.border};
}
&:after {
bottom: 1px;
border-width: .5rem .5rem 0;
border-top-color: ${theme.src.type[type].popover.background};
}
}
${isArrowInHeader
? `
.src-popover-header ~ ${ArrowElement.ArrowElement} {
&:after {
border-top-color: ${theme.src.type[type].popover.headerBackground};
}
}
` : ""}
` : ""}
${arrow == "bottom"
? `
${ArrowElement.ArrowElement} {
&:before {
top: 0;
border-width: 0 .5rem .5rem .5rem;
border-bottom-color: ${theme.src.type[type].popover.border};
}
&:after {
top: 1px;
border-width: 0 .5rem .5rem .5rem;
border-bottom-color: ${theme.src.type[type].popover.background};
}
}
}
${arrow == "bottom"
? `
.src-popover-header ~ ${ArrowElement.ArrowElement} {
&:after {
border-bottom-color: ${theme.src.type[type].popover.headerBackground};
}
}
` : ""}
` : ""}
`);
const DEFAULT_STYLE = {};
class Popover extends React__default.Component {
constructor(props) {
super(props);
this.el = React__default.createRef();
this.arrowEl = React__default.createRef();
/**
* Toggles element.
*/
this.toggle = () => this.props.setStatus(!this.props.status);
/**
* Open element.
*/
this.open = () => {
if (!this.props.status)
this.props.setStatus(true);
};
/**
* Closes element if target is not in the container element.
*/
this.close = (e) => {
const containerEl = reactDom.findDOMNode(this);
if (e.target != containerEl && !containerEl.contains(e.target))
this.props.setStatus(false);
};
/**
* Sets position of the element.
*/
this.setPosition = () => {
if (this.props.status) {
const containerEl = reactDom.findDOMNode(this);
const headerEl = this.el.current.querySelector(`.src-popover-header`);
this.setState({
attrs: ArrowElement.TooltipHelper.getAttributes(this.el.current, containerEl, this.props.position, headerEl, this.arrowEl.current)
});
}
};
this.state = {
attrs: {}
};
}
componentDidMount() {
const containerEl = reactDom.findDOMNode(this);
if (!this.props.dismissible)
DOMHelper.DOMHelper.addEventListener(containerEl, ["click"], this.toggle);
else {
DOMHelper.DOMHelper.addEventListener(containerEl, ["click"], this.open);
if (this.props.status)
DOMHelper.DOMHelper.addEventListener(document.body, ["click"], this.close);
}
if (this.props.status)
DOMHelper.DOMHelper.addEventListener(window, ["resize", "scroll"], this.setPosition, true);
this.setPosition();
}
componentDidUpdate(op) {
const np = this.props;
if (np.status != op.status) {
if (np.dismissible) {
if (np.status)
DOMHelper.DOMHelper.addEventListener(document.body, ["click"], this.close);
else
DOMHelper.DOMHelper.removeEventListener(document.body, ["click"], this.close);
}
if (np.status) {
DOMHelper.DOMHelper.addEventListener(window, ["resize", "scroll"], this.setPosition, true);
this.setPosition();
}
else
DOMHelper.DOMHelper.removeEventListener(window, ["resize", "scroll"], this.setPosition);
}
}
componentWillUnmount() {
const containerEl = reactDom.findDOMNode(this);
if (!this.props.dismissible)
DOMHelper.DOMHelper.removeEventListener(containerEl, ["click"], this.toggle);
else {
DOMHelper.DOMHelper.removeEventListener(containerEl, ["click"], this.open);
DOMHelper.DOMHelper.removeEventListener(document.body, ["click"], this.close);
}
DOMHelper.DOMHelper.removeEventListener(window, ["resize", "scroll"], this.setPosition);
}
render() {
const p = this.props;
const s = this.state;
const Element = (React__default.createElement(PopoverElement, Object.assign({ maxWidth: "300px" }, p.elementProps, { style: Object.assign(Object.assign({}, (p.elementProps.style || DEFAULT_STYLE)), { transform: s.attrs.transform }), ref: this.el, "size$": p.size, "size$Sm": p.sizeSm, "size$Md": p.sizeMd, "size$Lg": p.sizeLg, "size$Xl": p.sizeXl, type: p.type, arrow: s.attrs.arrow, isArrowInHeader: s.attrs.isArrowInHeader }),
p.children[1],
React__default.createElement(ArrowElement.ArrowElement, { zIndex: "popover", ref: this.arrowEl, style: { transform: s.attrs.arrowTransform } })));
return (React__default.createElement(React__default.Fragment, null,
p.children[0],
this.props.status && (DOMHelper.DOMHelper.canBeRenderedInPortal(p.renderInBody) ? reactDom.createPortal(Element, document.body) : Element)));
}
}
Popover.defaultProps = {
size: "default",
elementProps: index.DV.JSX_ELEMENT_PROPS,
type: "white",
position: "right",
renderInBody: true
};
module.exports = Popover;