Skip to content

Commit 47359a6

Browse files
mxmzbmxmzb
committed
major demo improvements
1 parent 8a12962 commit 47359a6

File tree

11 files changed

+393
-159
lines changed

11 files changed

+393
-159
lines changed

‎example/src/components/CompiledDemo.js

Lines changed: 153 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,174 @@
1-
import React from "react";
1+
import React, { useState, useRef, useCallback } from "react";
22
import styled from "styled-components";
33

44
import Reviews from "./Reviews";
55
import Companies from "./Companies";
66
import People from "./People";
77
import Playground from "./Playground";
8+
import ComputationTime from "./ComputationTime";
89

910
import CodeReviews from "./code/Reviews";
1011
import CodeCompanies from "./code/Companies";
1112
import CodePeople from "./code/People";
1213

14+
import { __safePerformanceNow } from "../lib/util";
15+
1316
const Separator = styled.div`
14-
height: ${props => props.height}px;
17+
height: ${(props) => props.height}px;
18+
`;
19+
20+
const AlertBox = styled.div`
21+
border: 3px rgb(255, 190, 110, 0.5) solid;
22+
background: rgb(255, 190, 110, 0.1);
23+
border-radius: 0.75rem;
24+
25+
p {
26+
margin: 1.5rem;
27+
}
1528
`;
1629

30+
const AlertNote = ({ children }) => <AlertBox>{children}</AlertBox>;
31+
1732
const CodeNote = ({ url }) => (
1833
<p>
19-
Have a look{" "}
20-
<a href={url} target="_blank">
21-
at the original, full code for this example
22-
</a>{" "}
23-
or just the basic, simplified gist:
34+
Here is the essential code for the above example, or you can have a more in depth look{" "}
35+
<a href={url} target="_blank" rel="noreferrer">
36+
at the original, full code
37+
</a>
38+
:
2439
</p>
2540
);
2641

