Skip to content

Commit 339da14

Browse files
noemifrisinanoemifrisina
committed
Fix tabs
1 parent 3bb9329 commit 339da14

File tree

2 files changed

+85
-110
lines changed

2 files changed

+85
-110
lines changed

‎src/App.tsx‎

Lines changed: 65 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -11,104 +11,77 @@ import { BeamlineI24 } from "./routes/BeamlineI24";
1111
import { FixedTarget } from "./routes/FixedTarget";
1212
import { SerialNavBar } from "./components/SerialNavBar";
1313

14-
interface TabPanelProps {
15-
children?: React.ReactNode;
16-
index: number;
17-
value: number;
18-
}
19-
20-
function a11yProps(index: number) {
21-
return {
22-
id: `simple-tab-${index}`,
23-
"aria-controls": `simple-tabpanel-${index}`,
24-
};
25-
}
14+
// interface TabPanelProps {
15+
// children?: React.ReactNode;
16+
// index: number;
17+
// value: number;
18+
// }
2619

27-
function CustomTabPanel(props: TabPanelProps) {
28-
const { children, value, index, ...other } = props;
20+
// function a11yProps(index: number) {
21+
// return {
22+
// id: `simple-tab-${index}`,
23+
// "aria-controls": `simple-tabpanel-${index}`,
24+
// };
25+
// }
2926

30-
return (
31-
<div
32-
role="tabpanel"
33-
hidden={value !== index}
34-
id={`simple-tabpanel-${index}`}
35-
aria-labelledby={`simple-tab-${index}`}
36-
{...other}
37-
>
38-
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
39-
</div>
40-
);
41-
}
27+
// function CustomTabPanel(props: TabPanelProps) {
28+
// const { children, value, index, ...other } = props;
4229

43-
function FixedTargetPanels() {
44-
const theme = useTheme();
45-
const [value, setValue] = React.useState(0);
46-
const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
47-
setValue(newValue);
48-
};
49-
return (
50-
<div>
51-
<Box
52-
component="section"
53-
sx={{
54-
borderBottom: 1,
55-
borderColor: "divider",
56-
color: theme.palette.text.secondary,
57-
}}
58-
>
59-
<Tabs
60-
value={value}
61-
onChange={handleChange}
62-
aria-label="basic tabs example"
63-
textColor="secondary"
64-
centered
65-
>
66-
<Tab label="Beamline info" {...a11yProps(0)} />
67-
<Tab label="Detector position" {...a11yProps(1)} />
68-
<Tab label="OAV view" {...a11yProps(2)} />
69-
<Tab label="Fixed Target Collection" {...a11yProps(3)} />
70-
</Tabs>
71-
</Box>
72-
<CustomTabPanel value={value} index={0}>
73-
<BeamlineStatsTabPanel />
74-
</CustomTabPanel>
75-
<CustomTabPanel value={value} index={1}>
76-
<DetectorMotionTabPanel />
77-
</CustomTabPanel>
78-
<CustomTabPanel value={value} index={2}>
79-
<OavMover />
80-
</CustomTabPanel>
81-
<CustomTabPanel value={value} index={3}>
82-
<ParamsPanel />
83-
</CustomTabPanel>
84-
</div>
85-
);
86-
}
30+
// return (
31+
// <div
32+
// role="tabpanel"
33+
// hidden={value !== index}
34+
// id={`simple-tabpanel-${index}`}
35+
// aria-labelledby={`simple-tab-${index}`}
36+
// {...other}
37+
// >
38+
// {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
39+
// </div>
40+
// );
41+
// }
8742

88-
// function App() {
43+
// function FixedTargetPanels() {
8944
// const theme = useTheme();
90-
45+
// const [value, setValue] = React.useState(0);
46+
// const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
47+
// setValue(newValue);
48+
// };
9149
// return (
92-
// <Box
93-
// sx={[
94-
// () => ({
95-
// display: "flex",
96-
// justifyContent: "space-between",
97-
// flexDirection: "column",
98-
// minHeight: "100vh",
99-
// minWidth: "320px",
100-
// margin: 0,
101-
// }),
102-
// ]}
103-
// >
104-
// <FixedTargetPanels />
105-
// <Footer
106-
// logo={theme.logos?.short}
107-
// color={theme.palette.primary.main}
108-
// leftSlot={<ColourSchemeButton />}
109-
// containerWidth={false}
110-
// />
111-
// </Box>
50+
// <div>
51+
// <Box
52+
// component="section"
53+
// sx={{
54+
// borderBottom: 1,
55+
// borderColor: "divider",
56+
// color: theme.palette.text.secondary,
57+
// }}
58+
// >
59+
// <Tabs
60+
// value={value}
61+
// onChange={handleChange}
62+
// aria-label="basic tabs example"
63+
// textColor="secondary"
64+
// centered
65+
// >
66+
// <Tab label="Beamline info" {...a11yProps(0)} />
67+
// <Tab label="Detector position" {...a11yProps(1)} />
68+
// <Tab label="OAV view" {...a11yProps(2)} />
69+
// <Tab label="Fixed Target Collection" {...a11yProps(3)} />
70+
// </Tabs>
71+
// </Box>
72+
// <CustomTabPanel value={value} index={0}>
73+
// <BeamlineStatsTabPanel />
74+
// </CustomTabPanel>
75+
// <CustomTabPanel value={value} index={1}>
76+
// <DetectorMotionTabPanel />
77+
// </CustomTabPanel>
78+
// <CustomTabPanel value={value} index={2}>
79+
// <OavMover />
80+
// </CustomTabPanel>
81+
// <CustomTabPanel value={value} index={3}>
82+
// <ParamsPanel />
83+
// </CustomTabPanel>
84+
// </div>
11285
// );
11386
// }
11487

‎src/routes/BeamlineI24.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,27 @@ export function BeamlineI24() {
4141
setValue(newValue);
4242
};
4343
return (
44-
<Box
45-
component="section"
46-
sx={{
47-
borderBottom: 1,
48-
borderColor: "divider",
49-
color: theme.palette.text.secondary,
50-
}}
51-
>
52-
<Tabs
53-
value={value}
54-
onChange={handleChange}
55-
aria-label="basic tabs example"
56-
textColor="secondary"
57-
centered
44+
<Box>
45+
<Box
46+
component="section"
47+
sx={{
48+
borderBottom: 1,
49+
borderColor: "divider",
50+
color: theme.palette.text.secondary,
51+
}}
5852
>
59-
<Tab label="Beamline info" {...a11yProps(0)} />
60-
<Tab label="Detector position" {...a11yProps(1)} />
61-
<Tab label="OAV view" {...a11yProps(2)} />
62-
</Tabs>
53+
<Tabs
54+
value={value}
55+
onChange={handleChange}
56+
aria-label="basic tabs example"
57+
textColor="secondary"
58+
centered
59+
>
60+
<Tab label="Beamline info" {...a11yProps(0)} />
61+
<Tab label="Detector position" {...a11yProps(1)} />
62+
<Tab label="OAV view" {...a11yProps(2)} />
63+
</Tabs>
64+
</Box>
6365
<CustomTabPanel value={value} index={0}>
6466
<BeamlineStatsTabPanel />
6567
</CustomTabPanel>

0 commit comments

Comments
 (0)