hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Using Prev/Next icons for search

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-10-21 14:49:41 +03:00
parent 93ae4b6adc
commit 7ac13f5004
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/dock/pod-log-controls.tsx
View File

@ -95,7 +95,7 @@ export const PodLogControls = observer((props: Props) => {
</> </>
)} )}
</div> </div>
<div className="flex gaps"> <div className="flex box grow gaps align-center">
<Icon <Icon
material="av_timer" material="av_timer"
onClick={toggleTimestamps} onClick={toggleTimestamps}

23
src/renderer/components/dock/pod-log-search.tsx
View File

@ -3,8 +3,10 @@ import "./pod-log-search.scss";
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { SearchInput } from "../input"; import { SearchInput } from "../input";
import { Button } from "@material-ui/core";
import { searchStore } from "./search.store"; import { searchStore } from "./search.store";
import { Icon } from "../icon";
import { _i18n } from "../../i18n";
import { t } from "@lingui/macro";
export interface PodLogSearchProps { export interface PodLogSearchProps {
onSearch: (query: string) => void onSearch: (query: string) => void
@ -15,7 +17,8 @@ export interface PodLogSearchProps {
export const PodLogSearch = observer((props: PodLogSearchProps) => { export const PodLogSearch = observer((props: PodLogSearchProps) => {
const { logs, onSearch, toPrevOverlay, toNextOverlay } = props; const { logs, onSearch, toPrevOverlay, toNextOverlay } = props;
const { setNextOverlayActive, setPrevOverlayActive, searchQuery } = searchStore; const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences } = searchStore;
const jumpDisabled = !searchQuery || !occurrences.length;
const setSearch = (query: string) => { const setSearch = (query: string) => {
searchStore.onSearch(logs, query); searchStore.onSearch(logs, query);
@ -33,15 +36,25 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
} }
return ( return (
<div className="PodLogsSearch"> <div className="PodLogsSearch flex box grow justify-flex-end gaps align-center">
<SearchInput <SearchInput
value={searchQuery} value={searchQuery}
onChange={setSearch} onChange={setSearch}
updateUrl={false} updateUrl={false}
/> />
{/* <span>{activeOverlay} / {totalOverlays}</span> */} {/* <span>{activeOverlay} / {totalOverlays}</span> */}
<Button onClick={onPrevOverlay}>prev</Button> <Icon
<Button onClick={onNextOverlay}>next</Button> material="keyboard_arrow_up"
tooltip={_i18n._(t`Previous`)}
onClick={onPrevOverlay}
disabled={jumpDisabled}
/>
<Icon
material="keyboard_arrow_down"
tooltip={_i18n._(t`Next`)}
onClick={onNextOverlay}
disabled={jumpDisabled}
/>
</div> </div>
); );
}); });

3
src/renderer/components/input/search-input.tsx
View File

@ -48,6 +48,9 @@ export class SearchInput extends React.Component<Props> {
if (this.props.updateUrl) { if (this.props.updateUrl) {
this.updateUrl.flush(); this.updateUrl.flush();
} }
if (this.props.onChange) {
this.props.onChange("", null);
}
} }
onChange = (val: string, evt: React.ChangeEvent<any>) => { onChange = (val: string, evt: React.ChangeEvent<any>) => {