| | |
| | | import { QuestionCircleOutlined } from '@ant-design/icons'; |
| | | import { SelectLang as UmiSelectLang } from '@umijs/max'; |
| | | import React from 'react'; |
| | | import { |
| | | MoonOutlined, |
| | | BulbOutlined, |
| | | InsertRowAboveOutlined, |
| | | InsertRowLeftOutlined, |
| | | FullscreenOutlined, |
| | | FullscreenExitOutlined |
| | | } from '@ant-design/icons'; |
| | | |
| | | export const SelectLang = () => { |
| | | return ( |
| | | <UmiSelectLang |
| | | style={{ |
| | | padding: 4, |
| | | }} |
| | | /> |
| | | ); |
| | | }; |
| | | |
| | | export const Question = () => { |
| | | return ( |
| | | <div |
| | | style={{ |
| | | display: 'flex', |
| | | height: 26, |
| | | }} |
| | | onClick={() => { |
| | | window.open('https://pro.ant.design/docs/getting-started'); |
| | | }} |
| | | > |
| | | <QuestionCircleOutlined /> |
| | | </div> |
| | | ); |
| | | }; |
| | | |
| | | export const Brightness = ({ darkMode, setDarkMode }) => { |
| | | const handleClick = () => { |
| | | setDarkMode(!darkMode); |
| | | }; |
| | | return ( |
| | | <div |
| | | style={{ |
| | | display: 'flex', |
| | | height: 26, |
| | | }} |
| | | onClick={handleClick} |
| | | > |
| | | {darkMode ? <BulbOutlined /> : <MoonOutlined />} |
| | | </div> |
| | | ); |
| | | }; |
| | | |
| | | export const LayoutSwitch = ({ layoutMode, setLayoutMode }) => { |
| | | const handleClick = () => { |
| | | setLayoutMode(!layoutMode); |
| | | }; |
| | | return ( |
| | | <div |
| | | style={{ |
| | | display: 'flex', |
| | | height: 26, |
| | | }} |
| | | onClick={handleClick} |
| | | > |
| | | {layoutMode ? <InsertRowLeftOutlined /> : <InsertRowAboveOutlined />} |
| | | </div> |
| | | ); |
| | | }; |
| | | |
| | | export const FullScreen = ({ fullScreen, setFullScreen }) => { |
| | | const handleClick = () => { |
| | | if (!fullScreen) { |
| | | requestFullScreen(); |
| | | } else { |
| | | exitFullscreen(); |
| | | } |
| | | setFullScreen(!fullScreen); |
| | | }; |
| | | |
| | | const requestFullScreen = () => { |
| | | var de = document.documentElement; |
| | | if (de.requestFullscreen) { |
| | | de.requestFullscreen(); |
| | | } else if (de.mozRequestFullScreen) { |
| | | de.mozRequestFullScreen(); |
| | | } else if (de.webkitRequestFullScreen) { |
| | | de.webkitRequestFullScreen(); |
| | | } else if (de.msRequestFullscreen) { |
| | | de.webkitRequestFullScreen(); |
| | | } |
| | | }; |
| | | |
| | | const exitFullscreen = () => { |
| | | var de = document; |
| | | if (de.exitFullScreen) { |
| | | de.exitFullScreen(); |
| | | } else if (de.mozExitFullScreen) { |
| | | de.mozExitFullScreen(); |
| | | } else if (de.webkitExitFullscreen) { |
| | | de.webkitExitFullscreen(); |
| | | } else if (de.msExitFullscreen) { |
| | | de.msExitFullscreen(); |
| | | } |
| | | }; |
| | | |
| | | return ( |
| | | <div |
| | | style={{ |
| | | display: 'flex', |
| | | height: 26, |
| | | }} |
| | | onClick={handleClick} |
| | | > |
| | | {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />} |
| | | </div> |
| | | ); |
| | | }; |
| | | import { QuestionCircleOutlined } from '@ant-design/icons';
|
| | | import { SelectLang as UmiSelectLang } from '@umijs/max';
|
| | | import React from 'react';
|
| | | import {
|
| | | MoonOutlined,
|
| | | BulbOutlined,
|
| | | InsertRowAboveOutlined,
|
| | | InsertRowLeftOutlined,
|
| | | FullscreenOutlined,
|
| | | FullscreenExitOutlined
|
| | | } from '@ant-design/icons';
|
| | |
|
| | | export const SelectLang = () => {
|
| | | return (
|
| | | <UmiSelectLang
|
| | | style={{
|
| | | padding: 4,
|
| | | }}
|
| | | />
|
| | | );
|
| | | };
|
| | |
|
| | | export const Question = () => {
|
| | | return (
|
| | | <div
|
| | | style={{
|
| | | display: 'flex',
|
| | | height: 26,
|
| | | }}
|
| | | onClick={() => {
|
| | | window.open('https://pro.ant.design/docs/getting-started');
|
| | | }}
|
| | | >
|
| | | <QuestionCircleOutlined />
|
| | | </div>
|
| | | );
|
| | | };
|
| | |
|
| | | export const Brightness = ({ darkMode, setDarkMode }) => {
|
| | | const handleClick = () => {
|
| | | setDarkMode(!darkMode);
|
| | | };
|
| | | return (
|
| | | <div
|
| | | style={{
|
| | | display: 'flex',
|
| | | height: 26,
|
| | | }}
|
| | | onClick={handleClick}
|
| | | >
|
| | | {darkMode ? <BulbOutlined /> : <MoonOutlined />}
|
| | | </div>
|
| | | );
|
| | | };
|
| | |
|
| | | export const LayoutSwitch = ({ layoutMode, setLayoutMode }) => {
|
| | | const handleClick = () => {
|
| | | setLayoutMode(!layoutMode);
|
| | | };
|
| | | return (
|
| | | <div
|
| | | style={{
|
| | | display: 'flex',
|
| | | height: 26,
|
| | | }}
|
| | | onClick={handleClick}
|
| | | >
|
| | | {layoutMode ? <InsertRowLeftOutlined /> : <InsertRowAboveOutlined />}
|
| | | </div>
|
| | | );
|
| | | };
|
| | |
|
| | | export const FullScreen = ({ fullScreen, setFullScreen }) => {
|
| | | const handleClick = () => {
|
| | | if (!fullScreen) {
|
| | | requestFullScreen();
|
| | | } else {
|
| | | exitFullscreen();
|
| | | }
|
| | | setFullScreen(!fullScreen);
|
| | | };
|
| | |
|
| | | const requestFullScreen = () => {
|
| | | var de = document.documentElement;
|
| | | if (de.requestFullscreen) {
|
| | | de.requestFullscreen();
|
| | | } else if (de.mozRequestFullScreen) {
|
| | | de.mozRequestFullScreen();
|
| | | } else if (de.webkitRequestFullScreen) {
|
| | | de.webkitRequestFullScreen();
|
| | | } else if (de.msRequestFullscreen) {
|
| | | de.webkitRequestFullScreen();
|
| | | }
|
| | | };
|
| | |
|
| | | const exitFullscreen = () => {
|
| | | var de = document;
|
| | | if (de.exitFullScreen) {
|
| | | de.exitFullScreen();
|
| | | } else if (de.mozExitFullScreen) {
|
| | | de.mozExitFullScreen();
|
| | | } else if (de.webkitExitFullscreen) {
|
| | | de.webkitExitFullscreen();
|
| | | } else if (de.msExitFullscreen) {
|
| | | de.msExitFullscreen();
|
| | | }
|
| | | };
|
| | | |
| | | return (
|
| | | <div
|
| | | style={{
|
| | | display: 'flex',
|
| | | height: 26,
|
| | | }}
|
| | | onClick={handleClick}
|
| | | >
|
| | | {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
| | | </div>
|
| | | );
|
| | | };
|