Add DraggableList component #26307
Merged
Add DraggableList component #26307
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
Contributor
|
@kosmydel please let me know the ETA for this issue 🙇 |
Contributor
Author
Hey, @blazejkustra took this over as I'm participating in internal workshops and have limited availability. It should be ready for a review today. |
Contributor
Author
|
@situchan @Li357 Thanks @blazejkustra for the support! |
Contributor
|
@situchan Are you able to review this soon? |
fabioh8010
reviewed
Aug 31, 2023
Contributor
fabioh8010
left a comment
fabioh8010
left a comment
There was a problem hiding this comment.
Some comments regarding the TS part.
situchan
reviewed
Aug 31, 2023
Contributor
There was a problem hiding this comment.
Overall looks good. +1 on @fabioh8010's feedback
Improvement suggestions: (not blocker but can be follow-up)
BUG1: (web) hover glitch after drop
bug1.mov
BUG2: [iOS] too much padding (I think this is blocker so should be fixed here)
BUG3: Inconsistent hover color between platforms
i.e. on web, there's highlight color while dragging but not on native
bug3.mov
BUG4: [mSafari] sometimes full page is selected (blue highlight)
bug4.mov
BUG5: [mChrome] long press threshold - while scrolling, sometimes drag started though I didn't long-press
bug5.mov
hayata-suenaga
changed the title
Contributor
Performance Comparison Report 📊Significant Changes To Duration
Show details
Meaningless Changes To DurationShow entries
Show details
|
Contributor
|
@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker. |
57 tasks
Contributor
|
🚀 Deployed to staging by https://github.com/hayata-suenaga in version: 1.3.78-0 🚀
|
Contributor
mountiny
removed
the
DeployBlockerCash
DylanDylann
reviewed
Oct 5, 2023
| isActive={isActive} | ||
| getIndex={getIndex} | ||
| onPress={navigateToWaypointEditPage} | ||
| disabled={isLoadingRoute} |
Contributor
There was a problem hiding this comment.
@blazejkustra Sorry. I have a minor question. Please help answer when you have a chance. Why do we need this logic?
Contributor
There was a problem hiding this comment.
@DylanDylann This line disables the items of draggable list when the route is reloading, so that it is impossible to reorder the list while the map is reloading. Without it, there is a possible race condition if you change the order of items quickly while the map is still loading the route.
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
github-actions
bot
added
the
DeployBlockerCash
Contributor
Performance Comparison Report 📊Significant Changes To Duration
Show details
Meaningless Changes To DurationShow entries
Show details
|
Contributor
|
@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker. |
tgolen
reviewed
Oct 5, 2023
| transaction: { | ||
| key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID || 0}`, | ||
| }, | ||
| mapboxAccessToken: { |
Contributor
There was a problem hiding this comment.
I think this may have been missed during the refactoring, but this prop is no longer accessed in this component.
Contributor
There was a problem hiding this comment.
yes, that can be removed as unused. Moved to DistanceRequestFooter
Contributor
Author
There was a problem hiding this comment.
That's right. I will prepare a PR for that tomorrow.
Contributor
|
🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.78-4 🚀
|
Contributor
|
🚀 Deployed to staging by https://github.com/hayata-suenaga in version: 1.3.79-0 🚀
|
66 tasks
Contributor
|
🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.79-5 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.79-5 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/jasperhuangg in version: 1.3.79-5 🚀
|
6 tasks
6 tasks
DylanDylann
reviewed
Oct 24, 2023
| } | ||
| }, [stop]); | ||
| - var bindCapturingEvents = useMemoOne.useCallback(function bindCapturingEvents() { | ||
| + var bindCapturingEvents = useMemoOne.useCallback(function bindCapturingEvents(target) { |
Contributor
There was a problem hiding this comment.
Hi @kosmydel . I am working on "Create a fork for react-beautiful-dnd and remove patch" and I need to define a type for target param. So what should it be? Expensify/react-beautiful-dnd#1 (comment)
Contributor
Author
There was a problem hiding this comment.
Hey @DylanDylann, thanks for the question!
I think it will be HTMLElement.
Here is the original PR, with this change. And it is already typed.
Comment on lines
+34
to
+35
| waypoint0: null, | ||
| waypoint1: null, |
Collaborator
There was a problem hiding this comment.
This change has caused a regression explained here
#29748 (comment)
|
|
||
| setOptimisticWaypoints(newWaypoints); | ||
| // eslint-disable-next-line rulesdir/no-thenable-actions-in-views | ||
| Transaction.updateWaypoints(transactionID, newWaypoints).then(() => { |
Member
There was a problem hiding this comment.
Looks like dragging the waypoint to empty waypoint duplicates it which caused #33919
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
14 participants
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.
Details
Implement a
DraggableListfor waypoints.Fixed Issues
$ #22716
PROPOSAL: N/A
Tests
Offline tests
N/A
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Web
web.mov
Mobile Web - Chrome
android-web.mov
Mobile Web - Safari
ios-web.mov
Desktop
desktop.mov
iOS
ios.mov
Android
android.mov