@gechiui/block-editor/src/components/duotone-control/index.js

Generic block editor.

/**
 * GeChiUI dependencies
 */
import {
	Dropdown,
	DuotonePicker,
	DuotoneSwatch,
	MenuGroup,
	ToolbarButton,
} from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { DOWN } from '@gechiui/keycodes';

function DuotoneControl( {
	colorPalette,
	duotonePalette,
	disableCustomColors,
	disableCustomDuotone,
	value,
	onChange,
} ) {
	return (
		<Dropdown
			popoverProps={ {
				className: 'block-editor-duotone-control__popover',
				headerTitle: __( '双色' ),
				isAlternate: true,
			} }
			renderToggle={ ( { isOpen, onToggle } ) => {
				const openOnArrowDown = ( event ) => {
					if ( ! isOpen && event.keyCode === DOWN ) {
						event.preventDefault();
						onToggle();
					}
				};
				return (
					<ToolbarButton
						showTooltip
						onClick={ onToggle }
						aria-haspopup="true"
						aria-expanded={ isOpen }
						onKeyDown={ openOnArrowDown }
						label={ __( '应用双色过滤器' ) }
						icon={ <DuotoneSwatch values={ value } /> }
					/>
				);
			} }
			renderContent={ () => (
				<MenuGroup label={ __( '双色' ) }>
					<div className="block-editor-duotone-control__description">
						{ __(
							'在不丢失原始图像的情况下创建双色调效果。'
						) }
					</div>
					<DuotonePicker
						colorPalette={ colorPalette }
						duotonePalette={ duotonePalette }
						disableCustomColors={ disableCustomColors }
						disableCustomDuotone={ disableCustomDuotone }
						value={ value }
						onChange={ onChange }
					/>
				</MenuGroup>
			) }
		/>
	);
}

export default DuotoneControl;