; className?: string }> = ({
59 | node,
60 | className,
61 | children,
62 | }) => (
63 |
64 | {children || node.title}
65 |
66 | );
67 |
--------------------------------------------------------------------------------
/src/components/arc-scrollable.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 |
4 | import { instance } from '../singleton';
5 |
6 | /**
7 | * Scrollable marks the associated DOM node as being a scroll container for
8 | * arcade-machine. This will cause arcade-machine to ensure that, within these
9 | * scroll containers, any focused element is visible.
10 | */
11 | export class Scrollable extends React.PureComponent<{
12 | children: React.ReactNode;
13 | horizontal?: boolean;
14 | vertical?: boolean;
15 | }> {
16 | /**
17 | * The node this element is attached to.
18 | */
19 | private node!: HTMLElement;
20 |
21 | public componentDidMount() {
22 | const element = ReactDOM.findDOMNode(this);
23 | if (!(element instanceof HTMLElement)) {
24 | throw new Error(
25 | `Attempted to mount an not attached to an element, got ${element}`,
26 | );
27 | }
28 |
29 | this.node = element;
30 | instance.getServices().scrollRegistry.add({
31 | element,
32 | horizontal: this.props.horizontal === true,
33 | vertical: this.props.vertical !== false,
34 | });
35 | }
36 |
37 | public componentWillUnmount() {
38 | const services = instance.maybeGetServices();
39 | if (services) {
40 | services.scrollRegistry.remove(this.node);
41 | }
42 | }
43 |
44 | public render() {
45 | return this.props.children;
46 | }
47 | }
48 |
49 | /**
50 | * HOC to create a Scrollable.
51 | */
52 | export const ArcScrollable = (
53 | Composed: React.ComponentType
,
54 | vertical: boolean = true,
55 | horizontal: boolean = false,
56 | ) => (props: P) => (
57 |
58 |
59 |
60 | );
61 |
--------------------------------------------------------------------------------
/src/focus/dom-utils.ts:
--------------------------------------------------------------------------------
1 | import { instance } from '../singleton';
2 |
3 | export function roundRect(rect: HTMLElement | ClientRect): ClientRect {
4 | if (rect instanceof HTMLElement) {
5 | rect = rect.getBoundingClientRect();
6 | }
7 |
8 | // There's rounding here because floating points make certain math not work.
9 | return {
10 | bottom: Math.floor(rect.top + rect.height),
11 | height: Math.floor(rect.height),
12 | left: Math.floor(rect.left),
13 | right: Math.floor(rect.left + rect.width),
14 | top: Math.floor(rect.top),
15 | width: Math.floor(rect.width),
16 | };
17 | }
18 |
19 | /**
20 | * Returns whether the target DOM node is a child of the root.
21 | */
22 | export function isNodeAttached(node: HTMLElement | null, root: HTMLElement | null): boolean {
23 | if (!node || !root) {
24 | return false;
25 | }
26 | return root.contains(node);
27 | }
28 |
29 | /**
30 | * Returns whether the provided element is visible.
31 | */
32 | export function isVisible(element: HTMLElement | null): boolean {
33 | return !!element && (element.offsetHeight !== 0 || element.offsetParent !== null);
34 | }
35 |
36 | /**
37 | * Returns if the element can receive focus.
38 | */
39 | export function isFocusable(
40 | el: HTMLElement,
41 | activeElement = instance.getServices().elementStore.element,
42 | ): boolean {
43 | if (el === activeElement) {
44 | return false;
45 | }
46 | // to prevent navigating to parent container elements with arc-focus-inside
47 | if (activeElement !== document.body && activeElement.contains(el)) {
48 | return false;
49 | }
50 |
51 | // Dev note: el.tabindex is not consistent across browsers
52 | const tabIndex = el.getAttribute('tabIndex');
53 | if (!tabIndex || +tabIndex < 0) {
54 | return false;
55 | }
56 |
57 | return isVisible(el);
58 | }
59 |
--------------------------------------------------------------------------------
/docs/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
2 | const { resolve } = require('path');
3 |
4 | module.exports = {
5 | entry: './docs/index.tsx',
6 | devtool: 'source-map',
7 | mode: 'development',
8 | output: {
9 | filename: 'bundle.js',
10 | path: resolve(__dirname, '..', 'dist', 'docs'),
11 | },
12 | resolve: {
13 | extensions: ['.ts', '.tsx', '.js', '.woff', '.woff2'],
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: /\.tsx?$/,
19 | exclude: /node_modules/,
20 | loader: 'ts-loader',
21 | },
22 | {
23 | sideEffects: true,
24 | include: resolve(__dirname, 'index.scss'),
25 | use: ['style-loader', 'css-loader', 'sass-loader'],
26 | },
27 | {
28 | sideEffects: true,
29 | test: /\.css$/,
30 | use: ['style-loader', 'css-loader'],
31 | },
32 | {
33 | test: /\.component.scss$/,
34 | use: [
35 | {
36 | loader: 'style-loader',
37 | },
38 | {
39 | loader: 'css-loader',
40 | options: {
41 | modules: true,
42 | localIdentName: '[local]__[hash:base64:5]',
43 | },
44 | },
45 | {
46 | loader: 'sass-loader',
47 | },
48 | ],
49 | },
50 | {
51 | test: /\.(png|jpg|gif|woff|woff2)$/i,
52 | use: [
53 | {
54 | loader: 'url-loader',
55 | options: {
56 | limit: 8192,
57 | },
58 | },
59 | ],
60 | },
61 | ],
62 | },
63 | devServer: {
64 | disableHostCheck: true,
65 | },
66 | plugins: [
67 | new HtmlWebpackPlugin({
68 | title: 'Arcade Machine Documentation',
69 | }),
70 | ],
71 | };
72 |
--------------------------------------------------------------------------------
/src/state/state-container.ts:
--------------------------------------------------------------------------------
1 | import { IArcHandler } from '../model';
2 | import { ElementStateRecord } from './element-state-record';
3 |
4 | /**
5 | * One StateContainer is held per arcade-machine instance, and provided
6 | * in the context to lower components. It allows components to register
7 | * and unregister themselves to hook into events and customize how focus
8 | * is dealt with.
9 | */
10 | export class StateContainer {
11 | /**
12 | * Mapping of HTML elements to options set on those elements.
13 | */
14 | private readonly arcs = new Map();
15 |
16 | /**
17 | * Stores a directive into the registry.
18 | */
19 | public add(key: any, arc: IArcHandler) {
20 | const record = this.arcs.get(arc.element);
21 | if (record) {
22 | record.add(key, arc);
23 | } else {
24 | this.arcs.set(arc.element, new ElementStateRecord(key, arc));
25 | }
26 | }
27 |
28 | /**
29 | * Removes a directive from the registry.
30 | */
31 | public remove(key: any, el: HTMLElement) {
32 | const record = this.arcs.get(el);
33 | if (!record) {
34 | return;
35 | }
36 |
37 | record.remove(key);
38 |
39 | if (!record.resolved) {
40 | this.arcs.delete(el);
41 | }
42 | }
43 |
44 | /**
45 | * Returns the ArcDirective associated with the element. Returns
46 | * undefined if the element has no associated arc.
47 | */
48 | public find(el: HTMLElement): Readonly | undefined {
49 | const record = this.arcs.get(el);
50 | if (!record) {
51 | return undefined;
52 | }
53 | return record.resolved;
54 | }
55 |
56 | /**
57 | * Returns whether the given element exists in the arcade-machine state.
58 | */
59 | public has(el: HTMLElement): boolean {
60 | return this.arcs.has(el);
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/arc-autofocus.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { findFocusable } from '../internal-types';
3 | import { instance } from '../singleton';
4 |
5 | /**
6 | * Component that autofocuses whatever is contained inside it. By default,
7 | * it will focus its first direct child, but can also take a selector
8 | * or try to focus itself as a fallback. It will only run focusing
9 | * when it's first mounted.
10 | *
11 | * Note: for elements that have it, you should use the React built-in
12 | * autoFocus instead -- this is not present for elements which aren't
13 | * usually focusable, however.
14 | *
15 | * @example
16 | *
17 | * {contents}
18 | * {contents}
19 | */
20 | export class AutoFocus extends React.PureComponent<
21 | { target?: string | HTMLElement; selector?: string | HTMLElement } & React.HTMLAttributes<
22 | HTMLDivElement
23 | >
24 | > {
25 | private readonly container = React.createRef();
26 |
27 | public componentDidMount() {
28 | const node = this.container.current;
29 | if (!(node instanceof HTMLElement)) {
30 | return;
31 | }
32 |
33 | const focusTarget = findFocusable(node, this.props.target);
34 | if (focusTarget) {
35 | instance.getServices().elementStore.element = focusTarget;
36 | }
37 | }
38 |
39 | public render() {
40 | return {this.props.children}
;
41 | }
42 | }
43 |
44 | /**
45 | * HOC for the AutoFocus component.
46 | */
47 | export const ArcAutoFocus = (
48 | Composed: React.ComponentType
,
49 | target?: string | HTMLElement,
50 | ) => (props: P) => (
51 |
52 |
53 |
54 | );
55 |
--------------------------------------------------------------------------------
/src/input/directional-debouncer.ts:
--------------------------------------------------------------------------------
1 | import { IDebouncer } from './gamepad';
2 |
3 | const enum DebouncerStage {
4 | IDLE,
5 | HELD,
6 | FAST,
7 | }
8 |
9 | /**
10 | * DirectionalDebouncer debounces directional navigation like arrow keys,
11 | * handling "holding" states.
12 | */
13 | export class DirectionalDebouncer implements IDebouncer {
14 | /**
15 | * Initial debounce after a joystick is pressed before beginning shorter
16 | * press debouncded.
17 | */
18 | public static initialDebounce = 500;
19 |
20 | /**
21 | * Fast debounce time for joysticks when they're being held in a direction.
22 | */
23 | public static fastDebounce = 150;
24 |
25 | /**
26 | * The time that the debounce was initially started.
27 | */
28 | private heldAt = 0;
29 |
30 | /**
31 | * Current state of the debouncer.
32 | */
33 | private stage = DebouncerStage.IDLE;
34 |
35 | constructor(private predicate: () => boolean) {}
36 |
37 | /**
38 | * Returns whether the key should be registered as pressed.
39 | */
40 | public attempt(now: number): boolean {
41 | const result = this.predicate();
42 | if (!result) {
43 | this.stage = DebouncerStage.IDLE;
44 | return false;
45 | }
46 |
47 | switch (this.stage) {
48 | case DebouncerStage.IDLE:
49 | this.stage = DebouncerStage.HELD;
50 | this.heldAt = now;
51 | return true;
52 |
53 | case DebouncerStage.HELD:
54 | if (now - this.heldAt < DirectionalDebouncer.initialDebounce) {
55 | return false;
56 | }
57 | this.heldAt = now;
58 | this.stage = DebouncerStage.FAST;
59 | return true;
60 |
61 | case DebouncerStage.FAST:
62 | if (now - this.heldAt < DirectionalDebouncer.fastDebounce) {
63 | return false;
64 | }
65 | this.heldAt = now;
66 | return true;
67 |
68 | default:
69 | throw new Error(`Unknown debouncer stage ${this.stage}!`);
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/state/state-container.test.ts:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 |
3 | import { ArcEvent } from '../arc-event';
4 | import { Button } from '../model';
5 | import { StateContainer } from './state-container';
6 |
7 | describe('StateContainer', () => {
8 | it('adds, removes, and finds elements', () => {
9 | const store = new StateContainer();
10 | const element = document.createElement('div');
11 | expect(store.find(element)).to.be.undefined;
12 |
13 | store.add(0, { element, arcFocusDown: '.foo' });
14 | const result = store.find(element);
15 | expect(result).not.to.be.undefined;
16 | expect(result!.arcFocusDown).to.equal('.foo');
17 |
18 | store.remove(0, element);
19 | expect(store.find(element)).to.be.undefined;
20 | });
21 |
22 | it('merges in state', () => {
23 | const store = new StateContainer();
24 | const element = document.createElement('div');
25 | expect(store.find(element)).to.be.undefined;
26 |
27 | store.add(1, { element, arcFocusUp: '.up' });
28 | expect(store.find(element)).to.deep.equal({ element, arcFocusUp: '.up' });
29 |
30 | store.add(2, { element, arcFocusDown: '.down' });
31 | expect(store.find(element)).to.deep.equal({
32 | arcFocusDown: '.down',
33 | arcFocusUp: '.up',
34 | element,
35 | });
36 |
37 | store.remove(1, element);
38 | expect(store.find(element)).to.deep.equal({ element, arcFocusDown: '.down' });
39 |
40 | store.remove(2, element);
41 | expect(store.find(element)).to.be.undefined;
42 | });
43 |
44 | it('combines function calls', () => {
45 | const calls: number[] = [];
46 | const store = new StateContainer();
47 | const element = document.createElement('div');
48 |
49 | store.add(0, { element, onButton: () => calls.push(0) });
50 | store.add(1, { element, onButton: () => calls.push(1) });
51 | store.add(2, { element, onButton: ev => ev.stopPropagation() });
52 | store.add(3, { element, onButton: () => calls.push(3) });
53 | store.find(element)!.onButton!(new ArcEvent({ event: Button.Submit, target: document.body }));
54 |
55 | expect(calls).to.deep.equal([0, 1]);
56 | });
57 | });
58 |
--------------------------------------------------------------------------------
/src/components/arc-exclude.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 |
4 | import { instance } from '../singleton';
5 |
6 | /**
7 | * FocusExclude will exclude the attached element, and optionally its
8 | * subtree, from taking any arcade-machine focus.
9 | */
10 | export class FocusExclude extends React.PureComponent<{
11 | children: React.ReactNode;
12 | active?: boolean;
13 | deep?: boolean;
14 | }> {
15 | /**
16 | * The node this element is attached to.
17 | */
18 | private node!: HTMLElement;
19 |
20 | public componentDidMount() {
21 | const element = ReactDOM.findDOMNode(this);
22 | if (!(element instanceof HTMLElement)) {
23 | throw new Error(
24 | `Attempted to mount an not attached to an element, got ${element}`,
25 | );
26 | }
27 |
28 | instance.getServices().stateContainer.add(this, {
29 | element,
30 | onIncoming: ev => {
31 | if (!ev.next || this.props.active === false) {
32 | return;
33 | }
34 |
35 | const exclusions = new Set();
36 | while (this.isElementExcluded(ev.next)) {
37 | exclusions.add(ev.next!);
38 | ev.next = ev.focusContext.find(undefined, exclusions);
39 | }
40 | },
41 | });
42 |
43 | this.node = element;
44 | }
45 |
46 | public componentWillUnmount() {
47 | const services = instance.maybeGetServices();
48 | if (services) {
49 | services.stateContainer.remove(this, this.node);
50 | }
51 | }
52 |
53 | public render() {
54 | return this.props.children;
55 | }
56 |
57 | private isElementExcluded(element: HTMLElement | null): boolean {
58 | if (!element) {
59 | return false;
60 | }
61 |
62 | if (this.props.deep !== false) {
63 | return this.node.contains(element);
64 | }
65 |
66 | return this.node === element;
67 | }
68 | }
69 |
70 | /**
71 | * HOC to create a FocusExclude.
72 | */
73 | export const ArcFocusExclude = (
74 | Composed: React.ComponentType
,
75 | deep?: boolean,
76 | ) => (props: P) => (
77 |
78 |
79 |
80 | );
81 |
--------------------------------------------------------------------------------
/src/singleton.ts:
--------------------------------------------------------------------------------
1 | import { IElementStore } from './focus';
2 | import { RootStore } from './root-store';
3 | import { ScrollRegistry } from './scroll/scroll-registry';
4 | import { StateContainer } from './state/state-container';
5 |
6 | /**
7 | * IArcServices is held in the ArcSingleton.
8 | */
9 | export interface IArcServices {
10 | root: RootStore;
11 | elementStore: IElementStore;
12 | stateContainer: StateContainer;
13 | scrollRegistry: ScrollRegistry;
14 | }
15 |
16 | /**
17 | * The ArcSingleton stores the currently active arcade-machine root and
18 | * services on the page.
19 | *
20 | * Singletons are bad and all that, but generally it never (currently) makes
21 | * sense to have multiple arcade-machine roots, as they all would clobber over
22 | * each others' input. Using a singleton rather than, say, react contexts,
23 | * gives us simpler (and less) code, with better performance.
24 | */
25 | export class ArcSingleton {
26 | private services: IArcServices | undefined;
27 |
28 | /**
29 | * setServices is called by the ArcRoot when it gets set up.
30 | */
31 | public setServices(services: Partial | undefined) {
32 | if (this.services && services) {
33 | throw new Error(
34 | 'Attempted to register a second without destroying the first one. ' +
35 | 'Only one arcade-machine root component may be used at once.',
36 | );
37 | }
38 |
39 | if (!services) {
40 | this.services = undefined;
41 | return;
42 | }
43 |
44 | this.services = {
45 | elementStore: services.elementStore!,
46 | root: services.root!,
47 | scrollRegistry: new ScrollRegistry(),
48 | stateContainer: new StateContainer(),
49 | ...services,
50 | };
51 | }
52 |
53 | /**
54 | * Returns the services. Throws if none are registered.
55 | */
56 | public getServices(): IArcServices {
57 | if (!this.services) {
58 | throw new Error('You cannot use arcade-machine functionality without an .');
59 | }
60 |
61 | return this.services;
62 | }
63 |
64 | /**
65 | * Returns the services, or void if none found.
66 | */
67 | public maybeGetServices(): IArcServices | void {
68 | return this.services;
69 | }
70 | }
71 |
72 | export const instance = new ArcSingleton();
73 |
--------------------------------------------------------------------------------
/src/components/arc-scope.test.tsx:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import * as React from 'react';
3 |
4 | import { NativeElementStore } from '../focus/native-element-store';
5 | import { instance } from '../singleton';
6 | import { StateContainer } from '../state/state-container';
7 | import { ArcDown, ArcUp } from './arc-scope';
8 | import { mountToDOM, unmountAll } from './util.test';
9 |
10 | describe('ArcScope', () => {
11 | const render = (Component: React.ComponentType<{}>) => {
12 | const state = new StateContainer();
13 | instance.setServices({
14 | elementStore: new NativeElementStore(),
15 | stateContainer: state,
16 | });
17 |
18 | const contents = mountToDOM(
19 |
20 |
21 |
,
22 | );
23 |
24 | return {
25 | contents,
26 | state,
27 | };
28 | };
29 |
30 | it('renders and stores data in the state', () => {
31 | const { state, contents } = render(ArcDown('#foo', () => ));
32 | const targetEl = contents.getDOMNode().querySelector('.testclass') as HTMLElement;
33 | expect(targetEl).to.not.be.undefined;
34 | const record = state.find(targetEl);
35 | expect(record).to.not.be.undefined;
36 | expect(record!.arcFocusDown).to.equal('#foo');
37 | expect(record!.element).to.equal(targetEl);
38 | });
39 |
40 | it('removes state when unmounting the component', () => {
41 | const { state, contents } = render(ArcDown('#foo', () => ));
42 | const targetEl = contents.getDOMNode().querySelector('.testclass') as HTMLElement;
43 | unmountAll();
44 | expect(state.find(targetEl)).to.be.undefined;
45 | });
46 |
47 | it('composes multiple arc scopes into a single context', () => {
48 | const { state, contents } = render(
49 | ArcDown('#foo', ArcUp('#bar', () => )),
50 | );
51 | const targetEl = contents.getDOMNode().querySelector('.testclass') as HTMLElement;
52 | const record = state.find(targetEl);
53 | expect(record).to.not.be.undefined;
54 | expect(record!.arcFocusDown).to.equal('#foo');
55 | expect(record!.arcFocusUp).to.equal('#bar');
56 | expect(record!.element).to.equal(targetEl);
57 |
58 | expect((state as any).arcs.get(targetEl).records).to.have.lengthOf(1);
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/src/focus/is-for-form.ts:
--------------------------------------------------------------------------------
1 | import { Button } from '../model';
2 |
3 | /**
4 | * Based on the currently focused DOM element, returns whether the directional
5 | * input is part of a form control and should be allowed to bubble through.
6 | */
7 | export function isForForm(direction: Button, selected: HTMLElement | null): boolean {
8 | if (!selected) {
9 | return false;
10 | }
11 |
12 | // Always allow the browser to handle enter key presses in a form or text area.
13 | if (direction === Button.Submit) {
14 | let parent: HTMLElement | null = selected;
15 | while (parent) {
16 | if (
17 | parent.tagName === 'FORM' ||
18 | parent.tagName === 'TEXTAREA' ||
19 | (parent.tagName === 'INPUT' &&
20 | (parent as HTMLInputElement).type !== 'button' &&
21 | (parent as HTMLInputElement).type !== 'checkbox' &&
22 | (parent as HTMLInputElement).type !== 'radio')
23 | ) {
24 | return true;
25 | }
26 | parent = parent.parentElement;
27 | }
28 |
29 | return false;
30 | }
31 |
32 | // Okay, not a submission? Well, if we aren't inside a text input, go ahead
33 | // and let arcade-machine try to deal with the output.
34 | const tag = selected.tagName;
35 | if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
36 | return false;
37 | }
38 |
39 | // We'll say that up/down has no effect.
40 | if (direction === Button.Down || direction === Button.Up) {
41 | return false;
42 | }
43 |
44 | // Deal with the output ourselves, allowing arcade-machine to handle it only
45 | // if the key press would not have any effect in the context of the input.
46 | const input = selected as HTMLInputElement | HTMLTextAreaElement;
47 | const { type } = input;
48 | if (
49 | type !== 'text' &&
50 | type !== 'search' &&
51 | type !== 'url' &&
52 | type !== 'tel' &&
53 | type !== 'password' &&
54 | type !== 'textarea'
55 | ) {
56 | return false;
57 | }
58 |
59 | const cursor = input.selectionStart;
60 | if (cursor !== input.selectionEnd) {
61 | // key input on any range selection will be effectual.
62 | return true;
63 | }
64 |
65 | if (cursor === null) {
66 | return false;
67 | }
68 |
69 | return (
70 | (cursor > 0 && direction === Button.Left) ||
71 | (cursor > 0 && direction === Button.Back) ||
72 | (cursor < input.value.length && direction === Button.Right)
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/src/input/xbox-gamepad.ts:
--------------------------------------------------------------------------------
1 | import { Button, nonDirectionalButtons } from '../model';
2 | import { DirectionalDebouncer } from './directional-debouncer';
3 | import { FiredDebouncer } from './fired-debouncer';
4 | import { IGamepadWrapper } from './gamepad';
5 |
6 | /**
7 | * XboxGamepadWrapper wraps an Xbox controller input for arcade-machine.
8 | */
9 | export class XboxGamepadWrapper implements IGamepadWrapper {
10 | /**
11 | * Magnitude that joysticks have to go in one direction to be translated
12 | * into a direction key press.
13 | */
14 | public static joystickThreshold = 0.5;
15 |
16 | /**
17 | * Map from Direction to a function that takes a time (now) and returns
18 | * whether that direction fired
19 | */
20 | public events = new Map boolean>();
21 |
22 | constructor(public pad: Gamepad) {
23 | const left = new DirectionalDebouncer(() => {
24 | /* left joystick */
25 | return (
26 | this.pad.axes[0] < -XboxGamepadWrapper.joystickThreshold ||
27 | this.pad.buttons[Button.Left].pressed
28 | );
29 | });
30 | const right = new DirectionalDebouncer(() => {
31 | /* right joystick */
32 | return (
33 | this.pad.axes[0] > XboxGamepadWrapper.joystickThreshold ||
34 | this.pad.buttons[Button.Right].pressed
35 | );
36 | });
37 | const up = new DirectionalDebouncer(() => {
38 | /* up joystick */
39 | return (
40 | this.pad.axes[1] < -XboxGamepadWrapper.joystickThreshold ||
41 | this.pad.buttons[Button.Up].pressed
42 | );
43 | });
44 | const down = new DirectionalDebouncer(() => {
45 | /* down joystick */
46 | return (
47 | this.pad.axes[1] > XboxGamepadWrapper.joystickThreshold ||
48 | this.pad.buttons[Button.Down].pressed
49 | );
50 | });
51 |
52 | this.events.set(Button.Left, now => left.attempt(now));
53 | this.events.set(Button.Right, now => right.attempt(now));
54 | this.events.set(Button.Up, now => up.attempt(now));
55 | this.events.set(Button.Down, now => down.attempt(now));
56 |
57 | for (const button of nonDirectionalButtons) {
58 | const debouncer = new FiredDebouncer(() => this.pad.buttons[button].pressed);
59 | this.events.set(button, () => debouncer.attempt());
60 | }
61 | }
62 |
63 | public isConnected() {
64 | return this.pad.connected;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Much of the code and algorithms in this project are from the project at
2 | https://git.io/vPxQQ, which is provided under the following license:
3 |
4 | The MIT License (MIT)
5 |
6 | Copyright (c) 2016 Microsoft. All rights reserved.
7 |
8 | Permission is hereby granted, free of charge, to any person obtaining a copy
9 | of this software and associated documentation files (the "Software"), to deal
10 | in the Software without restriction, including without limitation the rights
11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
12 | copies of the Software, and to permit persons to whom the Software is
13 | furnished to do so, subject to the following conditions:
14 |
15 | The above copyright notice and this permission notice shall be included in
16 | all copies or substantial portions of the Software.
17 |
18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24 | THE SOFTWARE.
25 | -------------------------------------------------------------------------------
26 |
27 |
28 | The original code in this project is available under the following license:
29 |
30 | MIT License
31 |
32 | Copyright (c) Microsoft
33 |
34 | Permission is hereby granted, free of charge, to any person obtaining a copy
35 | of this software and associated documentation files (the "Software"), to deal
36 | in the Software without restriction, including without limitation the rights
37 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
38 | copies of the Software, and to permit persons to whom the Software is
39 | furnished to do so, subject to the following conditions:
40 |
41 | The above copyright notice and this permission notice shall be included in all
42 | copies or substantial portions of the Software.
43 |
44 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
45 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
46 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
47 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
48 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
49 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
50 | SOFTWARE.
51 |
--------------------------------------------------------------------------------
/src/input/keyboard-input.ts:
--------------------------------------------------------------------------------
1 | import { fromEvent } from 'rxjs';
2 | import { filter, map } from 'rxjs/operators';
3 | import { keys } from 'uwp-keycodes';
4 |
5 | import { Button } from '../model';
6 | import { IInputMethod, IInputObservation } from './input-method';
7 |
8 | export class KeyboardInput implements IInputMethod {
9 | /**
10 | * codeToDirection returns a direction from keyCode
11 | */
12 | public static readonly defaultCodeDirectionMap = new Map([
13 | [keys.LeftArrow, Button.Left],
14 | [keys.GamepadLeftThumbstickLeft, Button.Left],
15 | [keys.GamepadDPadLeft, Button.Left],
16 | [keys.NavigationLeft, Button.Left],
17 |
18 | [keys.RightArrow, Button.Right],
19 | [keys.GamepadLeftThumbstickRight, Button.Right],
20 | [keys.GamepadDPadRight, Button.Right],
21 | [keys.NavigationRight, Button.Right],
22 |
23 | [keys.UpArrow, Button.Up],
24 | [keys.GamepadLeftThumbstickUp, Button.Up],
25 | [keys.GamepadDPadUp, Button.Up],
26 | [keys.NavigationUp, Button.Up],
27 |
28 | [keys.DownArrow, Button.Down],
29 | [keys.GamepadLeftThumbstickDown, Button.Down],
30 | [keys.GamepadDPadDown, Button.Down],
31 | [keys.NavigationDown, Button.Down],
32 |
33 | [keys.Enter, Button.Submit],
34 | [keys.NavigationAccept, Button.Submit],
35 | [keys.GamepadA, Button.Submit],
36 |
37 | [keys.Escape, Button.Back],
38 | [keys.GamepadB, Button.Back],
39 |
40 | [keys.Numpad7, Button.X],
41 | [keys.GamepadX, Button.X],
42 | [keys.Numpad9, Button.Y],
43 | [keys.GamepadY, Button.Y],
44 |
45 | [keys.Numpad4, Button.TabLeft],
46 | [keys.GamepadLeftShoulder, Button.TabLeft],
47 | [keys.Numpad6, Button.TabRight],
48 | [keys.GamepadRightShoulder, Button.TabRight],
49 | [keys.Numpad8, Button.TabUp],
50 | [keys.GamepadLeftTrigger, Button.TabUp],
51 | [keys.Numpad2, Button.TabDown],
52 | [keys.GamepadRightTrigger, Button.TabDown],
53 |
54 | [keys.Divide, Button.View],
55 | [keys.GamepadView, Button.View],
56 | [keys.Multiply, Button.Menu],
57 | [keys.GamepadMenu, Button.Menu],
58 | ]);
59 |
60 | public readonly observe = fromEvent(window, 'keydown').pipe(
61 | map(event => {
62 | const button = this.directionMap.get(event.keyCode);
63 | if (button === undefined) {
64 | return undefined as unknown;
65 | }
66 |
67 | return { button, event };
68 | }),
69 | filter((ev): ev is IInputObservation => ev !== undefined),
70 | );
71 |
72 | public readonly isSupported = true;
73 |
74 | constructor(private readonly directionMap = KeyboardInput.defaultCodeDirectionMap) {}
75 | }
76 |
--------------------------------------------------------------------------------
/src/state/element-state-record.ts:
--------------------------------------------------------------------------------
1 | import { ArcEvent } from '../arc-event';
2 | import { IArcHandler } from '../model';
3 |
4 | const functionCalls: Array<'onOutgoing' | 'onIncoming' | 'onButton'> = [
5 | 'onOutgoing',
6 | 'onIncoming',
7 | 'onButton',
8 | ];
9 |
10 | /**
11 | * ElementStateRecord is stored in the StateContainer. A single element might
12 | * have several records attached to it; the ArcRecord collates and merges them
13 | * into a single handler.
14 | */
15 | export class ElementStateRecord {
16 | /**
17 | * The merged handler, suitable for public use.
18 | */
19 | public resolved: Readonly | undefined;
20 |
21 | /**
22 | * A list of all registered handlers.
23 | */
24 | private readonly records: Array<{ key: any; handler: IArcHandler }>;
25 |
26 | constructor(key: any, initialHandler: IArcHandler) {
27 | this.resolved = initialHandler;
28 | this.records = [{ key, handler: initialHandler }];
29 | }
30 |
31 | public add(key: any, arc: IArcHandler) {
32 | const existing = this.records.findIndex(r => r.key === key);
33 | if (existing > -1) {
34 | this.records[existing] = { key, handler: arc };
35 | } else {
36 | this.records.push({ key, handler: arc });
37 | }
38 | this.recreateResolved();
39 | }
40 |
41 | public remove(key: any) {
42 | const index = this.records.findIndex(r => r.key === key);
43 | if (index > -1) {
44 | this.records.splice(index, 1);
45 | }
46 | this.recreateResolved();
47 | }
48 |
49 | private callForEach(method: 'onOutgoing' | 'onIncoming' | 'onButton') {
50 | return (arg: HTMLElement | ArcEvent | null) => {
51 | for (const record of this.records) {
52 | const fn = record.handler[method];
53 | if (!fn) {
54 | continue;
55 | }
56 |
57 | (fn as any)(arg);
58 |
59 | if (arg instanceof ArcEvent && (arg as any).propogationStopped) {
60 | break;
61 | }
62 | }
63 | };
64 | }
65 |
66 | private recreateResolved() {
67 | if (this.records.length === 0) {
68 | this.resolved = undefined;
69 | return;
70 | }
71 | if (this.records.length === 1) {
72 | this.resolved = this.records[0].handler;
73 | return;
74 | }
75 |
76 | const resolved = { ...this.records[0].handler };
77 | for (let i = 1; i < this.records.length; i++) {
78 | Object.assign(resolved, this.records[i].handler);
79 | }
80 |
81 | for (const call of functionCalls) {
82 | if (resolved[call]) {
83 | resolved[call] = this.callForEach(call);
84 | }
85 | }
86 |
87 | this.resolved = resolved;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/arc-focus-area.test.tsx:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import * as React from 'react';
3 |
4 | import { ArcFocusEvent } from '../arc-focus-event';
5 | import { NativeElementStore } from '../focus/native-element-store';
6 | import { Button } from '../model';
7 | import { instance } from '../singleton';
8 | import { StateContainer } from '../state/state-container';
9 | import { FocusArea } from './arc-focus-area';
10 | import { mountToDOM, NoopFocusContext } from './util.test';
11 |
12 | describe('ArcFocusArea', () => {
13 | const render = (focusIn?: string) => {
14 | const state = new StateContainer();
15 | instance.setServices({
16 | elementStore: new NativeElementStore(),
17 | stateContainer: state,
18 | });
19 |
20 | const contents = mountToDOM(
21 |
22 |
23 |
24 |
25 |
26 |
27 |
16 | {childKeys.map(key => (
17 | -
18 |
19 |
20 | ))}
21 |
22 | )}
23 |
24 | );
25 | };
26 |
27 | export class Sidebar extends React.PureComponent<
28 | { node: NavNode },
29 | { active: string | null }
30 | > {
31 | public state: { active: string | null } = { active: null };
32 | private subscriptions: Subscription[] = [];
33 | private cachedPositions?: [NavNode, number][];
34 |
35 | public componentDidMount() {
36 | this.subscriptions.push(
37 | fromEvent(window, 'scroll', { passive: true })
38 | .pipe(
39 | throttleTime(10),
40 | map(() => {
41 | const items = this.getPositions();
42 | const best = items.find(n => n[1] < window.scrollY + 50);
43 | return best ? best[0] : items[items.length - 1][0];
44 | }),
45 | filter(node => node !== this.state.active),
46 | )
47 | .subscribe(node => {
48 | this.setState({ active: node.link });
49 | }),
50 | );
51 |
52 | this.subscriptions.push(
53 | fromEvent(window, 'resize').subscribe(() => (this.cachedPositions = undefined)),
54 | );
55 | }
56 |
57 | public componentWillUnmount() {
58 | this.subscriptions.forEach(s => s.unsubscribe());
59 | }
60 |
61 | public render() {
62 | return (
63 |
64 |
65 |
66 | );
67 | }
68 |
69 | private getPositions = () => {
70 | if (this.cachedPositions) {
71 | return this.cachedPositions;
72 | }
73 |
74 | this.cachedPositions = [];
75 | for (const node of flatten(this.props.node)) {
76 | const el = document.getElementById(node.link);
77 | if (el) {
78 | this.cachedPositions.push([node, el.offsetTop]);
79 | }
80 | }
81 |
82 | this.cachedPositions.sort((a, b) => b[1] - a[1]);
83 | return this.cachedPositions;
84 | };
85 | }
86 |
--------------------------------------------------------------------------------
/src/scroll/smooth-scrolling-algorithm.ts:
--------------------------------------------------------------------------------
1 | import { IScrollingAlgorithm } from './index';
2 | import { IScrollableContainer } from './scroll-registry';
3 | import { horizontalDelta, verticalDelta } from './util';
4 |
5 | /**
6 | * An EasingFunction is passed into the SmoothScrollingAlgorithm. It takes
7 | * a bounds and a progress percentage, from 0 to 1, and returns the number
8 | * we should be at.
9 | */
10 | export type EasingFunction = (start: number, end: number, progress: number) => number;
11 |
12 | /**
13 | * A quadratic smooth scrolling algorithm.
14 | */
15 | function quadSmoothing(start: number, end: number, progress: number): number {
16 | const diff = end - start;
17 | if (progress < 0.5) {
18 | return diff * (2 * progress ** 2) + start;
19 | } else {
20 | const displaced = progress - 1;
21 | return diff * (-2 * displaced ** 2 + 1) + start;
22 | }
23 | }
24 |
25 | /**
26 | * SmoothScrollingAlgorithm is a scrolling algorithm that gradually moves
27 | * to the target element using the provided algorithm.
28 | */
29 | export class SmoothScrollingAlgorithm implements IScrollingAlgorithm {
30 | constructor(
31 | private readonly scrollSpeed: number = 1000,
32 | private readonly smoothing: EasingFunction = quadSmoothing,
33 | ) {}
34 |
35 | public scrollTo(
36 | parent: Readonly,
37 | // tslint:disable-next-line
38 | _el: HTMLElement,
39 | referenceRect: ClientRect,
40 | ): void {
41 | // Animation function to transition a scroll on the `parent` from the
42 | // `original` value to the `target` value by calling `set.
43 | const animate = (delta: number, original: number, setter: (x: number) => void) => {
44 | if (delta === 0) {
45 | return;
46 | }
47 | const target = original + delta;
48 | const start = performance.now();
49 | const duration = (Math.abs(target - original) / this.scrollSpeed) * 1000;
50 | const run = (now: number) => {
51 | const progress = Math.min((now - start) / duration, 1);
52 | setter(this.smoothing(original, target, progress));
53 |
54 | if (progress < 1) {
55 | requestAnimationFrame(run);
56 | }
57 | };
58 |
59 | requestAnimationFrame(run);
60 | };
61 |
62 | const reference = parent.element.getBoundingClientRect();
63 | if (parent.horizontal) {
64 | animate(
65 | horizontalDelta(referenceRect, reference),
66 | parent.element.scrollLeft,
67 | x => (parent.element.scrollLeft = x),
68 | );
69 | }
70 |
71 | if (parent.vertical) {
72 | animate(
73 | verticalDelta(referenceRect, reference),
74 | parent.element.scrollTop,
75 | x => (parent.element.scrollTop = x),
76 | );
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/focus/focus-by-raycast.ts:
--------------------------------------------------------------------------------
1 | import { Button, isHorizontal } from '../model';
2 | import { isFocusable, isNodeAttached } from './dom-utils';
3 | import { IFocusOptions, IFocusStrategy } from './index';
4 |
5 | // These factors can be tweaked to adjust which elements are favored by the focus algorithm
6 | const scoringConstants = {
7 | fastSearchMaxPointChecks: 30,
8 | fastSearchMinimumDistance: 40,
9 | fastSearchPointDistance: 10,
10 | maxFastSearchSize: 0.5,
11 | };
12 |
13 | /**
14 | * findNextFocusByRaycast is a speedy implementation of focus searching
15 | * that uses a raycast to determine the next best element.
16 | */
17 | export class FocusByRaycastStrategy implements IFocusStrategy {
18 | public findNextFocus({ referenceRect, direction, activeElement, root }: IFocusOptions) {
19 | let maxDistance =
20 | scoringConstants.maxFastSearchSize *
21 | (isHorizontal(direction) ? referenceRect.width : referenceRect.height);
22 | if (maxDistance < scoringConstants.fastSearchMinimumDistance) {
23 | maxDistance = scoringConstants.fastSearchMinimumDistance;
24 | }
25 |
26 | // Sanity check so that we don't freeze if we get some insanely big element
27 | let searchPointDistance = scoringConstants.fastSearchPointDistance;
28 | if (maxDistance / searchPointDistance > scoringConstants.fastSearchMaxPointChecks) {
29 | searchPointDistance = maxDistance / scoringConstants.fastSearchMaxPointChecks;
30 | }
31 |
32 | let baseX: number;
33 | let baseY: number;
34 | let seekX = 0;
35 | let seekY = 0;
36 | switch (direction) {
37 | case Button.Left:
38 | baseX = referenceRect.left - 1;
39 | baseY = referenceRect.top + referenceRect.height / 2;
40 | seekX = -1;
41 | break;
42 | case Button.Right:
43 | baseX = referenceRect.left + referenceRect.width + 1;
44 | baseY = referenceRect.top + referenceRect.height / 2;
45 | seekX = 1;
46 | break;
47 | case Button.Up:
48 | baseX = referenceRect.left + referenceRect.width / 2;
49 | baseY = referenceRect.top - 1;
50 | seekY = -1;
51 | break;
52 | case Button.Down:
53 | baseX = referenceRect.left + referenceRect.width / 2;
54 | baseY = referenceRect.top + referenceRect.height + 1;
55 | seekY = 1;
56 | break;
57 | default:
58 | throw new Error('Invalid direction');
59 | }
60 |
61 | for (let i = 0; i < maxDistance; i += searchPointDistance) {
62 | const el = document.elementFromPoint(baseX + seekX * i, baseY + seekY * i) as HTMLElement;
63 |
64 | if (!el || el === activeElement) {
65 | continue;
66 | }
67 |
68 | if (!isNodeAttached(el, root) || !isFocusable(el, activeElement)) {
69 | continue;
70 | }
71 |
72 | return el;
73 | }
74 |
75 | return null;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/focus/index.ts:
--------------------------------------------------------------------------------
1 | import { Button, IArcHandler } from '../model';
2 |
3 | export interface IFocusOptions {
4 | /**
5 | * The direction the focus is going.
6 | */
7 | direction: Button;
8 |
9 | /**
10 | * Root of the arcade-machine focus tree.
11 | */
12 | root: HTMLElement;
13 |
14 | /**
15 | * The current element that is focused.
16 | */
17 | activeElement: HTMLElement;
18 |
19 | /**
20 | * The last element that was focused.
21 | */
22 | previousElement: HTMLElement;
23 |
24 | /**
25 | * The position of the last selected element.
26 | */
27 | referenceRect: ClientRect;
28 |
29 | /**
30 | * Elements to exclude from the ones to find.
31 | */
32 | ignore: ReadonlySet;
33 |
34 | /**
35 | * The handler for the selected element, if any.
36 | */
37 | directive?: Readonly;
38 | }
39 |
40 | /**
41 | * The IElementStore holds which item is currently in focus on the page.
42 | * The focus servers will get *and set* the element to trigger focus changes.
43 | */
44 | export interface IElementStore {
45 | element: HTMLElement;
46 | }
47 |
48 | /**
49 | * The FocusContext is created for each focus change operation. It contains
50 | * the direction the focus is shifting, and the currently selected element
51 | * along with the reference rectangle. It can then be used to query for
52 | * focusable elements.
53 | */
54 | export class FocusContext {
55 | constructor(
56 | private readonly defaultRoot: HTMLElement,
57 | private readonly direction: Button,
58 | private readonly strategies: IFocusStrategy[],
59 | private readonly source: {
60 | activeElement: HTMLElement;
61 | directive?: Readonly;
62 | referenceRect: ClientRect;
63 | previousElement?: HTMLElement;
64 | },
65 | ) {}
66 |
67 | /**
68 | * Find attempts to look for the next best focusable element within the
69 | * given focus root.
70 | */
71 | public find(
72 | root: HTMLElement = this.defaultRoot,
73 | ignore: ReadonlySet = new Set(),
74 | ): HTMLElement | null {
75 | const options: IFocusOptions = {
76 | previousElement: this.source.activeElement,
77 | ...this.source,
78 | direction: this.direction,
79 | ignore,
80 | root,
81 | };
82 |
83 | for (const strategy of this.strategies) {
84 | const selection = strategy.findNextFocus(options);
85 | if (selection) {
86 | return selection;
87 | }
88 | }
89 |
90 | return null;
91 | }
92 | }
93 |
94 | /**
95 | * IFocusStrategy is a method of finding the next focusable element. Used
96 | * within the focus service.
97 | */
98 | export interface IFocusStrategy {
99 | findNextFocus(options: IFocusOptions): HTMLElement | null;
100 | }
101 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mixer/arcade-machine-react",
3 | "version": "1.1.0",
4 | "description": "Input abstraction layer for gamepads, keyboards, and UWP apps",
5 | "module": "dist/index.js",
6 | "main": "dist/cjs/index.js",
7 | "sideEffects": false,
8 | "scripts": {
9 | "test": "npm-run-all -p lint:ts test:unit test:fmt",
10 | "test:unit": "karma start test/karma.config.js --single-run",
11 | "test:watch": "karma start test/karma.config.js --watch",
12 | "test:fmt": "prettier --list-different \"{src,docs}/**/*.{json,ts,tsx}\"",
13 | "start": "webpack-dev-server --config docs/webpack.config.js",
14 | "build": "tsc && tsc -p tsconfig.cjs.json",
15 | "build:docs": "webpack --config docs/webpack.production.js",
16 | "prepare": "npm run build",
17 | "lint:ts": "tslint --project tsconfig.json --fix \"{src,docs}/**/*.{ts,tsx}\"",
18 | "fmt": "prettier --write \"{src,docs}/**/*.{json,ts,tsx}\" && npm run lint:ts -- --fix"
19 | },
20 | "author": "Connor Peet ",
21 | "license": "MIT",
22 | "devDependencies": {
23 | "@ibm/plex": "^2.0.0",
24 | "@types/chai": "^4.1.7",
25 | "@types/enzyme": "^3.9.3",
26 | "@types/mocha": "^5.2.7",
27 | "@types/react": "^16.8.19",
28 | "@types/react-dom": "^16.8.4",
29 | "@types/react-highlight": "^0.12.1",
30 | "@types/winrt-uwp": "0.0.19",
31 | "chai": "^4.2.0",
32 | "css-loader": "^2.1.1",
33 | "enzyme": "^3.10.0",
34 | "enzyme-adapter-react-16": "^1.14.0",
35 | "file-loader": "^4.0.0",
36 | "html-webpack-plugin": "^3.2.0",
37 | "karma": "^4.1.0",
38 | "karma-chrome-launcher": "^2.2.0",
39 | "karma-mocha": "^1.3.0",
40 | "karma-mocha-reporter": "^2.2.5",
41 | "karma-sourcemap-loader": "^0.3.7",
42 | "karma-typescript": "^4.1.0",
43 | "karma-webpack": "^3.0.5",
44 | "mocha": "^6.1.4",
45 | "node-sass": "^4.12.0",
46 | "normalize.css": "^8.0.1",
47 | "npm-run-all": "^4.1.5",
48 | "prettier": "^1.18.2",
49 | "prism-react-renderer": "^0.1.6",
50 | "raw-loader": "^3.0.0",
51 | "react": "^16.8.6",
52 | "react-dom": "^16.8.6",
53 | "react-github-corner": "^2.3.0",
54 | "react-highlight": "^0.12.0",
55 | "react-reconciler": "^0.20.4",
56 | "rxjs": "^6.5.2",
57 | "sass-loader": "^7.1.0",
58 | "style-loader": "^0.23.1",
59 | "ts-loader": "^5.4.5",
60 | "tslint": "^5.17.0",
61 | "tslint-config-prettier": "^1.18.0",
62 | "tslint-react": "^4.0.0",
63 | "typescript": "^3.5.1",
64 | "url-loader": "^2.0.0",
65 | "webpack": "^4.33.0",
66 | "webpack-cli": "^3.3.3",
67 | "webpack-dev-server": "^3.7.1"
68 | },
69 | "peerDependencies": {
70 | "react": "^16.8.0",
71 | "rxjs": "^6.0.0"
72 | },
73 | "prettier": {
74 | "trailingComma": "all",
75 | "singleQuote": true,
76 | "printWidth": 100,
77 | "tabWidth": 2
78 | },
79 | "dependencies": {
80 | "uwp-keycodes": "^1.1.1"
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/arc-focus-trap.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { findElement, findFocusable } from '../internal-types';
3 | import { instance } from '../singleton';
4 |
5 | /**
6 | * Properties passed to the FocusTrap.
7 | */
8 | export interface IFocusTrapProps {
9 | children: React.ReactNode;
10 | focusIn?: HTMLElement | string;
11 | focusOut?: HTMLElement | string;
12 | }
13 |
14 | /**
15 | * The ArcFocusTrap prevents focus from leaving the given area of the DOM,
16 | * until the trap is destroyed. When initially mounted, it will move
17 | * focus to the first focusable element inside of it, or the focusIn element,
18 | * if the focus hasn't yet been changed (i.e. if there's no other autofocused
19 | * element).
20 | *
21 | * When unmounted, it will give focus back to the element focused before the
22 | * trap was created, unless an override is given
23 | *
24 | * @example
25 | *
26 | *
27 | *
28 | *
29 | *
30 | */
31 | export class FocusTrap extends React.PureComponent<
32 | IFocusTrapProps & React.HTMLAttributes
33 | > {
34 | private containerRef = React.createRef();
35 | private previouslyFocusedElement!: HTMLElement;
36 |
37 | public componentWillMount() {
38 | this.previouslyFocusedElement = instance.getServices().elementStore.element;
39 | }
40 |
41 | public componentDidMount() {
42 | const element = this.containerRef.current!;
43 |
44 | // setTimeout to give time for any autofocusing to fire before we go
45 | // ahead and force the focus over.
46 | setTimeout(() => {
47 | const store = instance.getServices().elementStore;
48 | if (!element.contains(store.element)) {
49 | const next = findFocusable(element, this.props.focusIn);
50 | if (next) {
51 | store.element = next;
52 | }
53 | }
54 | });
55 |
56 | instance.getServices().root.narrow(element);
57 | }
58 |
59 | public componentWillUnmount() {
60 | const services = instance.maybeGetServices();
61 | if (!services) {
62 | return;
63 | }
64 |
65 | services.root.restore(this.containerRef.current!);
66 |
67 | if (this.props.focusOut) {
68 | const target = findElement(document.body, this.props.focusOut);
69 | if (target) {
70 | services.elementStore.element = target;
71 | return;
72 | }
73 | }
74 |
75 | services.elementStore.element = this.previouslyFocusedElement;
76 | }
77 |
78 | public render() {
79 | const { children, focusIn, focusOut, ...htmlProps } = this.props;
80 | return (
81 |
82 | {this.props.children}
83 |
84 | );
85 | }
86 | }
87 |
88 | /**
89 | * HOC to create a FocusTrap.
90 | */
91 | export const ArcFocusTrap = (
92 | Composed: React.ComponentType
,
93 | focusIn?: HTMLElement | string,
94 | ) => (props: P) => (
95 |
96 |
97 |
98 | );
99 |
--------------------------------------------------------------------------------
/src/components/arc-focus-area.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { findElement, findFocusable } from '../internal-types';
3 | import { instance } from '../singleton';
4 |
5 | export type FocusAreaProps = {
6 | children: React.ReactNode;
7 | focusIn?: HTMLElement | string;
8 | } & React.HTMLAttributes;
9 |
10 | /**
11 | * The ArcFocusArea acts as a virtual focus element which transfers focus
12 | * to child. Take, for example, a list of lists, like this:
13 | *
14 | * ```
15 | * Row A
16 | * ┌────────┐┌────────┐┌────────┐
17 | * └────────┘└────────┘└────────┘
18 | * Row B
19 | * ┌────────┐┌────────┐
20 | * └────────┘└────────┘
21 | * Row C
22 | * ┌────────┐┌────────┐┌────────┐
23 | * └────────┘└────────┘└────────┘
24 | * ```
25 | *
26 | * When focusing downwards from the first element in Row A (or, often, any
27 | * element from A) it's usually desirable to focus the first element in Row B
28 | * instead of focusing whatever happens to be geographically below that
29 | * element elsewhere on the page, such as the third item in Row C.
30 | *
31 | * This component allows you to wrap Row B in a virtual focus area, which
32 | * is detected by the focusing algorithm and can direct the focus to a
33 | * specified element -- the first box within the area, in this case.
34 | *
35 | * @example
36 | *
37 | * {myContent.map(content => )}
38 | *
39 | *
40 | * // You can focus a particular child, by passing a selector or HTMLElement.
41 | *
42 | * {myContent.map(content => )}
43 | *
44 | */
45 | export class FocusArea extends React.PureComponent {
46 | private containerRef = React.createRef();
47 |
48 | public componentDidMount() {
49 | const element = this.containerRef.current!;
50 | instance.getServices().stateContainer.add(this, {
51 | element,
52 | onIncoming: ev => {
53 | if (ev.next !== element) {
54 | return;
55 | }
56 |
57 | let target: HTMLElement | null = findElement(element, this.props.focusIn);
58 | if (!target && ev.focusContext) {
59 | target = ev.focusContext.find(element);
60 | }
61 | if (!target) {
62 | target = findFocusable(element);
63 | }
64 |
65 | ev.next = target || element;
66 | },
67 | });
68 | }
69 |
70 | public componentWillUnmount() {
71 | const services = instance.maybeGetServices();
72 | if (services && this.containerRef.current) {
73 | services.stateContainer.remove(this, this.containerRef.current);
74 | }
75 | }
76 |
77 | public render() {
78 | const { children, focusIn, ...htmlProps } = this.props;
79 |
80 | return (
81 |
82 | {this.props.children}
83 |
84 | );
85 | }
86 | }
87 |
88 | /**
89 | * HOC to create a FocusArea.
90 | */
91 | export const ArcFocusArea = (
92 | Composed: React.ComponentType
,
93 | focusIn?: HTMLElement | string,
94 | ) => (props: P) => (
95 |
96 |
97 |
98 | );
99 |
--------------------------------------------------------------------------------
/docs/demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Highlighted } from './highlighted';
3 | import * as styles from './demo.component.scss';
4 |
5 | interface IProps {
6 | name: string;
7 | }
8 |
9 | const massageSource = (source: string) => {
10 | return source.replace(/(\.\.\/)+src/g, '@mixer/arcade-machine-react');
11 | };
12 |
13 | const enum Tab {
14 | DemoHidden,
15 | DemoVisible,
16 | Code,
17 | }
18 |
19 | interface IState {
20 | tab: Tab;
21 | }
22 |
23 | let hidePrevious: (() => void) | undefined;
24 |
25 | export class Demo extends React.PureComponent {
26 | public state: IState = { tab: Tab.DemoHidden };
27 | private observer?: IntersectionObserver;
28 |
29 | public componentWillUnmount() {
30 | if (this.observer) {
31 | this.observer.disconnect();
32 | }
33 | }
34 |
35 | public render() {
36 | const { default: Component } = require(`./demos/${this.props.name}`);
37 | const { default: source } = require(`!!raw-loader!./demos/${this.props.name}`);
38 |
39 | return (
40 |
41 |
42 | -
46 | Demo
47 |
48 | -
52 | Source
53 |
54 |
55 | {this.state.tab === Tab.Code && (
56 |
57 |
58 |
59 | )}
60 | {this.state.tab === Tab.DemoVisible && (
61 |
62 |
63 |
64 | )}
65 | {this.state.tab === Tab.DemoHidden && (
66 |
67 | Click to Open Demo
68 |
69 | )}
70 |