-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add search capabilities to Peripheral Inspector view (#34)
* Add search capabilities to Peripheral Inspector view - Provide custom SearchOverlay component - Add search overlay to filter tree and tree table Closes #23 * Include children if search matches a particular item * Add 'Search' icon to trigger search from view title bar * Consider PR feedback
- Loading branch information
1 parent
89663e2
commit 484775e
Showing
16 changed files
with
812 additions
and
354 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
/******************************************************************************** | ||
* Copyright (C) 2024 EclipseSource and others. | ||
* | ||
* This program and the accompanying materials are made available under the | ||
* terms of the MIT License as outlined in the LICENSE File | ||
********************************************************************************/ | ||
import { CDTTreeItem } from '../types'; | ||
import { classNames } from './utils'; | ||
import React from 'react'; | ||
|
||
export interface RenderExpandIconProps<RecordType> { | ||
prefixCls: string; | ||
expanded: boolean; | ||
record: RecordType; | ||
expandable: boolean; | ||
onExpand: TriggerEventHandler<RecordType>; | ||
} | ||
|
||
export type TriggerEventHandler<RecordType> = (record: RecordType, event: React.MouseEvent<HTMLElement>) => void; | ||
|
||
export function ExpandIcon({ expanded, onExpand, record, expandable }: RenderExpandIconProps<CDTTreeItem>): React.ReactElement { | ||
if (!expandable) { | ||
// simulate spacing to the left that we gain through expand icon so that leaf items look correctly intended | ||
return <span className='leaf-item-spacer' />; | ||
} | ||
|
||
const doExpand = (event: React.MouseEvent<HTMLElement>) => { | ||
event.stopPropagation(); | ||
onExpand(record, event); | ||
}; | ||
|
||
const iconClass = expanded ? 'codicon-chevron-down' : 'codicon-chevron-right'; | ||
return ( | ||
<div | ||
className={classNames('tree-toggler-container', 'codicon', iconClass)} | ||
onClick={doExpand} | ||
role="button" | ||
tabIndex={0} | ||
aria-label={expanded ? 'Collapse row' : 'Expand row'} | ||
onKeyDown={event => { if (event.key === 'Enter' || event.key === ' ') doExpand(event as unknown as React.MouseEvent<HTMLElement>); }} | ||
></div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
/********************************************************************* | ||
* Copyright (c) 2024 Arm Limited and others | ||
* | ||
* This program and the accompanying materials are made available under the | ||
* terms of the MIT License as outlined in the LICENSE File | ||
********************************************************************************/ | ||
|
||
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'; | ||
import React from 'react'; | ||
import './search.css'; | ||
|
||
export interface SearchOverlayProps { | ||
onChange?: (text: string) => void; | ||
onShow?: () => void; | ||
onHide?: () => void; | ||
} | ||
|
||
export interface SearchOverlay { | ||
input: () => HTMLInputElement | null; | ||
focus: () => void; | ||
value(): string; | ||
setValue: (value: string) => void; | ||
show: () => void; | ||
hide: () => void; | ||
} | ||
|
||
export const SearchOverlay = React.forwardRef<SearchOverlay, SearchOverlayProps>((props, ref) => { | ||
const [showSearch, setShowSearch] = React.useState(false); | ||
const searchTextRef = React.useRef<HTMLInputElement>(null); | ||
const previousFocusedElementRef = React.useRef<HTMLElement | null>(null); | ||
|
||
const show = () => { | ||
previousFocusedElementRef.current = document.activeElement as HTMLElement; | ||
setShowSearch(true); | ||
setTimeout(() => searchTextRef.current?.select(), 100); | ||
props.onShow?.(); | ||
}; | ||
|
||
const hide = () => { | ||
setShowSearch(false); | ||
props.onHide?.(); | ||
if (previousFocusedElementRef.current) { | ||
previousFocusedElementRef.current.focus(); | ||
} | ||
}; | ||
|
||
const onTextChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
const value = e.target.value; | ||
props.onChange?.(value); | ||
}; | ||
|
||
const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { | ||
if (e.ctrlKey && e.key === 'f') { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
show(); | ||
} else if (e.key === 'Escape') { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
hide(); | ||
} | ||
}; | ||
|
||
const onFocus = (e: React.FocusEvent<HTMLInputElement>) => { | ||
if (e.relatedTarget) { | ||
previousFocusedElementRef.current = e.relatedTarget as HTMLElement; | ||
} | ||
}; | ||
|
||
React.useImperativeHandle(ref, () => ({ | ||
input: () => searchTextRef.current, | ||
focus: () => searchTextRef.current?.focus(), | ||
value: () => searchTextRef.current?.value ?? '', | ||
setValue: (newValue: string) => { | ||
if (searchTextRef.current) { | ||
searchTextRef.current.value = newValue; | ||
} | ||
}, | ||
show: () => show(), | ||
hide: () => hide() | ||
})); | ||
|
||
return (<div className={showSearch ? 'search-overlay visible' : 'search-overlay'} onKeyDown={onKeyDown}> | ||
<input ref={searchTextRef} onChange={onTextChange} onFocus={onFocus} placeholder="Find" className="search-input" /> | ||
<VSCodeButton title='Close (Escape)' appearance='icon' aria-label='Close (Escape)'><span className='codicon codicon-close' onClick={() => hide()} /></VSCodeButton> | ||
</div> | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
/******************************************************************************** | ||
* Copyright (C) 2024 EclipseSource and others. | ||
* | ||
* This program and the accompanying materials are made available under the | ||
* terms of the MIT License as outlined in the LICENSE File | ||
********************************************************************************/ | ||
|
||
.search-overlay { | ||
position: fixed; | ||
top: -33px; | ||
opacity: 0; | ||
right: 20px; | ||
background-color: var(--vscode-editorWidget-background); | ||
box-shadow: 0 0 4px 1px var(--vscode-widget-shadow); | ||
color: var(--vscode-editorWidget-foreground); | ||
border-bottom: 1px solid var(--vscode-widget-border); | ||
border-bottom-left-radius: 4px; | ||
border-bottom-right-radius: 4px; | ||
border-left: 1px solid var(--vscode-widget-border); | ||
border-right: 1px solid var(--vscode-widget-border); | ||
box-sizing: border-box; | ||
height: 33px; | ||
line-height: 19px; | ||
overflow: hidden; | ||
padding: 4px; | ||
z-index: 35; | ||
display: flex; | ||
flex-direction: row; | ||
gap: 5px; | ||
|
||
-webkit-transition: top 0.2s ease, opacity 0.2s ease; | ||
-moz-transition: top 0.2s ease, opacity 0.2s ease; | ||
-ms-transition: top 0.2s ease, opacity 0.2s ease; | ||
-o-transition: top 0.2s ease, opacity 0.2s ease; | ||
transition: top 0.2s ease, opacity 0.2s ease; | ||
} | ||
|
||
.search-overlay.visible { | ||
top: 5px; | ||
opacity: 1; | ||
} | ||
|
||
body.has-scrollbar .search-overlay { | ||
right: 5px; | ||
} | ||
|
||
.search-overlay .search-input { | ||
color: var(--vscode-input-foreground); | ||
background-color: var(--vscode-input-background); | ||
outline: none; | ||
scrollbar-width: none; | ||
border: none; | ||
box-sizing: border-box; | ||
display: inline-block; | ||
font-family: inherit; | ||
font-size: inherit; | ||
height: 100%; | ||
line-height: inherit; | ||
resize: none; | ||
width: 100%; | ||
padding: 4px 6px; | ||
margin: 0; | ||
} | ||
|
||
.search-overlay input.search-input:focus { | ||
outline: 1px solid var(--vscode-focusBorder) | ||
} | ||
|
||
|
||
.search-input::placeholder { | ||
color: var(--vscode-input-placeholderForeground); | ||
} | ||
|
||
.search-input::-moz-placeholder { | ||
color: var(--vscode-input-placeholderForeground); | ||
} | ||
|
||
.search-input:-ms-input-placeholder { | ||
color: var(--vscode-input-placeholderForeground); | ||
} | ||
|
||
.search-input:-webkit-input-placeholder { | ||
color: var(--vscode-input-placeholderForeground); | ||
} |
Oops, something went wrong.