All files / src/components/Card Card.react.js

100% Statements 4/4
100% Branches 0/0
100% Functions 1/1
100% Lines 4/4

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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184                                                                                                                                                                      1x                                                                                               1x   1x                                                                                                 1x  
// @flow
 
import React, { Component } from 'react';
 
import { Card as MuiCard, CardHeader, CardTitle, CardText } from 'material-ui/Card';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
type Props = {
  // Card properties
  /** ID for Card */
  id?: string,
  /** Can be used to render elements inside the Card. */
  children?: Node,
  /** The CSS class name of the root element */
  className?: string,
  /** Override the inline-styles of the container element. */
  containerStyle?: Object,
  /** If true, this card component is expandable. */
  expandable?: boolean,
  /** Set to null to keep the component uncontrolled. */
  _expanded?: boolean,
  /** Whether this card is initially expanded. */
  initiallyExpanded?: boolean,
  /** Override the inline-styles of the root element. */
  style?: Object,
  /** If true, this card component will include a button to expand the card. */
  showExpandableButton?: boolean,
 
  // Card header properties
  /** If true, a click on this card component expands the card. */
  headerActAsExpander?: boolean,
  /** This is the Avatar element to be displayed on the Card Header. If avatar is an Avatar or
   * other element, it will be rendered. If avatar is a string, it will be used as the image src
   * for an Avatar. */
  headerAvatar?: Node,
  /** Override the inline-styles of the root element. */
  headerStyle?: Object,
  /** Can be used to render a subtitle in Card Header. */
  headerSubtitle?: Node,
  /** Override the subtitle color. */
  headerSubtitleColor?: string,
  /** Override the inline-styles of the subtitle. */
  headerSubtitleStyle?: Object,
  /** Override the inline-styles of the text. */
  headerTextStyle?: Object,
  /** Can be used to render a title in Card Header. */
  headerTitle?: Node,
  /** Override the title color. */
  headerTitleColor?: string,
  /** Override the inline-styles of the title. */
  headerTitleStyle?: Object,
  /* Override the iconStyle of the Icon Button. */
  headerIconStyle?: Object,
 
  // Card title properties
  /** If true, this card component is expandable. */
  titleExpandable?: boolean,
  /** Override the inline-styles of the root element. */
  titleStyle?: Object,
  /** Can be used to render a subtitle in the Card Title. */
  titleSubtitle?: Node,
  /** Override the subtitle color. */
  titleSubtitleColor?: string,
  /** Override the inline-styles of the subtitle. */
  titleSubtitleStyle?: Object,
  /** Can be used to render a title in the Card Title. */
  titleTitle?: Node,
  /** Override the title color. */
  titleColor?: string,
  /** Override the inline-styles of the title. */
  titleTitleStyle?: Object,
 
  // Card text properties
  /** If true, this card component is expandable. */
  textExpandable?: boolean,
  /** Override the CardText color. */
  textColor?: string,
  /** Override the inline-styles of the root element. */
  textStyle?: Object,
}
 
const defaultProps = {
  // Card props
  id: '',
  children: [],
  className: '',
  containerStyle: {},
  expandable: false,
  _expanded: null,
  initiallyExpanded: false,
  style: {},
  showExpandableButton: true,
 
  // Card header props
  headerAvatar: null,
  headerActAsExpander: true,
  headerStyle: {},
  headerSubtitle: [],
  headerSubtitleColor: '',
  headerSubtitleStyle: {},
  headerTextStyle: {},
  headerTitle: [],
  headerTitleColor: '',
  headerTitleStyle: {},
  headerIconStyle: {},
 
  // Card title props
  titleExpandable: true,
  titleStyle: {},
  titleSubtitle: [],
  titleSubtitleColor: '',
  titleSubtitleStyle: {},
  titleTitle: [],
  titleColor: '',
  titleTitleStyle: {},
 
  // Card text props
  textExpandable: true,
  textColor: '',
  textStyle: {},
};
 
export default class Card extends Component<Props> {
  render() {
    const { id, className, containerStyle, expandable, _expanded, initiallyExpanded, style,
      showExpandableButton, headerAvatar, headerActAsExpander, headerStyle, headerSubtitle,
      headerSubtitleColor, headerSubtitleStyle, headerTextStyle, headerTitle, headerTitleColor,
      headerTitleStyle, textExpandable, textColor, textStyle, titleStyle, titleSubtitle,
      headerIconStyle, titleSubtitleColor, titleSubtitleStyle, titleTitle, titleColor,
      titleTitleStyle, titleExpandable} = this.props;
 
    return (
      <div id={id}>
        <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
          <MuiCard
            className={className}
            containerStyle={containerStyle}
            expandable={expandable}
            expanded={_expanded}
            initiallyExpanded={initiallyExpanded}
            style={style}
          >
            <CardHeader
              actAsExpander={headerActAsExpander}
              avatar={headerAvatar}
              showExpandableButton={showExpandableButton}
              style={headerStyle}
              subtitle={headerSubtitle}
              subtitleColor={headerSubtitleColor}
              subtitleStyle={headerSubtitleStyle}
              textStyle={headerTextStyle}
              title={headerTitle}
              titleColor={headerTitleColor}
              titleStyle={headerTitleStyle}
              iconStyle={headerIconStyle}
            />
            <CardTitle
              expandable={titleExpandable}
              style={titleStyle}
              subtitle={titleSubtitle}
              subtitleColor={titleSubtitleColor}
              subtitleStyle={titleSubtitleStyle}
              title={titleTitle}
              color={titleColor}
              titleStyle={titleTitleStyle}
            />
            <CardText
              expandable={textExpandable}
              color={textColor}
              style={textStyle}
            >
              {this.props.children}
            </CardText>
          </MuiCard>
        </MuiThemeProvider>
      </div>
    );
  }
}
 
Card.defaultProps = defaultProps;