UNPKG

@roo-ui/components

Version:

46 lines (34 loc) 1.68 kB
'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;