Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

make FilteredList controlled, such that it can externally persist filter

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2017-11-28 22:16:53 +00:00
parent 63bedc440b
commit 43578d2366
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
1 changed files with 60 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/views/dialogs/DevtoolsDialog.js
View File

@ -244,6 +244,8 @@ class SendAccountData extends GenericEditor {
class FilteredList extends React.Component {
static propTypes = {
children: PropTypes.any,
query: PropTypes.string,
onChange: PropTypes.func,
};
constructor(props, context) {
@ -251,12 +253,17 @@ class FilteredList extends React.Component {
this.onQuery = this.onQuery.bind(this);
this.state = {
query: '',
query: this.props.query,
};
}
componentWillReceiveProps(nextProps) {
if (this.state.query !== nextProps.query) this.setState({ query: nextProps.query });
}
onQuery(ev) {
this.setState({ query: ev.target.value });
if (this.props.onChange) this.props.onChange(ev.target.value);
}
filterChildren() {
@ -295,11 +302,16 @@ class RoomStateExplorer extends DevtoolsComponent {
this.onBack = this.onBack.bind(this);
this.editEv = this.editEv.bind(this);
this.onQueryEventType = this.onQueryEventType.bind(this);
this.onQueryStateKey = this.onQueryStateKey.bind(this);
this.state = {
eventType: null,
event: null,
editing: false,
queryEventType: '',
queryStateKey: '',
};
}
@ -331,6 +343,14 @@ class RoomStateExplorer extends DevtoolsComponent {
this.setState({ editing: true });
}
onQueryEventType(filterEventType) {
this.setState({ queryEventType: filterEventType });
}
onQueryStateKey(filterStateKey) {
this.setState({ queryStateKey: filterStateKey });
}
render() {
if (this.state.event) {
if (this.state.editing) {
@ -352,41 +372,47 @@ class RoomStateExplorer extends DevtoolsComponent {
</div>;
}
const rows = [];
let list = null;
const classes = 'mx_DevTools_RoomStateExplorer_button';
if (this.state.eventType === null) {
Object.keys(this.roomStateEvents).forEach((evType) => {
const stateGroup = this.roomStateEvents[evType];
const stateKeys = Object.keys(stateGroup);
list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
{
Object.keys(this.roomStateEvents).map((evType) => {
const stateGroup = this.roomStateEvents[evType];
const stateKeys = Object.keys(stateGroup);
let onClickFn;
if (stateKeys.length > 1) {
onClickFn = this.browseEventType(evType);
} else if (stateKeys.length === 1) {
onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
let onClickFn;
if (stateKeys.length > 1) {
onClickFn = this.browseEventType(evType);
} else if (stateKeys.length === 1) {
onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
}
return <button className={classes} key={evType} onClick={onClickFn}>
{ evType }
</button>;
})
}
rows.push(<button className={classes} key={evType} onClick={onClickFn}>
{ evType }
</button>);
});
</FilteredList>;
} else {
const evType = this.state.eventType;
const stateGroup = this.roomStateEvents[evType];
Object.keys(stateGroup).forEach((stateKey) => {
const ev = stateGroup[stateKey];
rows.push(<button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
{ stateKey }
</button>);
});
const stateGroup = this.roomStateEvents[this.state.eventType];
list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
{
Object.keys(stateGroup).map((stateKey) => {
const ev = stateGroup[stateKey];
return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
{ stateKey }
</button>;
})
}
</FilteredList>;
}
return <div>
<div className="mx_Dialog_content">
<FilteredList>
{ rows }
</FilteredList>
{ list }
</div>
<div className="mx_Dialog_buttons">
<button onClick={this.onBack}>{ _t('Back') }</button>
@ -408,11 +434,14 @@ class AccountDataExplorer extends DevtoolsComponent {
this.onBack = this.onBack.bind(this);
this.editEv = this.editEv.bind(this);
this._onChange = this._onChange.bind(this);
this.onQueryEventType = this.onQueryEventType.bind(this);
this.state = {
isRoomAccountData: false,
event: null,
editing: false,
queryEventType: '',
};
}
@ -448,6 +477,10 @@ class AccountDataExplorer extends DevtoolsComponent {
this.setState({ editing: true });
}
onQueryEventType(queryEventType) {
this.setState({ queryEventType });
}
render() {
if (this.state.event) {
if (this.state.editing) {
@ -482,7 +515,7 @@ class AccountDataExplorer extends DevtoolsComponent {
return <div>
<div className="mx_Dialog_content">
<FilteredList>
<FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
{ rows }
</FilteredList>
</div>