diff --git a/components/ExportSizeSelect.js b/components/ExportSizeSelect.js
index 40a7787..e5bbb2a 100644
--- a/components/ExportSizeSelect.js
+++ b/components/ExportSizeSelect.js
@@ -1,95 +1,15 @@
import React from 'react'
-import Checkmark from './svg/Checkmark'
-import { EXPORT_SIZES, COLORS } from '../lib/constants'
+import ListSetting from './ListSetting'
+import { EXPORT_SIZES } from '../lib/constants'
-class ExportSizeSelect extends React.Component {
- constructor(props) {
- super(props)
- this.state = { isVisible: false }
- this.select = this.select.bind(this)
- this.toggle = this.toggle.bind(this)
- }
+const exportSize = size => {size.name}
- select(exportSize) {
- if (this.props.selected !== exportSize) {
- this.props.onChange(exportSize)
- }
- }
-
- toggle() {
- this.setState({ isVisible: !this.state.isVisible })
- }
-
- renderExportSizes() {
- return EXPORT_SIZES.map(exportSize => (
-
- {exportSize.name}
- {this.props.selected === exportSize.id ? : null}
-
-
- ))
- }
-
- render() {
- const selectedExportSize =
- EXPORT_SIZES.filter(exportSize => exportSize.id === this.props.selected)[0] || {}
- return (
-
-
- Export size
- {selectedExportSize.name}
-
-
{this.renderExportSizes()}
-
-
- )
- }
+function ExportSizeSelect(props) {
+ return (
+
+ {exportSize}
+
+ )
}
export default ExportSizeSelect
diff --git a/components/FontSelect.js b/components/FontSelect.js
index 8af01fe..70989ff 100644
--- a/components/FontSelect.js
+++ b/components/FontSelect.js
@@ -1,88 +1,15 @@
import React from 'react'
-import Checkmark from './svg/Checkmark'
-import { COLORS, FONTS } from '../lib/constants'
+import ListSetting from './ListSetting'
+import { FONTS } from '../lib/constants'
-export default class extends React.Component {
- constructor(props) {
- super(props)
- this.state = { isVisible: false }
- this.select = this.select.bind(this)
- this.toggle = this.toggle.bind(this)
- }
+const Font = font => {font.name}
- select(fontId) {
- if (this.props.selected !== fontId) {
- this.props.onChange(fontId)
- }
- }
-
- toggle() {
- this.setState({ isVisible: !this.state.isVisible })
- }
-
- renderListItems() {
- return FONTS.map(font => (
-
- {font.name}
- {this.props.selected === font.id ? : null}
-
-
- ))
- }
-
- render() {
- const selectedFont = FONTS.filter(font => font.id === this.props.selected)[0] || {}
- return (
-
-
- Font family
- {selectedFont.name}
-
-
{this.renderListItems()}
-
-
- )
- }
+function FontSelect(props) {
+ return (
+
+ {Font}
+
+ )
}
+
+export default FontSelect
diff --git a/components/ListSetting.js b/components/ListSetting.js
new file mode 100644
index 0000000..1c99795
--- /dev/null
+++ b/components/ListSetting.js
@@ -0,0 +1,90 @@
+import React from 'react'
+import Checkmark from './svg/Checkmark'
+import { COLORS } from '../lib/constants'
+
+class ListSetting extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = { isVisible: false }
+ this.select = this.select.bind(this)
+ this.toggle = this.toggle.bind(this)
+ }
+
+ select(item) {
+ if (this.props.selected !== item) {
+ this.props.onChange(item)
+ }
+ }
+
+ toggle() {
+ this.setState({ isVisible: !this.state.isVisible })
+ }
+
+ renderListItems() {
+ return this.props.items.map(item => (
+
+ {this.props.children(item)}
+ {this.props.selected === item.id ? : null}
+
+
+ ))
+ }
+
+ render() {
+ const selectedItem = this.props.items.filter(item => item.id === this.props.selected)[0] || {}
+ return (
+
+
+ {this.props.title}
+ {this.props.children(selectedItem)}
+
+
{this.renderListItems()}
+
+
+ )
+ }
+}
+
+export default ListSetting