Skip to content

Instantly share code, notes, and snippets.

Alan Pierce alangpierce

Block or report user

Report or block alangpierce

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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=""')
You can’t perform that action at this time.