27-
const CompiledDemo = () => (
28-
<div>
29-
<h2>Companies</h2>
30-
<Reviews />
31-
<Separator height={15} />
32-
<CodeNote url="https://github.com/mxmzb/react-marquee-slider/blob/master/example/src/components/reviews.js" />
33-
<CodeReviews />
34-
<Separator height={50} />
35-
36-
<h2>Companies</h2>
37-
<Companies />
38-
<Separator height={15} />
39-
<CodeNote url="https://github.com/mxmzb/react-marquee-slider/blob/master/example/src/components/companies.js" />
40-
<CodeCompanies />
41-
<Separator height={50} />
42-
43-
<h2>People</h2>
44-
<People />
45-
<Separator height={15} />
46-
<CodeNote url="https://github.com/mxmzb/react-marquee-slider/blob/master/example/src/components/people.js" />
47-
<CodePeople />
48-
<Separator height={50} />
49-
50-
<h2>Playground</h2>
51-
<Playground />
52-
</div>
53-
);
42+
const CompiledDemo = () => {
43+
const t0 = useRef({});
44+
const [perfData, setPerfData] = useState({});
45+
46+
const onReviewsStartPerformance = useCallback(
47+
() => (t0.current = Object.assign({}, t0.current, { reviews: __safePerformanceNow() })),
48+
[],
49+
);
50+
51+
const onReviewsEndPerformance = useCallback(({ totalTries }) => {
52+
setPerfData((prevPerfData) =>
53+
Object.assign({}, prevPerfData, {
54+
reviews: {
55+
computationTime: Math.floor(__safePerformanceNow() - t0.current["reviews"]),
56+
totalTries,
57+
},
58+
}),
59+
);
60+
}, []);
61+
62+
const onCompaniesStartPerformance = useCallback(
63+
() => (t0.current = Object.assign({}, t0.current, { companies: __safePerformanceNow() })),
64+
[],
65+
);
66+
67+
const onCompaniesEndPerformance = useCallback(({ totalTries }) => {
68+
console.log("onCompaniesEndPerformance.totalTries", totalTries);
69+
console.log("onCompaniesEndPerformance.t0", t0);
70+
setPerfData((prevPerfData) =>
71+
Object.assign({}, prevPerfData, {
72+
companies: {
73+
computationTime: Math.floor(__safePerformanceNow() - t0.current["companies"]),
74+
totalTries,
75+
},
76+
}),
77+
);
78+
}, []);
79+
80+
const onPeopleStartPerformance = useCallback(
81+
() => (t0.current = Object.assign({}, t0.current, { people: __safePerformanceNow() })),
82+
[],
83+
);
84+
85+
const onPeopleEndPerformance = useCallback(({ totalTries }) => {
86+
setPerfData((prevPerfData) =>
87+
Object.assign({}, prevPerfData, {
88+
people: {
89+
computationTime: Math.floor(__safePerformanceNow() - t0.current["people"]),
90+
totalTries,
91+
},
92+
}),
93+
);
94+
}, []);
95+
96+
const onPlaygroundStartPerformance = useCallback(
97+
() => (t0.current = Object.assign({}, t0.current, { playground: __safePerformanceNow() })),
98+
[],
99+
);
100+
101+
const onPlaygroundEndPerformance = useCallback(({ totalTries }) => {
102+
setPerfData((prevPerfData) =>
103+
Object.assign({}, prevPerfData, {
104+
playground: {
105+
computationTime: Math.floor(__safePerformanceNow() - t0.current["playground"]),
106+
totalTries,
107+
},
108+
}),
109+
);
110+
}, []);
111+
112+
console.log("actual perfData", perfData);
113+
114+
return (
115+
<div>
116+
<AlertNote>
117+
<p>
118+
<b>Note:</b> The flickering ("jumping") of the items in the Marquee is not a bug. When you
119+
want to position items inside the slider randomly, the slider needs to actually render
120+
them, to see if the random positioning will fit inside the given area. If it doesn't (e.g.
121+
items are overlapping), it tries to find another place for the overlapping item. Depending
122+
on the number and size of items, and the size of the available space, overlapping items
123+
are more or less likely.
124+
</p>
125+
<p>
126+
You can hide the flickering by overlaying the slider with a loading div, until it
127+
finishes. The slider provides an <code>onFinish</code> callback for this very reason. You
128+
can see an example with an overlaying loading div further down.
129+
</p>
130+
</AlertNote>
131+
<h2>Reviews</h2>
132+
<Reviews
133+
onStartPerformance={onReviewsStartPerformance}
134+
onEndPerformance={onReviewsEndPerformance}
135+
/>
136+
<Separator height={15} />
137+
<ComputationTime perfData={perfData.reviews} />
138+
<Separator height={15} />
139+
<CodeNote url="https://github.com/mxmzb/react-marquee-slider/blob/master/example/src/components/reviews.js" />
140+
<CodeReviews />
141+
<Separator height={50} />
142+
<h2>Companies</h2>
143+
<Companies
144+
onStartPerformance={onCompaniesStartPerformance}
145+
onEndPerformance={onCompaniesEndPerformance}
146+
/>
147+
<Separator height={15} />
148+
<ComputationTime perfData={perfData.companies} />
149+
<Separator height={15} />
150+
<CodeNote url="https://github.com/mxmzb/react-marquee-slider/blob/master/example/src/components/companies.js" />
151+
<CodeCompanies />
152+
<Separator height={50} />
153+
<h2>People</h2>
154+
<People
155+
onStartPerformance={onPeopleStartPerformance}
156+
onEndPerformance={onPeopleEndPerformance}
157+
/>
158+
<Separator height={15} />
159+
<ComputationTime instant />
160+
<Separator height={15} />
161+
<CodeNote url="https://github.com/mxmzb/react-marquee-slider/blob/master/example/src/components/people.js" />
162+
<CodePeople />
163+
<Separator height={50} />
164+
<h2>Playground</h2>
165+
<Playground
166+
onStartPerformance={onPlaygroundStartPerformance}
167+
onEndPerformance={onPlaygroundEndPerformance}
168+
perfData={perfData.playground}
169+
/>
170+
</div>
171+
);
172+
};
54173

55174
export default CompiledDemo;

‎example/src/components/ComputationTime.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import get from "lodash/get";
4+
5+
const AlertBox = styled.div`
6+
border: 3px rgb(255, 190, 110, 0.5) solid;
7+
background: rgb(255, 190, 110, 0.1);
8+
border-radius: 0.75rem;
9+
10+
p {
11+
margin: 1.5rem;
12+
}
13+
`;
14+
15+
const ComputationTime = ({ perfData, instant }) => {
16+
const computationTime = get(perfData, "computationTime", false);
17+
const totalTries = get(perfData, "totalTries", false);
18+
19+
console.log("perfData", perfData);
20+
21+
if (instant) {
22+
return (
23+
<AlertBox>
24+
<p>
25+
The above Marquee shows instantly and doesn't require computation time, because the child
26+
elements are not positioned (scattered) randomly.
27+
</p>
28+
</AlertBox>
29+
);
30+
}
31+
32+
if (computationTime) {
33+
return (
34+
<AlertBox>
35+
<p>
36+
The above Marquee took <b>{computationTime}ms</b> and <b>{totalTries} tries</b> to find an
37+
appropriate positioning.
38+
</p>
39+
</AlertBox>
40+
);
41+
}
42+
43+
return (
44+
<AlertBox>
45+
<p>The above Marquee is still rendering.</p>
46+
</AlertBox>
47+
);
48+
};
49+
50+
export default ComputationTime;

