github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/CustomNav.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import {
     4    ApiButton,
     5    ApiButtonType,
     6    ApiIcon,
     7    buttonsForComponent,
     8    UIBUTTON_GLOBAL_COMPONENT_ID,
     9  } from "./ApiButton"
    10  import { MenuButtonLabeled, MenuButtonMixin } from "./GlobalNav"
    11  import { Color, SizeUnit } from "./style-helpers"
    12  
    13  type CustomNavProps = {
    14    view: Proto.webviewView
    15  }
    16  
    17  const CustomNavButton = styled(ApiButton)`
    18    height: 100%;
    19    align-items: center;
    20  
    21    button {
    22      ${MenuButtonMixin};
    23      height: 100%;
    24      box-shadow: unset;
    25      justify-content: center;
    26  
    27      &:hover,
    28      &:active {
    29        box-shadow: unset;
    30      }
    31    }
    32  
    33    .MuiButton-contained.Mui-disabled {
    34      color: ${Color.blue};
    35      background: transparent;
    36    }
    37    // If there is an options toggle, remove padding between the submit
    38    // button and the options button.
    39    button:first-child {
    40      padding-right: 0px;
    41    }
    42    // If there is no options toggle, then restore the default padding.
    43    button:only-child {
    44      padding-right: ${SizeUnit(0.5)};
    45    }
    46    .apibtn-label {
    47      display: none;
    48    }
    49  `
    50  
    51  export function CustomNav(props: CustomNavProps) {
    52    const buttons = buttonsForComponent(
    53      props.view.uiButtons,
    54      ApiButtonType.Global,
    55      UIBUTTON_GLOBAL_COMPONENT_ID
    56    ).default
    57  
    58    return (
    59      <React.Fragment>
    60        {buttons.map((b) => (
    61          <MenuButtonLabeled label={b.spec?.text} key={b.metadata?.name}>
    62            <CustomNavButton
    63              uiButton={b}
    64              variant="contained"
    65              aria-label={b.spec?.text}
    66            >
    67              <ApiIcon
    68                iconName={b.spec?.iconName || "smart_button"}
    69                iconSVG={b.spec?.iconSVG}
    70              />
    71            </CustomNavButton>
    72          </MenuButtonLabeled>
    73        ))}
    74      </React.Fragment>
    75    )
    76  }