joeyzheng1412-daohq-ticker-react 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # DAOHQ-Ticker-react
@@ -0,0 +1,15 @@
1
+ import e from"react";var n={};Object.defineProperty(n,"__esModule",{value:!0});var t=e;function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(t),i=function(){return i=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},i.apply(this,arguments)};
2
+ /*! *****************************************************************************
3
+ Copyright (c) Microsoft Corporation.
4
+
5
+ Permission to use, copy, modify, and/or distribute this software for any
6
+ purpose with or without fee is hereby granted.
7
+
8
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
9
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
10
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14
+ PERFORMANCE OF THIS SOFTWARE.
15
+ ***************************************************************************** */!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.marquee-container {\n overflow-x: hidden !important;\n display: flex !important;\n flex-direction: row !important;\n position: relative;\n width: 100%;\n}\n.marquee-container:hover div {\n animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.overlay::before, .overlay::after {\n background: linear-gradient(to right, var(--gradient-color));\n content: "";\n height: 100%;\n position: absolute;\n width: var(--gradient-width);\n z-index: 2;\n}\n.overlay::after {\n right: 0;\n top: 0;\n transform: rotateZ(180deg);\n}\n.overlay::before {\n left: 0;\n top: 0;\n}\n\n.marquee {\n flex: 0 0 auto;\n min-width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n animation-play-state: var(--play);\n animation-delay: var(--delay);\n animation-direction: var(--direction);\n}\n@keyframes scroll {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}');var o=n.default=function(e){var n,a,o,l,d=e.style,c=void 0===d?{}:d,s=e.className,m=void 0===s?"":s,u=e.play,p=void 0===u||u,f=e.pauseOnHover,h=void 0!==f&&f,v=e.pauseOnClick,y=void 0!==v&&v,g=e.direction,C=void 0===g?"left":g,E=e.speed,b=void 0===E?20:E,x=e.delay,w=void 0===x?0:x,A=e.loop,N=void 0===A?0:A,$=e.gradient,k=void 0===$||$,P=e.gradientColor,O=void 0===P?[255,255,255]:P,S=e.gradientWidth,q=void 0===S?200:S,T=e.onFinish,H=e.onCycleComplete,j=e.children,z=t.useState(0),B=z[0],R=z[1],D=t.useState(0),I=D[0],L=D[1],X=t.useState(0),F=X[0],M=X[1],Q=t.useState(!1),_=Q[0],W=Q[1],Z=t.useRef(null),G=t.useRef(null),J=function(){G.current&&Z.current&&(R(Z.current.getBoundingClientRect().width),L(G.current.getBoundingClientRect().width)),M(I<B?B/b:I/b)};t.useEffect((function(){return J(),window.addEventListener("resize",J),function(){window.removeEventListener("resize",J)}})),t.useEffect((function(){W(!0)}),[]);var K="rgba("+O[0]+", "+O[1]+", "+O[2];return r.default.createElement(t.Fragment,null,_?r.default.createElement("div",{ref:Z,style:i(i({},c),(n={},n["--pause-on-hover"]=h?"paused":"running",n["--pause-on-click"]=y?"paused":"running",n)),className:m+" marquee-container"},k&&r.default.createElement("div",{style:(a={},a["--gradient-color"]=K+", 1), "+K+", 0)",a["--gradient-width"]="number"==typeof q?q+"px":q,a),className:"overlay"}),r.default.createElement("div",{ref:G,style:(o={},o["--play"]=p?"running":"paused",o["--direction"]="left"===C?"normal":"reverse",o["--duration"]=F+"s",o["--delay"]=w+"s",o["--iteration-count"]=N?""+N:"infinite",o),className:"marquee",onAnimationIteration:H,onAnimationEnd:T},j),r.default.createElement("div",{style:(l={},l["--play"]=p?"running":"paused",l["--direction"]="left"===C?"normal":"reverse",l["--duration"]=F+"s",l["--delay"]=w+"s",l["--iteration-count"]=N?""+N:"infinite",l),className:"marquee"},j)):null)};function l(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}l(".daoContainer{background:#000;border:2px solid gray;display:flex;flex-direction:column;height:60px;padding:8px;width:200px}.bottomContent,.topContent{display:flex;flex-direction:row}.daoChange,.daoChart,.daoName,.daoPrice,.daoSymbol{color:#fff}");const d=({dao:n})=>e.createElement("div",{className:"daoContainer",onClick:()=>{console.log(n.name)}},e.createElement("div",{className:"topContent"},e.createElement("div",{className:"daoName"},n.name),e.createElement("div",{className:"daoSymbol"},n.symbol),e.createElement("div",{className:"daoPrice"},n.price)),e.createElement("div",{className:"bottomContent"},e.createElement("div",{className:"daoChange"},n.change),e.createElement("div",{className:"daoChart"},n.chart)));l(".TickerContainer{display:flex;flex-direction:row;overflow-x:hidden;padding:6px;width:100%}");const c=()=>{const n=[{name:"DAOHQIndex",symbol:"$DAOHQIDX*",price:"$9.99",change:"+0.99",chart:"chart"},{name:"Ape Coin1",symbol:"$APE1*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin2",symbol:"$APE2*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin3",symbol:"$APE3*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin4",symbol:"$APE4*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin5",symbol:"$APE5*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin6",symbol:"$APE6*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin7",symbol:"$APE7*",price:"$23.02",change:"+0.85%",chart:"chart"}];return e.createElement("div",{className:"TickerContainer"},e.createElement(d,{key:n[0].symbol,dao:n[0]}),e.createElement(o,{speed:20,pauseOnHover:!1,pauseOnClick:!0,gradient:!1},n.slice(1).map((n=>e.createElement(d,{key:n.symbol,dao:n})))))};export{c as default};
package/dist/index.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=e(require("react")),t={};Object.defineProperty(t,"__esModule",{value:!0});var a=n.default;function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(a),o=function(){return o=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},o.apply(this,arguments)};
2
+ /*! *****************************************************************************
3
+ Copyright (c) Microsoft Corporation.
4
+
5
+ Permission to use, copy, modify, and/or distribute this software for any
6
+ purpose with or without fee is hereby granted.
7
+
8
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
9
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
10
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14
+ PERFORMANCE OF THIS SOFTWARE.
15
+ ***************************************************************************** */!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.marquee-container {\n overflow-x: hidden !important;\n display: flex !important;\n flex-direction: row !important;\n position: relative;\n width: 100%;\n}\n.marquee-container:hover div {\n animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.overlay::before, .overlay::after {\n background: linear-gradient(to right, var(--gradient-color));\n content: "";\n height: 100%;\n position: absolute;\n width: var(--gradient-width);\n z-index: 2;\n}\n.overlay::after {\n right: 0;\n top: 0;\n transform: rotateZ(180deg);\n}\n.overlay::before {\n left: 0;\n top: 0;\n}\n\n.marquee {\n flex: 0 0 auto;\n min-width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n animation-play-state: var(--play);\n animation-delay: var(--delay);\n animation-direction: var(--direction);\n}\n@keyframes scroll {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}');var l=t.default=function(e){var n,t,r,l,d=e.style,c=void 0===d?{}:d,s=e.className,u=void 0===s?"":s,m=e.play,f=void 0===m||m,p=e.pauseOnHover,h=void 0!==p&&p,v=e.pauseOnClick,y=void 0!==v&&v,g=e.direction,C=void 0===g?"left":g,E=e.speed,b=void 0===E?20:E,x=e.delay,w=void 0===x?0:x,A=e.loop,N=void 0===A?0:A,$=e.gradient,k=void 0===$||$,P=e.gradientColor,O=void 0===P?[255,255,255]:P,q=e.gradientWidth,S=void 0===q?200:q,T=e.onFinish,j=e.onCycleComplete,H=e.children,z=a.useState(0),B=z[0],R=z[1],D=a.useState(0),I=D[0],L=D[1],X=a.useState(0),F=X[0],M=X[1],Q=a.useState(!1),_=Q[0],W=Q[1],Z=a.useRef(null),G=a.useRef(null),J=function(){G.current&&Z.current&&(R(Z.current.getBoundingClientRect().width),L(G.current.getBoundingClientRect().width)),M(I<B?B/b:I/b)};a.useEffect((function(){return J(),window.addEventListener("resize",J),function(){window.removeEventListener("resize",J)}})),a.useEffect((function(){W(!0)}),[]);var K="rgba("+O[0]+", "+O[1]+", "+O[2];return i.default.createElement(a.Fragment,null,_?i.default.createElement("div",{ref:Z,style:o(o({},c),(n={},n["--pause-on-hover"]=h?"paused":"running",n["--pause-on-click"]=y?"paused":"running",n)),className:u+" marquee-container"},k&&i.default.createElement("div",{style:(t={},t["--gradient-color"]=K+", 1), "+K+", 0)",t["--gradient-width"]="number"==typeof S?S+"px":S,t),className:"overlay"}),i.default.createElement("div",{ref:G,style:(r={},r["--play"]=f?"running":"paused",r["--direction"]="left"===C?"normal":"reverse",r["--duration"]=F+"s",r["--delay"]=w+"s",r["--iteration-count"]=N?""+N:"infinite",r),className:"marquee",onAnimationIteration:j,onAnimationEnd:T},H),i.default.createElement("div",{style:(l={},l["--play"]=f?"running":"paused",l["--direction"]="left"===C?"normal":"reverse",l["--duration"]=F+"s",l["--delay"]=w+"s",l["--iteration-count"]=N?""+N:"infinite",l),className:"marquee"},H)):null)};function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}d(".daoContainer{background:#000;border:2px solid gray;display:flex;flex-direction:column;height:60px;padding:8px;width:200px}.bottomContent,.topContent{display:flex;flex-direction:row}.daoChange,.daoChart,.daoName,.daoPrice,.daoSymbol{color:#fff}");const c=({dao:e})=>n.default.createElement("div",{className:"daoContainer",onClick:()=>{console.log(e.name)}},n.default.createElement("div",{className:"topContent"},n.default.createElement("div",{className:"daoName"},e.name),n.default.createElement("div",{className:"daoSymbol"},e.symbol),n.default.createElement("div",{className:"daoPrice"},e.price)),n.default.createElement("div",{className:"bottomContent"},n.default.createElement("div",{className:"daoChange"},e.change),n.default.createElement("div",{className:"daoChart"},e.chart)));d(".TickerContainer{display:flex;flex-direction:row;overflow-x:hidden;padding:6px;width:100%}");module.exports=()=>{const e=[{name:"DAOHQIndex",symbol:"$DAOHQIDX*",price:"$9.99",change:"+0.99",chart:"chart"},{name:"Ape Coin1",symbol:"$APE1*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin2",symbol:"$APE2*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin3",symbol:"$APE3*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin4",symbol:"$APE4*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin5",symbol:"$APE5*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin6",symbol:"$APE6*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin7",symbol:"$APE7*",price:"$23.02",change:"+0.85%",chart:"chart"}];return n.default.createElement("div",{className:"TickerContainer"},n.default.createElement(c,{key:e[0].symbol,dao:e[0]}),n.default.createElement(l,{speed:20,pauseOnHover:!1,pauseOnClick:!0,gradient:!1},e.slice(1).map((e=>n.default.createElement(c,{key:e.symbol,dao:e})))))};
package/package.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "name": "joeyzheng1412-daohq-ticker-react",
3
+ "version": "1.0.0",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "scripts": {
7
+ "build": "rollup -c",
8
+ "start": "rollup -c -w",
9
+ "test": "react-scripts test",
10
+ "eject": "react-scripts eject"
11
+ },
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "git+https://github.com/DAO-HQ/DAOHQ-Ticker-react.git"
15
+ },
16
+ "author": "DAOHQ",
17
+ "license": "ISC",
18
+ "bugs": {
19
+ "url": "https://github.com/DAO-HQ/DAOHQ-Ticker-react/issues"
20
+ },
21
+ "homepage": "https://github.com/DAO-HQ/DAOHQ-Ticker-react#readme",
22
+ "devDependencies": {
23
+ "@babel/core": "^7.18.5",
24
+ "@babel/preset-react": "^7.17.12",
25
+ "@rollup/plugin-babel": "^5.3.1",
26
+ "@rollup/plugin-commonjs": "^22.0.0",
27
+ "@rollup/plugin-node-resolve": "^13.3.0",
28
+ "babel-loader": "^8.2.5",
29
+ "react": "^18.2.0",
30
+ "react-dom": "^18.2.0",
31
+ "rollup": "^2.75.7",
32
+ "rollup-plugin-peer-deps-external": "^2.2.4",
33
+ "rollup-plugin-postcss": "^4.0.2",
34
+ "rollup-plugin-terser": "^7.0.2"
35
+ },
36
+ "peerDependencies": {
37
+ "react": "^18.2.0",
38
+ "react-dom": "^18.2.0"
39
+ },
40
+ "dependencies": {
41
+ "react-fast-marquee": "^1.3.2"
42
+ }
43
+ }
@@ -0,0 +1,38 @@
1
+ import babel from "@rollup/plugin-babel";
2
+ import resolve from "@rollup/plugin-node-resolve";
3
+ import external from "rollup-plugin-peer-deps-external";
4
+ import postcss from "rollup-plugin-postcss";
5
+ import commonjs from "@rollup/plugin-commonjs";
6
+
7
+ import { terser } from "rollup-plugin-terser";
8
+
9
+ export default [
10
+ {
11
+ input: "./src/index.js",
12
+ output: [
13
+ {
14
+ file: "dist/index.js",
15
+ format: "cjs",
16
+ },
17
+ {
18
+ file: "dist/index.es.js",
19
+ format: "es",
20
+ exports: "named",
21
+ },
22
+ ],
23
+ plugins: [
24
+ postcss({
25
+ plugins: [],
26
+ minimize: true,
27
+ }),
28
+ babel({
29
+ exclude: "node_modules/**",
30
+ presets: ["@babel/preset-react"],
31
+ }),
32
+ external(),
33
+ resolve(),
34
+ terser(),
35
+ commonjs(),
36
+ ],
37
+ },
38
+ ];
@@ -0,0 +1,40 @@
1
+ .daoContainer {
2
+ height: 60px;
3
+ width: 200px;
4
+
5
+ background: black;
6
+ display: flex;
7
+ flex-direction: column;
8
+ border: 2px solid gray;
9
+ padding: 8px;
10
+ }
11
+
12
+ .topContent {
13
+ display: flex;
14
+ flex-direction: row;
15
+ }
16
+
17
+ .bottomContent {
18
+ display: flex;
19
+ flex-direction: row;
20
+ }
21
+
22
+ .daoName {
23
+ color: white;
24
+ }
25
+
26
+ .daoSymbol {
27
+ color: white;
28
+ }
29
+
30
+ .daoPrice {
31
+ color: white;
32
+ }
33
+
34
+ .daoChange {
35
+ color: white;
36
+ }
37
+
38
+ .daoChart {
39
+ color: white;
40
+ }
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import "./Dao.css";
3
+
4
+ const Dao = ({ dao }) => {
5
+ const DaoClick = () => {
6
+ console.log(dao.name);
7
+ };
8
+ return (
9
+ <div className="daoContainer" onClick={DaoClick}>
10
+ <div className="topContent">
11
+ <div className="daoName">{dao.name}</div>
12
+ <div className="daoSymbol">{dao.symbol}</div>
13
+ <div className="daoPrice">{dao.price}</div>
14
+ </div>
15
+ <div className="bottomContent">
16
+ <div className="daoChange">{dao.change}</div>
17
+ <div className="daoChart">{dao.chart}</div>
18
+ </div>
19
+ </div>
20
+ );
21
+ };
22
+
23
+ export default Dao;
@@ -0,0 +1,7 @@
1
+ .TickerContainer {
2
+ width: 100%;
3
+ display: flex;
4
+ flex-direction: row;
5
+ padding: 6px;
6
+ overflow-x: hidden;
7
+ }
@@ -0,0 +1,82 @@
1
+ import React from "react";
2
+ import Marquee from "react-fast-marquee";
3
+ import Dao from "./Dao";
4
+ import "./Ticker.css";
5
+
6
+ const Ticker = () => {
7
+ const data = [
8
+ {
9
+ name: "DAOHQIndex",
10
+ symbol: "$DAOHQIDX*",
11
+ price: "$9.99",
12
+ change: "+0.99",
13
+ chart: "chart",
14
+ },
15
+ {
16
+ name: "Ape Coin1",
17
+ symbol: "$APE1*",
18
+ price: "$23.02",
19
+ change: "+0.85%",
20
+ chart: "chart",
21
+ },
22
+ {
23
+ name: "Ape Coin2",
24
+ symbol: "$APE2*",
25
+ price: "$23.02",
26
+ change: "+0.85%",
27
+ chart: "chart",
28
+ },
29
+ {
30
+ name: "Ape Coin3",
31
+ symbol: "$APE3*",
32
+ price: "$23.02",
33
+ change: "+0.85%",
34
+ chart: "chart",
35
+ },
36
+ {
37
+ name: "Ape Coin4",
38
+ symbol: "$APE4*",
39
+ price: "$23.02",
40
+ change: "+0.85%",
41
+ chart: "chart",
42
+ },
43
+ {
44
+ name: "Ape Coin5",
45
+ symbol: "$APE5*",
46
+ price: "$23.02",
47
+ change: "+0.85%",
48
+ chart: "chart",
49
+ },
50
+ {
51
+ name: "Ape Coin6",
52
+ symbol: "$APE6*",
53
+ price: "$23.02",
54
+ change: "+0.85%",
55
+ chart: "chart",
56
+ },
57
+ {
58
+ name: "Ape Coin7",
59
+ symbol: "$APE7*",
60
+ price: "$23.02",
61
+ change: "+0.85%",
62
+ chart: "chart",
63
+ },
64
+ ];
65
+ return (
66
+ <div className="TickerContainer">
67
+ <Dao key={data[0].symbol} dao={data[0]} />
68
+ <Marquee
69
+ speed={20}
70
+ pauseOnHover={false}
71
+ pauseOnClick
72
+ gradient={false}
73
+ >
74
+ {data.slice(1).map((dao) => {
75
+ return <Dao key={dao.symbol} dao={dao} />;
76
+ })}
77
+ </Marquee>
78
+ </div>
79
+ );
80
+ };
81
+
82
+ export default Ticker;
package/src/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import Ticker from "./components/Ticker";
2
+
3
+ export default Ticker;