github.com/tilt-dev/tilt@v0.36.0/web/src/OverviewTableStarResourceButton.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import { ReactComponent as StarSvg } from "./assets/svg/star.svg"
     4  import { InstrumentedButton } from "./instrumentedComponents"
     5  import { StarredResourcesContext } from "./StarredResourcesContext"
     6  import { AnimDuration, Color, mixinResetButtonStyle } from "./style-helpers"
     7  
     8  export const StyledTableStarResourceButton = styled(InstrumentedButton)`
     9    ${mixinResetButtonStyle};
    10    line-height: 16px;
    11  
    12    & > .MuiButton-label {
    13      display: inline-block;
    14    }
    15  `
    16  
    17  let StyledStarSvg = styled(StarSvg)`
    18    width: 13px;
    19    height: 13px;
    20    transition: transform ${AnimDuration.short} ease,
    21      opacity ${AnimDuration.short} ease;
    22  
    23    &:active {
    24      transform: scale(1.2);
    25    }
    26    &.is-starred {
    27      fill: ${Color.blue};
    28    }
    29    &.is-unstarred {
    30      opacity: 0;
    31      fill: ${Color.gray50};
    32    }
    33    &.is-unstarred:hover,
    34    ${StyledTableStarResourceButton}:focus &.is-unstarred {
    35      opacity: 1;
    36    }
    37  `
    38  
    39  type StarResourceButtonProps = {
    40    resourceName: string
    41    ctx: StarredResourcesContext
    42  }
    43  
    44  export default function OverviewTableStarResourceButton(
    45    props: StarResourceButtonProps
    46  ): JSX.Element {
    47    let { ctx, resourceName } = props
    48    let isStarred =
    49      ctx.starredResources && ctx.starredResources.includes(resourceName)
    50  
    51    let icon: JSX.Element
    52    let classes = ""
    53    let title: string
    54  
    55    if (isStarred) {
    56      title = "Remove Star"
    57      classes = "is-starred"
    58    } else {
    59      title = "Star this Resource"
    60      classes = "is-unstarred"
    61    }
    62  
    63    return (
    64      <StyledTableStarResourceButton
    65        title={title}
    66        onClick={() => ctx.toggleStarResource(resourceName)}
    67      >
    68        <StyledStarSvg className={classes} />
    69      </StyledTableStarResourceButton>
    70    )
    71  }