[react-interactions] Adds more experimental Scope API methods (#17042)

trueadm · web-flow · commit b71ab61c8f06 · 2019-10-08T19:32:53.000+02:00
diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
@@ -461,3 +461,7 @@ export function updateFundamentalComponent(fundamentalInstance) {
 export function unmountFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';
+import {
+  precacheFiberNode,
+  updateFiberProps,
+  getClosestInstanceFromNode,
+} from './ReactDOMComponentTree';
 import {
   createElement,
   createTextNode,
@@ -976,3 +980,7 @@ export function unmountFundamentalComponent(
     }
   }
 }
+
+export function getInstanceFromNode(node: HTMLElement): null | Object {
+  return getClosestInstanceFromNode(node) || null;
+}
diff --git a/packages/react-interactions/accessibility/README.md b/packages/react-interactions/accessibility/README.md
@@ -42,8 +42,8 @@ function MyComponent(props) {
   );
 }
 
-// Using the ref, we can get the host nodes via getScopedNodes()
-const divs = divOnlyScope.current.getScopedNodes();
+// Using the ref, we can get the host nodes via getAllNodes()
+const divs = divOnlyScope.current.getAllNodes();
 
 // [<div>DIV 1</div>, <div>DIV 2</div>, <div>DIV 3</div>]
 console.log(divs);
@@ -72,7 +72,17 @@ Returns the parent `ReactScopeInterface` of the scope node or `null` if none exi
 
 Returns the current `props` object of the scope node.
 
-### getScopedNodes: () => null | Array<HTMLElement>
+### getAllNodes: () => null | Array<HTMLElement>
 
 Returns an array of all child host nodes that successfully match when queried using the
