refactor: onInputChange is renamed to onChange in SearchBox to match …

…with other components affects: @medly-components/core BREAKING CHANGE: onInputChange is renamed to onChange in SearchBox to match with other components
medly · Feb 9, 2023 · 4c2383f · 4c2383f
1 parent b8f301e
commit 4c2383f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/packages/core/src/components/SearchBox/SearchBox.stories.mdx b/packages/core/src/components/SearchBox/SearchBox.stories.mdx
@@ -17,11 +17,11 @@ A `SearchBox` or search bar component is a text field which takes your input and
     <Story name="default">
         {() => {
             const [options, setOptions] = useState([]),
-                onInputChangeHandler = value => value.length > 2 && setOptions([...optionsArray, { label: 'Test', value: 'Test' }]);
+                onChangeHandler = value => value.length > 2 && setOptions([...optionsArray, { label: 'Test', value: 'Test' }]);
             return (
                 <SearchBox
                     placeholder="Search"
-                    onInputChange={onInputChangeHandler}
+                    onChange={onChangeHandler}
                     onOptionSelected={action('Selected')}
                     options={options}
                     onSearch={action('Search')}
@@ -42,11 +42,11 @@ To customize your search filter, you must pass react component to the `customSea
     <Story name="withCustomSearchFilter">
         {() => {
             const [options, setOptions] = useState([]),
-                onInputChangeHandler = value => value.length > 2 && setOptions([...optionsArray, { label: 'Test', value: 'Test' }]);
+                onChangeHandler = value => value.length > 2 && setOptions([...optionsArray, { label: 'Test', value: 'Test' }]);
             return (
                 <SearchBox
                     placeholder="Search"
-                    onInputChange={onInputChangeHandler}
+                    onChange={onChangeHandler}
                     onOptionSelected={action('Selected')}
                     options={options}
                     size={select('Size', size, 'M')}

diff --git a/packages/core/src/components/SearchBox/SearchBox.test.tsx b/packages/core/src/components/SearchBox/SearchBox.test.tsx
@@ -33,15 +33,15 @@ describe('SearchBox', () => {
 
     it('should call onSearch on clicking on search icon with input value', () => {
         const onSearch = jest.fn();
-        const { inputEl } = renderComponent({ onSearch, onInputChange: jest.fn(), placeholder: 'search' });
+        const { inputEl } = renderComponent({ onSearch, onChange: jest.fn(), placeholder: 'search' });
         fireEvent.change(inputEl, { target: { value: 'R' } });
         fireEvent.click(screen.getByTitle('search icon'));
         expect(onSearch).toHaveBeenCalledWith('R');
     });
 
     it('should call onSearch on pressing enter key with the input value', () => {
         const onSearch = jest.fn(),
-            withOptionCB = { placeholder: 'search', onInputChange: jest.fn(), onSearch };
+            withOptionCB = { placeholder: 'search', onChange: jest.fn(), onSearch };
 
         const { container, inputEl } = renderComponent(withOptionCB);
         fireEvent.focus(inputEl);
@@ -52,7 +52,7 @@ describe('SearchBox', () => {
 
     it('should call onClear on clicking on clear icon', () => {
         const onClear = jest.fn(),
-            { container, inputEl } = renderComponent({ placeholder: 'search', onInputChange: jest.fn(), onClear });
+            { container, inputEl } = renderComponent({ placeholder: 'search', onChange: jest.fn(), onClear });
         fireEvent.change(inputEl, { target: { value: 'Dummy' } });
         fireEvent.keyDown(container, { key: 'Enter', code: 13 });
         fireEvent.click(screen.getByTitle('close icon'));
@@ -63,7 +63,7 @@ describe('SearchBox', () => {
     describe('close icon', () => {
         const props = {
             placeholder: 'search',
-            onInputChange: jest.fn()
+            onChange: jest.fn()
         };
 
         it('should render close icon when user provides initial value', () => {
@@ -159,7 +159,7 @@ describe('SearchBox', () => {
         const defaultReturnObj = { target: { value: 'Dummy' } };
         const props = {
             placeholder: 'search',
-            onInputChange: jest.fn(),
+            onChange: jest.fn(),
             options: [
                 { label: 'Dummy 1', value: 'Dummy 1' },
                 { label: 'Dummy 2', value: 'Dummy 2' }

diff --git a/packages/core/src/components/SearchBox/SearchBox.tsx b/packages/core/src/components/SearchBox/SearchBox.tsx
@@ -18,7 +18,7 @@ const Component: FC<SearchBoxProps> = memo(
             options: defaultOptions,
             size,
             placeholder,
-            onInputChange,
+            onChange,
             onOptionSelected,
             onClear,
             onSearch,
@@ -74,7 +74,7 @@ const Component: FC<SearchBoxProps> = memo(
                 const { value } = event.target;
                 updateIsTyping(value.length !== 0);
                 setShowCloseIcon(value.length !== 0);
-                onInputChange && onInputChange(value);
+                onChange && onChange(value);
             }, []),
             handleOptionClick = useCallback(
                 (option: Option) => {

diff --git a/packages/core/src/components/SearchBox/types.ts b/packages/core/src/components/SearchBox/types.ts
@@ -14,7 +14,7 @@ export type WrapperProps = {
     areOptionsVisible?: boolean;
 };
 
-export interface SearchBoxProps extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
+export interface SearchBoxProps extends Omit<HTMLProps<HTMLInputElement>, 'size' | 'onChange'> {
     /** Size for search box can be 'S' | 'M' */
     size?: Size;
     /** Option for search results in form of label and value */
@@ -38,7 +38,7 @@ export interface SearchBoxProps extends Omit<HTMLProps<HTMLInputElement>, 'size'
     /** Function to be called on  selecting the option */
     onOptionSelected?: (value: Option) => void;
     /** Function to be called on input value changes */
-    onInputChange?: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 
 export type StyledSearchBoxProps = SearchBoxProps & {