-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Mobile] - Copy, Cut, Paste, Duplicate blocks (#23110)
* RNMobile - Copy / Duplicate functionality and Menu Inserter refactor: Move items rendering to its own component * RNMobile - Store selector fix after merge * RNMobile - Cut feature * RNMobile - Verify if block can be inserted from clipboard * RNMobile - Cut functionality * RNMobile - Remove unused async * Add Notice view for Copy/Cut blocks (#23113) * Add notices * Remove duplicate function * Fix errors * Update NoticeList * Fix default val * Bind on notice hidden * Add timer and fix formatting * Prevent NoticeList from appearing inside nested blocks * Update animation * RNMobile - Notice - Fix animation * Add onDimensionsChange listener * RNMobile - FloatingToolbar - Disable pointer Events if its not visible * Make zIndex values get effective * Update packages/components/src/notice/index.native.js Co-authored-by: Gerardo Pacheco <[email protected]> * Update packages/components/src/notice/list.native.js Co-authored-by: Gerardo Pacheco <[email protected]> * Simplify reducer Co-authored-by: Gerardo Pacheco <[email protected]> * RNMobile - Fix lint error and change the default value of the Notice component animation * Mobile - Notice component - Blur effect for iOS and change styling for Android * Mobile - Add react-native-blur * Mobile - Mock @react-native-community/blur * Mobile - Update Podfile lock Co-authored-by: Pinar Olguc <[email protected]>
- Loading branch information
Showing
19 changed files
with
706 additions
and
95 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
94 changes: 94 additions & 0 deletions
94
packages/block-editor/src/components/inserter/menu-item.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,94 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { View, TouchableHighlight, Text } from 'react-native'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Component } from '@wordpress/element'; | ||
| import { Icon } from '@wordpress/components'; | ||
| import { withPreferredColorScheme } from '@wordpress/compose'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import styles from './style.scss'; | ||
|
|
||
| class MenuItem extends Component { | ||
| constructor() { | ||
| super( ...arguments ); | ||
|
|
||
| this.onPress = this.onPress.bind( this ); | ||
| } | ||
|
|
||
| onPress() { | ||
| const { onSelect, item } = this.props; | ||
| onSelect( item ); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| getStylesFromColorScheme, | ||
| item, | ||
| itemWidth, | ||
| maxWidth, | ||
| } = this.props; | ||
|
|
||
| const modalIconWrapperStyle = getStylesFromColorScheme( | ||
| styles.modalIconWrapper, | ||
| styles.modalIconWrapperDark | ||
| ); | ||
| const modalIconStyle = getStylesFromColorScheme( | ||
| styles.modalIcon, | ||
| styles.modalIconDark | ||
| ); | ||
| const modalItemLabelStyle = getStylesFromColorScheme( | ||
| styles.modalItemLabel, | ||
| styles.modalItemLabelDark | ||
| ); | ||
|
|
||
| const clipboardBlockStyles = getStylesFromColorScheme( | ||
| styles.clipboardBlock, | ||
| styles.clipboardBlockDark | ||
| ); | ||
|
|
||
| const isClipboardBlock = item.id === 'clipboard'; | ||
|
|
||
| return ( | ||
| <TouchableHighlight | ||
| style={ styles.touchableArea } | ||
| underlayColor="transparent" | ||
| activeOpacity={ 0.5 } | ||
| accessibilityLabel={ item.title } | ||
| onPress={ this.onPress } | ||
| > | ||
| <View style={ [ styles.modalItem, { width: maxWidth } ] }> | ||
| <View | ||
| style={ [ | ||
| modalIconWrapperStyle, | ||
| itemWidth && { | ||
| width: itemWidth, | ||
| }, | ||
| isClipboardBlock && clipboardBlockStyles, | ||
| ] } | ||
| > | ||
| <View style={ modalIconStyle }> | ||
| <Icon | ||
| icon={ item.icon.src } | ||
| fill={ modalIconStyle.fill } | ||
| size={ modalIconStyle.width } | ||
| /> | ||
| </View> | ||
| </View> | ||
| <Text style={ modalItemLabelStyle }> | ||
| { isClipboardBlock ? __( 'Copied block' ) : item.title } | ||
| </Text> | ||
| </View> | ||
| </TouchableHighlight> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withPreferredColorScheme( MenuItem ); |
Oops, something went wrong.