feat: add support for headers and change the layout approach #199
Conversation
|
@Cyberax is attempting to deploy a commit to the Jovanni's projects Team on Vercel. A member of the Team first needs to authorize it. |
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
| }); | ||
| exports.TrueSheetHeader = void 0; | ||
| var _jsxRuntime = require("react/jsx-runtime"); | ||
| const TrueSheetHeader = props => { |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| "use strict"; | ||
|
|
||
| import { jsx as _jsx } from "react/jsx-runtime"; | ||
| export const TrueSheetHeader = props => { |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| Component?: TrueSheetProps['HeaderComponent'] | ||
| } | ||
|
|
||
| export const TrueSheetHeader = (props: TrueSheetHeaderProps) => { |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
|
|
||
| val data = Arguments.createMap() | ||
| data.putDouble("width", Utils.toDIP(rect.width().toFloat()).toDouble()) | ||
| data.putDouble("height", Utils.toDIP(rect.height().toFloat()).toDouble()) |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| val rect = sheetDialog.getVisibleContentDimensions() | ||
|
|
||
| val data = Arguments.createMap() | ||
| data.putDouble("width", Utils.toDIP(rect.width().toFloat()).toDouble()) |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
|
Code Climate has analyzed commit 7bbb440 and detected 13 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
This commit adds support for header components. However, the major improvement is the changed approach to doing the layout for the bottom sheet. Prior to this commit, there was an inherent conflict between the native iOS/Android layout systems and the React layout manager. In particular, this resulted in issues with the on-screen keyboard overlapping controls. To solve this, this commit introduces an intermediate view that sits between the native OS dialog and the hosted React view. This intermediate view handles the keyboard avoidance using OS-specific mechanism: keyboardLayoutGuide on iOS and rootView.padding on Android. We then communicate the visible area back to React that then lays out components as usual. So there is no need to have special handling for scrolling views or to do manual footer positioning.
This commit adds support for header components. However, the major improvement is the changed approach to doing the layout for the bottom sheet.
Prior to this commit, there was an inherent conflict between the native iOS/Android layout systems and the React layout manager. In particular, this resulted in issues with the on-screen keyboard overlapping controls.
To solve this, this commit introduces an intermediate view that sits between the native OS dialog and the hosted React view. This intermediate view handles the keyboard avoidance using OS-specific mechanism: keyboardLayoutGuide on iOS and rootView.padding on Android.
We then communicate the visible area back to React that then lays out components as usual. So there is no need to have special handling for scrolling views or to do manual footer positioning.