ScrollBoard 添加 hoverPause 配置

CHANGELOG.md

@@ -2,13 +2,14 @@
 
 ### Perfect
 
-- **BorderBox:** 添加 backgroundColor prop.
-- **BorderBox8:** 添加 reverse prop.
-- **DigitalFlop:** 添加 rowGap 配置.
-- **CapsuleChart:** 添加 showValue 配置.
-- **ActiveRightChart:** 添加 showOriginValue 配置.
-
-- **uuid:** 使用 uuid 生成唯一 id.
+- **BorderBox:** 添加 `backgroundColor` prop.
+- **BorderBox8:** 添加 `reverse` prop.
+- **DigitalFlop:** 添加 `rowGap` 配置.
+- **ScrollBoard:** 添加 `hoverPause` 配置.
+- **CapsuleChart:** 添加 `showValue` 配置.
+- **ActiveRightChart:** 添加 `showOriginValue` 配置.
+
+- **uuid:** 使用 `uuid` 生成唯一 id.
 
 # 1.1.7-alpha (2020-04-10)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view-react",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "React Large screen data display component library",
   "author": "Duan Yu <[email protected]>",
   "license": "MIT",

src/components/activeRingChart/index.js

@@ -233,7 +233,7 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
       }
     }
 
-    return co(loop)
+    return co(loop).end
   }, [config])
 
   const classNames = useMemo(
@@ -260,9 +260,4 @@ ActiveRingChart.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-ActiveRingChart.defaultProps = {
-  config: {}
-}
-
 export default ActiveRingChart

src/components/capsuleChart/index.js

@@ -135,9 +135,4 @@ CapsuleChart.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-CapsuleChart.defaultProps = {
-  config: {}
-}
-
 export default CapsuleChart

src/components/charts/index.js

@@ -46,9 +46,4 @@ Charts.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-Charts.defaultProps = {
-  option: {}
-}
-
 export default Charts

src/components/conicalColumnChart/index.js

@@ -182,9 +182,4 @@ ConicalColumnChart.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-ConicalColumnChart.defaultProps = {
-  config: {}
-}
-
 export default ConicalColumnChart

src/components/digitalFlop/index.js

@@ -149,9 +149,4 @@ DigitalFlop.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-DigitalFlop.defaultProps = {
-  config: {}
-}
-
 export default DigitalFlop

src/components/flylineChart/index.js

@@ -452,7 +452,6 @@ FlyLineChart.propTypes = {
 
 // 指定 props 的默认值：
 FlyLineChart.defaultProps = {
-  config: {},
   dev: false
 }
 

src/components/flylineChartEnhanced/index.js

@@ -544,7 +544,6 @@ FlyLineChartEnhanced.propTypes = {
 
 // 指定 props 的默认值：
 FlyLineChartEnhanced.defaultProps = {
-  config: {},
   dev: false
 }
 

src/components/percentPond/index.js

@@ -234,9 +234,4 @@ PercentPond.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-PercentPond.defaultProps = {
-  config: {}
-}
-
 export default PercentPond

src/components/scrollBoard/index.js

@@ -94,7 +94,14 @@ const defaultConfig = {
    * @default carousel = 'single'
    * @example carousel = 'single' | 'page'
    */
-  carousel: 'single'
+  carousel: 'single',
+  /**
+   * @description Pause scroll when mouse hovered
+   * @type {Boolean}
+   * @default hoverPause = true
+   * @example hoverPause = true | false
+   */
+  hoverPause: true
 }
 
 function calcHeaderData({ header, index, indexHeader }) {
@@ -144,7 +151,7 @@ function calcAligns(mergedConfig, header) {
   return deepMerge(aligns, align)
 }
 
-const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => {
+const ScrollBoard = forwardRef(({ onClick, config = {}, className, style, onMouseOver }, ref) => {
   const { width, height, domRef } = useAutoResize(ref)
 
   const [state, setState] = useState({
@@ -281,15 +288,29 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => {
     setState(state => ({ ...state, heights: newHeights }))
   }
 
-  function emitEvent(ri, ci, row, ceil) {
+  function emitEvent(handle, ri, ci, row, ceil) {
     const { ceils, rowIndex } = row
 
-    onClick && onClick({ row: ceils, ceil, rowIndex, columnIndex: ci })
+    handle && handle({ row: ceils, ceil, rowIndex, columnIndex: ci })
+  }
+
+  function handleHover(enter, ri, ci, row, ceil) {
+    if (enter) emitEvent(onMouseOver, ri, ci, row, ceil)
+
+    if (!mergedConfig.hoverPause) return
+
+    if (enter) {
+      task.pause && task.pause()
+    } else {
+      task.resume && task.resume()
+    }
   }
 
   const getBackgroundColor = rowIndex =>
     mergedConfig[rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']
 
+  let task = {}
+
   useEffect(() => {
     calcData()
 
@@ -316,7 +337,9 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => {
 
     if (rowNum >= rowLength) return
 
-    return co(loop)
+    task = co(loop)
+
+    return task.end
   }, [config, domRef.current])
 
   useEffect(onResize, [width, height, domRef.current])
@@ -373,7 +396,9 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => {
                   style={{ width: `${widths[ci]}px` }}
                   align={aligns[ci]}
                   dangerouslySetInnerHTML={{ __html: ceil }}
-                  onClick={() => emitEvent(ri, ci, row, ceil)}
+                  onClick={() => emitEvent(onClick, ri, ci, row, ceil)}
+                  onMouseEnter={() => handleHover(true, ri, ci, row, ceil)}
+                  onMouseLeave={() => handleHover(false)}
                 />
               ))}
             </div>
@@ -387,13 +412,9 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => {
 ScrollBoard.propTypes = {
   config: PropTypes.object,
   onClick: PropTypes.func,
+  onMouseOver: PropTypes.func,
   className: PropTypes.string,
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-ScrollBoard.defaultProps = {
-  config: {}
-}
-
 export default ScrollBoard

src/components/scrollRankingBoard/index.js

@@ -82,7 +82,7 @@ function calcRows({ data, rowNum, sort }) {
   return data
 }
 
-const ScrollRankingBoard = forwardRef(({ config, className, style }, ref) => {
+const ScrollRankingBoard = forwardRef(({ config = {}, className, style }, ref) => {
   const { width, height, domRef } = useAutoResize(ref)
 
   const [state, setState] = useState({
@@ -203,7 +203,7 @@ const ScrollRankingBoard = forwardRef(({ config, className, style }, ref) => {
 
     if (rowNum >= rowLength) return
 
-    return co(loop)
+    return co(loop).end
   }, [config, domRef.current])
 
   useEffect(() => {
@@ -257,9 +257,4 @@ ScrollRankingBoard.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-ScrollRankingBoard.defaultProps = {
-  config: {}
-}
-
 export default ScrollRankingBoard

src/components/waterLevelPond/index.js

@@ -163,7 +163,7 @@ function * animationWave(waves, renderer) {
   yield renderer.launchAnimation()
 }
 
-const WaterLevelPond = ({ config, className, style }) => {
+const WaterLevelPond = ({ config = {}, className, style }) => {
   const [renderer, setRenderer] = useState(null)
 
   const gradientId = useRef(`water-level-pond-${uuid()}`).current
@@ -220,7 +220,7 @@ const WaterLevelPond = ({ config, className, style }) => {
       }
     }
 
-    const undescribe = co(loop)
+    const { end } = co(loop)
 
     return () => {
       innerRenderer.delAllGraph()
@@ -229,7 +229,7 @@ const WaterLevelPond = ({ config, className, style }) => {
       innerRenderer.graphs.forEach(_ => _.pauseAnimation())
       innerRenderer.animationStatus = false
 
-      undescribe()
+      end()
     }
   }, [mergedConfig])
 
@@ -292,9 +292,4 @@ WaterLevelPond.propTypes = {
   style: PropTypes.object
 }
 
-// 指定 props 的默认值：
-WaterLevelPond.defaultProps = {
-  config: {}
-}
-
 export default WaterLevelPond

src/util/index.js

@@ -58,6 +58,9 @@ export function getPointDistance(pointOne, pointTwo) {
 export function co(gen) {
   let destroyed = false
 
+  // 处理 return 之后 resume 的问题
+  let stop = false
+
   if (typeof gen === 'function') gen = gen()
 
   if (!gen || typeof gen.next !== 'function') return () => ({})
@@ -66,21 +69,35 @@ export function co(gen) {
     destroyed || next(gen.next())
   })
 
-  return () => {
-    destroyed = true
-
-    Promise.resolve().then(() => {
-      gen.return()
-
-      gen = null
-    })
+  return {
+    end () {
+      destroyed = true
+
+      Promise.resolve().then(() => {
+        gen.return()
+
+        gen = null
+      })
+    },
+    pause () {
+      if (!destroyed) { stop = true }
+    },
+    resume () {
+      Promise.resolve().then(() => {
+        if (!destroyed && stop) {
+          stop = false
+
+          next(gen.next())
+        }
+      })
+    }
   }
 
   function next(ret) {
     if (ret.done) return ret.value
 
     return Promise.resolve(ret.value).then(() => {
-      destroyed || next(gen.next())
+      (!destroyed && !stop) && next(gen.next())
     })
   }
 }