github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewActionBarKeyboardShortcuts.tsx (about) 1 import React, { Component } from "react" 2 import { AnalyticsAction, incr } from "./analytics" 3 import { clearLogs } from "./ClearLogs" 4 import LogStore from "./LogStore" 5 import { isTargetEditable } from "./shortcut" 6 import { ResourceName, UILink } from "./types" 7 8 type Props = { 9 logStore: LogStore 10 resourceName: string 11 endpoints?: UILink[] 12 openEndpointUrl: (url: string) => void 13 } 14 15 const keyCodeOne = 49 16 const keyCodeNine = 57 17 18 /** 19 * Sets up keyboard shortcuts that depend on the state of the current resource. 20 */ 21 class OverviewActionBarKeyboardShortcuts extends Component<Props> { 22 constructor(props: Props) { 23 super(props) 24 this.onKeydown = this.onKeydown.bind(this) 25 } 26 27 componentDidMount() { 28 document.body.addEventListener("keydown", this.onKeydown) 29 } 30 31 componentWillUnmount() { 32 document.body.removeEventListener("keydown", this.onKeydown) 33 } 34 35 onKeydown(e: KeyboardEvent) { 36 if (isTargetEditable(e)) { 37 return 38 } 39 40 if (e.altKey || e.isComposing) { 41 return 42 } 43 44 if (e.ctrlKey || e.metaKey) { 45 if (e.key === "Backspace" && !e.shiftKey) { 46 const all = this.props.resourceName === ResourceName.all 47 incr("ui.web.clearLogs", { 48 action: AnalyticsAction.Shortcut, 49 all: all.toString(), 50 }) 51 clearLogs(this.props.logStore, this.props.resourceName) 52 e.preventDefault() 53 return 54 } 55 56 return 57 } 58 59 if (e.keyCode >= keyCodeOne && e.keyCode <= keyCodeNine && e.shiftKey) { 60 let endpointIndex = e.keyCode - keyCodeOne 61 let endpoint = this.props.endpoints && this.props.endpoints[endpointIndex] 62 if (!endpoint || !endpoint.url) { 63 return 64 } 65 66 incr("ui.web.endpoint", { action: AnalyticsAction.Shortcut }) 67 this.props.openEndpointUrl(endpoint.url) 68 e.preventDefault() 69 return 70 } 71 } 72 73 render() { 74 return <></> 75 } 76 } 77 78 export default OverviewActionBarKeyboardShortcuts