import React from 'react' import Checkmark from './svg/Checkmark' import { COLORS } from '../lib/constants' import { toggle } from '../lib/util' class ListSetting extends React.Component { static defaultProps = { onOpen: () => {}, onClose: () => {}, } state = { isVisible: false } select = id => { if (this.props.selected !== id) { this.props.onChange(id) } } toggle = () => { const handler = this.state.isVisible ? this.props.onClose : this.props.onOpen handler() this.setState(toggle('isVisible')) } renderListItems() { return this.props.items.map(item => (
{this.props.children(item, this.props.selected)} {this.props.selected === item.id ? : null}
)) } render() { const { items, selected, title, children } = this.props const { isVisible } = this.state const selectedItem = items.filter(item => item.id === selected)[0] || {} return (
{title} {children(selectedItem)}
{this.renderListItems()}
) } } export default ListSetting