@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
241 lines (217 loc) • 11.5 kB
JavaScript
;
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 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');
var chevrondown = require('./chevrondown.js');
require('./chevrondownsmall.js');
require('./chevronleft.js');
require('./chevronleftsmall.js');
require('./chevronright.js');
require('./chevronrightsmall.js');
var chevronup = require('./chevronup.js');
require('./chevronupsmall.js');
require('./clock.js');
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');
function _templateObject3() {
var data = __chunk_1._taggedTemplateLiteral(["\n display: block;\n box-sizing: border-box;\n font-family: base;\n\n ", "\n\n &.no-bottom-border {\n border-bottom-style: none;\n\n .anchor-collapse-button {\n border-bottom-style: none;\n }\n }\n\n .anchor-collapse-content.inactive {\n display: none;\n }\n ", "\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = __chunk_1._taggedTemplateLiteral(["\n color: text.light;\n\n .anchor-collapse-button {\n appearance: none;\n background-color: white; /* All but Chrome show a grey button bg color despite 'appearance: none' */\n border-style: none;\n border-bottom: light;\n border-top: light;\n color: text.light;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n font-weight: bold;\n height: 3rem;\n padding: 0 1.3125rem;\n text-align: left;\n user-select: none;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n > *:last-child {\n flex: 0 0 auto;\n margin-left: 0.5em;\n }\n }\n\n .anchor-collapse-content {\n background-color: background.light;\n\n ul {\n padding: 0;\n margin: 0;\n list-style-type: none;\n }\n // TODO: we shouldn't be using as many fragile nested selectors and we should be using Typography\n li a {\n display: block;\n padding-left: 3.4375rem;\n height: 2.6875rem;\n line-height: 2.6875rem;\n cursor: pointer;\n font-size: 0.875rem;\n color: #222;\n\n &:hover {\n background-color: rgba(0, 126, 205, 0.1);\n }\n }\n }\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = __chunk_1._taggedTemplateLiteral(["\n padding: 1rem 2rem;\n border-top: solid thin ", ";\n border-bottom: solid thin ", ";\n\n .anchor-collapse-button {\n appearance: none;\n background-color: transparent; /* All but Chrome show a grey button bg color despite 'appearance: none' */\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n width: 100%;\n text-align: left;\n border-style: none;\n font-weight: 500;\n font-size: 0.875rem;\n padding: 0.5rem 0;\n user-select: none;\n\n &:focus {\n outline: none;\n }\n\n > *:last-child {\n flex: 0 0 auto;\n margin-left: 0.5em;\n }\n }\n\n .anchor-collapse-content {\n font-size: 1rem;\n text-align: left;\n padding: 0.5rem 0;\n }\n "]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var DEFAULT_OPENED_TEXT = 'Close';
var DEFAULT_CLOSED_TEXT = 'Open';
var DEFAULT_VARIANT = 'comfortable';
var variants = {
comfortable: styled.css(_templateObject(), system.th.color('borders.base'), system.th.color('borders.base')),
compact: styled.css(_templateObject2()),
none: styled.css({})
};
var variantStyles = system.variant({
key: 'collapse.variants',
prop: 'variant',
"default": DEFAULT_VARIANT,
variants: variants
});
var StyledCollapse = styled__default('div')(_templateObject3(), variantStyles, system.space);
StyledCollapse.displayName = 'StyledCollapse';
var Collapse = function Collapse(_a) {
var _a$isOpen = _a.isOpen,
isOpen = _a$isOpen === void 0 ? false : _a$isOpen,
_a$openedText = _a.openedText,
openedText = _a$openedText === void 0 ? DEFAULT_OPENED_TEXT : _a$openedText,
_a$closedText = _a.closedText,
closedText = _a$closedText === void 0 ? DEFAULT_CLOSED_TEXT : _a$closedText,
openedIcon = _a.openedIcon,
closedIcon = _a.closedIcon,
_a$variant = _a.variant,
variant = _a$variant === void 0 ? DEFAULT_VARIANT : _a$variant,
onClick = _a.onClick,
_a$hasBottomBorder = _a.hasBottomBorder,
hasBottomBorder = _a$hasBottomBorder === void 0 ? true : _a$hasBottomBorder,
_a$removeInactive = _a.removeInactive,
removeInactive = _a$removeInactive === void 0 ? true : _a$removeInactive,
className = _a.className,
children = _a.children,
props = __chunk_2.__rest(_a, ["isOpen", "openedText", "closedText", "openedIcon", "closedIcon", "variant", "onClick", "hasBottomBorder", "removeInactive", "className", "children"]);
var _React$useState = React.useState(isOpen),
_React$useState2 = __chunk_1._slicedToArray(_React$useState, 2),
open = _React$useState2[0],
toggleOpen = _React$useState2[1];
var IconOpened = openedIcon || React.createElement(chevronup.ChevronUp, null);
var IconClosed = closedIcon || React.createElement(chevrondown.ChevronDown, null); // If the user provides custom openedText but not custom closedText
// then use openedText for closedText as well
var textClosed = openedText !== DEFAULT_OPENED_TEXT && closedText === DEFAULT_CLOSED_TEXT ? openedText : closedText; // Allows for the programmatic opening/closing of the Collapse
// without a user having to click it
React.useEffect(function () {
toggleOpen(isOpen);
}, [isOpen]);
return React.createElement(StyledCollapse, Object.assign({
variant: variant,
className: classNames('anchor-collapse', open && 'open', variant, !hasBottomBorder && 'no-bottom-border', className)
}, props), React.createElement("button", {
onClick: onClick || function () {
return toggleOpen(!open);
},
className: "anchor-collapse-button"
}, open ? React.createElement(React.Fragment, null, openedText, " ", IconOpened) : React.createElement(React.Fragment, null, textClosed, " ", IconClosed)), (open || !removeInactive) && React.createElement("section", {
className: classNames('anchor-collapse-content', !open && 'inactive')
}, children));
};
function _templateObject$1() {
var data = __chunk_1._taggedTemplateLiteral([""]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
// are styled components.
var StyledCollapseGroup = styled__default('div')(_templateObject$1());
StyledCollapseGroup.displayName = 'StyledCollapseGroup';
var CollapseGroup = function CollapseGroup(_a) {
var _a$accordion = _a.accordion,
accordion = _a$accordion === void 0 ? false : _a$accordion,
_a$openIndex = _a.openIndex,
openIndex = _a$openIndex === void 0 ? 0 : _a$openIndex,
children = _a.children,
className = _a.className,
props = __chunk_2.__rest(_a, ["accordion", "openIndex", "children", "className"]);
var _React$useState = React.useState(openIndex),
_React$useState2 = __chunk_1._slicedToArray(_React$useState, 2),
currentOpenIndex = _React$useState2[0],
setCurrentOpenIndex = _React$useState2[1];
return React.createElement(StyledCollapseGroup, Object.assign({
className: classNames('anchor-collapse-group', className)
}, props), children && children.map(function (child, index) {
return React.cloneElement(child, Object.assign({
// TODO: Even if not explicitly set, this forces all child Collapse components
// to closed because `undefined` is falsy. Additionally, this is overwritten
// if `isOpen` is explicitly set, because `...props` is spread below.
isOpen: accordion ? index === currentOpenIndex : undefined,
// If accordion, use setCurrentOpenIndex as the event handler to control
// accordion functionality of the Collapse child. If the currentOpenIndex
// is the same as the iterator (i) that means the Collapse element is
// already open, in which case currentOpenIndex gets set to 1 which ends
// up returning false for all checks allowing an opened Collapse element
// to be closed.
onClick: accordion ? function () {
return setCurrentOpenIndex(index === currentOpenIndex ? -1 : index);
} : undefined,
// No Collapse element should have a bottom border except for the last one.
hasBottomBorder: index === children.length - 1,
key: "collapse-child-".concat(index)
}, props));
}));
};
exports.Collapse = Collapse;
exports.CollapseGroup = CollapseGroup;
//# sourceMappingURL=collapse.js.map