1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | var _typeof3 = require("@babel/runtime/helpers/typeof");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15 |
|
16 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17 |
|
18 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
19 |
|
20 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
21 |
|
22 | var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
23 |
|
24 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
25 |
|
26 | var React = _interopRequireWildcard(require("react"));
|
27 |
|
28 | var _classnames = _interopRequireDefault(require("classnames"));
|
29 |
|
30 | var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
|
31 |
|
32 | var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
|
33 |
|
34 | var _configProvider = require("../config-provider");
|
35 |
|
36 | var _throttleByAnimationFrame = require("../_util/throttleByAnimationFrame");
|
37 |
|
38 | var _utils = require("./utils");
|
39 |
|
40 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
41 |
|
42 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
|
43 |
|
44 | var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
|
45 | var c = arguments.length,
|
46 | r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
|
47 | d;
|
48 | if ((typeof Reflect === "undefined" ? "undefined" : (0, _typeof2["default"])(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
|
49 | if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
50 | }
|
51 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
52 | };
|
53 |
|
54 | function getDefaultTarget() {
|
55 | return typeof window !== 'undefined' ? window : null;
|
56 | }
|
57 |
|
58 | var AffixStatus;
|
59 |
|
60 | (function (AffixStatus) {
|
61 | AffixStatus[AffixStatus["None"] = 0] = "None";
|
62 | AffixStatus[AffixStatus["Prepare"] = 1] = "Prepare";
|
63 | })(AffixStatus || (AffixStatus = {}));
|
64 |
|
65 | var Affix = function (_React$Component) {
|
66 | (0, _inherits2["default"])(Affix, _React$Component);
|
67 |
|
68 | var _super = (0, _createSuper2["default"])(Affix);
|
69 |
|
70 | function Affix() {
|
71 | var _this;
|
72 |
|
73 | (0, _classCallCheck2["default"])(this, Affix);
|
74 | _this = _super.apply(this, arguments);
|
75 | _this.state = {
|
76 | status: AffixStatus.None,
|
77 | lastAffix: false,
|
78 | prevTarget: null
|
79 | };
|
80 |
|
81 | _this.getOffsetTop = function () {
|
82 | var offsetBottom = _this.props.offsetBottom;
|
83 | var offsetTop = _this.props.offsetTop;
|
84 |
|
85 | if (offsetBottom === undefined && offsetTop === undefined) {
|
86 | offsetTop = 0;
|
87 | }
|
88 |
|
89 | return offsetTop;
|
90 | };
|
91 |
|
92 | _this.getOffsetBottom = function () {
|
93 | return _this.props.offsetBottom;
|
94 | };
|
95 |
|
96 | _this.savePlaceholderNode = function (node) {
|
97 | _this.placeholderNode = node;
|
98 | };
|
99 |
|
100 | _this.saveFixedNode = function (node) {
|
101 | _this.fixedNode = node;
|
102 | };
|
103 |
|
104 |
|
105 | _this.measure = function () {
|
106 | var _this$state = _this.state,
|
107 | status = _this$state.status,
|
108 | lastAffix = _this$state.lastAffix;
|
109 | var onChange = _this.props.onChange;
|
110 |
|
111 | var targetFunc = _this.getTargetFunc();
|
112 |
|
113 | if (status !== AffixStatus.Prepare || !_this.fixedNode || !_this.placeholderNode || !targetFunc) {
|
114 | return;
|
115 | }
|
116 |
|
117 | var offsetTop = _this.getOffsetTop();
|
118 |
|
119 | var offsetBottom = _this.getOffsetBottom();
|
120 |
|
121 | var targetNode = targetFunc();
|
122 |
|
123 | if (!targetNode) {
|
124 | return;
|
125 | }
|
126 |
|
127 | var newState = {
|
128 | status: AffixStatus.None
|
129 | };
|
130 | var targetRect = (0, _utils.getTargetRect)(targetNode);
|
131 | var placeholderReact = (0, _utils.getTargetRect)(_this.placeholderNode);
|
132 | var fixedTop = (0, _utils.getFixedTop)(placeholderReact, targetRect, offsetTop);
|
133 | var fixedBottom = (0, _utils.getFixedBottom)(placeholderReact, targetRect, offsetBottom);
|
134 |
|
135 | if (fixedTop !== undefined) {
|
136 | newState.affixStyle = {
|
137 | position: 'fixed',
|
138 | top: fixedTop,
|
139 | width: placeholderReact.width,
|
140 | height: placeholderReact.height
|
141 | };
|
142 | newState.placeholderStyle = {
|
143 | width: placeholderReact.width,
|
144 | height: placeholderReact.height
|
145 | };
|
146 | } else if (fixedBottom !== undefined) {
|
147 | newState.affixStyle = {
|
148 | position: 'fixed',
|
149 | bottom: fixedBottom,
|
150 | width: placeholderReact.width,
|
151 | height: placeholderReact.height
|
152 | };
|
153 | newState.placeholderStyle = {
|
154 | width: placeholderReact.width,
|
155 | height: placeholderReact.height
|
156 | };
|
157 | }
|
158 |
|
159 | newState.lastAffix = !!newState.affixStyle;
|
160 |
|
161 | if (onChange && lastAffix !== newState.lastAffix) {
|
162 | onChange(newState.lastAffix);
|
163 | }
|
164 |
|
165 | _this.setState(newState);
|
166 | };
|
167 |
|
168 |
|
169 | _this.prepareMeasure = function () {
|
170 |
|
171 | _this.setState({
|
172 | status: AffixStatus.Prepare,
|
173 | affixStyle: undefined,
|
174 | placeholderStyle: undefined
|
175 | });
|
176 |
|
177 |
|
178 | if (process.env.NODE_ENV === 'test') {
|
179 | var onTestUpdatePosition = _this.props.onTestUpdatePosition;
|
180 | onTestUpdatePosition === null || onTestUpdatePosition === void 0 ? void 0 : onTestUpdatePosition();
|
181 | }
|
182 | };
|
183 |
|
184 |
|
185 | _this.render = function () {
|
186 | var getPrefixCls = _this.context.getPrefixCls;
|
187 | var _this$state2 = _this.state,
|
188 | affixStyle = _this$state2.affixStyle,
|
189 | placeholderStyle = _this$state2.placeholderStyle;
|
190 | var _this$props = _this.props,
|
191 | prefixCls = _this$props.prefixCls,
|
192 | children = _this$props.children;
|
193 | var className = (0, _classnames["default"])((0, _defineProperty2["default"])({}, getPrefixCls('affix', prefixCls), !!affixStyle));
|
194 | var props = (0, _omit["default"])(_this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
|
195 |
|
196 | if (process.env.NODE_ENV === 'test') {
|
197 | props = (0, _omit["default"])(props, ['onTestUpdatePosition']);
|
198 | }
|
199 |
|
200 | return React.createElement(_rcResizeObserver["default"], {
|
201 | onResize: function onResize() {
|
202 | _this.updatePosition();
|
203 | }
|
204 | }, React.createElement("div", (0, _extends2["default"])({}, props, {
|
205 | ref: _this.savePlaceholderNode
|
206 | }), affixStyle && React.createElement("div", {
|
207 | style: placeholderStyle,
|
208 | "aria-hidden": "true"
|
209 | }), React.createElement("div", {
|
210 | className: className,
|
211 | ref: _this.saveFixedNode,
|
212 | style: affixStyle
|
213 | }, React.createElement(_rcResizeObserver["default"], {
|
214 | onResize: function onResize() {
|
215 | _this.updatePosition();
|
216 | }
|
217 | }, children))));
|
218 | };
|
219 |
|
220 | return _this;
|
221 | }
|
222 |
|
223 | (0, _createClass2["default"])(Affix, [{
|
224 | key: "getTargetFunc",
|
225 | value: function getTargetFunc() {
|
226 | var getTargetContainer = this.context.getTargetContainer;
|
227 | var target = this.props.target;
|
228 |
|
229 | if (target !== undefined) {
|
230 | return target;
|
231 | }
|
232 |
|
233 | return getTargetContainer || getDefaultTarget;
|
234 | }
|
235 |
|
236 | }, {
|
237 | key: "componentDidMount",
|
238 | value: function componentDidMount() {
|
239 | var _this2 = this;
|
240 |
|
241 | var targetFunc = this.getTargetFunc();
|
242 |
|
243 | if (targetFunc) {
|
244 |
|
245 |
|
246 | this.timeout = setTimeout(function () {
|
247 | (0, _utils.addObserveTarget)(targetFunc(), _this2);
|
248 |
|
249 | _this2.updatePosition();
|
250 | });
|
251 | }
|
252 | }
|
253 | }, {
|
254 | key: "componentDidUpdate",
|
255 | value: function componentDidUpdate(prevProps) {
|
256 | var prevTarget = this.state.prevTarget;
|
257 | var targetFunc = this.getTargetFunc();
|
258 | var newTarget = null;
|
259 |
|
260 | if (targetFunc) {
|
261 | newTarget = targetFunc() || null;
|
262 | }
|
263 |
|
264 | if (prevTarget !== newTarget) {
|
265 | (0, _utils.removeObserveTarget)(this);
|
266 |
|
267 | if (newTarget) {
|
268 | (0, _utils.addObserveTarget)(newTarget, this);
|
269 |
|
270 | this.updatePosition();
|
271 | }
|
272 |
|
273 |
|
274 | this.setState({
|
275 | prevTarget: newTarget
|
276 | });
|
277 | }
|
278 |
|
279 | if (prevProps.offsetTop !== this.props.offsetTop || prevProps.offsetBottom !== this.props.offsetBottom) {
|
280 | this.updatePosition();
|
281 | }
|
282 |
|
283 | this.measure();
|
284 | }
|
285 | }, {
|
286 | key: "componentWillUnmount",
|
287 | value: function componentWillUnmount() {
|
288 | clearTimeout(this.timeout);
|
289 | (0, _utils.removeObserveTarget)(this);
|
290 | this.updatePosition.cancel();
|
291 |
|
292 | this.lazyUpdatePosition.cancel();
|
293 | }
|
294 |
|
295 | }, {
|
296 | key: "updatePosition",
|
297 | value: function updatePosition() {
|
298 | this.prepareMeasure();
|
299 | }
|
300 | }, {
|
301 | key: "lazyUpdatePosition",
|
302 | value: function lazyUpdatePosition() {
|
303 | var targetFunc = this.getTargetFunc();
|
304 | var affixStyle = this.state.affixStyle;
|
305 |
|
306 | if (targetFunc && affixStyle) {
|
307 | var offsetTop = this.getOffsetTop();
|
308 | var offsetBottom = this.getOffsetBottom();
|
309 | var targetNode = targetFunc();
|
310 |
|
311 | if (targetNode && this.placeholderNode) {
|
312 | var targetRect = (0, _utils.getTargetRect)(targetNode);
|
313 | var placeholderReact = (0, _utils.getTargetRect)(this.placeholderNode);
|
314 | var fixedTop = (0, _utils.getFixedTop)(placeholderReact, targetRect, offsetTop);
|
315 | var fixedBottom = (0, _utils.getFixedBottom)(placeholderReact, targetRect, offsetBottom);
|
316 |
|
317 | if (fixedTop !== undefined && affixStyle.top === fixedTop || fixedBottom !== undefined && affixStyle.bottom === fixedBottom) {
|
318 | return;
|
319 | }
|
320 | }
|
321 | }
|
322 |
|
323 |
|
324 | this.prepareMeasure();
|
325 | }
|
326 | }]);
|
327 | return Affix;
|
328 | }(React.Component);
|
329 |
|
330 | Affix.contextType = _configProvider.ConfigContext;
|
331 |
|
332 | __decorate([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], Affix.prototype, "updatePosition", null);
|
333 |
|
334 | __decorate([(0, _throttleByAnimationFrame.throttleByAnimationFrameDecorator)()], Affix.prototype, "lazyUpdatePosition", null);
|
335 |
|
336 | var _default = Affix;
|
337 | exports["default"] = _default; |
\ | No newline at end of file |