fix: review修复barrage组件

src/packages/barrage/barrage.scss

@@ -7,7 +7,7 @@
   overflow: hidden;
   box-sizing: border-box;
   background-color: #f7f8fa;
-  .dmitem {
+  .barrage-item {
     width: 100px;
     // max-width: 150px;
     display: block;

src/packages/barrage/barrage.tsx

@@ -6,7 +6,7 @@ import './barrage.scss'
 export interface BarrageProps {
   className: string
   style: React.CSSProperties
-  danmu: Array<string>
+  barrageList: Array<string>
   frequency: number
   loop: boolean
   speeds: number
@@ -14,7 +14,7 @@ export interface BarrageProps {
   top: number
 }
 const defaultProps = {
-  danmu: [''],
+  barrageList: [],
   frequency: 500,
   loop: true,
   speeds: 2000,
@@ -22,13 +22,13 @@ const defaultProps = {
   top: 10,
 }
 const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>> = (props, ref) => {
-  const { className, frequency, loop, danmu, speeds, rows, top, ...restProps } = {
+  const { className, frequency, loop, barrageList, speeds, rows, top, ...restProps } = {
     ...defaultProps,
     ...props,
   }
-  const dmBody = useRef<HTMLDivElement>(null)
-  const dmContainer = useRef<HTMLDivElement>(null)
-  const danmuCWidth = useRef(0)
+  const barrageBody = useRef<HTMLDivElement>(null)
+  const barrageContainer = useRef<HTMLDivElement>(null)
+  const barrageCWidth = useRef(0)
   const timer = useRef(0)
   const index = useRef(0)
 
@@ -37,14 +37,14 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
 
   useImperativeHandle(ref, () => ({
     add: (word: string) => {
-      const _index = index.current % danmu.length
-      danmu.splice(_index, 0, word)
+      const _index = index.current % barrageList.length
+      barrageList.splice(_index, 0, word)
     },
   }))
 
   useEffect(() => {
-    if (dmBody.current) {
-      danmuCWidth.current = dmBody.current.offsetWidth
+    if (barrageBody.current) {
+      barrageCWidth.current = barrageBody.current.offsetWidth
       run()
     }
     return () => {
@@ -61,11 +61,11 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
   }
 
   const play = () => {
-    const _index = loop ? index.current % danmu.length : index.current
+    const _index = loop ? index.current % barrageList.length : index.current
     let el = document.createElement(`div`)
-    el.innerHTML = danmu[_index] as string
-    el.classList.add('dmitem')
-    ;(dmContainer.current as HTMLDivElement).appendChild(el)
+    el.innerHTML = barrageList[_index] as string
+    el.classList.add('barrage-item')
+    ;(barrageContainer.current as HTMLDivElement).appendChild(el)
 
     const width = el.offsetWidth
     const height = el.offsetHeight
@@ -73,17 +73,17 @@ const InternalBarrage: ForwardRefRenderFunction<unknown, Partial<BarrageProps>>
     el.style.animationDuration = `${speeds}ms`
     el.style.top = (_index % rows) * (height + top) + 20 + 'px'
     el.style.width = width + 20 + 'px'
-    el.style.setProperty('--move-distance', `-${danmuCWidth.current}px`)
+    el.style.setProperty('--move-distance', `-${barrageCWidth.current}px`)
     el.dataset.index = `${_index}`
     el.addEventListener('animationend', () => {
-      ;(dmContainer.current as HTMLDivElement).removeChild(el)
+      ;(barrageContainer.current as HTMLDivElement).removeChild(el)
     })
     index.current++
   }
 
   return (
-    <div className={classes} ref={dmBody} {...restProps}>
-      <div ref={dmContainer} className="dmContainer"></div>
+    <div className={classes} ref={barrageBody} {...restProps}>
+      <div ref={barrageContainer} className="bContainer"></div>
     </div>
   )
 }

src/packages/barrage/demo.tsx

@@ -4,17 +4,17 @@ import { Barrage } from './barrage'
 import Button from '@/packages/button'
 import './demo.scss'
 
-interface danmuRefState {
+interface barrageRefState {
   add: (word: string) => void
 }
 
 const BarrageDemo = () => {
   let list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
-  const danmuRef = useRef<danmuRefState>(null)
-  const addDanmu = () => {
+  const barrageRef = useRef<barrageRefState>(null)
+  const addBarrage = () => {
     let n = Math.random()
-    if (danmuRef.current) {
-      danmuRef.current.add('随机——' + String(n).substr(2, 10))
+    if (barrageRef.current) {
+      barrageRef.current.add('随机——' + String(n).substr(2, 10))
     }
   }
   return (
@@ -22,10 +22,10 @@ const BarrageDemo = () => {
       <div className="demo">
         <h2>基础用法</h2>
         <Cell>
-          <Barrage ref={danmuRef} danmu={list}></Barrage>
+          <Barrage ref={barrageRef} barrageList={list}></Barrage>
         </Cell>
         <div className="test" style={{ textAlign: 'center' }}>
-          <Button type="danger" onClick={addDanmu}>
+          <Button type="danger" onClick={addBarrage}>
             随机添加
           </Button>
         </div>

src/packages/barrage/doc.md

@@ -17,20 +17,20 @@ import { Barrage } from '@nutui/nutui-react';
 ```tsx
 <h2>基础用法</h2>
 <Cell>
-  <Barrage ref={danmuRef} danmu={list}></Barrage>
+  <Barrage ref={barrageRef} barrageList={list}></Barrage>
 </Cell>
 <div className="test" style={{ textAlign: 'center' }}>
-  <Button type="danger" onClick={addDanmu}>随机添加</Button>
+  <Button type="danger" onClick={addBarrage}>随机添加</Button>
 </div>
 ```
 
 ```tsx
 let list = ['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']
-const danmuRef = useRef<danmuRefState>(null)
-const addDanmu = () => {
+const barrageRef = useRef(null)
+const addBarrage = () => {
   let n = Math.random()
-  if (danmuRef.current) {
-    danmuRef.current.add('随机——' + String(n).substr(2, 10))
+  if (barrageRef.current) {
+    barrageRef.current.add('随机——' + String(n).substr(2, 10))
   }
 }
 ```
@@ -43,7 +43,7 @@ const addDanmu = () => {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| danmu         | 弹幕列表数据               | Array | []              |
+| barrageList         | 弹幕列表数据               | Array | []              |
 | frequency        | 可视区域内每个弹幕出现的时间间隔                         | Number | 500               |
 | speeds         | 每个弹幕的滚动时间 | Number |  2000               |
 | rows  | 弹幕行数，分几行展示     | Number | 1 |