@times-components/lazy-load 0.6.26 → 0.6.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/package.json +8 -8
- package/lazy-load.showcase.web.js +0 -80
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.6.27](https://github.com/newsuk/times-components/compare/@times-components/lazy-load@0.6.26...@times-components/lazy-load@0.6.27) (2021-12-02)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @times-components/lazy-load
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.6.26](https://github.com/newsuk/times-components/compare/@times-components/lazy-load@0.6.25...@times-components/lazy-load@0.6.26) (2021-11-25)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @times-components/lazy-load
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/lazy-load",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.27",
|
|
4
4
|
"description": "Use IntersectionObserver to lazy load resources",
|
|
5
5
|
"main": "dist/lazy-load",
|
|
6
6
|
"dev": "src/lazy-load",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
"homepage": "https://github.com/newsuk/times-components#readme",
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@babel/core": "7.4.4",
|
|
38
|
-
"@times-components/eslint-config-thetimes": "0.8.
|
|
39
|
-
"@times-components/jest-configurator": "2.7.
|
|
40
|
-
"@times-components/jest-serializer": "3.2.
|
|
41
|
-
"@times-components/storybook": "4.1.
|
|
42
|
-
"@times-components/test-utils": "2.3.
|
|
43
|
-
"@times-components/webpack-configurator": "2.0.
|
|
38
|
+
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
39
|
+
"@times-components/jest-configurator": "2.7.4",
|
|
40
|
+
"@times-components/jest-serializer": "3.2.28",
|
|
41
|
+
"@times-components/storybook": "4.1.68",
|
|
42
|
+
"@times-components/test-utils": "2.3.10",
|
|
43
|
+
"@times-components/webpack-configurator": "2.0.29",
|
|
44
44
|
"babel-jest": "24.8.0",
|
|
45
45
|
"enzyme": "3.9.0",
|
|
46
46
|
"eslint": "5.9.0",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "eec604346ec793e27892f0522ab81cafde40fd9e"
|
|
73
73
|
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import React, { Component } from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import LazyLoad from "./src/lazy-load";
|
|
4
|
-
|
|
5
|
-
const list = new Array(50).fill(0).map((_, indx) => `node-${indx}`);
|
|
6
|
-
const ListElement = styled.li`
|
|
7
|
-
align-items: center;
|
|
8
|
-
border: 2px solid white;
|
|
9
|
-
display: flex;
|
|
10
|
-
height: 200px;
|
|
11
|
-
justify-content: center;
|
|
12
|
-
`;
|
|
13
|
-
|
|
14
|
-
const SeenElement = styled(ListElement)`
|
|
15
|
-
background-color: rgba(170, 200, 170, 0.8);
|
|
16
|
-
`;
|
|
17
|
-
|
|
18
|
-
const UnseenElement = styled(ListElement)`
|
|
19
|
-
background-color: rgba(247, 189, 189, 0.8);
|
|
20
|
-
`;
|
|
21
|
-
|
|
22
|
-
const UnseenText = () => <span>I am hiding</span>;
|
|
23
|
-
|
|
24
|
-
class SeenText extends Component {
|
|
25
|
-
constructor(props) {
|
|
26
|
-
super(props);
|
|
27
|
-
|
|
28
|
-
this.state = {
|
|
29
|
-
showVisibleText: false
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
componentDidMount() {
|
|
34
|
-
setTimeout(
|
|
35
|
-
() =>
|
|
36
|
-
this.setState({
|
|
37
|
-
showVisibleText: true
|
|
38
|
-
}),
|
|
39
|
-
500
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
render() {
|
|
44
|
-
const { showVisibleText } = this.state;
|
|
45
|
-
return <span>{showVisibleText ? "You've seen me" : "I am hiding"}</span>;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export default {
|
|
50
|
-
children: [
|
|
51
|
-
{
|
|
52
|
-
component: () => (
|
|
53
|
-
<LazyLoad rootMargin="100px" threshold={0.5}>
|
|
54
|
-
{({ observed, registerNode }) => (
|
|
55
|
-
<ul>
|
|
56
|
-
{list.map(id => {
|
|
57
|
-
const isVisible = !!observed.get(id);
|
|
58
|
-
const StyledElement = isVisible ? SeenElement : UnseenElement;
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<StyledElement
|
|
62
|
-
id={id}
|
|
63
|
-
innerRef={node => registerNode(node)}
|
|
64
|
-
key={id}
|
|
65
|
-
>
|
|
66
|
-
{isVisible ? <SeenText /> : <UnseenText />}
|
|
67
|
-
</StyledElement>
|
|
68
|
-
);
|
|
69
|
-
})}
|
|
70
|
-
</ul>
|
|
71
|
-
)}
|
|
72
|
-
</LazyLoad>
|
|
73
|
-
),
|
|
74
|
-
name: "Default",
|
|
75
|
-
platform: "web",
|
|
76
|
-
type: "story"
|
|
77
|
-
}
|
|
78
|
-
],
|
|
79
|
-
name: "Helpers/Lazy load"
|
|
80
|
-
};
|