UNPKG

@wordpress/block-editor

Version:
93 lines (85 loc) 1.97 kB
/** * External dependencies */ import { View } from 'react-native'; /** * WordPress dependencies */ import { withPreferredColorScheme } from '@wordpress/compose'; import { Button } from '@wordpress/components'; import { Icon, plusCircleFilled } from '@wordpress/icons'; import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ import Inserter from '../inserter'; import styles from './styles.scss'; function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator, isFloating = false, onAddBlock, } ) { const onAppenderPress = useCallback( ( onToggle ) => () => { if ( onAddBlock ) { onAddBlock(); return; } if ( onToggle ) { onToggle(); } }, [ 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 testID="appender-button" onClick={ onAppenderPress( 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/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md */ export default withPreferredColorScheme( ButtonBlockAppender );