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

     1  import React, { useCallback, useMemo } from "react"
     2  import styled from "styled-components"
     3  import { AnalyticsType } from "./analytics"
     4  import { ReactComponent as CollapseSvg } from "./assets/svg/collapse.svg"
     5  import { ReactComponent as ExpandSvg } from "./assets/svg/expand.svg"
     6  import { InstrumentedButton } from "./instrumentedComponents"
     7  import { useResourceGroups } from "./ResourceGroupsContext"
     8  import {
     9    AnimDuration,
    10    Color,
    11    mixinResetButtonStyle,
    12    SizeUnit,
    13  } from "./style-helpers"
    14  
    15  const buttonStyle = `
    16    ${mixinResetButtonStyle};
    17    padding: 0 ${SizeUnit(0.25)};
    18    border-radius: 0;
    19  
    20    &:last-child {
    21      padding-right: ${SizeUnit(0.5)};
    22    }
    23  
    24    .fill-std {
    25      fill: ${Color.gray70};
    26      transition: fill ${AnimDuration.default} ease
    27    }
    28  
    29    &:hover .fill-std {
    30      fill: ${Color.blue};
    31    }
    32  
    33    &.Mui-disabled .fill-std {
    34      fill: ${Color.gray50};
    35    }
    36  `
    37  
    38  const ExpandButtonRoot = styled(InstrumentedButton)`
    39    ${buttonStyle}
    40  `
    41  const CollapseButtonRoot = styled(InstrumentedButton)`
    42    ${buttonStyle}
    43    border-left: 1px solid ${Color.gray50};
    44  `
    45  
    46  const analyticsTags = { type: AnalyticsType.Detail }
    47  
    48  export function ExpandButton(props: {
    49    disabled: boolean
    50    analyticsType: AnalyticsType
    51  }) {
    52    let { expandAll } = useResourceGroups()
    53    let { analyticsType } = props
    54    let analyticsTags = useMemo(() => {
    55      return { type: analyticsType }
    56    }, [analyticsType])
    57  
    58    return (
    59      <ExpandButtonRoot
    60        title={"Expand All"}
    61        variant={"text"}
    62        onClick={expandAll}
    63        analyticsName={"ui.web.expandAllGroups"}
    64        analyticsTags={analyticsTags}
    65        disabled={props.disabled}
    66      >
    67        <ExpandSvg width="16px" height="16px" />
    68      </ExpandButtonRoot>
    69    )
    70  }
    71  
    72  export function CollapseButton(props: {
    73    groups: string[]
    74    disabled: boolean
    75    analyticsType: AnalyticsType
    76  }) {
    77    let { collapseAll } = useResourceGroups()
    78    let { groups, analyticsType } = props
    79  
    80    let onClick = useCallback(() => {
    81      collapseAll(groups)
    82    }, [groups, collapseAll])
    83  
    84    let analyticsTags = useMemo(() => {
    85      return { type: analyticsType }
    86    }, [analyticsType])
    87  
    88    return (
    89      <CollapseButtonRoot
    90        title={"Collapse All"}
    91        variant={"text"}
    92        onClick={onClick}
    93        analyticsName={"ui.web.collapseAllGroups"}
    94        analyticsTags={analyticsTags}
    95        disabled={props.disabled}
    96      >
    97        <CollapseSvg width="16px" height="16px" />
    98      </CollapseButtonRoot>
    99    )
   100  }