use HOC for popout state, remove react-addons-shallow-compare

components/BackgroundSelect.js

@@ -1,33 +1,19 @@
 import React from 'react'
-import shallowCompare from 'react-addons-shallow-compare'
 
 import ImagePicker from './ImagePicker'
 import ColorPicker from './ColorPicker'
-import Popout from './Popout'
+import Popout, { managePopout } from './Popout'
 import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
 import { validateColor } from '../lib/colors'
-import { toggle, capitalize, stringifyRGBA } from '../lib/util'
+import { capitalize, stringifyRGBA } from '../lib/util'
 
-class BackgroundSelect extends React.Component {
-  state = { isVisible: false, mounted: false }
+class BackgroundSelect extends React.PureComponent {
+  state = { mounted: false }
 
   componentDidMount() {
     this.setState({ mounted: true })
   }
 
-  shouldComponentUpdate(prevProps, prevState) {
-    return [
-      prevState.isVisible !== this.state.isVisible,
-      prevProps.color !== this.props.color,
-      prevState.isVisible && shallowCompare(this, prevProps, prevState)
-    ].some(Boolean)
-  }
-
-  toggle = e => {
-    e.stopPropagation()
-    this.setState(toggle('isVisible'))
-  }
-
   selectTab = name => {
     if (this.props.mode !== name) {
       this.props.onChange({ backgroundMode: name })
@@ -37,8 +23,8 @@ class BackgroundSelect extends React.Component {
   handlePickColor = ({ rgb }) => this.props.onChange({ backgroundColor: stringifyRGBA(rgb) })
 
   render() {
-    const { color, mode, image, onChange, aspectRatio } = this.props
-    const { isVisible, mounted } = this.state
+    const { color, mode, image, onChange, aspectRatio, isVisible, toggleVisibility } = this.props
+    const { mounted } = this.state
 
     let background =
       typeof color === 'string'
@@ -58,17 +44,12 @@ class BackgroundSelect extends React.Component {
     return (
       <div className="bg-select-container">
         <div className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}>
-          <div className="bg-color-container" onClick={this.toggle}>
+          <div className="bg-color-container" onClick={toggleVisibility}>
             <div className="bg-color-alpha" />
             <div className="bg-color" />
           </div>
         </div>
-        <Popout
-          pointerLeft="15px"
-          onClickOutside={this.toggle}
-          hidden={!isVisible}
-          style={{ width: '222px' }}
-        >
+        <Popout pointerLeft="15px" hidden={!isVisible} style={{ width: '222px' }}>
           <div className="picker-tabs">
             {['color', 'image'].map(tab => (
               <div
@@ -166,4 +147,4 @@ class BackgroundSelect extends React.Component {
   }
 }
 
-export default BackgroundSelect
+export default managePopout(BackgroundSelect)

components/ExportMenu.js

@@ -5,9 +5,7 @@ import { COLORS, EXPORT_SIZES } from '../lib/constants'
 import Button from './Button'
 import Input from './Input'
 import CopyButton from './CopyButton'
-import Popout from './Popout'
-
-import { toggle } from '../lib/util'
+import Popout, { managePopout } from './Popout'
 
 const toIFrame = url =>
   `<iframe
@@ -35,15 +33,6 @@ const CopyEmbed = withRouter(
 const popoutStyle = { width: '280px', right: 0 }
 
 class ExportMenu extends React.PureComponent {
-  state = {
-    isVisible: false
-  }
-
-  toggle = e => {
-    e.stopPropagation()
-    this.setState(toggle('isVisible'))
-  }
-
   handleInputChange = ({ target: { name, value } }) => this.props.onChange(name, value)
 
   handleExportSizeChange = selectedSize => () => this.props.onChange('exportSize', selectedSize)
@@ -51,8 +40,7 @@ class ExportMenu extends React.PureComponent {
   handleExport = format => () => this.props.export(format)
 
   render() {
-    const { exportSize, filename } = this.props
-    const { isVisible } = this.state
+    const { exportSize, filename, isVisible, toggleVisibility } = this.props
 
     return (
       <div className="export-menu-container">
@@ -63,7 +51,7 @@ class ExportMenu extends React.PureComponent {
             color={COLORS.PURPLE}
             padding="0 16px"
             selected={isVisible}
-            onClick={this.toggle}
+            onClick={toggleVisibility}
           >
             Export
           </Button>
@@ -71,7 +59,6 @@ class ExportMenu extends React.PureComponent {
         <Popout
           hidden={!isVisible}
           borderColor={COLORS.PURPLE}
-          onClickOutside={this.toggle}
           pointerRight="28px"
           style={popoutStyle}
         >
@@ -183,4 +170,4 @@ class ExportMenu extends React.PureComponent {
   }
 }
 
-export default ExportMenu
+export default managePopout(ExportMenu)

components/Popout.js

@@ -3,16 +3,38 @@ import enhanceWithClickOutside from 'react-click-outside'
 
 import WindowPointer from './WindowPointer'
 import { COLORS } from '../lib/constants'
+import { toggle } from '../lib/util'
+
+export const managePopout = WrappedComponent => {
+  class PopoutManager extends React.Component {
+    state = {
+      isVisible: false
+    }
+
+    toggleVisibility = () => this.setState(toggle('isVisible'))
+
+    handleClickOutside = () => this.setState({ isVisible: false })
+
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          isVisible={this.state.isVisible}
+          toggleVisibility={this.toggleVisibility}
+        />
+      )
+    }
+  }
+
+  return enhanceWithClickOutside(PopoutManager)
+}
 
 class Popout extends React.PureComponent {
   static defaultProps = {
     borderColor: COLORS.SECONDARY,
-    style: {},
-    onClickOutside: () => {}
+    style: {}
   }
 
-  handleClickOutside = e => !this.props.hidden && this.props.onClickOutside(e)
-
   render() {
     const { children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props
 
@@ -41,4 +63,4 @@ class Popout extends React.PureComponent {
   }
 }
 
-export default enhanceWithClickOutside(Popout)
+export default Popout

components/Settings.js

@@ -5,7 +5,7 @@ import ThemeSelect from './ThemeSelect'
 import FontSelect from './FontSelect'
 import Slider from './Slider'
 import Toggle from './Toggle'
-import Popout from './Popout'
+import Popout, { managePopout } from './Popout'
 import Button from './Button'
 import Presets from './Presets'
 import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
@@ -202,7 +202,6 @@ const settingButtonStyle = {
 class Settings extends React.PureComponent {
   state = {
     presets: DEFAULT_PRESETS,
-    isVisible: false,
     selectedMenu: 'Window',
     showPresets: false,
     previousSettings: null,
@@ -220,11 +219,6 @@ class Settings extends React.PureComponent {
     }))
   }
 
-  toggleVisible = e => {
-    e.stopPropagation()
-    this.setState(toggle('isVisible'))
-  }
-
   togglePresets = () => this.setState(toggle('showPresets'))
 
   selectMenu = selectedMenu => () => this.setState({ selectedMenu })
@@ -344,15 +338,8 @@ class Settings extends React.PureComponent {
   }
 
   render() {
-    const {
-      isVisible,
-      selectedMenu,
-      showPresets,
-      presets,
-      previousSettings,
-      widthChanging
-    } = this.state
-    const { preset } = this.props
+    const { selectedMenu, showPresets, presets, previousSettings, widthChanging } = this.state
+    const { preset, isVisible, toggleVisibility } = this.props
 
     return (
       <div className="settings-container" ref={this.settingsRef}>
@@ -361,13 +348,12 @@ class Settings extends React.PureComponent {
           center
           selected={isVisible}
           style={settingButtonStyle}
-          onClick={this.toggleVisible}
+          onClick={toggleVisibility}
         >
           <SettingsIcon />
         </Button>
         <Popout
           pointerLeft="15px"
-          onClickOutside={this.toggleVisible}
           hidden={!isVisible}
           style={{
             position: widthChanging ? 'fixed' : 'absolute',
@@ -432,4 +418,4 @@ class Settings extends React.PureComponent {
   }
 }
 
-export default Settings
+export default managePopout(Settings)

package.json

@@ -38,7 +38,6 @@
     "next-offline": "^3.3.1",
     "prettier": "^1.14.3",
     "react": "^16.7.0",
-    "react-addons-shallow-compare": "^15.6.2",
     "react-click-outside": "^3.0.0",
     "react-codemirror2": "^5.1.0",
     "react-color": "^2.17.0",

yarn.lock

@@ -2957,7 +2957,7 @@ fast-levenshtein@~2.0.4:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.4:
+fbjs@^0.8.1, fbjs@^0.8.16:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -5616,14 +5616,6 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-addons-shallow-compare@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
-  integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
-  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
-
 react-click-outside@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-click-outside/-/react-click-outside-3.0.1.tgz#6e77e84d2f17afaaac26dbad743cbbf909f5e24c"