Add device landscape notice
This commit is contained in:
parent
45fb51bca9
commit
2c398d06d5
|
@ -1,4 +1,7 @@
|
||||||
import { Typography } from 'antd';
|
import {
|
||||||
|
Typography,
|
||||||
|
Grid,
|
||||||
|
} from 'antd';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import {
|
import {
|
||||||
CartesianGrid,
|
CartesianGrid,
|
||||||
|
@ -10,8 +13,11 @@ import {
|
||||||
ResponsiveContainer,
|
ResponsiveContainer,
|
||||||
Label,
|
Label,
|
||||||
} from 'recharts';
|
} from 'recharts';
|
||||||
|
import LandscapeNotice from './LandscapeNotice';
|
||||||
import Table from './Table';
|
import Table from './Table';
|
||||||
|
|
||||||
|
const { useBreakpoint } = Grid;
|
||||||
|
|
||||||
const Curve = ({
|
const Curve = ({
|
||||||
name,
|
name,
|
||||||
xLabel,
|
xLabel,
|
||||||
|
@ -46,11 +52,16 @@ const Curve = ({
|
||||||
y: rawData[0][i],
|
y: rawData[0][i],
|
||||||
}));
|
}));
|
||||||
const [data, setData] = useState(mapData([yData, xData]));
|
const [data, setData] = useState(mapData([yData, xData]));
|
||||||
|
const { sm } = useBreakpoint();
|
||||||
const margin = 15;
|
const margin = 15;
|
||||||
const mainColor = '#ccc';
|
const mainColor = '#ccc';
|
||||||
const tooltipBg = '#2E3338';
|
const tooltipBg = '#2E3338';
|
||||||
const animationDuration = 500;
|
const animationDuration = 500;
|
||||||
|
|
||||||
|
if (!sm) {
|
||||||
|
return <LandscapeNotice />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Typography.Paragraph>
|
<Typography.Paragraph>
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { Result } from 'antd';
|
||||||
|
|
||||||
|
const LandscapeNotice = () => <Result title="Turn your device to landscape mode" />;
|
||||||
|
|
||||||
|
export default LandscapeNotice;
|
|
@ -11,6 +11,7 @@ import {
|
||||||
Modal,
|
Modal,
|
||||||
Popover,
|
Popover,
|
||||||
Space,
|
Space,
|
||||||
|
Grid,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import {
|
import {
|
||||||
PlusCircleOutlined,
|
PlusCircleOutlined,
|
||||||
|
@ -24,6 +25,7 @@ import {
|
||||||
isIncrement,
|
isIncrement,
|
||||||
isReplace,
|
isReplace,
|
||||||
} from '../../utils/keyboard/shortcuts';
|
} from '../../utils/keyboard/shortcuts';
|
||||||
|
import LandscapeNotice from './LandscapeNotice';
|
||||||
|
|
||||||
type CellsType = boolean[][];
|
type CellsType = boolean[][];
|
||||||
type DataType = number[][];
|
type DataType = number[][];
|
||||||
|
@ -35,6 +37,8 @@ enum Operations {
|
||||||
}
|
}
|
||||||
type HslType = [number, number, number];
|
type HslType = [number, number, number];
|
||||||
|
|
||||||
|
const { useBreakpoint } = Grid;
|
||||||
|
|
||||||
const Map = ({
|
const Map = ({
|
||||||
name,
|
name,
|
||||||
xData,
|
xData,
|
||||||
|
@ -60,6 +64,7 @@ const Map = ({
|
||||||
xUnits: string,
|
xUnits: string,
|
||||||
yUnits: string,
|
yUnits: string,
|
||||||
}) => {
|
}) => {
|
||||||
|
const { sm } = useBreakpoint();
|
||||||
const titleProps = { disabled: true };
|
const titleProps = { disabled: true };
|
||||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||||
const [modalValue, setModalValue] = useState<number | undefined>();
|
const [modalValue, setModalValue] = useState<number | undefined>();
|
||||||
|
@ -217,6 +222,10 @@ const Map = ({
|
||||||
return result;
|
return result;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!sm) {
|
||||||
|
return <LandscapeNotice />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="table">
|
<div className="table">
|
||||||
|
|
Loading…
Reference in New Issue