From 0087e3d1592e4c1c991162f6a434945f09cf53af Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Wed, 18 May 2022 11:05:19 +0200 Subject: [PATCH] [Mobile] - Fix Drag & Drop Chip positioning issue with RTL languages (#41053) * Mobile - Fix - Drag & drop chip issue with RTL languages * Mobile - BlockDraggable - Rename maxWidth variable to contentWidth * Mobile - BlockDraggable - Add custom exiting animation that uses the same functionality as ZoomOutEasyDown but customizing the translateX value taking into account RTL languages. --- .../block-draggable/index.native.js | 51 +++++++++++++++++-- .../src/components/block-list/index.native.js | 7 ++- 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-draggable/index.native.js b/packages/block-editor/src/components/block-draggable/index.native.js index a52396db27fc4..ec76781d449fc 100644 --- a/packages/block-editor/src/components/block-draggable/index.native.js +++ b/packages/block-editor/src/components/block-draggable/index.native.js @@ -2,6 +2,10 @@ * External dependencies */ import { AccessibilityInfo } from 'react-native'; +import { + useSafeAreaInsets, + useSafeAreaFrame, +} from 'react-native-safe-area-context'; import Animated, { runOnJS, runOnUI, @@ -11,7 +15,6 @@ import Animated, { withDelay, withTiming, ZoomInEasyDown, - ZoomOutEasyDown, } from 'react-native-reanimated'; /** @@ -61,10 +64,11 @@ const DEFAULT_IOS_LONG_PRESS_MIN_DURATION = * * @param {Object} props Component props. * @param {JSX.Element} props.children Children to be rendered. + * @param {boolean} props.isRTL Check if current locale is RTL. * * @return {Function} Render function that passes `onScroll` event handler. */ -const BlockDraggableWrapper = ( { children } ) => { +const BlockDraggableWrapper = ( { children, isRTL } ) => { const [ draggedBlockIcon, setDraggedBlockIcon ] = useState(); const { @@ -75,6 +79,10 @@ const BlockDraggableWrapper = ( { children } ) => { const { scrollRef } = useBlockListContext(); const animatedScrollRef = useAnimatedRef(); + const { left, right } = useSafeAreaInsets(); + const { width } = useSafeAreaFrame(); + const safeAreaOffset = left + right; + const contentWidth = width - safeAreaOffset; animatedScrollRef( scrollRef ); const scroll = { @@ -198,9 +206,16 @@ const BlockDraggableWrapper = ( { children } ) => { }; const chipDynamicStyles = useAnimatedStyle( () => { + const chipOffset = chip.width.value / 2; + const translateX = ! isRTL + ? chip.x.value - chipOffset + : -( contentWidth - ( chip.x.value + chipOffset ) ); + return { transform: [ - { translateX: chip.x.value - chip.width.value / 2 }, + { + translateX, + }, { translateY: chip.y.value - @@ -215,6 +230,34 @@ const BlockDraggableWrapper = ( { children } ) => { styles[ 'draggable-chip__wrapper' ], ]; + const exitingAnimation = ( { currentHeight, currentWidth } ) => { + 'worklet'; + const translateX = ! isRTL ? 0 : currentWidth * -1; + const duration = 150; + const animations = { + transform: [ + { + translateY: withTiming( currentHeight, { + duration, + } ), + }, + { + translateX: withTiming( translateX, { + duration, + } ), + }, + { scale: withTiming( 0, { duration } ) }, + ], + }; + const initialValues = { + transform: [ { translateY: 0 }, { translateX }, { scale: 1 } ], + }; + return { + initialValues, + animations, + }; + }; + return ( <> { { draggedBlockIcon && ( diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index a4248327589ed..788ec01b59bb6 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -190,7 +190,7 @@ export class BlockList extends Component { } render() { - const { isRootList } = this.props; + const { isRootList, isRTL } = this.props; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks. const blockList = isRootList ? ( - + { ( { onScroll } ) => this.renderList( { onScroll } ) } @@ -439,6 +439,8 @@ export default compose( [ const isFloatingToolbarVisible = !! selectedBlockClientId && hasRootInnerBlocks; + const isRTL = getSettings().isRTL; + return { blockClientIds, blockCount, @@ -449,6 +451,7 @@ export default compose( [ isFloatingToolbarVisible, isStackedHorizontally, maxWidth, + isRTL, }; } ),