Add path param to extractValue

Summary: I'm working on an attribute inspector that has particular top-level special keys that should not be editable, while the rest can be. This enables the functionality to allow dynamic determinations of what can be made editable, and is an additive non-breaking change to the API.

Reviewed By: mweststrate

Differential Revision: D22111965

fbshipit-source-id: 4bc6df0f76cf1e2bf0590235dcf543c665c7d8d8

desktop/app/src/ui/components/data-inspector/DataInspector.tsx

@@ -346,28 +346,30 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     );
 
     const extractValue = useCallback(
-      (data: any, depth: number) => {
+      (data: any, depth: number, path: string[]) => {
         let res;
         if (extractValueProp) {
-          res = extractValueProp(data, depth);
+          res = extractValueProp(data, depth, path);
         }
         if (!res) {
-          res = defaultValueExtractor(data, depth);
+          res = defaultValueExtractor(data, depth, path);
         }
         return res;
       },
       [extractValueProp],
     );
 
-    const res = useMemo(() => extractValue(data, depth), [
+    const res = useMemo(() => extractValue(data, depth, path), [
       extractValue,
       data,
       depth,
+      path,
     ]);
-    const resDiff = useMemo(() => extractValue(diff, depth), [
+    const resDiff = useMemo(() => extractValue(diff, depth, path), [
       extractValue,
-      data,
+      diff,
       depth,
+      path,
     ]);
     const ancestry = useMemo(
       () => (res ? parentAncestry!.concat([res.value]) : []),
@@ -554,6 +556,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
     } else {
       descriptionOrPreview = (
         <DataPreview
+          path={path}
           type={type}
           value={value}
           extractValue={extractValue}

desktop/app/src/ui/components/data-inspector/DataPreview.tsx

@@ -17,6 +17,7 @@ import {colors} from '../colors';
 export type DataValueExtractor = (
   value: any,
   depth: number,
+  path: string[],
 ) =>
   | {
       mutable: boolean;
@@ -51,6 +52,7 @@ function intersperse(arr: Array<any>, sep: string) {
 }
 
 export default class DataPreview extends PureComponent<{
+  path: string[];
   type: string;
   value: any;
   depth: number;
@@ -62,7 +64,7 @@ export default class DataPreview extends PureComponent<{
   };
 
   render() {
-    const {depth, extractValue, type, value} = this.props;
+    const {depth, extractValue, path, type, value} = this.props;
 
     if (type === 'array') {
       return (
@@ -70,7 +72,7 @@ export default class DataPreview extends PureComponent<{
           {'['}
           {intersperse(
             value.map((element: any, index: number) => {
-              const res = extractValue(element, depth + 1);
+              const res = extractValue(element, depth + 1, path);
               if (!res) {
                 return null;
               }