‎example/src/components/code/companies.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import times from "lodash/times";
88
const Reviews = () => (
99
<FullWidth>
1010
<Height height={500}>
11-
<Marquee key={key} velocity={12} scatterRandomly minScale={0.7} resetAfterTries={200} debug>
11+
<Marquee key={key} velocity={12} scatterRandomly minScale={0.7} resetAfterTries={200}>
1212
{_.times(8, Number).map(id => (
1313
<Motion
1414
key={\`marquee-example-company-\${id}\`}

‎example/src/components/code/people.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Photo = styled.img\`
1818
const Reviews = () => (
1919
<div>
2020
<div style={{ height: 200 }}>
21-
<Marquee key={key} velocity={25} debug>
21+
<Marquee key={key} velocity={25}>
2222
{times(7, Number).map(id => (
2323
<Photo src={photos[id]} key={\`marquee-example-people-\${id}\`} style={{
2424
marginLeft: "87px",

‎example/src/components/code/playground.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ const Reviews = () => {
7474
maxScale={${maxScale}}
7575
resetAfterTries={${resetAfterTries}}
7676
onFinish={() => setLoading(false)}
77-
debug
7877
>
7978
{times(${iconsAmount}, Number).map(index => (
8079
<Scale scale={iconsMeta[index].scale} key={\`marquee-example-playground-\${index}\`}>

‎example/src/components/code/reviews.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Marquee from "react-marquee-slider";
66
import times from "lodash/times";
77
88
const Reviews = () => (
9-
<Marquee key={key} velocity={25} scatterRandomly minScale={0.7} debug>
9+
<Marquee key={key} velocity={25} scatterRandomly minScale={0.7}>
1010
{times(5, String).map(id => (
1111
<Box key={\`marquee-example-review-\${id}\`} scale={scale}>
1212
<Review scale={scale}>

‎example/src/components/companies.js

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from "styled-components";
33
import times from "lodash/times";
44
import Marquee, { Motion, randomIntFromInterval } from "react-marquee-slider";
55
import { withSize } from "react-sizeme";
6-
import nanoid from "nanoid";
6+
import { nanoid } from "nanoid";
77

88
import FullWidth from "../components/FullWidth";
99

@@ -22,22 +22,22 @@ import logoTwilio from "../images/twilio.svg";
2222
const Height = styled.div`
2323
position: relative;
2424
width: 100%;
25-
height: ${props => (props.height ? props.height + "px" : "auto")};
25+
height: ${(props) => (props.height ? props.height + "px" : "auto")};
2626
`;
2727

2828
const Company = styled.div`
2929
position: relative;
30-
width: ${props => props.scale * 75}px;
31-
height: ${props => props.scale * 75}px;
30+
width: ${(props) => props.scale * 75}px;
31+
height: ${(props) => props.scale * 75}px;
3232
`;
3333

3434
const Circle = styled.div`
3535
position: absolute;
3636
transform: scale(0.5);
3737
object-position: center center;
3838
will-change: transform, opacity;
39-
width: ${props => props.scale * 150}px;
40-
height: ${props => props.scale * 150}px;
39+
width: ${(props) => props.scale * 150}px;
40+
height: ${(props) => props.scale * 150}px;
4141
top: -50%;
4242
left: -50%;
4343
border-radius: 50%;
@@ -69,7 +69,7 @@ const icons = [
6969
logoTwilio,
7070
];
7171

72-
const Companies = ({ size }) => {
72+
const Companies = ({ size, onStartPerformance, onEndPerformance }) => {
7373
const [key, setKey] = useState(nanoid());
7474

7575
useEffect(() => {
@@ -93,8 +93,16 @@ const Companies = ({ size }) => {
9393
return (
9494
<FullWidth>
9595
<Height height={500}>
96-
<Marquee key={key} velocity={12} scatterRandomly minScale={0.7} resetAfterTries={200} debug>
97-
{times(8, Number).map(id => (
96+
<Marquee
97+
key={key}
98+
velocity={12}
99+
scatterRandomly
100+
minScale={0.7}
101+
resetAfterTries={200}
102+
onInit={onStartPerformance}
103+
onFinish={onEndPerformance}
104+
>
105+
{times(8, Number).map((id) => (
98106
<Motion
99107
key={`marquee-example-company-${id}`}
100108
initDeg={randomIntFromInterval(0, 360)}
@@ -115,4 +123,4 @@ const Companies = ({ size }) => {
115123
);
116124
};
117125

118-
export default withSize()(Companies);
126+
export default React.memo(withSize()(Companies));

0 commit comments

Comments
 (0)