Merge pull request #5718 from vector-im/t3chguy/devtools-118247

make FilteredList controlled, such that it can externally persist filter
pull/4270/merge
David Baker 2018-02-01 09:48:40 +00:00 committed by GitHub
commit 0d229f015b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 34 deletions

View File

@ -245,24 +245,22 @@ class SendAccountData extends GenericEditor {
class FilteredList extends React.Component { class FilteredList extends React.Component {
static propTypes = { static propTypes = {
children: PropTypes.any, children: PropTypes.any,
query: PropTypes.string,
onChange: PropTypes.func,
}; };
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.onQuery = this.onQuery.bind(this); this.onQuery = this.onQuery.bind(this);
this.state = {
query: '',
};
} }
onQuery(ev) { onQuery(ev) {
this.setState({ query: ev.target.value }); if (this.props.onChange) this.props.onChange(ev.target.value);
} }
filterChildren() { filterChildren() {
if (this.state.query) { if (this.props.query) {
const lowerQuery = this.state.query.toLowerCase(); const lowerQuery = this.props.query.toLowerCase();
return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery)); return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery));
} }
return this.props.children; return this.props.children;
@ -272,7 +270,7 @@ class FilteredList extends React.Component {
return <div> return <div>
<input size="64" <input size="64"
onChange={this.onQuery} onChange={this.onQuery}
value={this.state.query} value={this.props.query}
placeholder={_t('Filter results')} placeholder={_t('Filter results')}
className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" /> className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" />
{ this.filterChildren() } { this.filterChildren() }
@ -296,11 +294,16 @@ class RoomStateExplorer extends DevtoolsComponent {
this.onBack = this.onBack.bind(this); this.onBack = this.onBack.bind(this);
this.editEv = this.editEv.bind(this); this.editEv = this.editEv.bind(this);
this.onQueryEventType = this.onQueryEventType.bind(this);
this.onQueryStateKey = this.onQueryStateKey.bind(this);
this.state = { this.state = {
eventType: null, eventType: null,
event: null, event: null,
editing: false, editing: false,
queryEventType: '',
queryStateKey: '',
}; };
} }
@ -332,6 +335,14 @@ class RoomStateExplorer extends DevtoolsComponent {
this.setState({ editing: true }); this.setState({ editing: true });
} }
onQueryEventType(filterEventType) {
this.setState({ queryEventType: filterEventType });
}
onQueryStateKey(filterStateKey) {
this.setState({ queryStateKey: filterStateKey });
}
render() { render() {
if (this.state.event) { if (this.state.event) {
if (this.state.editing) { if (this.state.editing) {
@ -355,11 +366,13 @@ class RoomStateExplorer extends DevtoolsComponent {
</div>; </div>;
} }
const rows = []; let list = null;
const classes = 'mx_DevTools_RoomStateExplorer_button'; const classes = 'mx_DevTools_RoomStateExplorer_button';
if (this.state.eventType === null) { if (this.state.eventType === null) {
Object.keys(this.roomStateEvents).forEach((evType) => { list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
{
Object.keys(this.roomStateEvents).map((evType) => {
const stateGroup = this.roomStateEvents[evType]; const stateGroup = this.roomStateEvents[evType];
const stateKeys = Object.keys(stateGroup); const stateKeys = Object.keys(stateGroup);
@ -370,26 +383,30 @@ class RoomStateExplorer extends DevtoolsComponent {
onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]); onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
} }
rows.push(<button className={classes} key={evType} onClick={onClickFn}> return <button className={classes} key={evType} onClick={onClickFn}>
{ evType } { evType }
</button>); </button>;
}); })
}
</FilteredList>;
} else { } else {
const evType = this.state.eventType; const stateGroup = this.roomStateEvents[this.state.eventType];
const stateGroup = this.roomStateEvents[evType];
Object.keys(stateGroup).forEach((stateKey) => { list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
{
Object.keys(stateGroup).map((stateKey) => {
const ev = stateGroup[stateKey]; const ev = stateGroup[stateKey];
rows.push(<button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}> return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
{ stateKey } { stateKey }
</button>); </button>;
}); })
}
</FilteredList>;
} }
return <div> return <div>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<FilteredList> { list }
{ rows }
</FilteredList>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button> <button onClick={this.onBack}>{ _t('Back') }</button>
@ -411,11 +428,14 @@ class AccountDataExplorer extends DevtoolsComponent {
this.onBack = this.onBack.bind(this); this.onBack = this.onBack.bind(this);
this.editEv = this.editEv.bind(this); this.editEv = this.editEv.bind(this);
this._onChange = this._onChange.bind(this); this._onChange = this._onChange.bind(this);
this.onQueryEventType = this.onQueryEventType.bind(this);
this.state = { this.state = {
isRoomAccountData: false, isRoomAccountData: false,
event: null, event: null,
editing: false, editing: false,
queryEventType: '',
}; };
} }
@ -451,6 +471,10 @@ class AccountDataExplorer extends DevtoolsComponent {
this.setState({ editing: true }); this.setState({ editing: true });
} }
onQueryEventType(queryEventType) {
this.setState({ queryEventType });
}
render() { render() {
if (this.state.event) { if (this.state.event) {
if (this.state.editing) { if (this.state.editing) {
@ -487,7 +511,7 @@ class AccountDataExplorer extends DevtoolsComponent {
return <div> return <div>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<FilteredList> <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
{ rows } { rows }
</FilteredList> </FilteredList>
</div> </div>