refactor: Update SidePanel.js to use a functional component (#2179)

platform/viewer/src/components/SidePanel.js

@@ -1,41 +1,36 @@
 import './SidePanel.css';
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-class SidePanel extends Component {
+const SidePanel = ({ from, isOpen, children, width }) => {
-  static propTypes = {
+  const fromSideClass = from === 'right' ? 'from-right' : 'from-left';
-    from: PropTypes.string.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    children: PropTypes.node,
-    width: PropTypes.string,
-  };
 
-  render() {
+  const styles = width
-    const fromSideClass =
+    ? {
-      this.props.from === 'right' ? 'from-right' : 'from-left';
+        maxWidth: width,
+        marginRight: isOpen ? '0' : Number.parseInt(width) * -1,
+      }
+    : {};
 
-    const styles = this.props.width
+  return (
-      ? {
+    <section
-          maxWidth: this.props.width,
+      style={styles}
-          marginRight: this.props.isOpen
+      className={classNames('sidepanel', fromSideClass, {
-            ? '0'
+        'is-open': isOpen,
-            : Number.parseInt(this.props.width) * -1,
+      })}
-        }
+    >
-      : {};
+      {children}
+    </section>
+  );
+};
 
-    return (
+SidePanel.propTypes = {
-      <section
+  from: PropTypes.string.isRequired,
-        style={styles}
+  isOpen: PropTypes.bool.isRequired,
-        className={classNames('sidepanel', fromSideClass, {
+  children: PropTypes.node,
-          'is-open': this.props.isOpen,
+  width: PropTypes.string,
-        })}
+};
-      >
-        {this.props.children}
-      </section>
-    );
-  }
-}
 
 export default SidePanel;