Home / File/ ElementBadges.js — react Source File

ElementBadges.js — react Source File

Architecture documentation for ElementBadges.js, a javascript file in the react codebase. 6 imports, 3 dependents.

File javascript BabelCompiler Validation 6 imports 3 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  25e89372_6558_2e4a_04f5_2e343e42cde5["ElementBadges.js"]
  756a0539_706c_4343_7c04_e05126473386["Badge.js"]
  25e89372_6558_2e4a_04f5_2e343e42cde5 --> 756a0539_706c_4343_7c04_e05126473386
  499262a9_8ff7_54b8_b4bd_df5d9dabe69c["Badge"]
  25e89372_6558_2e4a_04f5_2e343e42cde5 --> 499262a9_8ff7_54b8_b4bd_df5d9dabe69c
  7f77861c_2ca5_7fd9_4b5c_fa236449c0d3["ForgetBadge.js"]
  25e89372_6558_2e4a_04f5_2e343e42cde5 --> 7f77861c_2ca5_7fd9_4b5c_fa236449c0d3
  b932b590_2fc4_98e1_6681_8740b8db7390["ForgetBadge"]
  25e89372_6558_2e4a_04f5_2e343e42cde5 --> b932b590_2fc4_98e1_6681_8740b8db7390
  088e4f8c_3b2f_9dc2_cd47_b43ac5ead3d7["ElementBadges.css"]
  25e89372_6558_2e4a_04f5_2e343e42cde5 --> 088e4f8c_3b2f_9dc2_cd47_b43ac5ead3d7
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  25e89372_6558_2e4a_04f5_2e343e42cde5 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  fd1ac927_00ef_d34e_8747_a00d62b71152["OwnerView.js"]
  fd1ac927_00ef_d34e_8747_a00d62b71152 --> 25e89372_6558_2e4a_04f5_2e343e42cde5
  4e5b4a1f_694c_f426_36e2_a03da99b38d5["OwnersStack.js"]
  4e5b4a1f_694c_f426_36e2_a03da99b38d5 --> 25e89372_6558_2e4a_04f5_2e343e42cde5
  7db6a3fc_5457_73ae_9df6_4bd78494320f["StackTraceView.js"]
  7db6a3fc_5457_73ae_9df6_4bd78494320f --> 25e89372_6558_2e4a_04f5_2e343e42cde5
  style 25e89372_6558_2e4a_04f5_2e343e42cde5 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 styles from './ElementBadges.css';

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

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

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

      {environmentName != null ? <Badge>{environmentName}</Badge> : null}

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

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

Domain

Subdomains

Functions

Frequently Asked Questions

What does ElementBadges.js do?
ElementBadges.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 ElementBadges.js?
ElementBadges.js defines 1 function(s): ElementBadges.
What does ElementBadges.js depend on?
ElementBadges.js imports 6 module(s): Badge, Badge.js, ElementBadges.css, ForgetBadge, ForgetBadge.js, react.
What files import ElementBadges.js?
ElementBadges.js is imported by 3 file(s): OwnerView.js, OwnersStack.js, StackTraceView.js.
Where is ElementBadges.js in the architecture?
ElementBadges.js is located at packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.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