-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
⭐️ Impl:
ModalSheetView Native + JS Scaffolding
- Loading branch information
1 parent
f69e4cb
commit df59ff8
Showing
26 changed files
with
376 additions
and
136 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import type { OnDidSetViewIDEventPayload } from 'react-native-ios-utilities'; | ||
|
|
||
| export type ModalSheetContentEntry = { | ||
| didDetachFromOriginalParent: boolean; | ||
| }; | ||
|
|
||
| export type ModalSheetContentMap = | ||
| Record<OnDidSetViewIDEventPayload['viewID'], ModalSheetContentEntry>; | ||
|
|
||
| export const DEFAULT_SHEET_CONTENT_ENTRY: ModalSheetContentEntry = Object.freeze({ | ||
| didDetachFromOriginalParent: false, | ||
| }); |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import * as React from 'react'; | ||
| import { StyleSheet } from 'react-native'; | ||
|
|
||
| import type { ModalSheetViewProps, ModalSheetViewRef } from './ModalSheetViewTypes'; | ||
| import type { ModalSheetViewContentProps } from './ModalSheetViewContentTypes'; | ||
| import type { ModalSheetContentMap } from './ModalSheetContentMap'; | ||
|
|
||
| import { RNIModalSheetView, type RNIModalSheetViewRef } from '../../native_components/RNIModalSheetVIew'; | ||
|
|
||
|
|
||
| export const ModalSheetView = React.forwardRef< | ||
| ModalSheetViewRef, | ||
| ModalSheetViewProps | ||
| >((props, ref) => { | ||
|
|
||
| const nativeRef = React.useRef<RNIModalSheetViewRef | null>(); | ||
|
|
||
| const [ | ||
| modalSheetContentMap, | ||
| setModalSheetContentMap | ||
| ] = React.useState<ModalSheetContentMap>({}); | ||
|
|
||
| React.useImperativeHandle(ref, () => ({ | ||
| presentModal: async () => { | ||
| }, | ||
| })); | ||
|
|
||
| const shouldEnableDebugBackgroundColors = | ||
| props.shouldEnableDebugBackgroundColors ?? false; | ||
|
|
||
| const children = React.Children.map(props.children, (child) => { | ||
| return React.cloneElement( | ||
| child as React.ReactElement<ModalSheetViewContentProps>, | ||
| { | ||
| modalSheetContentMap, | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
| return ( | ||
| <RNIModalSheetView | ||
| ref={ref => nativeRef.current = ref} | ||
| style={styles.nativeModalSheet} | ||
| > | ||
| {children} | ||
| </RNIModalSheetView> | ||
| ); | ||
| }); | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| nativeModalSheet: { | ||
| position: 'absolute', | ||
| pointerEvents: 'none', | ||
| opacity: 0, | ||
| }, | ||
| }); |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import * as React from 'react'; | ||
| import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native'; | ||
|
|
||
| import { RNIWrapperView, type StateViewID } from 'react-native-ios-utilities'; | ||
|
|
||
| import { DEFAULT_SHEET_CONTENT_ENTRY } from './ModalSheetContentMap'; | ||
| import type { ModalSheetViewContentProps } from './ModalSheetViewContentTypes'; | ||
|
|
||
| import { IS_USING_NEW_ARCH } from '../../constants/LibEnv'; | ||
|
|
||
|
|
||
| export function ModalSheetViewContent( | ||
| props: React.PropsWithChildren<ModalSheetViewContentProps> | ||
| ) { | ||
| const [viewID, setViewID] = React.useState<StateViewID>(); | ||
|
|
||
| const wrapperStyle: StyleProp<ViewStyle> = [ | ||
| props.shouldEnableDebugBackgroundColors && styles.wrapperViewDebug, | ||
| props.contentContainerStyle, | ||
| ]; | ||
|
|
||
| const detachedSubviewEntry = | ||
| (viewID != null ? props.modalSheetContentMap?.[viewID] : undefined ) | ||
| ?? DEFAULT_SHEET_CONTENT_ENTRY; | ||
|
|
||
| const didDetach = | ||
| (props.isParentDetached ?? false) | ||
| || detachedSubviewEntry.didDetachFromOriginalParent; | ||
|
|
||
| return ( | ||
| <RNIWrapperView | ||
| {...props} | ||
| style={[ | ||
| ...(IS_USING_NEW_ARCH | ||
| ? wrapperStyle | ||
| : [] | ||
| ), | ||
| (didDetach | ||
| ? styles.wrapperViewDetached | ||
| : styles.wrapperViewAttached | ||
| ), | ||
| props.style, | ||
| ]} | ||
| onDidSetViewID={(event) => { | ||
| props.onDidSetViewID?.(event); | ||
| setViewID(event.nativeEvent.viewID); | ||
|
|
||
| props.onDidSetViewID?.(event); | ||
| event.stopPropagation(); | ||
| }} | ||
| > | ||
| {IS_USING_NEW_ARCH ? ( | ||
| props.children | ||
| ) : ( | ||
| <View style={[ | ||
| styles.innerWrapperContainerForPaper, | ||
| ...wrapperStyle, | ||
| ]}> | ||
| {props.children} | ||
| </View> | ||
| )} | ||
| </RNIWrapperView> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| wrapperViewAttached: { | ||
| }, | ||
| wrapperViewDetached: { | ||
| }, | ||
| wrapperViewDebug: { | ||
| backgroundColor: 'rgba(255,0,255,0.3)', | ||
| }, | ||
| innerWrapperContainerForPaper: { | ||
| flex: 1, | ||
| }, | ||
| }); |
Oops, something went wrong.