使用 uuid 生成唯一 id

DataV-Team · Jun 14, 2020 · eb88d29 · eb88d29
1 parent a6f3aaa
commit eb88d29
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 93 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,9 +3,12 @@
 ### Perfect
 
 - **BorderBox:** 添加 backgroundColor prop.
+- **BorderBox8:** 添加 reverse prop.
 - **DigitalFlop:** 添加 rowGap 配置.
-- **CapsuleChart:** 添加 showVal 配置.
-- **ActiveRightChart:** 添加 showOriginalValue 配置.
+- **CapsuleChart:** 添加 showValue 配置.
+- **ActiveRightChart:** 添加 showOriginValue 配置.
+
+- **uuid:** 使用 uuid 生成唯一 id.
 
 # 1.1.7-alpha (2020-04-10)
 

diff --git a/src/components/activeRingChart/index.js b/src/components/activeRingChart/index.js
@@ -82,11 +82,11 @@ const defaultConfig = {
    */
   animationFrame: 50,
   /**
-   * @description CRender showOriginalValue
+   * @description showOriginValue
    * @type {Boolean}
-   * @default showOriginalValue = false
+   * @default showOriginValue = false
    */
-  showOriginalValue: false
+  showOriginValue: false
 }
 
 const ActiveRingChart = ({ config = {}, className, style }) => {
@@ -101,13 +101,13 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
   const digitalFlop = useMemo(() => {
     if (!mergedConfig) return {}
 
-    const { digitalFlopStyle, digitalFlopToFixed, data, showOriginalValue } = mergedConfig
+    const { digitalFlopStyle, digitalFlopToFixed, data, showOriginValue } = mergedConfig
 
     const value = data.map(({ value }) => value)
 
     let displayValue
 
-    if (showOriginalValue) {
+    if (showOriginValue) {
       displayValue = value[activeIndex]
     } else {
       const sum = value.reduce((all, v) => all + v, 0)
@@ -117,7 +117,7 @@ const ActiveRingChart = ({ config = {}, className, style }) => {
     }
 
     return {
-      content: showOriginalValue ? '{nt}' : '{nt}%',
+      content: showOriginValue ? '{nt}' : '{nt}%',
       number: [displayValue],
       style: digitalFlopStyle,
       toFixed: digitalFlopToFixed

diff --git a/src/components/borderBox11/index.js b/src/components/borderBox11/index.js
@@ -10,12 +10,14 @@ import { fade } from '@jiaminghi/color'
 
 import useAutoResize from '../../use/autoResize'
 
+import { uuid } from '../../util'
+
 import './style.less'
 
 const defaultColor = ['#8aaafb', '#1f33a2']
 
 const BorderBox = forwardRef(({ children, className, style, color = [], titleWidth = 250, title = '', backgroundColor = 'transparent' }, ref) => {
-  const filterId = useRef(`border-box-11-filterId-${Date.now()}`).current
+  const filterId = useRef(`border-box-11-filterId-${uuid()}`).current
 
   const { width, height, domRef } = useAutoResize(ref)
 

diff --git a/src/components/borderBox12/index.js b/src/components/borderBox12/index.js
@@ -10,12 +10,14 @@ import { fade } from '@jiaminghi/color'
 
 import useAutoResize from '../../use/autoResize'
 
+import { uuid } from '../../util'
+
 import './style.less'
 
 const defaultColor = ['#2e6099', '#7ce7fd']
 
 const BorderBox = forwardRef(({ children, className, style, color = [], backgroundColor = 'transparent' }, ref) => {
-  const filterId = useRef(`border-box-12-filterId-${Date.now()}`).current
+  const filterId = useRef(`border-box-12-filterId-${uuid()}`).current
 
   const { width, height, domRef } = useAutoResize(ref)
 

diff --git a/src/components/borderBox8/index.js b/src/components/borderBox8/index.js
@@ -9,23 +9,42 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import useAutoResize from '../../use/autoResize'
 
+import { uuid } from '../../util'
+
 import './style.less'
 
 const defaultColor = ['#235fa7', '#4fd2dd']
 
-const BorderBox = forwardRef(({ children, className, style, color = [], dur = 3, backgroundColor = 'transparent' }, ref) => {
+const BorderBox = forwardRef((
+  {
+    children,
+    className,
+    style,
+    color = [],
+    dur = 3,
+    backgroundColor = 'transparent',
+    reverse = false
+  },
+  ref
+) => {
   const { width, height, domRef } = useAutoResize(ref)
 
   const [{ path, gradient, mask }] = useState(() => {
-    const timestamp = Date.now()
+    const id = uuid()
 
     return {
-      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`
+      path: `border-box-8-path-${id}`,
+      gradient: `border-box-8-gradient-${id}`,
+      mask: `border-box-8-mask-${id}`
     }
   })
 
+  const pathD = useMemo(() =>
+    reverse
+      ? `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+      : `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
+  , [width, height, reverse])
+
   const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color])
 
   const length = useMemo(() => (width + height - 5) * 2, [width, height])
@@ -38,26 +57,15 @@ const BorderBox = forwardRef(({ children, className, style, color = [], dur = 3,
     <div className={classNames} style={style} ref={domRef}>
       <svg className='dv-svg-container' width={width} height={height}>
         <defs>
-          <path
-            id={path}
-            d={`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height -
-              2.5} L2.5, ${height - 2.5} L2.5, 2.5`}
-            fill='transparent'
-          />
+          <path id={path} d={pathD} fill='transparent' />
           <radialGradient id={gradient} cx='50%' cy='50%' r='50%'>
             <stop offset='0%' stopColor='#fff' stopOpacity='1' />
             <stop offset='100%' stopColor='#fff' stopOpacity='0' />
           </radialGradient>
 
           <mask id={mask}>
             <circle cx='0' cy='0' r='150' fill={`url(#${gradient})`}>
-              <animateMotion
-                dur={`${dur}s`}
-                path={`M2.5, 2.5 L${width - 2.5}, 2.5 L${width -
-                  2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`}
-                rotate='auto'
-                repeatCount='indefinite'
-              />
+              <animateMotion dur={`${dur}s`} path={pathD} rotate='auto' repeatCount='indefinite' />
             </circle>
           </mask>
         </defs>
@@ -93,7 +101,8 @@ BorderBox.propTypes = {
   style: PropTypes.object,
   color: PropTypes.array,
   dur: PropTypes.number,
-  backgroundColor: PropTypes.string
+  backgroundColor: PropTypes.string,
+  reverse: PropTypes.bool
 }
 
 export default BorderBox
diff --git a/src/components/borderBox9/index.js b/src/components/borderBox9/index.js
@@ -9,6 +9,8 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import useAutoResize from '../../use/autoResize'
 
+import { uuid } from '../../util'
+
 import './style.less'
 
 const defaultColor = ['#11eefd', '#0078d2']
@@ -17,11 +19,11 @@ const BorderBox = forwardRef(({ children, className, style, color = [], backgrou
   const { width, height, domRef } = useAutoResize(ref)
 
   const [{ gradientId, maskId }] = useState(() => {
-    const timestamp = Date.now()
+    const id = uuid()
 
     return {
-      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${timestamp}`
+      gradientId: `border-box-9-gradient-${id}`,
+      maskId: `border-box-9-mask-${id}`
     }
   })
 

diff --git a/src/components/capsuleChart/index.js b/src/components/capsuleChart/index.js
@@ -39,16 +39,20 @@ const defaultConfig = {
    * @default unit = ''
    */
   unit: '',
-  showVal: false
+  /**
+   * @description Show item value
+   * @type {Boolean}
+   * @default showValue = false
+   */
+  showValue: false
 }
 
 const CapsuleChart = ({ config = {}, className, style }) => {
-  const [{ mergedConfig, labelData, capsuleLength, capsuleValue, labelDataLength }, setState] = useState({
+  const [{ mergedConfig, labelData, capsuleLength, capsuleValue }, setState] = useState({
     mergedConfig: null,
     labelData: [],
     capsuleLength: [],
-    capsuleValue: [],
-    labelDataLength: []
+    capsuleValue: []
   })
 
   useEffect(() => {
@@ -62,32 +66,16 @@ const CapsuleChart = ({ config = {}, className, style }) => {
 
     const maxValue = Math.max(...capsuleValue)
 
-    const capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
-
     const oneFifth = maxValue / 5
 
-    const labelData = [...new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))]
-
-    const labelDataLength = labelData.map(v => maxValue ? v / maxValue : 0)
-
     setState({
       mergedConfig,
       capsuleValue,
-      capsuleLength,
-      labelData,
-      labelDataLength
+      capsuleLength: capsuleValue.map(v => (maxValue ? v / maxValue : 0)),
+      labelData: [...new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))]
     })
   }, [config])
 
-  /**
-   * 计算x轴label位置
-   */
-  function calcUnitLabelStyle(index) {
-    return labelData.length - 1 === index
-      ? `right: 0;`
-      : `left: ${labelDataLength[index] * 100}%;`
-  }
-
   const classNames = useMemo(() => classnames('dv-capsule-chart', className), [
     className
   ])
@@ -107,6 +95,7 @@ const CapsuleChart = ({ config = {}, className, style }) => {
             {capsuleLength.map((capsule, index) => (
               <div className='capsule-item' key={index}>
                 <div
+                  className='capsule-item-column'
                   style={{
                     width: `${capsule * 100}%`,
                     backgroundColor: `${
@@ -115,19 +104,18 @@ const CapsuleChart = ({ config = {}, className, style }) => {
                   }}
                 >
                   {
-                    mergedConfig.showVal &&
-                      <span
-                        className='capsule-item-val'
-                        style={`right:-${`${capsuleValue[index]}`.length * 7}px`}>
+                    mergedConfig.showValue &&
+                      <div className='capsule-item-value'>
                         { capsuleValue[index] }
-                      </span>
+                      </div>
                   }
                 </div>
               </div>
             ))}
+
             <div className='unit-label'>
               {labelData.map((label, index) => (
-                <div key={label + index} style={calcUnitLabelStyle(index)}>{label}</div>
+                <div key={label + index}>{label}</div>
               ))}
             </div>
           </div>

diff --git a/src/components/capsuleChart/style.less b/src/components/capsuleChart/style.less
@@ -5,7 +5,7 @@
   box-sizing: border-box;
   padding: 10px;
   color: #fff;
-
+  
   .label-column {
     display: flex;
     flex-direction: column;
@@ -34,17 +34,19 @@
     margin: 5px 0px;
     border-radius: 5px;
 
-    div {
+    .capsule-item-column {
       position: relative;
       height: 8px;
       margin-top: 1px;
       border-radius: 5px;
       transition: all 0.3s;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
 
-      .capsule-item-val {
-        position: absolute;
-        top: -5px;
+      .capsule-item-value {
         font-size: 12px;
+        transform: translateX(100%);
       }
     }
   }
@@ -53,14 +55,9 @@
     height: 20px;
     font-size: 12px;
     position: relative;
-
-    &:not(:first-child) {
-      text-align: right;
-    }
-
-    div {
-      position: absolute;
-    }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .unit-text {

diff --git a/src/components/decoration10/index.js b/src/components/decoration10/index.js
@@ -9,6 +9,8 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import useAutoResize from '../../use/autoResize'
 
+import { uuid } from '../../util'
+
 import './style.less'
 
 const defaultColor = ['#00c2ff', 'rgba(0, 194, 255, 0.3)']
@@ -25,13 +27,13 @@ const Decoration = forwardRef(({ className, style, color = [] }, ref) => {
     animationId6,
     animationId7
   } = useRef({
-    animationId1: `d10ani1${Date.now()}`,
-    animationId2: `d10ani2${Date.now()}`,
-    animationId3: `d10ani3${Date.now()}`,
-    animationId4: `d10ani4${Date.now()}`,
-    animationId5: `d10ani5${Date.now()}`,
-    animationId6: `d10ani6${Date.now()}`,
-    animationId7: `d10ani7${Date.now()}`
+    animationId1: `d10ani1${uuid()}`,
+    animationId2: `d10ani2${uuid()}`,
+    animationId3: `d10ani3${uuid()}`,
+    animationId4: `d10ani4${uuid()}`,
+    animationId5: `d10ani5${uuid()}`,
+    animationId6: `d10ani6${uuid()}`,
+    animationId7: `d10ani7${uuid()}`
   }).current
 
   const mergedColor = useMemo(() => deepMerge(deepClone(defaultColor, true), color || []), [color])