smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
180 lines (170 loc) • 7.42 kB
JavaScript
'use strict';
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');
require('../Transition-48c5648c.js');
var CSSTransition = require('../CSSTransition-5a3ab124.js');
var ArrowElement = require('../ArrowElement-d3a1a777.js');
const customKeys = {
size$: (v, t) => `
padding: ${t.tooltip.padding[v].y} ${t.tooltip.padding[v].x};
font-size: ${t.tooltip.fontSize[v]};
`
};
var TooltipElement = styled__default(Div).attrs({ customKeys })(({ theme, type, arrow }) => `
position: fixed;
z-index: ${theme.src.zIndex.tooltip};
left: 0;
top: 0;
box-sizing: border-box;
border-radius: ${theme.src.tooltip.radius};
background: ${theme.src.type[type].main};
color: ${theme.src.type[type].font};
fill: ${theme.src.type[type].font};
font-family: ${theme.src.fontFamily.tooltip};
${arrow == "right" ? `
${ArrowElement.ArrowElement}:before {
border-width: .5rem .5rem .5rem 0;
border-right-color: ${theme.src.type[type].main};
}
` : ""}
${arrow == "left" ? `
${ArrowElement.ArrowElement}:before {
border-width: .5rem 0 .5rem .5rem;
border-left-color: ${theme.src.type[type].main};
}
` : ""}
${arrow == "top" ? `
${ArrowElement.ArrowElement}:before {
border-width: .5rem .5rem 0;
border-top-color: ${theme.src.type[type].main};
}
` : ""}
${arrow == "bottom" ? `
${ArrowElement.ArrowElement}:before {
border-width: 0 .5rem .5rem .5rem;
border-bottom-color: ${theme.src.type[type].main};
}
` : ""}
`);
const DEFAULT_STYLE = {};
class Tooltip extends React__default.Component {
constructor(props) {
super(props);
this.el = React__default.createRef();
this.arrowEl = React__default.createRef();
/**
* Opens element.
*/
this.open = () => {
if (!this.state.status)
this.setState(Object.assign(Object.assign({}, this.state), { status: true }));
};
/**
* Closes element.
*/
this.close = () => {
if (this.state.status)
this.setState(Object.assign(Object.assign({}, this.state), { status: false }));
};
/**
* Closes element if target is not in the range.
*/
this.closeIfNotInRange = (e) => {
const containerEl = reactDom.findDOMNode(this);
if (this.state.status && !(e.target == containerEl || containerEl.contains(e.target)))
this.setState(Object.assign(Object.assign({}, this.state), { status: false }));
};
/**
* Toggles element.
*/
this.toggle = () => {
this.setState(Object.assign(Object.assign({}, this.state), { status: !this.state.status }));
};
/**
* Sets position of the element.
*/
this.setPosition = () => {
if (this.state.status) {
const containerEl = reactDom.findDOMNode(this);
this.setState(Object.assign(Object.assign({}, this.state), { attrs: ArrowElement.TooltipHelper.getAttributes(this.el.current, containerEl, this.props.position, null, this.arrowEl.current) }));
}
};
/**
* Calls the set position method before showing the box element.
*/
this.beforeShow = () => new Promise(resolve => {
this.setPosition();
resolve();
});
this.state = {
status: false,
attrs: {}
};
}
componentDidMount() {
const containerEl = reactDom.findDOMNode(this);
if (!DOMHelper.DOMHelper.isMobile) {
DOMHelper.DOMHelper.addEventListener(containerEl, ["mouseover"], this.open);
DOMHelper.DOMHelper.addEventListener(containerEl, ["mouseleave"], this.close);
}
else {
DOMHelper.DOMHelper.addEventListener(document.body, ["click"], this.closeIfNotInRange);
if (this.state.status)
DOMHelper.DOMHelper.addEventListener(window, ["resize", "scroll"], this.setPosition, true);
}
DOMHelper.DOMHelper.addEventListener(containerEl, ["click"], this.toggle);
}
componentDidUpdate(op, os) {
const ns = this.state;
if (os.status != ns.status && DOMHelper.DOMHelper.isMobile) {
if (ns.status)
DOMHelper.DOMHelper.addEventListener(window, ["resize", "scroll"], this.setPosition, true);
else
DOMHelper.DOMHelper.removeEventListener(window, ["resize", "scroll"], this.setPosition);
}
}
componentWillUnmount() {
const containerEl = reactDom.findDOMNode(this);
if (!DOMHelper.DOMHelper.isMobile) {
DOMHelper.DOMHelper.removeEventListener(containerEl, ["mouseover"], this.open);
DOMHelper.DOMHelper.removeEventListener(containerEl, ["mouseleave"], this.close);
}
else {
DOMHelper.DOMHelper.removeEventListener(document.body, ["click"], this.closeIfNotInRange);
DOMHelper.DOMHelper.removeEventListener(window, ["resize", "scroll"], this.setPosition);
}
DOMHelper.DOMHelper.removeEventListener(containerEl, ["click"], this.toggle);
}
render() {
const p = this.props;
const s = this.state;
const Element = (React__default.createElement(CSSTransition.CSSTransition, { status: s.status, className: p.transitionClassName, type: p.transitionType, duration: p.transitionDuration, showAnimation: p.showAnimation, hideAnimation: p.hideAnimation, beforeShow: this.beforeShow },
React__default.createElement(TooltipElement, Object.assign({}, 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 }),
p.children[1],
React__default.createElement(ArrowElement.ArrowElement, { zIndex: "tooltip", ref: this.arrowEl, style: { transform: s.attrs.arrowTransform } }))));
return (React__default.createElement(React__default.Fragment, null,
p.children[0],
DOMHelper.DOMHelper.canBeRenderedInPortal(p.renderInBody) ? reactDom.createPortal(Element, document.body) : Element));
}
}
Tooltip.defaultProps = {
size: "default",
elementProps: index.DV.JSX_ELEMENT_PROPS,
type: "black",
position: "top",
renderInBody: true,
transitionClassName: "src-fade",
transitionType: "ease-in-out",
transitionDuration: 300,
showAnimation: true,
hideAnimation: true
};
module.exports = Tooltip;