⬅️ Back to Table of Contents

📄 SimplifiedTreeView.tsx

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	9
📊 Variables & Constants	1
💠 JSX Elements	7
📐 Interfaces	1

📚 Table of Contents

• Imports
• Variables & Constants
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/typeDetails/SimplifiedTreeView.tsx

📦 Imports

Name	Source
clsx	clsx
useCallback	react
useMemo	react
React	react
OnHoverNodeFn	../ast/types
styles	../ast/ASTViewer.module.css
PropertyName	../ast/PropertyName
tsEnumToString	../ast/tsUtils
getRange	../ast/utils

---

Variables & Constants

Name	Type	Kind	Value	Exported
result	ts.Node[]	const	[]	✗

---

JSX Elements

Component	Type	Props	Children
div	element	className={styles.nonExpand}	,
span	element	className={selectedNode === value ? styles.selected : ''}
PropertyName	component	className={styles.propName}, onClick={(): void => {
onSelect(value);
}}, onHover={onHover}, value={tsEnumToString('SyntaxKind', value.kind)}	none
div	element	className={clsx(styles.subList, 'padding-left--md')}	{items.map((item, index) => (
<SimplifiedItem
key={index.toString()}
onHoverNode={onHoverNode}
onSelect={onSelect}
selectedNode={selectedNode}
value={item}
/>
))}
SimplifiedItem	component	key={index.toString()}, onHoverNode={onHoverNode}, onSelect={onSelect}, selectedNode={selectedNode}, value={item}	none
div	element	className={clsx(styles.list, 'padding-left--sm')}
SimplifiedItem	component	none	none

---

Functions

`SimplifiedItem({

onHoverNode, onSelect, selectedNode, value, }: SimplifiedTreeViewProps): React.JSX.Element`

Code

function SimplifiedItem({
  onHoverNode,
  onSelect,
  selectedNode,
  value,
}: SimplifiedTreeViewProps): React.JSX.Element {
  const items = useMemo(() => {
    const result: ts.Node[] = [];
    value.forEachChild(child => {
      result.push(child);
    });
    return result;
  }, [value]);

  const onHover = useCallback(
    (v: boolean) => {
      if (onHoverNode) {
        return onHoverNode(v ? getRange(value, 'tsNode') : undefined);
      }
    },
    [onHoverNode, value],
  );

  return (
    <div className={styles.nonExpand}>
      <span className={selectedNode === value ? styles.selected : ''}>
        <PropertyName
          className={styles.propName}
          onClick={(): void => {
            onSelect(value);
          }}
          onHover={onHover}
          value={tsEnumToString('SyntaxKind', value.kind)}
        />
      </span>

      <div className={clsx(styles.subList, 'padding-left--md')}>
        {items.map((item, index) => (
          <SimplifiedItem
            key={index.toString()}
            onHoverNode={onHoverNode}
            onSelect={onSelect}
            selectedNode={selectedNode}
            value={item}
          />
        ))}
      </div>
    </div>
  );
}

• Parameters:
• { onHoverNode, onSelect, selectedNode, value, }: SimplifiedTreeViewProps
• Return Type: React.JSX.Element
• Calls:
• useMemo (from react)
• value.forEachChild
• result.push
• useCallback (from react)
• onHoverNode
• getRange (from ../ast/utils)
• onSelect
• tsEnumToString (from ../ast/tsUtils)
• clsx (from clsx)
• items.map
• index.toString

SimplifiedTreeView(params: SimplifiedTreeViewProps): React.JSX.Element

Code

export function SimplifiedTreeView(
  params: SimplifiedTreeViewProps,
): React.JSX.Element {
  return (
    <div className={clsx(styles.list, 'padding-left--sm')}>
      <SimplifiedItem {...params} />
    </div>
  );
}

• Parameters:
• params: SimplifiedTreeViewProps
• Return Type: React.JSX.Element
• Calls:
• clsx (from clsx)

---

Interfaces

SimplifiedTreeViewProps

Interface Code

export interface SimplifiedTreeViewProps {
  readonly onHoverNode?: OnHoverNodeFn;
  readonly onSelect: (value: ts.Node) => void;
  readonly selectedNode: ts.Node | undefined;
  readonly value: ts.Node;
}

Properties

Name	Type	Optional	Description
onHoverNode	OnHoverNodeFn	✓
onSelect	(value: ts.Node) => void	✗
selectedNode	ts.Node | undefined	✗
value	ts.Node	✗

---