diff --git a/src/renderer/components/dock/pod-log-search.scss b/src/renderer/components/dock/pod-log-search.scss new file mode 100644 index 0000000000..0728be1dc8 --- /dev/null +++ b/src/renderer/components/dock/pod-log-search.scss @@ -0,0 +1,12 @@ +.PodLogsSearch { + .SearchInput { + min-width: 150px; + + label { + background: none; + border: none; + border-radius: $radius; + box-shadow: 0 0 0 1px $halfGray; + } + } +} \ No newline at end of file diff --git a/src/renderer/components/dock/pod-log-search.tsx b/src/renderer/components/dock/pod-log-search.tsx index e716aa1616..f67d6d9816 100644 --- a/src/renderer/components/dock/pod-log-search.tsx +++ b/src/renderer/components/dock/pod-log-search.tsx @@ -1,7 +1,8 @@ +import "./pod-log-search.scss"; + import React from "react"; import { observer } from "mobx-react"; -import { cssNames } from "../../utils"; -import { Input } from "../input"; +import { SearchInput } from "../input"; import { Button } from "@material-ui/core"; import { searchStore } from "./search.store"; @@ -14,7 +15,7 @@ export interface PodLogSearchProps { export const PodLogSearch = observer((props: PodLogSearchProps) => { const { logs, onSearch, toPrevOverlay, toNextOverlay } = props; - const { setNextOverlayActive, setPrevOverlayActive } = searchStore; + const { setNextOverlayActive, setPrevOverlayActive, searchQuery } = searchStore; const setSearch = (query: string) => { searchStore.onSearch(logs, query); @@ -33,10 +34,10 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => { return (
- {/* {activeOverlay} / {totalOverlays} */} diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx index 9bf2b7387d..f04fbf5eed 100644 --- a/src/renderer/components/input/search-input.tsx +++ b/src/renderer/components/input/search-input.tsx @@ -13,10 +13,12 @@ import { _i18n } from '../../i18n'; interface Props extends InputProps { compact?: boolean; // show only search-icon when not focused + updateUrl?: boolean; } const defaultProps: Partial = { autoFocus: true, + updateUrl: true, get placeholder() { return _i18n._(t`Search...`) }, @@ -26,20 +28,26 @@ const defaultProps: Partial = { export class SearchInput extends React.Component { static defaultProps = defaultProps as object; - @observable inputVal = ""; // fix: use empty string to avoid react warnings + @observable inputVal = this.props.value || ""; // fix: use empty string to avoid react warnings @disposeOnUnmount - updateInput = autorun(() => this.inputVal = getSearch()) + updateInput = autorun(() => { + if (this.props.updateUrl) this.inputVal = getSearch(); + }) updateUrl = debounce((val: string) => setSearch(val), 250) setValue = (value: string) => { this.inputVal = value; - this.updateUrl(value); + if (this.props.updateUrl) { + this.updateUrl(value); + } } clear = () => { this.setValue(""); - this.updateUrl.flush(); + if (this.props.updateUrl) { + this.updateUrl.flush(); + } } onChange = (val: string, evt: React.ChangeEvent) => { @@ -63,7 +71,7 @@ export class SearchInput extends React.Component { render() { const { inputVal } = this; - const { className, compact, ...inputProps } = this.props; + const { className, compact, updateUrl, ...inputProps } = this.props; const icon = inputVal ? :