make export component use hooks

components/ExportMenu.js

@@ -44,20 +44,41 @@ const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) =>
 
 const popoutStyle = { width: '280px', right: 0 }
 
-class ExportMenu extends React.PureComponent {
+function useSafari() {
-  input = React.createRef()
+  const [isSafari, setSafari] = React.useState(false)
+  React.useEffect(() => {
+    setSafari(
+      window.navigator &&
+        window.navigator.userAgent.indexOf('Safari') !== -1 &&
+        window.navigator.userAgent.indexOf('Chrome') === -1
+    )
+  }, [])
 
-  handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value)
+  return isSafari
+}
 
-  handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize)
+function ExportMenu({
+  backgroundImage,
+  onChange,
+  exportSize,
+  isVisible,
+  toggleVisibility,
+  export: exportImage
+}) {
+  const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
+  const online = useOnline()
+  const isSafari = useSafari()
 
-  handleExport = format => () =>
+  const disablePNG = isSafari && (tooLarge || !online)
-    this.props.export(format, {
+
-      filename: this.input.current.value
+  const input = React.useRef()
-    })
 
-  render() {
+  const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize)
-    const { exportSize, isVisible, toggleVisibility, disablePNG } = this.props
+
+  const handleExport = format => () =>
+    exportImage(format, {
+      filename: input.current.value
+    })
 
   return (
     <div className="export-menu-container" id="export-menu">
@@ -83,7 +104,7 @@ class ExportMenu extends React.PureComponent {
       >
         <div className="export-row">
           <span className="filename">File name</span>
-            <Input ref={this.input} title="filename" placeholder="carbon" color={COLORS.PURPLE} />
+          <Input ref={input} title="filename" placeholder="carbon" color={COLORS.PURPLE} />
         </div>
         <div className="export-row">
           <span>Size</span>
@@ -95,7 +116,7 @@ class ExportMenu extends React.PureComponent {
                 hoverColor={COLORS.PURPLE}
                 margin={i === EXPORT_SIZES.length - 1 ? 0 : '0 10px 0 0'}
                 color={exportSize === name ? COLORS.PURPLE : COLORS.DARK_PURPLE}
-                  onClick={this.handleExportSizeChange(name)}
+                onClick={handleExportSizeChange(name)}
               >
                 {name}
               </Button>
@@ -103,7 +124,7 @@ class ExportMenu extends React.PureComponent {
           </div>
         </div>
         <div className="export-row">
-            <Button center color={COLORS.PURPLE} onClick={this.handleExport('open')}>
+          <Button center color={COLORS.PURPLE} onClick={handleExport('open')}>
             Open
           </Button>
           <div className="save-container">
@@ -122,7 +143,7 @@ class ExportMenu extends React.PureComponent {
                   margin="0 8px 0 0"
                   hoverColor={COLORS.PURPLE}
                   color={COLORS.DARK_PURPLE}
-                    onClick={this.handleExport('png')}
+                  onClick={handleExport('png')}
                   id="export-png"
                 >
                   PNG
@@ -132,7 +153,7 @@ class ExportMenu extends React.PureComponent {
                 center
                 hoverColor={COLORS.PURPLE}
                 color={COLORS.DARK_PURPLE}
-                  onClick={this.handleExport('svg')}
+                onClick={handleExport('svg')}
                 id="export-svg"
               >
                 SVG
@@ -194,23 +215,6 @@ class ExportMenu extends React.PureComponent {
       </style>
     </div>
   )
-  }
 }
 
-export default managePopout(function({ backgroundImage, ...props }) {
+export default managePopout(React.memo(ExportMenu))
-  const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
-  const online = useOnline()
-
-  const [isSafari, setSafari] = React.useState(false)
-  React.useEffect(() => {
-    setSafari(
-      window.navigator &&
-        window.navigator.userAgent.indexOf('Safari') !== -1 &&
-        window.navigator.userAgent.indexOf('Chrome') === -1
-    )
-  }, [])
-
-  const disablePNG = isSafari && (tooLarge || !online)
-
-  return <ExportMenu {...props} disablePNG={disablePNG} />
-})