{border.map(borderName => (
@@ -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 (
+
+
+
+
+ {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 (
+
+
+
+ {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 }) => {
@@ -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 }) => {
{
-
+
@@ -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 }) => {