Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './json_view.module.css';
       3              : 
       4              : import { useJsonViewerState } from './json_view_state.js';
       5              : 
       6              : export interface KeyNameCompProps {
       7              :     keyName?: (string | number);
       8              :     keyPath: (string | number)[];
       9              : }
      10              : 
      11            1 : export function JsonKeyName(props: React.PropsWithChildren<KeyNameCompProps>) {
      12            1 :     const { variant } = useJsonViewerState();
      13            1 :     const isNumber = typeof props.keyName === 'number';
      14            1 :     if (variant === 'explorer') {
      15            1 :         return (
      16            1 :             <span className={isNumber ? styles.explorer_key_number : styles.explorer_key}>
      17            1 :                 {props.keyName}
      18            1 :             </span>
      19              :         );
      20              :     }
      21            1 :     return (
      22            1 :         <React.Fragment>
      23            1 :             <span>
      24            1 :                 <Quote isNumber={isNumber} data-placement="left" />
      25            1 :                 <span className={isNumber ? styles.object_key_name_number : styles.object_key_name_string}>
      26            1 :                     {props.keyName}
      27            1 :                 </span>
      28            1 :                 <Quote isNumber={isNumber} data-placement="right" />
      29            1 :             </span>
      30            1 :             <Colon />
      31            1 :         </React.Fragment>
      32              :     );
      33            1 : };
      34              : 
      35              : 
      36            1 : function Quote(props: { isNumber: boolean }) {
      37            1 :     if (props.isNumber) return null;
      38            1 :     return (
      39            1 :         <span className={styles.object_key_quotes}>
      40              :             "
      41            1 :         </span>
      42              :     );
      43            1 : };
      44              : 
      45              : 
      46            1 : function Colon() {
      47            1 :     return (
      48            1 :         <span className={styles.object_key_colon}>
      49              :             :
      50            1 :         </span>
      51              :     );
      52            1 : };