1. 修复 co 方法执行异常

2. 优化组件

Author: yizhiyuyou

CHANGELOG.md

@@ -1,3 +1,19 @@
+# 1.0.2-alpha (2019-09-27)
+
+### Bug 修复
+
+- **co:** Generator 自动执行异常.
+
+### 优化组件
+
+- **ActiveRingChart**
+- **DigitalFlop**
+- **FullScreenContainer**
+- **PercentPond**
+- **ScrollBoard**
+- **ScrollBankingBoard**
+- **WaterLevelPond**
+
 # 1.0.1-alpha (2019-09-24)
 
 ### Bug 修复
@@ -6,6 +22,6 @@
 
 # 1.0.0-alpha (2019-09-23)
 
-### Init
+### 初始化代码
 
-- **Vue to React:** Convert **Vue** component to **React** component.
+- **Vue to React:** 转换 **Vue** 组件 为 **React** 组件.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React Large screen data display component library",
   "author": "Duan Yu <949267840@qq.com>",
   "license": "MIT",

src/components/activeRingChart/index.js

@@ -6,12 +6,12 @@ import classnames from 'classnames'
 
 import Charts from '@jiaminghi/charts'
 
-import DvDigitalFlop from '../digitalFlop'
-
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import DigitalFlop from '../digitalFlop'
+
 import { co } from '../../util'
 
 import './style.less'
@@ -159,7 +159,7 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
 
     let option = getRingOption(mergedConfig)
 
