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 {
|
||||
CartesianGrid,
|
||||
|
@ -10,8 +13,11 @@ import {
|
|||
ResponsiveContainer,
|
||||
Label,
|
||||
} from 'recharts';
|
||||
import LandscapeNotice from './LandscapeNotice';
|
||||
import Table from './Table';
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const Curve = ({
|
||||
name,
|
||||
xLabel,
|
||||
|
@ -46,11 +52,16 @@ const Curve = ({
|
|||
y: rawData[0][i],
|
||||
}));
|
||||
const [data, setData] = useState(mapData([yData, xData]));
|
||||
const { sm } = useBreakpoint();
|
||||
const margin = 15;
|
||||
const mainColor = '#ccc';
|
||||
const tooltipBg = '#2E3338';
|
||||
const animationDuration = 500;
|
||||
|
||||
if (!sm) {
|
||||
return <LandscapeNotice />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<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,
|
||||
Popover,
|
||||
Space,
|
||||
Grid,
|
||||
} from 'antd';
|
||||
import {
|
||||
PlusCircleOutlined,
|
||||
|
@ -24,6 +25,7 @@ import {
|
|||
isIncrement,
|
||||
isReplace,
|
||||
} from '../../utils/keyboard/shortcuts';
|
||||
import LandscapeNotice from './LandscapeNotice';
|
||||
|
||||
type CellsType = boolean[][];
|
||||
type DataType = number[][];
|
||||
|
@ -35,6 +37,8 @@ enum Operations {
|
|||
}
|
||||
type HslType = [number, number, number];
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const Map = ({
|
||||
name,
|
||||
xData,
|
||||
|
@ -60,6 +64,7 @@ const Map = ({
|
|||
xUnits: string,
|
||||
yUnits: string,
|
||||
}) => {
|
||||
const { sm } = useBreakpoint();
|
||||
const titleProps = { disabled: true };
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [modalValue, setModalValue] = useState<number | undefined>();
|
||||
|
@ -217,6 +222,10 @@ const Map = ({
|
|||
return result;
|
||||
});
|
||||
|
||||
if (!sm) {
|
||||
return <LandscapeNotice />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="table">
|
||||
|
|
Loading…
Reference in New Issue