Function PathBar

app/components/PathBar.tsx:19–48

()

import { JSONHeroPath } from '@jsonhero/path';

export function PathBar() {
  const [isEditable, setIsEditable] = useState(false);
  const { selectedNodes, highlightedNodeId } = useJsonColumnViewState();
  const { goToNodeId } = useJsonColumnViewAPI();
  const [json] = useJson();

  if (isEditable) {
    return (
      <PathBarText
        selectedNodes={selectedNodes}
        onConfirm={(newPath) => {
          setIsEditable(false);
          const heroPath = new JSONHeroPath(newPath);
          const node = heroPath.first(json);
          if (node) {
            goToNodeId(newPath, 'pathBar');
          }
        }}
      />
    );
  }

  return (
    <PathBarLink
      selectedNodes={selectedNodes}
      highlightedNodeId={highlightedNodeId}
      enableEdit={() => setIsEditable(true)}
    />
  );
}

export function PathBarText({ selectedNodes, onConfirm }: { selectedNodes: ColumnViewNode[], onConfirm: (newPath: string) => void; }) {
  const [path, setPath] = useState('');