diff options
author | crupest <crupest@outlook.com> | 2020-07-13 20:59:52 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2020-07-13 20:59:52 +0800 |
commit | e69190abb09661caa19fa3905a0d8f3b7e72648b (patch) | |
tree | 8030e6a2539347ccb12f0a6bbd31a1f390c6a7b7 /Timeline/ClientApp/src/app/common/SearchInput.tsx | |
parent | 0a7c884be668267003d7666b444f1022c99a7148 (diff) | |
download | timeline-e69190abb09661caa19fa3905a0d8f3b7e72648b.tar.gz timeline-e69190abb09661caa19fa3905a0d8f3b7e72648b.tar.bz2 timeline-e69190abb09661caa19fa3905a0d8f3b7e72648b.zip |
Move front end to a submodule.
Diffstat (limited to 'Timeline/ClientApp/src/app/common/SearchInput.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/common/SearchInput.tsx | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/Timeline/ClientApp/src/app/common/SearchInput.tsx b/Timeline/ClientApp/src/app/common/SearchInput.tsx deleted file mode 100644 index 50c252fa..00000000 --- a/Timeline/ClientApp/src/app/common/SearchInput.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useCallback } from 'react'; -import clsx from 'clsx'; -import { Spinner, Input, Button } from 'reactstrap'; -import { useTranslation } from 'react-i18next'; - -export interface SearchInputProps { - value: string; - onChange: (value: string) => void; - onButtonClick: () => void; - className?: string; - loading?: boolean; - buttonText?: string; - placeholder?: string; - additionalButton?: React.ReactNode; -} - -const SearchInput: React.FC<SearchInputProps> = (props) => { - const { onChange, onButtonClick } = props; - - const { t } = useTranslation(); - - const onInputChange = useCallback( - (event: React.ChangeEvent<HTMLInputElement>): void => { - onChange(event.currentTarget.value); - }, - [onChange] - ); - - const onInputKeyPress = useCallback( - (event: React.KeyboardEvent<HTMLInputElement>): void => { - if (event.key === 'Enter') { - onButtonClick(); - } - }, - [onButtonClick] - ); - - return ( - <div className={clsx('form-inline my-2', props.className)}> - <Input - className="mr-sm-2" - value={props.value} - onChange={onInputChange} - onKeyPress={onInputKeyPress} - placeholder={props.placeholder} - /> - <div className="mt-2 mt-sm-0 order-sm-last ml-sm-3"> - {props.additionalButton} - </div> - <div className="mt-2 mt-sm-0 ml-auto ml-sm-0"> - {props.loading ? ( - <Spinner /> - ) : ( - <Button outline color="primary" onClick={props.onButtonClick}> - {props.buttonText ?? t('search')} - </Button> - )} - </div> - </div> - ); -}; - -export default SearchInput; |