smart-react-components/FixedBox-a18d2049.js

React UI library, wide variety of editable ready to use Styled and React components.

'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);
var Div = require('./element/Div.js');
var reactDom = require('react-dom');
var CSSTransition = require('./CSSTransition-5a3ab124.js');
var Overlay = require('./Overlay-95b8c50b.js');

const FixedBoxElement = styled__default(Div)(({ theme, boxShadow, width }) => `
    position: fixed;
    z-index: ${theme.src.zIndex.fixedBox};
    overflow: auto;

    ${boxShadow ? `
        box-shadow: ${theme.src.fixedBox.boxShadow};
    ` : ""}

    @media(max-width:${theme.src.grid.breakpoint.medium - 1}px) {
        position: static;
        ${!width ? "width: 100% !important;" : ""}
        height: auto !important;
        max-height: 100% !important;
    }
`);
class FixedBox extends React__default.Component {
    constructor() {
        super(...arguments);
        this.box = React__default.createRef();
        /**
         * Sets the box position.
         */
        this.setPosition = () => {
            const container = reactDom.findDOMNode(this);
            if (!(container && this.box.current))
                return;
            let crect = container.getBoundingClientRect();
            let brect = this.box.current.getBoundingClientRect();
            let style = "";
            // x
            if (!this.props.minWidth) {
                style += `
                left: ${crect.left}px;
                width: ${crect.width}px;
            `;
            }
            else {
                let width = Math.max(crect.width, this.props.minWidth);
                style += `width:${width}px;`;
                let diffLeft = window.innerWidth - (crect.left + width);
                let diffRight = crect.left - width;
                if (diffLeft >= 0 || diffLeft >= diffRight)
                    style += `left:${crect.left}px;`;
                else
                    style += `left:${crect.left + crect.width - width}px;`;
            }
            // y
            let diffTop = (crect.top + crect.height) - (brect.height + 1);
            let diffBottom = window.innerHeight - (crect.top + crect.height + brect.height + this.props.space);
            if (diffBottom >= 0 || diffBottom >= diffTop) {
                let height = diffBottom > 0 ? brect.height : (window.innerHeight - (crect.top + crect.height + this.props.space));
                style += `
                top: ${crect.top + crect.height + this.props.space}px;
                height: ${height}px;
            `;
            }
            else {
                let height = diffTop > 0 ? brect.height : crect.top;
                style += `
                top: ${(crect.top + crect.height) - (height + 1)}px;
                height: ${height}px;
            `;
            }
            this.box.current.setAttribute("style", style);
        };
        /**
         * Closes the box.
         */
        this.close = () => this.props.setStatus(false);
        /**
         * Detects target if it is in the range, if it is not, closes the box.
         *
         * @param e
         */
        this.detect = (e) => {
            const target = e.target;
            const container = reactDom.findDOMNode(this);
            if (this.box.current &&
                e.target != container &&
                !container.contains(target) &&
                e.target != this.box.current &&
                !this.box.current.contains(target))
                this.close();
        };
        /**
         * Toggles element if it is clickable.
         *
         * @param e
         */
        this.toggle = (e) => {
            const container = reactDom.findDOMNode(this);
            if (DOMHelper.DOMHelper.checkIfTargetIsClickable(e.target, container))
                this.props.setStatus(!this.props.status);
        };
        /**
         * Calls the set position method before showing the box element.
         */
        this.beforeShow = () => new Promise(resolve => {
            this.setPosition();
            resolve();
        });
    }
    componentDidMount() {
        const container = reactDom.findDOMNode(this);
        DOMHelper.DOMHelper.addEventListener(container, ["click"], this.toggle);
        if (this.props.onRef)
            this.props.onRef({ setPosition: this.setPosition });
    }
    componentDidUpdate(op) {
        if (op.status != this.props.status) {
            if (this.props.status) {
                this.setPosition();
                DOMHelper.DOMHelper.addEventListener(window, ["resize", "scroll"], this.setPosition);
                DOMHelper.DOMHelper.addEventListener(window, ["click"], this.detect);
            }
            else {
                DOMHelper.DOMHelper.removeEventListener(window, ["resize", "scroll"], this.setPosition);
                DOMHelper.DOMHelper.removeEventListener(window, ["click"], this.detect);
            }
        }
    }
    componentWillUnmount() {
        const container = reactDom.findDOMNode(this);
        DOMHelper.DOMHelper.removeEventListener(container, ["click"], this.toggle);
    }
    render() {
        const FixedBoxEl = React__default.createElement(FixedBoxElement, Object.assign({}, this.props.boxProps, { ref: this.box, boxShadow: this.props.boxShadow }), this.props.children[1]);
        return (React__default.createElement(React__default.Fragment, null,
            this.props.children[0],
            React__default.createElement(CSSTransition.CSSTransition, { status: this.props.status, className: this.props.transitionClassName, type: this.props.transitionType, duration: this.props.transitionDuration, showAnimation: this.props.showAnimation, hideAnimation: this.props.hideAnimation, beforeShow: this.beforeShow },
                React__default.createElement(Overlay.Overlay, { breakpoint: "medium", elementProps: { alignItems: "center", alignItemsLg: "initial" } }, FixedBoxEl))));
    }
}
FixedBox.defaultProps = {
    boxProps: index.DV.JSX_ELEMENT_PROPS,
    space: 0,
    boxShadow: true,
    transitionClassName: "src-overlay-fixed-box-up",
    transitionDuration: 300,
    showAnimation: true,
    hideAnimation: true
};

exports.FixedBox = FixedBox;