1 | "use strict";
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.default = void 0;
|
5 |
|
6 | var _react = _interopRequireWildcard(require("react"));
|
7 |
|
8 | var _reactDom = _interopRequireDefault(require("react-dom"));
|
9 |
|
10 | var _classnames = _interopRequireDefault(require("classnames"));
|
11 |
|
12 | var _utils = require("./utils");
|
13 |
|
14 | var _offset = _interopRequireDefault(require("./offset"));
|
15 |
|
16 | var _windowScroll = _interopRequireDefault(require("window-scroll"));
|
17 |
|
18 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
19 |
|
20 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
21 |
|
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 |
|
24 | function _inheritsLoose(subClass, superClass) { subClass.prototype.__proto__ = superClass && superClass.prototype; subClass.__proto__ = superClass; }
|
25 |
|
26 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
27 |
|
28 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
29 |
|
30 | function isValid(d) {
|
31 | return d !== undefined && d !== null;
|
32 | }
|
33 |
|
34 | function getNum(val) {
|
35 | return val !== undefined ? parseInt(val) : 0;
|
36 | }
|
37 |
|
38 | function getValidVal() {
|
39 | for (var i = 0; i < arguments.length; i++) {
|
40 | if (isValid(i < 0 || arguments.length <= i ? undefined : arguments[i])) {
|
41 | return i < 0 || arguments.length <= i ? undefined : arguments[i];
|
42 | }
|
43 | }
|
44 | }
|
45 |
|
46 | function isFn(val) {
|
47 | return typeof val === "function";
|
48 | }
|
49 |
|
50 | var Sticky =
|
51 |
|
52 | function (_Component) {
|
53 | function Sticky() {
|
54 | var _temp, _this;
|
55 |
|
56 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
57 | args[_key] = arguments[_key];
|
58 | }
|
59 |
|
60 | return (_temp = _this = _Component.call.apply(_Component, [this].concat(args)) || this, _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
|
61 | isSticky: false,
|
62 | window: {
|
63 | height: window.innerHeight,
|
64 | width: window.innerWidth
|
65 | }
|
66 | }), _temp) || _assertThisInitialized(_this);
|
67 | }
|
68 |
|
69 | var _proto = Sticky.prototype;
|
70 |
|
71 | _proto.getContainerNode = function getContainerNode() {
|
72 | var stickyContainer = this.stickyContainer;
|
73 | var findDOMNode = _reactDom.default.findDOMNode;
|
74 | this.container = stickyContainer;
|
75 | return findDOMNode(stickyContainer);
|
76 | };
|
77 |
|
78 | _proto.componentDidMount = function componentDidMount() {
|
79 | var _this2 = this;
|
80 |
|
81 | this.getContainerNode();
|
82 | this.initCloneContainerNode();
|
83 | this.registerEvents();
|
84 | setTimeout(function () {
|
85 | _this2.initSticky();
|
86 | });
|
87 | };
|
88 |
|
89 | _proto.initSticky = function initSticky() {
|
90 | var _this3 = this;
|
91 |
|
92 | this.ifSticky(function () {
|
93 | _this3.sticky();
|
94 | }, function () {
|
95 | _this3.sticky(false);
|
96 | });
|
97 | };
|
98 |
|
99 | _proto.componentWillUnmount = function componentWillUnmount() {
|
100 | var _this4 = this;
|
101 |
|
102 | this.sticky(false);
|
103 | this.cancelEvents();
|
104 | setTimeout(function () {
|
105 | _this4.wrapperNode.remove();
|
106 | });
|
107 | };
|
108 |
|
109 | _proto.onScrollHandler = function onScrollHandler(context) {
|
110 | var createState = context.props.createState;
|
111 |
|
112 | var handler = context.bindHandler || function () {
|
113 | requestAnimationFrame(function () {
|
114 | if (createState) {
|
115 | var state = createState();
|
116 |
|
117 | if (state) {
|
118 | context.setState(state);
|
119 | }
|
120 | }
|
121 |
|
122 | context.ifSticky(function () {
|
123 | context.setState({
|
124 | isSticky: true,
|
125 | window: {
|
126 | height: window.innerHeight,
|
127 | width: window.innerWidth
|
128 | }
|
129 | });
|
130 | context.sticky();
|
131 | }, function () {
|
132 | context.setState({
|
133 | isSticky: false,
|
134 | window: {
|
135 | height: window.innerHeight,
|
136 | width: window.innerWidth
|
137 | }
|
138 | });
|
139 | context.sticky(false);
|
140 | });
|
141 | });
|
142 | };
|
143 |
|
144 | context.bindHandler = handler;
|
145 | return handler;
|
146 | };
|
147 |
|
148 | _proto.setStyle = function setStyle(node, styles) {
|
149 | var style = node.style;
|
150 | Object.keys(styles).forEach(function (name) {
|
151 | style[name] = styles[name];
|
152 | });
|
153 | };
|
154 |
|
155 | _proto.sticky = function sticky(isSticky) {
|
156 | if (isSticky === void 0) {
|
157 | isSticky = true;
|
158 | }
|
159 |
|
160 | var positionNode = this.getPositionNode();
|
161 | var nodeData = this.getNodeData(positionNode);
|
162 | var self = this;
|
163 |
|
164 | if (this.props.edge == "top") {
|
165 | if (isSticky) {
|
166 | this.setStyle(this.container, _extends({
|
167 | position: "fixed",
|
168 | width: nodeData.width + "px",
|
169 | height: nodeData.height + "px",
|
170 | top: this.props.triggerDistance + "px",
|
171 | left: nodeData.offsetLeft + "px",
|
172 | zIndex: self.props.zIndex || "100000"
|
173 | }, this.props.stickiedStyle));
|
174 | if (this.sticking) return;
|
175 | this.sticking = true;
|
176 | } else {
|
177 | if (!this.sticking) return;
|
178 | self.setStyle(self.container, _extends({
|
179 | left: "",
|
180 | zIndex: "",
|
181 | width: "",
|
182 | height: "",
|
183 | position: "",
|
184 | top: ""
|
185 | }, self.props.unstickiedStyle));
|
186 | this.sticking = false;
|
187 | }
|
188 | } else {
|
189 | if (isSticky) {
|
190 | this.setStyle(this.container, _extends({
|
191 | position: "fixed",
|
192 | width: nodeData.width + "px",
|
193 | height: nodeData.height + "px",
|
194 | bottom: self.props.triggerDistance + "px",
|
195 | left: nodeData.offsetLeft + "px",
|
196 | zIndex: self.props.zIndex || "100000"
|
197 | }, this.props.stickiedStyle));
|
198 | if (this.sticking) return;
|
199 | this.sticking = true;
|
200 | } else {
|
201 | if (!this.sticking) return;
|
202 | this.setStyle(this.container, {
|
203 | bottom: self.props.triggerDistance + "px"
|
204 | });
|
205 | var containerNode = this.container;
|
206 | self.setStyle(self.container, _extends({
|
207 | left: "",
|
208 | zIndex: "",
|
209 | width: "",
|
210 | height: "",
|
211 | position: "",
|
212 | bottom: ""
|
213 | }, self.props.unstickiedStyle));
|
214 | this.sticking = false;
|
215 | }
|
216 | }
|
217 | };
|
218 |
|
219 | _proto.getPositionNode = function getPositionNode() {
|
220 | var node = null;
|
221 | if (this.sticking) node = this.wrapperNode;else node = this.container;
|
222 | return node;
|
223 | };
|
224 |
|
225 | _proto.ifSticky = function ifSticky(ok, faild) {
|
226 | var positionNode = this.getPositionNode();
|
227 | var nodeData = this.getNodeData(positionNode);
|
228 | var winData = this.getNodeData(window);
|
229 | var self = this;
|
230 | var edge = self.props.edge;
|
231 | var getStickyBoundary = self.props.getStickyBoundary;
|
232 | var triggerDistance = self.props.triggerDistance;
|
233 | var isNotSticky = this.state.notSticky;
|
234 |
|
235 | if (isFn(getStickyBoundary)) {
|
236 | if (!getStickyBoundary()) return faild.call(self);
|
237 | }
|
238 |
|
239 | if (isNotSticky) {
|
240 | return faild.call(self);
|
241 | }
|
242 |
|
243 | if (edge != "top") {
|
244 | if (winData.scrollTop + winData.height < nodeData.offsetTop + nodeData.height + triggerDistance) {
|
245 | return ok.call(self);
|
246 | }
|
247 | } else {
|
248 | if (winData.scrollTop > nodeData.offsetTop - triggerDistance) {
|
249 | return ok.call(self);
|
250 | }
|
251 | }
|
252 |
|
253 | faild.call(self);
|
254 | };
|
255 |
|
256 | _proto.getNodeData = function getNodeData(node) {
|
257 | var clientHeight = node.clientHeight,
|
258 | clientWidth = node.clientWidth,
|
259 | innerHeight = node.innerHeight,
|
260 | innerWidth = node.innerWidth;
|
261 |
|
262 | if (node !== window) {
|
263 | var offset = (0, _offset.default)(node);
|
264 | var offsetLeft = offset ? offset.left : 0;
|
265 | var offsetTop = offset ? offset.top : 0;
|
266 | var rect = node.getBoundingClientRect();
|
267 | var style = (0, _utils.getCompStyle)(node);
|
268 | return {
|
269 | offsetLeft: offsetLeft - getNum(style["margin-left"]),
|
270 | offsetTop: offsetTop - getNum(style["margin-top"]),
|
271 | width: rect.width,
|
272 | height: rect.height
|
273 | };
|
274 | } else {
|
275 | return {
|
276 | height: window.innerHeight,
|
277 | width: window.innerWidth,
|
278 | scrollTop: window.pageYOffset,
|
279 | scrollLeft: window.pageXOffset
|
280 | };
|
281 | }
|
282 |
|
283 | return this.nodeData;
|
284 | };
|
285 |
|
286 | _proto.initCloneContainerNode = function initCloneContainerNode() {
|
287 | if (this.wrapperNode) return this.wrapperNode;
|
288 | var oldNode = this.getContainerNode();
|
289 | var nodeData = this.getNodeData(oldNode);
|
290 | this.wrapperNode = document.createElement("div");
|
291 | this.wrapperNode.style.height = nodeData.height + "px";
|
292 | this.wrapperNode.classList.add("sticky-wrapper");
|
293 | oldNode.parentNode.insertBefore(this.wrapperNode, oldNode);
|
294 | this.wrapperNode.appendChild(oldNode);
|
295 | };
|
296 |
|
297 | _proto.cancelEvents = function cancelEvents() {
|
298 | window.removeEventListener("scroll", this.onScrollHandler(this));
|
299 | window.removeEventListener("resize", this.onScrollHandler(this));
|
300 | };
|
301 |
|
302 | _proto.registerEvents = function registerEvents() {
|
303 | window.addEventListener("scroll", this.onScrollHandler(this));
|
304 | window.addEventListener("resize", this.onScrollHandler(this));
|
305 | };
|
306 |
|
307 | _proto.renderContainer = function renderContainer() {
|
308 | var _this5 = this;
|
309 |
|
310 | var children = this.props.children;
|
311 | return _react.default.createElement("div", {
|
312 | ref: function ref(inst) {
|
313 | if (inst) _this5.stickyContainer = inst;
|
314 | },
|
315 | className: "sticky-container",
|
316 | style: this.props.style
|
317 | }, typeof children === "function" ? children(this.state) : children);
|
318 | };
|
319 |
|
320 | _proto.render = function render() {
|
321 | return this.renderContainer();
|
322 | };
|
323 |
|
324 | _inheritsLoose(Sticky, _Component);
|
325 |
|
326 | return Sticky;
|
327 | }(_react.Component);
|
328 |
|
329 | _defineProperty(Sticky, "defaultProps", {
|
330 | edge: "bottom",
|
331 | triggerDistance: 0
|
332 | });
|
333 |
|
334 | var _default = Sticky;
|
335 | exports.default = _default; |
\ | No newline at end of file |