Refactor list settings (#553)

* refactor list setting components

* remove mention of font

components/ExportSizeSelect.js

@@ -1,95 +1,15 @@
 import React from 'react'
-import Checkmark from './svg/Checkmark'
+import ListSetting from './ListSetting'
-import { EXPORT_SIZES, COLORS } from '../lib/constants'
+import { EXPORT_SIZES } from '../lib/constants'
 
-class ExportSizeSelect extends React.Component {
+const exportSize = size => <span>{size.name}</span>
-  constructor(props) {
-    super(props)
-    this.state = { isVisible: false }
-    this.select = this.select.bind(this)
-    this.toggle = this.toggle.bind(this)
-  }
-
-  select(exportSize) {
-    if (this.props.selected !== exportSize) {
-      this.props.onChange(exportSize)
-    }
-  }
 
-  toggle() {
+function ExportSizeSelect(props) {
-    this.setState({ isVisible: !this.state.isVisible })
-  }
-
-  renderExportSizes() {
-    return EXPORT_SIZES.map(exportSize => (
-      <div
-        className="list-item"
-        key={exportSize.id}
-        onClick={this.select.bind(null, exportSize.id)}
-      >
-        <span style={{ ExportSize: exportSize.id }}>{exportSize.name}</span>
-        {this.props.selected === exportSize.id ? <Checkmark /> : null}
-        <style jsx>
-          {`
-            .list-item {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              cursor: pointer;
-              user-select: none;
-              padding: 8px 16px;
-              border-bottom: 1px solid ${COLORS.SECONDARY};
-              background: rgba(255, 255, 255, 0.165);
-            }
-            .list-item:first-of-type {
-              border-top: 1px solid ${COLORS.SECONDARY};
-            }
-            .list-item:last-of-type {
-              border-bottom: none;
-            }
-          `}
-        </style>
-      </div>
-    ))
-  }
-
-  render() {
-    const selectedExportSize =
-      EXPORT_SIZES.filter(exportSize => exportSize.id === this.props.selected)[0] || {}
   return (
-      <div className="export-size-select-container">
+    <ListSetting title="Export size" items={EXPORT_SIZES} {...props}>
-        <div
+      {exportSize}
-          onClick={this.toggle}
+    </ListSetting>
-          className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
-        >
-          <span className="label">Export size</span>
-          <span style={{ exportSize: selectedExportSize.id }}>{selectedExportSize.name}</span>
-        </div>
-        <div className="list">{this.renderExportSizes()}</div>
-        <style jsx>
-          {`
-            .display {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              cursor: pointer;
-              user-select: none;
-              padding: 8px;
-            }
-            .list {
-              display: none;
-              margin-top: -1px;
-              max-height: 80px;
-              overflow-y: scroll;
-            }
-            .is-visible + .list {
-              display: block;
-            }
-          `}
-        </style>
-      </div>
   )
 }
-}
 
 export default ExportSizeSelect

components/FontSelect.js

@@ -1,88 +1,15 @@
 import React from 'react'
-import Checkmark from './svg/Checkmark'
+import ListSetting from './ListSetting'
-import { COLORS, FONTS } from '../lib/constants'
+import { FONTS } from '../lib/constants'
 
-export default class extends React.Component {
+const Font = font => <span style={{ fontFamily: font.id }}>{font.name}</span>
-  constructor(props) {
-    super(props)
-    this.state = { isVisible: false }
-    this.select = this.select.bind(this)
-    this.toggle = this.toggle.bind(this)
-  }
-
-  select(fontId) {
-    if (this.props.selected !== fontId) {
-      this.props.onChange(fontId)
-    }
-  }
-
-  toggle() {
-    this.setState({ isVisible: !this.state.isVisible })
-  }
-
-  renderListItems() {
-    return FONTS.map(font => (
-      <div className="list-item" key={font.id} onClick={this.select.bind(null, font.id)}>
-        <span style={{ fontFamily: font.id }}>{font.name}</span>
-        {this.props.selected === font.id ? <Checkmark /> : null}
-        <style jsx>
-          {`
-            .list-item {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              cursor: pointer;
-              user-select: none;
-              padding: 8px 16px;
-              border-bottom: 1px solid ${COLORS.SECONDARY};
-              background: rgba(255, 255, 255, 0.165);
-            }
-            .list-item:first-of-type {
-              border-top: 1px solid ${COLORS.SECONDARY};
-            }
-            .list-item:last-of-type {
-              border-bottom: none;
-            }
-          `}
-        </style>
-      </div>
-    ))
-  }
 
-  render() {
+function FontSelect(props) {
-    const selectedFont = FONTS.filter(font => font.id === this.props.selected)[0] || {}
   return (
-      <div className="font-select-container">
+    <ListSetting title="Font family" items={FONTS} {...props}>
-        <div
+      {Font}
-          className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
+    </ListSetting>
-          onClick={this.toggle}
-        >
-          <span className="label">Font family</span>
-          <span style={{ fontFamily: selectedFont.id }}>{selectedFont.name}</span>
-        </div>
-        <div className="list">{this.renderListItems()}</div>
-        <style jsx>
-          {`
-            .display {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              cursor: pointer;
-              user-select: none;
-              padding: 8px;
-            }
-            .list {
-              display: none;
-              margin-top: -1px;
-              max-height: 80px;
-              overflow-y: scroll;
-            }
-            .is-visible + .list {
-              display: block;
-            }
-          `}
-        </style>
-      </div>
   )
 }
-}
+
+export default FontSelect

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 => (
+      <div className="list-item" key={item.id} onClick={this.select.bind(null, item.id)}>
+        {this.props.children(item)}
+        {this.props.selected === item.id ? <Checkmark /> : null}
+        <style jsx>
+          {`
+            .list-item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              cursor: pointer;
+              user-select: none;
+              padding: 8px 16px;
+              border-bottom: 1px solid ${COLORS.SECONDARY};
+              background: rgba(255, 255, 255, 0.165);
+            }
+            .list-item:first-of-type {
+              border-top: 1px solid ${COLORS.SECONDARY};
+            }
+            .list-item:last-of-type {
+              border-bottom: none;
+            }
+          `}
+        </style>
+      </div>
+    ))
+  }
+
+  render() {
+    const selectedItem = this.props.items.filter(item => item.id === this.props.selected)[0] || {}
+    return (
+      <div className="list-select-container">
+        <div
+          className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
+          onClick={this.toggle}
+        >
+          <span className="label">{this.props.title}</span>
+          {this.props.children(selectedItem)}
+        </div>
+        <div className="list">{this.renderListItems()}</div>
+        <style jsx>
+          {`
+            .display {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              cursor: pointer;
+              user-select: none;
+              padding: 8px;
+            }
+            .list {
+              display: none;
+              margin-top: -1px;
+              max-height: 80px;
+              overflow-y: scroll;
+            }
+            .is-visible + .list {
+              display: block;
+            }
+          `}
+        </style>
+      </div>
+    )
+  }
+}
+
+export default ListSetting