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

Generic block editor.

/**
 * 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 (
			<div className="block-editor-url-input__button">
				<Button
					icon={ link }
					label={ buttonLabel }
					onClick={ this.toggle }
					className="components-toolbar__control"
					isPressed={ !! url }
				/>
				{ expanded && (
					<form
						className="block-editor-url-input__button-modal"
						onSubmit={ this.submitLink }
					>
						<div className="block-editor-url-input__button-modal-line">
							<Button
								className="block-editor-url-input__back"
								icon={ arrowLeft }
								label={ __( '关闭' ) }
								onClick={ this.toggle }
							/>
							<URLInput
								value={ url || '' }
								onChange={ onChange }
							/>
							<Button
								icon={ keyboardReturn }
								label={ __( '提交' ) }
								type="submit"
							/>
						</div>
					</form>
				) }
			</div>
		);
	}
}

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