office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
127 lines • 6.67 kB
JavaScript
define(["require", "exports", "tslib", "react", "react-dom", "prop-types", "../../Utilities", "./Sticky.Props", "./Sticky.scss"], function (require, exports, tslib_1, React, ReactDOM, PropTypes, Utilities_1, Sticky_Props_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Sticky = (function (_super) {
tslib_1.__extends(Sticky, _super);
function Sticky(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isStickyTop: false,
isStickyBottom: false
};
return _this;
}
Sticky.prototype.componentDidMount = function () {
if (!this.context.scrollablePane) {
throw new TypeError('Expected Sticky to be mounted within ScrollablePane');
}
var scrollablePane = this.context.scrollablePane;
var stickyClassName = this.props.stickyClassName;
scrollablePane.subscribe(this._onScrollEvent);
this.content = document.createElement('div');
this.content.style.background = this._getBackground();
ReactDOM.render(React.createElement("div", null, this.props.children), this.content);
this.refs.root.appendChild(this.content);
};
Sticky.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom;
var scrollablePane = this.context.scrollablePane;
if (this.props.children !== prevProps.children) {
ReactDOM.render(React.createElement("div", null, this.props.children), this.content);
}
if (isStickyTop && !prevState.isStickyTop) {
this._setSticky(function () {
scrollablePane.addStickyHeader(_this);
});
}
else if (!isStickyTop && prevState.isStickyTop) {
this._resetSticky(function () {
scrollablePane.removeStickyHeader(_this);
});
}
else if (isStickyBottom && !prevState.isStickyBottom) {
this._setSticky(function () {
scrollablePane.addStickyFooter(_this);
});
}
else if (!isStickyBottom && prevState.isStickyBottom) {
this._resetSticky(function () {
scrollablePane.removeStickyFooter(_this);
});
}
};
Sticky.prototype.shouldComponentUpdate = function (nextProps, nextState) {
var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom, placeholderHeight = _a.placeholderHeight;
return isStickyTop !== nextState.isStickyTop ||
isStickyBottom !== nextState.isStickyBottom ||
placeholderHeight !== nextState.placeholderHeight ||
this.props.children !== nextProps.children;
};
Sticky.prototype.setPlaceholderHeight = function (height) {
this.setState({
placeholderHeight: height
});
};
Sticky.prototype.render = function () {
var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom, placeholderHeight = _a.placeholderHeight;
var isSticky = isStickyTop || isStickyBottom;
return (React.createElement("div", { ref: 'root' },
React.createElement("div", { ref: 'placeholder', style: { height: (isSticky ? placeholderHeight : 0) } })));
};
Sticky.prototype._onScrollEvent = function (headerBound, footerBound) {
var _a = this.refs.root.getBoundingClientRect(), top = _a.top, bottom = _a.bottom;
var _b = this.state, isStickyTop = _b.isStickyTop, isStickyBottom = _b.isStickyBottom;
var stickyPosition = this.props.stickyPosition;
var canStickyHeader = stickyPosition === Sticky_Props_1.StickyPositionType.Both || stickyPosition === Sticky_Props_1.StickyPositionType.Header;
var canStickyFooter = stickyPosition === Sticky_Props_1.StickyPositionType.Both || stickyPosition === Sticky_Props_1.StickyPositionType.Footer;
this.setState({
isStickyTop: canStickyHeader && ((!isStickyTop && top <= headerBound.bottom) || (isStickyTop && bottom < headerBound.bottom)),
isStickyBottom: canStickyFooter && ((!isStickyBottom && bottom >= footerBound.top) || (isStickyBottom && top > footerBound.top))
});
};
Sticky.prototype._setSticky = function (callback) {
if (this.content.parentElement) {
this.content.parentElement.removeChild(this.content);
}
callback();
};
Sticky.prototype._resetSticky = function (callback) {
var _this = this;
this.refs.root.appendChild(this.content);
setTimeout(function () {
if (_this.props.stickyClassName) {
_this.content.children[0].classList.remove(_this.props.stickyClassName);
}
}, 1);
callback();
};
// Gets background of nearest parent element that has a declared background-color attribute
Sticky.prototype._getBackground = function () {
var curr = this.refs.root;
while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ||
window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') {
if (curr.parentElement) {
curr = curr.parentElement;
}
}
return window.getComputedStyle(curr).getPropertyValue('background-color');
};
Sticky.defaultProps = {
stickyPosition: Sticky_Props_1.StickyPositionType.Both
};
Sticky.contextTypes = {
scrollablePane: PropTypes.object
};
tslib_1.__decorate([
Utilities_1.autobind
], Sticky.prototype, "componentDidMount", null);
tslib_1.__decorate([
Utilities_1.autobind
], Sticky.prototype, "_onScrollEvent", null);
return Sticky;
}(Utilities_1.BaseComponent));
exports.Sticky = Sticky;
});
//# sourceMappingURL=Sticky.js.map