react-divx/lib/index.es.js

react-divx

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/* eslint-disable react/destructuring-assignment */
import React from 'react';
import PropTypes from 'prop-types';
const fullAreaStyle = {
  height: '100%',
  width: '100%'
};

class DivX extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "componentDidMount", () => {
      if (this.props.onOuterClick || this.props.onDocumentClick) document.addEventListener('click', this.onDocumentClick);
      if (this.props.onEscPress || this.props.onDocumentKeydown) document.addEventListener('keydown', this.onDocumentKeydown);
      if (this.props.onResize) this.onResize(); // dynamics handlers attach

      Object.keys(this.getDynamicProps()).forEach(dynamicProp => {
        const key = dynamicProp.toLowerCase();

        if (dynamicProp.indexOf('onWindow') === 0 && key.replace('onwindow', '').length > 0) {
          window.addEventListener(key.replace('onwindow', ''), this.createDynamicHandler(dynamicProp));
        }

        if (dynamicProp.indexOf('onDocument') === 0 && key.replace('ondocument', '').length > 0) {
          document.addEventListener(key.replace('ondocument', ''), this.createDynamicHandler(dynamicProp));
        }
      });
    });

    _defineProperty(this, "componentDidUpdate", () => {
      if (this.props.onResize) this.onResize();
    });

    _defineProperty(this, "componentWillUnmount", () => {
      if (this.props.onOuterClick || this.props.onDocumentClick) document.removeEventListener('click', this.onDocumentClick);
      if (this.props.onEscPress || this.props.onDocumentKeydown) document.removeEventListener('keydown', this.onDocumentKeydown); // dynamics handlers remove

      Object.keys(this.dynamics).forEach(dynamicProp => {
        const key = dynamicProp.toLowerCase();

        if (dynamicProp.indexOf('onWindow') === 0 && key.replace('onwindow', '').length > 0) {
          window.removeEventListener(key.replace('onwindow', ''), this.dynamics[dynamicProp]);
        }

        if (dynamicProp.indexOf('onDocument') === 0 && key.replace('ondocument', '').length > 0) {
          document.removeEventListener(key.replace('ondocument', ''), this.dynamics[dynamicProp]);
        }
      });
    });

    _defineProperty(this, "onDocumentKeydown", event => {
      if (event.keyCode === 27) {
        if (typeof this.props.onEscPress === 'function') this.props.onEscPress(event);
      }

      if (typeof this.props.onDocumentKeydown === 'function') this.props.onDocumentKeydown(event);
    });

    _defineProperty(this, "onResize", () => {
      if (this.container) {
        const {
          clientHeight,
          clientWidth
        } = this.container;

        if (clientWidth !== this.clientWidth || clientHeight !== this.clientHeight) {
          this.clientHeight = clientHeight;
          this.clientWidth = clientWidth;
          if (typeof this.props.onResize === 'function') this.props.onResize(clientWidth, clientHeight);
        }
      }
    });

    _defineProperty(this, "onDocumentClick", e => {
      if (this.container && !this.container.contains(e.target)) {
        if (typeof this.props.onOuterClick === 'function') this.props.onOuterClick(e);
      }

      if (typeof this.props.onDocumentClick === 'function') this.props.onDocumentClick(e);
    });

    _defineProperty(this, "getDynamicProps", () => {
      // eslint-disable-next-line
      const {
        innerRef,
        onOuterClick,
        onResize,
        onEscPress,
        onDocumentKeydown,
        onDocumentClick,
        ...rest
      } = this.props;
      return rest;
    });

    _defineProperty(this, "getRealDivProps", () => {
      const rest = this.getDynamicProps();
      Object.keys(rest).forEach(dynamicProp => {
        const key = dynamicProp.toLowerCase();

        if (key.indexOf('onwindow') === 0 || key.indexOf('ondocument') === 0) {
          delete rest[dynamicProp];
        }
      });
      return rest;
    });

    _defineProperty(this, "setRef", ref => {
      this.container = ref;

      if (this.props.innerRef) {
        this.props.innerRef(ref);
      }
    });

    _defineProperty(this, "createDynamicHandler", dynamicProp => {
      this.dynamics[dynamicProp] = (...args) => {
        if (this.props[dynamicProp]) this.props[dynamicProp](...args);
      };

      return this.dynamics[dynamicProp];
    });

    this.state = {};
    this.clientHeight = 0;
    this.clientWidth = 0;
    this.dynamics = {};
  }

  render() {
    const {
      fullArea,
      children,
      onOuterClick,
      onResize
    } = this.props;
    const realDivProps = this.getRealDivProps();
    const needRealDiv = onOuterClick || onResize || Object.keys(realDivProps).length > 0;
    return needRealDiv ? // eslint-disable-next-line react/jsx-props-no-spreading
    React.createElement("div", _extends({
      ref: this.setRef
    }, realDivProps, {
      style: fullArea ? fullAreaStyle : undefined
    }), children) : children;
  }

}

DivX.propTypes = {
  innerRef: PropTypes.func,
  onOuterClick: PropTypes.func,
  onEscPress: PropTypes.func,
  onResize: PropTypes.func,
  onDocumentKeydown: PropTypes.func,
  onDocumentClick: PropTypes.func,
  children: PropTypes.any.isRequired,
  fullArea: PropTypes.bool
};
export default DivX;