ant-design/.dumi/theme/builtins/InlinePopover/index.tsx
afc163 59ad48476b
refactor: add boime lint and fix lint errrors (#49536)
* chore: add boime lint

* fix lint

* use files ignore

* revert change

* ignore clarity.js

* fix some errors

* fix some errors

* fix some errors

* fix some errors

* add yml file

* Update clarity.js

Signed-off-by: afc163 <afc163@gmail.com>

* add npm run lint:biome

* add npm run lint:biome

* fix test case

* fix ts errors

* fix ts errors

* fix lint and add .lintstagedrc

* shorten prop name

* chore: update package.json

* update biome.json

* chore: remove stylelint

* chore: useOptionalChain

* fix lint

* biome format

* prettier all code

* prettier all code

* fix site test

---------

Signed-off-by: afc163 <afc163@gmail.com>
2024-06-22 21:59:12 +08:00

51 lines
1.1 KiB
TypeScript

import React from 'react';
import { PictureOutlined } from '@ant-design/icons';
import { Image, Tooltip, Typography } from 'antd';
import useLocale from '../../../hooks/useLocale';
const locales = {
cn: {
tip: '预览',
},
en: {
tip: 'Preview',
},
};
export interface InlinePopoverProps {
previewURL?: string;
}
// 鼠标悬浮弹出 Popover 组件,用于帮助用户更快看到一些属性对应的预览效果
const InlinePopover: React.FC<InlinePopoverProps> = (props) => {
const { previewURL } = props;
const [locale] = useLocale(locales);
const [visible, setVisible] = React.useState(false);
return (
<>
<Tooltip title={locale.tip}>
<Typography.Link onClick={() => setVisible(true)}>
<PictureOutlined />
</Typography.Link>
</Tooltip>
<Image
width={10}
style={{ display: 'none' }}
src={previewURL}
preview={{
visible,
src: previewURL,
onVisibleChange: (value) => {
setVisible(value);
},
}}
/>
</>
);
};
export default InlinePopover;