@wordpress/block-editor
Version:
93 lines (85 loc) • 1.97 kB
JavaScript
/**
* 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 );