@navinc/base-react-components
Version:
Nav's Pattern Library
205 lines (204 loc) • 8.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import styled from 'styled-components';
import debounce from 'lodash/debounce';
import propTypes from 'prop-types';
import Button from '../../button';
import Copy from '../../copy';
import Header from '../../header.js';
import KebabMenu from './parts/kebab-menu';
const depricationWarning = (isInUse, warning) => {
isInUse && console.warn(warning);
};
/* Marks the bottom of the card's content. */
const WayMark = styled.hr `
border: none;
margin: 0;
height: 0;
`;
WayMark.displayName = 'WayMark';
const CARD_BODY_PADDING_BOTTOM = 32;
export const CardHeader = styled(Copy).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};
`;
CardHeader.displayName = 'CardHeader';
export const Title = styled(Header).attrs(() => ({ size: 'md' })) `
padding-bottom: 16px;
`;
Title.displayName = 'Title';
export const CardBody = styled.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} {
max-width: 520px;
}
`;
CardBody.displayName = 'CardBody';
export const StyledCard = styled.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 &&
`
& > ${CardHeader} {
border-top: 4px solid ${theme.good};
}
`};
`;
StyledCard.displayName = 'StyledCard';
export const CloseIcon = styled.img `
padding-left: 8px;
`;
CloseIcon.displayName = 'CloseIcon';
export const CheckMark = styled.img `
padding-right: 8px;
`;
CheckMark.displayName = 'CheckMark';
export const DismissCard = styled.div `
position: absolute;
right: 8px;
display: inline-block;
height: 100%;
padding: 16px;
border-left: 2px solid ${({ theme }) => theme.neutral300};
cursor: pointer;
`;
DismissCard.displayName = 'DismissCard';
export const Undo = styled(Copy) `
cursor: pointer;
font-weight: bold;
margin-right: 64px;
`;
Undo.displayName = 'Undo';
export const BackButton = styled(Button) `
padding: 8px;
margin-right: auto;
`;
BackButton.displayName = 'BackButton';
export const NextButton = styled(Button) `
&[disabled] {
background-color: unset;
border-color: transparent;
color: ${({ theme }) => theme.neutral400};
cursor: default;
}
`;
NextButton.displayName = 'NextButton';
export const Kebab = styled.img.attrs(() => ({
src: 'https://dxkdvuv3hanyu.cloudfront.net/design-assets/icons/kebab-menu.svg',
})) `
position: absolute;
top: 16px;
right: 8px;
padding: 8px;
cursor: pointer;
`;
Kebab.displayName = 'Kebab';
export const Footer = styled.div `
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 16px;
border-top: 1px solid ${({ theme }) => theme.neutral300};
`;
Footer.displayName = 'Footer';
export class Card extends 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 = debounce(() => {
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 (_jsxs(StyledCard, Object.assign({ className: className, isCardHidden: isCardHidden }, { children: [cardLabel && _jsx(CardHeader, { children: cardLabel }, void 0), !!kebabMenuItems.length && (_jsx(Kebab, { onClick: (event) => {
this.toggleKebabMenu(event);
onToggleKebab(event);
} }, void 0)), isKebabMenuVisible && (_jsx(KebabMenu, { kebabMenuItems: kebabMenuItems, onHide: onHide, togglehideCard: this.togglehideCard, toggleKebabMenu: this.toggleKebabMenu }, void 0)), title && _jsx(Title, { children: title }, void 0), _jsxs(CardBody, Object.assign({ height: this.state.contentHeight, shouldNotAnimate: shouldNotAnimate }, { children: [children, _jsx(WayMark, { ref: this.setRef('wayMark') }, void 0)] }), void 0), hasFooter && (_jsxs(Footer, { children: [onBack && (_jsx(BackButton, Object.assign({ onClick: onBack, variation: "noOutline" }, { children: _jsx("img", { src: "https://dxkdvuv3hanyu.cloudfront.net/icons/card_back_arrow.svg", alt: "back arrow" }, void 0) }), void 0)), !hasAsyncNextButton && onNext && (_jsx(NextButton, Object.assign({ isLoading: isLoading, onClick: onNext, size: "cardButton", variation: "noOutline", disabled: buttonDisabled, form: buttonForm }, { children: buttonLabel }), void 0)), hasAsyncNextButton && onNext && (_jsx(Button, 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);
}
}
Card.propTypes = {
buttonCopy: propTypes.string,
children: propTypes.node,
className: propTypes.string,
hasFooter: propTypes.bool,
labelCopy: propTypes.string,
onBack: propTypes.func,
onDismiss: propTypes.func,
onNext: propTypes.func,
onHide: propTypes.func,
onToggleKebab: propTypes.func,
onUndo: propTypes.func,
titleCopy: propTypes.string,
buttonDisabled: propTypes.bool,
buttonForm: propTypes.string,
controlledHeight: propTypes.bool,
kebabMenuItems: propTypes.array,
shouldNotAnimate: propTypes.bool,
};
export default styled(Card) ``;
//# sourceMappingURL=index.js.map