remove nested theme provider

siriwatknp · Aug 19, 2021 · 7e2e2d9 · 7e2e2d9
1 parent 1257f36
commit 7e2e2d9
Show file tree

Hide file tree

Showing 14 changed files with 653 additions and 1,537 deletions.
diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
@@ -1,24 +1,24 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
-// import Button from '@material-ui/core/Button';
+import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-// import Stack from '@material-ui/core/Stack';
+import Stack from '@material-ui/core/Stack';
 import GradientText from 'docs/src/components/typography/GradientText';
-// import PlayerCard from 'docs/src/components/showcase/PlayerCard';
-// import TaskCard from 'docs/src/components/showcase/TaskCard';
-// import NotificationCard from 'docs/src/components/showcase/NotificationCard';
-// import ThemeChip from 'docs/src/components/showcase/ThemeChip';
-// import ThemeDatePicker from 'docs/src/components/showcase/ThemeDatePicker';
-// import ThemeSlider from 'docs/src/components/showcase/ThemeSlider';
-// import FolderTable from 'docs/src/components/showcase/FolderTable';
-// import ThemeTabs from 'docs/src/components/showcase/ThemeTabs';
-// import ThemeTimeline from 'docs/src/components/showcase/ThemeTimeline';
-// import ViewToggleButton from 'docs/src/components/showcase/ViewToggleButton';
-// import ThemeToggleButton from 'docs/src/components/showcase/ThemeToggleButton';
-// import ThemeSwitch from 'docs/src/components/showcase/ThemeSwitch';
-// import ThemeAccordion from 'docs/src/components/showcase/ThemeAccordion';
+import PlayerCard from 'docs/src/components/showcase/PlayerCard';
+import TaskCard from 'docs/src/components/showcase/TaskCard';
+import NotificationCard from 'docs/src/components/showcase/NotificationCard';
+import ThemeChip from 'docs/src/components/showcase/ThemeChip';
+import ThemeDatePicker from 'docs/src/components/showcase/ThemeDatePicker';
+import ThemeSlider from 'docs/src/components/showcase/ThemeSlider';
+import FolderTable from 'docs/src/components/showcase/FolderTable';
+import ThemeTabs from 'docs/src/components/showcase/ThemeTabs';
+import ThemeTimeline from 'docs/src/components/showcase/ThemeTimeline';
+import ViewToggleButton from 'docs/src/components/showcase/ViewToggleButton';
+import ThemeToggleButton from 'docs/src/components/showcase/ThemeToggleButton';
+import ThemeSwitch from 'docs/src/components/showcase/ThemeSwitch';
+import ThemeAccordion from 'docs/src/components/showcase/ThemeAccordion';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 
 export default function Hero() {
@@ -38,8 +38,8 @@ export default function Hero() {
       <Container
         sx={{
           minHeight: 500,
-          height: 'calc(100vh - 120px)',
-          maxHeight: { xs: 500, sm: 700, xl: 1000 },
+          // height: 'calc(100vh - 120px)',
+          // maxHeight: { xs: 500, sm: 700, xl: 1000 },
           transition: '0.3s',
         }}
       >
@@ -76,8 +76,8 @@ export default function Hero() {
                 bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
                 minWidth: 2000,
                 minHeight: 500,
-                height: 'calc(100vh - 120px)',
-                maxHeight: { lg: 700, xl: 1000 },
+                // height: 'calc(100vh - 120px)',
+                // maxHeight: { lg: 700, xl: 1000 },
                 borderBottomLeftRadius: 10,
                 transition: 'max-height 0.3s',
                 '& > div': {
@@ -98,7 +98,7 @@ export default function Hero() {
                 },
               }}
             >
-              {/* <Stack spacing={4} sx={{ '& > .MuiPaper-root': { maxWidth: 'none' } }}>
+              <Stack spacing={4} sx={{ '& > .MuiPaper-root': { maxWidth: 'none' } }}>
                 <TaskCard />
                 <PlayerCard />
                 <ThemeToggleButton />
@@ -129,7 +129,7 @@ export default function Hero() {
                 </Box>
                 <ThemeAccordion />
                 <NotificationCard />
-              </Stack> */}
+              </Stack>
             </Box>
           </Grid>
         </Grid>

diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles';
+import { Theme } from '@material-ui/core/styles';
 import Box from '@material-ui/core/Box';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -60,95 +60,7 @@ function formatSize(size: number) {
   return `${(kb / 1000).toFixed(0)} MB`;
 }
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  main: '#007FFF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function BasicTable() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://next.material-ui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          grey,
-          ...(mode === 'light' && {
-            text: {
-              primary: grey[800],
-              secondary: grey[600],
-            },
-          }),
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          success: {
-            main: mode === 'dark' ? '#1AA251' : '#178D46',
-          },
-          background: {
-            paper: mode === 'dark' ? primaryDark[800] : '#fff',
-          },
-        },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        shape: {
-          borderRadius: 10,
-        },
-        components: {
-          MuiTableCell: {
-            styleOverrides: {
-              root: {
-                borderColor: mode === 'dark' ? primaryDark[500] : grey[200],
-              },
-              sizeSmall: {
-                padding: '0.625rem 1rem',
-              },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof Data>('name');
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Data) => {
@@ -164,55 +76,66 @@ export default function BasicTable() {
     { id: 'size', label: 'Size', TableCellProps: { align: 'right' } },
   ] as const;
   return (
-    <ThemeProvider theme={theme}>
-      <TableContainer component={Paper} variant="outlined" sx={{ maxWidth: 260 }}>
-        <Table aria-label="folder table" size="small">
-          <TableHead>
-            <TableRow>
-              {headCells.map((headCell) => (
-                <TableCell
-                  key={headCell.id}
-                  sortDirection={orderBy === headCell.id ? order : false}
-                  {...headCell.TableCellProps}
+    <TableContainer
+      component={Paper}
+      variant="outlined"
+      sx={{
+        maxWidth: 260,
+        bgcolor: (theme) =>
+          theme.palette.mode === 'dark' ? theme.palette.primaryDark[800] : '#fff',
+      }}
+    >
+      <Table aria-label="folder table" size="small">
+        <TableHead>
+          <TableRow>
+            {headCells.map((headCell) => (
+              <TableCell
+                key={headCell.id}
+                sortDirection={orderBy === headCell.id ? order : false}
+                {...headCell.TableCellProps}
+              >
+                <TableSortLabel
+                  active={orderBy === headCell.id}
+                  direction={orderBy === headCell.id ? order : 'asc'}
+                  onClick={createSortHandler(headCell.id)}
+                  sx={{ fontSize: '0.75rem' }}
                 >
-                  <TableSortLabel
-                    active={orderBy === headCell.id}
-                    direction={orderBy === headCell.id ? order : 'asc'}
-                    onClick={createSortHandler(headCell.id)}
-                    sx={{ fontSize: '0.75rem' }}
-                  >
-                    {headCell.label}
-                    {orderBy === headCell.id ? (
-                      <Box component="span" sx={visuallyHidden}>
-                        {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                      </Box>
-                    ) : null}
-                  </TableSortLabel>
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {stableSort(data, getComparator(order, orderBy)).map((row) => (
-              <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                <TableCell component="th" scope="row">
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Folder
-                      sx={{ mr: 1 }}
-                      fontSize="small"
-                      htmlColor={mode === 'dark' ? primary[700] : grey[300]}
-                    />{' '}
-                    {row.name}
-                  </Box>
-                </TableCell>
-                <TableCell align="right" sx={{ color: 'success.main' }}>
-                  {formatSize(row.size)}
-                </TableCell>
-              </TableRow>
+                  {headCell.label}
+                  {orderBy === headCell.id ? (
+                    <Box component="span" sx={visuallyHidden}>
+                      {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                    </Box>
+                  ) : null}
+                </TableSortLabel>
+              </TableCell>
             ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </ThemeProvider>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {stableSort(data, getComparator(order, orderBy)).map((row) => (
+            <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell component="th" scope="row">
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Folder
+                    sx={{
+                      mr: 1,
+                      color: (theme: Theme) =>
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.primary[700]
+                          : theme.palette.grey[300],
+                    }}
+                    fontSize="small"
+                  />{' '}
+                  {row.name}
+                </Box>
+              </TableCell>
+              <TableCell align="right" sx={{ color: 'success.main' }}>
+                {formatSize(row.size)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }