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