feat(fabric): Implement Drag/Drop/Paste for TextInput #2715
+1,091
−412
Conversation
This file contains hidden or 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
Summary: Add support for `draggedTypes` to the View component, enabling the configuration of a native view as a drop target. Test Plan: * Run Zeratul with Fabric enabled * Drag a file over the messages view and check that the cursor is changing indicating a drop target https://pxl.cl/4ldkW Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Subscribers: taskcreeper Differential Revision: https://phabricator.intern.facebook.com/D53674739
Summary: Add the drag and drop event emitters to View with the payload conversion matching the Paper API for dragEnter/dragLeave/drop events. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53674738
Summary: Add support for drag and drop to the `ViewComponent` for files and images. The implementation converts the dropped pasteboard items the same way as in Paper. The `DataTransferItem` resulting from the pasteboard conversion of the dragged items is used to build the JS payload for the dragEnter/dragLeave/drop events. Test Plan: * Run Zeratul with Fabric enabled * Drag and drop an image on the messages view * Send the attachment https://pxl.cl/4ldB7 Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53674742
Co-authored-by: Tommy Nguyen <[email protected]>
Saadnajmi
force-pushed
the
paste-textinput
branch
from
2d4bee4 to
2476f7a
Compare
Summary: This diff adds keyboard event handling to the TextInput component by testing the valid keys for manual keyboard event handling and dispatching key events to the View component keyboard handling method. Test Plan: - Run Workplace Chat with Fabric enabled. - Open a message thread with 3 or more participants. - Type `@` to display the reference selector. - Change the selection with the up and down arrows and select an entry with tab to test the custom keyboard event handling. https://pxl.cl/4ghtH Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53241729 Tasks: T157889406, T154618477
Summary: Add support for drag and drop to the TextInput component. This re-uses the drag and drop handlers implemented on the View component to support dropping images/files on TextInput views directly. Test Plan: * Run Zeratul with Fabric enabled * Drag and drop an image on the message composer * Send the attachment https://pxl.cl/4ldBX Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53674740
Summary: This diff refactors the data transfer item payload conversion logic to share it with `TextInputEventEmitter` paste event, allowing to implement the onPaste event emitters building the same payload as generated by the drag and drop implementation. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53694921
Summary: Implement the file/image pasteboard pasting event for the `TextInput` component in Fabric. The payload for the event is the same as for the drag and drop events. Test Plan: * Run Zeratul with Fabric enabled * Copy an image/file on the pasteboard * Focus the message composer * Paste the image/file and send the message https://pxl.cl/4lk92 Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53694922
Saadnajmi
force-pushed
the
paste-textinput
branch
from
2476f7a to
35d1f10
Compare
Summary: **Context** - Configuring paste options was never implemented in our Fabric TextInput - Paper Implementation: https://www.internalfb.com/code/fbsource/[93ff90a797da]/third-party/microsoft-fork-of-react-native/react-native-macos/packages/react-native/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputViewManager.m?lines=29-35 https://www.internalfb.com/code/fbsource/[563690cf01f1]/third-party/microsoft-fork-of-react-native/react-native-macos/packages/react-native/React/Base/RCTConvert.m?lines=1239 **Change** - Add c++ enum/prop - Add conversion - Add `pastedTypes` to Fabric component Test Plan: |Fabric|Paper| | https://pxl.cl/4LcPw | https://pxl.cl/4LcQL| Reviewers: lefever, #rn-desktop Differential Revision: https://phabricator.intern.facebook.com/D56558929 Tasks: T186086013
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Needs #2713 to land first.
Test Plan: