fix build fail

mui · Jul 13, 2019 · 85ddc9d · 85ddc9d
1 parent 8aee9f7
commit 85ddc9d
Show file tree

Hide file tree

Showing 3 changed files with 305 additions and 305 deletions.
diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js
@@ -7,17 +7,27 @@ import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 
 function TabPanel(props) {
-  const { children, ...other } = props;
+  const { children, value, index, ...other } = props;
 
   return (
-    <Typography component="div" role="tabpanel" style={{ padding: 8 * 3 }} {...other}>
+    <Typography
+      component="div"
+      role="tabpanel"
+      style={{ padding: 8 * 3 }}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
       {children}
     </Typography>
   );
 }
 
 TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
 };
 
 const useStyles = makeStyles(theme => ({
@@ -35,22 +45,29 @@ export default function SimpleTabs() {
     setValue(newValue);
   }
 
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
   return (
     <div className={classes.root}>
       <AppBar position="static" aria-label="Simple tabs example">
         <Tabs value={value} onChange={handleChange}>
-          <Tab label="Item One" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
-          <Tab label="Item Two" id="simple-tab-2" aria-controls="simple-tabpanel-2" />
-          <Tab label="Item Three" id="simple-tab-3" aria-controls="simple-tabpanel-3" />
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
-      <TabPanel hidden={value !== 0} id="simple-tabpanel-1" aria-labelledby="simple-tab-1">
+      <TabPanel value={value} index={0}>
         Item One
       </TabPanel>
-      <TabPanel hidden={value !== 1} id="simple-tabpanel-2" aria-labelledby="simple-tab-2">
+      <TabPanel value={value} index={1}>
         Item Two
       </TabPanel>
-      <TabPanel hidden={value !== 2} id="simple-tabpanel-3" aria-labelledby="simple-tab-3">
+      <TabPanel value={value} index={2}>
         Item Three
       </TabPanel>
     </div>

diff --git a/docs/src/pages/components/tabs/SimpleTabs.tsx b/docs/src/pages/components/tabs/SimpleTabs.tsx
@@ -8,20 +8,32 @@ import Typography from '@material-ui/core/Typography';
 
 interface TabPanelProps {
   children?: React.ReactNode;
+  index: number;
+  value: number;
 }
 
 function TabPanel(props: TabPanelProps) {
-  const { children, ...other } = props;
+  const { children, value, index, ...other } = props;
 
   return (
-    <Typography component="div" role="tabpanel" style={{ padding: 8 * 3 }} {...other}>
+    <Typography
+      component="div"
+      role="tabpanel"
+      style={{ padding: 8 * 3 }}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
       {children}
     </Typography>
   );
 }
 
 TabPanel.propTypes = {
   children: PropTypes.node.isRequired,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
 };
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -41,22 +53,29 @@ export default function SimpleTabs() {
     setValue(newValue);
   }
 
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
   return (
     <div className={classes.root}>
       <AppBar position="static" aria-label="Simple tabs example">
         <Tabs value={value} onChange={handleChange}>
-          <Tab label="Item One" id="simple-tab-1" aria-controls="simple-tabpanel-1" />
-          <Tab label="Item Two" id="simple-tab-2" aria-controls="simple-tabpanel-2" />
-          <Tab label="Item Three" id="simple-tab-3" aria-controls="simple-tabpanel-3" />
+          <Tab label="Item One" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
         </Tabs>
       </AppBar>
-      <TabPanel hidden={value !== 0} id="simple-tabpanel-1" aria-labelledby="simple-tab-1">
+      <TabPanel value={value} index={0}>
         Item One
       </TabPanel>
-      <TabPanel hidden={value !== 1} id="simple-tabpanel-2" aria-labelledby="simple-tab-2">
+      <TabPanel value={value} index={1}>
         Item Two
       </TabPanel>
-      <TabPanel hidden={value !== 2} id="simple-tabpanel-3" aria-labelledby="simple-tab-3">
+      <TabPanel value={value} index={2}>
         Item Three
       </TabPanel>
     </div>