📄 `SimplifiedTreeView`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	9
💠 JSX Elements	7
📐 Interfaces	1

📚 Table of Contents¶

Imports
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`

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); }}, onHo...	none
`div`	element	className={clsx(styles.subList, 'padding-left--md')}	{items.map((item, index) => ( <SimplifiedItem key={index.toString()} onHoverN...
`SimplifiedItem`	component	key={index.toString()}, onHoverNode={onHoverNode}, onSelect={onSelect}, selec...	none
`div`	element	className={clsx(styles.list, 'padding-left--sm')}
`SimplifiedItem`	component	none	none

Functions¶

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

Parameters:

params SimplifiedTreeViewProps

Returns: React.JSX.Element

Calls:

clsx (from clsx)

Code

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

`SimplifiedItem({ onHoverNode, onSelect, select…: SimplifiedTreeViewProps): React.JSX.Element`¶

Parameters:

{ onHoverNode, onSelect, selectedNode, value, } SimplifiedTreeViewProps

Returns: 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

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>
  );
}

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`	✓	not shown
`onSelect`	`(value: ts.Node) => void`	✗	not shown
`selectedNode`	`ts.Node \\| undefined`	✗	not shown
`value`	`ts.Node`	✗	not shown

Generated by Syntax Scribe

📄 SimplifiedTreeView¶