remove use memo from settings (#869)

components/Settings.js

@@ -24,151 +24,152 @@ function KeyboardShortcut({ handle }) {
   return null
 }
 
-const WindowSettings = React.memo(
+function WindowSettings({
-  ({
+  onChange,
-    onChange,
+  windowTheme,
-    windowTheme,
+  paddingHorizontal,
-    paddingHorizontal,
+  paddingVertical,
-    paddingVertical,
+  dropShadow,
-    dropShadow,
+  dropShadowBlurRadius,
-    dropShadowBlurRadius,
+  dropShadowOffsetY,
-    dropShadowOffsetY,
+  windowControls,
-    windowControls,
+  lineNumbers,
-    lineNumbers,
+  firstLineNumber,
-    firstLineNumber,
+  widthAdjustment,
-    widthAdjustment,
+  watermark,
-    watermark,
+  onWidthChanging,
-    onWidthChanging,
+  onWidthChanged
-    onWidthChanged
+}) {
-  }) => {
+  return (
-    return (
+    <div className="settings-content">
-      <div className="settings-content">
+      <ThemeSelect selected={windowTheme || 'none'} onChange={onChange.bind(null, 'windowTheme')} />
-        <ThemeSelect
+      <div className="row">
-          selected={windowTheme || 'none'}
+        <Slider
-          onChange={onChange.bind(null, 'windowTheme')}
+          label="Padding (vert)"
+          value={paddingVertical}
+          maxValue={200}
+          onChange={onChange.bind(null, 'paddingVertical')}
         />
-        <div className="row">
+        <Slider
+          label="Padding (horiz)"
+          value={paddingHorizontal}
+          onChange={onChange.bind(null, 'paddingHorizontal')}
+          onMouseDown={onWidthChanging}
+          onMouseUp={onWidthChanged}
+        />
+      </div>
+      <Toggle
+        label="Drop shadow"
+        enabled={dropShadow}
+        onChange={onChange.bind(null, 'dropShadow')}
+      />
+      {dropShadow && (
+        <div className="row drop-shadow-options">
           <Slider
-            label="Padding (vert)"
+            label="(offset-y)"
-            value={paddingVertical}
+            value={dropShadowOffsetY}
-            maxValue={200}
+            onChange={onChange.bind(null, 'dropShadowOffsetY')}
-            onChange={onChange.bind(null, 'paddingVertical')}
           />
           <Slider
-            label="Padding (horiz)"
+            label="(blur-radius)"
-            value={paddingHorizontal}
+            value={dropShadowBlurRadius}
-            onChange={onChange.bind(null, 'paddingHorizontal')}
+            onChange={onChange.bind(null, 'dropShadowBlurRadius')}
-            onMouseDown={onWidthChanging}
-            onMouseUp={onWidthChanged}
           />
         </div>
-        <Toggle
+      )}
-          label="Drop shadow"
+      <Toggle
-          enabled={dropShadow}
+        label="Window controls"
-          onChange={onChange.bind(null, 'dropShadow')}
+        enabled={windowControls}
-        />
+        onChange={onChange.bind(null, 'windowControls')}
-        {dropShadow && (
+      />
-          <div className="row drop-shadow-options">
+      <Toggle
-            <Slider
+        label="Line numbers"
-              label="(offset-y)"
+        enabled={lineNumbers}
-              value={dropShadowOffsetY}
+        onChange={onChange.bind(null, 'lineNumbers')}
-              onChange={onChange.bind(null, 'dropShadowOffsetY')}
+      />
-            />
+      {lineNumbers && (
-            <Slider
+        <div className="row settings-row first-line-number-row">
-              label="(blur-radius)"
+          <Input
-              value={dropShadowBlurRadius}
+            label="First line number"
-              onChange={onChange.bind(null, 'dropShadowBlurRadius')}
+            type="number"
-            />
+            value={firstLineNumber}
-          </div>
+            min={0}
-        )}
+            onChange={e => onChange('firstLineNumber', Number(e.target.value))}
-        <Toggle
+            width="50%"
-          label="Window controls"
+          />
-          enabled={windowControls}
+        </div>
-          onChange={onChange.bind(null, 'windowControls')}
+      )}
-        />
+      <Toggle
-        <Toggle
+        label="Auto-adjust width"
-          label="Line numbers"
+        enabled={widthAdjustment}
-          enabled={lineNumbers}
+        onChange={onChange.bind(null, 'widthAdjustment')}
-          onChange={onChange.bind(null, 'lineNumbers')}
+      />
-        />
+      <Toggle label="Watermark" enabled={watermark} onChange={onChange.bind(null, 'watermark')} />
-        {lineNumbers && (
+      <style jsx>
-          <div className="row settings-row first-line-number-row">
+        {`
-            <Input
+          .row > :global(div:first-child) {
-              label="First line number"
+            border-right: 1px solid ${COLORS.SECONDARY};
-              type="number"
+          }
-              value={firstLineNumber}
-              min={0}
-              onChange={e => onChange('firstLineNumber', Number(e.target.value))}
-              width="50%"
-            />
-          </div>
-        )}
-        <Toggle
-          label="Auto-adjust width"
-          enabled={widthAdjustment}
-          onChange={onChange.bind(null, 'widthAdjustment')}
-        />
-        <Toggle label="Watermark" enabled={watermark} onChange={onChange.bind(null, 'watermark')} />
-        <style jsx>
-          {`
-            .row > :global(div:first-child) {
-              border-right: 1px solid ${COLORS.SECONDARY};
-            }
 
-            .drop-shadow-options :global(.slider-bg),
+          .drop-shadow-options :global(.slider-bg),
-            .drop-shadow-options :global(label) {
+          .drop-shadow-options :global(label) {
-              opacity: 0.5;
+            opacity: 0.5;
-            }
+          }
 
-            .settings-content :global(.settings-row:focus-within) {
+          .settings-content :global(.settings-row:focus-within) {
-              outline: -webkit-focus-ring-color auto 4px;
+            outline: -webkit-focus-ring-color auto 4px;
-            }
+          }
 
-            .first-line-number-row {
+          .first-line-number-row {
-              padding: 8px 12px 8px 8px;
+            padding: 8px 12px 8px 8px;
-            }
+          }
-          `}
+        `}
-        </style>
+      </style>
-      </div>
+    </div>
-    )
+  )
-  }
+}
-)
 
-const TypeSettings = React.memo(
+function TypeSettings({
-  ({ onChange, onUpload, font, size, lineHeight, onWidthChanging, onWidthChanged }) => {
+  onChange,
-    return (
+  onUpload,
-      <div className="settings-content">
+  font,
-        <FontSelect
+  size,
-          selected={font}
+  lineHeight,
-          onUpload={onUpload}
+  onWidthChanging,
-          onChange={onChange.bind(null, 'fontFamily')}
+  onWidthChanged
-        />
+}) {
-        <Slider
+  return (
-          label="Size"
+    <div className="settings-content">
-          value={size}
+      <FontSelect
-          minValue={10}
+        selected={font}
-          maxValue={18}
+        onUpload={onUpload}
-          step={0.5}
+        onChange={onChange.bind(null, 'fontFamily')}
-          onChange={onChange.bind(null, 'fontSize')}
+      />
-          onMouseDown={onWidthChanging}
+      <Slider
-          onMouseUp={onWidthChanged}
+        label="Size"
-        />
+        value={size}
-        <Slider
+        minValue={10}
-          label="Line height"
+        maxValue={18}
-          value={lineHeight}
+        step={0.5}
-          minValue={90}
+        onChange={onChange.bind(null, 'fontSize')}
-          maxValue={250}
+        onMouseDown={onWidthChanging}
-          unit="%"
+        onMouseUp={onWidthChanged}
-          onChange={onChange.bind(null, 'lineHeight')}
+      />
-        />
+      <Slider
-      </div>
+        label="Line height"
-    )
+        value={lineHeight}
-  }
+        minValue={90}
-)
+        maxValue={250}
+        unit="%"
+        onChange={onChange.bind(null, 'lineHeight')}
+      />
+    </div>
+  )
+}
 
 const resetButtonStyle = { borderTop: `1px solid ${COLORS.SECONDARY}` }
 
-const MiscSettings = React.memo(({ format, reset, applyPreset, settings }) => {
+function MiscSettings({ format, reset, applyPreset, settings }) {
   const input = React.useRef(null)
   let download
   try {
@@ -226,7 +227,7 @@ const MiscSettings = React.memo(({ format, reset, applyPreset, settings }) => {
       </style>
     </div>
   )
-})
+}
 
 const settingButtonStyle = {
   width: '40px',