tachybase_todo/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/FullScreenAction.tsx

24 lines
808 B
TypeScript
Raw Normal View History

import React, { forwardRef } from 'react';
import { Tooltip, Button } from 'antd';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { getPopupContainer, useGCMTranslation } from '../utils';
import { useFullscreen } from 'ahooks';
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';