Optimise RoomList and implement quick-search functionality on it. #3654
Conversation
By moving the header into its own RoomSubListHeader, we can refresh it explicitly by poking it by the new constantTimeDispatcher without re-rendering the whole stack of room tiles *UNTESTED*
| // this.focusDirection = up; | ||
|
|
||
| var descending = false; // are we currently descending or ascending through the DOM tree? | ||
| var classes; |
There was a problem hiding this comment.
We should probably be writing all new code using let.
There was a problem hiding this comment.
Couple of minor points, other than that, fine, main high level comments made over in matrix-org/matrix-react-sdk#807
| @@ -119,7 +136,7 @@ var RoomSubList = React.createClass({ | |||
| // The header is collapsable if it is hidden or not stuck | |||
| // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method | |||
| isCollapsableOnClick: function() { | |||
| var stuck = this.refs.header.dataset.stuck; | |||
| var stuck = this.refs.header.refs.header.dataset.stuck; | |||
There was a problem hiding this comment.
i agree it's ugly, but i don't think there's an alternative having moved the header into the sublist? i don't think there's NPE risk.
There was a problem hiding this comment.
Yeah, the alternative would be a function ref, in which case you could probably pass the function through and then the ref goes straight into the function, but this isn't making things a whole lot worse, so meh.
| } while(element && !( | ||
| classes.contains("mx_RoomTile") || | ||
| classes.contains("mx_SearchBox_search") || | ||
| classes.contains("mx_RoomSubList_ellipsis"))); |
There was a problem hiding this comment.
I'm surprised you need to be relying on the CSS classes rather than being able to use the tabIndex somehow.
There was a problem hiding this comment.
the up/down keys deliberately ignore tab index but implement their own rules for navigating the list (e.g. skipping over the sublist headers, which you can still get at if you really want by tab/shift-tab)
| var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils'); | ||
| var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); | ||
| var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); | ||
| var ConstantTimeDispatcher = require('matrix-react-sdk/lib/ConstantTimeDispatcher'); |
There was a problem hiding this comment.
Ftr, if you're writing new code, import rather than require please, and no use strict (although I guess this was c+ped).
There was a problem hiding this comment.
i've been trying to keep style consistent within a file, so we can then go and blitz files en masse (perhaps using one of the algorithmic JS rewriters). i really don't like having thoroughly inconsistent styles within the same file, as it just gets in the way of the code.
There was a problem hiding this comment.
Yep, likewise - hence suggesting that if you're making a new file it should probably be in the new style rather than the old, but presumably this was taken out from an existing file rather than written from scratch.
|
|
||
| componentWillMount: function() { | ||
| // constantTimeDispatcher.register("RoomSubList.refreshHeader", this.props.tagName, this.onRefresh); | ||
| }, |
There was a problem hiding this comment.
Should probably just get rid of these if they aren't necessary
There was a problem hiding this comment.
i left them in just in case we move the refreshHeader back to the child in the end - it got moved back to RoomSubList because we also have header info in the truncation ellipsis cells. agreed it's bad to leave commented out stuff hanging around though.
|
@dbkr PTAL at feedback |
|
lgtm then, will leave you to merge, assuming the test fails are because of the co-dependent changes. |
…-search"" This reverts commit 9fc9de3.
This is effectively two PRs which ended up getting very entangled:
The latter is slightly controversial, as it deliberately short-circuits React from working out when to re-render the list, given we have no suitable properties to use (short of constantly generating new lists). It also technically doesn't need ConstantTimeDispatcher; it could also be done by calling the method directly on a reference to the right sublist, or even using the existing dispatchers.