Merge pull request #3366 from tylershuster/sigil-speedup

interface: Sigil speedup

pkg/interface/src/logic/lib/sigil.js

@@ -1,48 +1,39 @@
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 import { sigil, reactRenderer } from 'urbit-sigil-js';
 
-export class Sigil extends Component {
-  static foregroundFromBackground(background) {
-    const rgb = {
-      r: parseInt(background.slice(1, 3), 16),
-      g: parseInt(background.slice(3, 5), 16),
-      b: parseInt(background.slice(5, 7), 16)
-    };
-    const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
-    const whiteBrightness = 255;
+export const foregroundFromBackground = (background) => {
+  const rgb = {
+    r: parseInt(background.slice(1, 3), 16),
+    g: parseInt(background.slice(3, 5), 16),
+    b: parseInt(background.slice(5, 7), 16)
+  };
+  const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
+  const whiteBrightness = 255;
 
-    return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
-  }
-  
-  render() {
-    const { props } = this;
-
-    const classes = props.classes || '';
-
-    const foreground = Sigil.foregroundFromBackground(props.color);
-
-    if (props.ship.length > 14) {
-      return (
-        <div
-          className={'bg-black dib ' + classes}
-          style={{ width: props.size, height: props.size }}
-        ></div>
-      );
-    } else {
-      return (
-        <div
-          className={'dib ' + classes}
-          style={{ flexBasis: props.size, backgroundColor: props.color }}
-        >
-          {sigil({
-            patp: props.ship,
-            renderer: reactRenderer,
-            size: props.size,
-            colors: [props.color, foreground],
-            class: props.svgClass
-          })}
-        </div>
-      );
-    }
-  }
+  return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
 }
+
+export const Sigil = memo(({ classes = '', color, ship, size, svgClass = '' }) => {
+  return ship.length > 14
+    ? (<div
+      className={'bg-black dib ' + classes}
+      style={{ width: size, height: size }}>
+    </div>)
+    : (<div
+      className={'dib ' + classes}
+      style={{ flexBasis: size, backgroundColor: color }}
+    >
+      {sigil({
+        patp: ship,
+        renderer: reactRenderer,
+        size: size,
+        colors: [
+          color,
+          foregroundFromBackground(color)
+        ],
+        class: svgClass
+      })}
+    </div>)
+})
+
+export default Sigil;

pkg/interface/src/views/App.js

@@ -22,7 +22,7 @@ import GlobalStore from '~/logic/store/store';
 import GlobalSubscription from '~/logic/subscription/global';
 import GlobalApi from '~/logic/api/global';
 import { uxToHex } from '~/logic/lib/util';
-import { Sigil } from '~/logic/lib/sigil';
+import { foregroundFromBackground } from '~/logic/lib/sigil';
 
 const Root = styled.div`
   font-family: ${p => p.theme.fonts.sans};
@@ -85,7 +85,7 @@ class App extends React.Component {
       if (this.state.contacts.hasOwnProperty('/~/default')) {
         background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
       }
-      const foreground = Sigil.foregroundFromBackground(background);
+      const foreground = foregroundFromBackground(background);
       const svg = sigiljs({
         patp: window.ship,
         renderer: stringRenderer,