react-hide-at/dist/HideAt.js

React stateless functional component for altering the visual experience of responsive and lean webpages.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactWithBreakpoints = require('react-with-breakpoints');

var _reactWithBreakpoints2 = _interopRequireDefault(_reactWithBreakpoints);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function HideAt(props) {
  var breakpoint = props.breakpoint;
  var currentBreakpoint = props.currentBreakpoint;

  var shouldRender = void 0;

  if (breakpoint.includes('small') && currentBreakpoint === 'small') {
    shouldRender = false;
  } else {
    shouldRender = true;
  }

  if (breakpoint.includes('medium')) {
    if (breakpoint.includes('AndBelow') && currentBreakpoint !== 'large') {
      shouldRender = false;
    } else if (breakpoint.includes('AndAbove') && currentBreakpoint !== 'small') {
      shouldRender = false;
    } else if (breakpoint === 'medium' && currentBreakpoint === 'medium') {
      shouldRender = false;
    }
  }

  if (breakpoint.includes('large')) {
    if (breakpoint.includes('AndBelow')) {
      shouldRender = false;
    } else if (currentBreakpoint !== 'large') {
      shouldRender = true;
    } else {
      shouldRender = false;
    }
  }

  if (shouldRender) {
    return _react2.default.createElement(
      'div',
      null,
      props.children
    );
    // TODO: solve unnecessary else after return
    // eslint-disable-next-line
  } else {
    return null;
  }
}

HideAt.propTypes = {
  breakpoint: _propTypes2.default.oneOf(['small', 'medium', 'mediumAndBelow', 'mediumAndAbove', 'largeAndBelow', 'large']).isRequired,
  // eslint-disable-next-line
  breakpoints: _propTypes2.default.object,
  currentBreakpoint: _propTypes2.default.string,
  children: _propTypes2.default.node
};

HideAt.displayName = 'HideAt';

HideAt.defaultProps = {
  breakpoint: '',
  currentBreakpoint: '',
  children: null
};

var HideAtWithBreakpoint = (0, _reactWithBreakpoints2.default)(HideAt);

exports.default = HideAtWithBreakpoint;