@gechiui/block-editor/src/components/link-control/settings-drawer.js

Generic block editor.

/**
 * External dependencies
 */
import { noop } from 'lodash';

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { ToggleControl, VisuallyHidden } from '@gechiui/components';

const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
	if ( ! settings || ! settings.length ) {
		return null;
	}

	const handleSettingChange = ( setting ) => ( newValue ) => {
		onChange( {
			...value,
			[ setting.id ]: newValue,
		} );
	};

	const theSettings = settings.map( ( setting ) => (
		<ToggleControl
			className="block-editor-link-control__setting"
			key={ setting.id }
			label={ setting.title }
			onChange={ handleSettingChange( setting ) }
			checked={ value ? !! value[ setting.id ] : false }
		/>
	) );

	return (
		<fieldset className="block-editor-link-control__settings">
			<VisuallyHidden as="legend">
				{ __( '当前选择的链接设置' ) }
			</VisuallyHidden>
			{ theSettings }
		</fieldset>
	);
};

export default LinkControlSettingsDrawer;