Skip to content

Commit a044613

Browse files
vcarlvcarl
committed
Revamp examples to serve from a single page
1 parent a24d990 commit a044613

File tree

15 files changed

+3704
-4456
lines changed

15 files changed

+3704
-4456
lines changed

‎examples/basic/basic.bundle.js‎

Lines changed: 0 additions & 1416 deletions
This file was deleted.

‎examples/basic/basic.js‎

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
33

44
import { Sticky, StickyContainer } from "../../src";
55

6-
let i = 0;
6+
let renderCount = 0;
77
class Header extends PureComponent {
88
render() {
99
return (
@@ -17,15 +17,15 @@ class Header extends PureComponent {
1717
>
1818
<h2>
1919
<span className="pull-left">
20-
&lt;Sticky /&gt; <small>(invocation: #{i++})</small>
20+
&lt;Sticky /&gt; <small>(invocation: #{renderCount++})</small>
2121
</span>
2222
</h2>
2323
</div>
2424
);
2525
}
2626
}
2727

28-
class Document extends PureComponent {
28+
export class Basic extends PureComponent {
2929
render() {
3030
return (
3131
<div style={{ height: 1500, margin: "0 30px" }}>
@@ -34,27 +34,7 @@ class Document extends PureComponent {
3434
<StickyContainer
3535
style={{ height: 500, background: "#ddd", padding: "0 30px" }}
3636
>
37-
<Sticky>
38-
{({
39-
isSticky,
40-
wasSticky,
41-
style,
42-
distanceFromTop,
43-
distanceFromBottom,
44-
calculatedHeight
45-
}) => {
46-
console.log({
47-
isSticky,
48-
wasSticky,
49-
style,
50-
distanceFromTop,
51-
distanceFromBottom,
52-
calculatedHeight
53-
});
54-
return <Header style={style} />;
55-
}}
56-
</Sticky>
57-
37+
<Sticky>{({ style }) => <Header style={style} />}</Sticky>
5838
<h2 className="text-center" style={{ marginTop: 150 }}>
5939
&lt;StickyContainer /&gt;
6040
</h2>
@@ -65,5 +45,3 @@ class Document extends PureComponent {
6545
);
6646
}
6747
}
68-
69-
ReactDOM.render(<Document />, document.getElementById("mount"));

‎examples/bundle.js‎

Lines changed: 1746 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/basic/index.html‎ renamed to ‎examples/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
<title>react-sticky by Captivation Software</title>
77

88
<link href="http://www.captivationsoftware.com/favicon.ico" rel="icon" />
9-
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
109
</head>
1110

1211
<body>
1312
<div id="mount"></div>
14-
<script type="text/javascript" src="./basic.bundle.js"></script>
13+
<script type="text/javascript" src="/bundle.js"></script>
1514
</body>
15+
1616
</html>

‎examples/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4+
import { Basic } from "./basic/basic";
5+
import { Relative } from "./relative/relative";
6+
import { Stacked } from "./stacked/stacked";
7+
import styles from "./styles";
8+
9+
ReactDOM.render(
10+
<Router>
11+
<div>
12+
<style>{styles}</style>
13+
<div className="header">
14+
<Link to="/basic">Basic</Link> <Link to="/relative">Relative</Link>{" "}
15+
<Link to="/stacked">Stacked</Link>
16+
</div>
17+
<Route path="/basic" component={Basic} />
18+
<Route path="/relative" component={Relative} />
19+
<Route path="/stacked" component={Stacked} />
20+
</div>
21+
</Router>,
22+
document.querySelector("#mount")
23+
);

‎examples/relative/index.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎examples/relative/relative.bundle.js‎

Lines changed: 0 additions & 1417 deletions
This file was deleted.

‎examples/relative/relative.js‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import ReactDOM from "react-dom";
33

44
import { Sticky, StickyContainer } from "../../src";
55

6-
let i = 0;
7-
class Document extends PureComponent {
6+
let renderCount = 0;
7+
export class Relative extends PureComponent {
88
render() {
99
return (
1010
<div style={{ margin: 30 }}>
@@ -26,26 +26,23 @@ class Document extends PureComponent {
2626
distanceFromTop,
2727
distanceFromBottom,
2828
calculatedHeight
29-
}) => {
30-
// console.log({ isSticky, wasSticky, style, distanceFromTop, distanceFromBottom, calculatedHeight });
31-
32-
return (
33-
<div
34-
style={{
35-
...style,
36-
height: 100,
37-
overflow: "auto",
38-
background: "#aaa"
39-
}}
40-
>
41-
<h2>
42-
<span className="pull-left">
43-
&lt;Sticky /&gt; <small>(invocation: #{i++})</small>
44-
</span>
45-
</h2>
46-
</div>
47-
);
48-
}}
29+
}) => (
30+
<div
31+
style={{
32+
...style,
33+
height: 100,
34+
overflow: "auto",
35+
background: "#aaa"
36+
}}
37+
>
38+
<h2>
39+
<span className="pull-left">
40+
&lt;Sticky /&gt;{" "}
41+
<small>(invocation: #{renderCount++})</small>
42+
</span>
43+
</h2>
44+
</div>
45+
)}
4946
</Sticky>
5047

5148
<h2 className="text-center" style={{ marginTop: 150 }}>
@@ -57,5 +54,3 @@ class Document extends PureComponent {
5754
);
5855
}
5956
}
60-
61-
ReactDOM.render(<Document />, document.getElementById("mount"));

‎examples/stacked/index.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎examples/stacked/stacked.bundle.js‎

Lines changed: 0 additions & 1418 deletions
This file was deleted.

0 commit comments

Comments
 (0)