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

     1  import React from "react"
     2  import styled from "styled-components"
     3  import { Tags } from "./analytics"
     4  import { ReactComponent as StarSvg } from "./assets/svg/star.svg"
     5  import { InstrumentedButton } from "./instrumentedComponents"
     6  import { useStarredResources } from "./StarredResourcesContext"
     7  import {
     8    AnimDuration,
     9    Color,
    10    mixinResetButtonStyle,
    11    SizeUnit,
    12  } from "./style-helpers"
    13  
    14  export const StarResourceButtonRoot = styled(InstrumentedButton)`
    15    ${mixinResetButtonStyle};
    16    padding: 0;
    17    background-color: transparent;
    18    align-items: center;
    19    flex-shrink: 0;
    20  `
    21  let StarIcon = styled(StarSvg)`
    22    width: ${SizeUnit(1.0 / 3)};
    23    height: ${SizeUnit(1.0 / 3)};
    24  `
    25  let ActiveStarIcon = styled(StarIcon)`
    26    transition: transform ${AnimDuration.short} ease;
    27    fill: ${Color.gray50};
    28  
    29    ${StarResourceButtonRoot}:hover & {
    30      fill: ${Color.blue};
    31    }
    32  `
    33  
    34  let InactiveStarIcon = styled(StarIcon)`
    35    transition: fill ${AnimDuration.default} linear,
    36      opacity ${AnimDuration.short} linear;
    37    opacity: 0;
    38  
    39    .u-showStarOnHover:hover &,
    40    ${StarResourceButtonRoot}:focus &,
    41    ${StarResourceButtonRoot}.u-persistShow & {
    42      fill: ${Color.gray50};
    43      opacity: 1;
    44    }
    45  
    46    ${StarResourceButtonRoot}:hover & {
    47      fill: ${Color.blue};
    48      opacity: 1;
    49    }
    50  `
    51  
    52  type StarResourceButtonProps = {
    53    resourceName: string
    54    persistShow?: boolean
    55    analyticsName: string
    56    analyticsTags: Tags
    57  }
    58  
    59  export default function StarResourceButton(
    60    props: StarResourceButtonProps
    61  ): JSX.Element {
    62    let ctx = useStarredResources()
    63    let { resourceName, persistShow, analyticsTags } = props
    64    let isStarred =
    65      ctx.starredResources && ctx.starredResources.includes(resourceName)
    66  
    67    let icon: JSX.Element
    68    let title: string
    69  
    70    if (isStarred) {
    71      icon = <ActiveStarIcon />
    72      title = `Unstar ${resourceName}`
    73    } else {
    74      icon = <InactiveStarIcon />
    75      title = `Star ${resourceName}`
    76    }
    77  
    78    function onClick(e: any) {
    79      e.preventDefault()
    80      e.stopPropagation()
    81      if (isStarred) {
    82        ctx.unstarResource(resourceName)
    83      } else {
    84        ctx.starResource(resourceName)
    85      }
    86    }
    87  
    88    let className = ""
    89    if (persistShow) {
    90      className = "u-persistShow"
    91    }
    92    return (
    93      <StarResourceButtonRoot
    94        title={title}
    95        aria-label={title}
    96        onClick={onClick}
    97        className={className}
    98        analyticsName={props.analyticsName}
    99        analyticsTags={{
   100          newStarState: (!isStarred).toString(),
   101          ...analyticsTags,
   102        }}
   103      >
   104        {icon}
   105      </StarResourceButtonRoot>
   106    )
   107  }