From 3ead0c13dfeaf055b551fe8a9794d3cc5cebadb5 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sat, 17 Feb 2018 11:16:05 -0500 Subject: [PATCH] Refactoring rendering root to be a component --- src/components/App/index.js | 4 ++-- src/components/SVG/index.js | 31 +++++++++++++++++-------------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/App/index.js b/src/components/App/index.js index d5537c6..18f65da 100644 --- a/src/components/App/index.js +++ b/src/components/App/index.js @@ -6,7 +6,7 @@ import style from './style.css'; import Form from 'components/Form'; import Message from 'components/Message'; -import renderImage from 'components/SVG'; +import SVG from 'components/SVG'; import { syntaxes, demoImage } from 'devel'; class App extends React.PureComponent { @@ -100,7 +100,7 @@ class App extends React.PureComponent {

Sample warning message

{ image &&
- { renderImage(image, { ref: this.imageRef }) } +
} ; } diff --git a/src/components/SVG/index.js b/src/components/SVG/index.js index 9395cf0..1f02161 100644 --- a/src/components/SVG/index.js +++ b/src/components/SVG/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import Box from './Box'; import HorizontalLayout from './HorizontalLayout'; @@ -18,24 +19,26 @@ const nodeTypes = { VerticalLayout }; -const renderChildren = children => { - if (!children || children.length === 0) { - return; +const render = (data, extraProps = {}) => { + if (typeof data === 'string') { + return data; } - return children.length === 1 ? - renderImage(children[0]) : - children.map((node, i) => renderImage(node, { key: i })); + const { type, props } = data; + const children = (data.children || []).map( + (data, key) => render(data, { key })); + + return React.createElement( + nodeTypes[type], + { ...extraProps, ...props }, + children.length === 1 ? children[0] : children); }; -const renderImage = (node, extraProps = {}) => { - if (typeof node === 'string') { - return node; - } +const SVG = ({ data, imageRef: ref }) => render(data, { ref }); - const { type, props, children } = node; - - return React.createElement(nodeTypes[type], { ...extraProps, ...props }, renderChildren(children)); +SVG.propTypes = { + data: PropTypes.object.isRequired, + imageRef: PropTypes.func }; -export default renderImage; +export default SVG;