72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
import React, { useState, useRef, useContext } from 'react';
|
|
import Tabs from './Tabs';
|
|
import WallpaperModal from './WallpaperModal';
|
|
import Button from './Button';
|
|
import styles from './WallpaperPreview.module.css';
|
|
import ThemeContext from './ThemeContext';
|
|
|
|
const wallpaperOptions = [
|
|
{ value: 'themer-wallpaper-block-wave', label: '"Block Wave"'},
|
|
{ value: 'themer-wallpaper-burst', label: '"Burst"'},
|
|
{ value: 'themer-wallpaper-diamonds', label: '"Diamonds"'},
|
|
{ value: 'themer-wallpaper-octagon', label: '"Octagon"'},
|
|
{ value: 'themer-wallpaper-triangles', label: '"Triangles"'},
|
|
{ value: 'themer-wallpaper-trianglify', label: '"Tranglify"'},
|
|
{ value: 'themer-wallpaper-shirts', label: '"Shirts"'},
|
|
];
|
|
|
|
export default () => {
|
|
const [activePreview, setActivePreview] = useState(null);
|
|
|
|
const buttonRefs = new Map(wallpaperOptions.map(option => [option.value, useRef(null)]));
|
|
|
|
const onModalClose = () => {
|
|
const button = buttonRefs.get(activePreview);
|
|
if (button.current) {
|
|
button.current.focus();
|
|
}
|
|
setActivePreview(null);
|
|
}
|
|
|
|
const { activeColorSet, activePreparedColorSet } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<Tabs>
|
|
{ ({ tabClassName, getTabStyle, contentClassName, contentStyle }) => (
|
|
<div>
|
|
<span
|
|
className={ tabClassName }
|
|
style={ getTabStyle(true) }
|
|
>Wallpaper</span>
|
|
<div className={ contentClassName } style={ contentStyle }>
|
|
<div className={ styles.buttons }>
|
|
{ wallpaperOptions.map(option => (
|
|
<Button
|
|
key={ option.value }
|
|
onClick={ () => {
|
|
setActivePreview(option.value);
|
|
window.__ssa__log('preview wallpaper', { wallpaper: option.value });
|
|
} }
|
|
ref={ buttonRefs.get(option.value) }
|
|
>Preview { option.label }</Button>
|
|
)) }
|
|
</div>
|
|
{ activePreview ? (
|
|
<WallpaperModal
|
|
wallpaper={ activePreview }
|
|
colors={{
|
|
[activeColorSet]: activePreparedColorSet
|
|
}}
|
|
onClose={ () => {
|
|
onModalClose();
|
|
window.__ssa__log('close wallpaper modal');
|
|
} }
|
|
/>
|
|
) : null }
|
|
</div>
|
|
</div>
|
|
) }
|
|
</Tabs>
|
|
);
|
|
}
|