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

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