Skip to content

Commit

Permalink
Revert "[utils] Port useLocalStorageState hook from Toolpad (#41096)"
Browse files Browse the repository at this point in the history
This reverts commit b923a63.
See for why #41096 (comment)
  • Loading branch information
oliviertassinari committed Feb 24, 2024
1 parent e49570c commit 0d086a1
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 173 deletions.
24 changes: 17 additions & 7 deletions docs/src/components/header/ThemeModeToggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
import useLocalStorageState from '@mui/utils/useLocalStorageState';

function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
const [mounted, setMounted] = React.useState(false);
Expand Down Expand Up @@ -40,19 +39,30 @@ function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
export default function ThemeModeToggle() {
const theme = useTheme();
const changeTheme = useChangeTheme();
const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
const [mode, setMode] = React.useState<string | null>(null);
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const preferredMode = prefersDarkMode ? 'dark' : 'light';

React.useEffect(() => {
let initialMode = 'system';
try {
initialMode = localStorage.getItem('mui-mode') || initialMode;
} catch (error) {
// do nothing
}
setMode(initialMode);
}, []);

const handleChangeThemeMode = (checked: boolean) => {
const paletteMode = checked ? 'dark' : 'light';
setMode(paletteMode);
};

React.useEffect(() => {
const paletteMode = mode === 'system' ? preferredMode : mode;
try {
localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
} catch (error) {
// do nothing
}
changeTheme({ paletteMode });
}, [changeTheme, mode, preferredMode]);
};

if (mode === null) {
return <IconButton color="primary" disableTouchRipple />;
Expand Down
35 changes: 28 additions & 7 deletions docs/src/modules/components/AppSettingsDrawer.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirection
import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
import { useTranslate } from '@mui/docs/i18n';
import useLocalStorageState from '@mui/utils/useLocalStorageState';

const Heading = styled(Typography)(({ theme }) => ({
margin: '20px 0 10px',
Expand All @@ -43,22 +42,44 @@ function AppSettingsDrawer(props) {
const t = useTranslate();
const upperTheme = useTheme();
const changeTheme = useChangeTheme();
const [mode, setMode] = useLocalStorageState('mui-mode', 'system');
const [mode, setMode] = React.useState(null);
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const preferredMode = prefersDarkMode ? 'dark' : 'light';

React.useEffect(() => {
// syncing with homepage, can be removed once all pages are migrated to CSS variables
let initialMode = 'system';
try {
initialMode = localStorage.getItem('mui-mode') || initialMode;
} catch (error) {
// do nothing
}
setMode(initialMode);
}, [preferredMode]);

const handleChangeThemeMode = (event, paletteMode) => {
if (paletteMode === null) {
return;
}

setMode(paletteMode);
};

React.useEffect(() => {
const paletteMode = mode === 'system' ? preferredMode : mode;
changeTheme({ paletteMode });
}, [changeTheme, mode, preferredMode]);
if (paletteMode === 'system') {
try {
localStorage.setItem('mui-mode', 'system'); // syncing with homepage, can be removed once all pages are migrated to CSS variables
} catch (error) {
// thrown when cookies are disabled.
}
changeTheme({ paletteMode: preferredMode });
} else {
try {
localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
} catch (error) {
// thrown when cookies are disabled.
}
changeTheme({ paletteMode });
}
};

const handleChangeDirection = (event, direction) => {
if (direction === null) {
Expand Down
25 changes: 22 additions & 3 deletions docs/src/modules/components/HighlightedCodeWithTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Tabs, TabsOwnProps } from '@mui/base/Tabs';
import { TabsList as TabsListBase } from '@mui/base/TabsList';
import { TabPanel as TabPanelBase } from '@mui/base/TabPanel';
import { Tab as TabBase } from '@mui/base/Tab';
import useLocalStorageState from '@mui/utils/useLocalStorageState';
import HighlightedCode from './HighlightedCode';

const TabList = styled(TabsListBase)(({ theme }) => ({
Expand Down Expand Up @@ -86,16 +85,36 @@ export default function HighlightedCodeWithTabs({
storageKey?: string;
} & Record<string, any>) {
const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]);
const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
const [activeTab, setActiveTab] = React.useState(availableTabs[0]);

const [mounted, setMounted] = React.useState(false);

React.useEffect(() => {
try {
setActiveTab((prev) => {
if (storageKey === undefined) {
return prev;
}
const storedValues = localStorage.getItem(storageKey);

return storedValues && availableTabs.includes(storedValues) ? storedValues : prev;
});
} catch (error) {
// ignore error
}
setMounted(true);
}, []);
}, [availableTabs, storageKey]);

const handleChange: TabsOwnProps['onChange'] = (event, newValue) => {
setActiveTab(newValue as string);
if (storageKey === undefined) {
return;
}
try {
localStorage.setItem(storageKey, newValue as string);
} catch (error) {
// ignore error
}
};

const ownerState = { mounted };
Expand Down
1 change: 0 additions & 1 deletion packages/mui-utils/src/useLocalStorageState/index.ts

This file was deleted.

155 changes: 0 additions & 155 deletions packages/mui-utils/src/useLocalStorageState/useLocalStorageState.ts

This file was deleted.

0 comments on commit 0d086a1

Please sign in to comment.