-    option = {
+    return {
       ...option,
       series: option.series.reduce(
         (prev, serie, index) =>
@@ -178,8 +178,6 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
         []
       )
     }
-
-    return option
   }
 
   useEffect(() => {
@@ -192,10 +190,10 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
 
     let activeIndex = 0
 
-    setState({ mergedConfig, activeIndex })
-
     function * loop() {
       while (true) {
+        setState({ mergedConfig, activeIndex })
+
         const option = getOption(mergedConfig, activeIndex)
 
         chartRef.current.setOption(option)
@@ -209,16 +207,10 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
         if (activeIndex >= data.length) {
           activeIndex = 0
         }
-
-        setState(state => ({ ...state, activeIndex }))
       }
     }
 
-    const it = loop()
-
-    co(it)
-
-    return () => it.return()
+    return co(loop)
   }, [config])
 
   const classNames = useMemo(
@@ -230,7 +222,7 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
     <div className={classNames} style={style}>
       <div className='active-ring-chart-container' ref={domRef} />
       <div className='active-ring-info'>
-        <DvDigitalFlop config={digitalFlop} />
+        <DigitalFlop config={digitalFlop} />
         <div className='active-ring-name' style={fontSize}>
           {ringName}
         </div>

src/components/digitalFlop/index.js

@@ -69,35 +69,19 @@ const DigitalFlop = ({ config = {}, className, style }) => {
   const rendererRef = useRef(null)
   const graphRef = useRef(null)
 
-  const mergedConfigRef = useRef(null)
-
-  const mountedRef = useRef(true)
-
-  function init() {
-    rendererRef.current = new CRender(domRef.current)
-
-    mergedConfigRef.current = getMergedConfig()
-
-    graphRef.current = getGraph()
-  }
-
-  const getMergedConfig = () =>
-    deepMerge(deepClone(defaultConfig, true), config || {})
-
-  function getGraph() {
-    const { animationCurve, animationFrame } = mergedConfigRef.current
+  function getGraph(mergedConfig) {
+    const { animationCurve, animationFrame } = mergedConfig
 
     return rendererRef.current.add({
       name: 'numberText',
       animationCurve,
       animationFrame,
-      shape: getShape(),
-      style: getStyle()
+      shape: getShape(mergedConfig),
+      style: getStyle(mergedConfig)
     })
   }
 
-  function getShape() {
-    const { number, content, toFixed, textAlign } = mergedConfigRef.current
+  function getShape({ number, content, toFixed, textAlign }) {
     const [w, h] = rendererRef.current.area
 
     const position = [w / 2, h / 2]
@@ -108,22 +92,25 @@ const DigitalFlop = ({ config = {}, className, style }) => {
     return { number, content, toFixed, position }
   }
 
-  function getStyle() {
-    const { style, textAlign } = mergedConfigRef.current
-
+  function getStyle({ style, textAlign }) {
     return deepMerge(style, {
       textAlign,
       textBaseline: 'middle'
     })
   }
 
-  useEffect(init, [])
+  useEffect(() => {
+    const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+
+    if (!rendererRef.current) {
+      rendererRef.current = new CRender(domRef.current)
+
+      graphRef.current = getGraph(mergedConfig)
+    }
 
-  function update() {
-    const mergedConfig = (mergedConfigRef.current = getMergedConfig())
     const graph = graphRef.current
 
-    const shape = getShape()
+    const shape = getShape(mergedConfig)
 
     const cacheNum = graph.shape.number.length
     const shapeNum = shape.number.length
@@ -134,16 +121,8 @@ const DigitalFlop = ({ config = {}, className, style }) => {
 
     Object.assign(graph, { animationCurve, animationFrame })
 
-    graph.animation('style', getStyle(), true)
+    graph.animation('style', getStyle(mergedConfig), true)
     graph.animation('shape', shape)
-  }
-
-  useEffect(() => {
-    !mountedRef.current && update()
-
-    return () => {
-      mountedRef.current = false
-    }
   }, [config])
 
   const classNames = useMemo(() => classnames('dv-digital-flop', className), [

src/components/fullScreenContainer/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -7,31 +7,19 @@ import useAutoResize from '../../use/autoResize'
 import './style.less'
 
 const FullScreenContainer = ({ children, className, style }) => {
-  const { domRef } = useAutoResize(afterAutoResizeMixinInit, () =>
-    setAppScale(allWidth)
-  )
-
-  const [{ allWidth, ready }, setState] = useState({
-    allWidth: 0,
-    ready: false
-  })
+  const { domRef } = useAutoResize()
 
-  function afterAutoResizeMixinInit() {
+  useLayoutEffect(() => {
     const { width, height } = window.screen
 
     Object.assign(domRef.current.style, {
       width: `${width}px`,
       height: `${height}px`
     })
 
-    setAppScale(width)
-
-    setState({ allWidth: width, ready: true })
-  }
-
-  const setAppScale = allWidth =>
-    (domRef.current.style.transform = `scale(${document.body.clientWidth /
-      allWidth})`)
+    domRef.current.style.transform = `scale(${document.body.clientWidth /
+      width})`
+  })
 
   return (
     <div
@@ -40,7 +28,7 @@ const FullScreenContainer = ({ children, className, style }) => {
       style={style}
       ref={domRef}
     >
-      {ready && children}
+      {children}
     </div>
   )
 }

src/components/percentPond/index.js

@@ -160,23 +160,15 @@ const PercentPond = ({ config = {}, className, style }) => {
     return formatter.replace('{value}', value)
   }, [mergedConfig])
 
-  function update() {
+  useEffect(() => {
     const { clientWidth: width, clientHeight: height } = domRef.current
 
-    if (!config) {
-      setState(state => ({ ...state, width, height }))
-
-      return
-    }
-
     setState({
       width,
       height,
       mergedConfig: deepMerge(deepClone(defaultConfig, true), config || {})
     })
-  }
-
-  useEffect(update, [config])
+  }, [config])
 
   const classNames = useMemo(() => classnames('dv-percent-pond', className), [
     className

src/components/scrollBoard/index.js

@@ -201,7 +201,7 @@ const ScrollBoard = ({ onClick, config, className, style }) => {
       heights
     }
 
-    Object.assign(stateRef.current, data, { rowsData: rows })
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 })
 
     setState(state => ({ ...state, ...data }))
   }
@@ -304,11 +304,7 @@ const ScrollBoard = ({ onClick, config, className, style }) => {
 
     if (rowNum >= rowLength) return
 
-    const it = loop()
-
-    co(it)
-
-    return () => it.return()
+    return co(loop)
   }, [config, domRef.current])
 
   useEffect(onResize, [width, height, domRef.current])

src/components/scrollRankingBoard/index.js

@@ -122,7 +122,7 @@ const ScrollRankingBoard = ({ config, className, style }) => {
 
     heights !== undefined && Object.assign(data, { heights })
 
-    Object.assign(stateRef.current, data, { rowsData: rows })
+    Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 })
 
     setState(state => ({ ...state, ...data }))
   }
@@ -197,11 +197,7 @@ const ScrollRankingBoard = ({ config, className, style }) => {
 
     if (rowNum >= rowLength) return
 
-    const it = loop()
-
-    co(it)
-
-    return () => it.return()
+    return co(loop)
   }, [config, domRef.current])
 
   useEffect(() => {