react Architecture Docs
Home / File/ IndexableElementBadges.js — react Source File

IndexableElementBadges.js — react Source File

Architecture documentation for IndexableElementBadges.js, a javascript file in the react codebase. 8 imports, 1 dependents.

File javascript BabelCompiler Validation 8 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73["IndexableElementBadges.js"]
  756a0539_706c_4343_7c04_e05126473386["Badge.js"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> 756a0539_706c_4343_7c04_e05126473386
  499262a9_8ff7_54b8_b4bd_df5d9dabe69c["Badge"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> 499262a9_8ff7_54b8_b4bd_df5d9dabe69c
  7f77861c_2ca5_7fd9_4b5c_fa236449c0d3["ForgetBadge.js"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> 7f77861c_2ca5_7fd9_4b5c_fa236449c0d3
  b932b590_2fc4_98e1_6681_8740b8db7390["ForgetBadge"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> b932b590_2fc4_98e1_6681_8740b8db7390
  9e753c35_ccc6_2061_a942_6e9b10c9177c["IndexableDisplayName.js"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> 9e753c35_ccc6_2061_a942_6e9b10c9177c
  944cc9b2_cf30_ba1e_496b_02b48a5aaa97["IndexableDisplayName"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> 944cc9b2_cf30_ba1e_496b_02b48a5aaa97
  23540099_ec15_b285_7d27_c0e282079375["IndexableElementBadges.css"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> 23540099_ec15_b285_7d27_c0e282079375
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  9930e8cf_03b4_86c0_be04_47b410246b71["Element.js"]
  9930e8cf_03b4_86c0_be04_47b410246b71 --> 0c2aa36f_2bfd_0e20_42bf_2839b3e43e73
  style 0c2aa36f_2bfd_0e20_42bf_2839b3e43e73 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

import Badge from './Badge';
import ForgetBadge from './ForgetBadge';
import IndexableDisplayName from './IndexableDisplayName';

import styles from './IndexableElementBadges.css';

type Props = {
  hocDisplayNames: Array<string> | null,
  compiledWithForget: boolean,
  elementID: number,
  className?: string,
};

export default function IndexableElementBadges({
  compiledWithForget,
  hocDisplayNames,
  elementID,
  className = '',
}: Props): React.Node {
  if (
    !compiledWithForget &&
    (hocDisplayNames == null || hocDisplayNames.length === 0)
  ) {
    return null;
  }

  return (
    <div className={`${styles.Root} ${className}`}>
      {compiledWithForget && (
        <ForgetBadge indexable={true} elementID={elementID} />
      )}

      {hocDisplayNames != null && hocDisplayNames.length > 0 && (
        <Badge>
          <IndexableDisplayName
            displayName={hocDisplayNames[0]}
            id={elementID}
          />
        </Badge>
      )}

      {hocDisplayNames != null && hocDisplayNames.length > 1 && (
        <div className={styles.ExtraLabel}>+{hocDisplayNames.length - 1}</div>
      )}
    </div>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does IndexableElementBadges.js do?
IndexableElementBadges.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in IndexableElementBadges.js?
IndexableElementBadges.js defines 1 function(s): IndexableElementBadges.
What does IndexableElementBadges.js depend on?
IndexableElementBadges.js imports 8 module(s): Badge, Badge.js, ForgetBadge, ForgetBadge.js, IndexableDisplayName, IndexableDisplayName.js, IndexableElementBadges.css, react.
What files import IndexableElementBadges.js?
IndexableElementBadges.js is imported by 1 file(s): Element.js.
Where is IndexableElementBadges.js in the architecture?
IndexableElementBadges.js is located at packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free