import React from 'react' import dynamic from 'next/dynamic' import Dropdown from '../Dropdown' import { managePopout } from '../Popout' import ThemeIcon from '../svg/Theme' import RemoveIcon from '../svg/Remove' import { COLORS } from '../../lib/constants' const ThemeCreate = dynamic(() => import('./ThemeCreate'), { loading: () => null, }) const ThemeItem = ({ children, item, isSelected, remove }) => (
{children} {item.custom && !isSelected && (
{ e.stopPropagation() remove(item.id) }} >
)}
) const themeIcon = const getCustomName = themes => `Custom Theme ${themes.filter(({ name }) => name.startsWith('Custom Theme')).length + 1}` class Themes extends React.PureComponent { state = { name: '', } dropdown = React.createRef() static getDerivedStateFromProps(props) { if (!props.isVisible) { return { name: getCustomName(props.themes), } } return null } handleThemeSelected = theme => { if (theme) { const { toggleVisibility, update } = this.props if (theme.id === 'create') { toggleVisibility() this.dropdown.current.closeMenu() } else { update(theme.id) } } } create = theme => { this.props.toggleVisibility() this.props.create(theme) } itemWrapper = props => render() { const { themes, theme, isVisible, toggleVisibility } = this.props const highlights = { ...theme.highlights, ...this.props.highlights } const dropdownValue = isVisible ? { name: this.state.name } : theme const dropdownList = [ { id: 'create', name: 'Create +', }, ...themes, ] return (
{isVisible && ( this.setState({ name: e.target.value })} /> )}
) } } export default managePopout(Themes)