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

[RNMobile] Add scrollable screens to the bottom-sheet #26204

Merged
merged 8 commits into from
Nov 3, 2020

Conversation

dratwas
Copy link
Contributor

@dratwas dratwas commented Oct 16, 2020

GB-mobile PR: wordpress-mobile/gutenberg-mobile#2741

Motivation:
Since we have navigation inside the bottom-sheet, there is a possibility to have a flat list on some of the screens. In that scenario, we need to remove the scroll view from the bottom-sheet dynamically while switching the screen which generates some issues.

In this PR I moved the ScrollView to the navigation-screen and we can set isScrollable prop for each screen. I left the ScrollView only for bottom-sheets w/o navigation inside.

I added the isScrollable prop to the BottomSheet.NavigationScreen which determines if the content of the screen has FlatList/List/ScrollView inside.

How has this been tested?

  • Open Button Settings and check if the scroll works as before
  • Open Menu Inserter and check if the scroll works as before
  • Open Alignment or Header type bottom-sheet and check if the scroll works as before
  • Open link settings bottom-sheet and check if it works as before

This PR shouldn't bring any changes in the way the editor works - it is only a different implementation.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Oct 16, 2020

Size Change: +568 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-library/editor-rtl.css 9.02 kB +49 B (0%)
build/block-library/editor.css 9.02 kB +48 B (0%)
build/block-library/index.js 146 kB +18 B (0%)
build/block-library/style-rtl.css 7.84 kB -15 B (0%)
build/block-library/style.css 7.85 kB -13 B (0%)
build/core-data/index.js 12.5 kB +216 B (1%)
build/edit-site/index.js 22.4 kB +266 B (1%)
build/edit-widgets/index.js 26.4 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 130 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/theme-rtl.css 837 B 0 B
build/block-library/theme.css 838 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.2 kB 0 B
build/components/style.css 15.2 kB 0 B
build/compose/index.js 9.81 kB 0 B
build/data-controls/index.js 772 B 0 B
build/data/index.js 8.77 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.41 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-site/style-rtl.css 3.88 kB 0 B
build/edit-site/style.css 3.88 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 43.1 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.7 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.34 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.2 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@lukewalczak
Copy link
Member

lukewalczak commented Oct 19, 2020

Hello @dratwas! From the code perspective it looks properly, but I was testing the PR on Android and discovered one regression in slider spacing:

master PR

I've noticed also wrong behavior in android back button functionality, however I'm able to reproduce it on master as well and so prolly it should be handled on the separate PR - android hardware back button should move user back to the previous sheet instead of to the main
backbutton_bug

Copy link
Contributor

@mkevins mkevins left a comment

Choose a reason for hiding this comment

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

This looks good! I tested the flows in the description via Pixel 3a, and everything is working as expected. Nice work!

I left a minor suggestion for a variable rename, but it is not a blocker.

Edit
Oh, just saw Luke's comment (I guess my browser tab was not refreshed). Let's see about resolving the spacing regression before merging.

@mkevins mkevins self-requested a review October 20, 2020 00:36
@dratwas
Copy link
Contributor Author

dratwas commented Oct 20, 2020

Hey, @lukewalczak I fixed the spacing in the slider component. Could you please check it one more time? :)

Copy link
Member

@lukewalczak lukewalczak left a comment

Choose a reason for hiding this comment

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

Checked again spacing on Android and right now it looks properly 🎉 Left some minor comments - not a blocker.

@dratwas dratwas merged commit 80b295a into master Nov 3, 2020
@dratwas dratwas deleted the rnmobile/bottom-sheet-scrollable-screen branch November 3, 2020 13:12
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants