Skip to content

⬅️ Back to Table of Contents

📄 ast/PropertyName

📊 Analysis Summary

Metric Count
🔧 Functions 1
📦 Imports 5
💠 JSX Elements 1
📐 Interfaces 1

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/components/ast/PropertyName.tsx

📦 Imports

Name Source
KeyboardEvent react
MouseEvent react
Link @docusaurus/Link
useCallback react
React react

JSX Elements

Component Type Props Children
Link component className={className}, href={#${value}}, onClick={onClick}, onKeyDown={onKe... {value}

Functions

PropertyName({ className, onClick: onClickPr…: PropertyNameProps): React.JSX.Element

Parameters:

  • { className, onClick: onClickProp, onHover: onHoverProp, value, } PropertyNameProps

Returns: React.JSX.Element

Calls:

  • useCallback (from react)
  • e.preventDefault
  • onClickProp
  • onHoverProp
Code 
export default function PropertyName({
  className,
  onClick: onClickProp,
  onHover: onHoverProp,
  value,
}: PropertyNameProps): React.JSX.Element {
  const onClick = useCallback(
    (e: MouseEvent<HTMLElement>) => {
      e.preventDefault();
      onClickProp?.();
    },
    [onClickProp],
  );

  const onMouseEnter = useCallback(() => {
    onHoverProp?.(true);
  }, [onHoverProp]);

  const onMouseLeave = useCallback(() => {
    onHoverProp?.(false);
  }, [onHoverProp]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent<HTMLElement>) => {
      if (e.code === 'Space') {
        e.preventDefault();
        onClickProp?.();
      }
    },
    [onClickProp],
  );

  return (
    <Link
      className={className}
      href={`#${value}`}
      onClick={onClick}
      onKeyDown={onKeyDown}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      role="button"
      tabIndex={onClickProp && 0}
    >
      {value}
    </Link>
  );
}

Interfaces

PropertyNameProps

Interface Code 
export interface PropertyNameProps {
  readonly className?: string;
  readonly onClick?: () => void;
  readonly onHover?: (e: boolean) => void;
  readonly value?: string;
}

Properties

Name Type Optional Description
className string ✓ not shown
onClick () => void ✓ not shown
onHover (e: boolean) => void ✓ not shown
value string ✓ not shown

Generated by Syntax Scribe