Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 1x 4x 1x 3x 1x 2x 1x 4x 1x 3x 1x 2x 1x 4x 1x 3x 1x 2x 1x 1x 1x 16x 8x 8x 1x 4x 4x 1x 1x | import React from 'react'; import { Card } from 'src/elements/Card'; import { cardBasePropTypes, cardBaseDefaultProps, cardBodyBaseDefaultProps, cardBodyBasePropTypes, cardHeaderBaseDefaultProps, cardHeaderBasePropTypes, cardSecondaryMediaBasePropTypes, cardSecondaryMediaBaseDefaultProps, } from 'src/elements/Card/utils'; import { Box, Flex } from 'src/elements/grid'; const getCardTitle = ({ cardTitle, cardTitleProps }) => { if (typeof cardTitle === 'object') { return ( <Box {...cardTitleProps}> {cardTitle} </Box> ); } if (cardTitle) { return ( <Card.Title {...cardTitleProps}> {cardTitle} </Card.Title> ); } return ''; }; const getCardSubtitle = ({ cardSubtitle, cardSubtitleProps }) => { if (typeof cardSubtitle === 'object') { return ( <Box {...cardSubtitleProps}> {cardSubtitle} </Box> ); } if (cardSubtitle) { return ( <Card.Subtitle {...cardSubtitleProps}> {cardSubtitle} </Card.Subtitle> ); } return ''; }; const getCardThumbnail = ({ cardPadding, cardThumbnail, cardThumbnailProps, }) => { if (cardThumbnail) { return ( <Card.Thumbnail pr={cardPadding} {...cardThumbnailProps} > {cardThumbnail} </Card.Thumbnail> ); } return ''; }; const getPaddingBottom = ({ cardPadding, cardSubtitle, cardThumbnail, cardTitle, }) => { if (!cardTitle && !cardSubtitle && !cardThumbnail) { return ''; } return cardPadding; }; export const getCardHeader = ({ cardSubtitle, cardThumbnail, cardTitle, }) => { if (cardSubtitle || cardThumbnail || cardTitle) { return true; } return false; }; export const CardHeader = props => { const { cardBody, cardHeaderProps, cardPadding, cardSecondaryMedia, cardTitleContainerProps, } = props; return ( <Flex alignItems="center" pb={!cardBody && !cardSecondaryMedia ? '' : getPaddingBottom(props)} pt={getCardHeader(props) ? cardPadding : ''} {...cardHeaderProps} > {getCardThumbnail(props)} <Box {...cardTitleContainerProps}> {getCardTitle(props)} {getCardSubtitle(props)} </Box> </Flex> ); }; CardHeader.propTypes = { ...cardBasePropTypes, ...cardBodyBasePropTypes, ...cardHeaderBasePropTypes, ...cardSecondaryMediaBasePropTypes, }; CardHeader.defaultProps = { ...cardBaseDefaultProps, ...cardBodyBaseDefaultProps, ...cardHeaderBaseDefaultProps, ...cardSecondaryMediaBaseDefaultProps, }; |