talk/client/coral-framework/components/IfSlotIsNotEmpty.js

import React, {Children} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {getShallowChanges} from 'coral-framework/utils';

class IfSlotIsNotEmpty extends React.Component {
  static contextTypes = {
    plugins: PropTypes.object,
  };

  shouldComponentUpdate(next) {

    // Prevent Slot from rerendering when only reduxState has changed and
    // it does not result in a change.
    const changes = getShallowChanges(this.props, next);
    if (changes.length === 1 && changes[0] === 'reduxState') {
      return this.isSlotEmpty(this.props) !== this.isSlotEmpty(next);
    }

    // Prevent Slot from rerendering when no props has shallowly changed.
    return changes.length !== 0;
  }

  isSlotEmpty(props = this.props) {
    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, queryData, ...rest} = props;
    const slots = Array.isArray(slot) ? slot : [slot];
    return slots.every((slot) => this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData));
  }

  render() {
    const {children} = this.props;
    return this.isSlotEmpty() ? null : Children.only(children);
  }
}

IfSlotIsNotEmpty.propTypes = {
  slot: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
};

const mapStateToProps = (state) => ({
  reduxState: state,
});

export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);