@npm_leadtech/legal-lib-components 7.22.6 → 7.22.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/molecules/SearchBar/SearchBar.js +3 -3
- package/dist/src/components/molecules/SearchBar/SearchBar.styled.js +2 -2
- package/dist/src/components/molecules/SearchBar/SearchBar.styled.ts +2 -2
- package/dist/src/components/molecules/SearchBar/SearchBar.tsx +5 -3
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ import search from '../../../../images/svg/search_24px.svg';
|
|
|
10
10
|
import { useWindowSize } from '../../../hooks/useWindowSize';
|
|
11
11
|
import { SearchBarStyled } from './SearchBar.styled';
|
|
12
12
|
import { useSearchFunction } from '../../../hooks/useSearchFunction';
|
|
13
|
-
const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick, isOpen, onClose }) => {
|
|
13
|
+
const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick, isOpen, onClose, isDesktop }) => {
|
|
14
14
|
const { results, searchFunction } = useSearchFunction({
|
|
15
15
|
products,
|
|
16
16
|
searchBarTexts,
|
|
@@ -46,7 +46,7 @@ const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick,
|
|
|
46
46
|
if (!isOpen) {
|
|
47
47
|
return null;
|
|
48
48
|
}
|
|
49
|
-
return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'desktop-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(CloseIcon, {}), onChange: searchFunction, results: results, onClose: onClose }) }) }));
|
|
49
|
+
return (_jsx(SearchBarStyled, { ref: searchBarContainerRef, className: 'modal_searchbar', children: _jsx("div", { className: 'modal_searchbar__content', children: _jsx(DropdownInput, { ref: searchInputRef, name: 'desktop-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: isDesktop ? _jsx(CloseIcon, {}) : _jsx(SearchIcon, {}), onChange: searchFunction, results: results, onClose: onClose }) }) }));
|
|
50
50
|
};
|
|
51
51
|
const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
|
|
52
52
|
const { results, searchFunction } = useSearchFunction({
|
|
@@ -94,7 +94,7 @@ export const SearchBar = (props) => {
|
|
|
94
94
|
}, children: _jsx("img", { src: search, alt: 'search-icon-primary', style: {
|
|
95
95
|
width: '100%',
|
|
96
96
|
height: '100%'
|
|
97
|
-
} }) }), _jsx(DesktopSearchBar, { ...props, isOpen: isModalOpen, onClose: closeModal })] }));
|
|
97
|
+
} }) }), _jsx(DesktopSearchBar, { ...props, isDesktop: isDesktop, isOpen: isModalOpen, onClose: closeModal })] }));
|
|
98
98
|
}
|
|
99
99
|
return _jsx(MobileSearchBar, { ...props });
|
|
100
100
|
};
|
|
@@ -16,10 +16,10 @@ export const SearchBarStyled = styled.div `
|
|
|
16
16
|
z-index: 10000;
|
|
17
17
|
width: 400px;
|
|
18
18
|
max-width: 90vw;
|
|
19
|
-
background:
|
|
19
|
+
background: transparent;
|
|
20
20
|
|
|
21
21
|
.modal_searchbar__content {
|
|
22
|
-
background-color: var(--
|
|
22
|
+
background-color: var(--others-white);
|
|
23
23
|
padding: 1.5rem;
|
|
24
24
|
border-radius: 8px;
|
|
25
25
|
width: 100%;
|
|
@@ -17,10 +17,10 @@ export const SearchBarStyled = styled.div`
|
|
|
17
17
|
z-index: 10000;
|
|
18
18
|
width: 400px;
|
|
19
19
|
max-width: 90vw;
|
|
20
|
-
background:
|
|
20
|
+
background: transparent;
|
|
21
21
|
|
|
22
22
|
.modal_searchbar__content {
|
|
23
|
-
background-color: var(--
|
|
23
|
+
background-color: var(--others-white);
|
|
24
24
|
padding: 1.5rem;
|
|
25
25
|
border-radius: 8px;
|
|
26
26
|
width: 100%;
|
|
@@ -15,6 +15,7 @@ import { useSearchFunction } from '../../../hooks/useSearchFunction'
|
|
|
15
15
|
interface DesktopSearchBarProps extends SearchBarProps {
|
|
16
16
|
isOpen: boolean
|
|
17
17
|
onClose: () => void
|
|
18
|
+
isDesktop: boolean
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
|
|
@@ -23,7 +24,8 @@ const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
|
|
|
23
24
|
routes,
|
|
24
25
|
handleResultClick,
|
|
25
26
|
isOpen,
|
|
26
|
-
onClose
|
|
27
|
+
onClose,
|
|
28
|
+
isDesktop
|
|
27
29
|
}) => {
|
|
28
30
|
const { results, searchFunction } = useSearchFunction({
|
|
29
31
|
products,
|
|
@@ -73,7 +75,7 @@ const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
|
|
|
73
75
|
name='desktop-search'
|
|
74
76
|
className='search'
|
|
75
77
|
placeholder={searchBarTexts.placeholder}
|
|
76
|
-
icon={<CloseIcon />}
|
|
78
|
+
icon={isDesktop ? <CloseIcon /> : <SearchIcon />}
|
|
77
79
|
onChange={searchFunction}
|
|
78
80
|
results={results}
|
|
79
81
|
onClose={onClose}
|
|
@@ -160,7 +162,7 @@ export const SearchBar: React.FC<SearchBarProps> = (props) => {
|
|
|
160
162
|
}}
|
|
161
163
|
/>
|
|
162
164
|
</a>
|
|
163
|
-
<DesktopSearchBar {...props} isOpen={isModalOpen} onClose={closeModal} />
|
|
165
|
+
<DesktopSearchBar {...props} isDesktop={isDesktop} isOpen={isModalOpen} onClose={closeModal} />
|
|
164
166
|
</div>
|
|
165
167
|
)
|
|
166
168
|
}
|