Upgrade react-virtualized to 9.3.0
This commit is contained in:
parent
7c7821f829
commit
f8d57f1b6d
File diff suppressed because one or more lines are too long
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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';
|
||||
|
|
1296
client/yarn.lock
1296
client/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue