@roo-ui/components
Version:
46 lines (34 loc) • 1.68 kB
JavaScript
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;
;