'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _reactDom = require('react-dom'); var _reactDom2 = _interopRequireDefault(_reactDom); var _domAlign = require('dom-align'); var _addEventListener = require('rc-util/lib/Dom/addEventListener'); var _addEventListener2 = _interopRequireDefault(_addEventListener); var _util = require('./util'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function getElement(func) { if (typeof func !== 'function' || !func) return null; return func(); } function getPoint(point) { if (typeof point !== 'object' || !point) return null; return point; } var Align = function (_Component) { (0, _inherits3['default'])(Align, _Component); function Align() { var _ref; var _temp, _this, _ret; (0, _classCallCheck3['default'])(this, Align); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = Align.__proto__ || Object.getPrototypeOf(Align)).call.apply(_ref, [this].concat(args))), _this), _this.forceAlign = function () { var _this$props = _this.props, disabled = _this$props.disabled, target = _this$props.target, align = _this$props.align, onAlign = _this$props.onAlign; if (!disabled && target) { var source = _reactDom2['default'].findDOMNode(_this); var result = void 0; var element = getElement(target); var point = getPoint(target); // IE lose focus after element realign // We should record activeElement and restore later var activeElement = document.activeElement; if (element) { result = (0, _domAlign.alignElement)(source, element, align); } else if (point) { result = (0, _domAlign.alignPoint)(source, point, align); } (0, _util.restoreFocus)(activeElement, source); if (onAlign) { onAlign(source, result); } } }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret); } (0, _createClass3['default'])(Align, [{ key: 'componentDidMount', value: function componentDidMount() { var props = this.props; // if parent ref not attached .... use document.getElementById this.forceAlign(); if (!props.disabled && props.monitorWindowResize) { this.startMonitorWindowResize(); } } }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps) { var reAlign = false; var props = this.props; if (!props.disabled) { var source = _reactDom2['default'].findDOMNode(this); var sourceRect = source ? source.getBoundingClientRect() : null; if (prevProps.disabled) { reAlign = true; } else { var lastElement = getElement(prevProps.target); var currentElement = getElement(props.target); var lastPoint = getPoint(prevProps.target); var currentPoint = getPoint(props.target); if ((0, _util.isWindow)(lastElement) && (0, _util.isWindow)(currentElement)) { // Skip if is window reAlign = false; } else if (lastElement !== currentElement || // Element change lastElement && !currentElement && currentPoint || // Change from element to point lastPoint && currentPoint && currentElement || // Change from point to element currentPoint && !(0, _util.isSamePoint)(lastPoint, currentPoint)) { reAlign = true; } // If source element size changed var preRect = this.sourceRect || {}; if (!reAlign && source && (!(0, _util.isSimilarValue)(preRect.width, sourceRect.width) || !(0, _util.isSimilarValue)(preRect.height, sourceRect.height))) { reAlign = true; } } this.sourceRect = sourceRect; } if (reAlign) { this.forceAlign(); } if (props.monitorWindowResize && !props.disabled) { this.startMonitorWindowResize(); } else { this.stopMonitorWindowResize(); } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { this.stopMonitorWindowResize(); } }, { key: 'startMonitorWindowResize', value: function startMonitorWindowResize() { if (!this.resizeHandler) { this.bufferMonitor = (0, _util.buffer)(this.forceAlign, this.props.monitorBufferTime); this.resizeHandler = (0, _addEventListener2['default'])(window, 'resize', this.bufferMonitor); } } }, { key: 'stopMonitorWindowResize', value: function stopMonitorWindowResize() { if (this.resizeHandler) { this.bufferMonitor.clear(); this.resizeHandler.remove(); this.resizeHandler = null; } } }, { key: 'render', value: function render() { var _this2 = this; var _props = this.props, childrenProps = _props.childrenProps, children = _props.children; var child = _react2['default'].Children.only(children); if (childrenProps) { var newProps = {}; var propList = Object.keys(childrenProps); propList.forEach(function (prop) { newProps[prop] = _this2.props[childrenProps[prop]]; }); return _react2['default'].cloneElement(child, newProps); } return child; } }]); return Align; }(_react.Component); Align.propTypes = { childrenProps: _propTypes2['default'].object, align: _propTypes2['default'].object.isRequired, target: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].shape({ clientX: _propTypes2['default'].number, clientY: _propTypes2['default'].number, pageX: _propTypes2['default'].number, pageY: _propTypes2['default'].number })]), onAlign: _propTypes2['default'].func, monitorBufferTime: _propTypes2['default'].number, monitorWindowResize: _propTypes2['default'].bool, disabled: _propTypes2['default'].bool, children: _propTypes2['default'].any }; Align.defaultProps = { target: function target() { return window; }, monitorBufferTime: 50, monitorWindowResize: false, disabled: false }; exports['default'] = Align; module.exports = exports['default'];