Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mobile] - Fix Drag & Drop Chip positioning issue with RTL languages #41053

Merged
merged 3 commits into from
May 18, 2022
Merged

[Mobile] - Fix Drag & Drop Chip positioning issue with RTL languages #41053

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90377c0
Mobile - Fix - Drag & drop chip issue with RTL languages
May 13, 2022
a6e9016
Mobile - BlockDraggable - Rename maxWidth variable to contentWidth
May 17, 2022
95a1bdf
Mobile - BlockDraggable - Add custom exiting animation that uses the …
May 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 47 additions & 4 deletions packages/block-editor/src/components/block-draggable/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
* External dependencies
*/
import { AccessibilityInfo } from 'react-native';
import {
useSafeAreaInsets,
useSafeAreaFrame,
} from 'react-native-safe-area-context';
import Animated, {
runOnJS,
runOnUI,
Expand All @@ -11,7 +15,6 @@ import Animated, {
withDelay,
withTiming,
ZoomInEasyDown,
ZoomOutEasyDown,
} from 'react-native-reanimated';

/**
Expand Down Expand Up @@ -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 } ) => {
fluiddot marked this conversation as resolved.
Show resolved Hide resolved
const [ draggedBlockIcon, setDraggedBlockIcon ] = useState();

const {
Expand All @@ -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 = {
Expand Down Expand Up @@ -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 -
Expand All @@ -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,
};
};

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It has the same functionality as ZoomOutEasyDown, but it has a custom translateX value to solve the issue with RTL languages.

return (
<>
<DroppingInsertionPoint
Expand All @@ -238,7 +281,7 @@ const BlockDraggableWrapper = ( { children } ) => {
{ draggedBlockIcon && (
<Animated.View
entering={ ZoomInEasyDown.duration( 200 ) }
exiting={ ZoomOutEasyDown.duration( 150 ) }
exiting={ exitingAnimation }
>
<DraggableChip icon={ draggedBlockIcon } />
</Animated.View>
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/block-list/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,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 ? (
<BlockListProvider
Expand All @@ -198,7 +198,7 @@ export class BlockList extends Component {
scrollRef: this.scrollViewRef,
} }
>
<BlockDraggableWrapper>
<BlockDraggableWrapper isRTL={ isRTL }>
{ ( { onScroll } ) => this.renderList( { onScroll } ) }
</BlockDraggableWrapper>
</BlockListProvider>
Expand Down Expand Up @@ -438,6 +438,8 @@ export default compose( [

const isFloatingToolbarVisible =
!! selectedBlockClientId && hasRootInnerBlocks;
const isRTL = getSettings().isRTL;

return {
blockClientIds,
blockCount,
Expand All @@ -448,6 +450,7 @@ export default compose( [
isFloatingToolbarVisible,
isStackedHorizontally,
maxWidth,
isRTL,
};
}
),
Expand Down