@roo-ui/components
Version:
100 lines (77 loc) • 3.2 kB
JavaScript
'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;