fix: textarea component

gluestack · Apr 3, 2024 · c894013 · c894013
1 parent 4f0b3b8
commit c894013
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/switch/index.tsx
@@ -34,7 +34,7 @@ type ISwitchProps = React.ComponentProps<typeof UISwitch> &
 const Switch = React.forwardRef(
   (
     { className, size = 'md', ...props }: { className?: string } & ISwitchProps,
-    ref
+    ref?: any
   ) => {
     return (
       <UISwitch

diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx
@@ -13,7 +13,6 @@ import { withStates } from '@gluestack-ui/nativewind-utils/withStates';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 const SCOPE = 'TEXTAREA';
 const UITextarea = createTextarea({
-  // @ts-ignore
   Root:
     Platform.OS === 'web'
       ? withStyleContext(View, SCOPE)
@@ -32,6 +31,12 @@ const textareaStyle = tva({
       default:
         'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-primary-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-primary-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700 ',
     },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      xl: '',
+    },
   },
 });
 
@@ -58,7 +63,7 @@ const Textarea = React.forwardRef(
       size = 'md',
       ...props
     }: { className?: string } & ITextareaProps,
-    ref
+    ref?: any
   ) => {
     return (
       <UITextarea
@@ -77,7 +82,7 @@ type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> &
 const TextareaInput = React.forwardRef(
   (
     { className, ...props }: { className?: string } & ITextareaInputProps,
-    ref
+    ref?: any
   ) => {
     const { size: parentSize } = useStyleContext(SCOPE);
 

diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json
@@ -13,6 +13,7 @@
         "../../packages/unstyled/alert-dialog/src"
       ],
       "@gluestack-ui/menu": ["../../packages/unstyled/menu/src"],
+      "@gluestack-ui/textarea": ["../../packages/unstyled/textarea/src"],
       "@gluestack-ui/link": ["../../packages/unstyled/link/src"],
       "@gluestack-ui/nativewind-utils/tva": [
         "../../packages/nativewind/utils/src/tva"

diff --git a/packages/unstyled/textarea/src/types.ts b/packages/unstyled/textarea/src/types.ts
@@ -43,5 +43,7 @@ export interface IInputProps {
 
 export type ITextareaComponentType<Root, Input> =
   React.ForwardRefExoticComponent<Root & ITextareaProps> & {
-    Input: React.ForwardRefExoticComponent<Input & IInputProps>;
+    Input: React.ForwardRefExoticComponent<
+      Input & React.RefAttributes<Input> & IInputProps
+    >;
   };