# All files / src/components withBoundingRects.jsx

95.24% Statements 20/21
62.5% Branches 5/8
100% Functions 5/5
100% Lines 20/20

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81

    1x

    1x

    1x

    2x
    2x

    2x

    2x
    2x

    2x

    2x
    2x
    2x

    2x

    2x

    2x

    4x

    2x
    2x
    2x

    2x

     /* eslint react/no-did-mount-set-state: 0, react/no-find-dom-node: 0 */
    import React from 'react';
    import ReactDOM from 'react-dom';
    import PropTypes from 'prop-types';

    const emptyRect = {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      width: 0,
      height: 0,
    };

    const rectShape = PropTypes.shape({
      top: PropTypes.number.isRequired,
      right: PropTypes.number.isRequired,
      bottom: PropTypes.number.isRequired,
      left: PropTypes.number.isRequired,
      width: PropTypes.number.isRequired,
      height: PropTypes.number.isRequired,
    });

    export const withBoundingRectsProps = {
      getRects: PropTypes.func,
      rect: rectShape,
      parentRect: rectShape,
    };

    export default function withBoundingRects(BaseComponent) {
      class WrappedComponent extends React.PureComponent {
        constructor(props) {
          super(props);
          this.state = {
            rect: null,
            parentRect: null,
          };
          this.getRects = this.getRects.bind(this);
        }

        componentDidMount() {
          this.node = ReactDOM.findDOMNode(this);
          this.setState(this.getRects());
        }

        getRects() {
          Iif (!this.node) return this.state;

          const node = this.node;
          const parentNode = this.node.parentNode;
          console.log('parentNode', parentNode);

          const rect = node.getBoundingClientRect
            ? node.getBoundingClientRect()
            : emptyRect;

          const parentRect = parentNode.getBoundingClientRect
            ? parentNode.getBoundingClientRect()
            : emptyRect;

          return { rect, parentRect };
        }

        render() {
          return (
            <BaseComponent
              getRects={this.getRects}
              {...this.state}
              {...this.props}
            />
          );
        }
      }

      WrappedComponent.propTypes = BaseComponent.propTypes;
      WrappedComponent.defaultProps = BaseComponent.defaultProps;
      WrappedComponent.displayName = `withBoundingRects(${BaseComponent.displayName || ''})`;

      return WrappedComponent;
    }