feat(system): add ref to popover and tooltip triggers
This commit is contained in:
parent
c7e6b14e35
commit
c4e80bbdb3
|
@ -1,40 +1,45 @@
|
|||
import React, { forwardRef } from 'react'
|
||||
import React, { cloneElement, forwardRef } from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-popover'
|
||||
|
||||
import { Content } from './styles'
|
||||
|
||||
import type { PopoverContentProps } from '@radix-ui/react-popover'
|
||||
import type { Ref } from 'react'
|
||||
|
||||
interface TriggerProps {
|
||||
children: [React.ReactElement, React.ReactElement]
|
||||
}
|
||||
|
||||
const PopoverTrigger = (props: TriggerProps) => {
|
||||
const { children } = props
|
||||
const PopoverTrigger = (props: TriggerProps, ref: Ref<HTMLButtonElement>) => {
|
||||
const { children, ...triggerProps } = props
|
||||
|
||||
const [trigger, content] = children
|
||||
|
||||
return (
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
|
||||
<Primitive.Trigger asChild>
|
||||
{cloneElement(trigger, { ref, ...triggerProps })}
|
||||
</Primitive.Trigger>
|
||||
{content}
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
interface PopoverProps {
|
||||
const _PopoverTrigger = forwardRef(PopoverTrigger)
|
||||
|
||||
interface PopoverProps extends PopoverContentProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Popover = (props: PopoverProps, ref) => {
|
||||
const { children } = props
|
||||
const Popover = (props: PopoverProps) => {
|
||||
const { children, ...contentProps } = props
|
||||
|
||||
return (
|
||||
<Content as={Primitive.Content} portalled={true} ref={ref}>
|
||||
<Content as={Primitive.Content} {...contentProps}>
|
||||
{children}
|
||||
</Content>
|
||||
)
|
||||
}
|
||||
|
||||
const _Popover = forwardRef(Popover)
|
||||
|
||||
export { _Popover as Popover, PopoverTrigger }
|
||||
export { Popover, _PopoverTrigger as PopoverTrigger }
|
||||
|
|
|
@ -1,24 +1,33 @@
|
|||
import React from 'react'
|
||||
import React, { cloneElement, forwardRef } from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-tooltip'
|
||||
|
||||
import { Arrow, Content } from './styles'
|
||||
|
||||
import type { TooltipContentProps } from '@radix-ui/react-tooltip'
|
||||
import type { Ref } from 'react'
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
children: React.ReactElement
|
||||
side?: TooltipContentProps['side']
|
||||
sideOffset?: TooltipContentProps['sideOffset']
|
||||
}
|
||||
|
||||
const Tooltip = (props: Props) => {
|
||||
const { children, label, side = 'top', sideOffset = 5 } = props
|
||||
const Tooltip = (props: Props, ref: Ref<HTMLButtonElement>) => {
|
||||
const {
|
||||
children,
|
||||
label,
|
||||
side = 'top',
|
||||
sideOffset = 5,
|
||||
...triggerProps
|
||||
} = props
|
||||
|
||||
return (
|
||||
<Primitive.Root delayDuration={500}>
|
||||
<Primitive.Trigger asChild>{children}</Primitive.Trigger>
|
||||
<Primitive.Trigger asChild>
|
||||
{cloneElement(children, { ref, ...triggerProps })}
|
||||
</Primitive.Trigger>
|
||||
<Content side={side} sideOffset={sideOffset}>
|
||||
{label}
|
||||
<Arrow />
|
||||
|
@ -27,5 +36,7 @@ const Tooltip = (props: Props) => {
|
|||
)
|
||||
}
|
||||
|
||||
export { Tooltip }
|
||||
const _Tooltip = forwardRef(Tooltip)
|
||||
|
||||
export { _Tooltip as Tooltip }
|
||||
export type { Props as TooltipProps }
|
||||
|
|
Loading…
Reference in New Issue