@gechiui/block-editor/src/components/warning/index.js

Generic block editor.

/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * GeChiUI dependencies
 */
import { Children } from '@gechiui/element';
import { DropdownMenu, MenuGroup, MenuItem } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { moreHorizontal } from '@gechiui/icons';

function Warning( { className, actions, children, secondaryActions } ) {
	return (
		<div className={ classnames( className, 'block-editor-warning' ) }>
			<div className="block-editor-warning__contents">
				<p className="block-editor-warning__message">{ children }</p>

				{ ( Children.count( actions ) > 0 || secondaryActions ) && (
					<div className="block-editor-warning__actions">
						{ Children.count( actions ) > 0 &&
							Children.map( actions, ( action, i ) => (
								<span
									key={ i }
									className="block-editor-warning__action"
								>
									{ action }
								</span>
							) ) }
						{ secondaryActions && (
							<DropdownMenu
								className="block-editor-warning__secondary"
								icon={ moreHorizontal }
								label={ __( '更多选项' ) }
								popoverProps={ {
									position: 'bottom left',
									className: 'block-editor-warning__dropdown',
								} }
								noIcons
							>
								{ () => (
									<MenuGroup>
										{ secondaryActions.map(
											( item, pos ) => (
												<MenuItem
													onClick={ item.onClick }
													key={ pos }
												>
													{ item.title }
												</MenuItem>
											)
										) }
									</MenuGroup>
								) }
							</DropdownMenu>
						) }
					</div>
				) }
			</div>
		</div>
	);
}

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