diff --git a/package.json b/package.json index 57017ce94..842ff8c0a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "0.0.53-beta-3", + "version": "0.0.53-beta-4", "description": "Supporting common component library", "main": "dist/index.js", "scripts": { diff --git a/src/Common/SearchBar/SearchBar.component.tsx b/src/Common/SearchBar/SearchBar.component.tsx index b4c47d6cc..6f62d211d 100644 --- a/src/Common/SearchBar/SearchBar.component.tsx +++ b/src/Common/SearchBar/SearchBar.component.tsx @@ -1,22 +1,22 @@ -import { ChangeEvent, FunctionComponent, useCallback, useRef, useState, KeyboardEvent } from 'react' +import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react' import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg' import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg' import { SearchBarProps } from './types' import './searchBar.scss' -import { debounce, noop } from '../Helper' +import { debounce } from '../Helper' /** * Generic search input component with support for enter based and debounced search */ -const SearchBar: FunctionComponent = ({ +const SearchBar = ({ initialSearchText = '', - handleSearchChange = noop, - handleEnter = noop, + handleSearchChange = () => {}, + handleEnter = () => {}, inputProps = {}, containerClassName, shouldDebounce = false, debounceTimeout = 300, -}) => { +}: SearchBarProps) => { const [showClearButton, setShowClearButton] = useState(!!initialSearchText) const inputRef = useRef() const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [ @@ -34,20 +34,24 @@ const SearchBar: FunctionComponent = ({ } } + const _applySearch = (value: string) => { + handleSearchChange(value) + handleEnter(value) + } + const handleKeyDown = (e: KeyboardEvent) => { const { key } = e if (key === 'Enter') { const inputTarget = e.target as HTMLInputElement - const event = { ...e, target: { ...inputTarget, value: inputTarget.value.trim() } } - handleSearchChange(event.target.value) - handleEnter(event) + const value = inputTarget.value.trim() + _applySearch(value) } } const clearSearch = () => { inputRef.current.value = '' - handleSearchChange('') + _applySearch('') } return ( diff --git a/src/Common/SearchBar/index.ts b/src/Common/SearchBar/index.ts new file mode 100644 index 000000000..464a0d118 --- /dev/null +++ b/src/Common/SearchBar/index.ts @@ -0,0 +1,2 @@ +export { default as SearchBar } from './SearchBar.component' +export type { SearchBarProps } from './types' diff --git a/src/Common/SearchBar/types.ts b/src/Common/SearchBar/types.ts index 891549537..de9c55172 100644 --- a/src/Common/SearchBar/types.ts +++ b/src/Common/SearchBar/types.ts @@ -1,4 +1,4 @@ -import { InputHTMLAttributes, SyntheticEvent } from 'react' +import { InputHTMLAttributes } from 'react' export interface SearchBarProps { /** @@ -14,7 +14,7 @@ export interface SearchBarProps { /** * Enter event handler for the search input */ - handleEnter?: (event: SyntheticEvent) => void + handleEnter?: (searchText: string) => void /** * Input props for the search input */ diff --git a/src/Common/index.ts b/src/Common/index.ts index aab28eac9..edfb7bdf2 100644 --- a/src/Common/index.ts +++ b/src/Common/index.ts @@ -26,7 +26,7 @@ export * from './Common.service' export * from './Checkbox' export { default as EmptyState } from './EmptyState/EmptyState' export { default as GenericEmptyState } from './EmptyState/GenericEmptyState' -export { default as SearchBar } from './SearchBar/SearchBar.component' +export * from './SearchBar' export { default as Toggle } from './Toggle/Toggle' export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable' export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'