You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
5.5 KiB
191 lines
5.5 KiB
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
|
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
|
|
var _ref2 = require("rc-util/lib/ref");
|
|
|
|
var _domAlign = require("dom-align");
|
|
|
|
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
|
|
|
|
var _util = require("./util");
|
|
|
|
var _useBuffer3 = _interopRequireDefault(require("./hooks/useBuffer"));
|
|
|
|
/**
|
|
* Removed props:
|
|
* - childrenProps
|
|
*/
|
|
function getElement(func) {
|
|
if (typeof func !== 'function') return null;
|
|
return func();
|
|
}
|
|
|
|
function getPoint(point) {
|
|
if ((0, _typeof2.default)(point) !== 'object' || !point) return null;
|
|
return point;
|
|
}
|
|
|
|
var Align = function Align(_ref, ref) {
|
|
var children = _ref.children,
|
|
disabled = _ref.disabled,
|
|
target = _ref.target,
|
|
align = _ref.align,
|
|
onAlign = _ref.onAlign,
|
|
monitorWindowResize = _ref.monitorWindowResize,
|
|
_ref$monitorBufferTim = _ref.monitorBufferTime,
|
|
monitorBufferTime = _ref$monitorBufferTim === void 0 ? 0 : _ref$monitorBufferTim;
|
|
|
|
var cacheRef = _react.default.useRef({});
|
|
|
|
var nodeRef = _react.default.useRef();
|
|
|
|
var childNode = _react.default.Children.only(children); // ===================== Align ======================
|
|
// We save the props here to avoid closure makes props ood
|
|
|
|
|
|
var forceAlignPropsRef = _react.default.useRef({});
|
|
|
|
forceAlignPropsRef.current.disabled = disabled;
|
|
forceAlignPropsRef.current.target = target;
|
|
forceAlignPropsRef.current.onAlign = onAlign;
|
|
|
|
var _useBuffer = (0, _useBuffer3.default)(function () {
|
|
var _forceAlignPropsRef$c = forceAlignPropsRef.current,
|
|
latestDisabled = _forceAlignPropsRef$c.disabled,
|
|
latestTarget = _forceAlignPropsRef$c.target;
|
|
|
|
if (!latestDisabled && latestTarget) {
|
|
var source = nodeRef.current;
|
|
var result;
|
|
var element = getElement(latestTarget);
|
|
var point = getPoint(latestTarget);
|
|
cacheRef.current.element = element;
|
|
cacheRef.current.point = point; // IE lose focus after element realign
|
|
// We should record activeElement and restore later
|
|
|
|
var _document = document,
|
|
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);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}, monitorBufferTime),
|
|
_useBuffer2 = (0, _slicedToArray2.default)(_useBuffer, 2),
|
|
_forceAlign = _useBuffer2[0],
|
|
cancelForceAlign = _useBuffer2[1]; // ===================== Effect =====================
|
|
// Listen for target updated
|
|
|
|
|
|
var resizeMonitor = _react.default.useRef({
|
|
cancel: function cancel() {}
|
|
}); // Listen for source updated
|
|
|
|
|
|
var sourceResizeMonitor = _react.default.useRef({
|
|
cancel: function cancel() {}
|
|
});
|
|
|
|
_react.default.useEffect(function () {
|
|
var element = getElement(target);
|
|
var point = getPoint(target);
|
|
|
|
if (nodeRef.current !== sourceResizeMonitor.current.element) {
|
|
sourceResizeMonitor.current.cancel();
|
|
sourceResizeMonitor.current.element = nodeRef.current;
|
|
sourceResizeMonitor.current.cancel = (0, _util.monitorResize)(nodeRef.current, _forceAlign);
|
|
}
|
|
|
|
if (cacheRef.current.element !== element || !(0, _util.isSamePoint)(cacheRef.current.point, point)) {
|
|
_forceAlign(); // Add resize observer
|
|
|
|
|
|
if (resizeMonitor.current.element !== element) {
|
|
resizeMonitor.current.cancel();
|
|
resizeMonitor.current.element = element;
|
|
resizeMonitor.current.cancel = (0, _util.monitorResize)(element, _forceAlign);
|
|
}
|
|
}
|
|
}); // Listen for disabled change
|
|
|
|
|
|
_react.default.useEffect(function () {
|
|
if (!disabled) {
|
|
_forceAlign();
|
|
} else {
|
|
cancelForceAlign();
|
|
}
|
|
}, [disabled]); // Listen for window resize
|
|
|
|
|
|
var winResizeRef = _react.default.useRef(null);
|
|
|
|
_react.default.useEffect(function () {
|
|
if (monitorWindowResize) {
|
|
if (!winResizeRef.current) {
|
|
winResizeRef.current = (0, _addEventListener.default)(window, 'resize', _forceAlign);
|
|
}
|
|
} else if (winResizeRef.current) {
|
|
winResizeRef.current.remove();
|
|
winResizeRef.current = null;
|
|
}
|
|
}, [monitorWindowResize]); // Clear all if unmount
|
|
|
|
|
|
_react.default.useEffect(function () {
|
|
return function () {
|
|
resizeMonitor.current.cancel();
|
|
sourceResizeMonitor.current.cancel();
|
|
if (winResizeRef.current) winResizeRef.current.remove();
|
|
cancelForceAlign();
|
|
};
|
|
}, []); // ====================== Ref =======================
|
|
|
|
|
|
_react.default.useImperativeHandle(ref, function () {
|
|
return {
|
|
forceAlign: function forceAlign() {
|
|
return _forceAlign(true);
|
|
}
|
|
};
|
|
}); // ===================== Render =====================
|
|
|
|
|
|
if (_react.default.isValidElement(childNode)) {
|
|
childNode = _react.default.cloneElement(childNode, {
|
|
ref: (0, _ref2.composeRef)(childNode.ref, nodeRef)
|
|
});
|
|
}
|
|
|
|
return childNode;
|
|
};
|
|
|
|
var RefAlign = _react.default.forwardRef(Align);
|
|
|
|
RefAlign.displayName = 'Align';
|
|
var _default = RefAlign;
|
|
exports.default = _default; |