fix scrollview error

Paymium · Sep 3, 2024 · eb3dfce · eb3dfce
1 parent 56d058e
commit eb3dfce
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 29 deletions.
diff --git a/packages/ui/src/overlay/Sheet/Frame.tsx b/packages/ui/src/overlay/Sheet/Frame.tsx
@@ -7,7 +7,7 @@
 
 import { forwardRef, Fragment } from 'react';
 import { useSheetContext } from './context';
-import { createStyles, isWeb } from '@crossed/styled';
+import { createStyles, isWeb, className } from '@crossed/styled';
 import { Portal } from '@gorhom/portal';
 import Animated from 'react-native-reanimated';
 import { sheetContext } from './context';
@@ -48,7 +48,7 @@ export const Frame = forwardRef<Animated.ScrollView, FrameProps>(
     return (
       <Portal>
         <sheetContext.Provider value={sheetContextValue}>
-          <RS enabled={open} {...styles.maxHeight.style()}>
+          <RS enabled={open} {...className(styles.maxHeight)}>
             <OverlayLogical {...overlayProps} />
             <ScrollView ref={ref} padded={padded} {...props}>
               {children}

diff --git a/packages/ui/src/overlay/Sheet/Handle.tsx b/packages/ui/src/overlay/Sheet/Handle.tsx
@@ -6,9 +6,9 @@
  */
 
 import { useSheetContext } from './context';
-import { createStyles } from '@crossed/styled';
+import { createStyles, CrossedStyle, rnw } from '@crossed/styled';
 import { Box } from '../../layout/Box';
-import { Pressable } from 'react-native';
+import { Pressable, PressableProps } from 'react-native';
 
 const styles = createStyles(({ colors }) => ({
   handle: {
@@ -24,11 +24,15 @@ const styles = createStyles(({ colors }) => ({
   pressable: { base: { justifyContent: 'center', height: 40 }, variants: {} },
 }));
 
-export const Handle = () => {
+export type HandleProps = Omit<PressableProps, 'style'> & {
+  style?: CrossedStyle;
+};
+
+export const Handle = ({ style, ...props }: HandleProps) => {
   const { hideHandle } = useSheetContext();
 
   return !hideHandle ? (
-    <Pressable {...styles.pressable.rnw()}>
+    <Pressable {...props} {...rnw(styles.pressable, style)}>
       <Box style={styles.handle} />
     </Pressable>
   ) : null;

diff --git a/packages/ui/src/overlay/Sheet/Overlay.tsx b/packages/ui/src/overlay/Sheet/Overlay.tsx
@@ -9,9 +9,10 @@ import { forwardRef, useEffect, useState } from 'react';
 import { type View } from 'react-native';
 import { useSheetContext } from './context';
 import {
-  type CrossedMethods,
   composeStyles,
   createStyles,
+  CrossedStyle,
+  rnw,
 } from '@crossed/styled';
 import { Portal } from '@gorhom/portal';
 import { Pressable, type PressableProps } from 'react-native';
@@ -38,7 +39,7 @@ const styles = createStyles(({ colors }) => ({
 }));
 
 export type OverlayProps = Omit<PressableProps, 'style'> & {
-  style?: CrossedMethods<any, any>;
+  style?: CrossedStyle;
 };
 
 export const OverlayLogical = forwardRef<View, OverlayProps>(
@@ -67,14 +68,14 @@ export const OverlayLogical = forwardRef<View, OverlayProps>(
       <Animated.View
         ref={ref}
         style={[
-          composeStyles(styles.box, styleProps || false).rnw().style,
+          rnw(styles.box, styleProps || false).style,
           style,
         ]}
       >
         <Pressable
           disabled={!dismissOnOverlayPress}
-          style={styles.pressable.rnw().style}
           {...props}
+          {...rnw(styles.pressable)}
           onPress={composeEventHandlers(
             (dismissOnOverlayPress && onClose) || undefined,
             onPressProps || undefined

diff --git a/packages/ui/src/overlay/Sheet/ScrollView.tsx b/packages/ui/src/overlay/Sheet/ScrollView.tsx
@@ -6,12 +6,7 @@
  */
 
 import { forwardRef, useCallback, useMemo, useRef } from 'react';
-import {
-  type CrossedMethods,
-  composeStyles,
-  createStyles,
-  isWeb,
-} from '@crossed/styled';
+import { createStyles, CrossedStyle, isWeb, rnw } from '@crossed/styled';
 import Animated, {
   type AnimatedScrollViewProps,
   runOnJS,
@@ -57,14 +52,12 @@ const styles = createStyles(({ colors, space }) => ({
     },
     variants: {},
   },
-  fixed: {
-    web: { base: { position: 'fixed' as any, boxSizing: 'content-box' } },
-  },
+  fixed: { base: { position: 'fixed' as any, boxSizing: 'content-box' } },
   maxHeight: { base: { maxHeight: '100%' } },
 }));
 
 export type SheetScrollViewProps = Omit<AnimatedScrollViewProps, 'style'> & {
-  style?: CrossedMethods<any, any>;
+  style?: CrossedStyle;
   padded?: boolean;
 };
 
@@ -225,18 +218,12 @@ export const ScrollView = forwardRef<Animated.ScrollView, SheetScrollViewProps>(
           onScroll={onScroll}
           onContentSizeChange={onContentSizeChange}
           contentContainerStyle={
-            composeStyles(
-              padded && styles.container,
-              padded && styles.containerPadded
-            ).style().style
+            rnw(padded && styles.container, padded && styles.containerPadded)
+              .style
           }
           {...props}
           style={[
-            composeStyles(
-              styles.box,
-              isWeb && styles.fixed,
-              styleProps || false
-            ).style().style,
+            rnw(styles.box, isWeb && styles.fixed, styleProps || false).style,
             styleAnimated,
           ]}
         >