tachybase_todo/packages/plugins/@tachybase/plugin-graph-collection-manager/src/client/components/FullScreenAction.tsx
sealday ede7ead8b1 chore(version): release v0.21.34 (#1045)
Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1045
2024-05-24 01:06:06 +08:00

26 lines
810 B
TypeScript

import React, { forwardRef } from 'react';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { useFullscreen } from 'ahooks';
import { Button, Tooltip } from 'antd';
import { getPopupContainer, useGCMTranslation } from '../utils';
export const FullscreenAction = forwardRef(() => {
const { t } = useGCMTranslation();
const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.getElementById('graph_container'));
return (
<Tooltip title={t('Full Screen')} getPopupContainer={getPopupContainer}>
<Button
onClick={() => {
toggleFullscreen();
}}
>
{isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</Button>
</Tooltip>
);
});
FullscreenAction.displayName = 'FullscreenAction';