Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

make FilteredList controlled, such that it can externally persist filter #5718

Merged
merged 6 commits into from
Feb 1, 2018
Merged

make FilteredList controlled, such that it can externally persist filter #5718

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
43578d2
make FilteredList controlled, such that it can externally persist filter
t3chguy Nov 28, 2017
5586a02
Merge branches 'develop' and 't3chguy/devtools-118247' of github.com:…
t3chguy Jan 16, 2018
1f3321f
Merge branch 'develop' of github.com:vector-im/riot-web into t3chguy/…
t3chguy Jan 20, 2018
04bca93
Merge branch 'develop' of github.com:vector-im/riot-web into t3chguy/…
t3chguy Jan 25, 2018
662a629
FilteredList, now being a controlled component does not need state
t3chguy Jan 25, 2018
2001245
Merge remote-tracking branch 'origin/t3chguy/devtools-118247' into t3…
t3chguy Jan 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 59 additions & 35 deletions src/components/views/dialogs/DevtoolsDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,24 +245,22 @@ class SendAccountData extends GenericEditor {
class FilteredList extends React.Component {
static propTypes = {
children: PropTypes.any,
query: PropTypes.string,
onChange: PropTypes.func,
};

constructor(props, context) {
super(props, context);
this.onQuery = this.onQuery.bind(this);

this.state = {
query: '',
};
}

onQuery(ev) {
this.setState({ query: ev.target.value });
if (this.props.onChange) this.props.onChange(ev.target.value);
}

filterChildren() {
if (this.state.query) {
const lowerQuery = this.state.query.toLowerCase();
if (this.props.query) {
const lowerQuery = this.props.query.toLowerCase();
return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery));
}
return this.props.children;
Expand All @@ -272,7 +270,7 @@ class FilteredList extends React.Component {
return <div>
<input size="64"
onChange={this.onQuery}
value={this.state.query}
value={this.props.query}
placeholder={_t('Filter results')}
className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" />
{ this.filterChildren() }
Expand All @@ -296,11 +294,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: '',
};
}

Expand Down Expand Up @@ -332,6 +335,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) {
Expand All @@ -355,41 +366,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);

let onClickFn;
if (stateKeys.length > 1) {
onClickFn = this.browseEventType(evType);
} else if (stateKeys.length === 1) {
onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
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]]);
}

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>
Expand All @@ -411,11 +428,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: '',
};
}

Expand Down Expand Up @@ -451,6 +471,10 @@ class AccountDataExplorer extends DevtoolsComponent {
this.setState({ editing: true });
}

onQueryEventType(queryEventType) {
this.setState({ queryEventType });
}

render() {
if (this.state.event) {
if (this.state.editing) {
Expand Down Expand Up @@ -487,7 +511,7 @@ class AccountDataExplorer extends DevtoolsComponent {

return <div>
<div className="mx_Dialog_content">
<FilteredList>
<FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
{ rows }
</FilteredList>
</div>
Expand Down