@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
233 lines (212 loc) • 11.1 kB
JavaScript
import { c as _slicedToArray, a as _taggedTemplateLiteral } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { variant, th, space } from '@xstyled/system';
import './addevent.js';
import './anchor-chunk-25c07228.js';
import './arrowback.js';
import './arrowforward.js';
import './avataricon.js';
import './avataroutline.js';
import './barcode.js';
import './bulletlist.js';
import './calendar.js';
import './camera.js';
import './cart.js';
import './cashback.js';
import './cells.js';
import './chat.js';
import './check.js';
import './checksmall.js';
import { ChevronDown } from './chevrondown.js';
import './chevrondownsmall.js';
import './chevronleft.js';
import './chevronleftsmall.js';
import './chevronright.js';
import './chevronrightsmall.js';
import { ChevronUp } from './chevronup.js';
import './chevronupsmall.js';
import './clock.js';
import './close.js';
import './closesmall.js';
import './commentmore.js';
import './creditcard.js';
import './crosshairs.js';
import './cut.js';
import './disabled.js';
import './dislike.js';
import './download.js';
import './ellipses.js';
import './ellipsesvertical.js';
import './envelope.js';
import './envelopeopen.js';
import './error.js';
import './expand.js';
import './gear.js';
import './giftcard.js';
import './hamburger.js';
import './heart.js';
import './heartoutline.js';
import './home.js';
import './info.js';
import './infooutline.js';
import './laptop.js';
import './lightning.js';
import './like.js';
import './listicon.js';
import './lock.js';
import './map.js';
import './marker.js';
import './markeroutline.js';
import './mobile.js';
import './news.js';
import './pencil.js';
import './play.js';
import './plus.js';
import './plussmall.js';
import './print.js';
import './question.js';
import './questionoutline.js';
import './refresh.js';
import './retailmenotlogo.js';
import './sadface.js';
import './search.js';
import './share.js';
import './sliders.js';
import './star.js';
import './starhalf.js';
import './staroutline.js';
import './success.js';
import './successoutline.js';
import './tag.js';
import './upload.js';
import './tagadd.js';
function _templateObject3() {
var data = _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 = _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 = _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: css(_templateObject(), th.color('borders.base'), th.color('borders.base')),
compact: css(_templateObject2()),
none: css({})
};
var variantStyles = variant({
key: 'collapse.variants',
prop: 'variant',
"default": DEFAULT_VARIANT,
variants: variants
});
var StyledCollapse = styled('div')(_templateObject3(), variantStyles, 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$$1 = _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 = __rest(_a, ["isOpen", "openedText", "closedText", "openedIcon", "closedIcon", "variant", "onClick", "hasBottomBorder", "removeInactive", "className", "children"]);
var _React$useState = useState(isOpen),
_React$useState2 = _slicedToArray(_React$useState, 2),
open = _React$useState2[0],
toggleOpen = _React$useState2[1];
var IconOpened = openedIcon || createElement(ChevronUp, null);
var IconClosed = closedIcon || createElement(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
useEffect(function () {
toggleOpen(isOpen);
}, [isOpen]);
return createElement(StyledCollapse, Object.assign({
variant: variant$$1,
className: classNames('anchor-collapse', open && 'open', variant$$1, !hasBottomBorder && 'no-bottom-border', className)
}, props), createElement("button", {
onClick: onClick || function () {
return toggleOpen(!open);
},
className: "anchor-collapse-button"
}, open ? createElement(Fragment, null, openedText, " ", IconOpened) : createElement(Fragment, null, textClosed, " ", IconClosed)), (open || !removeInactive) && createElement("section", {
className: classNames('anchor-collapse-content', !open && 'inactive')
}, children));
};
function _templateObject$1() {
var data = _taggedTemplateLiteral([""]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
// are styled components.
var StyledCollapseGroup = styled('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 = __rest(_a, ["accordion", "openIndex", "children", "className"]);
var _React$useState = useState(openIndex),
_React$useState2 = _slicedToArray(_React$useState, 2),
currentOpenIndex = _React$useState2[0],
setCurrentOpenIndex = _React$useState2[1];
return createElement(StyledCollapseGroup, Object.assign({
className: classNames('anchor-collapse-group', className)
}, props), children && children.map(function (child, index) {
return 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));
}));
};
export { Collapse, CollapseGroup };
//# sourceMappingURL=collapse.js.map