alangpierce

export interface ActiveEnzymeProps {
  color: string;
  name: string;
}
function ActiveEnzyme({color, name}: ActiveEnzymeProps): JSX.Element {
  return (
    <>
      <td className="mono">{name}</td>
      <td>
        <div style={{backgroundColor: color}} className="swatch" />

alangpierce

function ActiveEnzyme({}: ActiveEnzymeProps): JSX.Element {
  return (
    <>
      <td className="mono">Acc65I</td>
      <td>
        <div style="background-color: #F58A5E;" className="swatch" />
      </td>
    </>
  );
}

alangpierce

import React from 'react';
import ActiveEnzymeJadeTemplate from 'toolbar/templates/activeenzyme.jade';
import {makeJadeTransitionShim} from 'util/makeJadeTransitionShim';
export interface ActiveEnzymeProps {
}
function ActiveEnzyme({}: ActiveEnzymeProps): JSX.Element {
  return <span>TODO</span>;
}
export default makeJadeTransitionShim<ActiveEnzymeProps>(ActiveEnzymeJadeTemplate, ActiveEnzyme);

alangpierce

type Template<T> = (args: T) => string;
export function makeJadeTransitionShim<T>(jadeTemplate: Template<T>, Component: React.ComponentType<T>): Template<T> {
  return (args: T) => {
    const jadeResult = jadeTemplate(args);
    const reactResult = ReactDOMServer.renderToStaticMarkup(<Component {...args} />);
    assert(jadeResult === reactResult, 'Results not equal!');
    return jadeResult;
  };
}

alangpierce

function template(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;
;var locals_for_with = (locals || {});(function (color, name) {
buf.push("<td class=\"mono\">" + (jade.escape(null == (jade_interp = name) ? "" : jade_interp)) + "</td><td>");
if ( color)
{
buf.push("<div" + (jade.attr("style", 'background-color:' + color, true, false)) + " class=\"swatch\"></div>");
}

alangpierce

export interface ActiveEnzymeProps {
  color: string;
  name: string;
  onRemove: () => void;
}
export default function ActiveEnzyme({color, name, onRemove}: ActiveEnzymeProps): JSX.Element {
  return (
    <tr onClick={onRemove}>
      <td className="mono">{name}</td>
      <td>

alangpierce

import ActiveEnzymeTemplate from './templates/activeenzyme.jade';
...
class ActiveEnzymeItemView extends Backbone.View {
  static initClass() {
    this.prototype.tagName = 'tr';
    this.prototype.events = {
      click: 'removeEnzyme',
    };
  }
  removeEnzyme() {

alangpierce

td.mono= name
td
  div.swatch(style='background-color: ' + color + ';')

alangpierce

span
  span.ownable-owner= owner_handle
    if !writable
      span.glyphicon.glyphicon-eye-open
  |  
  = name

alangpierce

function assertResultsEqual(jadeResult: string, reactResult: string, name: string): void {
  const normalizedJade = jadeResult
    // React needs defaultChecked instead of checked and puts it at the end, and renders it as
    // `checked=""`. Jade renders it as `checked="checked"`. Reposition and rewrite Jade checked
    // attributes to match React.
    .replace(/<([^>]*) checked="checked"([^>]*)\/>/g, '<$1$2 checked=""/>')
    // Same with defaultValue/value.
    .replace(/<([^>]*) value="([^"]*)"([^>]*)\/>/g, '<$1$3 value="$2"/>')
    // Similar to "checked", some other boolean attributes render differently.
    .replace(/disabled="disabled"/g, 'disabled=""')