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.

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] Remove Keyboard Aware Flatlist #48791

Merged
merged 55 commits into from
Apr 10, 2023
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
1ab4285
Remove react-native-keyboard-aware-scroll-view dependency
Mar 6, 2023
5af792e
Mobile - AztecView/AztecInputState:
Mar 6, 2023
560c62d
Mobile - VisualEditor - Remove keyboard listeners and the usage of is…
Mar 6, 2023
281acd3
Mobile - RichText - Remove usage useNativeProps which used to handle …
Mar 6, 2023
e6f15cd
Mobile - BlockList and Keyboard Aware FlatList for iOS:
Mar 6, 2023
1f452fd
Mobile - Remove patch for react-native-keyboard-aware-scroll-view
Mar 6, 2023
9c685ae
Mobile - Update Block insertion E2E test
Mar 7, 2023
a952055
Mobile - Block List - Update isFloatingToolbarVisible logic
Mar 9, 2023
e2c9d04
Mobile - KeyboardAwareFlatList - Remove usage of inputAccessoryViewHe…
Mar 9, 2023
f4decc6
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Mar 10, 2023
d5b537f
Mobile - KeyboardAwareFlatList - Prevent adding listeners on re-rende…
Mar 10, 2023
d3b2858
Mobile - E2E - Improve editor paragraph test
Mar 10, 2023
fdc91ef
Mobile - KeyboardAwareFlatList - Refactors the code to split it in se…
Mar 16, 2023
0c8d399
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Mar 16, 2023
5a6c6de
Mobile - useScrollToTextInput - Fix typo in type
Mar 16, 2023
66e3042
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Mar 21, 2023
79cf558
Mobile - RCTAztecView - Send caret's height along with its coords
Mar 21, 2023
39611fb
Mobile - Keyboard Aware Flat list - Rewrite hooks to take into accoun…
Mar 21, 2023
4f7651f
Mobile - Keyboard Aware Flatlist - Update hooks to fix several bugs
Mar 22, 2023
a0a0e22
Mobile - Keyboard Aware Flatlist - Add tests for new hooks
Mar 22, 2023
e4a6be8
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Mar 23, 2023
a2ccc91
Mobile - Keyboard Aware FlatList - Remove duplicated condition and ad…
Mar 23, 2023
d5d9f52
Mobile - Keyboard Aware Flatlist - Update useScrollToTextInput to fix…
Mar 24, 2023
a94a57a
Mobile - Keyboard Aware Flatlist - Add missing styles for inner blocks
Mar 24, 2023
01152ad
Mobile - Keyboard Aware Flatlist - Fix issue when the title is focuse…
Mar 24, 2023
d336b42
Mobile - Keyboard Aware Flatlist - Don't take into account null values
Mar 24, 2023
40e3774
Mobile - AztecView - iOS: Pass the caret data when the TextInput is f…
Mar 24, 2023
be90fad
Mobile - Keyboard Aware FlatList - Remove unused shouldPreventAutomat…
Mar 28, 2023
72277f1
Mobile - Keyboard Aware FlatList - useKeyboardOffset - Add case where…
Mar 28, 2023
89ba933
Mobile - Keyboard Aware FlatList - useTextInputOffset: Prevent measur…
Mar 28, 2023
fe189fe
Mobile - Keyboard Aware FlatList - useScrollToTextInput: Add document…
Mar 28, 2023
fd42475
Mobile - Keyboard Aware FlatList - useScrollToTextInput: Update "does…
Mar 28, 2023
2e8853c
Mobile - AztecInputState - Fix spacing in comment
Mar 28, 2023
a5618c8
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Mar 28, 2023
eedca15
Mobile - E2E Tests - Paragraph and Block Insertion: Remove adding isA…
Mar 28, 2023
e7d9b38
Revert "Mobile - Keyboard Aware FlatList - useScrollToTextInput: Upda…
Mar 29, 2023
a8341ef
Mobile - KeyboardAwareFlatList - Reset scrollViewMeasurements to null…
Mar 29, 2023
b2ffb2d
Mobile - useKeyboardOffset - Remove if condition if there's an AztecV…
Mar 29, 2023
45fff38
Mobile - AztecView - Pass caret data when the content size of the Tex…
Mar 29, 2023
4374115
Mobile - AztecInputState - Don't notify caret change listeners if the…
Mar 31, 2023
bf36349
Mobile - useKeyboardOffset: Remove usage of keyboardWillShow and just…
Mar 31, 2023
fdda82f
Mobile - KeyboardAwareFlatList - Remove usage of isKeboardVisible sin…
Mar 31, 2023
8c31c52
Mobile - BlockList - Restore usage of shouldFlatListPreventAutomaticS…
Apr 3, 2023
85bd85a
Mobile -useKeyboardOffset: Update hook to use a setTiemout to remove …
Apr 3, 2023
cb22cc6
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Apr 3, 2023
c37687b
Mobile - useScrollToTextInput: Remove dash
Apr 3, 2023
3ff3fd4
Mobile - KeyboardAwareFlatList: Remove dashes
Apr 3, 2023
0572495
Mobile - useKeyboardOffset - Reset timeout when willShowSubscription …
Apr 4, 2023
20c9ab0
Mobile - useTextInputOffset - Add example when a caretY value would b…
Apr 10, 2023
8fba7cb
Mobile - useKeyboardOffset - Remove duplicated test and use a differe…
Apr 10, 2023
9793ad0
Mobile - useKeyboardOffset - Update test to also remove the keyboardW…
Apr 10, 2023
dcd0563
Merge branch 'trunk' into rnmobile/remove-keyboard-aware-flatlist
Apr 10, 2023
6e7556f
Mobile - Update Changelog
Apr 10, 2023
a519085
Components - Update changelog to include the KeyboardAwareFlatList mo…
Apr 10, 2023
a080674
Mobile - useTextInputOffset - Update comment to use permanent link
Apr 10, 2023
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
9 changes: 0 additions & 9 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 13 additions & 47 deletions packages/block-editor/src/components/block-list/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
/**
* WordPress dependencies
*/
import { Component, createContext } from '@wordpress/element';
import { Component } from '@wordpress/element';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { createBlock } from '@wordpress/blocks';
Expand All @@ -33,7 +33,6 @@ import {
import { BlockDraggableWrapper } from '../block-draggable';
import { store as blockEditorStore } from '../../store';

export const OnCaretVerticalPositionChange = createContext();
const identity = ( x ) => x;

const stylesMemo = {};
Expand Down Expand Up @@ -70,12 +69,8 @@ export class BlockList extends Component {
};
this.renderItem = this.renderItem.bind( this );
this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
this.onCaretVerticalPositionChange =
this.onCaretVerticalPositionChange.bind( this );
this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
this.shouldFlatListPreventAutomaticScroll =
this.shouldFlatListPreventAutomaticScroll.bind( this );
this.shouldShowInnerBlockAppender =
this.shouldShowInnerBlockAppender.bind( this );
this.renderEmptyList = this.renderEmptyList.bind( this );
Expand All @@ -94,23 +89,10 @@ export class BlockList extends Component {
this.props.insertBlock( newBlock, this.props.blockCount );
}

onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
KeyboardAwareFlatList.handleCaretVerticalPositionChange(
this.scrollViewRef,
targetId,
caretY,
previousCaretY
);
}

