cuz/lib/components/Box/index.js

Front-end modular development kit.

'use strict';

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var Box = _react2['default'].createClass({
  displayName: 'Box',

  propTypes: {
    header: _react2['default'].PropTypes.string,
    height: _react2['default'].PropTypes.string,
    viewMore: _react2['default'].PropTypes.string,
    viewMoreText: _react2['default'].PropTypes.string,
    showMoreText: _react2['default'].PropTypes.string,
    hideText: _react2['default'].PropTypes.string,
    children: _react2['default'].PropTypes.any
  },

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

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

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

  render: function render() {
    return _react2['default'].createElement(
      'div',
      { className: 'box' },
      this.props.header && _react2['default'].createElement(
        'h4',
        null,
        this.props.header,
        this.props.viewMore && _react2['default'].createElement(
          'a',
          { href: this.props.viewMore, target: '_blank' },
          this.props.viewMoreText,
          ' >'
        )
      ),
      _react2['default'].createElement(
        'div',
        { className: 'box-body', style: { height: this.state.height } },
        this.props.children
      ),
      this.props.height && _react2['default'].createElement(
        'div',
        { className: 'box-show-more' },
        _react2['default'].createElement(
          'span',
          { onClick: this.toggleShow },
          this.state.open ? this.props.hideText : this.props.showMoreText,
          ' ',
          _react2['default'].createElement('i', { className: _classnames2['default']('fa', { 'fa-angle-down': !this.state.open }, { 'fa-angle-up': this.state.open }) })
        )
      )
    );
  }
});

exports['default'] = Box;
module.exports = exports['default'];