diff --git a/.changeset/brown-games-share.md b/.changeset/brown-games-share.md new file mode 100644 index 0000000..3c13cd2 --- /dev/null +++ b/.changeset/brown-games-share.md @@ -0,0 +1,5 @@ +--- +'@gimnathperera/react-mui-multi-search': patch +--- + +fix base-level styles diff --git a/index.html b/index.html index e4b78ea..319763e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + react-mui-multi-search
diff --git a/src/components/MultiSearch/AppliedFilters/index.styles.ts b/src/components/MultiSearch/AppliedFilters/index.styles.ts index 36f81bd..62a37e6 100644 --- a/src/components/MultiSearch/AppliedFilters/index.styles.ts +++ b/src/components/MultiSearch/AppliedFilters/index.styles.ts @@ -3,13 +3,13 @@ import { Box, Chip } from '@mui/material'; export const ChipContainer = styled(Box)(() => ({ display: 'flex', - gap: '8px', + gap: '0.5rem', flexWrap: 'wrap', })); export const FilterChip = styled(Chip)(() => ({ background: '#fff', - borderRadius: 16, - border: '1px solid #DADCE0', + borderRadius: '1rem', + border: '0.0625rem solid #DEEEFF', color: '#001F3D', })); diff --git a/src/components/MultiSearch/FilterBy/index.styles.ts b/src/components/MultiSearch/FilterBy/index.styles.ts index e311e3f..7ab8a73 100644 --- a/src/components/MultiSearch/FilterBy/index.styles.ts +++ b/src/components/MultiSearch/FilterBy/index.styles.ts @@ -2,14 +2,14 @@ import styled from '@emotion/styled'; import { Box, IconButton } from '@mui/material'; export const FilterButton = styled(IconButton)(() => ({ - padding: '8px', - borderRadius: '12px', + padding: '0.5rem', + borderRadius: '0.75rem', })); export const FilterContainer = styled(Box)(() => ({ - padding: 16, - minWidth: '187px', + padding: '1rem', + minWidth: '11.6875rem', display: 'flex', flexDirection: 'column', - gap: '12px', + gap: '0.75rem', })); diff --git a/src/components/MultiSearch/FilterBy/index.tsx b/src/components/MultiSearch/FilterBy/index.tsx index 44aaec7..5dafee7 100644 --- a/src/components/MultiSearch/FilterBy/index.tsx +++ b/src/components/MultiSearch/FilterBy/index.tsx @@ -1,16 +1,9 @@ import React, { useState, useCallback } from 'react'; -import { - Button, - FormControl, - MenuItem, - Popover, - Select, - SelectChangeEvent, - Typography, -} from '@mui/material'; +import { FormControl, MenuItem, Popover, SelectChangeEvent, Typography } from '@mui/material'; import TuneIcon from '@mui/icons-material/Tune'; import { FilterButton, FilterContainer } from './index.styles'; import { Filter, FilteredBy, SelectOption } from '../types'; +import { StyledButton, StyledSelect } from '../index.styles'; interface Props { filters: Filter[]; @@ -35,7 +28,7 @@ const FilterBy: React.FC = ({ filters, onFilterBy }) => { }, []); const handleFilterKeyChange = useCallback( - (event: SelectChangeEvent): void => { + (event: SelectChangeEvent): void => { const selectedValue = event.target.value; const selectedFilter = filters.find(({ filterKey }) => filterKey.value === selectedValue); setSelectedFilter(selectedFilter || null); @@ -43,8 +36,10 @@ const FilterBy: React.FC = ({ filters, onFilterBy }) => { [filters], ); - const handleFilterValueChange = useCallback((event: SelectChangeEvent): void => { - setFilterValue(event.target.value); + const handleFilterValueChange = useCallback((event: SelectChangeEvent): void => { + const selectedValue = event.target.value; + + setFilterValue(String(selectedValue)); }, []); const handleOnFilterByClick = useCallback((): void => { @@ -75,12 +70,20 @@ const FilterBy: React.FC = ({ filters, onFilterBy }) => { vertical: 'bottom', horizontal: 'left', }} + PaperProps={{ + style: { + marginTop: '8px', + border: '1px solid #DEEEFF', + borderRadius: 16, + boxShadow: '3px -5px 40px rgba(59, 59, 63, 0.09151)', + }, + }} > Filter results with - + - + - + diff --git a/src/components/MultiSearch/MultiSearch.tsx b/src/components/MultiSearch/MultiSearch.tsx index 6ea5f56..c9ff0a4 100644 --- a/src/components/MultiSearch/MultiSearch.tsx +++ b/src/components/MultiSearch/MultiSearch.tsx @@ -12,6 +12,7 @@ interface Props { searchOptions: SelectOption[]; filterOptions?: Filter[]; onPrint?: () => void; + onSearch?: (searchBy: SearchParam[]) => void; } export const MultiSearch: React.FC = ({ @@ -19,15 +20,12 @@ export const MultiSearch: React.FC = ({ searchOptions, filterOptions = [], onPrint, + onSearch, }): JSX.Element => { const [searchParams, setSearchParams] = useState([]); - const handlePrintButtonClick = useCallback(() => { - if (onPrint) { - onPrint(); - } else { - window.print(); - } + const handleOnPrint = useCallback(() => { + if (onPrint) onPrint(); }, [onPrint]); const handleAddFilterByParam = useCallback(({ filterKey, filterValue }: FilteredBy) => { @@ -43,10 +41,10 @@ export const MultiSearch: React.FC = ({ }, []); const handleAddSearchByParam = useCallback(({ searchKey, searchValue }: SearchedBy) => { - setSearchParams(prevSearchParams => [ - ...prevSearchParams, - { key: searchKey, value: searchValue }, - ]); + const newSearchParams = [...searchParams, { key: searchKey, value: searchValue }]; + setSearchParams(newSearchParams); + + if (onSearch) onSearch(newSearchParams); }, []); const handleRemoveSearchParam = useCallback((paramToRemove: SearchParam) => { @@ -59,12 +57,12 @@ export const MultiSearch: React.FC = ({ - {filterOptions.length > 0 && ( + {filterOptions?.length > 0 ? ( <> - )} + ) : null} = ({ onSearchBy={handleAddSearchByParam} /> - + {onPrint ? ( + <> + - - - + + + + + ) : null} {searchParams.length > 0 ? ( diff --git a/src/components/MultiSearch/SearchBy/index.styles.ts b/src/components/MultiSearch/SearchBy/index.styles.ts index fcdeb36..dc3523f 100644 --- a/src/components/MultiSearch/SearchBy/index.styles.ts +++ b/src/components/MultiSearch/SearchBy/index.styles.ts @@ -3,11 +3,11 @@ import styled from '@emotion/styled'; import { IconButton } from '@mui/material'; export const SearchInput = styled(InputBase)(() => ({ - marginLeft: '2px', + marginLeft: '0.125rem', flex: 1, })); export const StyledIconButton = styled(IconButton)(() => ({ - padding: '8px', - borderRadius: '12px', + padding: '0.5rem', + borderRadius: '0.75rem', })); diff --git a/src/components/MultiSearch/SearchBy/index.tsx b/src/components/MultiSearch/SearchBy/index.tsx index b9f821b..132b724 100644 --- a/src/components/MultiSearch/SearchBy/index.tsx +++ b/src/components/MultiSearch/SearchBy/index.tsx @@ -2,15 +2,16 @@ import React, { useState, useCallback } from 'react'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import { SelectChangeEvent } from '@mui/material/Select'; import SearchIcon from '@mui/icons-material/Search'; -import { SearchInput, StyledIconButton } from './index.styles'; import { SearchedBy, SelectOption } from '../types'; +import { StyledSelect } from '../index.styles'; +import { SearchInput, StyledIconButton } from './index.styles'; interface Props { searchOptions: SelectOption[]; - onSearchBy: (searchBy: SearchedBy) => void; placeholder?: string; + onSearchBy: (searchBy: SearchedBy) => void; } const SearchBy: React.FC = ({ searchOptions, placeholder, onSearchBy }) => { @@ -19,8 +20,8 @@ const SearchBy: React.FC = ({ searchOptions, placeholder, onSearchBy }) = ); const [searchValue, setSearchValue] = useState(''); - const handleSearchKeyChange = useCallback((event: SelectChangeEvent): void => { - setSelectedSearchKey(event.target.value); + const handleSearchKeyChange = useCallback((event: SelectChangeEvent): void => { + setSelectedSearchKey(String(event.target.value)); }, []); const handleSearchValueChange = useCallback( @@ -55,7 +56,7 @@ const SearchBy: React.FC = ({ searchOptions, placeholder, onSearchBy }) = Search By - + ); diff --git a/src/components/MultiSearch/index.styles.ts b/src/components/MultiSearch/index.styles.ts index d1166a9..627768f 100644 --- a/src/components/MultiSearch/index.styles.ts +++ b/src/components/MultiSearch/index.styles.ts @@ -1,23 +1,45 @@ -import Paper from '@mui/material/Paper'; -import IconButton from '@mui/material/IconButton'; -import Divider from '@mui/material/Divider'; +import Paper, { PaperProps } from '@mui/material/Paper'; +import IconButton, { IconButtonProps } from '@mui/material/IconButton'; +import Divider, { DividerProps } from '@mui/material/Divider'; +import Select, { SelectProps } from '@mui/material/Select'; import styled from '@emotion/styled'; +import { Button, ButtonProps } from '@mui/material'; -export const SearchBarContainer = styled(Paper)(() => ({ - borderRadius: '12px', +export const SearchBarContainer = styled(Paper)(() => ({ + borderRadius: '1rem', display: 'flex', alignItems: 'center', - padding: '6px', + padding: '0.375rem', boxShadow: 'none', - backgroundColor: '#F5F5F5', + border: '0.0625rem solid #DEEEFF', // 1px converted to rem })); -export const StyledIconButton = styled(IconButton)(() => ({ - padding: '8px', - borderRadius: '12px', +export const StyledIconButton = styled(IconButton)(() => ({ + padding: '0.5rem', + borderRadius: '0.75rem', })); -export const StyledDivider = styled(Divider)(() => ({ - height: 28, - margin: '6px', +export const StyledDivider = styled(Divider)(() => ({ + height: '1.75rem', + margin: '0.375rem', +})); + +export const StyledSelect = styled(Select)(() => ({ + borderRadius: '0.75rem', + '.MuiOutlinedInput-notchedOutline': { + borderColor: '#DEEEFF', + }, + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: '#DEEEFF', + }, + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: '#DEEEFF', + }, + '.MuiSvgIcon-root ': { + fill: '#BFD3E4 !important', + }, +})); + +export const StyledButton = styled(Button)(() => ({ + borderRadius: '0.75rem', }));