forked from cerc-io/snowballtools-base
61e3e88a6c
### TL;DR This pull request refactors the `SearchBar` and `Input` components, adding a `ref` to the former and removing an incorrect understanding of `react-hook-form` (yes, i prev "fix" the component) in the latter. ### What changed? A ref is added to the SearchBar component for better control and handling. In the Input component, we have eliminated the usage of 'react-hook-form' and as a result, the 'register' prop is removed. This makes the component less reliant on specific libraries and more reusable. ### How to test? Ensure that proper testing is done on the updated components. Make sure that the `SearchBar` works as expected with its ref and that Input does not depend on 'react-hook-form' anymore. ### Why make this change? This change was made to improve the functionality of the `SearchBar` and the flexibility of the Input component, making them more effective and reusable respectively. The changes also align with the current code quality standards and best practices.
28 lines
731 B
TypeScript
28 lines
731 B
TypeScript
import React, { forwardRef, RefAttributes } from 'react';
|
|
|
|
import { SearchIcon } from './shared/CustomIcon';
|
|
import { Input, InputProps } from './shared/Input';
|
|
|
|
const SearchBar: React.ForwardRefRenderFunction<
|
|
HTMLInputElement,
|
|
InputProps & RefAttributes<HTMLInputElement>
|
|
> = ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
|
|
return (
|
|
<div className="relative flex w-full">
|
|
<Input
|
|
leftIcon={<SearchIcon />}
|
|
onChange={onChange}
|
|
value={value}
|
|
type="search"
|
|
placeholder={placeholder}
|
|
appearance="borderless"
|
|
className="w-full lg:w-[459px]"
|
|
{...props}
|
|
ref={ref}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default forwardRef(SearchBar);
|