@lyra/components/lib/utilities/ActivateOnFocus.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 _ActivateOnFocus = require('./styles/ActivateOnFocus.css');

var _ActivateOnFocus2 = _interopRequireDefault(_ActivateOnFocus);

var _reactClickOutside = require('react-click-outside');

var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);

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

class ActivateOnFocus extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      hasFocus: false
    }, this.handleClick = event => {
      if (!this.state.hasFocus) {
        this.setState({
          hasFocus: true
        });
        const onActivate = this.props.onActivate;

        if (onActivate) {
          onActivate();
        }
      }
    }, this.handleClickOutside = () => {
      if (this.state.hasFocus) {
        this.setState({
          hasFocus: false
        });
      }
    }, _temp;
  }

  render() {
    var _props = this.props;
    const message = _props.message,
          children = _props.children,
          isActive = _props.isActive,
          html = _props.html;
    const hasFocus = this.state.hasFocus;


    return _react2.default.createElement(
      'div',
      { className: hasFocus ? _ActivateOnFocus2.default.hasFocus : _ActivateOnFocus2.default.noFocus },
      !isActive && _react2.default.createElement(
        'div',
        { className: _ActivateOnFocus2.default.eventHandler, onClick: this.handleClick },
        _react2.default.createElement('div', { className: _ActivateOnFocus2.default.overlay }),
        !html && _react2.default.createElement(
          'div',
          { className: _ActivateOnFocus2.default.stringMessage },
          message
        ),
        html && _react2.default.createElement(
          'div',
          { className: _ActivateOnFocus2.default.html },
          html
        )
      ),
      _react2.default.createElement(
        'div',
        { className: _ActivateOnFocus2.default.content },
        children
      )
    );
  }
}

ActivateOnFocus.propTypes = {
  children: _propTypes2.default.node.isRequired,
  message: _propTypes2.default.string,
  html: _propTypes2.default.node,
  isActive: _propTypes2.default.bool,
  onActivate: _propTypes2.default.func
};
ActivateOnFocus.defaultProps = {
  message: 'Click to activate…',
  isActive: false
};
exports.default = (0, _reactClickOutside2.default)(ActivateOnFocus);