1. new borderbox 2. new decoration 3. 增加序号表头配置

.eslintrc

@@ -1,15 +1,10 @@
 {
   "parser": "babel-eslint",
-  "extends": [
-    "standard",
-    "standard-react"
-  ],
+  "extends": ["standard", "standard-react"],
   "env": {
     "es6": true
   },
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "parserOptions": {
     "sourceType": "module"
   },

.vscode/settings.json

@@ -19,5 +19,8 @@
   "eslint.run": "onSave",
   "editor.formatOnSave": true,
   "eslint.autoFixOnSave": true,
-  "prettier.eslintIntegration": true
+  "prettier.eslintIntegration": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 1.0.8-alpha (2019-12-17)
+
+### Feature
+
+- **BorderBox & Decoration:** **Configurable** color.
+  ```html
+  <!-- Example -->
+  <BorderBox1 color={['red', 'green']} />
+  <Decoration1 color={['red', 'green']} />
+  ```
+- **ScrollBoard:** 配置 header index. 
+
+### New
+
+- **borderBox11**
+- **borderBox12**
+- **borderBox13**
+- **decoration11**
+
 # 1.0.7-alpha (2019-10-25)
 
 ### Perfect

README.md

@@ -54,8 +54,9 @@ import BorderBox1 from "@jiaminghi/data-view-react/es/borderBox1";
 
 ### TODO
 
-- **飞线图**添加多中心点及反向飞线功能
-- **边框**及**装饰**添加颜色及其他必要配置项，增强可配置性及灵活性.
+* **飞线图**添加多中心点及反向飞线功能
+* **地图组件**
+* **TS**重构组件库底层依赖
 
 ### 致谢
 

README_EN.md

@@ -54,8 +54,9 @@ The `UMD` version can be directly imported using the `script` tag. After the int
 
 ### TODO
 
-- **flylineChart**Add multi-center point and reverse fly line function.
-- Add color and other necessary configuration to the **borderBox** and **decoration** to enhance configurability and flexibility.
+* **flylineChart**Add multi-center point and reverse fly line function.
+* **Map Component**
+* Refactor underlying dependencies using **TS**.
 
 ### Acknowledgement
 

package.json

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

src/components/borderBox1/index.js

@@ -4,11 +4,17 @@ import PropTypes from 'prop-types'
 
 import classnames from 'classnames'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 import './style.less'
 
 const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+const defaultColor = ['#4fd2dd', '#235fa7']
+
+const BorderBox = ({ children, className, style, color = [] }) => {
+  const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color])
 
-const BorderBox = ({ children, className, style }) => {
   const classNames = useMemo(() => classnames('dv-border-box-1', className), [
     className
   ])
@@ -23,36 +29,36 @@ const BorderBox = ({ children, className, style }) => {
           className={`${borderName} border`}
         >
           <polygon
-            fill='#4fd2dd'
+            fill={mergedColor[0]}
             points='6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63'
           >
             <animate
               attributeName='fill'
-              values='#4fd2dd;#235fa7;#4fd2dd'
+              values={`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`}
               dur='0.5s'
               begin='0s'
               repeatCount='indefinite'
             />
           </polygon>
           <polygon
-            fill='#235fa7'
+            fill={mergedColor[1]}
             points='27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8'
           >
             <animate
               attributeName='fill'
-              values='#235fa7;#4fd2dd;#235fa7'
+              values={`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`}
               dur='0.5s'
               begin='0s'
               repeatCount='indefinite'
             />
           </polygon>
           <polygon
-            fill='#4fd2dd'
+            fill={mergedColor[0]}
             points='9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54'
           >
             <animate
               attributeName='fill'
-              values='#4fd2dd;#235fa7;transparent'
+              values={`${mergedColor[0]};${mergedColor[1]};transparent`}
               dur='1s'
               begin='0s'
               repeatCount='indefinite'
@@ -68,7 +74,8 @@ const BorderBox = ({ children, className, style }) => {
 BorderBox.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  color: PropTypes.array
 }
 
 export default BorderBox

src/components/borderBox10/index.js

@@ -4,17 +4,28 @@ import PropTypes from 'prop-types'
 
 import classnames from 'classnames'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 import './style.less'
 
 const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+const defaultColor = ['#1d48c4', '#d3e1f8']
+
+const BorderBox = ({ children, className, style, color = [] }) => {
+  const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color])
 
-const BorderBox = ({ children, className, style }) => {
   const classNames = useMemo(() => classnames('dv-border-box-10', className), [
     className
   ])
 
+  const styles = useMemo(() => ({
+    boxShadow: `inset 0 0 25px 3px ${mergedColor[0]}`,
+    ...style
+  }), [style, mergedColor])
+
   return (
-    <div className={classNames} style={style}>
+    <div className={classNames} style={styles}>
       {border.map(borderName => (
         <svg
           width='150px'
@@ -23,7 +34,7 @@ const BorderBox = ({ children, className, style }) => {
           className={`${borderName} border`}
         >
           <polygon
-            fill='#d3e1f8'
+            fill={mergedColor[1]}
             points='40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3'
           />
         </svg>
@@ -36,7 +47,8 @@ const BorderBox = ({ children, className, style }) => {
 BorderBox.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  color: PropTypes.array
 }
 
 export default BorderBox

src/components/borderBox10/style.less

@@ -2,7 +2,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 25px 3px #1d48c4;
   border-radius: 6px;
 
   .border {