1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| import { useState } from 'react'
| import type { FC, ReactNode } from 'react'
| import { autoUpdate, flip, inline, shift, useDismiss, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
| import type { SliceProps } from './type'
| import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared'
|
| type PreviewSliceProps = SliceProps<{
| label: ReactNode
| tooltip: ReactNode
| labelInnerClassName?: string
| dividerClassName?: string
| }>
|
| export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
| const { label, className, text, tooltip, labelInnerClassName, dividerClassName, ...rest } = props
| const [tooltipOpen, setTooltipOpen] = useState(false)
| const { refs, floatingStyles, context } = useFloating({
| open: tooltipOpen,
| onOpenChange: setTooltipOpen,
| whileElementsMounted: autoUpdate,
| placement: 'top',
| middleware: [
| inline(),
| flip(),
| shift(),
| ],
| })
| const hover = useHover(context, {
| delay: { open: 500 },
| move: true,
| })
| const dismiss = useDismiss(context)
| const role = useRole(context, { role: 'tooltip' })
| const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role])
| return (
| <>
| <SliceContainer {...rest}
| className={className}
| ref={refs.setReference}
| {...getReferenceProps()}
| >
| <SliceLabel labelInnerClassName={labelInnerClassName}>{label}</SliceLabel>
| <SliceContent>{text}</SliceContent>
| <SliceDivider className={dividerClassName} />
| </SliceContainer>
| {tooltipOpen && <span
| ref={refs.setFloating}
| style={floatingStyles}
| {...getFloatingProps()}
| className='rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-2 text-xs leading-4 text-text-secondary shadow shadow-shadow-shadow-5 backdrop-blur-[5px]'
| >
| {tooltip}
| </span>}
| </>
| )
| }
|
|
