fix: basic-level style changes

gimnathperera · Sep 19, 2023 · 72bce34 · 72bce34
1 parent 0d3f9a8
commit 72bce34
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 66 deletions.
diff --git a/.changeset/brown-games-share.md 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
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>react-mui-multi-search</title>
   </head>
   <body>
     <div id="root"></div>

diff --git 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
@@ -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
@@ -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,16 +28,18 @@ const FilterBy: React.FC<Props> = ({ filters, onFilterBy }) => {
   }, []);
 
   const handleFilterKeyChange = useCallback(
-    (event: SelectChangeEvent): void => {
+    (event: SelectChangeEvent<unknown>): void => {
       const selectedValue = event.target.value;
       const selectedFilter = filters.find(({ filterKey }) => filterKey.value === selectedValue);
       setSelectedFilter(selectedFilter || null);
     },
     [filters],
   );
 
-  const handleFilterValueChange = useCallback((event: SelectChangeEvent): void => {
-    setFilterValue(event.target.value);
+  const handleFilterValueChange = useCallback((event: SelectChangeEvent<unknown>): void => {
+    const selectedValue = event.target.value;
+
+    setFilterValue(String(selectedValue));
   }, []);
 
   const handleOnFilterByClick = useCallback((): void => {
@@ -75,12 +70,20 @@ const FilterBy: React.FC<Props> = ({ 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)',
+          },
+        }}
       >
         <FilterContainer>
           <Typography variant='body1'>Filter results with</Typography>
 
           <FormControl sx={{ mt: 1 }} size='small'>
-            <Select
+            <StyledSelect
               labelId='filter-key-label'
               id='filter-key-select'
               value={selectedFilter ? selectedFilter.filterKey.value : ''}
@@ -91,11 +94,11 @@ const FilterBy: React.FC<Props> = ({ filters, onFilterBy }) => {
                   {filterKey.key}
                 </MenuItem>
               ))}
-            </Select>
+            </StyledSelect>
           </FormControl>
 
           <FormControl size='small'>
-            <Select
+            <StyledSelect
               labelId='filter-value-label'
               id='filter-value-select'
               value={filterValue}
@@ -107,12 +110,12 @@ const FilterBy: React.FC<Props> = ({ filters, onFilterBy }) => {
                   {key}
                 </MenuItem>
               ))}
-            </Select>
+            </StyledSelect>
           </FormControl>
 
-          <Button variant='contained' size='small' onClick={handleOnFilterByClick}>
+          <StyledButton variant='contained' size='small' onClick={handleOnFilterByClick}>
             Apply filter
-          </Button>
+          </StyledButton>
         </FilterContainer>
       </Popover>
     </>

diff --git a/src/components/MultiSearch/MultiSearch.tsx b/src/components/MultiSearch/MultiSearch.tsx
@@ -12,22 +12,20 @@ interface Props {
   searchOptions: SelectOption[];
   filterOptions?: Filter[];
   onPrint?: () => void;
+  onSearch?: (searchBy: SearchParam[]) => void;
 }
 
 export const MultiSearch: React.FC<Props> = ({
   placeholder,
   searchOptions,
   filterOptions = [],
   onPrint,
+  onSearch,
 }): JSX.Element => {
   const [searchParams, setSearchParams] = useState<SearchParam[]>([]);
 
-  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<Props> = ({
   }, []);
 
   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,24 +57,28 @@ export const MultiSearch: React.FC<Props> = ({
     <Grid container spacing={2}>
       <Grid item xs={12}>
         <SearchBarContainer>
-          {filterOptions.length > 0 && (
+          {filterOptions?.length > 0 ? (
             <>
               <FilterBy filters={filterOptions} onFilterBy={handleAddFilterByParam} />
               <StyledDivider orientation='vertical' />
             </>
-          )}
+          ) : null}
 
           <SearchBy
             searchOptions={searchOptions}
             placeholder={placeholder}
             onSearchBy={handleAddSearchByParam}
           />
 
-          <StyledDivider orientation='vertical' />
+          {onPrint ? (
+            <>
+              <StyledDivider orientation='vertical' />
 
-          <StyledIconButton onClick={handlePrintButtonClick}>
-            <IosShareOutlinedIcon />
-          </StyledIconButton>
+              <StyledIconButton onClick={handleOnPrint}>
+                <IosShareOutlinedIcon />
+              </StyledIconButton>
+            </>
+          ) : null}
         </SearchBarContainer>
       </Grid>
       {searchParams.length > 0 ? (

diff --git 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
@@ -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<Props> = ({ searchOptions, placeholder, onSearchBy }) => {
@@ -19,8 +20,8 @@ const SearchBy: React.FC<Props> = ({ searchOptions, placeholder, onSearchBy }) =
   );
   const [searchValue, setSearchValue] = useState<string>('');
 
-  const handleSearchKeyChange = useCallback((event: SelectChangeEvent): void => {
-    setSelectedSearchKey(event.target.value);
+  const handleSearchKeyChange = useCallback((event: SelectChangeEvent<unknown>): void => {
+    setSelectedSearchKey(String(event.target.value));
   }, []);
 
   const handleSearchValueChange = useCallback(
@@ -55,7 +56,7 @@ const SearchBy: React.FC<Props> = ({ searchOptions, placeholder, onSearchBy }) =
 
       <FormControl sx={{ m: 1, minWidth: 120 }} size='small'>
         <InputLabel id='search-select-label'>Search By</InputLabel>
-        <Select
+        <StyledSelect
           labelId='search-select-label'
           value={selectedSearchKey}
           label='Search By'
@@ -69,7 +70,7 @@ const SearchBy: React.FC<Props> = ({ searchOptions, placeholder, onSearchBy }) =
               {key}
             </MenuItem>
           ))}
-        </Select>
+        </StyledSelect>
       </FormControl>
     </>
   );

diff --git 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)<PaperProps>(() => ({
+  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)<IconButtonProps>(() => ({
+  padding: '0.5rem',
+  borderRadius: '0.75rem',
 }));
 
-export const StyledDivider = styled(Divider)(() => ({
-  height: 28,
-  margin: '6px',
+export const StyledDivider = styled(Divider)<DividerProps>(() => ({
+  height: '1.75rem',
+  margin: '0.375rem',
+}));
+
+export const StyledSelect = styled(Select)<SelectProps>(() => ({
+  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)<ButtonProps>(() => ({
+  borderRadius: '0.75rem',
 }));