import React from 'react' import enhanceWithClickOutside from 'react-click-outside' import SettingsIcon from './svg/Settings' import ThemeSelect from './ThemeSelect' import FontSelect from './FontSelect' import ExportSizeSelect from './ExportSizeSelect' import Slider from './Slider' import Toggle from './Toggle' import WindowPointer from './WindowPointer' import Collapse from './Collapse' import { COLORS } from '../lib/constants' import { toggle, formatCode } from '../lib/util' class Settings extends React.PureComponent { constructor(props) { super(props) this.state = { isVisible: false } this.toggle = this.toggle.bind(this) this.format = this.format.bind(this) this.handleInputChange = this.handleInputChange.bind(this) } toggle() { this.setState(toggle('isVisible')) } handleClickOutside() { this.setState({ isVisible: false }) } handleInputChange(e) { this.props.onChange(e.target.name, e.target.value) } format() { return formatCode(this.props.code) .then(this.props.onChange.bind(this, 'code')) .catch(() => { // create toast here in the future }) } render() { return (
Reset settings} center={true} enabled={false} onChange={this.props.resetDefaultSettings} />
) } } export default enhanceWithClickOutside(Settings)