Use ReactDOMServer.renderToString to render HTML string

Author: cheton

examples/renderer.js

@@ -1,4 +1,6 @@
-import { buildHTML, classNames, quoteattr } from './helper';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import classNames from 'classnames';
 
 const renderer = (node, treeOptions) => {
     const { id, name, loadOnDemand = false, children, state, props = {} } = node;
@@ -7,84 +9,77 @@ const renderer = (node, treeOptions) => {
     const childrenLength = Object.keys(children).length;
     const more = node.hasChildren();
 
-    let togglerContent = '';
-    if (!more && loadOnDemand) {
-        togglerContent = buildHTML('i', '', {
-            'class': classNames('glyphicon', 'glyphicon-triangle-right')
-        });
-    }
-    if (more && open) {
-        togglerContent = buildHTML('i', '', {
-            'class': classNames('glyphicon', 'glyphicon-triangle-bottom')
-        });
-    }
-    if (more && !open) {
-        togglerContent = buildHTML('i', '', {
-            'class': classNames('glyphicon', 'glyphicon-triangle-right')
-        });
-    }
-    const toggler = buildHTML('a', togglerContent, {
-        'class': (() => {
-            if (!more && loadOnDemand) {
-                return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
-            }
-            if (more && open) {
-                return classNames(treeOptions.togglerClass);
-            }
-            if (more && !open) {
-                return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
-            }
-            return '';
-        })()
-    });
+    return ReactDOMServer.renderToString(
+        <div
+            className={classNames(
+                'infinite-tree-item',
+                { 'infinite-tree-selected': selected }
+            )}
+            data-id={id}
+            data-expanded={more && open}
+            data-depth={depth}
+            data-path={path}
+            data-selected={selected}
+            data-children={childrenLength}
+            data-total={total}
+            droppable={droppable}
+        >
+            <div
+                className="infinite-tree-node"
+                style={{ marginLeft: depth * 18 }}
+            >
+                <a
+                    className={(() => {
+                        if (!more && loadOnDemand) {
+                            return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
+                        }
+                        if (more && open) {
+                            return classNames(treeOptions.togglerClass);
+                        }
+                        if (more && !open) {
+                            return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
+                        }
+                        return '';
+                    })()}
+                >
+                    {!more && loadOnDemand &&
+                        <i className="glyphicon glyphicon-triangle-right" />
+                    }
+                    {more && open &&
+                        <i className="glyphicon glyphicon-triangle-bottom" />
+                    }
+                    {more && !open &&
+                        <i className="glyphicon glyphicon-triangle-right" />
+                    }
+                </a>
 
-    const icon = buildHTML('i', '', {
-        'class': classNames(
-            'infinite-tree-folder-icon',
-            'glyphicon',
-            { 'glyphicon-folder-open': more && open },
-            { 'glyphicon-folder-close': more && !open },
-            { 'glyphicon-file': !more }
-        )
-    });
-    const title = buildHTML('span', quoteattr(name), {
-        'class': classNames('infinite-tree-title')
-    });
-    const loadingIcon = buildHTML('i', '', {
-        'style': 'margin-left: 5px',
-        'class': classNames(
-            { 'hidden': !loading },
-            'glyphicon',
-            'glyphicon-refresh',
-            { 'rotating': loading }
-        )
-    });
-    const count = buildHTML('span', childrenLength, {
-        'class': 'count'
-    });
-    const treeNode = buildHTML('div', toggler + icon + title + loadingIcon + count, {
-        'class': 'infinite-tree-node',
-        'style': 'margin-left: ' + depth * 18 + 'px'
-    });
+                <i
+                    className={classNames(
+                        'infinite-tree-folder-icon',
+                        'glyphicon',
+                        { 'glyphicon-folder-open': more && open },
+                        { 'glyphicon-folder-close': more && !open },
+                        { 'glyphicon-file': !more }
+                    )}
+                >
+                </i>
 
-    let treeNodeAttributes = {
-        'data-id': id,
-        'data-expanded': more && open,
-        'data-depth': depth,
-        'data-path': path,
-        'data-selected': selected,
-        'data-children': childrenLength,
-        'data-total': total,
-        'class': classNames(
-            'infinite-tree-item',
-            { 'infinite-tree-selected': selected }
-        )
-    };
-    if (droppable) {
-        treeNodeAttributes['droppable'] = true;
-    }
+                <span className="infinite-tree-title">{name}</span>
 
-    return buildHTML('div', treeNode, treeNodeAttributes);
+                <i
+                    style={{ marginLeft: 5 }}
+                    className={classNames(
+                        { 'hidden': !loading },
+                        'glyphicon',
+                        'glyphicon-refresh',
+                        { 'rotating': loading }
+                    )}
+                />
+
+                <span className="count">{childrenLength}</span>
+            </div>
+        </div>
+    );
 };
 
 export default renderer;