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

     1  import {
     2    Button,
     3    ButtonProps,
     4    Checkbox,
     5    CheckboxProps,
     6    debounce,
     7    TextField,
     8    TextFieldProps,
     9  } from "@material-ui/core"
    10  import React, { useMemo } from "react"
    11  
    12  // Shared components that implement analytics
    13  // 1. Saves callers from having to implement/test analytics for every interactive
    14  //    component.
    15  // 2. Allows wrappers to cheaply require analytics params.
    16  
    17  type InstrumentationProps = {}
    18  
    19  export function InstrumentedButton(props: ButtonProps & InstrumentationProps) {
    20    const { onClick, ...buttonProps } = props
    21    const instrumentedOnClick: typeof onClick = (e) => {
    22      if (onClick) {
    23        onClick(e)
    24      }
    25    }
    26  
    27    // TODO(nick): variant="outline" doesn't seem like the right default.
    28    return (
    29      <Button
    30        variant="outlined"
    31        disableRipple={true}
    32        onClick={instrumentedOnClick}
    33        {...buttonProps}
    34      />
    35    )
    36  }
    37  
    38  // How long to debounce TextField edit events. i.e., only send one edit
    39  // event per this duration. These don't need to be submitted super
    40  // urgently, and we want to be closer to sending one per user intent than
    41  // one per keystroke.
    42  export const textFieldEditDebounceMilliseconds = 5000
    43  
    44  export function InstrumentedTextField(
    45    props: TextFieldProps & InstrumentationProps
    46  ) {
    47    const { onChange, ...textFieldProps } = props
    48  
    49    const instrumentedOnChange: typeof onChange = (e) => {
    50      if (onChange) {
    51        onChange(e)
    52      }
    53    }
    54  
    55    return <TextField onChange={instrumentedOnChange} {...textFieldProps} />
    56  }
    57  
    58  export function InstrumentedCheckbox(
    59    props: CheckboxProps & InstrumentationProps
    60  ) {
    61    const { onChange, ...checkboxProps } = props
    62    const instrumentedOnChange: typeof onChange = (e, checked) => {
    63      if (onChange) {
    64        onChange(e, checked)
    65      }
    66    }
    67  
    68    return (
    69      <Checkbox
    70        onChange={instrumentedOnChange}
    71        disableRipple={true}
    72        {...checkboxProps}
    73      />
    74    )
    75  }