Page MenuHomePhabricator

[native] calculate snap points for keyserver selection bottomsheet
ClosedPublic

Authored by ginsu on Nov 9 2023, 12:27 AM.
Tags
None
Referenced Files
F3246877: D9795.diff
Fri, Nov 15, 2:15 AM
Unknown Object (File)
Wed, Nov 6, 7:17 PM
Unknown Object (File)
Sun, Oct 27, 11:49 PM
Unknown Object (File)
Sun, Oct 27, 11:49 PM
Unknown Object (File)
Sun, Oct 27, 11:49 PM
Unknown Object (File)
Sun, Oct 27, 11:49 PM
Unknown Object (File)
Sun, Oct 27, 11:48 PM
Unknown Object (File)
Sun, Oct 27, 11:43 PM
Subscribers

Details

Summary

In order to correctly get our bottomsheet to snap up to the correct height we need to measure the container of the content. When I was working on user profiles, I introduced a bottomsheet context that exposed a setState for the bottomsheet height. We can reuse that here.

One thing that I considered in my solution was that the height of the remove keyserver text content might slightly vary on different devices due to how many times the text will wrap since different phones could have different screen sizes. To overcome this, I introduced a onLayout callback that would measure the remove keyserver section of the bottomsheet and then use that height to calculate the height of the overall bottomsheet and pass that into the bottomsheet context.

Linear task: https://linear.app/comm/issue/ENG-5473/calculate-the-snap-point-based-on-the-content-height-of-the

Depends on D9794

Test Plan

Please see the demo video below

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu published this revision for review.Nov 9 2023, 12:37 AM
native/profile/keyserver-selection-bottom-sheet.react.js
64 ↗(On Diff #32989)

Could this constant be moved outside of this component?
Where do those values come from?

native/profile/keyserver-selection-bottom-sheet.react.js
64 ↗(On Diff #32989)

Could this constant be moved outside of this component?

Sure I can do that

Where do those values come from?

  • I got the 85 from checking the height of the keyserver details header in the inspector
  • the two 16s come from the paddingVertical in the keyserverDetailsContainer style
  • the 24 comes from the marginBottom in the keyserverDetailsContainer style
This revision is now accepted and ready to land.Nov 14 2023, 12:39 AM