Converting rendering components to functional components

This commit is contained in:
Jeff Avallone 2019-01-27 08:30:05 -05:00
parent d4aa207f75
commit 754868b9d5
2 changed files with 40 additions and 58 deletions

View File

@ -21,16 +21,7 @@ const metadata = `<rdf:rdf>
</rdf:rdf>`;
/* eslint-enable max-len */
class SVG extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
innerWidth: PropTypes.number,
innerHeight: PropTypes.number
}
render() {
const { innerWidth, innerHeight, children } = this.props;
const SVG = ({ innerWidth, innerHeight, children }) => {
const width = Math.round(innerWidth + 2 * padding);
const height = Math.round(innerHeight + 2 * padding);
@ -48,7 +39,12 @@ class SVG extends React.PureComponent {
{ children }
</g>
</svg>;
}
}
};
SVG.propTypes = {
children: PropTypes.node,
innerWidth: PropTypes.number,
innerHeight: PropTypes.number
};
export default SVG;

View File

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