const init = (): void => {
const placeholder: ?HTMLElement = document.getElementById(
'preferences-history-tags'
);
if (placeholder) {
render(<SummaryTagsSettings />, placeholder);
}
};
fastdom.write(() => {
render(
<AccountCreationFlow
csrfToken={el.dataset.csrf}
returnUrl={el.dataset.returnUrl}
accountToken={el.dataset.accountToken}
/>,
el
);
});
/**
* Renders the file tree to the given element.
*
* @param {DOMNode|jQuery} element Element in which to render this file tree
* @param {FileTreeViewModel} viewModel the data container
* @param {Directory} projectRoot Directory object from which the fullPath of the project root is extracted
* @param {ActionCreator} actions object with methods used to communicate events that originate from the user
* @param {boolean} forceRender Run render on the entire tree (useful if an extension has new data that it needs rendered)
* @param {string} platform mac, win, linux
*/
function render(element, viewModel, projectRoot, actions, forceRender, platform) {
if (!projectRoot) {
return;
}
Preact.render(fileTreeView({
treeData: viewModel.treeData,
selectionViewInfo: viewModel.selectionViewInfo,
sortDirectoriesFirst: viewModel.sortDirectoriesFirst,
parentPath: projectRoot.fullPath,
actions: actions,
extensions: _extensions,
platform: platform,
forceRender: forceRender
}),
element);
}
onToggleOpen (id) {
// non-React `next-article` will lazily load this React component and so we're doing similar here
const isTop = id === 'top';
// lazily load the view
if (!this.views[id]) {
const props = {
mode: this.mode,
isTop: isTop,
store: this.data.store,
actions: this.data.actions,
dispatch: this.data.dispatch
};
this.views[id] = React.createElement(EmailArticleView, props);
const container = document.querySelector(`[data-n-article-email-${id}-container]`);
ReactDOM.render(this.views[id], container);
}
// toggle showing/hiding of the view
if (isTop) this.data.dispatch(this.data.actions.toggleOpenTop());
else this.data.dispatch(this.data.actions.toggleOpenBottom());
}