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