@lyra/form-builder/lib/inputs/common/Details.js

Lyra form builder

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

const ARROW_STYLE = {
  fontSize: '0.8em',
  display: 'inline-block',
  width: '1em',
  marginRight: '0.4em'
};

const CONTAINER_STYLE = {
  cursor: 'default',
  userSelect: 'none',
  WebkitUserSelect: 'none',
  outline: 'none'
};

class Details extends _react2.default.Component {

  constructor(props) {
    super();

    this.handleToggle = () => {
      this.setState(prevState => ({ isOpen: !prevState.isOpen }));
    };

    this.state = {
      isOpen: props.isOpen
    };
  }

  render() {
    const isOpen = this.state.isOpen;
    var _props = this.props;
    const title = _props.title,
          children = _props.children;

    return _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'div',
        { tabIndex: '0', onClick: this.handleToggle, style: CONTAINER_STYLE },
        _react2.default.createElement(
          'span',
          { style: ARROW_STYLE },
          isOpen ? '▼' : '▶'
        ),
        title
      ),
      isOpen ? children : null
    );
  }
}
exports.default = Details;
Details.propTypes = {
  children: _propTypes2.default.node,
  isOpen: _propTypes2.default.bool,
  title: _propTypes2.default.string
};
Details.defaultProps = {
  title: 'Details',
  isOpen: false
};