mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 10:15:43 +03:00
process RoomSubList props through function before creating them
this way, we'll be able to add adjacent resize handles and scroll wrappers
This commit is contained in:
Bruno Windels
parent
81d0ce2bcf
commit
c12368ea48
1 changed files with 140 additions and 121 deletions
|
|
@ -509,131 +509,150 @@ module.exports = React.createClass({
|
|||
const showEmpty = SettingsStore.getValue('RoomSubList.showEmpty');
|
||||
|
||||
const self = this;
|
||||
return (
|
||||
<GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
|
||||
autoshow={true} onScroll={self._whenScrolling} onResize={self._whenScrolling} wrappedRef={this._collectGemini}>
|
||||
<div className="mx_RoomList">
|
||||
<RoomSubList list={[]}
|
||||
extraTiles={this._makeGroupInviteTiles(self.props.searchFilter)}
|
||||
label={_t('Community Invites')}
|
||||
order="recent"
|
||||
isInvite={true}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty}
|
||||
/>
|
||||
|
||||
<RoomSubList list={self.state.lists['im.vector.fake.invite']}
|
||||
label={_t('Invites')}
|
||||
order="recent"
|
||||
isInvite={true}
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty}
|
||||
/>
|
||||
|
||||
<RoomSubList list={self.state.lists['m.favourite']}
|
||||
label={_t('Favourites')}
|
||||
tagName="m.favourite"
|
||||
emptyContent={this._getEmptyContent('m.favourite')}
|
||||
order="manual"
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty} />
|
||||
|
||||
<RoomSubList list={self.state.lists['im.vector.fake.direct']}
|
||||
label={_t('People')}
|
||||
tagName="im.vector.fake.direct"
|
||||
emptyContent={this._getEmptyContent('im.vector.fake.direct')}
|
||||
headerItems={this._getHeaderItems('im.vector.fake.direct')}
|
||||
order="recent"
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
alwaysShowHeader={true}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty} />
|
||||
|
||||
<RoomSubList list={self.state.lists['im.vector.fake.recent']}
|
||||
label={_t('Rooms')}
|
||||
emptyContent={this._getEmptyContent('im.vector.fake.recent')}
|
||||
headerItems={this._getHeaderItems('im.vector.fake.recent')}
|
||||
order="recent"
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty} />
|
||||
|
||||
{ Object.keys(self.state.lists).map((tagName) => {
|
||||
if (!tagName.match(STANDARD_TAGS_REGEX)) {
|
||||
return <RoomSubList list={self.state.lists[tagName]}
|
||||
key={tagName}
|
||||
label={labelForTagName(tagName)}
|
||||
tagName={tagName}
|
||||
emptyContent={this._getEmptyContent(tagName)}
|
||||
order="manual"
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty} />;
|
||||
function mapProps(subListsProps) {
|
||||
return subListsProps.map((props) => {
|
||||
const {key, label, ... otherProps} = props;
|
||||
const chosenKey = key || label;
|
||||
return <RoomSubList key={chosenKey} label={label} {...otherProps} />;
|
||||
});
|
||||
}
|
||||
}) }
|
||||
|
||||
<RoomSubList list={self.state.lists['m.lowpriority']}
|
||||
label={_t('Low priority')}
|
||||
tagName="m.lowpriority"
|
||||
emptyContent={this._getEmptyContent('m.lowpriority')}
|
||||
order="recent"
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty} />
|
||||
|
||||
<RoomSubList list={self.state.lists['im.vector.fake.archived']}
|
||||
emptyContent={self.props.collapsed ? null :
|
||||
let subLists = [
|
||||
{
|
||||
list: [],
|
||||
extraTiles: this._makeGroupInviteTiles(self.props.searchFilter),
|
||||
label: _t('Community Invites'),
|
||||
order: "recent",
|
||||
isInvite: true,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
{
|
||||
list: self.state.lists['im.vector.fake.invite'],
|
||||
label: _t('Invites'),
|
||||
order: "recent",
|
||||
isInvite: true,
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
{
|
||||
list: self.state.lists['m.favourite'],
|
||||
label: _t('Favourites'),
|
||||
tagName: "m.favourite",
|
||||
emptyContent: this._getEmptyContent('m.favourite'),
|
||||
order: "manual",
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
{
|
||||
list: self.state.lists['im.vector.fake.direct'],
|
||||
label: _t('People'),
|
||||
tagName: "im.vector.fake.direct",
|
||||
emptyContent: this._getEmptyContent('im.vector.fake.direct'),
|
||||
headerItems: this._getHeaderItems('im.vector.fake.direct'),
|
||||
order: "recent",
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
alwaysShowHeader: true,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
{
|
||||
list: self.state.lists['im.vector.fake.recent'],
|
||||
label: _t('Rooms'),
|
||||
emptyContent: this._getEmptyContent('im.vector.fake.recent'),
|
||||
headerItems: this._getHeaderItems('im.vector.fake.recent'),
|
||||
order: "recent",
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
];
|
||||
const tagSubLists = Object.keys(self.state.lists)
|
||||
.filter((tagName) => {
|
||||
return !tagName.match(STANDARD_TAGS_REGEX);
|
||||
}).map((tagName) => {
|
||||
return {
|
||||
list: self.state.lists[tagName],
|
||||
key: tagName,
|
||||
label: labelForTagName(tagName),
|
||||
tagName: tagName,
|
||||
emptyContent: this._getEmptyContent(tagName),
|
||||
order: "manual",
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
};
|
||||
});
|
||||
subLists = subLists.concat(tagSubLists);
|
||||
subLists = subLists.concat([
|
||||
{
|
||||
list: self.state.lists['m.lowpriority'],
|
||||
label: _t('Low priority'),
|
||||
tagName: "m.lowpriority",
|
||||
emptyContent: this._getEmptyContent('m.lowpriority'),
|
||||
order: "recent",
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
{
|
||||
list: self.state.lists['im.vector.fake.archived'],
|
||||
emptyContent: self.props.collapsed ?
|
||||
null :
|
||||
<div className="mx_RoomList_emptySubListTip_container">
|
||||
<div className="mx_RoomList_emptySubListTip">
|
||||
{ _t('You have no historical rooms') }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
label={_t('Historical')}
|
||||
order="recent"
|
||||
collapsed={self.props.collapsed}
|
||||
alwaysShowHeader={true}
|
||||
startAsHidden={true}
|
||||
showSpinner={self.state.isLoadingLeftRooms}
|
||||
onHeaderClick={self.onArchivedHeaderClick}
|
||||
incomingCall={self.state.incomingCall}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={showEmpty} />
|
||||
</div>,
|
||||
label: _t('Historical'),
|
||||
order: "recent",
|
||||
collapsed: self.props.collapsed,
|
||||
alwaysShowHeader: true,
|
||||
startAsHidden: true,
|
||||
showSpinner: self.state.isLoadingLeftRooms,
|
||||
onHeaderClick: self.onArchivedHeaderClick,
|
||||
incomingCall: self.state.incomingCall,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: showEmpty,
|
||||
},
|
||||
{
|
||||
list: self.state.lists['m.server_notice'],
|
||||
label: _t('System Alerts'),
|
||||
tagName: "m.lowpriority",
|
||||
order: "recent",
|
||||
incomingCall: self.state.incomingCall,
|
||||
collapsed: self.props.collapsed,
|
||||
searchFilter: self.props.searchFilter,
|
||||
onShowMoreRooms: self.onShowMoreRooms,
|
||||
showEmpty: false,
|
||||
},
|
||||
]);
|
||||
|
||||
<RoomSubList list={self.state.lists['m.server_notice']}
|
||||
label={_t('System Alerts')}
|
||||
tagName="m.lowpriority"
|
||||
order="recent"
|
||||
incomingCall={self.state.incomingCall}
|
||||
collapsed={self.props.collapsed}
|
||||
searchFilter={self.props.searchFilter}
|
||||
onHeaderClick={self.onSubListHeaderClick}
|
||||
onShowMoreRooms={self.onShowMoreRooms}
|
||||
showEmpty={false} />
|
||||
const subListComponents = mapProps(subLists);
|
||||
|
||||
return (
|
||||
<GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
|
||||
autoshow={true} onScroll={self._whenScrolling} onResize={self._whenScrolling} wrappedRef={this._collectGemini}>
|
||||
<div className="mx_RoomList">
|
||||
{ subListComponents }
|
||||
</div>
|
||||
</GeminiScrollbarWrapper>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue