NewArrayValue.js — react Source File

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useState} from 'react';
import Store from '../../store';
import EditableName from './EditableName';
import {smartParse} from '../../utils';
import {parseHookPathForEdit} from './utils';
import styles from './NewArrayValue.css';

import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';

type Props = {
  bridge: FrontendBridge,
  depth: number,
  hidden: boolean,
  hookID?: ?number,
  index: number,
  inspectedElement: InspectedElement,
  path: Array<string | number>,
  store: Store,
  type: 'props' | 'context' | 'hooks' | 'state',
};

export default function NewArrayValue({
  bridge,
  depth,
  hidden,
  hookID,
  index,
  inspectedElement,
  path,
  store,
  type,
}: Props): React.Node {
  const [key, setKey] = useState<number>(0);
  const [isInvalid, setIsInvalid] = useState(false);

  // This is a bit of an unusual usage of the EditableName component,
  // but otherwise it acts the way we want for a new Array entry.
  // $FlowFixMe[missing-local-annot]
  const overrideName = (oldPath: any, newPath) => {
    const value = newPath[newPath.length - 1];

    let parsedValue;
    let newIsInvalid = true;
    try {
      parsedValue = smartParse(value);
      newIsInvalid = false;
    } catch (error) {}

    if (isInvalid !== newIsInvalid) {
      setIsInvalid(newIsInvalid);
    }

    if (!newIsInvalid) {
      setKey(key + 1);

      const {id} = inspectedElement;
      const rendererID = store.getRendererIDForElement(id);
      if (rendererID !== null) {
        let basePath = path;
        if (hookID != null) {
          basePath = parseHookPathForEdit(basePath);
        }

        bridge.send('overrideValueAtPath', {
          type,
          hookID,
          id,
          path: [...basePath, index],
          rendererID,
          value: parsedValue,
        });
      }
    }
  };

  return (
    <div
      key={key}
      hidden={hidden}
      style={{
        paddingLeft: `${(depth - 1) * 0.75}rem`,
      }}>
      <div className={styles.NewArrayValue}>
        <EditableName
          allowWhiteSpace={true}
          autoFocus={key > 0}
          className={[styles.EditableName, isInvalid && styles.Invalid].join(
            ' ',
          )}
          initialValue=""
          overrideName={overrideName}
          path={path}
        />
      </div>
    </div>
  );
}