implement PR feedback
This commit is contained in:
Bruno Windels
parent
699023ea40
commit
7b23fa7a4f
4 changed files with 52 additions and 65 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2017 New Vector Ltd.
|
||||
Copyright 2019 New Vector Ltd.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2017, 2018 New Vector Ltd.
|
||||
Copyright 2019 New Vector Ltd.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -22,34 +22,27 @@ import dis from '../../dispatcher';
|
|||
import classNames from 'classnames';
|
||||
import * as FormattingUtils from '../../utils/FormattingUtils';
|
||||
|
||||
|
||||
const CustomRoomTagPanel = React.createClass({
|
||||
displayName: 'CustomRoomTagPanel',
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
class CustomRoomTagPanel extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
tags: CustomRoomTagStore.getSortedTags(),
|
||||
};
|
||||
},
|
||||
}
|
||||
|
||||
componentWillMount: function() {
|
||||
componentWillMount() {
|
||||
this._tagStoreToken = CustomRoomTagStore.addListener(() => {
|
||||
this.setState({tags: CustomRoomTagStore.getSortedTags()});
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this._tagStoreToken) {
|
||||
this._tagStoreToken.remove();
|
||||
}
|
||||
},
|
||||
|
||||
onClearFilterClick(ev) {
|
||||
dis.dispatch({action: 'deselect_custom_room_tags'});
|
||||
},
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("CustomRoomTagPanel", this.state.tags);
|
||||
const tags = this.state.tags.map((tag) => {
|
||||
return (<CustomRoomTagTile tag={tag} key={tag.name} />);
|
||||
});
|
||||
|
|
@ -58,19 +51,14 @@ const CustomRoomTagPanel = React.createClass({
|
|||
mx_CustomRoomTagPanel_empty: this.state.tags.length === 0,
|
||||
});
|
||||
|
||||
const clearButton = undefined;
|
||||
|
||||
return <div className={classes}>
|
||||
<div className="mx_CustomRoomTagPanel_clearButton_container">
|
||||
{ clearButton }
|
||||
</div>
|
||||
return (<div className={classes}>
|
||||
<div className="mx_CustomRoomTagPanel_divider" />
|
||||
<AutoHideScrollbar className="mx_CustomRoomTagPanel_scroller">
|
||||
{tags}
|
||||
</AutoHideScrollbar>
|
||||
</div>;
|
||||
},
|
||||
});
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
class CustomRoomTagTile extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -94,7 +82,6 @@ class CustomRoomTagTile extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log("rendering CustomRoomTagTile", this.props.tag.name);
|
||||
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
|
||||
|
|
@ -118,18 +105,20 @@ class CustomRoomTagTile extends React.Component {
|
|||
const tip = (this.state.hover ?
|
||||
<RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
|
||||
<div />);
|
||||
return (<AccessibleButton className={className} onClick={this.onClick}>
|
||||
<div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
|
||||
<BaseAvatar
|
||||
name={tag.avatarLetter}
|
||||
idName={name}
|
||||
width={avatarHeight}
|
||||
height={avatarHeight}
|
||||
/>
|
||||
{ badgeElement }
|
||||
{ tip }
|
||||
</div>
|
||||
</AccessibleButton>);
|
||||
return (
|
||||
<AccessibleButton className={className} onClick={this.onClick}>
|
||||
<div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
|
||||
<BaseAvatar
|
||||
name={tag.avatarLetter}
|
||||
idName={name}
|
||||
width={avatarHeight}
|
||||
height={avatarHeight}
|
||||
/>
|
||||
{ badgeElement }
|
||||
{ tip }
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2017, 2018 New Vector Ltd.
|
||||
Copyright 2019 New Vector Ltd.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2017 New Vector Ltd
|
||||
Copyright 2019 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -13,10 +13,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import {Store} from 'flux/utils';
|
||||
import dis from '../dispatcher';
|
||||
import * as RoomNotifs from '../RoomNotifs';
|
||||
import RoomListStore from './RoomListStore';
|
||||
import EventEmitter from 'events';
|
||||
|
||||
const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
|
||||
|
||||
function commonPrefix(a, b) {
|
||||
|
|
@ -43,26 +44,36 @@ function commonPrefix(a, b) {
|
|||
/**
|
||||
* A class for storing application state for ordering tags in the TagPanel.
|
||||
*/
|
||||
class CustomRoomTagStore extends Store {
|
||||
class CustomRoomTagStore extends EventEmitter {
|
||||
constructor() {
|
||||
super(dis);
|
||||
|
||||
super();
|
||||
// Initialise state
|
||||
this._state = Object.assign({}, {tags: this._getUpdatedTags()});
|
||||
this._state = {tags: this._getUpdatedTags()};
|
||||
|
||||
this._roomListStoreToken = RoomListStore.addListener(() => {
|
||||
// UGLY: FluxStore doens't emit changes that
|
||||
// didn't come from a dispatcher action
|
||||
// so emit the change ourselves for now ...
|
||||
this._state.tags = this._getUpdatedTags();
|
||||
this.__emitter.emit("change");
|
||||
this._setState({tags: this._getUpdatedTags()});
|
||||
});
|
||||
dis.register(payload => this._onDispatch(payload));
|
||||
}
|
||||
|
||||
getTags() {
|
||||
return this._state.tags;
|
||||
}
|
||||
|
||||
_setState(newState) {
|
||||
this._state = Object.assign(this._state, newState);
|
||||
this.emit("change");
|
||||
}
|
||||
|
||||
addListener(callback) {
|
||||
this.on("change", callback);
|
||||
return {
|
||||
remove() {
|
||||
this.removeListener("change", callback);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
getSortedTags() {
|
||||
const roomLists = RoomListStore.getRoomLists();
|
||||
|
||||
|
|
@ -88,12 +99,8 @@ class CustomRoomTagStore extends Store {
|
|||
});
|
||||
}
|
||||
|
||||
_setState(newState) {
|
||||
this._state = Object.assign(this._state, newState);
|
||||
this.__emitChange();
|
||||
}
|
||||
|
||||
__onDispatch(payload) {
|
||||
_onDispatch(payload) {
|
||||
switch (payload.action) {
|
||||
case 'select_custom_room_tag': {
|
||||
const oldTags = this._state.tags;
|
||||
|
|
@ -105,15 +112,6 @@ class CustomRoomTagStore extends Store {
|
|||
}
|
||||
}
|
||||
break;
|
||||
case 'deselect_custom_room_tags': {
|
||||
const tags = Object.keys(this._state.tags)
|
||||
.reduce((tags, tagName) => {
|
||||
tags[tagName] = false;
|
||||
return tags;
|
||||
}, {});
|
||||
this._setState({tags});
|
||||
}
|
||||
break;
|
||||
case 'on_logged_out': {
|
||||
this._state = {};
|
||||
if (this._roomListStoreToken) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue