ignite-test-component/lib/components/accordion.js

ignite-test-component

"use strict";

exports.__esModule = true;

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _accordion = require("../styles/accordion.css");

var _accordion2 = _interopRequireDefault(_accordion);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Accordion = function (_React$Component) {
  (0, _inherits3.default)(Accordion, _React$Component);

  function Accordion() {
    (0, _classCallCheck3.default)(this, Accordion);

    var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this));

    _this.state = {
      active: false
    };
    _this.handleToggle = _this.handleToggle.bind(_this);
    return _this;
  }

  Accordion.prototype.handleToggle = function handleToggle() {
    this.setState({
      active: !this.state.active
    });
  };

  Accordion.prototype.render = function render() {
    var stateStyle = this.state.active ? _accordion2.default.active : _accordion2.default.inactive;

    return _react2.default.createElement(
      "section",
      { className: _accordion2.default.accordion },
      _react2.default.createElement(
        "a",
        { onClick: this.handleToggle },
        this.props.summary
      ),
      _react2.default.createElement(
        "p",
        { className: stateStyle },
        this.props.details
      )
    );
  };

  return Accordion;
}(_react2.default.Component);

// remember to also remove the bundled demo CSS files
// from ../styles

// This is a bundled demo
// you should remove this to work on
// your own component.

exports.default = Accordion;


Accordion.propTypes = {
  summary: _propTypes2.default.string.isRequired,
  details: _propTypes2.default.string.isRequired
};