ui directory

andrew-bierman · Dec 28, 2024 · 877f9dd · 877f9dd
1 parent 4e0c676
commit 877f9dd
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 20 deletions.
diff --git a/packages/ui/src/FullScreen/FullScreen.tsx b/packages/ui/src/FullScreen/FullScreen.tsx
@@ -32,7 +32,7 @@ export const FullScreen: FC<FullScreenProps> = ({
 
   return (
     <View
-      ref={Platform.OS === 'web' ? webFullScreen.elementRef : null}
+      ref={Platform.OS === 'web' ? (webFullScreen.elementRef as any) : null}
       style={isFullScreen ? styles.fullScreen : defaultStyles}
     >
       {children}

diff --git a/packages/ui/src/FullScreen/useWebFullScreen.ts b/packages/ui/src/FullScreen/useWebFullScreen.ts
@@ -7,24 +7,24 @@ export const useWebFullScreen = () => {
     const element = elementRef.current;
     if (element && element.requestFullscreen) {
       element.requestFullscreen();
-    } else if (element && element.webkitRequestFullscreen) {
-      element.webkitRequestFullscreen();
-    } else if (element && element.mozRequestFullScreen) {
-      element.mozRequestFullScreen();
-    } else if (element && element.msRequestFullscreen) {
-      element.msRequestFullscreen();
+    } else if (element && (element as any).webkitRequestFullscreen) {
+      (element as any).webkitRequestFullscreen();
+    } else if (element && (element as any).mozRequestFullScreen) {
+      (element as any).mozRequestFullScreen();
+    } else if (element && (element as any).msRequestFullscreen) {
+      (element as any).msRequestFullscreen();
     }
   };
 
   const exitFullScreen = () => {
     if (document.fullscreenElement) {
       document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else if (document.mozCancelFullScreen) {
-      document.mozCancelFullScreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
+    } else if ((document as any).webkitExitFullscreen) {
+      (document as any).webkitExitFullscreen();
+    } else if ((document as any).mozCancelFullScreen) {
+      (document as any).mozCancelFullScreen();
+    } else if ((document as any).msExitFullscreen) {
+      (document as any).msExitFullscreen();
     }
   };
 

diff --git a/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx b/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
@@ -57,7 +57,7 @@ export const ItemPickerOverlay: FC<ItemPickerOverlayProps> = ({
       >
         <Form defaultValues={{ search: searchTerm }}>
           <FormInput
-            onChange={(e) => onSearchChange(e.target.value)}
+            onChange={(e) => onSearchChange((e.target as any).value)}
             autoFocus
             style={{ marginBottom: 16 }}
             name="search"

diff --git a/packages/ui/src/RContextMenu/index.tsx b/packages/ui/src/RContextMenu/index.tsx
@@ -6,9 +6,9 @@ import RText from '../RText';
 type ContentProps = ComponentProps<(typeof ZeegoContextMenu)['Content']>;
 type ItemProps = ComponentProps<(typeof ZeegoContextMenu)['Item']>;
 
-interface MenuItems{
-  label: string,
-  onSelect: () => void,
+interface MenuItems {
+  label: string;
+  onSelect: () => void;
 }
 
 const ContextMenu = {
@@ -57,7 +57,12 @@ const RContextMenu = ({ menuItems = [], menuName }) => {
       <ContextMenu.Trigger>
         <RButton>{menuName}</RButton>
       </ContextMenu.Trigger>
-      <ContextMenu.Content>
+      <ContextMenu.Content
+        alignOffset={0}
+        loop
+        avoidCollisions
+        collisionPadding={5}
+      >
         {menuItems.map(({ label, onSelect = () => {} }) => (
           <ContextMenu.Item key={label} onSelect={onSelect}>
             <ContextMenu.ItemTitle>{label}</ContextMenu.ItemTitle>

diff --git a/packages/ui/src/RDropdown/DropdownBase.tsx b/packages/ui/src/RDropdown/DropdownBase.tsx
@@ -64,7 +64,15 @@ const ExampleDropdown = () => {
       <DropdownMenu.Trigger>
         <RButton>Open Dropdown</RButton>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content
+        side="bottom"
+        align="start"
+        sideOffset={5}
+        alignOffset={0}
+        loop
+        avoidCollisions
+        collisionPadding={5}
+      >
         <DropdownMenu.Item key="1">Item 1</DropdownMenu.Item>
         <DropdownMenu.Item key="2">Item 2</DropdownMenu.Item>
         <DropdownMenu.Item key="3">Item 3</DropdownMenu.Item>

diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
@@ -81,7 +81,15 @@ const RDropdownMenu = ({
           </Button>
         )}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content
+        side="bottom"
+        align="start"
+        sideOffset={5}
+        alignOffset={0}
+        loop
+        avoidCollisions
+        collisionPadding={5}
+      >
         {menuItems.map(({ label, onSelect = () => {} }) => (
           <DropdownMenu.Item key={label} onSelect={onSelect}>
             <DropdownMenu.ItemTitle>{label}</DropdownMenu.ItemTitle>