choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
325 lines (282 loc) • 10.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import shallowequal from 'shallowequal';
import omit from 'lodash/omit';
import noop from 'lodash/noop';
import getScroll from '../_util/getScroll';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
import addEventListener from '../_util/addEventListener';
import ConfigContext from '../config-provider/ConfigContext';
function getTargetRect(target) {
return target !== window ? target.getBoundingClientRect() : {
top: 0,
left: 0,
bottom: 0
};
}
function getOffset(element, target) {
var elemRect = element.getBoundingClientRect();
var targetRect = getTargetRect(target);
var scrollTop = getScroll(target, true);
var scrollLeft = getScroll(target, false);
var docElem = window.document.body;
var clientTop = docElem.clientTop || 0;
var clientLeft = docElem.clientLeft || 0;
return {
top: elemRect.top - targetRect.top + scrollTop - clientTop,
left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
width: elemRect.width,
height: elemRect.height
};
}
function getDefaultTarget() {
return typeof window !== 'undefined' ? window : null;
}
var Affix = /*#__PURE__*/function (_Component) {
_inherits(Affix, _Component);
var _super = _createSuper(Affix);
function Affix() {
var _this;
_classCallCheck(this, Affix);
_this = _super.apply(this, arguments);
_this.state = {
affixStyle: undefined,
placeholderStyle: undefined
};
_this.eventHandlers = {};
_this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
_this.saveFixedNode = function (node) {
_this.fixedNode = node;
};
_this.savePlaceholderNode = function (node) {
_this.placeholderNode = node;
};
return _this;
}
_createClass(Affix, [{
key: "setAffixStyle",
value: function setAffixStyle(e, affixStyle) {
var _this2 = this;
var _this$props = this.props,
_this$props$onChange = _this$props.onChange,
onChange = _this$props$onChange === void 0 ? noop : _this$props$onChange,
_this$props$target = _this$props.target,
target = _this$props$target === void 0 ? getDefaultTarget : _this$props$target;
var originalAffixStyle = this.state.affixStyle;
var isWindow = target() === window;
if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
return;
}
if (shallowequal(affixStyle, originalAffixStyle)) {
return;
}
this.setState({
affixStyle: affixStyle
}, function () {
if (affixStyle && !originalAffixStyle || !affixStyle && originalAffixStyle) {
var state = _this2.state;
onChange(!!state.affixStyle);
}
});
}
}, {
key: "setPlaceholderStyle",
value: function setPlaceholderStyle(placeholderStyle) {
var originalPlaceholderStyle = this.state.placeholderStyle;
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
return;
}
this.setState({
placeholderStyle: placeholderStyle
});
}
}, {
key: "syncPlaceholderStyle",
value: function syncPlaceholderStyle(e) {
var affixStyle = this.state.affixStyle;
if (!affixStyle) {
return;
}
this.placeholderNode.style.cssText = '';
this.setAffixStyle(e, _objectSpread(_objectSpread({}, affixStyle), {}, {
width: this.placeholderNode.offsetWidth
}));
this.setPlaceholderStyle({
width: this.placeholderNode.offsetWidth
});
}
}, {
key: "updatePosition",
value: function updatePosition(e) {
var _this$props2 = this.props,
offsetBottom = _this$props2.offsetBottom,
offset = _this$props2.offset,
_this$props2$target = _this$props2.target,
target = _this$props2$target === void 0 ? getDefaultTarget : _this$props2$target;
var offsetTop = this.props.offsetTop;
var targetNode = target(); // Backwards support
offsetTop = typeof offsetTop === 'undefined' ? offset : offsetTop;
var scrollTop = getScroll(targetNode, true);
var affixNode = findDOMNode(this);
var elemOffset = getOffset(affixNode, targetNode);
var elemSize = {
width: this.fixedNode.offsetWidth,
height: this.fixedNode.offsetHeight
};
var offsetMode = {
top: false,
bottom: false
}; // Default to `offsetTop=0`.
if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
offsetMode.top = true;
offsetTop = 0;
} else {
offsetMode.top = typeof offsetTop === 'number';
offsetMode.bottom = typeof offsetBottom === 'number';
}
var targetRect = getTargetRect(targetNode);
var targetInnerHeight = targetNode.innerHeight || targetNode.clientHeight;
if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
// Fixed Top
var width = elemOffset.width;
var top = targetRect.top + offsetTop;
this.setAffixStyle(e, {
position: 'fixed',
top: top,
left: targetRect.left + elemOffset.left,
width: width
});
this.setPlaceholderStyle({
width: width,
height: elemSize.height
});
} else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight && offsetMode.bottom) {
// Fixed Bottom
var targetBottomOffet = targetNode === window ? 0 : window.innerHeight - targetRect.bottom;
var _width = elemOffset.width;
this.setAffixStyle(e, {
position: 'fixed',
bottom: targetBottomOffet + offsetBottom,
left: targetRect.left + elemOffset.left,
width: _width
});
this.setPlaceholderStyle({
width: _width,
height: elemOffset.height
});
} else {
var affixStyle = this.state.affixStyle;
if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
this.setAffixStyle(e, _objectSpread(_objectSpread({}, affixStyle), {}, {
width: affixNode.offsetWidth
}));
} else {
this.setAffixStyle(e, null);
}
this.setPlaceholderStyle(null);
}
if (e.type === 'resize') {
this.syncPlaceholderStyle(e);
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this3 = this;
var props = this.props;
var target = props.target || getDefaultTarget; // Wait for parent component ref has its value
this.timeout = window.setTimeout(function () {
_this3.setTargetEventListeners(target); // Mock Event object.
_this3.updatePosition({});
});
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this$props3 = this.props,
offsetTop = _this$props3.offsetTop,
offsetBottom = _this$props3.offsetBottom,
target = _this$props3.target;
if (target !== nextProps.target) {
this.clearEventListeners();
this.setTargetEventListeners(nextProps.target); // Mock Event object.
this.updatePosition({});
}
if (offsetTop !== nextProps.offsetTop || offsetBottom !== nextProps.offsetBottom) {
this.updatePosition({});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearEventListeners();
clearTimeout(this.timeout);
this.updatePosition.cancel();
}
}, {
key: "setTargetEventListeners",
value: function setTargetEventListeners(getTarget) {
var _this4 = this;
var target = getTarget();
if (!target) {
return;
}
this.clearEventListeners();
this.events.forEach(function (eventName) {
_this4.eventHandlers[eventName] = addEventListener(target, eventName, _this4.updatePosition);
});
}
}, {
key: "clearEventListeners",
value: function clearEventListeners() {
var _this5 = this;
this.events.forEach(function (eventName) {
var handler = _this5.eventHandlers[eventName];
if (handler && handler.remove) {
handler.remove();
}
});
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
prefixCls = _this$props4.prefixCls,
style = _this$props4.style,
children = _this$props4.children;
var _this$state = this.state,
affixStyle = _this$state.affixStyle,
placeholderStyle = _this$state.placeholderStyle;
var getPrefixCls = this.context.getPrefixCls;
var className = classNames(_defineProperty({}, getPrefixCls('affix', prefixCls), affixStyle));
var props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
return /*#__PURE__*/React.createElement("div", _extends({}, props, {
style: _objectSpread(_objectSpread({}, placeholderStyle), style),
ref: this.savePlaceholderNode
}), /*#__PURE__*/React.createElement("div", {
className: className,
ref: this.saveFixedNode,
style: affixStyle
}, children));
}
}], [{
key: "contextType",
get: function get() {
return ConfigContext;
}
}]);
return Affix;
}(Component);
export { Affix as default };
Affix.displayName = 'Affix';
__decorate([throttleByAnimationFrameDecorator()], Affix.prototype, "updatePosition", null);
//# sourceMappingURL=index.js.map