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

'use strict';

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

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _polished = require('polished');

var _memoize = require('lodash/memoize');

var _memoize2 = _interopRequireDefault(_memoize);

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

// assuming root font-size is 16px
var ONE_PX_IN_REM = 0.0625;

var minusOnePx = (0, _memoize2.default)(function (value) {
  var _getValueAndUnit = (0, _polished.getValueAndUnit)(value),
      _getValueAndUnit2 = _slicedToArray(_getValueAndUnit, 2),
      dimension = _getValueAndUnit2[0],
      unit = _getValueAndUnit2[1];

  switch (unit) {
    case 'em':
    case 'rem':
      return '' + (dimension - ONE_PX_IN_REM) + unit;
    case 'px':
      return dimension - 1 + 'px';
    default:
      return value;
  }
});

var breakpoints = function breakpoints(props) {
  return {
    xs: '@media screen and (max-width: ' + minusOnePx((0, _styledSystem.themeGet)('breakpoints.0')(props)) + ')',
    sm: '@media screen and (min-width: ' + (0, _styledSystem.themeGet)('breakpoints.0')(props) + ')\n                     and (max-width: ' + minusOnePx((0, _styledSystem.themeGet)('breakpoints.1')(props)) + ')',
    md: '@media screen and (min-width: ' + (0, _styledSystem.themeGet)('breakpoints.1')(props) + ')\n                     and (max-width: ' + minusOnePx((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;