@gechiui/block-editor/src/components/button-block-appender/index.native.js

Generic block editor.

/**
 * External dependencies
 */
import { View } from 'react-native';

/**
 * GeChiUI dependencies
 */
import { withPreferredColorScheme } from '@gechiui/compose';
import { Button } from '@gechiui/components';
import { Icon, plusCircleFilled } from '@gechiui/icons';

/**
 * Internal dependencies
 */
import Inserter from '../inserter';
import styles from './styles.scss';

function ButtonBlockAppender( {
	rootClientId,
	getStylesFromColorScheme,
	showSeparator,
	isFloating = false,
	onAddBlock,
} ) {
	const appenderStyle = {
		...styles.appender,
		...getStylesFromColorScheme(
			styles.appenderLight,
			styles.appenderDark
		),
	};
	const addBlockButtonStyle = getStylesFromColorScheme(
		styles.addBlockButton,
		isFloating
			? styles.floatingAddBlockButtonDark
			: styles.addBlockButtonDark
	);

	return (
		<>
			<Inserter
				rootClientId={ rootClientId }
				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
					<Button
						onClick={ onAddBlock || onToggle }
						aria-expanded={ isOpen }
						disabled={ disabled }
						fixedRatio={ false }
					>
						<View
							style={ [
								appenderStyle,
								isFloating && styles.floatingAppender,
							] }
						>
							<Icon
								icon={ plusCircleFilled }
								style={ addBlockButtonStyle }
								color={ addBlockButtonStyle.color }
								size={ addBlockButtonStyle.size }
							/>
						</View>
					</Button>
				) }
				isAppender
				showSeparator={ showSeparator }
			/>
		</>
	);
}

/**
 * @see https://github.com/GeChiUI/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md
 */
export default withPreferredColorScheme( ButtonBlockAppender );