github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/components/text/text.tsx (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import * as React from "react";
    12  import cn from "classnames";
    13  
    14  import "./text.styl";
    15  
    16  export interface TextProps {
    17    textType?: TextTypes;
    18    disabled?: boolean;
    19    children: React.ReactNode;
    20    className?: string;
    21    noWrap?: boolean;
    22  }
    23  
    24  export enum TextTypes {
    25    Heading1,
    26    Heading2,
    27    Heading3,
    28    Heading4,
    29    Heading5,
    30    Heading6,
    31    Body,
    32    BodyStrong,
    33    Caption,
    34    CaptionStrong,
    35    Code,
    36  }
    37  
    38  const getClassByTextType = (textType: TextTypes) => {
    39    switch (textType) {
    40      case TextTypes.Heading1:
    41        return "text--heading-1";
    42      case TextTypes.Heading2:
    43        return "text--heading-2";
    44      case TextTypes.Heading3:
    45        return "text--heading-3";
    46      case TextTypes.Heading4:
    47        return "text--heading-4";
    48      case TextTypes.Heading5:
    49        return "text--heading-5";
    50      case TextTypes.Heading6:
    51        return "text--heading-6";
    52      case TextTypes.Body:
    53        return "text--body";
    54      case TextTypes.BodyStrong:
    55        return "text--body-strong";
    56      case TextTypes.Caption:
    57        return "text--caption";
    58      case TextTypes.CaptionStrong:
    59        return "text--caption-strong";
    60      case TextTypes.Code:
    61        return "text--code";
    62      default:
    63        return "text--body";
    64    }
    65  };
    66  
    67  const getElementByTextType = (textType: TextTypes) => {
    68    switch (textType) {
    69      case TextTypes.Heading1:
    70        return "h1";
    71      case TextTypes.Heading2:
    72        return "h2";
    73      case TextTypes.Heading3:
    74        return "h3";
    75      case TextTypes.Heading4:
    76        return "h4";
    77      case TextTypes.Heading5:
    78        return "h5";
    79      case TextTypes.Heading6:
    80        return "h6";
    81      case TextTypes.Body:
    82      case TextTypes.BodyStrong:
    83      case TextTypes.Caption:
    84      case TextTypes.CaptionStrong:
    85      case TextTypes.Code:
    86      default:
    87        return "span";
    88    }
    89  };
    90  
    91  Text.defaultProps = {
    92    textType: TextTypes.Body,
    93    disabled: false,
    94    className: "",
    95    noWrap: false,
    96  };
    97  
    98  export function Text(props: TextProps) {
    99    const { textType, disabled, noWrap, className } = props;
   100    const textTypeClass = cn(
   101      "text",
   102      getClassByTextType(textType),
   103      {
   104        "text--disabled": disabled,
   105        "text--no-wrap": noWrap,
   106      },
   107      className,
   108    );
   109    const elementName = getElementByTextType(textType);
   110  
   111    const componentProps = {
   112      className: textTypeClass,
   113    };
   114  
   115    return React.createElement(elementName, componentProps, props.children);
   116  }