diff --git a/.eslintrc b/.eslintrc index e74d212..1837ae2 100644 --- a/.eslintrc +++ b/.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" }, diff --git a/.vscode/settings.json b/.vscode/settings.json index 703482b..bb3e09d 100644 --- a/.vscode/settings.json +++ b/.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 + } } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 110bfd5..eadb398 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,22 @@ +# 1.0.8-alpha (2019-12-17) + +### Feature + +- **BorderBox & Decoration:** **Configurable** color. + ```html + + + + ``` +- **ScrollBoard:** 配置 header index. + +### New + +- **borderBox11** +- **borderBox12** +- **borderBox13** +- **decoration11** + # 1.0.7-alpha (2019-10-25) ### Perfect diff --git a/README.md b/README.md index 499a117..26b0e6b 100644 --- a/README.md +++ b/README.md @@ -54,8 +54,9 @@ import BorderBox1 from "@jiaminghi/data-view-react/es/borderBox1"; ### TODO -- **飞线图**添加多中心点及反向飞线功能 -- **边框**及**装饰**添加颜色及其他必要配置项，增强可配置性及灵活性. +* **飞线图**添加多中心点及反向飞线功能 +* **地图组件** +* **TS**重构组件库底层依赖 ### 致谢 diff --git a/README_EN.md b/README_EN.md index bb46fb6..33df4b7 100644 --- a/README_EN.md +++ b/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 diff --git a/package.json b/package.json index 3ef62fc..c06146b 100644 --- a/package.json +++ b/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 <949267840@qq.com>", "license": "MIT", @@ -65,4 +65,4 @@ "es", "umd" ] -} +} \ No newline at end of file diff --git a/src/components/borderBox1/index.js b/src/components/borderBox1/index.js index 97049e3..8431069 100644 --- a/src/components/borderBox1/index.js +++ b/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`} > { BorderBox.propTypes = { children: PropTypes.node, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default BorderBox diff --git a/src/components/borderBox10/index.js b/src/components/borderBox10/index.js index 1f68863..d3c98da 100644 --- a/src/components/borderBox10/index.js +++ b/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 ( -
+
{border.map(borderName => ( { className={`${borderName} border`} > @@ -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 diff --git a/src/components/borderBox10/style.less b/src/components/borderBox10/style.less index ce9cca5..c8cfb5f 100644 --- a/src/components/borderBox10/style.less +++ b/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 { diff --git a/src/components/borderBox11/index.js b/src/components/borderBox11/index.js new file mode 100644 index 0000000..34e955b --- /dev/null +++ b/src/components/borderBox11/index.js @@ -0,0 +1,246 @@ +import React, { useMemo, useRef } from 'react' + +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 { fade } from '@jiaminghi/color' + +import useAutoResize from '../../use/autoResize' + +import './style.less' + +const defaultColor = ['#8aaafb', '#1f33a2'] + +const BorderBox = ({ children, className, style, color = [], titleWidth = 250, title = '' }) => { + const filterId = useRef(`borderr-box-11-filterId-${Date.now()}`).current + + const { width, height, domRef } = useAutoResize() + + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + + const classNames = useMemo(() => classnames('dv-border-box-11', className), [ + className + ]) + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ title }} + + + + + + + +
+ {children} +
+
+ ) +} + +BorderBox.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + style: PropTypes.object, + color: PropTypes.array, + titleWidth: PropTypes.number, + title: PropTypes.string +} + +export default BorderBox diff --git a/src/components/borderBox11/style.less b/src/components/borderBox11/style.less new file mode 100644 index 0000000..31ae236 --- /dev/null +++ b/src/components/borderBox11/style.less @@ -0,0 +1,24 @@ +.dv-border-box-11 { + position: relative; + width: 100%; + height: 100%; + + .dv-border-svg-container { + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + + polyline { + fill: none; + stroke-width: 1; + } + } + + .border-box-content { + position: relative; + width: 100%; + height: 100%; + } + } \ No newline at end of file diff --git a/src/components/borderBox12/index.js b/src/components/borderBox12/index.js new file mode 100644 index 0000000..1183a70 --- /dev/null +++ b/src/components/borderBox12/index.js @@ -0,0 +1,129 @@ +import React, { useMemo, useRef } from 'react' + +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 { fade } from '@jiaminghi/color' + +import useAutoResize from '../../use/autoResize' + +import './style.less' + +const defaultColor = ['#2e6099', '#7ce7fd'] + +const BorderBox = ({ children, className, style, color = [] }) => { + const filterId = useRef(`borderr-box-12-filterId-${Date.now()}`).current + + const { width, height, domRef } = useAutoResize() + + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + + const classNames = useMemo(() => classnames('dv-border-box-12', className), [ + className + ]) + + return ( +
+ + + + + + + + + + + + + + + + + { + width && height && + + } + + + + + + + + + +
+ {children} +
+
+ ) +} + +BorderBox.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + style: PropTypes.object, + color: PropTypes.array +} + +export default BorderBox diff --git a/src/components/borderBox12/style.less b/src/components/borderBox12/style.less new file mode 100644 index 0000000..72ee180 --- /dev/null +++ b/src/components/borderBox12/style.less @@ -0,0 +1,19 @@ +.dv-border-box-12 { + position: relative; + width: 100%; + height: 100%; + + .dv-border-svg-container { + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + } + + .border-box-content { + position: relative; + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/src/components/borderBox13/index.js b/src/components/borderBox13/index.js new file mode 100644 index 0000000..549f108 --- /dev/null +++ b/src/components/borderBox13/index.js @@ -0,0 +1,74 @@ +import React, { useMemo } from 'react' + +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 useAutoResize from '../../use/autoResize' + +import './style.less' + +const defaultColor = ['#6586ec', '#2cf7fe'] + +const BorderBox = ({ children, className, style, color = [] }) => { + const { width, height, domRef } = useAutoResize() + + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + + const classNames = useMemo(() => classnames('dv-border-box-13', className), [ + className + ]) + + return ( +
+ + + + + + + + + +
+ {children} +
+
+ ) +} + +BorderBox.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + style: PropTypes.object, + color: PropTypes.array +} + +export default BorderBox diff --git a/src/components/borderBox13/style.less b/src/components/borderBox13/style.less new file mode 100644 index 0000000..16c3032 --- /dev/null +++ b/src/components/borderBox13/style.less @@ -0,0 +1,19 @@ +.dv-border-box-13 { + position: relative; + width: 100%; + height: 100%; + + .dv-border-svg-container { + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + } + + .border-box-content { + position: relative; + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/src/components/borderBox2/index.js b/src/components/borderBox2/index.js index 2d90340..578d947 100644 --- a/src/components/borderBox2/index.js +++ b/src/components/borderBox2/index.js @@ -4,13 +4,20 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, className, style }) => { +const defaultColor = ['#fff', 'rgba(255, 255, 255, 0.6)'] + +const BorderBox = ({ children, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-2', className), [ className ]) @@ -19,19 +26,19 @@ const BorderBox = ({ children, className, style }) => {
- - - - + + + +
{children}
@@ -41,7 +48,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 diff --git a/src/components/borderBox2/style.less b/src/components/borderBox2/style.less index 7056dcc..a401c15 100644 --- a/src/components/borderBox2/style.less +++ b/src/components/borderBox2/style.less @@ -14,18 +14,6 @@ fill: none; stroke-width: 1; } - - circle { - fill: #fff; - } - } - - .dv-bb2-line1 { - stroke: #fff; - } - - .dv-bb2-line2 { - stroke: fade(#fff, 60); } .border-box-content { diff --git a/src/components/borderBox3/index.js b/src/components/borderBox3/index.js index b92e551..56f6dfe 100644 --- a/src/components/borderBox3/index.js +++ b/src/components/borderBox3/index.js @@ -4,13 +4,20 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, className, style }) => { +const defaultColor = ['#2862b7', '#2862b7'] + +const BorderBox = ({ children, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-3', className), [ className ]) @@ -20,21 +27,25 @@ const BorderBox = ({ children, className, style }) => { @@ -48,7 +59,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 diff --git a/src/components/borderBox3/style.less b/src/components/borderBox3/style.less index fef4215..07865dc 100644 --- a/src/components/borderBox3/style.less +++ b/src/components/borderBox3/style.less @@ -12,7 +12,6 @@ polyline { fill: none; - stroke: #2862b7; } } diff --git a/src/components/borderBox4/index.js b/src/components/borderBox4/index.js index 18d9d4d..a548da2 100644 --- a/src/components/borderBox4/index.js +++ b/src/components/borderBox4/index.js @@ -4,13 +4,20 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, reverse = false, className, style }) => { +const defaultColor = ['red', 'rgba(0,0,255,0.8)'] + +const BorderBox = ({ children, reverse = false, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-4', className), [ className ]) @@ -24,32 +31,38 @@ const BorderBox = ({ children, reverse = false, className, style }) => { > - - - + + + - + @@ -63,7 +76,8 @@ BorderBox.propTypes = { children: PropTypes.node, reverse: PropTypes.bool, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } // 指定 props 的默认值： diff --git a/src/components/borderBox4/style.less b/src/components/borderBox4/style.less index 6d54bc3..4269ae1 100644 --- a/src/components/borderBox4/style.less +++ b/src/components/borderBox4/style.less @@ -19,14 +19,6 @@ } } - .sred { - stroke: red; - } - - .sblue { - stroke: fade(blue, 80); - } - .sw1 { stroke-width: 1; } @@ -37,53 +29,43 @@ } .dv-bb4-line-1 { - .sred; .sw1; } .dv-bb4-line-2 { - .sblue; .sw1; } .dv-bb4-line-3 { - .sred; .sw3; } .dv-bb4-line-4 { - .sred; .sw3; } .dv-bb4-line-5 { - .sred; .sw1; } .dv-bb4-line-6 { - .sblue; .sw1; } .dv-bb4-line-7 { - .sblue; .sw1; } .dv-bb4-line-8 { - .sblue; .sw3; } .dv-bb4-line-9 { - .sred; .sw3; stroke-dasharray: 100 250; } .dv-bb4-line-10 { - .sblue; .sw1; stroke-dasharray: 80 270; } diff --git a/src/components/borderBox5/index.js b/src/components/borderBox5/index.js index 468a00f..e7cd6ee 100644 --- a/src/components/borderBox5/index.js +++ b/src/components/borderBox5/index.js @@ -4,13 +4,20 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, reverse = false, className, style }) => { +const defaultColor = ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'] + +const BorderBox = ({ children, reverse = false, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-5', className), [ className ]) @@ -24,28 +31,34 @@ const BorderBox = ({ children, reverse = false, className, style }) => { > @@ -59,7 +72,8 @@ BorderBox.propTypes = { children: PropTypes.node, reverse: PropTypes.bool, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } // 指定 props 的默认值： diff --git a/src/components/borderBox5/style.less b/src/components/borderBox5/style.less index 893ac3d..5eef55d 100644 --- a/src/components/borderBox5/style.less +++ b/src/components/borderBox5/style.less @@ -19,23 +19,16 @@ } } - .dv-bb5-line-1 { + .dv-bb5-line-1, .dv-bb5-line-2 { stroke-width: 1; - stroke: fade(#fff, 35); - } - - .dv-bb5-line-2 { - stroke: fade(#fff, 20); } .dv-bb5-line-3, .dv-bb5-line-6 { stroke-width: 5; - stroke: fade(#fff, 15); } .dv-bb5-line-4, .dv-bb5-line-5 { stroke-width: 2; - stroke: fade(#fff, 15); } .border-box-content { diff --git a/src/components/borderBox6/index.js b/src/components/borderBox6/index.js index e45d8a2..6034907 100644 --- a/src/components/borderBox6/index.js +++ b/src/components/borderBox6/index.js @@ -4,13 +4,20 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, className, style }) => { +const defaultColor = ['rgba(255, 255, 255, 0.35)', 'gray'] + +const BorderBox = ({ children, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-6', className), [ className ]) @@ -18,24 +25,26 @@ const BorderBox = ({ children, className, style }) => { return (
- - - - - - - - - - - - - - + + + + + + + + + + + + + + @@ -48,7 +57,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 diff --git a/src/components/borderBox6/style.less b/src/components/borderBox6/style.less index 2f7621c..bc93cfc 100644 --- a/src/components/borderBox6/style.less +++ b/src/components/borderBox6/style.less @@ -10,14 +10,9 @@ width: 100%; height: 100%; - circle { - fill: gray; - } - polyline { fill: none; stroke-width: 1; - stroke: fade(#fff, 35); } } diff --git a/src/components/borderBox7/index.js b/src/components/borderBox7/index.js index ecaab66..7275f8b 100644 --- a/src/components/borderBox7/index.js +++ b/src/components/borderBox7/index.js @@ -4,46 +4,65 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, className, style }) => { +const defaultColor = ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'] + +const BorderBox = ({ children, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-7', className), [ className ]) + const styles = useMemo(() => ({ + boxShadow: `inset 0 0 40px ${mergedColor[0]}`, + border: `1px solid ${mergedColor[0]}`, + ...style + }), [style, mergedColor]) + return ( -
+
- + - + @@ -56,7 +75,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 diff --git a/src/components/borderBox7/style.less b/src/components/borderBox7/style.less index 6a57fac..2b80d97 100644 --- a/src/components/borderBox7/style.less +++ b/src/components/borderBox7/style.less @@ -1,11 +1,7 @@ .dv-border-box-7 { - @color: fade(gray, 30); - position: relative; width: 100%; height: 100%; - box-shadow: inset 0 0 40px fade(@color, 30); - border: 1px solid @color; .dv-svg-container { position: absolute; @@ -21,12 +17,10 @@ } .dv-bb7-line-width-2 { - stroke: @color; stroke-width: 2; } .dv-bb7-line-width-5 { - stroke: fade(gray, 50); stroke-width: 5; } diff --git a/src/components/borderBox8/index.js b/src/components/borderBox8/index.js index ff98e1f..28b8488 100644 --- a/src/components/borderBox8/index.js +++ b/src/components/borderBox8/index.js @@ -4,11 +4,16 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, className, style }) => { +const defaultColor = ['#235fa7', '#4fd2dd'] + +const BorderBox = ({ children, className, style, color = [], dur = 3 }) => { const { width, height, domRef } = useAutoResize() const [{ path, gradient, mask }] = useState(() => { @@ -21,6 +26,8 @@ const BorderBox = ({ children, className, style }) => { } }) + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const length = useMemo(() => (width + height - 5) * 2, [width, height]) const classNames = useMemo(() => classnames('dv-border-box-8', className), [ @@ -45,7 +52,7 @@ const BorderBox = ({ children, className, style }) => { { - + { attributeName='stroke-dasharray' from={`0, ${length}`} to={`${length}, 0`} - dur='3s' + dur={`${dur}s`} repeatCount='indefinite' /> @@ -81,7 +88,9 @@ const BorderBox = ({ children, className, style }) => { BorderBox.propTypes = { children: PropTypes.node, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array, + dur: PropTypes.number } export default BorderBox diff --git a/src/components/borderBox9/index.js b/src/components/borderBox9/index.js index 20aab18..9735182 100644 --- a/src/components/borderBox9/index.js +++ b/src/components/borderBox9/index.js @@ -4,11 +4,16 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const BorderBox = ({ children, className, style }) => { +const defaultColor = ['#11eefd', '#0078d2'] + +const BorderBox = ({ children, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() const [{ gradientId, maskId }] = useState(() => { @@ -20,6 +25,8 @@ const BorderBox = ({ children, className, style }) => { } }) + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-border-box-9', className), [ className ]) @@ -29,8 +36,38 @@ const BorderBox = ({ children, className, style }) => { - - + + + + + + + + @@ -123,7 +160,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 diff --git a/src/components/decoration1/index.js b/src/components/decoration1/index.js index 53e33d0..98dc835 100644 --- a/src/components/decoration1/index.js +++ b/src/components/decoration1/index.js @@ -4,10 +4,15 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' +const defaultColor = ['#fff', '#0de7c2'] + const pointSideLength = 2.5 const halfPointSideLength = pointSideLength / 2 @@ -35,7 +40,7 @@ function getPoints() { return points.reduce((all, item) => [...all, ...item], []) } -const Decoration = ({ className, style }) => { +const Decoration = ({ className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() function calcSVGData() { @@ -48,6 +53,8 @@ const Decoration = ({ className, style }) => { } } + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const { svgScale, points, rects } = useMemo(calcSVGData, [width, height]) const classNames = useMemo(() => classnames('dv-decoration-1', className), [ @@ -67,7 +74,7 @@ const Decoration = ({ className, style }) => { ...prev, { {Math.random() > 0.6 && ( { }, [])} {!!rects[0] && ( { )} {!!rects[1] && ( { Decoration.propTypes = { className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default Decoration diff --git a/src/components/decoration10/index.js b/src/components/decoration10/index.js index e3ad13e..583957d 100644 --- a/src/components/decoration10/index.js +++ b/src/components/decoration10/index.js @@ -4,11 +4,16 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const Decoration = ({ className, style }) => { +const defaultColor = ['#00c2ff', 'rgba(0, 194, 255, 0.3)'] + +const Decoration = ({ className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() const { @@ -29,6 +34,8 @@ const Decoration = ({ className, style }) => { animationId7: `d10ani7${Date.now()}` }).current + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-decoration-10', className), [ className ]) @@ -37,13 +44,13 @@ const Decoration = ({ className, style }) => {
{ { { /> - + - + - + - + { Decoration.propTypes = { className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default Decoration diff --git a/src/components/decoration11/index.js b/src/components/decoration11/index.js new file mode 100644 index 0000000..dd29f15 --- /dev/null +++ b/src/components/decoration11/index.js @@ -0,0 +1,89 @@ +import React, { useMemo } from 'react' + +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 { fade } from '@jiaminghi/color' + +import useAutoResize from '../../use/autoResize' + +import './style.less' + +const defaultColor = ['#1a98fc', '#2cf7fe'] + +const BorderBox = ({ children, className, style, color = [] }) => { + const { width, height, domRef } = useAutoResize() + + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + + const classNames = useMemo(() => classnames('dv-decoration-11', className), [ + className + ]) + + return ( +
+ + + + + + + + + + + + + + + + +
+ {children} +
+
+ ) +} + +BorderBox.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + style: PropTypes.object, + color: PropTypes.array +} + +export default BorderBox diff --git a/src/components/decoration11/style.less b/src/components/decoration11/style.less new file mode 100644 index 0000000..200d3dc --- /dev/null +++ b/src/components/decoration11/style.less @@ -0,0 +1,17 @@ +.dv-decoration-11 { + position: relative; + width: 100%; + height: 100%; + display: flex; + + .decoration-content { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } +} \ No newline at end of file diff --git a/src/components/decoration2/index.js b/src/components/decoration2/index.js index e4a54dc..7a5e48b 100644 --- a/src/components/decoration2/index.js +++ b/src/components/decoration2/index.js @@ -4,11 +4,16 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const Decoration = ({ reverse = false, className, style }) => { +const defaultColor = ['#3faacb', '#fff'] + +const Decoration = ({ reverse = false, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() function calcSVGData() { @@ -17,6 +22,8 @@ const Decoration = ({ reverse = false, className, style }) => { : { w: width, h: 1, x: 0, y: height / 2 } } + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const { x, y, w, h } = useMemo(calcSVGData, [reverse, width, height]) const classNames = useMemo(() => classnames('dv-decoration-2', className), [ @@ -26,7 +33,7 @@ const Decoration = ({ reverse = false, className, style }) => { return (
- + { /> - + { Decoration.propTypes = { reverse: PropTypes.bool, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } // 指定 props 的默认值： diff --git a/src/components/decoration3/index.js b/src/components/decoration3/index.js index c00b96f..dbaee33 100644 --- a/src/components/decoration3/index.js +++ b/src/components/decoration3/index.js @@ -4,10 +4,15 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' +const defaultColor = ['#7acaec', 'transparent'] + const pointSideLength = 7 const svgWH = [300, 35] @@ -35,7 +40,7 @@ function getPoints() { return points.reduce((all, item) => [...all, ...item], []) } -const Decoration = ({ className, style }) => { +const Decoration = ({ className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() function calcSVGData() { @@ -45,6 +50,8 @@ const Decoration = ({ className, style }) => { } } + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const { svgScale, points } = useMemo(calcSVGData, [width, height]) const classNames = useMemo(() => classnames('dv-decoration-3', className), [ @@ -61,7 +68,7 @@ const Decoration = ({ className, style }) => { {points.map((point, i) => ( { {Math.random() > 0.6 && ( { Decoration.propTypes = { className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default Decoration diff --git a/src/components/decoration4/index.js b/src/components/decoration4/index.js index cb9fa40..f22455d 100644 --- a/src/components/decoration4/index.js +++ b/src/components/decoration4/index.js @@ -4,13 +4,20 @@ 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 useAutoResize from '../../use/autoResize' import './style.less' -const Decoration = ({ reverse = false, className, style }) => { +const defaultColor = ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'] + +const Decoration = ({ reverse = false, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-decoration-4', className), [ className ]) @@ -27,12 +34,12 @@ const Decoration = ({ reverse = false, className, style }) => { > { Decoration.propTypes = { reverse: PropTypes.bool, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } // 指定 props 的默认值： diff --git a/src/components/decoration5/index.js b/src/components/decoration5/index.js index 41e930d..e41e799 100644 --- a/src/components/decoration5/index.js +++ b/src/components/decoration5/index.js @@ -4,13 +4,17 @@ import PropTypes from 'prop-types' import classnames from 'classnames' -import { getPolylineLength } from '@jiaminghi/charts/lib/util' +import { getPolylineLength, deepMerge } from '@jiaminghi/charts/lib/util' + +import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' import useAutoResize from '../../use/autoResize' import './style.less' -const Decoration = ({ className, style }) => { +const defaultColor = ['#3f96a5', '#3f96a5'] + +const Decoration = ({ className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() function calcSVGData() { @@ -38,6 +42,8 @@ const Decoration = ({ className, style }) => { return { line1Points, line2Points, line1Length, line2Length } } + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const { line1Points, line2Points, line1Length, line2Length } = useMemo( calcSVGData, [width, height] @@ -52,7 +58,7 @@ const Decoration = ({ className, style }) => { @@ -71,7 +77,7 @@ const Decoration = ({ className, style }) => { @@ -95,7 +101,8 @@ const Decoration = ({ className, style }) => { Decoration.propTypes = { className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default Decoration diff --git a/src/components/decoration6/index.js b/src/components/decoration6/index.js index f726a8c..e086e83 100644 --- a/src/components/decoration6/index.js +++ b/src/components/decoration6/index.js @@ -4,12 +4,18 @@ import PropTypes from 'prop-types' import classnames from 'classnames' +import { deepMerge } from '@jiaminghi/charts/lib/util' + +import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' + import useAutoResize from '../../use/autoResize' import { randomExtend } from '../../util' import './style.less' +const defaultColor = ['#7acaec', '#7acaec'] + const svgWH = [300, 35] const rowNum = 1 @@ -57,7 +63,7 @@ function getData() { return { heights, minHeights, randoms } } -const Decoration = ({ className, style }) => { +const Decoration = ({ className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() function calcSVGData() { @@ -68,6 +74,8 @@ const Decoration = ({ className, style }) => { } } + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const { points, heights, minHeights, randoms, svgScale } = useMemo( calcSVGData, [width, height] @@ -87,7 +95,7 @@ const Decoration = ({ className, style }) => { {points.map((point, i) => ( 0.5 ? 0 : 1]} x={point[0] - halfRectWidth} y={point[1] - heights[i] / 2} width={rectWidth} @@ -123,7 +131,8 @@ const Decoration = ({ className, style }) => { Decoration.propTypes = { className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default Decoration diff --git a/src/components/decoration7/index.js b/src/components/decoration7/index.js index 5f7be43..c4d23ec 100644 --- a/src/components/decoration7/index.js +++ b/src/components/decoration7/index.js @@ -4,9 +4,17 @@ import PropTypes from 'prop-types' import classnames from 'classnames' +import { deepMerge } from '@jiaminghi/charts/lib/util' + +import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' + import './style.less' -const Decoration = ({ children, className, style }) => { +const defaultColor = ['#1dc1f5', '#1dc1f5'] + +const Decoration = ({ children, className, style, color = [] }) => { + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const classNames = useMemo(() => classnames('dv-decoration-7', className), [ className ]) @@ -17,13 +25,13 @@ const Decoration = ({ children, className, style }) => { @@ -32,13 +40,13 @@ const Decoration = ({ children, className, style }) => { @@ -49,7 +57,8 @@ const Decoration = ({ children, className, style }) => { Decoration.propTypes = { children: PropTypes.node, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } export default Decoration diff --git a/src/components/decoration8/index.js b/src/components/decoration8/index.js index e4a5b98..87a3247 100644 --- a/src/components/decoration8/index.js +++ b/src/components/decoration8/index.js @@ -4,15 +4,23 @@ import PropTypes from 'prop-types' import classnames from 'classnames' +import { deepMerge } from '@jiaminghi/charts/lib/util' + +import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' + import useAutoResize from '../../use/autoResize' import './style.less' -const Decoration = ({ reverse = false, className, style }) => { +const defaultColor = ['#3f96a5', '#3f96a5'] + +const Decoration = ({ reverse = false, className, style, color = [] }) => { const { width, height, domRef } = useAutoResize() const xPos = pos => (!reverse ? pos : width - pos) + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const [pointsOne, pointsTwo, pointsThree] = useMemo( () => [ `${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`, @@ -30,21 +38,21 @@ const Decoration = ({ reverse = false, className, style }) => {
{ Decoration.propTypes = { reverse: PropTypes.bool, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array } // 指定 props 的默认值： diff --git a/src/components/decoration9/index.js b/src/components/decoration9/index.js index d148524..a551368 100644 --- a/src/components/decoration9/index.js +++ b/src/components/decoration9/index.js @@ -4,17 +4,27 @@ import PropTypes from 'prop-types' import classnames from 'classnames' +import { fade } from '@jiaminghi/color' + +import { deepMerge } from '@jiaminghi/charts/lib/util' + +import { deepClone } from '@jiaminghi/c-render/lib/plugin/util' + import useAutoResize from '../../use/autoResize' import './style.less' +const defaultColor = ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'] + const svgWH = [100, 100] -const Decoration = ({ children, className, style }) => { +const Decoration = ({ children, className, style, color = [], dur = 3 }) => { const { width, height, domRef } = useAutoResize() const polygonIdRef = useRef(`decoration-9-polygon-${Date.now()}`) + const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color]) + const svgScale = useMemo(() => { const [w, h] = svgWH @@ -44,7 +54,7 @@ const Decoration = ({ children, className, style }) => { cy='50' r='45' fill='transparent' - stroke='rgba(3, 166, 224, 0.5)' + stroke={mergedColor[1]} strokeWidth='10' strokeDasharray='80, 100, 30, 100' > @@ -52,7 +62,7 @@ const Decoration = ({ children, className, style }) => { attributeName='transform' type='rotate' values='0 50 50;360 50 50' - dur='3s' + dur={`${dur}s`} repeatCount='indefinite' /> @@ -62,7 +72,7 @@ const Decoration = ({ children, className, style }) => { cy='50' r='45' fill='transparent' - stroke='rgba(3, 166, 224, 0.8)' + stroke={mergedColor[0]} strokeWidth='6' strokeDasharray='50, 66, 100, 66' > @@ -70,7 +80,7 @@ const Decoration = ({ children, className, style }) => { attributeName='transform' type='rotate' values='0 50 50;-360 50 50' - dur='3s' + dur={`${dur}s`} repeatCount='indefinite' /> @@ -80,7 +90,7 @@ const Decoration = ({ children, className, style }) => { cy='50' r='38' fill='transparent' - stroke='rgba(3, 166, 224, 0.2)' + stroke={fade(mergedColor[1] || defaultColor[1], 30)} strokeWidth='1' strokeDasharray='5, 1' /> @@ -88,17 +98,17 @@ const Decoration = ({ children, className, style }) => { 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)' + Math.random() > 0.4 ? 'transparent' : mergedColor[0] } > @@ -109,7 +119,7 @@ const Decoration = ({ children, className, style }) => { cy='50' r='26' fill='transparent' - stroke='rgba(3, 166, 224, 0.2)' + stroke={fade(mergedColor[1] || defaultColor[1], 30)} strokeWidth='1' strokeDasharray='5, 1' /> @@ -123,7 +133,9 @@ const Decoration = ({ children, className, style }) => { Decoration.propTypes = { children: PropTypes.node, className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, + color: PropTypes.array, + dur: PropTypes.number } export default Decoration diff --git a/src/components/scrollBoard/index.js b/src/components/scrollBoard/index.js index 7c45bb3..38731ce 100644 --- a/src/components/scrollBoard/index.js +++ b/src/components/scrollBoard/index.js @@ -82,6 +82,12 @@ const defaultConfig = { * @default index = false */ index: false, + /** + * @description index Header + * @type {String} + * @default indexHeader = '#' + */ + indexHeader: '#', /** * @description Carousel type * @type {String} @@ -91,14 +97,14 @@ const defaultConfig = { carousel: 'single' } -function calcHeaderData({ header, index }) { +function calcHeaderData({ header, index, indexHeader }) { if (!header.length) { return [] } header = [...header] - if (index) header.unshift('#') + if (index) header.unshift(indexHeader) return header } @@ -180,7 +186,10 @@ const ScrollBoard = ({ onClick, config, className, style }) => { } function calcData() { - const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {}) + const mergedConfig = deepMerge( + deepClone(defaultConfig, true), + config || {} + ) const header = calcHeaderData(mergedConfig) @@ -201,7 +210,10 @@ const ScrollBoard = ({ onClick, config, className, style }) => { heights } - Object.assign(stateRef.current, data, { rowsData: rows, animationIndex: 0 }) + Object.assign(stateRef.current, data, { + rowsData: rows, + animationIndex: 0 + }) setState(state => ({ ...state, ...data })) } @@ -235,7 +247,7 @@ const ScrollBoard = ({ onClick, config, className, style }) => { return new Array(data.length).fill(avgHeight) } - function * animation(start = false) { + function* animation(start = false) { let { avgHeight, animationIndex, @@ -283,9 +295,9 @@ const ScrollBoard = ({ onClick, config, className, style }) => { let start = true - function * loop() { + function* loop() { while (true) { - yield * animation(start) + yield* animation(start) start = false diff --git a/src/index.js b/src/index.js index 7e8e1df..c41b2c8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,7 @@ /** * IMPORT COMPONENTS */ -export { - default as FullScreenContainer -} from './components/fullScreenContainer' +export { default as FullScreenContainer } from './components/fullScreenContainer' export { default as Loading } from './components/loading' // border box @@ -17,6 +15,9 @@ export { default as BorderBox7 } from './components/borderBox7' export { default as BorderBox8 } from './components/borderBox8' export { default as BorderBox9 } from './components/borderBox9' export { default as BorderBox10 } from './components/borderBox10' +export { default as BorderBox11 } from './components/borderBox11' +export { default as BorderBox12 } from './components/borderBox12' +export { default as BorderBox13 } from './components/borderBox13' // decoration export { default as Decoration1 } from './components/decoration1' @@ -29,6 +30,7 @@ export { default as Decoration7 } from './components/decoration7' export { default as Decoration8 } from './components/decoration8' export { default as Decoration9 } from './components/decoration9' export { default as Decoration10 } from './components/decoration10' +export { default as Decoration11 } from './components/Decoration11' // charts export { default as Charts } from './components/charts'