scrollViewInnerRef( ref ) {
this.scrollViewRef = ref;
}

shouldFlatListPreventAutomaticScroll() {
return this.props.isBlockInsertionPointVisible;
}

shouldShowInnerBlockAppender() {
const { blockClientIds, renderAppender } = this.props;
return renderAppender && blockClientIds.length > 0;
Expand Down Expand Up @@ -209,13 +191,7 @@ export class BlockList extends Component {
</BlockListConsumer>
);

return (
<OnCaretVerticalPositionChange.Provider
value={ this.onCaretVerticalPositionChange }
>
{ blockList }
</OnCaretVerticalPositionChange.Provider>
);
return blockList;
}

renderList( extraProps = {} ) {
Expand All @@ -237,8 +213,7 @@ export class BlockList extends Component {
} = this.props;
const { parentScrollRef, onScroll } = extraProps;

const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
styles;
const { blockToolbar, headerToolbar, floatingToolbar } = styles;

const containerStyle = {
flex: isRootList ? 1 : 0,
Expand All @@ -250,6 +225,10 @@ export class BlockList extends Component {
const isContentStretch = contentResizeMode === 'stretch';
const isMultiBlocks = blockClientIds.length > 1;
const { isWider } = alignmentHelpers;
const extraScrollHeight =
headerToolbar.height +
blockToolbar.height +
( isFloatingToolbarVisible ? floatingToolbar.height : 0 );

return (
<View
Expand All @@ -263,24 +242,11 @@ export class BlockList extends Component {
? { removeClippedSubviews: false }
: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
accessibilityLabel="block-list"
autoScroll={ this.props.autoScroll }
innerRef={ ( ref ) => {
this.scrollViewInnerRef( parentScrollRef || ref );
} }
extraScrollHeight={
blockToolbar.height + blockBorder.width
}
inputAccessoryViewHeight={
headerToolbar.height +
( isFloatingToolbarVisible
? floatingToolbar.height
: 0 )
}
extraScrollHeight={ extraScrollHeight }
keyboardShouldPersistTaps="always"
scrollViewStyle={ [
{ flex: isRootList ? 1 : 0 },
! isRootList && styles.overflowVisible,
] }
extraData={ this.getExtraData() }
scrollEnabled={ isRootList }
contentContainerStyle={ [
Expand All @@ -299,9 +265,6 @@ export class BlockList extends Component {
keyExtractor={ identity }
renderItem={ this.renderItem }
CellRendererComponent={ this.getCellRendererComponent }
shouldPreventAutomaticScroll={
this.shouldFlatListPreventAutomaticScroll
}
title={ title }
ListHeaderComponent={ header }
ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
Expand Down Expand Up @@ -407,6 +370,7 @@ export default compose( [
( select, { rootClientId, orientation, filterInnerBlocks } ) => {
const {
getBlockCount,
getBlockHierarchyRootClientId,
getBlockOrder,
getSelectedBlockClientId,
isBlockInsertionPointVisible,
Expand All @@ -427,10 +391,12 @@ export default compose( [
const isReadOnly = getSettings().readOnly;

const blockCount = getBlockCount();
const hasRootInnerBlocks = !! blockCount;
const rootBlockId = getBlockHierarchyRootClientId(
selectedBlockClientId
);

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

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ import { useBlockEditContext } from '../block-edit';
import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
import { filePasteHandler } from './file-paste-handler';
import FormatToolbarContainer from './format-toolbar-container';
import { useNativeProps } from './use-native-props';
import { store as blockEditorStore } from '../../store';
import {
addActiveFormats,
Expand Down Expand Up @@ -121,7 +120,6 @@ function RichTextWrapper(

const fallbackRef = useRef();
const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
const nativeProps = useNativeProps();
const embedHandlerPickerRef = useRef();
const selector = ( select ) => {
const {
Expand Down Expand Up @@ -220,6 +218,7 @@ function RichTextWrapper(
selectionChangeEnd
);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
dcalhoun marked this conversation as resolved.
Show resolved Hide resolved
[ clientId, identifier ]
);

Expand Down Expand Up @@ -373,6 +372,7 @@ function RichTextWrapper(
}
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[
onReplace,
onSplit,
Expand Down Expand Up @@ -615,7 +615,6 @@ function RichTextWrapper(
}
__unstableMultilineRootTag={ __unstableMultilineRootTag }
// Native props.
{ ...nativeProps }
blockIsSelected={
originalIsSelected !== undefined
? originalIsSelected
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,4 @@ export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
);
};

KeyboardAwareFlatList.handleCaretVerticalPositionChange = () => {
// no need to handle on Android, it is system managed
};

export default KeyboardAwareFlatList;
Loading