PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

split out home/end handling into a helper as not all roving-tab-index widgets want it

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-01-16 01:35:42 +00:00
parent 8c1fdf4cab
commit 781db63fa6
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/rooms/RoomList.js
View file

@ -39,7 +39,7 @@ import * as sdk from "../../../index";
import * as Receipt from "../../../utils/Receipt";
import {Resizer} from '../../../resizer';
import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
import {RovingTabIndexContextProvider} from "../../../contexts/RovingTabIndexContext";
import {RovingTabIndexContextProvider, RovingTabIndexHomeEndHelper} from "../../../contexts/RovingTabIndexContext";
const HIDE_CONFERENCE_CHANS = true;
const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@ -789,7 +789,9 @@ export default createReactClass({
onMouseLeave={this.onMouseLeave}
>
<RovingTabIndexContextProvider>
{ subListComponents }
<RovingTabIndexHomeEndHelper>
{ subListComponents }
</RovingTabIndexHomeEndHelper>
</RovingTabIndexContextProvider>
</div>
);

26
src/contexts/RovingTabIndexContext.js
View file

@ -134,19 +134,30 @@ export const RovingTabIndexContextProvider = ({children}) => {
refs: [],
});
const context = useMemo(() => ({state, dispatch}), [state]);
return <RovingTabIndexContext.Provider value={context}>
{children}
</RovingTabIndexContext.Provider>;
};
// Helper to handle Home/End to jump to first/last roving-tab-index for widgets such as treeview
export const RovingTabIndexHomeEndHelper = ({children}) => {
const context = useContext(RovingTabIndexContext);
const onKeyDown = useCallback((ev) => {
// check if we actually have any items
if (state.refs.length <= 0) return;
if (context.state.refs.length <= 0) return;
let handled = true;
switch (ev.key) {
case Key.HOME:
// move focus to first item
setImmediate(() => state.refs[0].current.focus());
setImmediate(() => context.state.refs[0].current.focus());
break;
case Key.END:
// move focus to last item
state.refs[state.refs.length - 1].current.focus();
context.state.refs[context.state.refs.length - 1].current.focus();
break;
default:
handled = false;
@ -156,15 +167,10 @@ export const RovingTabIndexContextProvider = ({children}) => {
ev.preventDefault();
ev.stopPropagation();
}
}, [state]);
}, [context.state]);
const context = useMemo(() => ({state, dispatch}), [state]);
// wrap in a div with key-down handling for HOME/END keys
return <div onKeyDown={onKeyDown}>
<RovingTabIndexContext.Provider value={context}>
{children}
</RovingTabIndexContext.Provider>
{ children }
</div>;
};