Merge front end repo

1 files changed, 63 insertions, 0 deletions

diff --git a/Timeline/ClientApp/src/app/common/SearchInput.tsx b/Timeline/ClientApp/src/app/common/SearchInput.tsx
new file mode 100644
index 00000000..46fb00d1
--- /dev/null
+++ b/Timeline/ClientApp/src/app/common/SearchInput.tsx
@@ -0,0 +1,63 @@
+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;