LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

DebouncedSearch: add inline option + use FormField

Browse source 
Using FormField so that the existing css works.
This commit is contained in:
infinite-persistence 2022-03-01 10:20:29 +08:00 committed by Thomas Zarebczan
parent 17a9b84df1
commit 54f8bd35b3
1 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/component/common/debounced-input.jsx
View file

@ -1,7 +1,9 @@
// @flow
import React, { useEffect, useState } from 'react';
import { FormField } from 'component/common/form';
import Icon from 'component/common/icon';
import useDebounce from 'effects/use-debounce';
import classnames from 'classnames';
const FILTER_DEBOUNCE_MS = 300;
@ -9,11 +11,12 @@ interface Props {
defaultValue?: string;
icon?: string;
placeholder?: string;
inline?: boolean;
onChange: (newValue: string) => any;
}
export default function DebouncedInput(props: Props) {
const { defaultValue = '', icon, placeholder = '', onChange } = props;
const { defaultValue = '', icon, placeholder = '', inline, onChange } = props;
const [rawValue, setRawValue] = useState(defaultValue);
const debouncedValue: string = useDebounce(rawValue, FILTER_DEBOUNCE_MS);
@ -22,10 +25,12 @@ export default function DebouncedInput(props: Props) {
}, [onChange, debouncedValue]);
return (
<div className="wunderbar">
<div className={classnames({ wunderbar: !inline, 'wunderbar--inline': inline })}>
{icon && <Icon icon={icon} />}
<input
className="wunderbar__input"
<FormField
className={classnames({ wunderbar__input: !inline, 'wunderbar__input--inline': inline })}
type="text"
name="debounced_search"
spellCheck={false}
placeholder={placeholder}
value={rawValue}