export function renderHTML(
ref: Reflection,
settings: Partial<ReactConverterSettings> = {}
): string {
const set = normalizeSettings(settings) as ViewSettings
if (ref.id) {
set.path = formatLink(ref.id).href
} else if (ref.kind === ReflectionKind.Search) {
set.path = '_search'
} else {
set.path = ''
}
const el = React.createElement(PageView, { reflection: ref, settings: set })
const html = renderToString(el)
const name = (ref as any).name || (ref.id && ref.id[ref.id.length - 1].name)
const base = path.relative(set.path, './')
return `
<html>
<head>
<meta charset="UTF-8">
<title>${name} - TypeScript</title>
<script>
__webpack_public_path__ = "${base}"
</script>
<base href="${base || '.'}" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" defer></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" defer></script>
<script crossorigin src="https://unpkg.com/prettier@1.14.3/standalone.js" defer></script>
<script crossorigin src="https://unpkg.com/prettier@1.14.3/parser-typescript.js" defer></script>
<link rel="stylesheet" type="text/css" href="${set.manifest['index.css']}"/>
<script>
window.__argv = ${JSON.stringify(set)}
var ref = "${encodeURIComponent(JSON.stringify(ref))}";
window.__ref = JSON.parse(decodeURIComponent(ref))
</script>
<script type="text/javascript" src="${set.manifest['index.js']}" defer></script>
</head>
<body class="${BodyStyle}">
${includeGoogleTracking(set)}
<div id='react-app'>${html}</div>
</body>
</html>
`
}
public render() {
const mp = this.props.MP;
const scores = [];
let i = 0;
for (i = 0; i < this.props.lobby.names.length; i = i + 1) {
scores.push(React.createElement(RockScissorsPaperRule.views['score'], {
name: this.props.lobby.names[i],
win: this.props.win[i],
draw: this.props.draw[i],
lose: this.props.lose[i]
}));
}
return mp.getPluginView('gameshell',
'HostShell-Main',
{
'links': {
'home': {
'icon': 'gamepad',
'label': 'Game',
'view': React.DOM.table(
null,
React.DOM.thead(null,
React.createElement(
RockScissorsPaperRule.views['scoreHeader'],
{})),
React.DOM.tbody(null,
scores))
},
'clients': {
'icon': 'users',
'label': 'Players',
'view': mp.getPluginView('lobby', 'host-roommanagement')
}
}
});
}
async execute(event: InitShopEvent) : Promise<void> {
if (event.args[1]) {
switch (event.args[1]) {
case "filter":
event.view = React.createElement(Shop, {
childs: React.createElement(ShopFilter, {model: this.store.data.shop}),
model: this.store.data.shop
});
event.callBack();
return;
default:
if (!this.store.data.shop.selectedItem || this.store.data.shop.selectedItem.id !== event.args[1]) {
new GetShopItemsDetailsEvent(event.args[1]).dispatch();
return;
}
event.view = React.createElement(Shop, {
childs: React.createElement(ShopItem, {model: this.store.data.shop}),
model: this.store.data.shop
});
event.callBack();
return;
}
} else {
event.view = React.createElement(Shop, {model: this.store.data.shop});
}
if (!this.store.data.shop.init) {
event.callBack();
new GetShopItemsEvent().dispatch();
this.store.set("shop.init", true);
return;
}
event.callBack();
}
@override
public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
// Use this method to perform your custom cell rendering. The CellFormatter is a utility
// that you can use to convert the cellValue to a text string.
const value: string = event.cellValue;
const id: string = event.row.getValueByName('ID').toString();
const hasPermissions: boolean = this.context.pageContext.list.permissions.hasPermission(SPPermission.editListItems);
const toggle: React.ReactElement<{}> =
React.createElement(Toggle, { checked: value, id: id, disabled: !hasPermissions, onChanged: this.onToggleValueChanged.bind(this) } as IToggleProps);
ReactDOM.render(toggle, event.cellDiv);
}
test("can add font and background color classes", () => {
const el = shallow(
React.createElement(
Ansi,
{ useClasses: true },
`hello ${GREEN_FG}${YELLOW_BG}world`
)
);
expect(el).not.toBeNull();
expect(el.text()).toBe("hello world");
expect(el.html()).toBe(
"<code><span>hello </span><span class=\"ansi-yellow ansi-green\">world</span></code>"
);
});
public render(): void {
const element: React.ReactElement<IDropdownWithRemoteDataProps > = React.createElement(
DropdownWithRemoteData,
{
list: this.properties.list,
item: this.properties.item,
needsConfiguration: this.needsConfiguration(),
displayMode: this.displayMode,
configureWebPart: this.configureWebPart
}
);
ReactDom.render(element, this.domElement);
}
test("can linkify", () => {
const el = shallow(
React.createElement(
Ansi,
{ linkify: true },
"this is a link: https://nteract.io/"
)
);
expect(el).not.toBeNull();
expect(el.text()).toBe("this is a link: https://nteract.io/");
expect(el.html()).toBe(
'<code><span>this is a link: <a href="https://nteract.io/" target="_blank">https://nteract.io/</a></span></code>'
);
});
test("can nest", () => {
const el = shallow(
React.createElement(
Ansi,
null,
`hello ${GREEN_FG}wo${YELLOW_BG}rl${RESET}d`
)
);
expect(el).not.toBeNull();
expect(el.text()).toBe("hello world");
expect(el.html()).toBe(
'<code><span>hello </span><span style="color:rgb(0, 187, 0)">wo</span><span style="background-color:rgb(187, 187, 0);color:rgb(0, 187, 0)">rl</span><span>d</span></code>'
);
});
test("can use useClasses with linkify", () => {
const el = shallow(
React.createElement(
Ansi,
{ linkify: true, useClasses: true },
`${GREEN_FG}this is a link: https://nteract.io/`
)
);
expect(el).not.toBeNull();
expect(el.text()).toBe("this is a link: https://nteract.io/");
expect(el.html()).toBe(
"<code><span class=\"ansi-green\">this is a link: <a href=\"https://nteract.io/\" target=\"_blank\">https://nteract.io/</a></span></code>"
);
});
public render() {
return React.createElement('div', {
id: 'actionTimelinePopup',
className: 'actionPopup',
style: {
left: this.state.left,
top: this.state.top
}
} as React.DOMAttributes,
React.createElement('div', {
className: 'actionPopupTitle'
} as React.DOMAttributes, this.state.title),
React.createElement('button', {
className: 'removeFromTasklineButton',
onClick: this.removeFromTaskline.bind(this)
} as React.DOMAttributes, 'Remove from taskline'),
React.createElement('button', {
className: 'addToCalloutsButton',
id: 'addToCalloutsButton',
onClick: this.addToCallouts.bind(this)
} as React.DOMAttributes, 'Display as callout')
);
}
