forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor heading block to share more code with web version. (WordPres…
…s#20745) * Refactor heading block to share more code with web version. * Remove branching for RN. We now have an implementation of Block for RN. * Remove platform checks at block level. * Fix lint-errors. * Implement Dropdown menu for React Native. * Increase headers icon size. * Show all heading levels on the block controls in RN We also hide the headings settings in RN because all of them are available in the block controls. * Style separators to have left margin. * Color selected checkmark on cell * Add separators for dropdown menus * Remove extra padding on panel for dropdown * Fix separator on iOS and Android.
- Loading branch information
1 parent
b7125c0
commit 6603642
Showing
15 changed files
with
279 additions
and
115 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
packages/block-editor/src/components/colors/use-colors.native.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| const TextColor = ( props ) => <>{ props.children }</>; | ||
|
|
||
| const InspectorControlsColorPanel = () => null; | ||
|
|
||
| export default function __experimentalUseColors() { | ||
| return { | ||
| TextColor, | ||
| InspectorControlsColorPanel, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,184 @@ | ||
| function DropdownMenu() { | ||
| return null; | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
| import { flatMap, isEmpty, isFunction } from 'lodash'; | ||
| import { Platform } from 'react-native'; | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { DOWN } from '@wordpress/keycodes'; | ||
| import deprecated from '@wordpress/deprecated'; | ||
| import { BottomSheet, PanelBody } from '@wordpress/components'; | ||
| import { withPreferredColorScheme } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Button from '../button'; | ||
| import Dropdown from '../dropdown'; | ||
|
|
||
| function mergeProps( defaultProps = {}, props = {} ) { | ||
| const mergedProps = { | ||
| ...defaultProps, | ||
| ...props, | ||
| }; | ||
|
|
||
| if ( props.className && defaultProps.className ) { | ||
| mergedProps.className = classnames( | ||
| props.className, | ||
| defaultProps.className | ||
| ); | ||
| } | ||
|
|
||
| return mergedProps; | ||
| } | ||
|
|
||
| function DropdownMenu( { | ||
| children, | ||
| className, | ||
| controls, | ||
| icon = 'menu', | ||
| label, | ||
| popoverProps, | ||
| toggleProps, | ||
| // The following props exist for backward compatibility. | ||
| menuLabel, | ||
| position, | ||
| } ) { | ||
| if ( menuLabel ) { | ||
| deprecated( '`menuLabel` prop in `DropdownComponent`', { | ||
| alternative: '`menuProps` object and its `aria-label` property', | ||
| plugin: 'Gutenberg', | ||
| } ); | ||
| } | ||
|
|
||
| if ( position ) { | ||
| deprecated( '`position` prop in `DropdownComponent`', { | ||
| alternative: '`popoverProps` object and its `position` property', | ||
| plugin: 'Gutenberg', | ||
| } ); | ||
| } | ||
|
|
||
| if ( isEmpty( controls ) && ! isFunction( children ) ) { | ||
| return null; | ||
| } | ||
|
|
||
| // Normalize controls to nested array of objects (sets of controls) | ||
| let controlSets; | ||
| if ( ! isEmpty( controls ) ) { | ||
| controlSets = controls; | ||
| if ( ! Array.isArray( controlSets[ 0 ] ) ) { | ||
| controlSets = [ controlSets ]; | ||
| } | ||
| } | ||
| const mergedPopoverProps = mergeProps( | ||
| { | ||
| className: 'components-dropdown-menu__popover', | ||
| position, | ||
| }, | ||
| popoverProps | ||
| ); | ||
|
|
||
| return ( | ||
| <Dropdown | ||
| className={ classnames( 'components-dropdown-menu', className ) } | ||
| popoverProps={ mergedPopoverProps } | ||
| renderToggle={ ( { isOpen, onToggle } ) => { | ||
| const openOnArrowDown = ( event ) => { | ||
| if ( ! isOpen && event.keyCode === DOWN ) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| onToggle(); | ||
| } | ||
| }; | ||
| const mergedToggleProps = mergeProps( | ||
| { | ||
| className: classnames( | ||
| 'components-dropdown-menu__toggle', | ||
| { | ||
| 'is-opened': isOpen, | ||
| } | ||
| ), | ||
| }, | ||
| toggleProps | ||
| ); | ||
|
|
||
| return ( | ||
| <Button | ||
| { ...mergedToggleProps } | ||
| icon={ icon } | ||
| onClick={ ( event ) => { | ||
| onToggle( event ); | ||
| if ( mergedToggleProps.onClick ) { | ||
| mergedToggleProps.onClick( event ); | ||
| } | ||
| } } | ||
| onKeyDown={ ( event ) => { | ||
| openOnArrowDown( event ); | ||
| if ( mergedToggleProps.onKeyDown ) { | ||
| mergedToggleProps.onKeyDown( event ); | ||
| } | ||
| } } | ||
| aria-haspopup="true" | ||
| aria-expanded={ isOpen } | ||
| label={ label } | ||
| showTooltip | ||
| > | ||
| { mergedToggleProps.children } | ||
| </Button> | ||
| ); | ||
| } } | ||
| renderContent={ ( { isOpen, onClose, ...props } ) => { | ||
| return ( | ||
| <BottomSheet | ||
| hideHeader={ true } | ||
| isVisible={ isOpen } | ||
| onClose={ onClose } | ||
| > | ||
| { isFunction( children ) ? children( props ) : null } | ||
| <PanelBody | ||
| title={ label } | ||
| style={ { paddingLeft: 0, paddingRight: 0 } } | ||
| > | ||
| { flatMap( | ||
| controlSets, | ||
| ( controlSet, indexOfSet ) => | ||
| controlSet.map( | ||
| ( control, indexOfControl ) => ( | ||
| <BottomSheet.Cell | ||
| key={ [ | ||
| indexOfSet, | ||
| indexOfControl, | ||
| ].join() } | ||
| label={ control.title } | ||
| onPress={ () => { | ||
| onClose(); | ||
| if ( control.onClick ) { | ||
| control.onClick(); | ||
| } | ||
| } } | ||
| editable={ false } | ||
| icon={ control.icon } | ||
| leftAlign={ true } | ||
| isSelected={ control.isActive } | ||
| separatorType={ | ||
| indexOfControl === | ||
| controlSet.length - 1 || | ||
| Platform.OS === 'android' | ||
| ? 'none' | ||
| : 'leftMargin' | ||
| } | ||
| /> | ||
| ) | ||
| ) | ||
| ) } | ||
| </PanelBody> | ||
| </BottomSheet> | ||
| ); | ||
| } } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default DropdownMenu; | ||
| export default withPreferredColorScheme( DropdownMenu ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.