-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42630 from margelo/perunt/inline-auto-suggestion
Inline auto suggestion
- Loading branch information
Showing
38 changed files
with
610 additions
and
189 deletions.
There are no files selected for viewing
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
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
70 changes: 70 additions & 0 deletions
70
patches/react-native+0.73.4+016+iOS-textinput-onscroll-event.patch
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,70 @@ | ||
| diff --git a/node_modules/react-native/ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/TextInputEventEmitter.cpp b/node_modules/react-native/ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/TextInputEventEmitter.cpp | ||
| index 88ae3f3..497569a 100644 | ||
| --- a/node_modules/react-native/ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/TextInputEventEmitter.cpp | ||
| +++ b/node_modules/react-native/ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/TextInputEventEmitter.cpp | ||
| @@ -36,6 +36,54 @@ static jsi::Value textInputMetricsPayload( | ||
| return payload; | ||
| }; | ||
|
|
||
| +static jsi::Value textInputMetricsScrollPayload( | ||
| + jsi::Runtime& runtime, | ||
| + const TextInputMetrics& textInputMetrics) { | ||
| + auto payload = jsi::Object(runtime); | ||
| + | ||
| + { | ||
| + auto contentOffset = jsi::Object(runtime); | ||
| + contentOffset.setProperty(runtime, "x", textInputMetrics.contentOffset.x); | ||
| + contentOffset.setProperty(runtime, "y", textInputMetrics.contentOffset.y); | ||
| + payload.setProperty(runtime, "contentOffset", contentOffset); | ||
| + } | ||
| + | ||
| + { | ||
| + auto contentInset = jsi::Object(runtime); | ||
| + contentInset.setProperty(runtime, "top", textInputMetrics.contentInset.top); | ||
| + contentInset.setProperty( | ||
| + runtime, "left", textInputMetrics.contentInset.left); | ||
| + contentInset.setProperty( | ||
| + runtime, "bottom", textInputMetrics.contentInset.bottom); | ||
| + contentInset.setProperty( | ||
| + runtime, "right", textInputMetrics.contentInset.right); | ||
| + payload.setProperty(runtime, "contentInset", contentInset); | ||
| + } | ||
| + | ||
| + { | ||
| + auto contentSize = jsi::Object(runtime); | ||
| + contentSize.setProperty( | ||
| + runtime, "width", textInputMetrics.contentSize.width); | ||
| + contentSize.setProperty( | ||
| + runtime, "height", textInputMetrics.contentSize.height); | ||
| + payload.setProperty(runtime, "contentSize", contentSize); | ||
| + } | ||
| + | ||
| + { | ||
| + auto layoutMeasurement = jsi::Object(runtime); | ||
| + layoutMeasurement.setProperty( | ||
| + runtime, "width", textInputMetrics.layoutMeasurement.width); | ||
| + layoutMeasurement.setProperty( | ||
| + runtime, "height", textInputMetrics.layoutMeasurement.height); | ||
| + payload.setProperty(runtime, "layoutMeasurement", layoutMeasurement); | ||
| + } | ||
| + | ||
| + payload.setProperty(runtime, "zoomScale", textInputMetrics.zoomScale ?: 1); | ||
| + | ||
| + | ||
| + return payload; | ||
| + }; | ||
| + | ||
| static jsi::Value textInputMetricsContentSizePayload( | ||
| jsi::Runtime& runtime, | ||
| const TextInputMetrics& textInputMetrics) { | ||
| @@ -140,7 +188,9 @@ void TextInputEventEmitter::onKeyPressSync( | ||
|
|
||
| void TextInputEventEmitter::onScroll( | ||
| const TextInputMetrics& textInputMetrics) const { | ||
| - dispatchTextInputEvent("scroll", textInputMetrics); | ||
| + dispatchEvent("scroll", [textInputMetrics](jsi::Runtime& runtime) { | ||
| + return textInputMetricsScrollPayload(runtime, textInputMetrics); | ||
| + }); | ||
| } | ||
|
|
||
| void TextInputEventEmitter::dispatchTextInputEvent( |
39 changes: 39 additions & 0 deletions
39
patches/react-native-keyboard-controller+1.12.2.patch.patch
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,39 @@ | ||
| diff --git a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt | ||
| index 83884d8..5d9e989 100644 | ||
| --- a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt | ||
| +++ b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt | ||
| @@ -99,12 +99,12 @@ class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : R | ||
| } | ||
|
|
||
| private fun goToEdgeToEdge(edgeToEdge: Boolean) { | ||
| - reactContext.currentActivity?.let { | ||
| - WindowCompat.setDecorFitsSystemWindows( | ||
| - it.window, | ||
| - !edgeToEdge, | ||
| - ) | ||
| - } | ||
| + // reactContext.currentActivity?.let { | ||
| + // WindowCompat.setDecorFitsSystemWindows( | ||
| + // it.window, | ||
| + // !edgeToEdge, | ||
| + // ) | ||
| + // } | ||
| } | ||
|
|
||
| private fun setupKeyboardCallbacks() { | ||
| @@ -158,13 +158,13 @@ class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : R | ||
| // region State managers | ||
| private fun enable() { | ||
| this.goToEdgeToEdge(true) | ||
| - this.setupWindowInsets() | ||
| + // this.setupWindowInsets() | ||
| this.setupKeyboardCallbacks() | ||
| } | ||
|
|
||
| private fun disable() { | ||
| this.goToEdgeToEdge(false) | ||
| - this.setupWindowInsets() | ||
| + // this.setupWindowInsets() | ||
| this.removeKeyboardCallbacks() | ||
| } | ||
| // endregion |
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
5 changes: 5 additions & 0 deletions
5
...CompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts
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,5 @@ | ||
| function getBottomSuggestionPadding(): number { | ||
| return 16; | ||
| } | ||
|
|
||
| export default getBottomSuggestionPadding; |
5 changes: 5 additions & 0 deletions
5
...AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts
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,5 @@ | ||
| function getBottomSuggestionPadding(): number { | ||
| return 0; | ||
| } | ||
|
|
||
| export default getBottomSuggestionPadding; |
33 changes: 33 additions & 0 deletions
33
src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx
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,33 @@ | ||
| import {Portal} from '@gorhom/portal'; | ||
| import React, {useMemo} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; | ||
| import useStyleUtils from '@hooks/useStyleUtils'; | ||
| import getBottomSuggestionPadding from './getBottomSuggestionPadding'; | ||
| import type {AutoCompleteSuggestionsPortalProps} from './types'; | ||
|
|
||
| function AutoCompleteSuggestionsPortal<TSuggestion>({left = 0, width = 0, bottom = 0, ...props}: AutoCompleteSuggestionsPortalProps<TSuggestion>) { | ||
| const StyleUtils = useStyleUtils(); | ||
| const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [StyleUtils, left, width, bottom]); | ||
|
|
||
| if (!width) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Portal hostName="suggestions"> | ||
| <View style={styles}> | ||
| {/* eslint-disable-next-line react/jsx-props-no-spreading */} | ||
| <BaseAutoCompleteSuggestions<TSuggestion> | ||
| width={width} | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| /> | ||
| </View> | ||
| </Portal> | ||
| ); | ||
| } | ||
|
|
||
| AutoCompleteSuggestionsPortal.displayName = 'AutoCompleteSuggestionsPortal'; | ||
|
|
||
| export default AutoCompleteSuggestionsPortal; |
43 changes: 43 additions & 0 deletions
43
src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx
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,43 @@ | ||
| import React from 'react'; | ||
| import type {ReactElement} from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import {View} from 'react-native'; | ||
| import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; | ||
| import useStyleUtils from '@hooks/useStyleUtils'; | ||
| import getBottomSuggestionPadding from './getBottomSuggestionPadding'; | ||
| import type {AutoCompleteSuggestionsPortalProps} from './types'; | ||
|
|
||
| /** | ||
| * On the mobile-web platform, when long-pressing on auto-complete suggestions, | ||
| * we need to prevent focus shifting to avoid blurring the main input (which makes the suggestions picker close and fires the onSelect callback). | ||
| * The desired pattern for all platforms is to do nothing on long-press. | ||
| * On the native platform, tapping on auto-complete suggestions will not blur the main input. | ||
| */ | ||
|
|
||
| function AutoCompleteSuggestionsPortal<TSuggestion>({left = 0, width = 0, bottom = 0, ...props}: AutoCompleteSuggestionsPortalProps<TSuggestion>): ReactElement | null | false { | ||
| const StyleUtils = useStyleUtils(); | ||
|
|
||
| const bodyElement = document.querySelector('body'); | ||
|
|
||
| const componentToRender = ( | ||
| <BaseAutoCompleteSuggestions<TSuggestion> | ||
| width={width} | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| !!width && | ||
| bodyElement && | ||
| ReactDOM.createPortal( | ||
| <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding()})}>{componentToRender}</View>, | ||
| bodyElement, | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| AutoCompleteSuggestionsPortal.displayName = 'AutoCompleteSuggestionsPortal'; | ||
|
|
||
| export default AutoCompleteSuggestionsPortal; | ||
| export type {AutoCompleteSuggestionsPortalProps}; |
13 changes: 13 additions & 0 deletions
13
src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/types.ts
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,13 @@ | ||
| import type {AutoCompleteSuggestionsProps} from '@components/AutoCompleteSuggestions/types'; | ||
|
|
||
| type ExternalProps<TSuggestion> = Omit<AutoCompleteSuggestionsProps<TSuggestion>, 'measureParentContainerAndReportCursor'>; | ||
|
|
||
| type AutoCompleteSuggestionsPortalProps<TSuggestion> = ExternalProps<TSuggestion> & { | ||
| left: number; | ||
| width: number; | ||
| bottom: number; | ||
| measuredHeightOfSuggestionRows: number; | ||
| }; | ||
|
|
||
| // eslint-disable-next-line import/prefer-default-export | ||
| export type {AutoCompleteSuggestionsPortalProps}; |
Oops, something went wrong.