@lyra/form-builder/lib/inputs/BlockEditor/ConfirmButton.js

Lyra form builder

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _trashIcon = require('part:@lyra/base/trash-icon');

var _trashIcon2 = _interopRequireDefault(_trashIcon);

var _popover = require('part:@lyra/components/dialogs/popover');

var _popover2 = _interopRequireDefault(_popover);

var _ConfirmButton = require('./styles/ConfirmButton.css');

var _ConfirmButton2 = _interopRequireDefault(_ConfirmButton);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

    return _temp = super(...args), this.state = {
      showConfirmDialog: false
    }, this.handleClick = event => {
      this.open();
    }, this.handleConfirmPopoverClose = event => {
      this.close();
    }, this.setButton = (button /*: ?Button*/) => {
      this._button = button;
    }, this.setConfirmButton = (button /*: ?Button*/) => {
      this._confirmButton = button;
    }, _temp;
  }

  close() {
    this.setState({
      showConfirmDialog: false
    });
    this._button.focus();
  }

  open() {
    this.setState({
      showConfirmDialog: true
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevState.showConfirmDialog && this.state.showConfirmDialog) {
      // todo: does not work as the popover is not in sync
      //this._confirmButton.focus()
    }
  }

  render() {
    const showConfirmDialog = this.state.showConfirmDialog;
    var _props = this.props;

    const onConfirm = _props.onConfirm,
          rest = _objectWithoutProperties(_props, ['onConfirm']);

    return _react2.default.createElement(
      'div',
      { className: _ConfirmButton2.default.root },
      _react2.default.createElement(_default2.default, _extends({}, rest, {
        kind: 'simple',
        icon: _trashIcon2.default,
        onClick: this.handleClick,
        ref: this.setButton
      })),
      _react2.default.createElement(
        'div',
        { className: _ConfirmButton2.default.popoverAnchor },
        showConfirmDialog && _react2.default.createElement(
          _popover2.default,
          {
            color: 'danger',
            useOverlay: false,
            onEscape: this.handleConfirmPopoverClose,
            onClickOutside: this.handleConfirmPopoverClose
          },
          _react2.default.createElement(
            'div',
            { className: _ConfirmButton2.default.wrapper },
            _react2.default.createElement(
              _default2.default,
              {
                color: 'white',
                inverted: true,
                onClick: onConfirm,
                icon: _trashIcon2.default,
                ref: this.setConfirmButton
              },
              'Confirm remove'
            )
          )
        )
      )
    );
  }
}
exports.default = ConfirmButton;
ConfirmButton.propTypes = {
  children: _propTypes2.default.func,
  onConfirm: _propTypes2.default.func
};