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

     1  import React, { MouseEventHandler } from "react"
     2  import styled from "styled-components"
     3  import { InstrumentedButton } from "./instrumentedComponents"
     4  import {
     5    AnimDuration,
     6    Color,
     7    Font,
     8    FontSize,
     9    mixinResetButtonStyle,
    10  } from "./style-helpers"
    11  
    12  const ShowMoreButtonRoot = styled(InstrumentedButton)`
    13    ${mixinResetButtonStyle};
    14    color: ${Color.gray60};
    15    font-family: ${Font.sansSerif};
    16    font-size: ${FontSize.small};
    17    padding: 0 0.5em;
    18    transition: color ${AnimDuration.default} ease;
    19  
    20    &:hover,
    21    &:focus,
    22    &:active {
    23      color: ${Color.blue};
    24    }
    25  `
    26  
    27  const ShowMoreCount = styled.span`
    28    color: ${Color.gray70};
    29    font-family: ${Font.sansSerif};
    30    font-size: ${FontSize.small};
    31  `
    32  
    33  export function ShowMoreButton({
    34    itemCount,
    35    currentListSize,
    36    onClick,
    37  }: {
    38    itemCount: number
    39    currentListSize: number
    40    onClick: MouseEventHandler
    41  }) {
    42    if (itemCount <= currentListSize) {
    43      return null
    44    }
    45  
    46    const remainingCount = itemCount - currentListSize
    47  
    48    return (
    49      <>
    50        <ShowMoreButtonRoot onClick={onClick}>…Show more</ShowMoreButtonRoot>
    51        <ShowMoreCount aria-label={`${remainingCount} hidden resources`}>
    52          ({remainingCount})
    53        </ShowMoreCount>
    54      </>
    55    )
    56  }