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 = class Themes extends React.PureComponent { state = { highlights: {} } dropdown = React.createRef() static getDerivedStateFromProps(props) { if (!props.isVisible) { return { highlights: {} } } return null } handleThemeSelected = theme => { const { toggleVisibility, update } = this.props if (theme.id === 'create') { toggleVisibility() this.dropdown.current.closeMenu() } else { update(theme) } } updateHighlights = updates => this.setState(({ highlights }) => ({ highlights: { ...highlights, ...updates } })) create = theme => { this.props.toggleVisibility() this.props.create(theme) } itemWrapper = props => render() { const { themes, theme, isVisible, toggleVisibility } = this.props const highlights = { ...theme.highlights, ...this.state.highlights } const dropdownValue = isVisible ? { name: '' } : { id: theme.id, name: theme.name } const dropdownList = [ { id: 'create', name: 'Create +' }, ...themes ] let isColorLight = color => { var r, g, b, hsp color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&')) r = color >> 16 g = color >> 8 & 255 b = color & 255; hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) ) return hsp > 127.5 } return (
{isVisible && ( )}
) } } export default managePopout(Themes)