1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.default = undefined;
|
5 |
|
6 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
7 |
|
8 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
9 |
|
10 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
11 |
|
12 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
13 |
|
14 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
15 |
|
16 | var _inherits3 = _interopRequireDefault(_inherits2);
|
17 |
|
18 | var _class, _temp;
|
19 |
|
20 | var _react = require('react');
|
21 |
|
22 | var _reactDom = require('react-dom');
|
23 |
|
24 | var _propTypes = require('prop-types');
|
25 |
|
26 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
27 |
|
28 | var _resizeObserverPolyfill = require('resize-observer-polyfill');
|
29 |
|
30 | var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
|
31 |
|
32 | var _util = require('../util');
|
33 |
|
34 | var _position = require('./utils/position');
|
35 |
|
36 | var _position2 = _interopRequireDefault(_position);
|
37 |
|
38 | var _findNode = require('./utils/find-node');
|
39 |
|
40 | var _findNode2 = _interopRequireDefault(_findNode);
|
41 |
|
42 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
43 |
|
44 | var noop = _util.func.noop,
|
45 | bindCtx = _util.func.bindCtx;
|
46 | var getStyle = _util.dom.getStyle;
|
47 |
|
48 | var place = _position2.default.place;
|
49 |
|
50 | var Position = (_temp = _class = function (_Component) {
|
51 | (0, _inherits3.default)(Position, _Component);
|
52 |
|
53 | function Position(props) {
|
54 | (0, _classCallCheck3.default)(this, Position);
|
55 |
|
56 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
57 |
|
58 | _this.observe = function () {
|
59 | var contentNode = _this.getContentNode();
|
60 | contentNode && _this.resizeObserver.observe(contentNode);
|
61 | };
|
62 |
|
63 | _this.unobserve = function () {
|
64 | _this.resizeObserver.disconnect();
|
65 | };
|
66 |
|
67 | bindCtx(_this, ['handleResize']);
|
68 |
|
69 | _this.resizeObserver = new _resizeObserverPolyfill2.default(_this.handleResize);
|
70 | return _this;
|
71 | }
|
72 |
|
73 | Position.prototype.componentDidMount = function componentDidMount() {
|
74 | this.setPosition();
|
75 |
|
76 | if (this.props.needListenResize) {
|
77 | _util.events.on(window, 'resize', this.handleResize);
|
78 | this.observe();
|
79 | }
|
80 | };
|
81 |
|
82 | Position.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
83 | var props = this.props;
|
84 |
|
85 |
|
86 | if ('align' in props && props.align !== prevProps.align || props.shouldUpdatePosition) {
|
87 | this.shouldUpdatePosition = true;
|
88 | }
|
89 |
|
90 | if (this.shouldUpdatePosition) {
|
91 | clearTimeout(this.resizeTimeout);
|
92 |
|
93 | this.setPosition();
|
94 | this.shouldUpdatePosition = false;
|
95 | }
|
96 | };
|
97 |
|
98 | Position.prototype.componentWillUnmount = function componentWillUnmount() {
|
99 | if (this.props.needListenResize) {
|
100 | _util.events.off(window, 'resize', this.handleResize);
|
101 | this.unobserve();
|
102 | }
|
103 |
|
104 | clearTimeout(this.resizeTimeout);
|
105 | };
|
106 |
|
107 | Position.prototype.setPosition = function setPosition() {
|
108 | var _props = this.props,
|
109 | align = _props.align,
|
110 | offset = _props.offset,
|
111 | beforePosition = _props.beforePosition,
|
112 | onPosition = _props.onPosition,
|
113 | needAdjust = _props.needAdjust,
|
114 | container = _props.container,
|
115 | rtl = _props.rtl,
|
116 | pinFollowBaseElementWhenFixed = _props.pinFollowBaseElementWhenFixed,
|
117 | autoFit = _props.autoFit;
|
118 |
|
119 |
|
120 | beforePosition();
|
121 |
|
122 | var contentNode = this.getContentNode();
|
123 | var targetNode = this.getTargetNode();
|
124 |
|
125 | if (contentNode && targetNode) {
|
126 | var resultAlign = place({
|
127 | pinElement: contentNode,
|
128 | baseElement: targetNode,
|
129 | pinFollowBaseElementWhenFixed: pinFollowBaseElementWhenFixed,
|
130 | align: align,
|
131 | offset: offset,
|
132 | autoFit: autoFit,
|
133 | container: container,
|
134 | needAdjust: needAdjust,
|
135 | isRtl: rtl
|
136 | });
|
137 | var top = getStyle(contentNode, 'top');
|
138 | var left = getStyle(contentNode, 'left');
|
139 |
|
140 | onPosition({
|
141 | align: resultAlign.split(' '),
|
142 | top: top,
|
143 | left: left
|
144 | }, contentNode);
|
145 | }
|
146 | };
|
147 |
|
148 | Position.prototype.getContentNode = function getContentNode() {
|
149 | try {
|
150 | return (0, _reactDom.findDOMNode)(this);
|
151 | } catch (err) {
|
152 | return null;
|
153 | }
|
154 | };
|
155 |
|
156 | Position.prototype.getTargetNode = function getTargetNode() {
|
157 | var target = this.props.target;
|
158 |
|
159 |
|
160 | return target === _position2.default.VIEWPORT ? _position2.default.VIEWPORT : (0, _findNode2.default)(target, this.props);
|
161 | };
|
162 |
|
163 | Position.prototype.handleResize = function handleResize() {
|
164 | var _this2 = this;
|
165 |
|
166 | clearTimeout(this.resizeTimeout);
|
167 |
|
168 | this.resizeTimeout = setTimeout(function () {
|
169 | _this2.setPosition();
|
170 | }, 200);
|
171 | };
|
172 |
|
173 | Position.prototype.render = function render() {
|
174 | return _react.Children.only(this.props.children);
|
175 | };
|
176 |
|
177 | return Position;
|
178 | }(_react.Component), _class.VIEWPORT = _position2.default.VIEWPORT, _class.propTypes = {
|
179 | children: _propTypes2.default.node,
|
180 | target: _propTypes2.default.any,
|
181 | container: _propTypes2.default.any,
|
182 | align: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
|
183 | offset: _propTypes2.default.array,
|
184 | beforePosition: _propTypes2.default.func,
|
185 | onPosition: _propTypes2.default.func,
|
186 | needAdjust: _propTypes2.default.bool,
|
187 | autoFit: _propTypes2.default.bool,
|
188 | needListenResize: _propTypes2.default.bool,
|
189 | shouldUpdatePosition: _propTypes2.default.bool,
|
190 | rtl: _propTypes2.default.bool,
|
191 | pinFollowBaseElementWhenFixed: _propTypes2.default.bool
|
192 | }, _class.defaultProps = {
|
193 | align: 'tl bl',
|
194 | offset: [0, 0],
|
195 | beforePosition: noop,
|
196 | onPosition: noop,
|
197 | needAdjust: true,
|
198 | autoFit: false,
|
199 | needListenResize: true,
|
200 | shouldUpdatePosition: false,
|
201 | rtl: false
|
202 | }, _temp);
|
203 | Position.displayName = 'Position';
|
204 | exports.default = Position;
|
205 | module.exports = exports['default']; |
\ | No newline at end of file |