@roo-ui/components/dist/Hide/Hide.js

'use strict';

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

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledSystem = require('styled-system');

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

var breakpoints = function breakpoints(props) {
  return {
    xs: '@media screen and (max-width: ' + (0, _styledSystem.themeGet)('breakpoints.0')(props) + ')',
    sm: '@media screen and (min-width: ' + (0, _styledSystem.themeGet)('breakpoints.0')(props) + ')\n                     and (max-width: ' + (0, _styledSystem.themeGet)('breakpoints.1')(props) + ')',
    md: '@media screen and (min-width: ' + (0, _styledSystem.themeGet)('breakpoints.1')(props) + ')\n                     and (max-width: ' + (0, _styledSystem.themeGet)('breakpoints.2')(props) + ')',
    lg: '@media screen and (min-width: ' + (0, _styledSystem.themeGet)('breakpoints.2')(props) + ')'
  };
};

var hidden = exports.hidden = function hidden(key) {
  return function (props) {
    return props[key] && (0, _styledComponents.css)(['', '{display:none;}'], breakpoints(props)[key]);
  };
};

var Hide = _styledComponents2.default.div.withConfig({
  displayName: 'Hide'
})(['', ' ', ' ', ' ', ''], hidden('xs'), hidden('sm'), hidden('md'), hidden('lg'));

Hide.propTypes = {
  xs: _propTypes2.default.bool,
  sm: _propTypes2.default.bool,
  md: _propTypes2.default.bool,
  lg: _propTypes2.default.bool
};

exports.default = Hide;