update version to 1.2.5

CHANGELOG.md

@@ -1,3 +1,19 @@
+# 1.2.5-alpha (2020-11-15)
+
+### New
+
+- **decoration12:** New decoration(Radar scan).
+
+### Optmization
+
+- **ScrollBoard:** Reduce redundant node rendering.
+- **ScrollRankingBoard:** Reduce redundant node rendering.
+- **ScrollRankingBoard:** Add value formatter.
+- **BorderBox:** Canonical class name.
+- **useAutoResize(hooks):** Add exception prompt.
+- **Decoration** add `dur` configuration.
+- **ActiveRingChart** add `digitalFlopUnit` configuration.
+
 # 1.2.4-alpha (2020-7-25)
 
 ### Bug 修复
@@ -70,12 +86,14 @@
 ### Feature
 
 - **BorderBox & Decoration:** **Configurable** color.
+
   ```html
   <!-- Example -->
   <BorderBox1 color={['red', 'green']} />
   <Decoration1 color={['red', 'green']} />
   ```
-- **ScrollBoard:** 配置 header index. 
+
+- **ScrollBoard:** 配置 header index.
 
 ### New
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view-react",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "React Large screen data display component library",
   "author": "Duan Yu <[email protected]>",
   "license": "MIT",
@@ -65,4 +65,4 @@
     "es",
     "umd"
   ]
-}
+}

src/components/scrollBoard/index.js

@@ -270,6 +270,7 @@ const ScrollBoard = forwardRef(({ onClick, config = {}, className, style, onMous
 
     let rows = rowsData.slice(animationIndex)
     rows.push(...rowsData.slice(0, animationIndex))
+    rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
 
     const heights = new Array(rowLength).fill(avgHeight)
     setState(state => ({ ...state, rows, heights }))

src/components/scrollRankingBoard/index.js

@@ -51,7 +51,13 @@ const defaultConfig = {
    * @type {Boolean}
    * @default sort = true
    */
-  sort: true
+  sort: true,
+  /**
+   * @description Value formatter
+   * @type {Function}
+   * @default valueFormatter = null
+   */
+  valueFormatter: null
 }
 
 function calcRows({ data, rowNum, sort }) {
@@ -170,6 +176,7 @@ const ScrollRankingBoard = forwardRef(({ config = {}, className, style }, ref) =
 
     let rows = rowsData.slice(animationIndex)
     rows.push(...rowsData.slice(0, animationIndex))
+    rows = rows.slice(0, rowNum + 1)
 
     const heights = new Array(rowLength).fill(avgHeight)
     setState(state => ({ ...state, rows, heights }))
@@ -244,7 +251,7 @@ const ScrollRankingBoard = forwardRef(({ config = {}, className, style }, ref) =
             <div className='rank'>No.{item.ranking}</div>
             <div className='info-name' dangerouslySetInnerHTML={{ __html: item.name }} />
             <div className='ranking-value'>
-              {item.value + mergedConfig.unit}
+              {mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit}
             </div>
           </div>
 

src/use/autoResize.js

@@ -7,9 +7,15 @@ export default function useAutoResize(ref) {
   const domRef = useRef(null)
 
   const setWH = useCallback(() => {
-    const { clientWidth, clientHeight } = domRef.current
+    const { clientWidth, clientHeight } = domRef.current || { clientWidth: 0, clientHeight: 0 }
 
     setState({ width: clientWidth, height: clientHeight })
+
+    if (!domRef.current) {
+      console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+    } else if (!clientWidth || !clientHeight) {
+      console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+    }
   }, [])
 
   useImperativeHandle(ref, () => ({ setWH }), [])
@@ -24,10 +30,14 @@ export default function useAutoResize(ref) {
     window.addEventListener('resize', debounceSetWHFun)
 
     return () => {
+      window.removeEventListener('resize', debounceSetWHFun)
+
+      if (!domObserver) {
+        return
+      }
+
       domObserver.disconnect()
       domObserver.takeRecords()
-
-      window.removeEventListener('resize', debounceSetWHFun)
     }
   }, [])