Upgrade react-virtualized to 9.3.0

This commit is contained in:
Ken-Håvard Lieng 2017-03-23 20:38:27 +01:00
parent 7c7821f829
commit f8d57f1b6d
10 changed files with 798 additions and 752 deletions

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.1",
"css-loader": "^0.27.3",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.1",
@ -33,7 +33,7 @@
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.3",
"style-loader": "^0.13.1",
"style-loader": "^0.16.0",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.17.0"
@ -42,7 +42,7 @@
"autolinker": "git+https://github.com/robbie-c/Autolinker.js.git",
"backo": "^1.1.0",
"base64-arraybuffer": "^0.1.5",
"eventemitter2": "^3.0.0",
"eventemitter2": "^4.0.0",
"history": "^4.5.1",
"immutable": "^3.8.1",
"lodash": "^4.17.4",
@ -51,7 +51,7 @@
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-virtualized": "^4.10.0",
"react-virtualized": "^9.3.0",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"reselect": "^2.5.4"

View File

@ -518,6 +518,10 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
text-overflow: ellipsis;
}
.ReactVirtualized__Grid {
outline: none;
}
@media (max-width: 600px) {
.tablist {
width: 200px;

View File

@ -31,7 +31,8 @@ export default class Message extends PureComponent {
const style = {
paddingLeft: `${window.messageIndent + 15}px`,
textIndent: `-${window.messageIndent}px`
textIndent: `-${window.messageIndent}px`,
...this.props.style
};
return (

View File

@ -1,20 +1,17 @@
import React, { PureComponent } from 'react';
import { VirtualScroll } from 'react-virtualized';
import { List } from 'react-virtualized/dist/commonjs/List';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
import Message from './Message';
import { scrollBarWidth } from '../util';
const sbWidth = scrollBarWidth();
const listStyle = { padding: '7px 0', boxSizing: 'content-box' };
export default class MessageBox extends PureComponent {
state = {
height: window.innerHeight - 100
};
componentDidMount() {
this.updateWidth();
window.addEventListener('resize', this.handleResize);
}
componentWillReceiveProps() {
const el = this.list.refs.scrollingContainer;
this.autoScroll = el.scrollTop + el.offsetHeight === el.scrollHeight;
componentWillReceiveProps(nextProps) {
if (nextProps.tab !== this.props.tab) {
this.bottom = true;
}
}
componentWillUpdate(nextProps) {
@ -24,70 +21,57 @@ export default class MessageBox extends PureComponent {
}
componentDidUpdate() {
if (this.bottom) {
this.list.scrollToRow(this.props.messages.size);
}
this.updateWidth();
if (this.autoScroll) {
const el = this.list.refs.scrollingContainer;
el.scrollTop = el.scrollHeight;
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
getRowHeight = index => {
const { messages } = this.props;
if (index === 0 || index === messages.size + 1) {
return 7;
}
return messages.get(index - 1).height;
};
updateWidth = resize => {
const { isChannel, setWrapWidth, updateMessageHeight } = this.props;
if (this.list) {
let width = this.list.refs.scrollingContainer.clientWidth - 30;
if (isChannel) {
width += 200;
}
if (this.width !== width) {
this.width = width;
setWrapWidth(width);
if (resize) {
updateMessageHeight();
}
}
}
};
getRowHeight = ({ index }) => this.props.messages.get(index).height;
listRef = el => { this.list = el; };
handleResize = () => {
this.updateWidth(true);
this.setState({ height: window.innerHeight - 100 });
};
updateWidth = () => {
const { isChannel, setWrapWidth, updateMessageHeight } = this.props;
let wrapWidth = this.width;
renderMessage = index => {
const { messages } = this.props;
if (index === 0 || index === messages.size + 1) {
return <span style={{ height: '7px' }} />;
if (isChannel) {
wrapWidth += 200;
}
const { select, openPrivateChat } = this.props;
const message = messages.get(index - 1);
// eslint-disable-next-line no-underscore-dangle
const c = this.list.Grid._scrollingContainer;
if (c.scrollHeight > c.clientHeight) {
wrapWidth -= sbWidth;
}
if (this.wrapWidth !== wrapWidth) {
this.wrapWidth = wrapWidth;
setWrapWidth(wrapWidth);
updateMessageHeight();
}
};
handleResize = size => {
this.width = size.width - 30;
this.updateWidth();
};
handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
this.bottom = scrollTop + clientHeight >= scrollHeight;
};
renderMessage = ({ index, style, key }) => {
const { messages, select, openPrivateChat } = this.props;
return (
<Message
message={message}
key={key}
message={messages.get(index)}
select={select}
openPrivateChat={openPrivateChat}
style={style}
/>
);
};
@ -95,13 +79,20 @@ export default class MessageBox extends PureComponent {
render() {
return (
<div className="messagebox">
<VirtualScroll
ref={this.listRef}
height={this.state.height}
rowsCount={this.props.messages.size + 2}
rowHeight={this.getRowHeight}
rowRenderer={this.renderMessage}
/>
<AutoSizer onResize={this.handleResize}>
{({ width, height }) => (
<List
ref={this.listRef}
width={width}
height={height - 14}
rowCount={this.props.messages.size}
rowHeight={this.getRowHeight}
rowRenderer={this.renderMessage}
onScroll={this.handleScroll}
style={listStyle}
/>
)}
</AutoSizer>
</div>
);
}

View File

@ -1,47 +1,23 @@
import React, { PureComponent } from 'react';
import { VirtualScroll } from 'react-virtualized';
import { List } from 'react-virtualized/dist/commonjs/List';
import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
import UserListItem from './UserListItem';
const listStyle = { padding: '10px 0', boxSizing: 'content-box' };
export default class UserList extends PureComponent {
state = {
height: window.innerHeight - 100
};
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUpdate(nextProps) {
if (nextProps.users.size === this.props.users.size) {
this.list.forceUpdate();
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
getRowHeight = index => {
if (index === 0 || index === this.props.users.size + 1) {
return 10;
}
return 24;
};
listRef = el => { this.list = el; };
handleResize = () => this.setState({ height: window.innerHeight - 100 });
renderUser = ({ index, style }) => {
const { users, tab, openPrivateChat, select } = this.props;
const user = users.get(index);
renderUser = index => {
const { users } = this.props;
if (index === 0 || index === users.size + 1) {
return <span style={{ height: '10px' }} />;
}
const { tab, openPrivateChat, select } = this.props;
const user = users.get(index - 1);
return (
<UserListItem
key={user.nick}
@ -49,6 +25,7 @@ export default class UserList extends PureComponent {
tab={tab}
openPrivateChat={openPrivateChat}
select={select}
style={style}
/>
);
};
@ -64,13 +41,19 @@ export default class UserList extends PureComponent {
return (
<div className={className} style={style}>
<VirtualScroll
ref={this.listRef}
height={this.state.height}
rowsCount={this.props.users.size + 2}
rowHeight={this.getRowHeight}
rowRenderer={this.renderUser}
/>
<AutoSizer disableWidth>
{({ height }) => (
<List
ref={this.listRef}
width={200}
height={height - 20}
rowCount={this.props.users.size}
rowHeight={24}
rowRenderer={this.renderUser}
style={listStyle}
/>
)}
</AutoSizer>
</div>
);
}

View File

@ -9,6 +9,10 @@ export default class UserListItem extends PureComponent {
};
render() {
return <p onClick={this.handleClick}>{this.props.user.renderName}</p>;
return (
<p style={this.props.style} onClick={this.handleClick}>
{this.props.user.renderName}
</p>
);
}
}

View File

@ -93,6 +93,7 @@ class Chat extends PureComponent {
<MessageBox
messages={messages}
isChannel={tab.channel !== null}
tab={tab}
setWrapWidth={this.props.setWrapWidth}
updateMessageHeight={this.props.updateMessageHeight}
select={this.props.select}

View File

@ -25,7 +25,7 @@ export function stringWidth(str, font) {
return ctx.measureText(str).width;
}
export function scrollbarWidth() {
export function scrollBarWidth() {
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.width = '100px';

File diff suppressed because it is too large Load Diff