-query function passed to the scope. Returns `null` if there are no matching host nodes.
+query function passed to the scope. Returns `null` if there are no matching host nodes.
+
+### getFirstNode: () => null | HTMLElement
+
+Returns the first child host node that successfully matches when queried using the
+query function passed to the scope. Returns `null` if there is no matching host node.
+
+### containsNode: (node: HTMLElement) => boolean
+
+Returns `true` or `false` depending on if the given `HTMLElement` is a descendant
+of the scope's sub-tree.
diff --git a/packages/react-interactions/accessibility/docs/TabbableScope.md b/packages/react-interactions/accessibility/docs/TabbableScope.md
@@ -15,7 +15,7 @@ function FocusableNodeCollector(props) {
     const scope = scopeRef.current;
 
     if (scope) {
-      const tabFocusableNodes = scope.getScopedNodes();
+      const tabFocusableNodes = scope.getAllNodes();
       if (tabFocusableNodes && props.onFocusableNodes) {
         props.onFocusableNodes(tabFocusableNodes);
       }
diff --git a/packages/react-interactions/accessibility/src/FocusContain.js b/packages/react-interactions/accessibility/src/FocusContain.js
@@ -66,10 +66,14 @@ export default function FocusContain({
   useLayoutEffect(
     () => {
       const scope = scopeRef.current;
-      if (scope !== null && disabled !== true) {
-        const elems = scope.getScopedNodes();
-        if (elems && elems.indexOf(document.activeElement) === -1) {
-          elems[0].focus();
+      if (
+        scope !== null &&
+        disabled !== true &&
+        !scope.containsNode(document.activeElement)
+      ) {
+        const fistElem = scope.getFirstNode();
+        if (fistElem !== null) {
+          fistElem.focus();
         }
       }
     },
diff --git a/packages/react-interactions/accessibility/src/FocusGroup.js b/packages/react-interactions/accessibility/src/FocusGroup.js
@@ -30,9 +30,9 @@ type FocusGroupProps = {|
 const {useRef} = React;
 
 function focusGroupItem(cell: ReactScopeMethods, event: KeyboardEvent): void {
-  const tabbableNodes = cell.getScopedNodes();
-  if (tabbableNodes !== null && tabbableNodes.length > 0) {
-    tabbableNodes[0].focus();
+  const firstScopedNode = cell.getFirstNode();
+  if (firstScopedNode !== null) {
+    firstScopedNode.focus();
     event.preventDefault();
   }
 }
@@ -135,7 +135,7 @@ export function createFocusGroup(
               const tabScope = getGroupProps(currentItem).tabScopeRef.current;
               if (tabScope) {
                 const activeNode = document.activeElement;
-                const nodes = tabScope.getScopedNodes();
+                const nodes = tabScope.getAllNodes();
                 for (let i = 0; i < nodes.length; i++) {
                   const node = nodes[i];
                   if (node !== activeNode) {
diff --git a/packages/react-interactions/accessibility/src/FocusTable.js b/packages/react-interactions/accessibility/src/FocusTable.js
@@ -39,9 +39,9 @@ type FocusTableProps = {|
 const {useRef} = React;
 
 function focusScope(cell: ReactScopeMethods, event?: KeyboardEvent): void {
-  const tabbableNodes = cell.getScopedNodes();
-  if (tabbableNodes !== null && tabbableNodes.length > 0) {
-    tabbableNodes[0].focus();
+  const firstScopedNode = cell.getFirstNode();
+  if (firstScopedNode !== null) {
+    firstScopedNode.focus();
     if (event) {
       event.preventDefault();
     }
@@ -209,7 +209,7 @@ export function createFocusTable(
           const tabScope = getTableProps(currentCell).tabScopeRef.current;
           if (tabScope) {
             const activeNode = document.activeElement;
-            const nodes = tabScope.getScopedNodes();
+            const nodes = tabScope.getAllNodes();
             for (let i = 0; i < nodes.length; i++) {
               const node = nodes[i];
               if (node !== activeNode) {
diff --git a/packages/react-interactions/accessibility/src/__tests__/TabbableScope-test.internal.js b/packages/react-interactions/accessibility/src/__tests__/TabbableScope-test.internal.js
@@ -35,7 +35,7 @@ describe('TabbableScope', () => {
       container = null;
     });
 
-    it('getScopedNodes() works as intended', () => {
+    it('getAllNodes() works as intended', () => {
       const scopeRef = React.createRef();
       const nodeRefA = React.createRef();
       const nodeRefB = React.createRef();
@@ -58,7 +58,7 @@ describe('TabbableScope', () => {
       }
 
       ReactDOM.render(<Test />, container);
-      let nodes = scopeRef.current.getScopedNodes();
+      let nodes = scopeRef.current.getAllNodes();
       expect(nodes).toEqual([
         nodeRefA.current,
         nodeRefB.current,
diff --git a/packages/react-interactions/accessibility/src/shared/getTabbableNodes.js b/packages/react-interactions/accessibility/src/shared/getTabbableNodes.js
@@ -18,7 +18,7 @@ export default function getTabbableNodes(
   number,
   null | HTMLElement,
 ] {
-  const tabbableNodes = scope.getScopedNodes();
+  const tabbableNodes = scope.getAllNodes();
   if (tabbableNodes === null || tabbableNodes.length === 0) {
     return [null, null, null, 0, null];
   }
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -491,3 +491,7 @@ export function unmountFundamentalComponent(fundamentalInstance) {
 export function cloneFundamentalInstance(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -530,3 +530,7 @@ export function updateFundamentalComponent(fundamentalInstance) {
 export function unmountFundamentalComponent(fundamentalInstance) {
   throw new Error('Not yet implemented.');
 }
+
+export function getInstanceFromNode(node) {
+  throw new Error('Not yet implemented.');
+}
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -432,6 +432,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         hidden: instance.hidden,
       };
     },
+
+    getInstanceFromNode() {
+      throw new Error('Not yet implemented.');
+    },
   };
 
   const hostConfig = useMutation
diff --git a/packages/react-reconciler/src/ReactFiberScope.js b/packages/react-reconciler/src/ReactFiberScope.js
@@ -14,7 +14,7 @@ import type {
   ReactScopeMethods,
 } from 'shared/ReactTypes';
 
-import {getPublicInstance} from './ReactFiberHostConfig';
+import {getPublicInstance, getInstanceFromNode} from './ReactFiberHostConfig';
 
 import {
   HostComponent,
@@ -54,6 +54,29 @@ function collectScopedNodes(
   }
 }
 
+function collectFirstScopedNode(
+  node: Fiber,
+  fn: (type: string | Object, props: Object) => boolean,
+): null | Object {
+  if (enableScopeAPI) {
+    if (node.tag === HostComponent) {
+      const {type, memoizedProps} = node;
+      if (fn(type, memoizedProps) === true) {
+        return getPublicInstance(node.stateNode);
+      }
+    }
+    let child = node.child;
+
+    if (isFiberSuspenseAndTimedOut(node)) {
+      child = getSuspenseFallbackChild(node);
+    }
+    if (child !== null) {
+      return collectFirstScopedNodeFromChildren(child, fn);
+    }
+  }
+  return null;
+}
+
 function collectScopedNodesFromChildren(
   startingChild: Fiber,
   fn: (type: string | Object, props: Object) => boolean,
@@ -66,6 +89,21 @@ function collectScopedNodesFromChildren(
   }
 }
 
+function collectFirstScopedNodeFromChildren(
+  startingChild: Fiber,
+  fn: (type: string | Object, props: Object) => boolean,
+): Object | null {
+  let child = startingChild;
+  while (child !== null) {
+    const scopedNode = collectFirstScopedNode(child, fn);
+    if (scopedNode !== null) {
+      return scopedNode;
+    }
+    child = child.sibling;
+  }
+  return null;
+}
+
 function collectNearestScopeMethods(
   node: Fiber,
   scope: ReactScope,
@@ -151,7 +189,7 @@ export function createScopeMethods(
       const currentFiber = ((instance.fiber: any): Fiber);
       return currentFiber.memoizedProps;
     },
-    getScopedNodes(): null | Array<Object> {
+    getAllNodes(): null | Array<Object> {
       const currentFiber = ((instance.fiber: any): Fiber);
       const child = currentFiber.child;
       const scopedNodes = [];
@@ -160,5 +198,27 @@ export function createScopeMethods(
       }
       return scopedNodes.length === 0 ? null : scopedNodes;
     },
+    getFirstNode(): null | Object {
+      const currentFiber = ((instance.fiber: any): Fiber);
+      const child = currentFiber.child;
+      if (child !== null) {
+        return collectFirstScopedNodeFromChildren(child, fn);
+      }
+      return null;
+    },
+    containsNode(node: Object): boolean {
+      let fiber = getInstanceFromNode(node);
+      while (fiber !== null) {
+        if (
+          fiber.tag === ScopeComponent &&
+          fiber.type === scope &&
+          fiber.stateNode === instance
+        ) {
+          return true;
+        }
+        fiber = fiber.return;
+      }
+      return false;
+    },
   };
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js

Original file line number	Diff line number	Diff line change
`@@ -461,3 +461,7 @@ export function updateFundamentalComponent(fundamentalInstance) {`
`461`	`461`	`export function unmountFundamentalComponent(fundamentalInstance) {`
`462`	`462`	`throw new Error('Not yet implemented.');`
`463`	`463`	`}`
	`464`	`+`
	`465`	`+export function getInstanceFromNode(node) {`
	`466`	`+ throw new Error('Not yet implemented.');`
	`467`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,11 @@`
`7`	`7`	`* @flow`
`8`	`8`	`*/`
`9`	`9`
`10`		`-import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';`
	`10`	`+import {`
	`11`	`+ precacheFiberNode,`
	`12`	`+ updateFiberProps,`
	`13`	`+ getClosestInstanceFromNode,`
	`14`	`+} from './ReactDOMComponentTree';`
`11`	`15`	`import {`
`12`	`16`	`createElement,`
`13`	`17`	`createTextNode,`
`@@ -976,3 +980,7 @@ export function unmountFundamentalComponent(`
`976`	`980`	`}`
`977`	`981`	`}`
`978`	`982`	`}`
	`983`	`+`
	`984`	`+export function getInstanceFromNode(node: HTMLElement): null \| Object {`
	`985`	`+ return getClosestInstanceFromNode(node) \|\| null;`
	`986`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ function FocusableNodeCollector(props) {`
`15`	`15`	`const scope = scopeRef.current;`
`16`	`16`
`17`	`17`	`if (scope) {`
`18`		`- const tabFocusableNodes = scope.getScopedNodes();`
	`18`	`+ const tabFocusableNodes = scope.getAllNodes();`
`19`	`19`	`if (tabFocusableNodes && props.onFocusableNodes) {`
`20`	`20`	`props.onFocusableNodes(tabFocusableNodes);`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export default function getTabbableNodes(`
`18`	`18`	`number,`
`19`	`19`	`null \| HTMLElement,`
`20`	`20`	`] {`
`21`		`- const tabbableNodes = scope.getScopedNodes();`
	`21`	`+ const tabbableNodes = scope.getAllNodes();`
`22`	`22`	`if (tabbableNodes === null \|\| tabbableNodes.length === 0) {`
`23`	`23`	`return [null, null, null, 0, null];`
`24`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -491,3 +491,7 @@ export function unmountFundamentalComponent(fundamentalInstance) {`
`491`	`491`	`export function cloneFundamentalInstance(fundamentalInstance) {`
`492`	`492`	`throw new Error('Not yet implemented.');`
`493`	`493`	`}`
	`494`	`+`
	`495`	`+export function getInstanceFromNode(node) {`
	`496`	`+ throw new Error('Not yet implemented.');`
	`497`	`+}`