@up-group-ui/react-controls
Version:
Up shared react controls
110 lines • 4.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var utils_1 = require("../utils");
var Sidebar = (function (_super) {
(0, tslib_1.__extends)(Sidebar, _super);
function Sidebar(props) {
var _this = _super.call(this, props) || this;
_this.state = {
scrollTop: 0,
componentTop: 0,
};
return _this;
}
Sidebar.prototype.shouldComponentUpdate = function (nextProps, nextState) {
if (nextProps.fixedHeader === 'absolute' &&
window &&
window.document &&
this.state.scrollTop !== nextState.scrollTop) {
return true;
}
return !((0, utils_1.arraysEqual)(nextProps.groups, this.props.groups) &&
nextProps.keys === this.props.keys &&
nextProps.width === this.props.width &&
nextProps.lineHeight === this.props.lineHeight &&
nextProps.fixedHeader === this.props.fixedHeader &&
nextProps.zIndex === this.props.zIndex &&
nextProps.groupHeights === this.props.groupHeights &&
nextProps.height === this.props.height);
};
Sidebar.prototype.scroll = function (e) {
if (this.props.fixedHeader === 'absolute' && window && window.document) {
var scroll_1 = window.document.body.scrollTop;
this.setState({
scrollTop: scroll_1,
});
}
};
Sidebar.prototype.setComponentTop = function () {
var viewportOffset = this.refs.sidebar.getBoundingClientRect();
this.setState({
componentTop: viewportOffset.top,
});
};
Sidebar.prototype.componentDidMount = function () {
var _this = this;
this.setComponentTop();
this.scroll();
this.scrollEventListener = {
handleEvent: function (event) {
_this.scroll();
},
};
window.addEventListener('scroll', this.scrollEventListener);
};
Sidebar.prototype.componentWillUnmount = function () {
window.removeEventListener('scroll', this.scrollEventListener);
};
Sidebar.prototype.componentWillReceiveProps = function () {
this.setComponentTop();
};
Sidebar.prototype.render = function () {
var _a = this.props, fixedHeader = _a.fixedHeader, width = _a.width, lineHeight = _a.lineHeight, zIndex = _a.zIndex, groupHeights = _a.groupHeights, height = _a.height, headerHeight = _a.headerHeight;
var _b = this.props.keys, groupIdKey = _b.groupIdKey, groupTitleKey = _b.groupTitleKey;
var scrollTop = this.state.scrollTop;
var sidebarStyle = {
width: width + "px",
height: height + "px",
};
var headerStyle = {
height: headerHeight + "px",
lineHeight: lineHeight + "px",
width: width + "px",
};
var groupsStyle = {
width: width + "px",
};
if (fixedHeader === 'fixed') {
headerStyle.position = 'fixed';
headerStyle.zIndex = zIndex;
groupsStyle.paddingTop = headerStyle.height;
}
else if (fixedHeader === 'absolute') {
var componentTop = this.state.componentTop;
if (scrollTop >= componentTop) {
headerStyle.position = 'absolute';
headerStyle.top = scrollTop - componentTop + "px";
headerStyle.left = '0';
groupsStyle.paddingTop = headerStyle.height;
}
}
var header = ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: "sidebarHeader", className: "rct-sidebar-header", style: headerStyle }, { children: this.props.children }), void 0));
var groupLines = [];
var i = 0;
this.props.groups.forEach(function (group, index) {
var elementStyle = {
height: groupHeights[index] - 1 + "px",
lineHeight: groupHeights[index] - 1 + "px",
};
groupLines.push((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'rct-sidebar-row' + (i % 2 === 0 ? ' rct-sidebar-row-even' : ' rct-sidebar-row-odd'), style: elementStyle }, { children: (0, utils_1._get)(group, groupTitleKey) }), (0, utils_1._get)(group, groupIdKey)));
i += 1;
});
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ ref: "sidebar", className: "rct-sidebar", style: sidebarStyle }, { children: [header, (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: groupsStyle }, { children: groupLines }), void 0)] }), void 0));
};
return Sidebar;
}(react_1.default.Component));
exports.default = Sidebar;
//# sourceMappingURL=Sidebar.js.map