first commit

Author: aaaaaa

.gitignore

@@ -20,3 +20,5 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

example/src/App.js

@@ -1,10 +1,19 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
-import { ExampleComponent } from 'react-scroll-log-text'
+import ScrollText from 'react-scroll-log-text'
 import 'react-scroll-log-text/dist/index.css'
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+	const [data, setData ] = useState(['aaaa','bbbbb', 'ccc', 'dddd']); // 默认数据
+
+	useEffect(() =>{
+		setInterval(()=> {
+			const arr = [Math.random()];
+			setData(arr)
+		}, 3000);
+	}, [])
+
+	return <ScrollText data={data} length={4} liStyle={{lineHeight: '40px'}} childrenFc={(v) => <div>={v}=</div>}/>
 }
 
 export default App

package.json

@@ -4,8 +4,15 @@
   "description": "This is a React log text scrolling component.",
   "author": "rfw",
   "license": "MIT",
-  "keywords": ["react", "components", "scroll", "log", "text"],
+  "keywords": [
+    "react",
+    "components",
+    "scroll",
+    "log",
+    "text"
+  ],
   "repository": "rfw/react-scroll-log-text",
+  "homepage": "https://github.com/rfw/react-scroll-log-text",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",
@@ -28,7 +35,6 @@
     "react": "^16.0.0"
   },
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
@@ -42,13 +48,16 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {}
 }

src/index.js

@@ -1,6 +1,92 @@
 import React from 'react'
 import styles from './styles.module.css'
+import PropTypes from 'prop-types'
 
-export const ExampleComponent = ({ text }) => {
-  return <div className={styles.test}>Example Component: {text}</div>
+export default class ScrollText extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      data: props.data,
+      marginTop: '0',
+      animate: false
+    }
+  }
+
+  scrollUp = () => {
+    const { animateSpeed } = this.props
+    const time = animateSpeed ? animateSpeed * 1000 + 1 : 1000
+    const li = this.textRef.getElementsByTagName('li')
+    if (li.length === 0) return
+    const height = li[0].scrollHeight
+    this.setState({
+      animate: true,
+      marginTop: '-' + height + 'px'
+    })
+    setTimeout(() => {
+      this.state.data.shift()
+      this.setState({
+        animate: false,
+        marginTop: '0'
+      })
+    }, time)
+  }
+
+  startScrollUp = () => {
+    if (Array.isArray(this.state.data) && this.state.data.length === 0) return
+    this.scrollUp()
+  }
+
+  componentDidUpdate(prevProps) {
+    const { length, data } = this.props
+    const dataList = this.state.data
+    const newData = data
+    if (
+      newData.length !== 0 &&
+      JSON.stringify(dataList.slice(-1)) !== JSON.stringify(newData)
+    ) {
+      this.setState(
+        {
+          data: [...dataList, ...newData]
+        },
+        () => {
+          if (dataList.length >= length) {
+            this.startScrollUp()
+          }
+        }
+      )
+    }
+  }
+
+  render() {
+    const { data, marginTop, animate } = this.state
+    const { animateSpeed, liStyle, childrenFc } = this.props
+
+    return (
+      <ul
+        ref={(e) => {
+          this.textRef = e
+        }}
+        id={styles.scrollList}
+        style={
+          animate
+            ? { transition: ` margin ${animateSpeed || 1}s`, marginTop }
+            : { marginTop }
+        }
+      >
+        {data.map((v, i) => (
+          <li key={i} style={liStyle}>
+            {childrenFc ? childrenFc(v) : v}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+}
+
+ScrollText.propTypes = {
+  animateSpeed: PropTypes.number, // 速度，单位：秒
+  length: PropTypes.number, // 大于多少条开始滚动
+  liStyle: PropTypes.object, // 像素带单位 eg: 40px
+  data: PropTypes.array.isRequired, // 数据
+  childrenFc: PropTypes.func // 自定义渲染item
 }

src/styles.module.css

@@ -1,9 +1,17 @@
 /* add css module styles here (optional) */
-
-.test {
-  margin: 2em;
-  padding: 0.5em;
-  border: 2px solid #000;
-  font-size: 2em;
-  text-align: center;
+#scrollList {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  list-style-position: outside;
 }
+#scrollList li {
+    list-style: none;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 30px;
+    margin: 0;
+    padding: 0;
+}