Skip to content

Commit 2c3fed4

Browse files
Viraj-10Viraj-10
authored
Merge pull request #2274 from gluestack/fix/ref-typing-unstyle
Fix/ref typing unstyle
2 parents b630a39 + 41aab7b commit 2c3fed4

File tree

32 files changed

+249
-518
lines changed

32 files changed

+249
-518
lines changed

‎example/storybook/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"baseUrl": ".",
55
"paths": {
66
"@gluestack-ui/themed": ["../../packages/themed/src"],
7+
"@gluestack-ui/button": ["../../packages/unstyled/button/src"],
78
"@gluestack-ui/config": ["../../packages/config/src/gluestack-ui.config"],
89
"react-native": ["./node_modules/react-native-web"],
910
"@gluestack-style/react": ["../../packages/styled/react/src"],

‎packages/unstyled/accordion/src/types.ts‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import type { ViewProps } from 'react-native';
23

34
export interface IAccordionProps extends ViewProps {
@@ -91,27 +92,33 @@ export type IAccordionComponentType<
9192
TitleTextProps,
9293
ContentTextProps
9394
> = React.ForwardRefExoticComponent<
94-
AccordionProps & React.RefAttributes<AccordionProps> & IAccordionProps
95+
React.PropsWithoutRef<AccordionProps & IAccordionProps> &
96+
React.RefAttributes<AccordionProps>
9597
> & {
9698
Item: React.ForwardRefExoticComponent<
97-
ItemProps & React.RefAttributes<ItemProps> & IAccordionItemProps
99+
React.PropsWithoutRef<ItemProps & IAccordionItemProps> &
100+
React.RefAttributes<ItemProps>
98101
>;
99102
Header: React.ForwardRefExoticComponent<
100-
HeaderProps & React.RefAttributes<HeaderProps>
103+
React.PropsWithoutRef<HeaderProps> & React.RefAttributes<HeaderProps>
101104
>;
102105
Trigger: React.ForwardRefExoticComponent<
103-
Omit<TriggerProps, 'children'> & IAccordionTriggerProps
106+
React.PropsWithoutRef<
107+
Omit<TriggerProps, 'children'> & IAccordionTriggerProps
108+
> &
109+
React.RefAttributes<TriggerProps>
104110
>;
105111
Content: React.ForwardRefExoticComponent<
106-
ContentProps & React.RefAttributes<ContentProps>
112+
React.PropsWithoutRef<ContentProps> & React.RefAttributes<ContentProps>
107113
>;
108114
TitleText: React.ForwardRefExoticComponent<
109-
TitleTextProps & React.RefAttributes<TitleTextProps>
115+
React.PropsWithoutRef<TitleTextProps> & React.RefAttributes<TitleTextProps>
110116
>;
111117
ContentText: React.ForwardRefExoticComponent<
112-
ContentTextProps & React.RefAttributes<ContentTextProps>
118+
React.PropsWithoutRef<ContentTextProps> &
119+
React.RefAttributes<ContentTextProps>
113120
>;
114121
Icon: React.ForwardRefExoticComponent<
115-
IconProps & React.RefAttributes<IconProps>
122+
React.PropsWithoutRef<IconProps> & React.RefAttributes<IconProps>
116123
>;
117124
};

‎packages/unstyled/actionsheet/src/types.ts‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -66,45 +66,52 @@ export type IActionsheetComponentType<
6666
SectionHeaderTextProps,
6767
IconProps
6868
> = React.ForwardRefExoticComponent<
69-
ActionsheetProps & React.RefAttributes<ActionsheetProps> & IActionsheetProps
69+
React.RefAttributes<ActionsheetProps> &
70+
React.PropsWithoutRef<ActionsheetProps & IActionsheetProps>
7071
> & {
7172
Content: React.ForwardRefExoticComponent<
72-
ContentProps &
73-
React.RefAttributes<ContentProps> &
74-
InterfaceActionsheetContentProps
73+
React.PropsWithoutRef<ContentProps & InterfaceActionsheetContentProps> &
74+
React.RefAttributes<ContentProps>
7575
>;
7676
Item: React.ForwardRefExoticComponent<
77-
ItemProps & InterfaceActionsheetItemProps & React.RefAttributes<ItemProps>
77+
React.PropsWithoutRef<ItemProps & InterfaceActionsheetItemProps> &
78+
React.RefAttributes<ItemProps>
7879
>;
7980
ItemText: React.ForwardRefExoticComponent<
80-
React.RefAttributes<ItemTextProps> & ItemTextProps
81+
React.RefAttributes<ItemTextProps> & React.PropsWithoutRef<ItemTextProps>
8182
>;
8283
DragIndicator: React.ForwardRefExoticComponent<
83-
React.RefAttributes<DragIndicatorProps> & DragIndicatorProps
84+
React.RefAttributes<DragIndicatorProps> &
85+
React.PropsWithoutRef<DragIndicatorProps>
8486
>;
8587
Backdrop: React.ForwardRefExoticComponent<
86-
React.RefAttributes<BackdropProps> & BackdropProps
88+
React.RefAttributes<BackdropProps> & React.PropsWithoutRef<BackdropProps>
8789
>;
8890
DragIndicatorWrapper: React.ForwardRefExoticComponent<
89-
React.RefAttributes<IndicatorWrapperProps> & IndicatorWrapperProps
91+
React.RefAttributes<IndicatorWrapperProps> &
92+
React.PropsWithoutRef<IndicatorWrapperProps>
9093
>;
9194
ScrollView: React.ForwardRefExoticComponent<
92-
React.RefAttributes<ScrollViewProps> & ScrollViewProps
95+
React.RefAttributes<ScrollViewProps> &
96+
React.PropsWithoutRef<ScrollViewProps>
9397
>;
9498
VirtualizedList: React.ForwardRefExoticComponent<
95-
React.RefAttributes<VirtualizedListProps> & VirtualizedListProps
99+
React.RefAttributes<VirtualizedListProps> &
100+
React.PropsWithoutRef<VirtualizedListProps>
96101
>;
97102
FlatList: React.ForwardRefExoticComponent<
98-
React.RefAttributes<FlatListProps> & FlatListProps
103+
React.RefAttributes<FlatListProps> & React.PropsWithoutRef<FlatListProps>
99104
>;
100105
SectionList: React.ForwardRefExoticComponent<
101-
React.RefAttributes<SectionListProps> & SectionListProps
106+
React.RefAttributes<SectionListProps> &
107+
React.PropsWithoutRef<SectionListProps>
102108
>;
103109
SectionHeaderText: React.ForwardRefExoticComponent<
104-
React.RefAttributes<SectionHeaderTextProps> & SectionHeaderTextProps
110+
React.RefAttributes<SectionHeaderTextProps> &
111+
React.PropsWithoutRef<SectionHeaderTextProps>
105112
>;
106113
Icon: React.ForwardRefExoticComponent<
107-
React.RefAttributes<IconProps> & IconProps
114+
React.RefAttributes<IconProps> & React.PropsWithoutRef<IconProps>
108115
>;
109116
};
110117

‎packages/unstyled/alert-dialog/src/types.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import React from 'react';
2+
13
export interface InterfaceAlertDialogProps {
24
/**
35
* If true, the AlertDialog will open. Useful for controllable state behaviour
@@ -47,7 +49,7 @@ export interface InterfaceAlertDialogProps {
4749
* @default false
4850
*/
4951
useRNModal?: boolean;
50-
children?: any;
52+
children?: React.ReactNode;
5153
}
5254

5355
export interface IAlertDialogContentProps {
@@ -67,28 +69,32 @@ export type IAlertDialogComponentType<
6769
StyledAlertDialogBody,
6870
StyledAlertDialogBackdrop
6971
> = React.ForwardRefExoticComponent<
70-
React.RefAttributes<StyledAlertDialog> & StyledAlertDialog & IAlertDialogProps
72+
React.RefAttributes<StyledAlertDialog> &
73+
React.PropsWithoutRef<StyledAlertDialog & IAlertDialogProps>
7174
> & {
7275
Content: React.ForwardRefExoticComponent<
7376
React.RefAttributes<StyledAlertDialogContent> &
74-
IAlertDialogContentProps &
75-
StyledAlertDialogContent
77+
React.PropsWithoutRef<IAlertDialogContentProps & StyledAlertDialogContent>
7678
>;
7779
CloseButton: React.ForwardRefExoticComponent<
7880
React.RefAttributes<StyledAlertDialogCloseButton> &
79-
StyledAlertDialogCloseButton
81+
React.PropsWithoutRef<StyledAlertDialogCloseButton>
8082
>;
8183
Header: React.ForwardRefExoticComponent<
82-
React.RefAttributes<StyledAlertDialogHeader> & StyledAlertDialogHeader
84+
React.RefAttributes<StyledAlertDialogHeader> &
85+
React.PropsWithoutRef<StyledAlertDialogHeader>
8386
>;
8487
Footer: React.ForwardRefExoticComponent<
85-
React.RefAttributes<StyledAlertDialogFooter> & StyledAlertDialogFooter
88+
React.RefAttributes<StyledAlertDialogFooter> &
89+
React.PropsWithoutRef<StyledAlertDialogFooter>
8690
>;
8791
Body: React.ForwardRefExoticComponent<
88-
React.RefAttributes<StyledAlertDialogBody> & StyledAlertDialogBody
92+
React.RefAttributes<StyledAlertDialogBody> &
93+
React.PropsWithoutRef<StyledAlertDialogBody>
8994
>;
9095
Backdrop: React.ForwardRefExoticComponent<
91-
React.RefAttributes<StyledAlertDialogBackdrop> & StyledAlertDialogBackdrop
96+
React.RefAttributes<StyledAlertDialogBackdrop> &
97+
React.PropsWithoutRef<StyledAlertDialogBackdrop>
9298
>;
9399
};
94100

‎packages/unstyled/alert/src/types.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1+
import React from 'react';
12
import type { ViewProps } from 'react-native';
23

34
export interface InterfaceAlertProps extends ViewProps {
4-
children?: JSX.Element | Array<JSX.Element>;
5+
children?: React.ReactNode;
56
}
67

78
export type IAlertComponentType<StyledAlert, StyledAlertText, StyledAlertIcon> =
89
React.ForwardRefExoticComponent<
9-
React.RefAttributes<StyledAlert> & StyledAlert & InterfaceAlertProps
10+
React.RefAttributes<StyledAlert> &
11+
React.PropsWithoutRef<StyledAlert & InterfaceAlertProps>
1012
> & {
1113
Text: React.ForwardRefExoticComponent<
12-
React.RefAttributes<StyledAlertText> & StyledAlertText
14+
React.RefAttributes<StyledAlertText> &
15+
React.PropsWithoutRef<StyledAlertText>
1316
>;
1417
Icon: React.ForwardRefExoticComponent<
15-
React.RefAttributes<StyledAlertIcon> & StyledAlertIcon
18+
React.RefAttributes<StyledAlertIcon> &
19+
React.PropsWithoutRef<StyledAlertIcon>
1620
>;
1721
};
1822

‎packages/unstyled/avatar/src/types.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,22 @@ export type IAvatarComponentType<
1515
ImageProps,
1616
FallbackTextProps
1717
> = React.ForwardRefExoticComponent<
18-
IAvatarProps & AvatarProps & React.RefAttributes<AvatarProps>
18+
React.PropsWithoutRef<IAvatarProps & AvatarProps> &
19+
React.RefAttributes<AvatarProps>
1920
> & {
2021
Badge: React.ForwardRefExoticComponent<
21-
BadgeProps & React.RefAttributes<BadgeProps>
22+
React.PropsWithoutRef<BadgeProps> & React.RefAttributes<BadgeProps>
2223
>;
2324
Group: React.ForwardRefExoticComponent<
24-
GroupProps & React.RefAttributes<GroupProps> & IAvatarGroupProps
25+
React.PropsWithoutRef<GroupProps & IAvatarGroupProps> &
26+
React.RefAttributes<GroupProps>
2527
>;
2628
Image: React.ForwardRefExoticComponent<
27-
ImageProps & React.RefAttributes<ImageProps>
29+
React.PropsWithoutRef<ImageProps> & React.RefAttributes<ImageProps>
2830
>;
2931
FallbackText: React.ForwardRefExoticComponent<
30-
FallbackTextProps & React.RefAttributes<FallbackTextProps>
32+
React.PropsWithoutRef<FallbackTextProps> &
33+
React.RefAttributes<FallbackTextProps>
3134
>;
3235
};
3336

‎packages/unstyled/button/src/types.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { PropsWithoutRef, RefAttributes } from 'react';
12
import type { PressableProps } from 'react-native';
23

34
export interface InterfaceButtonProps extends PressableProps {
@@ -53,19 +54,19 @@ export type IButtonComponentType<
5354
TextProps,
5455
IconProps
5556
> = React.ForwardRefExoticComponent<
56-
React.RefAttributes<ButtonProps> & ButtonProps & IButtonProps
57+
PropsWithoutRef<ButtonProps & IButtonProps> & RefAttributes<ButtonProps>
5758
> & {
5859
Group: React.ForwardRefExoticComponent<
59-
React.RefAttributes<GroupProps> & GroupProps & IButtonGroupProps
60+
RefAttributes<GroupProps> & PropsWithoutRef<GroupProps & IButtonGroupProps>
6061
>;
6162
Spinner: React.ForwardRefExoticComponent<
62-
SpinnerProps & React.RefAttributes<SpinnerProps>
63+
PropsWithoutRef<SpinnerProps> & React.RefAttributes<SpinnerProps>
6364
>;
6465
Text: React.ForwardRefExoticComponent<
65-
React.RefAttributes<TextProps> & TextProps
66+
React.RefAttributes<TextProps> & PropsWithoutRef<TextProps>
6667
>;
6768
Icon: React.ForwardRefExoticComponent<
68-
React.RefAttributes<IconProps> & IconProps
69+
React.RefAttributes<IconProps> & PropsWithoutRef<IconProps>
6970
>;
7071
};
7172

‎packages/unstyled/checkbox/src/types.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,19 @@ export interface ICheckboxGroup {
2525

2626
export type ICheckboxComponentType<Root, Indicator, Icon, Label, Group> =
2727
React.ForwardRefExoticComponent<
28-
React.RefAttributes<Root> & Root & InterfaceCheckbox
28+
React.RefAttributes<Root> & React.PropsWithoutRef<Root> & InterfaceCheckbox
2929
> & {
3030
Indicator: React.ForwardRefExoticComponent<
31-
React.RefAttributes<Indicator> & Indicator
31+
React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator>
32+
>;
33+
Icon: React.ForwardRefExoticComponent<
34+
React.RefAttributes<Icon> & React.PropsWithoutRef<Icon>
35+
>;
36+
Label: React.ForwardRefExoticComponent<
37+
React.RefAttributes<Label> & React.PropsWithoutRef<Label>
3238
>;
33-
Icon: React.ForwardRefExoticComponent<React.RefAttributes<Icon> & Icon>;
34-
Label: React.ForwardRefExoticComponent<React.RefAttributes<Label> & Label>;
3539
Group: React.ForwardRefExoticComponent<
36-
React.RefAttributes<Group> & Group & ICheckboxGroup
40+
React.RefAttributes<Group> & React.PropsWithoutRef<Group> & ICheckboxGroup
3741
>;
3842
};
3943

‎packages/unstyled/divider/src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type React from 'react';
22
import { Divider as DividerMain } from './Divider';
3+
import { IDividerComponentType } from './types';
34

45
export function createDivider<DividerProps>({
56
Root,
@@ -8,5 +9,5 @@ export function createDivider<DividerProps>({
89
}) {
910
const Divider = DividerMain(Root);
1011
Divider.displayName = 'Divider';
11-
return Divider;
12+
return Divider as IDividerComponentType<DividerProps>;
1213
}

‎packages/unstyled/divider/src/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,7 @@ export interface InterfaceDivider {
44
}
55

66
export type IDividerProps = InterfaceDivider;
7+
8+
export type IDividerComponentType<Root> = React.ForwardRefExoticComponent<
9+
React.RefAttributes<Root> & React.PropsWithoutRef<Root>
10+
>;

0 commit comments

Comments
 (0)