diff options
author | Maximilian Hils <git@maximilianhils.com> | 2016-02-18 12:29:35 +0100 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2016-02-18 12:29:35 +0100 |
commit | 18b619e164ced91cf0ac8d3fd3c18be1f07df1cc (patch) | |
tree | 071bce256f44f063a2a4b412f43ff2f2b7d3ed5f /web/src/js/components/virtualscroll.js | |
parent | 3cbacf4e0bae8cd96752303b42f88e176e638824 (diff) | |
download | mitmproxy-18b619e164ced91cf0ac8d3fd3c18be1f07df1cc.tar.gz mitmproxy-18b619e164ced91cf0ac8d3fd3c18be1f07df1cc.tar.bz2 mitmproxy-18b619e164ced91cf0ac8d3fd3c18be1f07df1cc.zip |
move mitmproxy/web to root
Diffstat (limited to 'web/src/js/components/virtualscroll.js')
-rw-r--r-- | web/src/js/components/virtualscroll.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/web/src/js/components/virtualscroll.js b/web/src/js/components/virtualscroll.js new file mode 100644 index 00000000..956e1a0b --- /dev/null +++ b/web/src/js/components/virtualscroll.js @@ -0,0 +1,85 @@ +var React = require("react"); + +var VirtualScrollMixin = { + getInitialState: function () { + return { + start: 0, + stop: 0 + }; + }, + componentWillMount: function () { + if (!this.props.rowHeight) { + console.warn("VirtualScrollMixin: No rowHeight specified", this); + } + }, + getPlaceholderTop: function (total) { + var Tag = this.props.placeholderTagName || "tr"; + // When a large trunk of elements is removed from the button, start may be far off the viewport. + // To make this issue less severe, limit the top placeholder to the total number of rows. + var style = { + height: Math.min(this.state.start, total) * this.props.rowHeight + }; + var spacer = <Tag key="placeholder-top" style={style}></Tag>; + + if (this.state.start % 2 === 1) { + // fix even/odd rows + return [spacer, <Tag key="placeholder-top-2"></Tag>]; + } else { + return spacer; + } + }, + getPlaceholderBottom: function (total) { + var Tag = this.props.placeholderTagName || "tr"; + var style = { + height: Math.max(0, total - this.state.stop) * this.props.rowHeight + }; + return <Tag key="placeholder-bottom" style={style}></Tag>; + }, + componentDidMount: function () { + this.onScroll(); + window.addEventListener('resize', this.onScroll); + }, + componentWillUnmount: function(){ + window.removeEventListener('resize', this.onScroll); + }, + onScroll: function () { + var viewport = this.getDOMNode(); + var top = viewport.scrollTop; + var height = viewport.offsetHeight; + var start = Math.floor(top / this.props.rowHeight); + var stop = start + Math.ceil(height / (this.props.rowHeightMin || this.props.rowHeight)); + + this.setState({ + start: start, + stop: stop + }); + }, + renderRows: function (elems) { + var rows = []; + var max = Math.min(elems.length, this.state.stop); + + for (var i = this.state.start; i < max; i++) { + var elem = elems[i]; + rows.push(this.renderRow(elem)); + } + return rows; + }, + scrollRowIntoView: function (index, head_height) { + + var row_top = (index * this.props.rowHeight) + head_height; + var row_bottom = row_top + this.props.rowHeight; + + var viewport = this.getDOMNode(); + var viewport_top = viewport.scrollTop; + var viewport_bottom = viewport_top + viewport.offsetHeight; + + // Account for pinned thead + if (row_top - head_height < viewport_top) { + viewport.scrollTop = row_top - head_height; + } else if (row_bottom > viewport_bottom) { + viewport.scrollTop = row_bottom - viewport.offsetHeight; + } + }, +}; + +module.exports = VirtualScrollMixin;
\ No newline at end of file |