feat(content): add saladbow redux container

src/content/components/SaladBowlPortal.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { spring, presets, OpaqueConfig } from 'react-motion'
-import SaladBowl from '../components/SaladBowl'
+import SaladBowl from './SaladBowl'
 
-interface SaladBowlContainerProps {
+interface SaladBowlPortalProps {
   shouldShow: boolean
   mouseX: number
   mouseY: number
 }
 
-export default class SaladBowlContainer extends React.Component<SaladBowlContainerProps, any> {
+export default class SaladBowlPortal extends React.Component<SaladBowlPortalProps, any> {
   root = document.body
   el = document.createElement('div')
   isMount = false

src/content/containers/SaladBowlContainer.tsx

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux'
+import SaladBowlPortal from '../components/SaladBowlPortal'
+import { StoreState } from '../redux/modules'
+
+export const mapStateToProps = ({ config, selection, widget }: StoreState) => {
+  const { direct, ctrl, icon, double } = config.mode
+  const shouldShow = (
+    selection.selectionInfo.text &&
+    icon &&
+    !widget.isPinned &&
+    !direct &&
+    !(double && selection.dbClick) &&
+    !(ctrl && selection.ctrlKey)
+  )
+
+  return {
+    shouldShow,
+    mouseX: selection.mouseX,
+    mouseY: selection.mouseY,
+  }
+}
+
+export default connect(
+  mapStateToProps
+)(SaladBowlPortal)

test/specs/components/content/SaladBowlContainer.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { shallow, mount, render } from 'enzyme'
-import SaladBowlContainer from '@/content/containers/SaladBowlContainer'
-import Motion from 'react-motion'
+import { shallow } from 'enzyme'
+import SaladBowlPortal from '@/content/components/SaladBowlPortal'
 
 jest.mock('react-dom')
 const createPortal = ReactDOM.createPortal as jest.Mock<typeof ReactDOM.createPortal>
 
-describe('Component/content/SaladBowl', () => {
+describe('Component/content/SaladBowlPortal', () => {
   beforeEach(() => {
     browser.flush()
     createPortal.mockClear()
@@ -19,7 +18,7 @@ describe('Component/content/SaladBowl', () => {
       mouseX: 0,
       mouseY: 0,
     }
-    const portalBowl = shallow(<SaladBowlContainer {...props} />)
+    const portalBowl = shallow(<SaladBowlPortal {...props} />)
 
     expect(createPortal).toHaveBeenCalledTimes(1)
 
@@ -35,7 +34,7 @@ describe('Component/content/SaladBowl', () => {
       mouseX: 0,
       mouseY: 0,
     }
-    const portalBowl = shallow(<SaladBowlContainer {...props} />)
+    const portalBowl = shallow(<SaladBowlPortal {...props} />)
 
     portalBowl.setProps({ shouldShow: true, mouseX: window.innerWidth, mouseY: 0 })
     portalBowl.setProps({ shouldShow: true, mouseX: window.innerWidth, mouseY: window.innerHeight })