feat(content): add relationships between bowl and panel

crimx · Apr 25, 2018 · bd24060 · bd24060
1 parent 0f976b5
commit bd24060
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/src/content/components/DictPanelPortal/index.tsx b/src/content/components/DictPanelPortal/index.tsx
@@ -11,7 +11,9 @@ import { Omit } from '@/typings/helpers'
 export type DictPanelPortalDispatchers = Omit<
   DictPanelDispatchers,
   'updateItemHeight' | 'updateDragArea'
->
+> & {
+  showPanel: (flag: boolean) => any
+}
 
 export interface DictPanelPortalProps extends DictPanelPortalDispatchers {
   readonly isFav: boolean
@@ -23,7 +25,10 @@ export interface DictPanelPortalProps extends DictPanelPortalDispatchers {
 }
 
 type DictPanelState= {
+  /** copy current props to compare with the next props */
   readonly propsSelection: SelectionState | null
+
+  readonly isNewSelection: boolean
   readonly x: number
   readonly y: number
   readonly height: number
@@ -38,6 +43,8 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
 
   state = {
     propsSelection: null,
+
+    isNewSelection: false,
     x: 0,
     y: 0,
     height: 30
@@ -50,7 +57,7 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
     const newSelection = nextProps.selection
     if (newSelection !== prevState.propsSelection) {
       // only re-calculate position when new selection is made
-      const newState = { propsSelection: newSelection }
+      const newState = { propsSelection: newSelection, isNewSelection: true }
 
       if (newSelection.selectionInfo.text && !nextProps.isPinned) {
         // restore height
@@ -91,7 +98,7 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
       return newState
     }
 
-    return null
+    return { isNewSelection: false }
   }
 
   frameDidMount = (frame: HTMLIFrameElement) => {
@@ -101,11 +108,13 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
   mountEL = () => {
     this.root.appendChild(this.el)
     this.isMount = true
+    this.props.showPanel(true)
   }
 
   unmountEL = () => {
     this.root.removeChild(this.el)
     this.isMount = false
+    this.props.showPanel(false)
   }
 
   frameWillUnmount = () => {
@@ -131,25 +140,23 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
 
     const { selection, config, isPinned, isMouseOnBowl } = this.props
 
-    const { x, y, height } = this.state
+    const { x, y, height, isNewSelection } = this.state
 
     const { direct, ctrl, icon, double } = config.mode
-    const shouldShow: boolean = Boolean(
-      this.isMount
-        ? isPinned || selection.selectionInfo.text
-        : isMouseOnBowl || (
-          selection.selectionInfo.text && (
-            direct ||
-            (double && selection.dbClick) ||
-            (ctrl && selection.ctrlKey)
-          )
+    const shouldShow = (
+      (this.isMount && !isNewSelection) ||
+      isPinned ||
+      isMouseOnBowl ||
+      (selection.selectionInfo.text && (
+          direct ||
+          (double && selection.dbClick) ||
+          (ctrl && selection.ctrlKey)
         )
+      )
     )
 
-    if (shouldShow) {
-      if (!this.isMount) {
-        this.mountEL()
-      }
+    if (shouldShow && !this.isMount) {
+      this.mountEL()
     }
 
     return ReactDOM.createPortal(

diff --git a/src/content/containers/DictPanelContainer.tsx b/src/content/containers/DictPanelContainer.tsx
@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import DictPanelPortal, { DictPanelPortalProps, DictPanelPortalDispatchers } from '../components/DictPanelPortal'
 import { StoreState } from '../redux/modules'
 import { searchText } from '../redux/modules/dictionaries'
-import { addToNotebook, removeFromNotebook, pinPanel } from '../redux/modules/widget'
+import { addToNotebook, removeFromNotebook, pinPanel, showPanel } from '../redux/modules/widget'
 
 export const mapStateToProps = ({
   config,
@@ -21,6 +21,7 @@ export const mapStateToProps = ({
 }
 
 export const mapDispatchToProps: { [k in keyof DictPanelPortalDispatchers]: Function } = {
+  showPanel,
   searchText,
 
   addToNotebook,

diff --git a/src/content/containers/SaladBowlContainer.tsx b/src/content/containers/SaladBowlContainer.tsx
@@ -7,12 +7,14 @@ import { searchText } from '../redux/modules/dictionaries'
 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)
+    widget.isMouseOnBowl || (
+      selection.selectionInfo.text &&
+      icon &&
+      !widget.isPanelShow &&
+      !direct &&
+      !(double && selection.dbClick) &&
+      !(ctrl && selection.ctrlKey)
+    )
   )
 
   return {

diff --git a/src/content/redux/modules/widget.ts b/src/content/redux/modules/widget.ts
@@ -8,7 +8,8 @@ import { StoreState } from './index'
 export const enum Actions {
   PIN = 'widget/PIN',
   FAV_WORD = 'dicts/FAV_WORD',
-  MOUSE_ON_BOWL = 'disct/MOUSE_ON_BOWL'
+  MOUSE_ON_BOWL = 'disct/MOUSE_ON_BOWL',
+  SHOW_PANEL = 'disct/SHOW_PANEL',
 }
 
 /*-----------------------------------------------*\
@@ -19,12 +20,14 @@ export type WidgetState = {
   readonly isPinned: boolean
   readonly isFav: boolean
   readonly isMouseOnBowl: boolean
+  readonly isPanelShow: boolean
 }
 
 const initState: WidgetState = {
   isPinned: false,
   isFav: false,
   isMouseOnBowl: false,
+  isPanelShow: false,
 }
 
 export default function reducer (state = initState, action): WidgetState {
@@ -39,6 +42,10 @@ export default function reducer (state = initState, action): WidgetState {
       return state.isMouseOnBowl === action.payload
         ? state
         : { ...state, isMouseOnBowl: action.payload }
+    case Actions.SHOW_PANEL:
+      return state.isPanelShow === action.payload
+        ? state
+        : { ...state, isPanelShow: action.payload }
     default:
       return state
   }
@@ -62,6 +69,10 @@ export function mouseOnBowl (payload: boolean): Action {
   return ({ type: Actions.MOUSE_ON_BOWL, payload })
 }
 
+export function showPanel (payload: boolean): Action {
+  return ({ type: Actions.SHOW_PANEL, payload })
+}
+
 /*-----------------------------------------------*\
     Side Effects
 \*-----------------------------------------------*/