diff options
author | Aldo Cortesi <aldo@nullcube.com> | 2015-01-01 15:37:42 +1300 |
---|---|---|
committer | Aldo Cortesi <aldo@nullcube.com> | 2015-01-01 15:37:42 +1300 |
commit | c9ce5094c810b551de3cddebf14f277a61657e16 (patch) | |
tree | 6eb4a6c5c1c43c99b6e66eab3b7d4f31c92ac8c0 /web/src/js/components/virtualscroll.js | |
parent | 67f6f67c48928ca56abfc5395be42b6643a16295 (diff) | |
download | mitmproxy-c9ce5094c810b551de3cddebf14f277a61657e16.tar.gz mitmproxy-c9ce5094c810b551de3cddebf14f277a61657e16.tar.bz2 mitmproxy-c9ce5094c810b551de3cddebf14f277a61657e16.zip |
All files and only files in in js/components are jsx
So remove the redundant naming
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 |