mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-24 07:28:28 +08:00
59ad48476b
* 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>
51 lines
1.1 KiB
TypeScript
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;
|