@react-native-reusables/cli 0.0.17 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__generated/components/primitives/context-menu/context-menu.tsx +50 -28
- package/__generated/components/primitives/context-menu/context-menu.web.tsx +39 -10
- package/__generated/components/primitives/context-menu/types.ts +17 -9
- package/__generated/components/primitives/dropdown-menu/dropdown-menu.tsx +73 -49
- package/__generated/components/primitives/dropdown-menu/dropdown-menu.web.tsx +49 -20
- package/__generated/components/primitives/dropdown-menu/types.ts +10 -9
- package/__generated/components/primitives/hover-card/hover-card.tsx +40 -32
- package/__generated/components/primitives/hover-card/hover-card.web.tsx +28 -23
- package/__generated/components/primitives/hover-card/types.ts +14 -5
- package/__generated/components/primitives/menubar/menubar.tsx +22 -24
- package/__generated/components/primitives/menubar/menubar.web.tsx +10 -5
- package/__generated/components/primitives/menubar/types.ts +3 -2
- package/__generated/components/primitives/popover/popover.tsx +61 -57
- package/__generated/components/primitives/popover/popover.web.tsx +44 -32
- package/__generated/components/primitives/popover/types.ts +7 -13
- package/__generated/components/primitives/select/select.tsx +32 -21
- package/__generated/components/primitives/select/select.web.tsx +26 -13
- package/__generated/components/primitives/select/types.ts +8 -6
- package/__generated/components/primitives/tooltip/tooltip.tsx +38 -32
- package/__generated/components/primitives/tooltip/tooltip.web.tsx +29 -15
- package/__generated/components/primitives/tooltip/types.ts +8 -10
- package/package.json +14 -14
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as Popover from '@radix-ui/react-popover';
|
|
2
|
-
import { useAugmentedRef
|
|
2
|
+
import { useAugmentedRef } from '@rnr/hooks';
|
|
3
3
|
import * as Slot from '@rnr/slot';
|
|
4
4
|
import type {
|
|
5
5
|
PositionedContentProps,
|
|
@@ -10,36 +10,36 @@ import type {
|
|
|
10
10
|
} from '@rnr/types';
|
|
11
11
|
import * as React from 'react';
|
|
12
12
|
import { Pressable, View, type GestureResponderEvent } from 'react-native';
|
|
13
|
-
import type {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const Component = asChild ? Slot.View : View;
|
|
30
|
-
return (
|
|
31
|
-
<RootContext.Provider value={{ open, onOpenChange }}>
|
|
32
|
-
<Popover.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
|
|
33
|
-
<Component ref={ref} {...viewProps} />
|
|
34
|
-
</Popover.Root>
|
|
35
|
-
</RootContext.Provider>
|
|
36
|
-
);
|
|
13
|
+
import type { PopoverOverlayProps, PopoverPortalProps, PopoverTriggerRef } from './types';
|
|
14
|
+
|
|
15
|
+
const RootContext = React.createContext<{
|
|
16
|
+
open: boolean;
|
|
17
|
+
onOpenChange: (open: boolean) => void;
|
|
18
|
+
} | null>(null);
|
|
19
|
+
|
|
20
|
+
const Root = React.forwardRef<
|
|
21
|
+
ViewRef,
|
|
22
|
+
SlottableViewProps & { onOpenChange?: (open: boolean) => void }
|
|
23
|
+
>(({ asChild, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
|
|
24
|
+
const [open, setOpen] = React.useState(false);
|
|
25
|
+
|
|
26
|
+
function onOpenChange(value: boolean) {
|
|
27
|
+
setOpen(value);
|
|
28
|
+
onOpenChangeProp?.(value);
|
|
37
29
|
}
|
|
38
|
-
|
|
30
|
+
const Component = asChild ? Slot.View : View;
|
|
31
|
+
return (
|
|
32
|
+
<RootContext.Provider value={{ open, onOpenChange }}>
|
|
33
|
+
<Popover.Root open={open} onOpenChange={onOpenChange}>
|
|
34
|
+
<Component ref={ref} {...viewProps} />
|
|
35
|
+
</Popover.Root>
|
|
36
|
+
</RootContext.Provider>
|
|
37
|
+
);
|
|
38
|
+
});
|
|
39
39
|
|
|
40
40
|
Root.displayName = 'RootWebPopover';
|
|
41
41
|
|
|
42
|
-
function
|
|
42
|
+
function useRootContext() {
|
|
43
43
|
const context = React.useContext(RootContext);
|
|
44
44
|
if (!context) {
|
|
45
45
|
throw new Error('Popover compound components cannot be rendered outside the Popover component');
|
|
@@ -47,10 +47,20 @@ function usePopoverContext() {
|
|
|
47
47
|
return context;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
const Trigger = React.forwardRef<
|
|
50
|
+
const Trigger = React.forwardRef<PopoverTriggerRef, SlottablePressableProps>(
|
|
51
51
|
({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
|
|
52
|
-
const
|
|
53
|
-
const
|
|
52
|
+
const { onOpenChange, open } = useRootContext();
|
|
53
|
+
const augmentedRef = useAugmentedRef({
|
|
54
|
+
ref,
|
|
55
|
+
methods: {
|
|
56
|
+
open() {
|
|
57
|
+
onOpenChange(true);
|
|
58
|
+
},
|
|
59
|
+
close() {
|
|
60
|
+
onOpenChange(false);
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
});
|
|
54
64
|
function onPress(ev: GestureResponderEvent) {
|
|
55
65
|
if (onPressProp) {
|
|
56
66
|
onPressProp(ev);
|
|
@@ -141,7 +151,7 @@ Content.displayName = 'ContentWebPopover';
|
|
|
141
151
|
const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
|
|
142
152
|
({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
|
|
143
153
|
const augmentedRef = useAugmentedRef({ ref });
|
|
144
|
-
const { onOpenChange, open } =
|
|
154
|
+
const { onOpenChange, open } = useRootContext();
|
|
145
155
|
|
|
146
156
|
function onPress(ev: GestureResponderEvent) {
|
|
147
157
|
if (onPressProp) {
|
|
@@ -176,4 +186,6 @@ const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
|
|
|
176
186
|
|
|
177
187
|
Close.displayName = 'CloseWebPopover';
|
|
178
188
|
|
|
179
|
-
export { Close, Content, Overlay, Portal, Root, Trigger,
|
|
189
|
+
export { Close, Content, Overlay, Portal, Root, Trigger, useRootContext };
|
|
190
|
+
|
|
191
|
+
export type { PopoverTriggerRef };
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
import type { ForceMountable } from '@rnr/types';
|
|
2
|
-
|
|
3
|
-
interface RootContext {
|
|
4
|
-
open: boolean;
|
|
5
|
-
onOpenChange: (value: boolean) => void;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
interface PopoverRootProps {
|
|
9
|
-
open?: boolean;
|
|
10
|
-
defaultOpen?: boolean;
|
|
11
|
-
onOpenChange?: (value: boolean) => void;
|
|
12
|
-
}
|
|
1
|
+
import type { ForceMountable, PressableRef } from '@rnr/types';
|
|
13
2
|
|
|
14
3
|
interface PopoverPortalProps extends ForceMountable {
|
|
15
4
|
children: React.ReactNode;
|
|
@@ -27,4 +16,9 @@ interface PopoverOverlayProps extends ForceMountable {
|
|
|
27
16
|
closeOnPress?: boolean;
|
|
28
17
|
}
|
|
29
18
|
|
|
30
|
-
|
|
19
|
+
interface PopoverTriggerRef extends PressableRef {
|
|
20
|
+
open: () => void;
|
|
21
|
+
close: () => void;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export type { PopoverOverlayProps, PopoverPortalProps, PopoverTriggerRef };
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
useAugmentedRef,
|
|
3
|
+
useControllableState,
|
|
4
|
+
useRelativePosition,
|
|
5
|
+
type LayoutPosition,
|
|
6
|
+
} from '@rnr/hooks';
|
|
2
7
|
import { Portal as RNPPortal } from '@rnr/portal';
|
|
3
8
|
import * as Slot from '@rnr/slot';
|
|
4
9
|
import type {
|
|
@@ -29,10 +34,13 @@ import type {
|
|
|
29
34
|
SelectPortalProps,
|
|
30
35
|
SelectRootProps,
|
|
31
36
|
SelectSeparatorProps,
|
|
37
|
+
SelectTriggerRef,
|
|
32
38
|
SelectValueProps,
|
|
33
39
|
} from './types';
|
|
34
40
|
|
|
35
41
|
interface IRootContext extends RootContext {
|
|
42
|
+
open: boolean;
|
|
43
|
+
onOpenChange: (open: boolean) => void;
|
|
36
44
|
triggerPosition: LayoutPosition | null;
|
|
37
45
|
setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
|
|
38
46
|
contentLayout: LayoutRectangle | null;
|
|
@@ -49,8 +57,6 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
|
|
|
49
57
|
value: valueProp,
|
|
50
58
|
defaultValue,
|
|
51
59
|
onValueChange: onValueChangeProp,
|
|
52
|
-
open: openProp,
|
|
53
|
-
defaultOpen,
|
|
54
60
|
onOpenChange: onOpenChangeProp,
|
|
55
61
|
disabled,
|
|
56
62
|
...viewProps
|
|
@@ -58,11 +64,6 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
|
|
|
58
64
|
ref
|
|
59
65
|
) => {
|
|
60
66
|
const nativeID = React.useId();
|
|
61
|
-
const [open = false, onOpenChange] = useControllableState({
|
|
62
|
-
prop: openProp,
|
|
63
|
-
defaultProp: defaultOpen,
|
|
64
|
-
onChange: onOpenChangeProp,
|
|
65
|
-
});
|
|
66
67
|
const [value, onValueChange] = useControllableState({
|
|
67
68
|
prop: valueProp,
|
|
68
69
|
defaultProp: defaultValue,
|
|
@@ -70,6 +71,12 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
|
|
|
70
71
|
});
|
|
71
72
|
const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
|
|
72
73
|
const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
|
|
74
|
+
const [open, setOpen] = React.useState(false);
|
|
75
|
+
|
|
76
|
+
function onOpenChange(value: boolean) {
|
|
77
|
+
setOpen(value);
|
|
78
|
+
onOpenChangeProp?.(value);
|
|
79
|
+
}
|
|
73
80
|
|
|
74
81
|
const Component = asChild ? Slot.View : View;
|
|
75
82
|
return (
|
|
@@ -103,25 +110,29 @@ function useRootContext() {
|
|
|
103
110
|
return context;
|
|
104
111
|
}
|
|
105
112
|
|
|
106
|
-
const Trigger = React.forwardRef<
|
|
113
|
+
const Trigger = React.forwardRef<SelectTriggerRef, SlottablePressableProps>(
|
|
107
114
|
({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
|
|
108
|
-
const triggerRef = React.useRef<View>(null);
|
|
109
115
|
const { open, onOpenChange, disabled: disabledRoot, setTriggerPosition } = useRootContext();
|
|
110
116
|
|
|
111
|
-
|
|
117
|
+
const augmentedRef = useAugmentedRef({
|
|
112
118
|
ref,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
119
|
+
methods: {
|
|
120
|
+
open: () => {
|
|
121
|
+
onOpenChange(true);
|
|
122
|
+
augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
|
|
123
|
+
setTriggerPosition({ width, pageX, pageY: pageY, height });
|
|
124
|
+
});
|
|
125
|
+
},
|
|
126
|
+
close: () => {
|
|
127
|
+
setTriggerPosition(null);
|
|
128
|
+
onOpenChange(false);
|
|
129
|
+
},
|
|
118
130
|
},
|
|
119
|
-
|
|
120
|
-
);
|
|
131
|
+
});
|
|
121
132
|
|
|
122
133
|
function onPress(ev: GestureResponderEvent) {
|
|
123
134
|
if (disabled) return;
|
|
124
|
-
|
|
135
|
+
augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
|
|
125
136
|
setTriggerPosition({ width, pageX, pageY: pageY, height });
|
|
126
137
|
});
|
|
127
138
|
onOpenChange(!open);
|
|
@@ -131,7 +142,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
|
|
|
131
142
|
const Component = asChild ? Slot.Pressable : Pressable;
|
|
132
143
|
return (
|
|
133
144
|
<Component
|
|
134
|
-
ref={
|
|
145
|
+
ref={augmentedRef}
|
|
135
146
|
aria-disabled={disabled ?? undefined}
|
|
136
147
|
role='combobox'
|
|
137
148
|
onPress={onPress}
|
|
@@ -448,7 +459,7 @@ export {
|
|
|
448
459
|
useRootContext,
|
|
449
460
|
};
|
|
450
461
|
|
|
451
|
-
export type { Option } from './types';
|
|
462
|
+
export type { Option, SelectTriggerRef } from './types';
|
|
452
463
|
|
|
453
464
|
function onStartShouldSetResponder() {
|
|
454
465
|
return true;
|
|
@@ -24,7 +24,13 @@ import type {
|
|
|
24
24
|
SelectValueProps,
|
|
25
25
|
} from './types';
|
|
26
26
|
|
|
27
|
-
const SelectContext = React.createContext<
|
|
27
|
+
const SelectContext = React.createContext<
|
|
28
|
+
| (RootContext & {
|
|
29
|
+
open: boolean;
|
|
30
|
+
onOpenChange: (open: boolean) => void;
|
|
31
|
+
})
|
|
32
|
+
| null
|
|
33
|
+
>(null);
|
|
28
34
|
|
|
29
35
|
/**
|
|
30
36
|
* @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
|
|
@@ -37,24 +43,22 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
|
|
|
37
43
|
value: valueProp,
|
|
38
44
|
defaultValue,
|
|
39
45
|
onValueChange: onValueChangeProp,
|
|
40
|
-
open: openProp,
|
|
41
|
-
defaultOpen,
|
|
42
46
|
onOpenChange: onOpenChangeProp,
|
|
43
47
|
...viewProps
|
|
44
48
|
},
|
|
45
49
|
ref
|
|
46
50
|
) => {
|
|
47
|
-
const [open = false, onOpenChange] = useControllableState({
|
|
48
|
-
prop: openProp,
|
|
49
|
-
defaultProp: defaultOpen,
|
|
50
|
-
onChange: onOpenChangeProp,
|
|
51
|
-
});
|
|
52
|
-
|
|
53
51
|
const [value, onValueChange] = useControllableState({
|
|
54
52
|
prop: valueProp,
|
|
55
53
|
defaultProp: defaultValue,
|
|
56
54
|
onChange: onValueChangeProp,
|
|
57
55
|
});
|
|
56
|
+
const [open, setOpen] = React.useState(false);
|
|
57
|
+
|
|
58
|
+
function onOpenChange(value: boolean) {
|
|
59
|
+
setOpen(value);
|
|
60
|
+
onOpenChangeProp?.(value);
|
|
61
|
+
}
|
|
58
62
|
|
|
59
63
|
function onStrValueChange(val: string) {
|
|
60
64
|
onValueChange({ value: val, label: val });
|
|
@@ -75,7 +79,6 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & SelectRootProps>(
|
|
|
75
79
|
defaultValue={defaultValue?.value}
|
|
76
80
|
onValueChange={onStrValueChange}
|
|
77
81
|
open={open}
|
|
78
|
-
defaultOpen={defaultOpen}
|
|
79
82
|
onOpenChange={onOpenChange}
|
|
80
83
|
>
|
|
81
84
|
<Component ref={ref} {...viewProps} />
|
|
@@ -97,8 +100,18 @@ function useRootContext() {
|
|
|
97
100
|
|
|
98
101
|
const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
|
|
99
102
|
({ asChild, role: _role, disabled, ...props }, ref) => {
|
|
100
|
-
const
|
|
101
|
-
const
|
|
103
|
+
const { open, onOpenChange } = useRootContext();
|
|
104
|
+
const augmentedRef = useAugmentedRef({
|
|
105
|
+
ref,
|
|
106
|
+
methods: {
|
|
107
|
+
open() {
|
|
108
|
+
onOpenChange(true);
|
|
109
|
+
},
|
|
110
|
+
close() {
|
|
111
|
+
onOpenChange(false);
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
});
|
|
102
115
|
|
|
103
116
|
React.useLayoutEffect(() => {
|
|
104
117
|
if (augmentedRef.current) {
|
|
@@ -316,4 +329,4 @@ export {
|
|
|
316
329
|
useRootContext,
|
|
317
330
|
};
|
|
318
331
|
|
|
319
|
-
export type { Option } from './types';
|
|
332
|
+
export type { Option, SelectTriggerRef } from './types';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ForceMountable } from '@rnr/types';
|
|
1
|
+
import type { ForceMountable, PressableRef } from '@rnr/types';
|
|
2
2
|
|
|
3
3
|
type Option =
|
|
4
4
|
| {
|
|
@@ -10,8 +10,6 @@ type Option =
|
|
|
10
10
|
interface RootContext {
|
|
11
11
|
value: Option;
|
|
12
12
|
onValueChange: (option: Option) => void;
|
|
13
|
-
open: boolean;
|
|
14
|
-
onOpenChange: (value: boolean) => void;
|
|
15
13
|
disabled?: boolean;
|
|
16
14
|
}
|
|
17
15
|
|
|
@@ -19,9 +17,7 @@ interface SelectRootProps {
|
|
|
19
17
|
value?: Option;
|
|
20
18
|
defaultValue?: Option;
|
|
21
19
|
onValueChange?: (option: Option) => void;
|
|
22
|
-
|
|
23
|
-
defaultOpen?: boolean;
|
|
24
|
-
onOpenChange?: (value: boolean) => void;
|
|
20
|
+
onOpenChange?: (open: boolean) => void;
|
|
25
21
|
disabled?: boolean;
|
|
26
22
|
/**
|
|
27
23
|
* Platform: WEB ONLY
|
|
@@ -74,6 +70,11 @@ interface SelectSeparatorProps {
|
|
|
74
70
|
decorative?: boolean;
|
|
75
71
|
}
|
|
76
72
|
|
|
73
|
+
interface SelectTriggerRef extends PressableRef {
|
|
74
|
+
open: () => void;
|
|
75
|
+
close: () => void;
|
|
76
|
+
}
|
|
77
|
+
|
|
77
78
|
export type {
|
|
78
79
|
Option,
|
|
79
80
|
RootContext,
|
|
@@ -83,5 +84,6 @@ export type {
|
|
|
83
84
|
SelectPortalProps,
|
|
84
85
|
SelectRootProps,
|
|
85
86
|
SelectSeparatorProps,
|
|
87
|
+
SelectTriggerRef,
|
|
86
88
|
SelectValueProps,
|
|
87
89
|
};
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
BackHandler,
|
|
4
|
-
Pressable,
|
|
5
|
-
View,
|
|
6
|
-
type GestureResponderEvent,
|
|
7
|
-
type LayoutChangeEvent,
|
|
8
|
-
type LayoutRectangle,
|
|
9
|
-
} from 'react-native';
|
|
10
|
-
import { useControllableState, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
|
|
1
|
+
import { useAugmentedRef, useRelativePosition, type LayoutPosition } from '@rnr/hooks';
|
|
11
2
|
import { Portal as RNPPortal } from '@rnr/portal';
|
|
12
3
|
import * as Slot from '@rnr/slot';
|
|
13
4
|
import type {
|
|
@@ -17,14 +8,25 @@ import type {
|
|
|
17
8
|
SlottableViewProps,
|
|
18
9
|
ViewRef,
|
|
19
10
|
} from '@rnr/types';
|
|
11
|
+
import * as React from 'react';
|
|
12
|
+
import {
|
|
13
|
+
BackHandler,
|
|
14
|
+
Pressable,
|
|
15
|
+
View,
|
|
16
|
+
type GestureResponderEvent,
|
|
17
|
+
type LayoutChangeEvent,
|
|
18
|
+
type LayoutRectangle,
|
|
19
|
+
} from 'react-native';
|
|
20
20
|
import type {
|
|
21
|
-
RootContext,
|
|
22
21
|
TooltipOverlayProps,
|
|
23
22
|
TooltipPortalProps,
|
|
24
23
|
TooltipRootProps,
|
|
24
|
+
TooltipTriggerRef,
|
|
25
25
|
} from './types';
|
|
26
26
|
|
|
27
|
-
interface IRootContext
|
|
27
|
+
interface IRootContext {
|
|
28
|
+
open: boolean;
|
|
29
|
+
onOpenChange: (open: boolean) => void;
|
|
28
30
|
triggerPosition: LayoutPosition | null;
|
|
29
31
|
setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
|
|
30
32
|
contentLayout: LayoutRectangle | null;
|
|
@@ -38,12 +40,10 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
|
|
|
38
40
|
(
|
|
39
41
|
{
|
|
40
42
|
asChild,
|
|
41
|
-
defaultOpen,
|
|
42
|
-
open: openProp,
|
|
43
|
-
onOpenChange: onOpenChangeProp,
|
|
44
43
|
delayDuration: _delayDuration,
|
|
45
44
|
skipDelayDuration: _skipDelayDuration,
|
|
46
45
|
disableHoverableContent: _disableHoverableContent,
|
|
46
|
+
onOpenChange: onOpenChangeProp,
|
|
47
47
|
...viewProps
|
|
48
48
|
},
|
|
49
49
|
ref
|
|
@@ -51,12 +51,12 @@ const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
|
|
|
51
51
|
const nativeID = React.useId();
|
|
52
52
|
const [triggerPosition, setTriggerPosition] = React.useState<LayoutPosition | null>(null);
|
|
53
53
|
const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(null);
|
|
54
|
+
const [open, setOpen] = React.useState(false);
|
|
54
55
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
});
|
|
56
|
+
function onOpenChange(value: boolean) {
|
|
57
|
+
setOpen(value);
|
|
58
|
+
onOpenChangeProp?.(value);
|
|
59
|
+
}
|
|
60
60
|
|
|
61
61
|
const Component = asChild ? Slot.View : View;
|
|
62
62
|
return (
|
|
@@ -87,25 +87,29 @@ function useTooltipContext() {
|
|
|
87
87
|
return context;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
const Trigger = React.forwardRef<
|
|
90
|
+
const Trigger = React.forwardRef<TooltipTriggerRef, SlottablePressableProps>(
|
|
91
91
|
({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
|
|
92
|
-
const triggerRef = React.useRef<View>(null);
|
|
93
92
|
const { open, onOpenChange, setTriggerPosition } = useTooltipContext();
|
|
94
93
|
|
|
95
|
-
|
|
94
|
+
const augmentedRef = useAugmentedRef({
|
|
96
95
|
ref,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
methods: {
|
|
97
|
+
open: () => {
|
|
98
|
+
onOpenChange(true);
|
|
99
|
+
augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
|
|
100
|
+
setTriggerPosition({ width, pageX, pageY: pageY, height });
|
|
101
|
+
});
|
|
102
|
+
},
|
|
103
|
+
close: () => {
|
|
104
|
+
setTriggerPosition(null);
|
|
105
|
+
onOpenChange(false);
|
|
106
|
+
},
|
|
102
107
|
},
|
|
103
|
-
|
|
104
|
-
);
|
|
108
|
+
});
|
|
105
109
|
|
|
106
110
|
function onPress(ev: GestureResponderEvent) {
|
|
107
111
|
if (disabled) return;
|
|
108
|
-
|
|
112
|
+
augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
|
|
109
113
|
setTriggerPosition({ width, pageX, pageY: pageY, height });
|
|
110
114
|
});
|
|
111
115
|
const newValue = !open;
|
|
@@ -116,7 +120,7 @@ const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
|
|
|
116
120
|
const Component = asChild ? Slot.Pressable : Pressable;
|
|
117
121
|
return (
|
|
118
122
|
<Component
|
|
119
|
-
ref={
|
|
123
|
+
ref={augmentedRef}
|
|
120
124
|
aria-disabled={disabled ?? undefined}
|
|
121
125
|
role='button'
|
|
122
126
|
onPress={onPress}
|
|
@@ -266,6 +270,8 @@ Content.displayName = 'ContentNativeTooltip';
|
|
|
266
270
|
|
|
267
271
|
export { Content, Overlay, Portal, Root, Trigger };
|
|
268
272
|
|
|
273
|
+
export type { TooltipTriggerRef };
|
|
274
|
+
|
|
269
275
|
function onStartShouldSetResponder() {
|
|
270
276
|
return true;
|
|
271
277
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import * as Tooltip from '@radix-ui/react-tooltip';
|
|
2
|
-
import
|
|
3
|
-
import { Pressable, View, type GestureResponderEvent } from 'react-native';
|
|
4
|
-
import { useAugmentedRef, useControllableState } from '@rnr/hooks';
|
|
2
|
+
import { useAugmentedRef } from '@rnr/hooks';
|
|
5
3
|
import * as Slot from '@rnr/slot';
|
|
6
4
|
import type {
|
|
7
5
|
PositionedContentProps,
|
|
@@ -10,34 +8,38 @@ import type {
|
|
|
10
8
|
SlottableViewProps,
|
|
11
9
|
ViewRef,
|
|
12
10
|
} from '@rnr/types';
|
|
11
|
+
import * as React from 'react';
|
|
12
|
+
import { Pressable, View, type GestureResponderEvent } from 'react-native';
|
|
13
13
|
import type {
|
|
14
|
-
RootContext,
|
|
15
14
|
TooltipOverlayProps,
|
|
16
15
|
TooltipPortalProps,
|
|
17
16
|
TooltipRootProps,
|
|
17
|
+
TooltipTriggerRef,
|
|
18
18
|
} from './types';
|
|
19
19
|
|
|
20
|
-
const RootContext = React.createContext<
|
|
20
|
+
const RootContext = React.createContext<{
|
|
21
|
+
open: boolean;
|
|
22
|
+
onOpenChange: (open: boolean) => void;
|
|
23
|
+
} | null>(null);
|
|
21
24
|
|
|
22
25
|
const Root = React.forwardRef<ViewRef, SlottableViewProps & TooltipRootProps>(
|
|
23
26
|
(
|
|
24
27
|
{
|
|
25
28
|
asChild,
|
|
26
|
-
defaultOpen,
|
|
27
|
-
open: openProp,
|
|
28
|
-
onOpenChange: onOpenChangeProp,
|
|
29
29
|
delayDuration,
|
|
30
30
|
skipDelayDuration,
|
|
31
31
|
disableHoverableContent,
|
|
32
|
+
onOpenChange: onOpenChangeProp,
|
|
32
33
|
...viewProps
|
|
33
34
|
},
|
|
34
35
|
ref
|
|
35
36
|
) => {
|
|
36
|
-
const [open
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
const [open, setOpen] = React.useState(false);
|
|
38
|
+
|
|
39
|
+
function onOpenChange(value: boolean) {
|
|
40
|
+
setOpen(value);
|
|
41
|
+
onOpenChangeProp?.(value);
|
|
42
|
+
}
|
|
41
43
|
|
|
42
44
|
const Component = asChild ? Slot.View : View;
|
|
43
45
|
return (
|
|
@@ -71,10 +73,20 @@ function useTooltipContext() {
|
|
|
71
73
|
return context;
|
|
72
74
|
}
|
|
73
75
|
|
|
74
|
-
const Trigger = React.forwardRef<
|
|
76
|
+
const Trigger = React.forwardRef<TooltipTriggerRef, SlottablePressableProps>(
|
|
75
77
|
({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
|
|
76
|
-
const augmentedRef = useAugmentedRef({ ref });
|
|
77
78
|
const { onOpenChange, open } = useTooltipContext();
|
|
79
|
+
const augmentedRef = useAugmentedRef({
|
|
80
|
+
ref,
|
|
81
|
+
methods: {
|
|
82
|
+
open() {
|
|
83
|
+
onOpenChange(true);
|
|
84
|
+
},
|
|
85
|
+
close() {
|
|
86
|
+
onOpenChange(false);
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
});
|
|
78
90
|
function onPress(ev: GestureResponderEvent) {
|
|
79
91
|
if (onPressProp) {
|
|
80
92
|
onPressProp(ev);
|
|
@@ -165,3 +177,5 @@ const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContent
|
|
|
165
177
|
Content.displayName = 'ContentWebTooltip';
|
|
166
178
|
|
|
167
179
|
export { Content, Overlay, Portal, Root, Trigger };
|
|
180
|
+
|
|
181
|
+
export type { TooltipTriggerRef };
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
import type { ForceMountable } from '@rnr/types';
|
|
2
|
-
|
|
3
|
-
interface RootContext extends TooltipRootProps {
|
|
4
|
-
open: boolean;
|
|
5
|
-
onOpenChange: (value: boolean) => void;
|
|
6
|
-
}
|
|
1
|
+
import type { ForceMountable, PressableRef } from '@rnr/types';
|
|
7
2
|
|
|
8
3
|
interface TooltipRootProps {
|
|
9
|
-
|
|
10
|
-
open?: boolean;
|
|
11
|
-
onOpenChange?: (value: boolean) => void;
|
|
4
|
+
onOpenChange?: (open: boolean) => void;
|
|
12
5
|
/**
|
|
13
6
|
* Platform: WEB ONLY
|
|
14
7
|
* @default 700
|
|
@@ -41,4 +34,9 @@ interface TooltipOverlayProps extends ForceMountable {
|
|
|
41
34
|
closeOnPress?: boolean;
|
|
42
35
|
}
|
|
43
36
|
|
|
44
|
-
|
|
37
|
+
interface TooltipTriggerRef extends PressableRef {
|
|
38
|
+
open: () => void;
|
|
39
|
+
close: () => void;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export type { TooltipOverlayProps, TooltipPortalProps, TooltipRootProps, TooltipTriggerRef };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-native-reusables/cli",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.18",
|
|
4
4
|
"description": "Add Universal components and primitives to your React-Native project.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -66,37 +66,37 @@
|
|
|
66
66
|
"type-fest": "^3.8.0",
|
|
67
67
|
"typescript": "^5.3.3",
|
|
68
68
|
"@rnr/alert-dialog": "0.0.0",
|
|
69
|
-
"@rnr/accordion": "0.0.0",
|
|
70
69
|
"@rnr/aspect-ratio": "0.0.0",
|
|
71
|
-
"@rnr/
|
|
70
|
+
"@rnr/accordion": "0.0.0",
|
|
72
71
|
"@rnr/avatar": "0.0.0",
|
|
72
|
+
"@rnr/checkbox": "0.0.0",
|
|
73
73
|
"@rnr/collapsible": "0.0.0",
|
|
74
|
-
"@rnr/context-menu": "0.0.0",
|
|
75
|
-
"@rnr/dialog": "0.0.0",
|
|
76
74
|
"@rnr/dropdown-menu": "0.0.0",
|
|
75
|
+
"@rnr/context-menu": "0.0.0",
|
|
77
76
|
"@rnr/hooks": "0.0.0",
|
|
77
|
+
"@rnr/dialog": "0.0.0",
|
|
78
78
|
"@rnr/hover-card": "0.0.0",
|
|
79
|
-
"@rnr/
|
|
79
|
+
"@rnr/portal": "0.0.0",
|
|
80
80
|
"@rnr/menubar": "0.0.0",
|
|
81
|
+
"@rnr/label": "0.0.0",
|
|
81
82
|
"@rnr/navigation-menu": "0.0.0",
|
|
82
|
-
"@rnr/popover": "0.0.0",
|
|
83
|
-
"@rnr/progress": "0.0.0",
|
|
84
83
|
"@rnr/radio-group": "0.0.0",
|
|
84
|
+
"@rnr/progress": "0.0.0",
|
|
85
85
|
"@rnr/select": "0.0.0",
|
|
86
86
|
"@rnr/separator": "0.0.0",
|
|
87
|
-
"@rnr/slider": "0.0.0",
|
|
88
87
|
"@rnr/slot": "0.0.0",
|
|
89
|
-
"@rnr/
|
|
90
|
-
"@rnr/
|
|
88
|
+
"@rnr/slider": "0.0.0",
|
|
89
|
+
"@rnr/popover": "0.0.0",
|
|
91
90
|
"@rnr/table": "0.0.0",
|
|
91
|
+
"@rnr/switch": "0.0.0",
|
|
92
92
|
"@rnr/toast": "0.0.0",
|
|
93
93
|
"@rnr/reusables": "0.0.0",
|
|
94
|
-
"@rnr/portal": "0.0.0",
|
|
95
|
-
"@rnr/toolbar": "0.0.0",
|
|
96
94
|
"@rnr/toggle-group": "0.0.0",
|
|
97
|
-
"@rnr/toggle": "0.0.0",
|
|
98
95
|
"@rnr/types": "0.0.0",
|
|
99
96
|
"@rnr/utils": "0.0.0",
|
|
97
|
+
"@rnr/toggle": "0.0.0",
|
|
98
|
+
"@rnr/toolbar": "0.0.0",
|
|
99
|
+
"@rnr/tabs": "0.0.0",
|
|
100
100
|
"@rnr/tooltip": "0.0.0"
|
|
101
101
|
},
|
|
102
102
|
"scripts": {
|