feat: change folder structures

packages/example-ui/src/disclosure/disclosure-example.tsx

@@ -1,16 +1,15 @@
 import {
-  CloseButton,
   Disclosure,
   DisclosureButton,
   DisclosurePanel,
 } from "headlessui-react-native";
 import React from "react";
-import { View, Text, ViewStyle, TextStyle } from "react-native";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
 
 export function DisclosureExample() {
   return (
     <View>
-      <Disclosure style={disclosureStyle}>
+      <Disclosure style={disclosureStyle} as="View">
         <DisclosureButton style={disclosureButtonStyle}>
           {({ open }) => (
             <>
@@ -27,7 +26,7 @@ export function DisclosureExample() {
           </Text>
         </DisclosurePanel>
       </Disclosure>
-      <Disclosure style={disclosureStyle}>
+      <Disclosure style={disclosureStyle} as="View">
         <DisclosureButton style={disclosureButtonStyle}>
           {({ open }) => (
             <>

packages/headlessui-react-native/src/components/close-button.tsx

@@ -0,0 +1,22 @@
+import {
+  PropsType,
+  ReactNativeComponentProps,
+  ReactNativeComponentType,
+} from "../constants";
+import { useUIContext } from "../hooks";
+import { createReactNativeElement } from "../utils";
+
+export const CloseButton = <T extends ReactNativeComponentType = "Pressable">({
+  as = "Pressable" as T,
+  children,
+  ...props
+}: ReactNativeComponentProps<T>) => {
+  const { onClose } = useUIContext();
+  const Component = createReactNativeElement(
+    as,
+    { ...(props as PropsType<T>), onPress: onClose },
+    children
+  );
+
+  return Component;
+};

packages/headlessui-react-native/src/disclosure.tsx → packages/headlessui-react-native/src/components/disclosure.tsx

@@ -1,8 +1,15 @@
 import React, { useState } from "react";
-import { View, ViewProps, PressableProps, Pressable } from "react-native";
-import { UIContext, useUIContext } from "./useUIContext";
-import { CallableChildren } from "./callableChildren";
-import { RenderPropsCallableComponent } from "./types";
+import { Pressable, PressableProps, Text, View, ViewProps } from "react-native";
+import {
+  PropsType,
+  ReactNativeComponentProps,
+  ReactNativeComponentType,
+  RenderPropsCallableComponent,
+} from "../constants";
+import { UIContext, useUIContext } from "../hooks";
+import { createReactNativeElement } from "../utils";
+import { CallableChildren } from "./callable-children";
+import { Menu } from "./dropdown-menu";
 
 export type DisclosureProps = {
   defaultOpen?: boolean;
@@ -40,6 +47,9 @@ export const Disclosure = ({
           children={children}
           props={{ close: onClose, open: !!isOpen }}
         />
+        <Menu as="Pressable">
+          <Text>dsasda</Text>
+        </Menu>
       </View>
     </UIContext.Provider>
   );
@@ -96,3 +106,28 @@ export const DisclosurePanel = ({
     </View>
   );
 };
+
+export const ExmapleDisclosurePanel = <
+  T extends ReactNativeComponentType = "View"
+>({
+  as = "View" as T,
+  children,
+  ...props
+}: ReactNativeComponentProps<T>) => {
+  const { onClose, open } = useUIContext();
+
+  if (!open) return null;
+
+  const Component = createReactNativeElement(
+    as,
+    { ...(props as PropsType<T>), onPress: onClose },
+    <CallableChildren
+      children={children}
+      props={{ close: onClose, open: !!open }}
+    />
+  );
+
+  return Component;
+};
+
+<ExmapleDisclosurePanel>{}</ExmapleDisclosurePanel>;

packages/headlessui-react-native/src/components/dropdown-menu.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import {
+  PropsType,
+  ReactNativeComponentProps,
+  ReactNativeComponentType,
+} from "../constants";
+import { createReactNativeElement } from "../utils";
+
+export const MenuButton = <T extends ReactNativeComponentType>({
+  as = "Button" as T,
+  children,
+  ...rest
+}: {
+  as?: T;
+  children?: ReactNode;
+} & PropsType<T>) => {
+  // The rest props need to be typed correctly based on the component type
+  const props = rest as PropsType<T>;
+
+  const Component = createReactNativeElement(as, props, children);
+  return Component;
+};
+
+export const Menu = <T extends ReactNativeComponentType = "View">({
+  as = "View" as T,
+  children,
+  ...rest
+}: ReactNativeComponentProps<T>) => {
+  // The rest props need to be typed correctly based on the component type
+  const props = rest as PropsType<T>;
+
+  const Component = createReactNativeElement(as, props, children);
+  return Component;
+};

packages/headlessui-react-native/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./close-button";
+export * from "./disclosure";
+export * from "./modal";

packages/headlessui-react-native/src/modal.tsx → packages/headlessui-react-native/src/components/modal.tsx

@@ -9,9 +9,9 @@ import {
   View,
   ViewProps,
 } from "react-native";
-import { UIContext, useUIContext } from "./useUIContext";
-import { CallableChildren } from "./callableChildren";
-import { RenderPropsCallableComponent } from "./types";
+import { RenderPropsCallableComponent } from "../constants";
+import { UIContext, useUIContext } from "../hooks";
+import { CallableChildren } from "./callable-children";
 
 export type ModalProps = {
   onClose: () => void;

packages/headlessui-react-native/src/constants/constatns.ts

@@ -0,0 +1,51 @@
+import {
+  ActivityIndicator,
+  Button,
+  DrawerLayoutAndroid,
+  FlatList,
+  Image,
+  ImageBackground,
+  InputAccessoryView,
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  RefreshControl,
+  ScrollView,
+  SectionList,
+  StatusBar,
+  Switch,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  VirtualizedList,
+} from "react-native";
+
+export const COMPONENT_MAP = {
+  ActivityIndicator,
+  Button,
+  FlatList,
+  Image,
+  ImageBackground,
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  RefreshControl,
+  ScrollView,
+  SectionList,
+  StatusBar,
+  Switch,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+  VirtualizedList,
+  DrawerLayoutAndroid,
+  TouchableNativeFeedback,
+  InputAccessoryView,
+};

packages/headlessui-react-native/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from "./constatns";
+export * from "./types";

packages/headlessui-react-native/src/constants/types.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from "react";
+
+import {
+  ActivityIndicatorProps,
+  ButtonProps,
+  DrawerLayoutAndroidProps,
+  FlatListProps,
+  ImageBackgroundProps,
+  ImageProps,
+  InputAccessoryViewProps,
+  KeyboardAvoidingViewProps,
+  ModalProps,
+  PressableProps,
+  RefreshControlProps,
+  ScrollViewProps,
+  SectionListProps,
+  StatusBarProps,
+  SwitchProps,
+  TextInputProps,
+  TextProps,
+  TouchableHighlightProps,
+  TouchableNativeFeedbackProps,
+  TouchableOpacityProps,
+  TouchableWithoutFeedbackProps,
+  ViewProps,
+  VirtualizedListProps,
+} from "react-native";
+
+export type RenderPropsCallableComponent<
+  T extends ViewProps | PressableProps,
+  /* props to return */
+  U extends unknown
+> = {
+  children: ReactNode | ((props: U) => ReactNode);
+} & Omit<T, "children">;
+
+type ReactNativeComponentTypeMap = {
+  ActivityIndicator: ActivityIndicatorProps;
+  Button: ButtonProps;
+  FlatList: FlatListProps<any>;
+  Image: ImageProps;
+  ImageBackground: ImageBackgroundProps;
+  KeyboardAvoidingView: KeyboardAvoidingViewProps;
+  Modal: ModalProps;
+  Pressable: PressableProps;
+  RefreshControl: RefreshControlProps;
+  ScrollView: ScrollViewProps;
+  SectionList: SectionListProps<any>;
+  StatusBar: StatusBarProps;
+  Switch: SwitchProps;
+  Text: TextProps;
+  TextInput: TextInputProps;
+  TouchableHighlight: TouchableHighlightProps;
+  TouchableOpacity: TouchableOpacityProps;
+  TouchableWithoutFeedback: TouchableWithoutFeedbackProps;
+  View: ViewProps;
+  VirtualizedList: VirtualizedListProps<any>;
+  DrawerLayoutAndroid: DrawerLayoutAndroidProps;
+  TouchableNativeFeedback: TouchableNativeFeedbackProps;
+  InputAccessoryView: InputAccessoryViewProps;
+};
+export type ReactNativeComponentType = keyof ReactNativeComponentTypeMap;
+
+export type PropsType<T extends ReactNativeComponentType> =
+  ReactNativeComponentTypeMap[T];
+
+export type ReactNativeComponentProps<T extends ReactNativeComponentType> = {
+  as?: T;
+  children?: ReactNode;
+} & PropsType<T>;

packages/headlessui-react-native/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useUIContext";

packages/headlessui-react-native/src/index.ts

@@ -1,3 +1,4 @@
-export * from "./closeButton";
-export * from "./disclosure";
-export * from "./modal";
+export * from "./components";
+export * from "./constants";
+export * from "./hooks";
+export * from "./utils";

packages/headlessui-react-native/src/utils/createReactNativeElement.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import {
+  COMPONENT_MAP,
+  PropsType,
+  ReactNativeComponentType,
+} from "../constants";
+
+export function createReactNativeElement<T extends ReactNativeComponentType>(
+  type: T,
+  props?: PropsType<T>,
+  children?: ReactNode
+) {
+  const Component = COMPONENT_MAP[type];
+
+  return React.createElement(
+    // @ts-ignore
+    Component,
+    props,
+    children
+  );
+}

packages/headlessui-react-native/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./createReactNativeElement";