From df59ff897ac80446bee1a6e80f5760f3acaced07 Mon Sep 17 00:00:00 2001 From: Dominic Go Date: Thu, 26 Sep 2024 05:39:20 +0800 Subject: [PATCH] =?UTF-8?q?=E2=AD=90=EF=B8=8F=20Impl:=20`ModalSheetView`?= =?UTF-8?q?=20Native=20+=20JS=20Scaffolding?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IosModalExample.xcodeproj/project.pbxproj | 4 +- example/ios/IosModalExample/Info.plist | 2 +- example/ios/IosModalExampleTests/Info.plist | 2 +- .../RNIModalSheetView.h} | 4 +- .../RNIModalSheetView.mm} | 20 ++--- .../RNIModalSheetViewComponentDescriptor.h} | 10 ++- .../RNIModalSheetViewDelegate.swift} | 12 +-- .../RNIModalSheetViewManager.mm} | 12 +-- .../RNIModalSheetViewShadowNode.h} | 8 +- .../ModalSheetView/ModalSheetContentMap.ts | 12 +++ .../ModalSheetView/ModalSheetView.tsx | 56 ++++++++++++++ .../ModalSheetView/ModalSheetViewContent.tsx | 77 +++++++++++++++++++ .../ModalSheetViewContentTypes.tsx | 22 ++++++ .../ModalSheetView/ModalSheetViewTypes.tsx | 22 ++++++ src/constants/LibEnv.ts | 3 + .../RNIModalSheetNativeView.ts | 22 ++++++ .../RNIModalSheetVIew/RNIModalSheetView.tsx | 67 ++++++++++++++++ .../RNIModalSheetViewEvents.ts | 7 ++ .../RNIModalSheetViewNativeComponent.ts | 18 +++++ .../RNIModalSheetViewTypes.ts | 28 +++++++ .../RNIModalSheetVIew/index.ts | 4 + .../RNIModalView/RNIModalNativeView.ts | 14 ---- .../RNIModalView/RNIModalView.tsx | 41 ---------- .../RNIModalViewNativeComponent.ts | 10 --- .../RNIModalView/RNIModalViewTypes.ts | 33 -------- src/native_components/RNIModalView/index.ts | 2 - 26 files changed, 376 insertions(+), 136 deletions(-) rename ios/{RNIModalView/RNIModalView.h => RNIModalSheetView/RNIModalSheetView.h} (85%) rename ios/{RNIModalView/RNIModalView.mm => RNIModalSheetView/RNIModalSheetView.mm} (79%) rename ios/{RNIModalView/RNIModalViewComponentDescriptor.h => RNIModalSheetView/RNIModalSheetViewComponentDescriptor.h} (64%) rename ios/{RNIModalView/RNIModalViewDelegate.swift => RNIModalSheetView/RNIModalSheetViewDelegate.swift} (92%) rename ios/{RNIModalView/RNIModalViewManager.mm => RNIModalSheetView/RNIModalSheetViewManager.mm} (55%) rename ios/{RNIModalView/RNIModalViewShadowNode.h => RNIModalSheetView/RNIModalSheetViewShadowNode.h} (79%) create mode 100644 src/components/ModalSheetView/ModalSheetContentMap.ts create mode 100644 src/components/ModalSheetView/ModalSheetView.tsx create mode 100644 src/components/ModalSheetView/ModalSheetViewContent.tsx create mode 100644 src/components/ModalSheetView/ModalSheetViewContentTypes.tsx create mode 100644 src/components/ModalSheetView/ModalSheetViewTypes.tsx create mode 100644 src/constants/LibEnv.ts create mode 100644 src/native_components/RNIModalSheetVIew/RNIModalSheetNativeView.ts create mode 100644 src/native_components/RNIModalSheetVIew/RNIModalSheetView.tsx create mode 100644 src/native_components/RNIModalSheetVIew/RNIModalSheetViewEvents.ts create mode 100644 src/native_components/RNIModalSheetVIew/RNIModalSheetViewNativeComponent.ts create mode 100644 src/native_components/RNIModalSheetVIew/RNIModalSheetViewTypes.ts create mode 100644 src/native_components/RNIModalSheetVIew/index.ts delete mode 100644 src/native_components/RNIModalView/RNIModalNativeView.ts delete mode 100644 src/native_components/RNIModalView/RNIModalView.tsx delete mode 100644 src/native_components/RNIModalView/RNIModalViewNativeComponent.ts delete mode 100644 src/native_components/RNIModalView/RNIModalViewTypes.ts delete mode 100644 src/native_components/RNIModalView/index.ts diff --git a/example/ios/IosModalExample.xcodeproj/project.pbxproj b/example/ios/IosModalExample.xcodeproj/project.pbxproj index 31cff690..c4cc5e2c 100644 --- a/example/ios/IosModalExample.xcodeproj/project.pbxproj +++ b/example/ios/IosModalExample.xcodeproj/project.pbxproj @@ -471,7 +471,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; - CURRENT_PROJECT_VERSION = 6; + CURRENT_PROJECT_VERSION = 8; DEVELOPMENT_TEAM = ZC7A6XV8GR; ENABLE_BITCODE = NO; INFOPLIST_FILE = IosModalExample/Info.plist; @@ -499,7 +499,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; - CURRENT_PROJECT_VERSION = 6; + CURRENT_PROJECT_VERSION = 8; DEVELOPMENT_TEAM = ZC7A6XV8GR; INFOPLIST_FILE = IosModalExample/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( diff --git a/example/ios/IosModalExample/Info.plist b/example/ios/IosModalExample/Info.plist index b2049db3..5b323889 100644 --- a/example/ios/IosModalExample/Info.plist +++ b/example/ios/IosModalExample/Info.plist @@ -21,7 +21,7 @@ CFBundleSignature ???? CFBundleVersion - 6 + 8 LSRequiresIPhoneOS NSAppTransportSecurity diff --git a/example/ios/IosModalExampleTests/Info.plist b/example/ios/IosModalExampleTests/Info.plist index fca01328..5fdeff4e 100644 --- a/example/ios/IosModalExampleTests/Info.plist +++ b/example/ios/IosModalExampleTests/Info.plist @@ -19,6 +19,6 @@ CFBundleSignature ???? CFBundleVersion - 6 + 8 diff --git a/ios/RNIModalView/RNIModalView.h b/ios/RNIModalSheetView/RNIModalSheetView.h similarity index 85% rename from ios/RNIModalView/RNIModalView.h rename to ios/RNIModalSheetView/RNIModalSheetView.h index b557e0ed..898504d0 100644 --- a/ios/RNIModalView/RNIModalView.h +++ b/ios/RNIModalSheetView/RNIModalSheetView.h @@ -1,5 +1,5 @@ // -// RNIModalView.h +// RNIModalSheetView.h // react-native-ios-modal // // Created by Dominic Go on 6/6/24. @@ -22,6 +22,6 @@ namespace react = facebook::react; #endif -@interface RNIModalView : RNIBaseView +@interface RNIModalSheetView : RNIBaseView @end diff --git a/ios/RNIModalView/RNIModalView.mm b/ios/RNIModalSheetView/RNIModalSheetView.mm similarity index 79% rename from ios/RNIModalView/RNIModalView.mm rename to ios/RNIModalSheetView/RNIModalSheetView.mm index 0b1e0a95..d95af2e9 100644 --- a/ios/RNIModalView/RNIModalView.mm +++ b/ios/RNIModalSheetView/RNIModalSheetView.mm @@ -1,11 +1,11 @@ // -// RNIModalView.mm +// RNIModalSheetView.mm // react-native-ios-modal // // Created by Dominic Go on 6/6/24. // -#import "RNIModalView.h" +#import "RNIModalSheetView.h" #import "react-native-ios-modal/Swift.h" #import @@ -17,7 +17,7 @@ #import #if RCT_NEW_ARCH_ENABLED -#include "RNIModalViewComponentDescriptor.h" +#include "RNIModalSheetViewComponentDescriptor.h" #include #include @@ -44,10 +44,10 @@ #endif -@interface RNIModalView () < +@interface RNIModalSheetView () < RNIContentViewParentDelegate, #ifdef RCT_NEW_ARCH_ENABLED - RCTRNIModalViewViewProtocol + RCTRNIModalSheetViewViewProtocol #else RCTInvalidating #endif @@ -56,7 +56,7 @@ @interface RNIModalView () < } @end -@implementation RNIModalView { +@implementation RNIModalSheetView { } // MARK: - Init @@ -71,7 +71,7 @@ - (void)initCommon { + (Class)viewDelegateClass { - return [RNIModalViewDelegate class]; + return [RNIModalSheetViewDelegate class]; } // MARK: - Fabric @@ -80,12 +80,12 @@ + (Class)viewDelegateClass #if RCT_NEW_ARCH_ENABLED + (ComponentDescriptorProvider)componentDescriptorProvider { - return concreteComponentDescriptorProvider(); + return concreteComponentDescriptorProvider(); } -Class RNIModalViewCls(void) +Class RNIModalSheetViewCls(void) { - return RNIModalView.class; + return RNIModalSheetView.class; } #else diff --git a/ios/RNIModalView/RNIModalViewComponentDescriptor.h b/ios/RNIModalSheetView/RNIModalSheetViewComponentDescriptor.h similarity index 64% rename from ios/RNIModalView/RNIModalViewComponentDescriptor.h rename to ios/RNIModalSheetView/RNIModalSheetViewComponentDescriptor.h index 8833b49d..45a01c8e 100644 --- a/ios/RNIModalView/RNIModalViewComponentDescriptor.h +++ b/ios/RNIModalSheetView/RNIModalSheetViewComponentDescriptor.h @@ -1,5 +1,5 @@ // -// RNIModalViewComponentDescriptor.h +// RNIModalSheetViewComponentDescriptor.h // react-native-ios-modal // // Created by Dominic Go on 6/6/24. @@ -8,7 +8,7 @@ #if __cplusplus #pragma once -#include "RNIModalViewShadowNode.h" +#include "RNIModalSheetViewShadowNode.h" #include "RNIBaseViewComponentDescriptor.h" #include @@ -17,8 +17,10 @@ namespace facebook::react { -class RNIModalViewComponentDescriptor final - : public RNIBaseViewComponentDescriptor { +class RNIModalSheetViewComponentDescriptor final : public RNIBaseViewComponentDescriptor< + RNIModalSheetViewShadowNode, + RNIModalSheetViewComponentName +> { public: using RNIBaseViewComponentDescriptor::RNIBaseViewComponentDescriptor; diff --git a/ios/RNIModalView/RNIModalViewDelegate.swift b/ios/RNIModalSheetView/RNIModalSheetViewDelegate.swift similarity index 92% rename from ios/RNIModalView/RNIModalViewDelegate.swift rename to ios/RNIModalSheetView/RNIModalSheetViewDelegate.swift index 68dc2970..30d08aaf 100644 --- a/ios/RNIModalView/RNIModalViewDelegate.swift +++ b/ios/RNIModalSheetView/RNIModalSheetViewDelegate.swift @@ -1,5 +1,5 @@ // -// RNIModalViewDelegate.swift +// RNIModalSheetViewDelegate.swift // react-native-ios-modal // // Created by Dominic Go on 6/6/24. @@ -9,10 +9,10 @@ import UIKit import react_native_ios_utilities import DGSwiftUtilities -@objc(RNIModalViewDelegate) -public final class RNIModalViewDelegate: UIView, RNIContentView { +@objc(RNIModalSheetViewDelegate) +public final class RNIModalSheetViewDelegate: UIView, RNIContentView { - public static var propKeyPathMap: Dictionary> { + public static var propKeyPathMap: Dictionary> { return [:]; }; @@ -81,9 +81,9 @@ public final class RNIModalViewDelegate: UIView, RNIContentView { }; }; -extension RNIModalViewDelegate: RNIContentViewDelegate { +extension RNIModalSheetViewDelegate: RNIContentViewDelegate { - public typealias KeyPathRoot = RNIModalViewDelegate; + public typealias KeyPathRoot = RNIModalSheetViewDelegate; // MARK: Paper + Fabric // -------------------- diff --git a/ios/RNIModalView/RNIModalViewManager.mm b/ios/RNIModalSheetView/RNIModalSheetViewManager.mm similarity index 55% rename from ios/RNIModalView/RNIModalViewManager.mm rename to ios/RNIModalSheetView/RNIModalSheetViewManager.mm index 9ec41266..af896820 100644 --- a/ios/RNIModalView/RNIModalViewManager.mm +++ b/ios/RNIModalSheetView/RNIModalSheetViewManager.mm @@ -1,11 +1,11 @@ // -// RNIModalViewManager.m +// RNIModalSheetViewManager.m // react-native-ios-modal // // Created by Dominic Go on 6/6/24. // -#import "RNIModalView.h" +#import "RNIModalSheetView.h" #import #import "react-native-ios-utilities/RNIBaseViewUtils.h" @@ -15,17 +15,17 @@ #import -@interface RNIModalViewManager : RCTViewManager +@interface RNIModalSheetViewManager : RCTViewManager @end -@implementation RNIModalViewManager +@implementation RNIModalSheetViewManager -RCT_EXPORT_MODULE(RNIModalView) +RCT_EXPORT_MODULE(RNIModalSheetView) #ifndef RCT_NEW_ARCH_ENABLED - (UIView *)view { - return [[RNIModalView new] initWithBridge:self.bridge]; + return [[RNIModalSheetView new] initWithBridge:self.bridge]; } #endif diff --git a/ios/RNIModalView/RNIModalViewShadowNode.h b/ios/RNIModalSheetView/RNIModalSheetViewShadowNode.h similarity index 79% rename from ios/RNIModalView/RNIModalViewShadowNode.h rename to ios/RNIModalSheetView/RNIModalSheetViewShadowNode.h index 904d617f..25abcd07 100644 --- a/ios/RNIModalView/RNIModalViewShadowNode.h +++ b/ios/RNIModalSheetView/RNIModalSheetViewShadowNode.h @@ -1,5 +1,5 @@ // -// RNIModalViewShadowNode.h +// RNIModalSheetViewShadowNode.h // react-native-ios-modal // // Created by Dominic Go on 6/6/24. @@ -21,10 +21,10 @@ namespace facebook::react { -JSI_EXPORT extern const char RNIModalViewComponentName[] = "RNIModalView"; +JSI_EXPORT extern const char RNIModalSheetViewComponentName[] = "RNIModalSheetView"; -class JSI_EXPORT RNIModalViewShadowNode final : public RNIBaseViewShadowNode< - RNIModalViewComponentName, +class JSI_EXPORT RNIModalSheetViewShadowNode final : public RNIBaseViewShadowNode< + RNIModalSheetViewComponentName, RNIBaseViewProps, RNIBaseViewEventEmitter > { diff --git a/src/components/ModalSheetView/ModalSheetContentMap.ts b/src/components/ModalSheetView/ModalSheetContentMap.ts new file mode 100644 index 00000000..ae809037 --- /dev/null +++ b/src/components/ModalSheetView/ModalSheetContentMap.ts @@ -0,0 +1,12 @@ +import type { OnDidSetViewIDEventPayload } from 'react-native-ios-utilities'; + +export type ModalSheetContentEntry = { + didDetachFromOriginalParent: boolean; +}; + +export type ModalSheetContentMap = + Record; + +export const DEFAULT_SHEET_CONTENT_ENTRY: ModalSheetContentEntry = Object.freeze({ + didDetachFromOriginalParent: false, +}); \ No newline at end of file diff --git a/src/components/ModalSheetView/ModalSheetView.tsx b/src/components/ModalSheetView/ModalSheetView.tsx new file mode 100644 index 00000000..6f013ddf --- /dev/null +++ b/src/components/ModalSheetView/ModalSheetView.tsx @@ -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(); + + const [ + modalSheetContentMap, + setModalSheetContentMap + ] = React.useState({}); + + 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, + { + modalSheetContentMap, + } + ); + }); + + return ( + nativeRef.current = ref} + style={styles.nativeModalSheet} + > + {children} + + ); +}); + +const styles = StyleSheet.create({ + nativeModalSheet: { + position: 'absolute', + pointerEvents: 'none', + opacity: 0, + }, +}); \ No newline at end of file diff --git a/src/components/ModalSheetView/ModalSheetViewContent.tsx b/src/components/ModalSheetView/ModalSheetViewContent.tsx new file mode 100644 index 00000000..eda56292 --- /dev/null +++ b/src/components/ModalSheetView/ModalSheetViewContent.tsx @@ -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 +) { + const [viewID, setViewID] = React.useState(); + + const wrapperStyle: StyleProp = [ + 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 ( + { + props.onDidSetViewID?.(event); + setViewID(event.nativeEvent.viewID); + + props.onDidSetViewID?.(event); + event.stopPropagation(); + }} + > + {IS_USING_NEW_ARCH ? ( + props.children + ) : ( + + {props.children} + + )} + + ); +}; + +const styles = StyleSheet.create({ + wrapperViewAttached: { + }, + wrapperViewDetached: { + }, + wrapperViewDebug: { + backgroundColor: 'rgba(255,0,255,0.3)', + }, + innerWrapperContainerForPaper: { + flex: 1, + }, +}); diff --git a/src/components/ModalSheetView/ModalSheetViewContentTypes.tsx b/src/components/ModalSheetView/ModalSheetViewContentTypes.tsx new file mode 100644 index 00000000..1dbf4d5f --- /dev/null +++ b/src/components/ModalSheetView/ModalSheetViewContentTypes.tsx @@ -0,0 +1,22 @@ +import type { ViewStyle } from 'react-native'; + +import type { RNIWrapperViewProps } from 'react-native-ios-utilities'; + +import type { RNIModalSheetViewProps } from "../../native_components/RNIModalSheetVIew"; +import type { ModalSheetContentMap } from "./ModalSheetContentMap"; + + +export type ModalSheetViewContentInheritedProps = Pick; + +export type ModalSheetViewContentBaseProps = { + contentContainerStyle?: ViewStyle; + isParentDetached?: boolean; + modalSheetContentMap?: ModalSheetContentMap; +}; + +export type ModalSheetViewContentProps = + RNIWrapperViewProps + & ModalSheetViewContentInheritedProps + & ModalSheetViewContentBaseProps; \ No newline at end of file diff --git a/src/components/ModalSheetView/ModalSheetViewTypes.tsx b/src/components/ModalSheetView/ModalSheetViewTypes.tsx new file mode 100644 index 00000000..88c04adc --- /dev/null +++ b/src/components/ModalSheetView/ModalSheetViewTypes.tsx @@ -0,0 +1,22 @@ +import type { PropsWithChildren } from "react"; +import type { ViewProps } from "react-native"; + +import type { RNIModalSheetViewProps } from "../../native_components/RNIModalSheetVIew"; + + +export type ModalSheetViewRef = { + presentModal: () => Promise; +}; + +export type ModalSheetViewInheritedProps = Pick; + +export type ModalSheetViewBaseProps = {}; + +export type ModalSheetViewProps = PropsWithChildren< + ModalSheetViewInheritedProps + & ModalSheetViewBaseProps + & ViewProps +>; \ No newline at end of file diff --git a/src/constants/LibEnv.ts b/src/constants/LibEnv.ts new file mode 100644 index 00000000..5968d732 --- /dev/null +++ b/src/constants/LibEnv.ts @@ -0,0 +1,3 @@ + +export const IS_USING_NEW_ARCH = + (global as any)?.nativeFabricUIManager != null; \ No newline at end of file diff --git a/src/native_components/RNIModalSheetVIew/RNIModalSheetNativeView.ts b/src/native_components/RNIModalSheetVIew/RNIModalSheetNativeView.ts new file mode 100644 index 00000000..8c66c62f --- /dev/null +++ b/src/native_components/RNIModalSheetVIew/RNIModalSheetNativeView.ts @@ -0,0 +1,22 @@ +import type { HostComponent, ViewProps } from 'react-native'; +import type { SharedViewEvents, RemapObject, NativeComponentBaseProps } from 'react-native-ios-utilities'; + +import { + default as RNIModalSheetViewNativeComponent, + type NativeProps as RNIModalSheetViewNativeComponentProps, +} from './RNIModalSheetViewNativeComponent'; + +type RNIModalSheetViewNativeComponentBaseProps = + NativeComponentBaseProps; + +export type RNIModalSheetNativeViewBaseProps = RemapObject; + +export type RNIModalSheetNativeViewProps = + SharedViewEvents + & ViewProps + & RNIModalSheetNativeViewBaseProps; + +export const RNIModalSheetNativeView = + RNIModalSheetViewNativeComponent as unknown as HostComponent; diff --git a/src/native_components/RNIModalSheetVIew/RNIModalSheetView.tsx b/src/native_components/RNIModalSheetVIew/RNIModalSheetView.tsx new file mode 100644 index 00000000..8c7f982f --- /dev/null +++ b/src/native_components/RNIModalSheetVIew/RNIModalSheetView.tsx @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { StyleSheet } from 'react-native'; +import { Helpers, type StateViewID, type StateReactTag } from 'react-native-ios-utilities'; + +import { RNIModalSheetNativeView } from './RNIModalSheetNativeView'; +import type { RNIModalSheetViewProps, RNIModalSheetViewRef, } from './RNIModalSheetViewTypes'; + + +export const RNIModalSheetView = React.forwardRef< + RNIModalSheetViewRef, + RNIModalSheetViewProps +>((props, ref) => { + const [viewID, setViewID] = React.useState(); + const [reactTag, setReactTag] = React.useState(); + + React.useImperativeHandle(ref, () => ({ + getReactTag: () => { + return reactTag; + }, + getViewID: () => { + return viewID; + }, + presentModal: async () => { + if(viewID == null) return; + const module = Helpers.getRNIUtilitiesModule(); + + await module.viewCommandRequest( + /* viewID : */ viewID, + /* commandName: */ 'presentModal', + /* commandArgs: */ {} + ); + }, + })); + + const reactChildrenCount = React.Children.count(props.children); + + return ( + { + setViewID(event.nativeEvent.viewID); + setReactTag(event.nativeEvent.reactTag); + + props.onDidSetViewID?.(event); + event.stopPropagation(); + }} + > + {props.children} + + ); +}); + +const styles = StyleSheet.create({ + detachedView: { + position: 'absolute', + pointerEvents: 'none', + opacity: 0, + }, + detachedViewDebug: { + backgroundColor: 'rgba(255,0,0,0.3)', + }, +}); \ No newline at end of file diff --git a/src/native_components/RNIModalSheetVIew/RNIModalSheetViewEvents.ts b/src/native_components/RNIModalSheetVIew/RNIModalSheetViewEvents.ts new file mode 100644 index 00000000..15f4b446 --- /dev/null +++ b/src/native_components/RNIModalSheetVIew/RNIModalSheetViewEvents.ts @@ -0,0 +1,7 @@ + +import type { ViewProps } from 'react-native'; +import type { OnDidSetViewIDEventPayload } from 'react-native-ios-utilities'; + +import type { BubblingEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; + + diff --git a/src/native_components/RNIModalSheetVIew/RNIModalSheetViewNativeComponent.ts b/src/native_components/RNIModalSheetVIew/RNIModalSheetViewNativeComponent.ts new file mode 100644 index 00000000..799714f9 --- /dev/null +++ b/src/native_components/RNIModalSheetVIew/RNIModalSheetViewNativeComponent.ts @@ -0,0 +1,18 @@ +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { BubblingEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes'; +import type { HostComponent, ViewProps } from 'react-native'; + +// stubs +export interface NativeProps extends ViewProps { + // common/shared events + onDidSetViewID?: BubblingEventHandler<{}>; + + // value prop stubs + reactChildrenCount: Int32; +}; + +// stubs +export default codegenNativeComponent('RNIModalSheetView', { + excludedPlatforms: ['android'], + interfaceOnly: true, +}) as HostComponent; \ No newline at end of file diff --git a/src/native_components/RNIModalSheetVIew/RNIModalSheetViewTypes.ts b/src/native_components/RNIModalSheetVIew/RNIModalSheetViewTypes.ts new file mode 100644 index 00000000..3f04edbd --- /dev/null +++ b/src/native_components/RNIModalSheetVIew/RNIModalSheetViewTypes.ts @@ -0,0 +1,28 @@ +import type { PropsWithChildren } from "react"; +import type { ViewProps } from "react-native"; +import type { StateReactTag, StateViewID } from "react-native-ios-utilities"; + +import type { RNIModalSheetNativeViewProps } from "./RNIModalSheetNativeView"; + + +export type RNIModalSheetViewRef = { + getViewID: () => StateViewID; + getReactTag: () => StateReactTag; + presentModal: () => Promise; +}; + +export type RNIModalSheetViewInheritedOptionalProps = Partial>; + +export type RNIModalSheetViewBaseProps = { + shouldEnableDebugBackgroundColors?: boolean; + contentContainerStyle?: ViewProps['style']; +}; + +export type RNIModalSheetViewProps = PropsWithChildren< + RNIModalSheetViewInheritedOptionalProps + & RNIModalSheetViewBaseProps + & ViewProps +>; \ No newline at end of file diff --git a/src/native_components/RNIModalSheetVIew/index.ts b/src/native_components/RNIModalSheetVIew/index.ts new file mode 100644 index 00000000..547a623d --- /dev/null +++ b/src/native_components/RNIModalSheetVIew/index.ts @@ -0,0 +1,4 @@ +export * from './RNIModalSheetView'; + +export type * from './RNIModalSheetViewEvents'; +export type * from './RNIModalSheetViewTypes'; \ No newline at end of file diff --git a/src/native_components/RNIModalView/RNIModalNativeView.ts b/src/native_components/RNIModalView/RNIModalNativeView.ts deleted file mode 100644 index 4172326f..00000000 --- a/src/native_components/RNIModalView/RNIModalNativeView.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { HostComponent, ViewProps } from 'react-native'; - -import { default as RNIModalViewNativeComponent } from './RNIModalViewNativeComponent'; -import type { SharedViewEvents } from 'react-native-ios-utilities'; - -export interface RNIModalNativeViewBaseProps extends ViewProps { -}; - -export type RNIModalNativeViewProps = - SharedViewEvents - & RNIModalNativeViewBaseProps; - -export const RNIModalNativeView = - RNIModalViewNativeComponent as unknown as HostComponent; diff --git a/src/native_components/RNIModalView/RNIModalView.tsx b/src/native_components/RNIModalView/RNIModalView.tsx deleted file mode 100644 index 547efff2..00000000 --- a/src/native_components/RNIModalView/RNIModalView.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; - -import { RNIModalNativeView } from './RNIModalNativeView'; - -import type { - RNIContextMenuViewProps, - RNIModalViewRef, - StateReactTag, - StateViewID -} from './RNIModalViewTypes'; - -export const RNIModalView = React.forwardRef< - RNIModalViewRef, - RNIContextMenuViewProps ->((props, ref) => { - - const [viewID, setViewID] = React.useState(); - const [reactTag, setReactTag] = React.useState(); - - React.useImperativeHandle(ref, () => ({ - getReactTag: () => { - return reactTag; - }, - getViewID: () => { - return viewID; - }, - })); - - return ( - { - setViewID(event.nativeEvent.viewID); - setReactTag(event.nativeEvent.reactTag); - props.onDidSetViewID?.(event); - }} - > - {props.children} - - ); -}); \ No newline at end of file diff --git a/src/native_components/RNIModalView/RNIModalViewNativeComponent.ts b/src/native_components/RNIModalView/RNIModalViewNativeComponent.ts deleted file mode 100644 index ad522901..00000000 --- a/src/native_components/RNIModalView/RNIModalViewNativeComponent.ts +++ /dev/null @@ -1,10 +0,0 @@ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent, ViewProps } from 'react-native'; - -interface NativeProps extends ViewProps { -}; - -export default codegenNativeComponent('RNIModalView', { - excludedPlatforms: ['android'], - interfaceOnly: true, -}) as HostComponent; diff --git a/src/native_components/RNIModalView/RNIModalViewTypes.ts b/src/native_components/RNIModalView/RNIModalViewTypes.ts deleted file mode 100644 index 574a23a6..00000000 --- a/src/native_components/RNIModalView/RNIModalViewTypes.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { PropsWithChildren } from "react"; -import type { ViewProps } from "react-native"; - -import type { OnDidSetViewIDEventPayload } from "react-native-ios-utilities"; -import type { RNIModalNativeViewProps } from "./RNIModalNativeView"; - -export type StateViewID = OnDidSetViewIDEventPayload['viewID'] | undefined; -export type StateReactTag = OnDidSetViewIDEventPayload['reactTag'] | undefined; - -export type RNIModalViewRef = { - getViewID: () => StateViewID; - getReactTag: () => StateReactTag; -}; - -export type RNIModalViewInheritedOptionalProps = Partial>; - -export type RNIModalViewInheritedRequiredProps = {}; - -export type RNIModalViewInheritedProps = - RNIModalViewInheritedOptionalProps - & RNIModalViewInheritedRequiredProps; - -export type RNIModalViewBaseProps = { - // TBA -}; - -export type RNIContextMenuViewProps = PropsWithChildren< - RNIModalViewInheritedProps - & RNIModalViewBaseProps - & ViewProps ->; \ No newline at end of file diff --git a/src/native_components/RNIModalView/index.ts b/src/native_components/RNIModalView/index.ts deleted file mode 100644 index 01502d3f..00000000 --- a/src/native_components/RNIModalView/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './RNIModalView'; -export * from './RNIModalViewTypes'; \ No newline at end of file