0abadbe7bb
```[tasklist] ### Tasks - [x] Migrate components from [design](https://github.com/toeverything/design) - [x] Replace all imports from `@toeverything/components` - [x] Clean up `@toeverything/components` dependencies - [x] Storybook ``` ### Influence Here are all the components that are influenced by `@toeverything/components` - `@affine/component` - App update `Button` `Tooltip` - App sidebar header `IconButton`, `Tooltip` - Back `Button` - Auth - Change email page save `Button` - Change password page all `Button`s (Save, Later, Open) - Confirm change email `Button` - Set password page `Button` - Sign in success page `Button` - Sign up page `Button` - Auth `Modal` - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton` - Share - Disable shared public link `Modal` - Import page `IconButton`, `Tooltip` - Accept invite page `Avatar`, `Button` - Invite member `Modal` - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip` - Notification center `IconButton` - Page list - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip` - tags more `Menu` - favorite `IconButton`, `Tooltip` - new page dropdown `Menu` - filter `Menu`, `Button`, `IconButton` - Page operation `Menu` - export `MenuItem` - move to trash `MenuItem`, `ConfirmModal` - Workspace header filter `Menu`, `Button` - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*) - Collection operation `Menu`, `MenuItem` - Create collection `Modal`, `Button` - Edit collection `Modal`, `Button` - Page mode filter `Menu` - Page mode `Button`, `Menu` - Setting modal - storage usage progress `Button`, `Tooltip` - On boarding tour `Modal` - `@affine/core` - Bookmark `Menu` - Affine error boundary `Button` - After sign in send email `Button` - After sign up send email `Button` - Send email `Button` - Sign in `Button` - Subscription redirect `Loading`, `Button` - Setting `Modal` - User plan button `Tooltip` - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu` - Profile `Button`, `Avatar` - Workspace - publish panel `Button`, `Tooltip` - export panel `Button` - storage panel `Button`, `Tooltip` - delete `ConfirmModal` - Language `Menu` - Account setting `Avatar`, `Button` - Date format setting `Menu` - Billing `Button`, `IconButton`, `Loading` - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip` - Create workspace `Modal`, `ConfirmModal`, `Button` - Payment disabled `ConfirmModal` - Share/Export `Menu`, `Button`, `Divider` - Sign out `ConfirmModal` - Temp disable affine cloud `Modal` - Page detail operation `Menu` - Blocksuite mode switch `Tooltip` - Login card `Avatar` - Help island `Tooltip` - `plugin` - copilot - hello world - image preview - outline
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import type {
|
|
TooltipContentProps,
|
|
TooltipPortalProps,
|
|
TooltipProps as RootProps,
|
|
} from '@radix-ui/react-tooltip';
|
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
import type { ReactElement, ReactNode } from 'react';
|
|
|
|
import * as styles from './styles.css';
|
|
|
|
export interface TooltipProps {
|
|
// `children` can not be string, number or even undefined
|
|
children: ReactElement;
|
|
content?: ReactNode;
|
|
side?: TooltipContentProps['side'];
|
|
align?: TooltipContentProps['align'];
|
|
|
|
rootOptions?: Omit<RootProps, 'children'>;
|
|
portalOptions?: TooltipPortalProps;
|
|
options?: Omit<TooltipContentProps, 'side' | 'align'>;
|
|
}
|
|
|
|
export const Tooltip = ({
|
|
children,
|
|
content,
|
|
side = 'top',
|
|
align = 'center',
|
|
options,
|
|
rootOptions,
|
|
portalOptions,
|
|
}: TooltipProps) => {
|
|
if (!content) {
|
|
return children;
|
|
}
|
|
return (
|
|
<TooltipPrimitive.Provider>
|
|
<TooltipPrimitive.Root delayDuration={500} {...rootOptions}>
|
|
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
|
|
|
|
<TooltipPrimitive.Portal {...portalOptions}>
|
|
<TooltipPrimitive.Content
|
|
className={styles.tooltipContent}
|
|
side={side}
|
|
align={align}
|
|
sideOffset={5}
|
|
style={{ zIndex: 'var(--affine-z-index-popover)' }}
|
|
{...options}
|
|
>
|
|
{content}
|
|
<TooltipPrimitive.Arrow
|
|
height={6}
|
|
width={10}
|
|
fill="var(--affine-tooltip)"
|
|
/>
|
|
</TooltipPrimitive.Content>
|
|
</TooltipPrimitive.Portal>
|
|
</TooltipPrimitive.Root>
|
|
</TooltipPrimitive.Provider>
|
|
);
|
|
};
|