@lyra/components/lib/edititem/EditItemFoldOut.js

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _foldStyle = require('part:@lyra/components/edititem/fold-style');

var _foldStyle2 = _interopRequireDefault(_foldStyle);

var _closeIcon = require('part:@lyra/base/close-icon');

var _closeIcon2 = _interopRequireDefault(_closeIcon);

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

class EditItemFoldOut extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.setRootElement = element => {
      this._rootElement = element;
    }, this.setPortalModalElement = element => {
      this._portalModalElement = element;
    }, _temp;
  }

  componentDidMount() {
    window.addEventListener('keydown', this.handleKeyDown);
  }

  componentWillUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  }

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

    return _react2.default.createElement(
      'div',
      { className: _foldStyle2.default.root },
      _react2.default.createElement(
        'div',
        { className: _foldStyle2.default.wrapper },
        title && _react2.default.createElement(
          'div',
          { className: _foldStyle2.default.head },
          title,
          _react2.default.createElement(
            'button',
            { className: _foldStyle2.default.close, type: 'button', onClick: onClose },
            _react2.default.createElement(_closeIcon2.default, null)
          )
        ),
        !title && _react2.default.createElement(
          'button',
          {
            className: _foldStyle2.default.closeDark,
            type: 'button',
            onClick: this.handleClose
          },
          _react2.default.createElement(_closeIcon2.default, null)
        ),
        _react2.default.createElement(
          'div',
          { className: _foldStyle2.default.content },
          children
        )
      )
    );
  }
}
exports.default = EditItemFoldOut;
EditItemFoldOut.propTypes = {
  title: _propTypes2.default.string,
  children: _propTypes2.default.node.isRequired,
  onClose: _propTypes2.default.func
};
EditItemFoldOut.defaultProps = {
  title: '',
  onClose() {} // eslint-disable-line
};