@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
220 lines (198 loc) • 7.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var __chunk_8 = require('./anchor-chunk-598e53e1.js');
var __chunk_9 = require('./anchor-chunk-f296150d.js');
var polished = require('polished');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');
require('./addevent.js');
require('./anchor-chunk-31a3b978.js');
require('./arrowback.js');
require('./arrowforward.js');
require('./avataricon.js');
require('./avataroutline.js');
require('./barcode.js');
require('./bulletlist.js');
require('./calendar.js');
require('./camera.js');
require('./cart.js');
require('./cashback.js');
require('./cells.js');
require('./chat.js');
require('./check.js');
require('./checksmall.js');
require('./chevrondown.js');
require('./chevrondownsmall.js');
require('./chevronleft.js');
require('./chevronleftsmall.js');
require('./chevronright.js');
require('./chevronrightsmall.js');
require('./chevronup.js');
require('./chevronupsmall.js');
require('./clock.js');
var close = require('./close.js');
require('./closesmall.js');
require('./commentmore.js');
require('./creditcard.js');
require('./crosshairs.js');
require('./cut.js');
require('./disabled.js');
require('./dislike.js');
require('./download.js');
require('./ellipses.js');
require('./ellipsesvertical.js');
require('./envelope.js');
require('./envelopeopen.js');
require('./error.js');
require('./expand.js');
require('./gear.js');
require('./giftcard.js');
require('./hamburger.js');
require('./heart.js');
require('./heartoutline.js');
require('./home.js');
require('./info.js');
require('./infooutline.js');
require('./laptop.js');
require('./lightning.js');
require('./like.js');
require('./listicon.js');
require('./lock.js');
require('./map.js');
require('./marker.js');
require('./markeroutline.js');
require('./mobile.js');
require('./news.js');
require('./pencil.js');
require('./play.js');
require('./plus.js');
require('./plussmall.js');
require('./print.js');
require('./question.js');
require('./questionoutline.js');
require('./refresh.js');
require('./retailmenotlogo.js');
require('./sadface.js');
require('./search.js');
require('./share.js');
require('./sliders.js');
require('./star.js');
require('./starhalf.js');
require('./staroutline.js');
require('./success.js');
require('./successoutline.js');
require('./tag.js');
require('./upload.js');
require('./tagadd.js');
var __chunk_6 = require('./anchor-chunk-cd6fece5.js');
require('./anchor-chunk-1efd6395.js');
var __chunk_7 = require('./anchor-chunk-eb382a51.js');
function _templateObject3() {
var data = __chunk_1._taggedTemplateLiteral(["\n box-sizing: border-box;\n display: flex;\n\n .anchor-alert-content {\n flex: 1 1 auto;\n }\n .anchor-icon {\n flex: 0 0 0;\n padding: 0 0.5rem 0 0;\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = __chunk_1._taggedTemplateLiteral(["\n box-sizing: border-box;\n position: relative;\n border-radius: base;\n font-family: base;\n padding: 0.5rem 1.5rem 0.5rem 0.5rem;\n ", ";\n ", ";\n\n .anchor-alert-close {\n position: absolute;\n top: 0;\n right: 0;\n\n &:active,\n &:hover,\n &:focus {\n background-color: transparent;\n }\n }\n\n h4,\n p {\n line-height: 1.2em;\n margin: 0;\n padding: 0;\n }\n\n h4 {\n padding-bottom: 0.75rem;\n &:last-child {\n padding-bottom: 0;\n }\n }\n ", ";\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = __chunk_1._taggedTemplateLiteral(["\n .anchor-alert-icon {\n ", "\n }\n "]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
(function (AlertTypes) {
AlertTypes["success"] = "SUCCESS";
AlertTypes["info"] = "INFO";
AlertTypes["warning"] = "WARNING";
AlertTypes["error"] = "ERROR";
})(exports.AlertTypes || (exports.AlertTypes = {}));
var renderAlertTheme = function renderAlertTheme(variant) {
return styled.css(_templateObject(), function (_ref) {
var theme = _ref.theme;
return styled.css({
color: polished.darken(0.2, __chunk_9.get(theme, "colors.".concat(variant.toLowerCase())))
});
});
};
var StyledAlert = styled__default('div')(_templateObject2(), function (_ref2) {
var variant = _ref2.variant;
return styled.css({
backgroundColor: "background.".concat(variant.toLowerCase()),
border: 'solid thin',
borderColor: "borders.".concat(variant.toLowerCase())
});
}, function (_ref3) {
var variant = _ref3.variant;
return renderAlertTheme(variant);
}, system.space);
var renderMessageAndDescription = function renderMessageAndDescription(_ref4) {
var message = _ref4.message,
description = _ref4.description;
return React.createElement(React.Fragment, null, message && React.createElement(__chunk_6.Typography, {
as: "h4"
}, message), description && React.createElement(__chunk_6.Typography, {
as: "p",
color: "text.light"
}, description));
};
var StyledIconContainer = styled__default('div')(_templateObject3());
var Alert = function Alert(_a) {
var className = _a.className,
children = _a.children,
_a$onClose = _a.onClose,
onClose = _a$onClose === void 0 ? function () {
return null;
} : _a$onClose,
message = _a.message,
description = _a.description,
closable = _a.closable,
icon = _a.icon,
props = __chunk_2.__rest(_a, ["className", "children", "onClose", "message", "description", "closable", "icon"]);
var _React$useState = React.useState(false),
_React$useState2 = __chunk_1._slicedToArray(_React$useState, 2),
isHidden = _React$useState2[0],
setIsHidden = _React$useState2[1];
var handleClose = function handleClose() {
setIsHidden(true);
onClose();
};
return !isHidden ? React.createElement(StyledAlert, Object.assign({
className: classNames('anchor-alert', className)
}, props), closable && React.createElement(__chunk_7.Button, {
className: "anchor-alert-close",
size: "xs",
circular: true,
variant: "minimal",
prefix: React.createElement(close.Close, {
color: "rgba(0, 0, 0, 0.3)",
scale: "sm"
}),
onClick: handleClose
}), icon ? React.createElement(StyledIconContainer, null, __chunk_8.cloneWithProps(icon, {
className: 'anchor-alert-icon'
}), React.createElement("div", {
className: "anchor-alert-content"
}, renderMessageAndDescription({
message: message,
description: description
}))) : renderMessageAndDescription({
message: message,
description: description
})) : null;
};
exports.Alert = Alert;
//# sourceMappingURL=alert.js.map