@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
 */

/**
 * A button that toggles a URL input field for inserting or editing links.
 *
 * @param {Object}   props          Component properties.
 * @param {string}   props.url      The current URL value.
 * @param {Function} props.onChange Callback function to handle URL changes.
 * @return {JSX.Element} The URL input button component.
 */function URLInputButton({
  url,
  onChange
}) {
  const [expanded, toggleExpanded] = (0, _element.useReducer)(isExpanded => !isExpanded, false);
  const submitLink = event => {
    event.preventDefault();
    toggleExpanded();
  };
  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: url ? (0, _i18n.__)('Edit link') : (0, _i18n.__)('Insert link'),
      onClick: toggleExpanded,
      className: "components-toolbar__control",
      isPressed: !!url
    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
      className: "block-editor-url-input__button-modal",
      onSubmit: 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: toggleExpanded
        }), /*#__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