mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 12:15:32 +08:00
de0c8fee97
* feat: export all types related to components fix(tooltip): fix the vertical offset of the arrow * refactor: optimize events of all popup related components * test: append testcases for popup base component * test: add testcase for visible events * test: update snapshots
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import { getIconPosition } from './placement'
|
|
import { Placement } from '../utils/prop-types'
|
|
import useTheme from '../use-theme'
|
|
|
|
interface Props {
|
|
placement: Placement
|
|
shadow: boolean
|
|
}
|
|
|
|
const TooltipIcon: React.FC<Props> = ({ placement, shadow }) => {
|
|
const theme = useTheme()
|
|
const { transform, top, left, right, bottom } = useMemo(
|
|
() =>
|
|
getIconPosition(
|
|
placement,
|
|
'var(--tooltip-icon-offset-x)',
|
|
'var(--tooltip-icon-offset-y)',
|
|
),
|
|
[placement],
|
|
)
|
|
const bgColorWithDark = useMemo(() => {
|
|
if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)'
|
|
return theme.palette.accents_2
|
|
}, [theme.type, shadow])
|
|
|
|
return (
|
|
<span>
|
|
<style jsx>{`
|
|
span {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 6px 7px 6px 0;
|
|
border-color: transparent ${bgColorWithDark} transparent transparent;
|
|
position: absolute;
|
|
left: ${left};
|
|
top: ${top};
|
|
right: ${right};
|
|
bottom: ${bottom};
|
|
transform: ${transform};
|
|
}
|
|
`}</style>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default TooltipIcon
|