UNPKG

@roo-ui/components

Version:

100 lines (77 loc) 3.2 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _styledComponents = require('styled-components'); var _styledSystem = require('styled-system'); var _ = require('..'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } var alertFactory = function alertFactory(defaultVariant) { var BaseAlert = (0, _styledComponents.withTheme)(function (_ref) { var children = _ref.children, onClose = _ref.onClose, contained = _ref.contained, theme = _ref.theme, variant = _ref.variant, props = _objectWithoutProperties(_ref, ['children', 'onClose', 'contained', 'theme', 'variant']); var _themeGet$props = _extends({}, (0, _styledSystem.themeGet)('alertStyles.' + variant)({ theme: theme }), props), icon = _themeGet$props.icon, bg = _themeGet$props.bg; var Wrapper = contained ? _.Container : _.Box; return _react2.default.createElement( _.Box, _extends({}, props, { bg: bg }), _react2.default.createElement( Wrapper, { px: contained ? undefined : 4 }, _react2.default.createElement( _.Flex, { py: 4 }, icon && _react2.default.createElement( _.Box, { pr: 3 }, _react2.default.createElement(_.Icon, icon) ), _react2.default.createElement( _.Text, { mb: 0, textAlign: 'left' }, children ), onClose && _react2.default.createElement( _.Box, { ml: 'auto', pl: 3 }, _react2.default.createElement( _.NakedButton, { onClick: onClose }, _react2.default.createElement(_.Icon, { name: 'close' }) ) ) ) ) ); }); BaseAlert.displayName = 'Alert' + (defaultVariant !== 'default' ? '.' + defaultVariant : ''); BaseAlert.propTypes = _extends({}, _.Box.propTypes, { children: _propTypes2.default.node.isRequired, icon: _propTypes2.default.shape(_.Icon.propTypes), contained: _propTypes2.default.bool, onClose: _propTypes2.default.func, variant: _propTypes2.default.string }); BaseAlert.defaultProps = _extends({}, _.Box.defaultProps, { variant: defaultVariant, mb: 3 }); return BaseAlert; }; var Alert = alertFactory('default'); Alert.info = alertFactory('info'); Alert.success = alertFactory('success'); Alert.error = alertFactory('error'); exports.default = Alert;