@navinc/base-react-components
Version:
Nav's Pattern Library
212 lines (211 loc) • 10.3 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = exports.Footer = exports.Kebab = exports.NextButton = exports.BackButton = exports.Undo = exports.DismissCard = exports.CheckMark = exports.CloseIcon = exports.StyledCard = exports.CardBody = exports.Title = exports.CardHeader = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const debounce_1 = __importDefault(require("lodash/debounce"));
const prop_types_1 = __importDefault(require("prop-types"));
const button_1 = __importDefault(require("../../button"));
const copy_1 = __importDefault(require("../../copy"));
const header_js_1 = __importDefault(require("../../header.js"));
const kebab_menu_1 = __importDefault(require("./parts/kebab-menu"));
const depricationWarning = (isInUse, warning) => {
isInUse && console.warn(warning);
};
/* Marks the bottom of the card's content. */
const WayMark = styled_components_1.default.hr `
border: none;
margin: 0;
height: 0;
`;
WayMark.displayName = 'WayMark';
const CARD_BODY_PADDING_BOTTOM = 32;
exports.CardHeader = (0, styled_components_1.default)(copy_1.default).attrs(() => ({ size: 'sm' })) `
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
min-height: 24px;
padding-bottom: 16px;
color: ${({ theme }) => theme.neutral400};
`;
exports.CardHeader.displayName = 'CardHeader';
exports.Title = (0, styled_components_1.default)(header_js_1.default).attrs(() => ({ size: 'md' })) `
padding-bottom: 16px;
`;
exports.Title.displayName = 'Title';
exports.CardBody = styled_components_1.default.div `
position: relative; /* required to get offsetTop of Waymark from Card */
padding-bottom: ${CARD_BODY_PADDING_BOTTOM}px;
${({ height, shouldNotAnimate }) => shouldNotAnimate ? '' : 'transition: height 250ms ease-in-out;' + `height: ${height}px;`}
overflow: hidden;
${copy_1.default} {
max-width: 520px;
}
`;
exports.CardBody.displayName = 'CardBody';
exports.StyledCard = styled_components_1.default.div `
position: relative;
flex: 1 1 100%;
padding: 24px;
border-radius: 4px;
background-color: ${({ theme }) => theme.white};
overflow: hidden;
box-shadow: 0 0 3px 0 ${({ theme }) => theme.neutral300}, 0 1px 2px 0 ${({ theme }) => theme.neutral300};
${({ isCardHidden, theme }) => isCardHidden &&
`
& > ${exports.CardHeader} {
border-top: 4px solid ${theme.good};
}
`};
`;
exports.StyledCard.displayName = 'StyledCard';
exports.CloseIcon = styled_components_1.default.img `
padding-left: 8px;
`;
exports.CloseIcon.displayName = 'CloseIcon';
exports.CheckMark = styled_components_1.default.img `
padding-right: 8px;
`;
exports.CheckMark.displayName = 'CheckMark';
exports.DismissCard = styled_components_1.default.div `
position: absolute;
right: 8px;
display: inline-block;
height: 100%;
padding: 16px;
border-left: 2px solid ${({ theme }) => theme.neutral300};
cursor: pointer;
`;
exports.DismissCard.displayName = 'DismissCard';
exports.Undo = (0, styled_components_1.default)(copy_1.default) `
cursor: pointer;
font-weight: bold;
margin-right: 64px;
`;
exports.Undo.displayName = 'Undo';
exports.BackButton = (0, styled_components_1.default)(button_1.default) `
padding: 8px;
margin-right: auto;
`;
exports.BackButton.displayName = 'BackButton';
exports.NextButton = (0, styled_components_1.default)(button_1.default) `
&[disabled] {
background-color: unset;
border-color: transparent;
color: ${({ theme }) => theme.neutral400};
cursor: default;
}
`;
exports.NextButton.displayName = 'NextButton';
exports.Kebab = styled_components_1.default.img.attrs(() => ({
src: 'https://dxkdvuv3hanyu.cloudfront.net/design-assets/icons/kebab-menu.svg',
})) `
position: absolute;
top: 16px;
right: 8px;
padding: 8px;
cursor: pointer;
`;
exports.Kebab.displayName = 'Kebab';
exports.Footer = styled_components_1.default.div `
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 16px;
border-top: 1px solid ${({ theme }) => theme.neutral300};
`;
exports.Footer.displayName = 'Footer';
class Card extends react_1.Component {
constructor() {
super(...arguments);
this.state = {
isKebabMenuVisible: false,
isCardHidden: false,
isCardDismissed: false,
contentHeight: 0,
};
this.toggleKebabMenu = (event) => {
event.stopPropagation();
this._mounted && this.setState({ isKebabMenuVisible: !this.state.isKebabMenuVisible });
};
this.togglehideCard = (event) => {
event.stopPropagation();
if (this.state.isKebabMenuVisible) {
this.toggleKebabMenu(event);
}
this._mounted && this.setState(({ isCardHidden }) => ({ isCardHidden: !isCardHidden }));
};
this.dismissCard = (event) => {
this._mounted && this.setState(() => ({ isCardDismissed: true }));
};
this.setRef = (name) => (ref) => {
this[name] = ref;
};
this.setHeight = (0, debounce_1.default)(() => {
if (this._mounted && !this.props.shouldNotAnimate) {
this.setState(() => {
var _a, _b;
return ({
contentHeight: ((_b = (_a = this.wayMark) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0) + CARD_BODY_PADDING_BOTTOM,
});
});
}
}, 250, { leading: true });
}
render() {
const { buttonCopy, buttonLabel = buttonCopy, children, className, labelCopy, cardLabel = labelCopy, hasAsyncNextButton, isLoading, onBack, onNext, onHide = () => { }, onToggleKebab = () => { }, titleCopy, title = titleCopy, buttonDisabled, buttonForm, kebabMenuItems = [], hasFooter = !!(onNext || onBack || buttonForm), shouldNotAnimate, } = this.props;
const { isKebabMenuVisible, isCardHidden, isCardDismissed } = this.state;
if (isCardDismissed)
return null;
return ((0, jsx_runtime_1.jsxs)(exports.StyledCard, Object.assign({ className: className, isCardHidden: isCardHidden }, { children: [cardLabel && (0, jsx_runtime_1.jsx)(exports.CardHeader, { children: cardLabel }, void 0), !!kebabMenuItems.length && ((0, jsx_runtime_1.jsx)(exports.Kebab, { onClick: (event) => {
this.toggleKebabMenu(event);
onToggleKebab(event);
} }, void 0)), isKebabMenuVisible && ((0, jsx_runtime_1.jsx)(kebab_menu_1.default, { kebabMenuItems: kebabMenuItems, onHide: onHide, togglehideCard: this.togglehideCard, toggleKebabMenu: this.toggleKebabMenu }, void 0)), title && (0, jsx_runtime_1.jsx)(exports.Title, { children: title }, void 0), (0, jsx_runtime_1.jsxs)(exports.CardBody, Object.assign({ height: this.state.contentHeight, shouldNotAnimate: shouldNotAnimate }, { children: [children, (0, jsx_runtime_1.jsx)(WayMark, { ref: this.setRef('wayMark') }, void 0)] }), void 0), hasFooter && ((0, jsx_runtime_1.jsxs)(exports.Footer, { children: [onBack && ((0, jsx_runtime_1.jsx)(exports.BackButton, Object.assign({ onClick: onBack, variation: "noOutline" }, { children: (0, jsx_runtime_1.jsx)("img", { src: "https://dxkdvuv3hanyu.cloudfront.net/icons/card_back_arrow.svg", alt: "back arrow" }, void 0) }), void 0)), !hasAsyncNextButton && onNext && ((0, jsx_runtime_1.jsx)(exports.NextButton, Object.assign({ isLoading: isLoading, onClick: onNext, size: "cardButton", variation: "noOutline", disabled: buttonDisabled, form: buttonForm }, { children: buttonLabel }), void 0)), hasAsyncNextButton && onNext && ((0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ isLoading: isLoading, onClick: onNext }, { children: buttonLabel }), void 0))] }, void 0))] }), void 0));
}
componentDidMount() {
this._mounted = true;
this.setHeight();
window.addEventListener('resize', this.setHeight);
depricationWarning(this.props.buttonCopy, 'The `buttonCopy` property on the `Card` component has been depricated and renamed to `buttonLabel`');
depricationWarning(this.props.titleCopy, 'The `titleCopy` property on the `Card` component has been depricated and renamed to `title`');
depricationWarning(this.props.controlledHeight, 'The `controlledHeight` property on the `Card` component has been depricated. All card components have a transition animation when heights change. The consumer of the Card component does not need to set explicit heights.');
depricationWarning(this.props.labelCopy, 'The `labelCopy` property on the `Card` component has been depricated and renamed `cardLabel`.');
}
componentDidUpdate() {
var _a, _b;
if (this.state.contentHeight !== ((_b = (_a = this.wayMark) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0)) {
this.setHeight();
}
}
componentWillUnmount() {
this._mounted = false;
window.removeEventListener('resize', this.setHeight);
}
}
exports.Card = Card;
Card.propTypes = {
buttonCopy: prop_types_1.default.string,
children: prop_types_1.default.node,
className: prop_types_1.default.string,
hasFooter: prop_types_1.default.bool,
labelCopy: prop_types_1.default.string,
onBack: prop_types_1.default.func,
onDismiss: prop_types_1.default.func,
onNext: prop_types_1.default.func,
onHide: prop_types_1.default.func,
onToggleKebab: prop_types_1.default.func,
onUndo: prop_types_1.default.func,
titleCopy: prop_types_1.default.string,
buttonDisabled: prop_types_1.default.bool,
buttonForm: prop_types_1.default.string,
controlledHeight: prop_types_1.default.bool,
kebabMenuItems: prop_types_1.default.array,
shouldNotAnimate: prop_types_1.default.bool,
};
exports.default = (0, styled_components_1.default)(Card) ``;
//# sourceMappingURL=index.js.map