React Composed

hook.js

import React, { PropTypes } from "react";
import { Scrollbars } from "react-custom-scrollbars";
import ResponsiveComponent from "../responsive";

export default class Card extends ResponsiveComponent {
  render() {
    const {
      header,
      children,
      raised,
      actions,
      actionsOnTop,
      title,
      headerOutside,
      image,
      height
    } = this.props;
    const className = raised
      ? "ui fluid raised card maxWidth"
      : "ui fluid card maxWidth";

    const styleCard = {
      marginBottom: "14px"
    };
    const styleContent = {};
    if (height !== 0) {
      styleContent.height = height;
    }

    const styleHeader = { display: "inline" };

    const styleGrid = { overflow: "hidden", margin: "0px" };
    const styleRow = { padding: "0px" };
    const styleColumn = { padding: "0px" };
    return (
      <div style={styleCard}>
        {headerOutside &&
          this.renderDynamic(
            <div className="headerOutside" style={{ paddingLeft: "10px" }}>
              {header}
            </div>,
            <div className="headerOutside">
              {header}
            </div>
          )}
        <div className={className}>
          {(!headerOutside || title) &&
            <div className="content">
              <div
                className="ui middle aligned equal width grid"
                style={styleGrid}
              >
                <div className="row" style={styleRow}>
                  <div className="column" style={styleColumn}>
                    {!headerOutside &&
                      <div className="ui header" style={styleHeader}>
                        {image &&
                          <img className="ui avatar image" src={image} />}
                        <div className="content">
                          {header}
                          {title &&
                            <div
                              className="sub header"
                              style={{ fontSize: "small" }}
                            >
                              {title}
                            </div>}
                        </div>
                      </div>}
                  </div>
                  {actionsOnTop &&
                    actions &&
                    <div className="column" style={styleColumn}>
                      <div className="right floated">
                        {actions}
                      </div>
                    </div>}
                </div>
              </div>
            </div>}
          <div className="content" style={styleContent}>
            {height != 0 &&
              <Scrollbars
                style={styleContent}
                autoHide
                autoHideTimeout={1000}
                autoHideDuration={200}
                autoHeight
              >
                {children}
              </Scrollbars>}
            {height == 0 && { children }}
          </div>
          {!actionsOnTop &&
            actions &&
            <div>
              {actions}
            </div>}
        </div>
      </div>
    );
  }
}

Card.propTypes = {
  header: PropTypes.string.isRequired,
  title: PropTypes.string,
  children: PropTypes.node.isRequired, // jsx for input dialog
  actions: PropTypes.node, // jsx for input dialog
  actionsOnTop: PropTypes.bool, // if set to true, action components will be rendered inside the card header
  raised: PropTypes.bool,
  headerOutside: PropTypes.bool, // render the header inside the card
  image: PropTypes.string,
  height: PropTypes.number
};

Card.defaultProps = {
  header: "Card",
  headerOutside: false,
  raised: false,
  actionsOnTop: false,
  height: 500
};