@dhis2-ui/intersection-detector 8.1.10 → 8.2.1
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/build/cjs/intersection-detector.js +9 -8
- package/build/cjs/intersection-detector.stories.e2e.js +1 -1
- package/build/cjs/intersection-detector.stories.js +15 -19
- package/build/es/intersection-detector.js +9 -8
- package/build/es/intersection-detector.stories.js +14 -18
- package/package.json +2 -2
|
@@ -17,14 +17,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const IntersectionDetector =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
const IntersectionDetector = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
threshold,
|
|
23
|
+
onChange,
|
|
24
|
+
children,
|
|
25
|
+
className,
|
|
26
|
+
dataTest,
|
|
27
|
+
rootRef
|
|
28
|
+
} = _ref;
|
|
28
29
|
// Use useRef instead of useState to prevent unnecessary re-render:
|
|
29
30
|
// The state changes won't be reflected in what this component renders,
|
|
30
31
|
// so there's no need for re-rendering the (potentially computational
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.BottomArea = exports.AbsoluteTopArea = exports.AbsoluteBottomArea = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -21,17 +21,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
21
21
|
|
|
22
22
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
23
|
|
|
24
|
-
const description = `
|
|
25
|
-
A tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [\`IntersectionObserver\`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.
|
|
26
|
-
|
|
27
|
-
See the code examples below for examples on how to implement it.
|
|
28
|
-
|
|
29
|
-
\`\`\`js
|
|
30
|
-
import { IntersectionDetector } from '@dhis2/ui'
|
|
31
|
-
\`\`\`
|
|
32
|
-
`;
|
|
24
|
+
const description = "\nA tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.\n\nSee the code examples below for examples on how to implement it.\n\n```js\nimport { IntersectionDetector } from '@dhis2/ui'\n```\n";
|
|
33
25
|
var _default = {
|
|
34
|
-
title: '
|
|
26
|
+
title: 'Intersection Observer',
|
|
35
27
|
component: _intersectionDetector.IntersectionDetector,
|
|
36
28
|
parameters: {
|
|
37
29
|
docs: {
|
|
@@ -60,17 +52,18 @@ const Text = () => /*#__PURE__*/_react.default.createElement("p", {
|
|
|
60
52
|
id: "3862390236"
|
|
61
53
|
}, ["p.jsx-3862390236{margin:0;}"]));
|
|
62
54
|
|
|
63
|
-
const Template =
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
55
|
+
const Template = _ref => {
|
|
56
|
+
let {
|
|
57
|
+
containerStyles,
|
|
58
|
+
...args
|
|
59
|
+
} = _ref;
|
|
67
60
|
const rootRef = (0, _react.useRef)();
|
|
68
61
|
const [isIntersecting, setIsIntersecting] = (0, _react.useState)(false);
|
|
69
62
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
70
63
|
className: "jsx-2697878418" + " " + "container"
|
|
71
64
|
}, /*#__PURE__*/_react.default.createElement("p", {
|
|
72
65
|
className: "jsx-2697878418"
|
|
73
|
-
}, "Is intersecting: ",
|
|
66
|
+
}, "Is intersecting: ", " ".concat(isIntersecting)), /*#__PURE__*/_react.default.createElement("div", {
|
|
74
67
|
ref: rootRef,
|
|
75
68
|
className: "jsx-2697878418" + " " + "scrollContainer"
|
|
76
69
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -79,9 +72,12 @@ const Template = ({
|
|
|
79
72
|
style: containerStyles,
|
|
80
73
|
className: "jsx-2697878418"
|
|
81
74
|
}, /*#__PURE__*/_react.default.createElement(_intersectionDetector.IntersectionDetector, _extends({}, args, {
|
|
82
|
-
onChange:
|
|
83
|
-
|
|
84
|
-
|
|
75
|
+
onChange: _ref2 => {
|
|
76
|
+
let {
|
|
77
|
+
isIntersecting
|
|
78
|
+
} = _ref2;
|
|
79
|
+
return setIsIntersecting(isIntersecting);
|
|
80
|
+
},
|
|
85
81
|
rootRef: rootRef
|
|
86
82
|
}))))), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
87
83
|
id: "2697878418"
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import React, { useEffect, useRef } from 'react';
|
|
4
|
-
export const IntersectionDetector =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
export const IntersectionDetector = _ref => {
|
|
5
|
+
let {
|
|
6
|
+
threshold,
|
|
7
|
+
onChange,
|
|
8
|
+
children,
|
|
9
|
+
className,
|
|
10
|
+
dataTest,
|
|
11
|
+
rootRef
|
|
12
|
+
} = _ref;
|
|
12
13
|
// Use useRef instead of useState to prevent unnecessary re-render:
|
|
13
14
|
// The state changes won't be reflected in what this component renders,
|
|
14
15
|
// so there's no need for re-rendering the (potentially computational
|
|
@@ -5,17 +5,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import React, { useState, useRef } from 'react';
|
|
7
7
|
import { IntersectionDetector } from './intersection-detector.js';
|
|
8
|
-
const description = `
|
|
9
|
-
A tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [\`IntersectionObserver\`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.
|
|
10
|
-
|
|
11
|
-
See the code examples below for examples on how to implement it.
|
|
12
|
-
|
|
13
|
-
\`\`\`js
|
|
14
|
-
import { IntersectionDetector } from '@dhis2/ui'
|
|
15
|
-
\`\`\`
|
|
16
|
-
`;
|
|
8
|
+
const description = "\nA tool to performantly detect when two components intersect, which is often better to use than scroll listeners. A common use case is to detect when a child component is in view inside a scrolling parent. Uses an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) object internally.\n\nSee the code examples below for examples on how to implement it.\n\n```js\nimport { IntersectionDetector } from '@dhis2/ui'\n```\n";
|
|
17
9
|
export default {
|
|
18
|
-
title: '
|
|
10
|
+
title: 'Intersection Observer',
|
|
19
11
|
component: IntersectionDetector,
|
|
20
12
|
parameters: {
|
|
21
13
|
docs: {
|
|
@@ -43,17 +35,18 @@ const Text = () => /*#__PURE__*/React.createElement("p", {
|
|
|
43
35
|
id: "3862390236"
|
|
44
36
|
}, ["p.jsx-3862390236{margin:0;}"]));
|
|
45
37
|
|
|
46
|
-
const Template =
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
const Template = _ref => {
|
|
39
|
+
let {
|
|
40
|
+
containerStyles,
|
|
41
|
+
...args
|
|
42
|
+
} = _ref;
|
|
50
43
|
const rootRef = useRef();
|
|
51
44
|
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
52
45
|
return /*#__PURE__*/React.createElement("div", {
|
|
53
46
|
className: "jsx-2697878418" + " " + "container"
|
|
54
47
|
}, /*#__PURE__*/React.createElement("p", {
|
|
55
48
|
className: "jsx-2697878418"
|
|
56
|
-
}, "Is intersecting: ",
|
|
49
|
+
}, "Is intersecting: ", " ".concat(isIntersecting)), /*#__PURE__*/React.createElement("div", {
|
|
57
50
|
ref: rootRef,
|
|
58
51
|
className: "jsx-2697878418" + " " + "scrollContainer"
|
|
59
52
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -62,9 +55,12 @@ const Template = ({
|
|
|
62
55
|
style: containerStyles,
|
|
63
56
|
className: "jsx-2697878418"
|
|
64
57
|
}, /*#__PURE__*/React.createElement(IntersectionDetector, _extends({}, args, {
|
|
65
|
-
onChange:
|
|
66
|
-
|
|
67
|
-
|
|
58
|
+
onChange: _ref2 => {
|
|
59
|
+
let {
|
|
60
|
+
isIntersecting
|
|
61
|
+
} = _ref2;
|
|
62
|
+
return setIsIntersecting(isIntersecting);
|
|
63
|
+
},
|
|
68
64
|
rootRef: rootRef
|
|
69
65
|
}))))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
70
66
|
id: "2697878418"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/intersection-detector",
|
|
3
|
-
"version": "8.1
|
|
3
|
+
"version": "8.2.1",
|
|
4
4
|
"description": "UI IntersectionDetector",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2/ui-constants": "8.1
|
|
35
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"prop-types": "^15.7.2"
|
|
38
38
|
},
|