From a42050630bcf83de026c4429472e61ad2302e22b Mon Sep 17 00:00:00 2001 From: Amit Amrutiya <amitamrutiya2210@gmail.com> Date: Fri, 11 Oct 2024 00:02:42 +0530 Subject: [PATCH] feat: refactor StyledSearchBar component and add search icon Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com> --- .../StyledSearchBar/StyledSearchBar.tsx | 73 ++++++++++--------- src/custom/StyledSearchBar/style.tsx | 21 ++++++ 2 files changed, 61 insertions(+), 33 deletions(-) create mode 100644 src/custom/StyledSearchBar/style.tsx diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index d543bf520..2e2799bdb 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -1,51 +1,58 @@ +import { SxProps, Theme, useTheme } from '@mui/material'; import React from 'react'; -import { Box } from '../../base/Box'; -import { InputAdornment } from '../../base/Input'; -import { TextField } from '../../base/TextField'; +import { InputAdornment } from '../../base'; +import { SearchIcon } from '../../icons'; +import { InputAdornmentEnd, StyledSearchInput } from './style'; interface SearchBarProps { onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; value?: string; width?: string; - label: string; + label?: string; + placeholder?: string; + sx?: SxProps<Theme>; endAdornment?: React.ReactNode; } +/** + * StyledSearchBar component renders a search input field with customizable properties. + * + * @param {Object} props - The component props. + * @param {function} [props.onChange] - Function to handle the change event when the search input value changes. + * @param {string} [props.value] - The current value of the search input. + * @param {string} [props.label] - The label for the search input. + * @param {string} [props.placeholder] - The placeholder text for the search input. + * @param {Object} [props.sx] - The style object for the search input. + * @param {React.ReactNode} [props.endAdornment] - The element to display at the end of the search input. + * + * @returns {JSX.Element} The rendered StyledSearchBar component. + */ function StyledSearchBar({ onChange, value, - width, label, - endAdornment, - ...props + sx, + placeholder, + endAdornment }: SearchBarProps): JSX.Element { + const theme = useTheme(); + return ( - <React.Fragment> - <Box - component="form" - sx={{ - '& > :not(style)': { width } - }} - {...props} - > - <TextField - variant="outlined" - label={label} - fullWidth - type="search" - value={value} - onChange={onChange} - sx={{ - margin: 'auto', - height: '5ch' - }} - placeholder="Search" - InputProps={{ - endAdornment: <InputAdornment position="end">{endAdornment}</InputAdornment> - }} - /> - </Box> - </React.Fragment> + <StyledSearchInput + type="search" + label={label} + fullWidth + value={value} + onChange={onChange} + sx={sx} + placeholder={placeholder ?? 'Search'} + startAdornment={ + <InputAdornment position="start"> + <SearchIcon fill={theme.palette.background.neutral?.default} /> + </InputAdornment> + } + endAdornment={<InputAdornmentEnd position="end">{endAdornment}</InputAdornmentEnd>} + /> ); } diff --git a/src/custom/StyledSearchBar/style.tsx b/src/custom/StyledSearchBar/style.tsx new file mode 100644 index 000000000..92ce4187b --- /dev/null +++ b/src/custom/StyledSearchBar/style.tsx @@ -0,0 +1,21 @@ +import { styled } from '@mui/material'; +import { InputAdornment, OutlinedInput } from '../../base'; + +export const StyledSearchInput = styled(OutlinedInput)(({ style }) => ({ + width: '100%', + '@media (max-width: 590px)': { + marginLeft: '0.25rem', + paddingLeft: '0.25rem' + }, + display: 'flex', + ...style +})); + +export const InputAdornmentEnd = styled(InputAdornment)(({ theme }) => ({ + borderLeft: `1px solid ${theme.palette.border.normal}`, + height: '30px', + paddingLeft: '10px', + '@media (max-width: 590px)': { + paddingLeft: '0px' + } +}));