Convert outline header to pure function

LD4P · Jul 11, 2019 · d516cc1 · d516cc1
1 parent a912ebc
commit d516cc1
Showing 1 changed file with 21 additions and 34 deletions.
diff --git a/src/components/editor/property/OutlineHeader.jsx b/src/components/editor/property/OutlineHeader.jsx
@@ -1,52 +1,39 @@
 // Copyright 2019 Stanford University see LICENSE for license
 
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faMinusSquare, faPlusSquare } from '@fortawesome/free-solid-svg-icons'
 import PropertyLabel from './PropertyLabel'
 
-class OutlineHeader extends Component {
-  isCollapsed = () => {
-    if (this.props.collapsed === true) {
-      return faPlusSquare
-    }
+const OutlineHeader = (props) => {
+  const icon = props.collapsed === true ? faPlusSquare : faMinusSquare
 
-    return faMinusSquare
+  let unicodeSpacer = ''
+  for (let i = 0; i <= props.spacer; i++) {
+    unicodeSpacer += '\u00a0'
   }
 
-  spacer = () => {
-    let unicodeSpacer = ''
-
-    for (let i = 0; i <= this.props.spacer; i++) {
-      unicodeSpacer += '\u00a0'
-    }
-
-    return unicodeSpacer
-  }
-
-  render() {
-    if (this.props.isAdd) {
-      return (
-        <div className="rOutline-header">
-          {this.spacer()}
-          <button type="button" className="btn btn-sm btn-outline-primary" onClick={this.props.handleCollapsed} data-id={this.props.id}>
-            <FontAwesomeIcon icon={this.isCollapsed()} />&nbsp;Add
-          </button>
-          <PropertyLabel pt={this.props.pt} />
-        </div>
-      )
-    }
+  if (props.isAdd) {
     return (
       <div className="rOutline-header">
-        {this.spacer()}
-        <a href="#" type="button" onClick={this.props.handleCollapsed} data-id={this.props.id}>
-          <FontAwesomeIcon icon={this.isCollapsed()} />&nbsp;
-        </a>
-        <PropertyLabel pt={this.props.pt} />
+        {unicodeSpacer}
+        <button type="button" className="btn btn-sm btn-outline-primary" onClick={props.handleCollapsed} data-id={props.id}>
+          <FontAwesomeIcon icon={icon} />&nbsp;Add
+        </button>
+        <PropertyLabel pt={props.pt} />
       </div>
     )
   }
+  return (
+    <div className="rOutline-header">
+      {unicodeSpacer}
+      <a href="#" type="button" onClick={props.handleCollapsed} data-id={props.id}>
+        <FontAwesomeIcon icon={icon} />&nbsp;
+      </a>
+      <PropertyLabel pt={props.pt} />
+    </div>
+  )
 }
 
 OutlineHeader.propTypes = {