github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/components/sideNavigation/sideNavigation.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, TextTypes } from "src/components";
    15  
    16  import "./sideNavigation.styl";
    17  
    18  export interface SideNavigationProps {
    19    children: React.ReactNode;
    20    className?: string;
    21  }
    22  
    23  export interface NavigationItem {
    24    disabled?: boolean;
    25    isActive?: boolean;
    26    className?: string;
    27    children: React.ReactNode;
    28  }
    29  
    30  export function NavigationItem(props: NavigationItem) {
    31    const { children, isActive, disabled } = props;
    32    let textType = TextTypes.Body;
    33  
    34    if (isActive) {
    35      textType = TextTypes.BodyStrong;
    36    }
    37  
    38    const classes = cn(
    39      "side-navigation__navigation-item",
    40      {
    41        "side-navigation__navigation-item--active": isActive,
    42        "side-navigation__navigation-item--disabled": disabled,
    43      },
    44    );
    45  
    46    return (
    47      <li
    48        className={classes}>
    49        <Text textType={textType}>
    50          {children}
    51        </Text>
    52      </li>
    53    );
    54  }
    55  
    56  NavigationItem.defaultProps = {
    57    isActive: false,
    58    disabled: false,
    59  };
    60  
    61  SideNavigation.Item = NavigationItem;
    62  
    63  export function SideNavigation(props: SideNavigationProps) {
    64    return (
    65      <nav className="side-navigation">
    66        <ul className="side-navigation--list">
    67          {props.children}
    68        </ul>
    69      </nav>
    70    );
    71  }