Skip to content

Instantly share code, notes, and snippets.

Avatar

Alan Pierce alangpierce

  • Benchling
  • San Francisco, CA
View GitHub Profile
View ActiveEnzyme.tsx
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" />
View ActiveEnzyme.tsx
function ActiveEnzyme({}: ActiveEnzymeProps): JSX.Element {
return (
<>
<td className="mono">Acc65I</td>
<td>
<div style="background-color: #F58A5E;" className="swatch" />
</td>
</>
);
}
View ActiveEnzyme.tsx
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);
View makeJadeTransitionShim.ts
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;
};
}
View activeenzyme.js
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>");
}
View ActiveEnzyme.tsx
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>
View restrictionpanelview.js
import ActiveEnzymeTemplate from './templates/activeenzyme.jade';
...
class ActiveEnzymeItemView extends Backbone.View {
static initClass() {
this.prototype.tagName = 'tr';
this.prototype.events = {
click: 'removeEnzyme',
};
}
removeEnzyme() {
View activeenzyme.jade
td.mono= name
td
div.swatch(style='background-color: ' + color + ';')
View ownablechoice.jade
span
span.ownable-owner= owner_handle
if !writable
span.glyphicon.glyphicon-eye-open
|
= name
View assertResultsEqual.ts
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=""')