Skip to content

Commit 7d96ae5

Browse files
braposobraposo
committed
Updates examples page
1 parent d1da51d commit 7d96ae5

File tree

1 file changed

+197
-135
lines changed

1 file changed

+197
-135
lines changed

‎examples/App.tsx

+197-135
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,226 @@
1-
import React from "react";
2-
import TextLoop from "../src";
1+
import React, { useState, useEffect } from "react";
32
import cxs from "cxs/component";
3+
import TextLoop from "../src";
44

5-
const Example = cxs("div")({
5+
const Example: React.FunctionComponent = cxs("div")({
66
fontSize: "24px",
77
});
88

9-
const Title = cxs("div")({
9+
const Title: React.FunctionComponent = cxs("div")({
1010
marginBottom: "5px",
1111
fontSize: "10px",
1212
fontWeight: 600,
1313
textTransform: "uppercase",
1414
color: "#aaa",
1515
});
1616

17-
const Section = cxs("div")({
17+
const Section: React.FunctionComponent = cxs("div")({
1818
marginBottom: "50px",
1919
fontFamily:
2020
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
2121
});
2222

23-
const StyledTextLoop = cxs(TextLoop)({
23+
const StyledTextLoop: React.FunctionComponent<Partial<TextLoop["props"]>> = cxs(
24+
TextLoop
25+
)({
2426
display: "block",
2527
});
2628

27-
class App extends React.PureComponent<{}, { options: string[]; interval: number }> {
28-
constructor(props) {
29-
super(props);
30-
this.state = {
31-
options: ["Trade faster", "Increase sales"],
32-
interval: 0,
33-
};
34-
}
35-
36-
componentDidMount() {
37-
setTimeout(() => {
38-
this.setState({
39-
options: [
40-
"Trade faster",
41-
"Increase sales",
42-
"Stock winners",
43-
"Price perfectly",
44-
],
45-
});
29+
const BaseExample: React.FunctionComponent = (): JSX.Element => (
30+
<Section>
31+
<Title>Default</Title>
32+
<Example>
33+
<TextLoop>
34+
<span>Trade faster</span>
35+
<span>Increase sales</span>
36+
<span>Stock winners</span>
37+
</TextLoop>{" "}
38+
in every category.
39+
</Example>
40+
</Section>
41+
);
42+
43+
const FastExample: React.FunctionComponent = (): JSX.Element => (
44+
<Section>
45+
<Title>Fast transition</Title>
46+
<Example>
47+
<TextLoop interval={100}>
48+
<span>Trade faster</span>
49+
<span>Increase sales</span>
50+
<span>Stock winners</span>
51+
</TextLoop>{" "}
52+
in every category.
53+
</Example>
54+
</Section>
55+
);
56+
57+
const SmoothExample: React.FunctionComponent = (): JSX.Element => (
58+
<Section>
59+
<Title>Smooth animation (different spring config)</Title>
60+
<Example>
61+
<TextLoop
62+
springConfig={{ stiffness: 70, damping: 31 }}
63+
adjustingSpeed={500}
64+
>
65+
<span>Trade faster</span>
66+
<span>Increase sales</span>
67+
<span>Stock winners</span>
68+
</TextLoop>{" "}
69+
in every category.
70+
</Example>
71+
</Section>
72+
);
73+
74+
const VariableExample: React.FunctionComponent = (): JSX.Element => (
75+
<Section>
76+
<Title>Variable interval</Title>
77+
<Example>
78+
<TextLoop interval={[3000, 1000]}>
79+
<span>Trade faster</span>
80+
<span>Increase sales</span>
81+
<span>Stock winners</span>
82+
</TextLoop>{" "}
83+
in every category.
84+
</Example>
85+
</Section>
86+
);
87+
88+
const MaskedExample: React.FunctionComponent = (): JSX.Element => (
89+
<Section>
90+
<Title>Masked</Title>
91+
<Example>
92+
<TextLoop mask={true}>
93+
<span>Trade faster</span>
94+
<span>Increase sales</span>
95+
<span>Stock winners</span>
96+
</TextLoop>{" "}
97+
in every category.
98+
</Example>
99+
</Section>
100+
);
101+
102+
const ControlledExample: React.FunctionComponent = (): JSX.Element => {
103+
const [options, setOptions] = useState(["Trade faster", "Increase sales"]);
104+
const [interval, setInterval] = useState(0);
105+
106+
useEffect(() => {
107+
const optionsTimeout = setTimeout(() => {
108+
setOptions([
109+
"Trade faster",
110+
"Increase sales",
111+
"Stock winners",
112+
"Price perfectly",
113+
]);
46114
console.log("change options");
47115
}, 10000);
48116

49-
setTimeout(() => {
50-
this.setState({
51-
interval: 1000,
52-
});
117+
return (): void => {
118+
clearTimeout(optionsTimeout);
119+
};
120+
}, []);
53121

122+
useEffect(() => {
123+
const intervalStartTimeout = setTimeout(() => {
54124
console.log("start");
55-
setTimeout(() => {
56-
this.setState({
57-
interval: 0,
58-
});
59-
console.log("stop");
60-
}, 10000);
125+
setInterval(1000);
61126
}, 5000);
62-
}
63-
64-
render() {
65-
const { options, interval } = this.state;
66-
67-
return (
68-
<div>
69-
<Section>
70-
<Title>Default</Title>
71-
<Example>
72-
<TextLoop>
73-
<span>Trade faster</span>
74-
<span>Increase sales</span>
75-
<span>Stock winners</span>
76-
</TextLoop>{" "}
77-
in every category.
78-
</Example>
79-
</Section>
80-
<Section>
81-
<Title>Fast transition</Title>
82-
<Example>
83-
<TextLoop interval={100}>
84-
<span>Trade faster</span>
85-
<span>Increase sales</span>
86-
<span>Stock winners</span>
87-
</TextLoop>{" "}
88-
in every category.
89-
</Example>
90-
</Section>
91-
<Section>
92-
<Title>Smooth animation (different spring config)</Title>
93-
<Example>
94-
<TextLoop
95-
springConfig={{ stiffness: 70, damping: 31 }}
96-
adjustingSpeed={500}
97-
>
98-
<span>Trade faster</span>
99-
<span>Increase sales</span>
100-
<span>Stock winners</span>
101-
</TextLoop>{" "}
102-
in every category.
103-
</Example>
104-
</Section>
105-
<Section>
106-
<Title>Variable interval</Title>
107-
<Example>
108-
<TextLoop interval={[3000, 1000]}>
109-
<span>Trade faster</span>
110-
<span>Increase sales</span>
111-
<span>Stock winners</span>
112-
</TextLoop>{" "}
113-
in every category.
114-
</Example>
115-
</Section>
116-
<Section>
117-
<Title>Masked</Title>
118-
<Example>
119-
<TextLoop mask={true}>
120-
<span>Trade faster</span>
121-
<span>Increase sales</span>
122-
<span>Stock winners</span>
123-
</TextLoop>{" "}
124-
in every category.
125-
</Example>
126-
</Section>
127-
<Section>
128-
<Title>
129-
Controlled props (start/stop animation and change
130-
options)
131-
</Title>
132-
<Example>
133-
<TextLoop interval={interval} children={options} /> in
134-
every category.
135-
</Example>
136-
</Section>
137-
<Section>
138-
<Title>
139-
Staggered (with delay prop and custom styling)
140-
</Title>
141-
<Example>
142-
<StyledTextLoop mask={true} fade={false}>
143-
<span>Trade</span>
144-
<span>Increase</span>
145-
<span>Stock</span>
146-
</StyledTextLoop>
147-
<StyledTextLoop delay={500} mask={true} fade={false}>
148-
<span>faster</span>
149-
<span>sales</span>
150-
<span>winners</span>
151-
</StyledTextLoop>
152-
<StyledTextLoop delay={1000} mask={true} fade={false}>
153-
<span>in every category.</span>
154-
<span>in something else.</span>
155-
<span>in other category.</span>
156-
</StyledTextLoop>
157-
</Example>
158-
</Section>
159-
</div>
160-
);
161-
}
127+
return (): void => {
128+
clearTimeout(intervalStartTimeout);
129+
};
130+
}, []);
131+
132+
useEffect(() => {
133+
const intervalStopTimeout = setTimeout(() => {
134+
setInterval(0);
135+
console.log("stop");
136+
}, 15000);
137+
138+
return (): void => {
139+
clearTimeout(intervalStopTimeout);
140+
};
141+
}, []);
142+
143+
return (
144+
<Section>
145+
<Title>
146+
Controlled props (start/stop animation and change options)
147+
</Title>
148+
<Example>
149+
<TextLoop interval={interval} children={options} /> in every
150+
category.
151+
</Example>
152+
</Section>
153+
);
154+
};
155+
156+
const StaggeredExample: React.FunctionComponent = (): JSX.Element => (
157+
<Section>
158+
<Title>Staggered (with delay prop and custom styling)</Title>
159+
<Example>
160+
<StyledTextLoop mask={true} fade={false}>
161+
<span>Trade</span>
162+
<span>Increase</span>
163+
<span>Stock</span>
164+
</StyledTextLoop>
165+
<StyledTextLoop delay={500} mask={true} fade={false}>
166+
<span>faster</span>
167+
<span>sales</span>
168+
<span>winners</span>
169+
</StyledTextLoop>
170+
<StyledTextLoop delay={1000} mask={true} fade={false}>
171+
<span>in every category.</span>
172+
<span>in something else.</span>
173+
<span>in other category.</span>
174+
</StyledTextLoop>
175+
</Example>
176+
</Section>
177+
);
178+
179+
enum Sections {
180+
Base,
181+
Fast,
182+
Smooth,
183+
Variable,
184+
Masked,
185+
Controlled,
186+
Staggered,
162187
}
163188

189+
const App: React.FunctionComponent = (): JSX.Element => {
190+
const [activeSection, setActiveSection] = useState<Sections>(Sections.Base);
191+
192+
const mapSectionToComponent = {
193+
[Sections.Base]: BaseExample,
194+
[Sections.Fast]: FastExample,
195+
[Sections.Smooth]: SmoothExample,
196+
[Sections.Variable]: VariableExample,
197+
[Sections.Masked]: MaskedExample,
198+
[Sections.Controlled]: ControlledExample,
199+
[Sections.Staggered]: StaggeredExample,
200+
};
201+
202+
const ExampleSection = mapSectionToComponent[activeSection];
203+
return (
204+
<div>
205+
<Section>
206+
<Title>Examples</Title>
207+
<select
208+
onChange={(e): void => {
209+
setActiveSection(parseInt(e.target.value, 10));
210+
}}
211+
>
212+
<option value={Sections.Base}>Default</option>
213+
<option value={Sections.Fast}>Fast</option>
214+
<option value={Sections.Smooth}>Smooth</option>
215+
<option value={Sections.Variable}>Variable</option>
216+
<option value={Sections.Masked}>Masked</option>
217+
<option value={Sections.Controlled}>Controlled</option>
218+
<option value={Sections.Staggered}>Staggered</option>
219+
</select>
220+
</Section>
221+
<ExampleSection />
222+
</div>
223+
);
224+
};
225+
164226
export default App;

0 commit comments

Comments
 (0)