Turbo Render (#298)

* More responsive React updates on scroll * `Icon`s now use shadow dom * Faster Sparkline * Recycle table rows * Separate Header from Chain to avoid vdom diffing * Separate THead from Row.HEADER to avoid vdom diffing * Throttle rendering updates on chain tabs, also styles * Minor tweaks and fixes * Created components for all columns * Wrapping up Column refactor * Rename Row--td to Column * Lazy `Ago` * Update styles for faster layouting * Minor cleanup * Fix Connection * Use shadow DOM in `PolkadotIcon` * Comments and tweaks for the List component * Faster Tooltip and Truncate * Minor tweaks * Tooltiped columns can now be copied * Future-proof Connection * Remove the <div> wrapper from Icon * Fix dash on missing graph data * Clean up some SVGs * Cleanup and comments * Localize the use of `previousKeys` to `recalculateKeys` * Custom appState disjoint from React component state * Make appState and appUpdate refs readonly * Cleanup
2026-06-14 07:11:01 +00:00 · 2020-11-11 13:41:01 +01:00
parent 675776c3e1
commit ebb01c1a7d
72 changed files with 1863 additions and 1118 deletions
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Maybe } from '../../../common';
+import { Column } from './';
+import { Node } from '../../../state';
+import { Tooltip, PolkadotIcon } from '../../';
+import icon from '../../../icons/shield.svg';
+
+export class ValidatorColumn extends React.Component<Column.Props, {}> {
+  public static readonly label = 'Validator';
+  public static readonly icon = icon;
+  public static readonly width = 16;
+  public static readonly setting = 'validator';
+  public static readonly sortBy = ({ validator }: Node) => validator || '';
+
+  private data: Maybe<string>;
+  private copy: Maybe<Tooltip.CopyCallback>;
+
+  public shouldComponentUpdate(nextProps: Column.Props) {
+    return this.data !== nextProps.node.validator;
+  }
+
+  render() {
+    const { validator } = this.props.node;
+
+    this.data = validator;
+
+    if (!validator) {
+      return <td className="Column">-</td>;
+    }
+
+    return (
+      <td className="Column" onClick={this.onClick}>
+        <Tooltip text={validator} copy={this.onCopy} />
+        <PolkadotIcon
+          className="Column-validator"
+          account={validator}
+          size={16}
+        />
+      </td>
+    );
+  }
+
+  private onCopy = (copy: Tooltip.CopyCallback) => {
+    this.copy = copy;
+  };
+
+  private onClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    if (this.copy != null) {
+      this.copy();
+    }
+  };
+}