@telus-uds/components-community.sticky 1.7.1 → 2.0.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/.eslintrc.cjs +21 -0
- package/CHANGELOG.md +24 -2
- package/babel.config.cjs +4 -0
- package/jest.config.cjs +22 -0
- package/lib/Sticky.js +34 -42
- package/lib/index.js +3 -16
- package/lib/styles.js +4 -13
- package/package.json +16 -11
- package/lib-module/Sticky.js +0 -154
- package/lib-module/index.js +0 -3
- package/lib-module/styles.js +0 -6
package/.eslintrc.cjs
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const path = require('path')
|
|
2
|
+
const base = require('../../../../eslintrc.base.cjs')
|
|
3
|
+
|
|
4
|
+
base.rules['import/no-extraneous-dependencies'] = [
|
|
5
|
+
'error',
|
|
6
|
+
{ packageDir: [__dirname, path.join(__dirname, '../..')] }
|
|
7
|
+
]
|
|
8
|
+
base.settings = {
|
|
9
|
+
...base.settings,
|
|
10
|
+
'import/resolver': {
|
|
11
|
+
node: {
|
|
12
|
+
...base.settings?.['import/resolver']?.node,
|
|
13
|
+
moduleDirectory: [
|
|
14
|
+
path.join(__dirname, '../../node_modules'),
|
|
15
|
+
path.join(__dirname, '../../../../node_modules')
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
module.exports = base
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @telus-uds/components-community.sticky
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Sat, 23 Nov 2024 01:38:59 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 2.0.1
|
|
8
|
+
|
|
9
|
+
Sat, 23 Nov 2024 01:38:59 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Upgrade dependencies (shahzaibkhalidmalik@outlook.com)
|
|
14
|
+
- Bump @telus-uds/components-base to v2.0.2
|
|
15
|
+
- Bump @telus-uds/components-web to v3.0.1
|
|
16
|
+
|
|
17
|
+
## 2.0.0
|
|
18
|
+
|
|
19
|
+
Fri, 22 Nov 2024 23:43:49 GMT
|
|
20
|
+
|
|
21
|
+
### Major changes
|
|
22
|
+
|
|
23
|
+
- Upgrade `react-native` and many other dependencies and refactor to ESM-only builds (shahzaibkhalidmalik@outlook.com)
|
|
24
|
+
- Bump @telus-uds/components-base to v1.97.1
|
|
25
|
+
- Bump @telus-uds/system-constants to v2.0.0
|
|
26
|
+
- Bump @telus-uds/system-theme-tokens to v3.0.0
|
|
27
|
+
- Bump @telus-uds/components-web to v3.0.0
|
|
28
|
+
|
|
7
29
|
## 1.7.1
|
|
8
30
|
|
|
9
|
-
Wed, 13 Nov 2024 17:
|
|
31
|
+
Wed, 13 Nov 2024 17:23:43 GMT
|
|
10
32
|
|
|
11
33
|
### Patches
|
|
12
34
|
|
package/babel.config.cjs
ADDED
package/jest.config.cjs
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
module.exports = () => ({
|
|
2
|
+
displayName: {
|
|
3
|
+
name: require('./package.json').name.split('@telus-uds/').pop(),
|
|
4
|
+
color: 'magenta'
|
|
5
|
+
},
|
|
6
|
+
testEnvironment: 'jsdom',
|
|
7
|
+
// __dirname here tells babel to look in ds-allium/ for babel root when running from monorepo root
|
|
8
|
+
transform: { '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }] },
|
|
9
|
+
moduleNameMapper: {
|
|
10
|
+
'.+\\.(otf|png|jpg)$': 'identity-obj-proxy',
|
|
11
|
+
// mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
|
|
12
|
+
'\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
|
|
13
|
+
'\\.css': '<rootDir>/__mocks__/styleMock.js',
|
|
14
|
+
'^@telus-uds/components-base/server$': '<rootDir>/../../../components-base/lib/server.js'
|
|
15
|
+
},
|
|
16
|
+
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
|
|
17
|
+
transformIgnorePatterns: [
|
|
18
|
+
'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
|
|
19
|
+
],
|
|
20
|
+
// Count everything in src when calculating coverage
|
|
21
|
+
collectCoverageFrom: ['src/*.{js,jsx}']
|
|
22
|
+
})
|
package/lib/Sticky.js
CHANGED
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _componentsBase = require("@telus-uds/components-base");
|
|
10
|
-
var _lodash = _interopRequireDefault(require("lodash.throttle"));
|
|
11
|
-
var _styles = _interopRequireDefault(require("./styles"));
|
|
12
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { spacingProps, Box } from '@telus-uds/components-base';
|
|
4
|
+
import throttle from 'lodash.throttle';
|
|
5
|
+
import StickyWrapper from './styles';
|
|
6
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
7
|
function createObserver(ref, callback) {
|
|
15
8
|
let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
16
9
|
const observer = new IntersectionObserver(_ref => {
|
|
@@ -58,24 +51,24 @@ const Sticky = _ref2 => {
|
|
|
58
51
|
// eslint-disable-next-line no-param-reassign
|
|
59
52
|
variant = 'default';
|
|
60
53
|
}
|
|
61
|
-
const sentinelTopRef =
|
|
62
|
-
const sentinelBottomRef =
|
|
63
|
-
const stickyWrapperRef =
|
|
64
|
-
const [observer, setObserver] =
|
|
65
|
-
const onStickThrottled = (
|
|
54
|
+
const sentinelTopRef = React.useRef();
|
|
55
|
+
const sentinelBottomRef = React.useRef();
|
|
56
|
+
const stickyWrapperRef = React.useRef();
|
|
57
|
+
const [observer, setObserver] = React.useState();
|
|
58
|
+
const onStickThrottled = throttle(onStick, throttleTime, throttleConfig);
|
|
66
59
|
const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef;
|
|
67
|
-
|
|
60
|
+
React.useEffect(() => {
|
|
68
61
|
if (observer) {
|
|
69
62
|
observer.disconnect();
|
|
70
63
|
}
|
|
71
64
|
if (variant === 'default' || variant === 'hidden') {
|
|
72
65
|
setObserver(createObserver(sentinelPositionRef, intersected => {
|
|
73
66
|
var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
|
|
74
|
-
(_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0
|
|
75
|
-
(_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0
|
|
67
|
+
(_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 || _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
|
|
68
|
+
(_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 || _stickyWrapperRef$cur2.classList.toggle(position, intersected);
|
|
76
69
|
if (intersected) {
|
|
77
70
|
var _stickyWrapperRef$cur3;
|
|
78
|
-
(_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0
|
|
71
|
+
(_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 || _stickyWrapperRef$cur3.classList.remove('pristine');
|
|
79
72
|
}
|
|
80
73
|
onStickThrottled(intersected);
|
|
81
74
|
}, workWithViewport));
|
|
@@ -83,31 +76,31 @@ const Sticky = _ref2 => {
|
|
|
83
76
|
if (variant === 'alternate') {
|
|
84
77
|
setObserver(createObserver(sentinelBottomRef, intersected => {
|
|
85
78
|
var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
|
|
86
|
-
(_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0
|
|
87
|
-
(_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0
|
|
79
|
+
(_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 || _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
|
|
80
|
+
(_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 || _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
|
|
88
81
|
onStickThrottled(intersected);
|
|
89
82
|
}, workWithViewport));
|
|
90
83
|
}
|
|
91
84
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
92
85
|
}, [variant]);
|
|
93
|
-
return /*#__PURE__*/(
|
|
94
|
-
children: [/*#__PURE__*/(
|
|
86
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
87
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
95
88
|
className: "sentinelTop",
|
|
96
89
|
ref: sentinelTopRef
|
|
97
|
-
}), /*#__PURE__*/(
|
|
90
|
+
}), /*#__PURE__*/_jsx(StickyWrapper, {
|
|
98
91
|
className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
|
|
99
92
|
ref: stickyWrapperRef,
|
|
100
93
|
shadow: shadow,
|
|
101
94
|
position: position,
|
|
102
|
-
children: /*#__PURE__*/(
|
|
95
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
103
96
|
className: "sticky-element",
|
|
104
|
-
children: /*#__PURE__*/(
|
|
97
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
105
98
|
vertical: vertical,
|
|
106
99
|
horizontal: horizontal,
|
|
107
100
|
children: children
|
|
108
101
|
})
|
|
109
102
|
})
|
|
110
|
-
}), /*#__PURE__*/(
|
|
103
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
111
104
|
className: "sentinelBottom",
|
|
112
105
|
ref: sentinelBottomRef
|
|
113
106
|
})]
|
|
@@ -118,43 +111,42 @@ Sticky.propTypes = {
|
|
|
118
111
|
* Sets top and bottom padding using the theme's spacing scale.
|
|
119
112
|
*
|
|
120
113
|
*/
|
|
121
|
-
vertical:
|
|
114
|
+
vertical: spacingProps.types.spacingValue,
|
|
122
115
|
/**
|
|
123
116
|
* Sets left and right padding using the theme's spacing scale.
|
|
124
117
|
*
|
|
125
118
|
*/
|
|
126
|
-
horizontal:
|
|
119
|
+
horizontal: spacingProps.types.spacingValue,
|
|
127
120
|
/**
|
|
128
121
|
* Whether the sticky should wait to cross the viewport to stick or not
|
|
129
122
|
* Defaults to true. Set to false for nested container (using overflow)
|
|
130
123
|
*/
|
|
131
|
-
workWithViewport:
|
|
124
|
+
workWithViewport: PropTypes.bool,
|
|
132
125
|
/**
|
|
133
126
|
* Sticky accepts any content as children.
|
|
134
127
|
*/
|
|
135
|
-
children:
|
|
136
|
-
variant:
|
|
128
|
+
children: PropTypes.node.isRequired,
|
|
129
|
+
variant: PropTypes.oneOf(['default', 'alternate', 'hidden']),
|
|
137
130
|
/**
|
|
138
131
|
* Sets whether sticky component is stuck to top or bottom of page.
|
|
139
132
|
* Note: Position "bottom" does not support the "hidden" variant.
|
|
140
133
|
*/
|
|
141
|
-
position:
|
|
134
|
+
position: PropTypes.oneOf(['top', 'bottom']),
|
|
142
135
|
/**
|
|
143
136
|
* Adds shadow to sticky component.
|
|
144
137
|
*/
|
|
145
|
-
shadow:
|
|
138
|
+
shadow: PropTypes.bool,
|
|
146
139
|
/**
|
|
147
140
|
* Callback when sticky is stuck to top or bottom of page.
|
|
148
141
|
*/
|
|
149
|
-
onStick:
|
|
142
|
+
onStick: PropTypes.func,
|
|
150
143
|
/**
|
|
151
144
|
* Time in milliseconds to throttle the onStick callback.
|
|
152
145
|
*/
|
|
153
|
-
throttleTime:
|
|
146
|
+
throttleTime: PropTypes.number,
|
|
154
147
|
/**
|
|
155
148
|
* Throttle configuration.
|
|
156
149
|
*/
|
|
157
|
-
throttleConfig:
|
|
150
|
+
throttleConfig: PropTypes.object
|
|
158
151
|
};
|
|
159
|
-
|
|
160
|
-
exports.default = _default;
|
|
152
|
+
export default Sticky;
|
package/lib/index.js
CHANGED
|
@@ -1,16 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "Sticky", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _Sticky.default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
exports.default = void 0;
|
|
13
|
-
var _Sticky = _interopRequireDefault(require("./Sticky"));
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
var _default = _Sticky.default;
|
|
16
|
-
exports.default = _default;
|
|
1
|
+
import Sticky from './Sticky';
|
|
2
|
+
export { default as Sticky } from './Sticky';
|
|
3
|
+
export default Sticky;
|
package/lib/styles.js
CHANGED
|
@@ -1,15 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
9
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
10
|
-
const StickyWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
const StickyWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
11
3
|
displayName: "styles__StickyWrapper",
|
|
12
4
|
componentId: "[object Object]__sc-160gk65-0"
|
|
13
|
-
})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"], props => props.position === 'top' ?
|
|
14
|
-
|
|
15
|
-
exports.default = _default;
|
|
5
|
+
})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"], props => props.position === 'top' ? css(["top:0;"]) : css(["bottom:0;"]), props => props.position === 'top' && css(["top:0px;"]), props => props.position === 'bottom' && css(["bottom:0px;"]), props => props.shadow && css(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && css([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && css(["animation:0.6s shadowOut forwards;"]));
|
|
6
|
+
export default StickyWrapper;
|
package/package.json
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"author": "TELUS Digital",
|
|
3
|
+
"type": "module",
|
|
3
4
|
"browserslist": [
|
|
4
5
|
"extends @telus-uds/browserslist-config"
|
|
5
6
|
],
|
|
6
7
|
"dependencies": {
|
|
7
|
-
"@telus-uds/components-base": "
|
|
8
|
-
"@telus-uds/system-constants": "^
|
|
9
|
-
"@telus-uds/system-theme-tokens": "^
|
|
8
|
+
"@telus-uds/components-base": "^2.0.2",
|
|
9
|
+
"@telus-uds/system-constants": "^2.0.0",
|
|
10
|
+
"@telus-uds/system-theme-tokens": "^3.0.0",
|
|
10
11
|
"lodash.throttle": "^4.1.1",
|
|
11
12
|
"prop-types": "^15.7.2",
|
|
12
13
|
"styled-components": "^5.3.10"
|
|
13
14
|
},
|
|
14
15
|
"devDependencies": {
|
|
15
|
-
"@telus-uds/components-web": "^
|
|
16
|
+
"@telus-uds/components-web": "^3.0.1",
|
|
16
17
|
"@telus-uds/browserslist-config": "^1.0.5",
|
|
17
18
|
"@testing-library/jest-dom": "^5.16.1",
|
|
18
19
|
"@testing-library/react": "^13.3.0",
|
|
@@ -24,11 +25,17 @@
|
|
|
24
25
|
"license": "UNLICENSED",
|
|
25
26
|
"name": "@telus-uds/components-community.sticky",
|
|
26
27
|
"peerDependencies": {
|
|
27
|
-
"react": "^
|
|
28
|
-
"react-dom": "^
|
|
28
|
+
"react": "^18.2.0",
|
|
29
|
+
"react-dom": "^18.2.0"
|
|
29
30
|
},
|
|
30
31
|
"main": "lib/index.js",
|
|
31
|
-
"module": "lib
|
|
32
|
+
"module": "lib/index.js",
|
|
33
|
+
"exports": {
|
|
34
|
+
".": {
|
|
35
|
+
"import": "./lib/index.js",
|
|
36
|
+
"default": "./lib/index.js"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
32
39
|
"repository": {
|
|
33
40
|
"type": "git",
|
|
34
41
|
"url": "git+https://github.com/telus/universal-design-system.git"
|
|
@@ -38,13 +45,11 @@
|
|
|
38
45
|
"lint": "telus-standard",
|
|
39
46
|
"lint:fix": "telus-standard --fix",
|
|
40
47
|
"test": "jest",
|
|
41
|
-
"build
|
|
42
|
-
"build:module": "babel src -d lib-module --env-name module",
|
|
43
|
-
"build": "npm run build:main && npm run build:module"
|
|
48
|
+
"build": "babel src -d lib --env-name module"
|
|
44
49
|
},
|
|
45
50
|
"sideEffects": false,
|
|
46
51
|
"standard-engine": {
|
|
47
52
|
"skip": true
|
|
48
53
|
},
|
|
49
|
-
"version": "
|
|
54
|
+
"version": "2.0.1"
|
|
50
55
|
}
|
package/lib-module/Sticky.js
DELETED
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { spacingProps, Box } from '@telus-uds/components-base';
|
|
4
|
-
import throttle from 'lodash.throttle';
|
|
5
|
-
import StickyWrapper from './styles';
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
8
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
function createObserver(ref, callback) {
|
|
10
|
-
let workWithViewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
11
|
-
const observer = new IntersectionObserver(_ref => {
|
|
12
|
-
let [e] = _ref;
|
|
13
|
-
const isNotVisibleInViewport = e.intersectionRatio < 1;
|
|
14
|
-
let correctYPosition = true;
|
|
15
|
-
if (workWithViewport) {
|
|
16
|
-
const {
|
|
17
|
-
y
|
|
18
|
-
} = e.boundingClientRect;
|
|
19
|
-
correctYPosition = y < 0;
|
|
20
|
-
}
|
|
21
|
-
callback(isNotVisibleInViewport && correctYPosition);
|
|
22
|
-
});
|
|
23
|
-
observer.observe(ref.current);
|
|
24
|
-
return observer;
|
|
25
|
-
}
|
|
26
|
-
const Sticky = _ref2 => {
|
|
27
|
-
let {
|
|
28
|
-
children,
|
|
29
|
-
variant = 'default',
|
|
30
|
-
vertical = {
|
|
31
|
-
xs: 0,
|
|
32
|
-
sm: 0,
|
|
33
|
-
lg: 0,
|
|
34
|
-
xl: 0
|
|
35
|
-
},
|
|
36
|
-
horizontal = {
|
|
37
|
-
xs: 0,
|
|
38
|
-
sm: 0,
|
|
39
|
-
lg: 0,
|
|
40
|
-
xl: 0
|
|
41
|
-
},
|
|
42
|
-
workWithViewport = true,
|
|
43
|
-
position = 'top',
|
|
44
|
-
shadow = true,
|
|
45
|
-
onStick = () => {},
|
|
46
|
-
throttleTime = 100,
|
|
47
|
-
throttleConfig = {
|
|
48
|
-
trailing: true
|
|
49
|
-
}
|
|
50
|
-
} = _ref2;
|
|
51
|
-
// Position "bottom" does not support the "hidden" variant.
|
|
52
|
-
if (variant === 'hidden' && position === 'bottom') {
|
|
53
|
-
// eslint-disable-next-line no-param-reassign
|
|
54
|
-
variant = 'default';
|
|
55
|
-
}
|
|
56
|
-
const sentinelTopRef = React.useRef();
|
|
57
|
-
const sentinelBottomRef = React.useRef();
|
|
58
|
-
const stickyWrapperRef = React.useRef();
|
|
59
|
-
const [observer, setObserver] = React.useState();
|
|
60
|
-
const onStickThrottled = throttle(onStick, throttleTime, throttleConfig);
|
|
61
|
-
const sentinelPositionRef = position === 'top' ? sentinelTopRef : sentinelBottomRef;
|
|
62
|
-
React.useEffect(() => {
|
|
63
|
-
if (observer) {
|
|
64
|
-
observer.disconnect();
|
|
65
|
-
}
|
|
66
|
-
if (variant === 'default' || variant === 'hidden') {
|
|
67
|
-
setObserver(createObserver(sentinelPositionRef, intersected => {
|
|
68
|
-
var _stickyWrapperRef$cur, _stickyWrapperRef$cur2;
|
|
69
|
-
(_stickyWrapperRef$cur = stickyWrapperRef.current) === null || _stickyWrapperRef$cur === void 0 ? void 0 : _stickyWrapperRef$cur.classList.toggle('sticky-mode', intersected);
|
|
70
|
-
(_stickyWrapperRef$cur2 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur2 === void 0 ? void 0 : _stickyWrapperRef$cur2.classList.toggle(position, intersected);
|
|
71
|
-
if (intersected) {
|
|
72
|
-
var _stickyWrapperRef$cur3;
|
|
73
|
-
(_stickyWrapperRef$cur3 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur3 === void 0 ? void 0 : _stickyWrapperRef$cur3.classList.remove('pristine');
|
|
74
|
-
}
|
|
75
|
-
onStickThrottled(intersected);
|
|
76
|
-
}, workWithViewport));
|
|
77
|
-
}
|
|
78
|
-
if (variant === 'alternate') {
|
|
79
|
-
setObserver(createObserver(sentinelBottomRef, intersected => {
|
|
80
|
-
var _stickyWrapperRef$cur4, _stickyWrapperRef$cur5;
|
|
81
|
-
(_stickyWrapperRef$cur4 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur4 === void 0 ? void 0 : _stickyWrapperRef$cur4.classList.toggle('sticky-mode', intersected);
|
|
82
|
-
(_stickyWrapperRef$cur5 = stickyWrapperRef.current) === null || _stickyWrapperRef$cur5 === void 0 ? void 0 : _stickyWrapperRef$cur5.classList.toggle('bottom', intersected);
|
|
83
|
-
onStickThrottled(intersected);
|
|
84
|
-
}, workWithViewport));
|
|
85
|
-
}
|
|
86
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
87
|
-
}, [variant]);
|
|
88
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
89
|
-
children: [/*#__PURE__*/_jsx("div", {
|
|
90
|
-
className: "sentinelTop",
|
|
91
|
-
ref: sentinelTopRef
|
|
92
|
-
}), /*#__PURE__*/_jsx(StickyWrapper, {
|
|
93
|
-
className: `${variant} ${variant === 'hidden' ? 'pristine' : ''}`,
|
|
94
|
-
ref: stickyWrapperRef,
|
|
95
|
-
shadow: shadow,
|
|
96
|
-
position: position,
|
|
97
|
-
children: /*#__PURE__*/_jsx("div", {
|
|
98
|
-
className: "sticky-element",
|
|
99
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
100
|
-
vertical: vertical,
|
|
101
|
-
horizontal: horizontal,
|
|
102
|
-
children: children
|
|
103
|
-
})
|
|
104
|
-
})
|
|
105
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
106
|
-
className: "sentinelBottom",
|
|
107
|
-
ref: sentinelBottomRef
|
|
108
|
-
})]
|
|
109
|
-
});
|
|
110
|
-
};
|
|
111
|
-
Sticky.propTypes = {
|
|
112
|
-
/**
|
|
113
|
-
* Sets top and bottom padding using the theme's spacing scale.
|
|
114
|
-
*
|
|
115
|
-
*/
|
|
116
|
-
vertical: spacingProps.types.spacingValue,
|
|
117
|
-
/**
|
|
118
|
-
* Sets left and right padding using the theme's spacing scale.
|
|
119
|
-
*
|
|
120
|
-
*/
|
|
121
|
-
horizontal: spacingProps.types.spacingValue,
|
|
122
|
-
/**
|
|
123
|
-
* Whether the sticky should wait to cross the viewport to stick or not
|
|
124
|
-
* Defaults to true. Set to false for nested container (using overflow)
|
|
125
|
-
*/
|
|
126
|
-
workWithViewport: PropTypes.bool,
|
|
127
|
-
/**
|
|
128
|
-
* Sticky accepts any content as children.
|
|
129
|
-
*/
|
|
130
|
-
children: PropTypes.node.isRequired,
|
|
131
|
-
variant: PropTypes.oneOf(['default', 'alternate', 'hidden']),
|
|
132
|
-
/**
|
|
133
|
-
* Sets whether sticky component is stuck to top or bottom of page.
|
|
134
|
-
* Note: Position "bottom" does not support the "hidden" variant.
|
|
135
|
-
*/
|
|
136
|
-
position: PropTypes.oneOf(['top', 'bottom']),
|
|
137
|
-
/**
|
|
138
|
-
* Adds shadow to sticky component.
|
|
139
|
-
*/
|
|
140
|
-
shadow: PropTypes.bool,
|
|
141
|
-
/**
|
|
142
|
-
* Callback when sticky is stuck to top or bottom of page.
|
|
143
|
-
*/
|
|
144
|
-
onStick: PropTypes.func,
|
|
145
|
-
/**
|
|
146
|
-
* Time in milliseconds to throttle the onStick callback.
|
|
147
|
-
*/
|
|
148
|
-
throttleTime: PropTypes.number,
|
|
149
|
-
/**
|
|
150
|
-
* Throttle configuration.
|
|
151
|
-
*/
|
|
152
|
-
throttleConfig: PropTypes.object
|
|
153
|
-
};
|
|
154
|
-
export default Sticky;
|
package/lib-module/index.js
DELETED
package/lib-module/styles.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
const StickyWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
3
|
-
displayName: "styles__StickyWrapper",
|
|
4
|
-
componentId: "[object Object]__sc-160gk65-0"
|
|
5
|
-
})(["", " &.sticky-mode{&.alternate,&.default{position:-webkit-sticky;position:sticky;z-index:1;", " ", " ", "}&.hidden{animation:0.3s animateIn forwards;", "}}&.alternate{}&.hidden{position:sticky;pointer-events:none;height:0px;min-height:0px;max-height:0px;animation:0.6s animateOut forwards;&.pristine{display:none;}.sticky-element{background:white;", "}}.sticky-element{background:#ffffff;}@keyframes animateIn{from{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}to{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}}@keyframes animateOut{from{height:100%;pointer-events:all;transform:translateY(0);opacity:1;z-index:1;}to{height:0%;pointer-events:none;transform:translateY(-100vh);opacity:0;z-index:-1;}}@keyframes shadowIn{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}}@keyframes shadowOut{from{box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);}to{box-shadow:0px 7px 4px -3px rgb(0,0,0,0);}}"], props => props.position === 'top' ? css(["top:0;"]) : css(["bottom:0;"]), props => props.position === 'top' && css(["top:0px;"]), props => props.position === 'bottom' && css(["bottom:0px;"]), props => props.shadow && css(["box-shadow:0px 7px 4px -3px rgb(0,0,0,0.08);"]), props => props.shadow && css([".sticky-element{animation:0.3s shadowIn forwards;}"]), props => props.shadow && css(["animation:0.6s shadowOut forwards;"]));
|
|
6
|
-
export default StickyWrapper;
|