Converting rendering components to functional components

src/rendering/SVG/index.js

@@ -21,34 +21,30 @@ const metadata = `<rdf:rdf>
 </rdf:rdf>`;
 /* eslint-enable max-len */
 
-class SVG extends React.PureComponent {
+const SVG = ({ innerWidth, innerHeight, children }) => {
-  static propTypes = {
+  const width = Math.round(innerWidth + 2 * padding);
-    children: PropTypes.node,
+  const height = Math.round(innerHeight + 2 * padding);
-    innerWidth: PropTypes.number,
-    innerHeight: PropTypes.number
-  }
 
-  render() {
+  const svgProps = {
-    const { innerWidth, innerHeight, children } = this.props;
+    width,
+    height,
+    viewBox: [0, 0, width, height].join(' '),
+    style: style.image,
+    ...namespaceProps
+  };
 
-    const width = Math.round(innerWidth + 2 * padding);
+  return <svg { ...svgProps }>
-    const height = Math.round(innerHeight + 2 * padding);
+    <metadata dangerouslySetInnerHTML={{ __html: metadata }}></metadata>
+    <g transform={ `translate(${ padding } ${ padding })` }>
+      { children }
+    </g>
+  </svg>;
+};
 
-    const svgProps = {
+SVG.propTypes = {
-      width,
+  children: PropTypes.node,
-      height,
+  innerWidth: PropTypes.number,
-      viewBox: [0, 0, width, height].join(' '),
+  innerHeight: PropTypes.number
-      style: style.image,
+};
-      ...namespaceProps
-    };
-
-    return <svg { ...svgProps }>
-      <metadata dangerouslySetInnerHTML={{ __html: metadata }}></metadata>
-      <g transform={ `translate(${ padding } ${ padding })` }>
-        { children }
-      </g>
-    </svg>;
-  }
-}
 
 export default SVG;

src/rendering/Text/index.js

@@ -3,42 +3,28 @@ import PropTypes from 'prop-types';
 
 import * as style from './style';
 
-class Text extends React.PureComponent {
+const Text = ({ transform, quoted, children }) => {
-  static propTypes = {
+  const textProps = {
-    quoted: PropTypes.bool,
+    style: style.text,
-    transform: PropTypes.string,
+    transform
-    children: PropTypes.oneOfType([
+  };
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]).isRequired
-  }
 
-  renderContent() {
+  return <text { ...textProps }>
-    const { children, quoted } = this.props;
+    { quoted ? <>
-
-    if (!quoted) {
-      return children;
-    }
-
-    return <>
       <tspan style={ style.quote }>&ldquo;</tspan>
       <tspan>{ children }</tspan>
       <tspan style={ style.quote }>&rdquo;</tspan>
-    </>;
+    </> : children }
-  }
+  </text>;
+};
 
-  render() {
+Text.propTypes = {
-    const { transform } = this.props;
+  quoted: PropTypes.bool,
-
+  transform: PropTypes.string,
-    const textProps = {
+  children: PropTypes.oneOfType([
-      style: style.text,
+    PropTypes.arrayOf(PropTypes.node),
-      transform
+    PropTypes.node
-    };
+  ]).isRequired
-
+};
-    return <text { ...textProps }>
-      { this.renderContent() }
-    </text>;
-  }
-}
 
 export default Text;