@wordpress/block-editor/build/components/url-input/button.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _ = _interopRequireDefault(require("./"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

class URLInputButton extends _element.Component {
  constructor() {
    super(...arguments);
    this.toggle = this.toggle.bind(this);
    this.submitLink = this.submitLink.bind(this);
    this.state = {
      expanded: false
    };
  }
  toggle() {
    this.setState({
      expanded: !this.state.expanded
    });
  }
  submitLink(event) {
    event.preventDefault();
    this.toggle();
  }
  render() {
    const {
      url,
      onChange
    } = this.props;
    const {
      expanded
    } = this.state;
    const buttonLabel = url ? (0, _i18n.__)('Edit link') : (0, _i18n.__)('Insert link');
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "block-editor-url-input__button",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        size: "compact",
        icon: _icons.link,
        label: buttonLabel,
        onClick: this.toggle,
        className: "components-toolbar__control",
        isPressed: !!url
      }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
        className: "block-editor-url-input__button-modal",
        onSubmit: this.submitLink,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "block-editor-url-input__button-modal-line",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            className: "block-editor-url-input__back",
            icon: _icons.arrowLeft,
            label: (0, _i18n.__)('Close'),
            onClick: this.toggle
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
            value: url || '',
            onChange: onChange,
            suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlSuffixWrapper, {
              variant: "control",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
                size: "small",
                icon: _icons.keyboardReturn,
                label: (0, _i18n.__)('Submit'),
                type: "submit"
              })
            })
          })]
        })
      })]
    });
  }
}

/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md
 */
var _default = exports.default = URLInputButton;
//# sourceMappingURL=button.js.map