@gechiui/block-editor/src/components/url-popover/stories/index.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import { Button, ToggleControl } from '@gechiui/components';
import { useState } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
import { keyboardReturn } from '@gechiui/icons';

/**
 * Internal dependencies
 */
import URLPopover from '../';

export default { title: 'BlockEditor/URLPopover' };

const TestURLPopover = () => {
	const [ isVisible, setVisiblility ] = useState( false );
	const [ url, setUrl ] = useState( '' );

	const close = () => setVisiblility( false );
	const setTarget = () => {};

	return (
		<>
			<Button onClick={ () => setVisiblility( true ) }>Edit URL</Button>
			{ isVisible && (
				<URLPopover
					onClose={ close }
					renderSettings={ () => (
						<ToggleControl
							label={ __( '在新窗口打开' ) }
							onChange={ setTarget }
						/>
					) }
				>
					<form onSubmit={ close }>
						<input type="url" value={ url } onChange={ setUrl } />
						<Button
							icon={ keyboardReturn }
							label={ __( '应用' ) }
							type="submit"
						/>
					</form>
				</URLPopover>
			) }
		</>
	);
};

export const _default = () => {
	return <TestURLPopover />;
};