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

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { Component } from '@gechiui/element';
import { Button } from '@gechiui/components';
import { link, keyboardReturn, arrowLeft } from '@gechiui/icons';
/**
 * Internal dependencies
 */

import URLInput from './';

class URLInputButton extends 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 ? __('编辑链接') : __('插入链接');
    return createElement("div", {
      className: "block-editor-url-input__button"
    }, createElement(Button, {
      icon: link,
      label: buttonLabel,
      onClick: this.toggle,
      className: "components-toolbar__control",
      isPressed: !!url
    }), expanded && createElement("form", {
      className: "block-editor-url-input__button-modal",
      onSubmit: this.submitLink
    }, createElement("div", {
      className: "block-editor-url-input__button-modal-line"
    }, createElement(Button, {
      className: "block-editor-url-input__back",
      icon: arrowLeft,
      label: __('关闭'),
      onClick: this.toggle
    }), createElement(URLInput, {
      value: url || '',
      onChange: onChange
    }), createElement(Button, {
      icon: keyboardReturn,
      label: __('提交'),
      type: "submit"
    }))));
  }

}
/**
 * @see https://github.com/GeChiUI/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md
 */


export default URLInputButton;
//# sourceMappingURL=button.js.map