cuz/src/components/Box/index.js

Front-end modular development kit.

import React from 'react';
import classNames from 'classnames';

const Box = React.createClass({
  propTypes: {
    header: React.PropTypes.string,
    height: React.PropTypes.string,
    viewMore: React.PropTypes.string,
    viewMoreText: React.PropTypes.string,
    showMoreText: React.PropTypes.string,
    hideText: React.PropTypes.string,
    children: React.PropTypes.any,
  },

  getDefaultProps() {
    return {
      viewMoreText: 'View more',
      showMoreText: 'Show more',
      hideText: 'Hide',
    };
  },

  getInitialState() {
    return {
      height: this.props.height || 'auto',
      open: false,
    };
  },

  toggleShow() {
    this.setState({
      open: !this.state.open,
      height: this.state.open ? this.props.height : 'auto'
    });
  },

  render() {
    return (
      <div className="box">
        {
          this.props.header &&
          <h4>
            {this.props.header}
            {
              this.props.viewMore &&
              <a href={this.props.viewMore} target="_blank">{this.props.viewMoreText} &gt;</a>
            }
          </h4>
        }
        <div className="box-body" style={{height: this.state.height}}>{this.props.children}</div>
        {
          this.props.height &&
          <div className="box-show-more">
            <span onClick={this.toggleShow}>
              { this.state.open ? this.props.hideText : this.props.showMoreText } <i className={classNames('fa', {'fa-angle-down': !this.state.open}, {'fa-angle-up': this.state.open})}></i>
            </span>
          </div>
        }
      </div>
    );
  }
});

export default Box;