Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React, { useEffect, useState } from 'react';
import { useGlobals } from 'storybook/manager-api';
const ThemeSelector = () => {
const [themeList, setThemeList] = useState([]);
const [activeTheme, setActiveTheme] = useState([]);
const [globals, updateGlobals] = useGlobals();
const getSavedThemes = () => {
if (localStorage.getItem('sds-theme-builder-saved-themes')) {
const savedThemes = JSON.parse(localStorage.getItem('sds-theme-builder-saved-themes'));
setThemeList(savedThemes);
}
setActiveTheme(globals.brand);
};
useEffect(() => {
getSavedThemes();
}, [globals.brand]);
const updateThemeSelection = (theme) => {
if (theme === 'default') {
updateGlobals({ brand: 'default', themeState: globals.themeState.defaultValue });
} else {
let curTheme = JSON.parse(theme);
updateGlobals({ brand: curTheme.name, themeState: curTheme.themeData });
}
};
const selectStyle = {
background: 'rgba(115, 130, 140, 0.1)',
color: 'rgb(0, 87, 208)',
border: 'none',
padding: '5px',
'border-radius': '4px',
'font-size': '12px',
'font-weight': 'bold',
};
return (
<>
{themeList.length > 0 && (
<div>
<select onChange={(e) => updateThemeSelection(e.target.value)} style={selectStyle}>
<option key="default" value="default">
Default
</option>
{themeList.map((theme) => (
<option key={theme.id} value={JSON.stringify(theme)} selected={theme.name === activeTheme}>
{theme.name}
</option>
))}
</select>
</div>
)}
</>
);
};
export default ThemeSelector;
|