@npm_leadtech/legal-lib-components 7.23.5 → 7.23.51
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/atoms/DropdownInput/DropdownInput.d.ts +1 -1
- package/dist/src/components/atoms/DropdownInput/DropdownInput.js +7 -9
- package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.js +35 -52
- package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.ts +36 -52
- package/dist/src/components/atoms/DropdownInput/DropdownInput.tsx +51 -55
- package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.d.ts +0 -1
- package/dist/src/components/atoms/DropdownInput/DropdownInputProps.types.ts +0 -1
- package/dist/src/components/atoms/SearchSelect/SearchSelect.js +3 -2
- package/dist/src/components/atoms/SearchSelect/SearchSelect.tsx +3 -1
- package/dist/src/components/molecules/SearchBar/SearchBar.js +29 -17
- package/dist/src/components/molecules/SearchBar/SearchBar.styled.js +55 -4
- package/dist/src/components/molecules/SearchBar/SearchBar.styled.ts +55 -4
- package/dist/src/components/molecules/SearchBar/SearchBar.tsx +61 -31
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/dist/images/componentsSvg/CloseIcon.d.ts +0 -6
- package/dist/images/componentsSvg/CloseIcon.js +0 -2
- package/dist/images/componentsSvg/CloseIcon.tsx +0 -14
- package/dist/images/svg/close-grey-24px.svg +0 -3
- package/dist/images/svg/search_24px.svg +0 -3
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.d.ts +0 -8
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.js +0 -44
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.styled.d.ts +0 -1
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.styled.js +0 -48
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.styled.ts +0 -49
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBar.tsx +0 -77
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.types.d.ts +0 -37
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.types.js +0 -1
- package/dist/src/components/molecules/DesktopSearchBar/DesktopSearchBarProps.types.ts +0 -40
- package/dist/src/components/molecules/DesktopSearchBar/index.d.ts +0 -2
- package/dist/src/components/molecules/DesktopSearchBar/index.js +0 -1
- package/dist/src/components/molecules/DesktopSearchBar/index.ts +0 -2
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.d.ts +0 -3
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.js +0 -38
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.styled.d.ts +0 -1
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.styled.js +0 -17
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.styled.ts +0 -18
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBar.tsx +0 -55
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.d.ts +0 -37
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.js +0 -1
- package/dist/src/components/molecules/MobileSearchBar/MobileSearchBarProps.types.ts +0 -40
- package/dist/src/components/molecules/MobileSearchBar/index.d.ts +0 -2
- package/dist/src/components/molecules/MobileSearchBar/index.js +0 -1
- package/dist/src/components/molecules/MobileSearchBar/index.ts +0 -2
- package/dist/src/hooks/useSearchFunction.d.ts +0 -10
- package/dist/src/hooks/useSearchFunction.js +0 -28
- package/dist/src/hooks/useSearchFunction.tsx +0 -63
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React, { FC } from 'react'
|
|
2
|
-
|
|
3
|
-
interface Close24Props {
|
|
4
|
-
className?: string
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export const CloseIcon: FC<Close24Props> = ({ className }: Close24Props): React.ReactElement => (
|
|
8
|
-
<svg className={className} width={20} height={20} viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
9
|
-
<path
|
|
10
|
-
d='M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z'
|
|
11
|
-
fill='#B5BABD'
|
|
12
|
-
/>
|
|
13
|
-
</svg>
|
|
14
|
-
)
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M15.2462 5.92913C15.5706 5.60466 15.5706 5.07859 15.2462 4.75413C14.9217 4.42966 14.3956 4.42966 14.0712 4.75413L10.0003 8.82496L5.92949 4.75413C5.60503 4.42966 5.07896 4.42966 4.75449 4.75413C4.43002 5.07859 4.43003 5.60466 4.75449 5.92913L8.82533 9.99996L4.75449 14.0708C4.43003 14.3953 4.43002 14.9213 4.75449 15.2458C5.07896 15.5703 5.60502 15.5703 5.92949 15.2458L10.0003 11.175L14.0712 15.2458C14.3956 15.5703 14.9217 15.5703 15.2462 15.2458C15.5706 14.9213 15.5706 14.3953 15.2462 14.0708L11.1753 9.99996L15.2462 5.92913Z" fill="#B5BABD"/>
|
|
3
|
-
</svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M7.83105 13.9947C6.10828 13.9947 4.65024 13.3981 3.45694 12.2048C2.26364 11.0115 1.66699 9.55346 1.66699 7.83069C1.66699 6.10791 2.26364 4.64987 3.45694 3.45657C4.65024 2.26328 6.10828 1.66663 7.83105 1.66663C9.55383 1.66663 11.0119 2.26328 12.2052 3.45657C13.3985 4.64987 13.9951 6.10791 13.9951 7.83069C13.9951 8.52612 13.8845 9.18204 13.6632 9.79844C13.4419 10.4148 13.1416 10.9601 12.7623 11.4343L18.0729 16.7449C18.2467 16.9187 18.3337 17.14 18.3337 17.4087C18.3337 17.6774 18.2467 17.8986 18.0729 18.0725C17.899 18.2464 17.6777 18.3333 17.4091 18.3333C17.1404 18.3333 16.9191 18.2464 16.7452 18.0725L11.4347 12.7619C10.9605 13.1413 10.4152 13.4416 9.79881 13.6628C9.1824 13.8841 8.52648 13.9947 7.83105 13.9947ZM7.83105 12.0981C9.01645 12.0981 10.024 11.6832 10.8538 10.8534C11.6836 10.0237 12.0985 9.01608 12.0985 7.83069C12.0985 6.64529 11.6836 5.6377 10.8538 4.80793C10.024 3.97815 9.01645 3.56326 7.83105 3.56326C6.64566 3.56326 5.63807 3.97815 4.80829 4.80793C3.97851 5.6377 3.56363 6.64529 3.56363 7.83069C3.56363 9.01608 3.97851 10.0237 4.80829 10.8534C5.63807 11.6832 6.64566 12.0981 7.83105 12.0981Z" fill="#078080"/>
|
|
3
|
-
</svg>
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type SearchBarProps } from '../SearchBar/SearchBarProps.types';
|
|
3
|
-
interface DesktopSearchBarProps extends SearchBarProps {
|
|
4
|
-
isOpen: boolean;
|
|
5
|
-
onClose: () => void;
|
|
6
|
-
}
|
|
7
|
-
export declare const DesktopSearchBar: React.FC<DesktopSearchBarProps>;
|
|
8
|
-
export {};
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from 'react';
|
|
3
|
-
import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon';
|
|
4
|
-
import { DesktopSearchBarStyled } from './DesktopSearchBar.styled';
|
|
5
|
-
import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
|
|
6
|
-
import { useSearchFunction } from '../../../hooks/useSearchFunction';
|
|
7
|
-
export const DesktopSearchBar = ({ products, searchBarTexts, routes, handleResultClick, isOpen, onClose }) => {
|
|
8
|
-
const { results, searchFunction } = useSearchFunction({
|
|
9
|
-
products,
|
|
10
|
-
searchBarTexts,
|
|
11
|
-
routes,
|
|
12
|
-
handleResultClick,
|
|
13
|
-
onClose
|
|
14
|
-
});
|
|
15
|
-
const searchInputRef = useRef(null);
|
|
16
|
-
const searchBarContainerRef = useRef(null);
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
const handleKeyDown = (event) => {
|
|
19
|
-
if (event.key === 'Escape') {
|
|
20
|
-
onClose();
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
const handleClickOutside = (event) => {
|
|
24
|
-
if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
|
|
25
|
-
onClose();
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
if (isOpen) {
|
|
29
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
30
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
31
|
-
if (searchInputRef.current) {
|
|
32
|
-
searchInputRef.current.focus();
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
return () => {
|
|
36
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
37
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
38
|
-
};
|
|
39
|
-
}, [isOpen, onClose]);
|
|
40
|
-
if (!isOpen) {
|
|
41
|
-
return null;
|
|
42
|
-
}
|
|
43
|
-
return (_jsx(DesktopSearchBarStyled, { 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 }) }) }));
|
|
44
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DesktopSearchBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { device } from '../../../globalStyles/breakpoints';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
export const DesktopSearchBarStyled = styled.div `
|
|
4
|
-
display: none;
|
|
5
|
-
|
|
6
|
-
@media ${device['landscape-tablets']} {
|
|
7
|
-
display: block;
|
|
8
|
-
position: absolute;
|
|
9
|
-
top: 45px;
|
|
10
|
-
left: 0;
|
|
11
|
-
z-index: 10000;
|
|
12
|
-
width: 400px;
|
|
13
|
-
max-width: 90vw;
|
|
14
|
-
background: transparent;
|
|
15
|
-
|
|
16
|
-
.modal_searchbar__content {
|
|
17
|
-
background-color: var(--others-white);
|
|
18
|
-
border-radius: 8px;
|
|
19
|
-
width: 300px;
|
|
20
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
21
|
-
|
|
22
|
-
@media ${device['laptop']} {
|
|
23
|
-
padding: 0;
|
|
24
|
-
width: 100%;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.modal_searchbar__header {
|
|
29
|
-
display: flex;
|
|
30
|
-
justify-content: space-between;
|
|
31
|
-
align-items: center;
|
|
32
|
-
margin-bottom: 1rem;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.modal_searchbar__title {
|
|
36
|
-
font-size: 1.5rem;
|
|
37
|
-
font-weight: bold;
|
|
38
|
-
color: var(--others-black);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.dropdown_input {
|
|
42
|
-
.search {
|
|
43
|
-
width: 100%;
|
|
44
|
-
margin: 0;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { device } from '../../../globalStyles/breakpoints'
|
|
2
|
-
import styled from 'styled-components'
|
|
3
|
-
|
|
4
|
-
export const DesktopSearchBarStyled = styled.div`
|
|
5
|
-
display: none;
|
|
6
|
-
|
|
7
|
-
@media ${device['landscape-tablets']} {
|
|
8
|
-
display: block;
|
|
9
|
-
position: absolute;
|
|
10
|
-
top: 45px;
|
|
11
|
-
left: 0;
|
|
12
|
-
z-index: 10000;
|
|
13
|
-
width: 400px;
|
|
14
|
-
max-width: 90vw;
|
|
15
|
-
background: transparent;
|
|
16
|
-
|
|
17
|
-
.modal_searchbar__content {
|
|
18
|
-
background-color: var(--others-white);
|
|
19
|
-
border-radius: 8px;
|
|
20
|
-
width: 300px;
|
|
21
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
22
|
-
|
|
23
|
-
@media ${device['laptop']} {
|
|
24
|
-
padding: 0;
|
|
25
|
-
width: 100%;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.modal_searchbar__header {
|
|
30
|
-
display: flex;
|
|
31
|
-
justify-content: space-between;
|
|
32
|
-
align-items: center;
|
|
33
|
-
margin-bottom: 1rem;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.modal_searchbar__title {
|
|
37
|
-
font-size: 1.5rem;
|
|
38
|
-
font-weight: bold;
|
|
39
|
-
color: var(--others-black);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.dropdown_input {
|
|
43
|
-
.search {
|
|
44
|
-
width: 100%;
|
|
45
|
-
margin: 0;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
`
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react'
|
|
2
|
-
import { CloseIcon } from '../../../../images/componentsSvg/CloseIcon'
|
|
3
|
-
import { DesktopSearchBarStyled } from './DesktopSearchBar.styled'
|
|
4
|
-
import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
|
|
5
|
-
import { type SearchBarProps } from '../SearchBar/SearchBarProps.types'
|
|
6
|
-
import { useSearchFunction } from '../../../hooks/useSearchFunction'
|
|
7
|
-
|
|
8
|
-
interface DesktopSearchBarProps extends SearchBarProps {
|
|
9
|
-
isOpen: boolean
|
|
10
|
-
onClose: () => void
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const DesktopSearchBar: React.FC<DesktopSearchBarProps> = ({
|
|
14
|
-
products,
|
|
15
|
-
searchBarTexts,
|
|
16
|
-
routes,
|
|
17
|
-
handleResultClick,
|
|
18
|
-
isOpen,
|
|
19
|
-
onClose
|
|
20
|
-
}) => {
|
|
21
|
-
const { results, searchFunction } = useSearchFunction({
|
|
22
|
-
products,
|
|
23
|
-
searchBarTexts,
|
|
24
|
-
routes,
|
|
25
|
-
handleResultClick,
|
|
26
|
-
onClose
|
|
27
|
-
})
|
|
28
|
-
const searchInputRef = useRef<HTMLInputElement>(null)
|
|
29
|
-
const searchBarContainerRef = useRef<HTMLDivElement>(null)
|
|
30
|
-
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
const handleKeyDown = (event: KeyboardEvent) => {
|
|
33
|
-
if (event.key === 'Escape') {
|
|
34
|
-
onClose()
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
const handleClickOutside = (event: MouseEvent) => {
|
|
38
|
-
if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
|
|
39
|
-
onClose()
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
if (isOpen) {
|
|
44
|
-
document.addEventListener('keydown', handleKeyDown)
|
|
45
|
-
document.addEventListener('mousedown', handleClickOutside)
|
|
46
|
-
if (searchInputRef.current) {
|
|
47
|
-
searchInputRef.current.focus()
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return () => {
|
|
52
|
-
document.removeEventListener('keydown', handleKeyDown)
|
|
53
|
-
document.removeEventListener('mousedown', handleClickOutside)
|
|
54
|
-
}
|
|
55
|
-
}, [isOpen, onClose])
|
|
56
|
-
|
|
57
|
-
if (!isOpen) {
|
|
58
|
-
return null
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<DesktopSearchBarStyled ref={searchBarContainerRef} className='modal_searchbar'>
|
|
63
|
-
<div className='modal_searchbar__content'>
|
|
64
|
-
<DropdownInput
|
|
65
|
-
ref={searchInputRef}
|
|
66
|
-
name='desktop-search'
|
|
67
|
-
className='search'
|
|
68
|
-
placeholder={searchBarTexts.placeholder}
|
|
69
|
-
icon={<CloseIcon />}
|
|
70
|
-
onChange={searchFunction}
|
|
71
|
-
results={results}
|
|
72
|
-
onClose={onClose}
|
|
73
|
-
/>
|
|
74
|
-
</div>
|
|
75
|
-
</DesktopSearchBarStyled>
|
|
76
|
-
)
|
|
77
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
export interface Products {
|
|
2
|
-
categoryUrl?: string;
|
|
3
|
-
isFeatured?: boolean;
|
|
4
|
-
popularOrder: number;
|
|
5
|
-
jumboTitle: string;
|
|
6
|
-
linkText: string;
|
|
7
|
-
slug: string;
|
|
8
|
-
footerPopularDocument?: boolean;
|
|
9
|
-
logoImgBig?: string;
|
|
10
|
-
logoImgSmall?: string;
|
|
11
|
-
categoryProduct?: {
|
|
12
|
-
name: string;
|
|
13
|
-
icon: string;
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
export interface StrapiSearchBar {
|
|
17
|
-
title: string;
|
|
18
|
-
placeholder: string;
|
|
19
|
-
}
|
|
20
|
-
export interface Routes {
|
|
21
|
-
CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
|
|
22
|
-
CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
|
|
23
|
-
LEGAL_DOCUMENTS: string;
|
|
24
|
-
LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
|
|
25
|
-
LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
|
|
26
|
-
LOGIN: string;
|
|
27
|
-
MY_DOCUMENTS: string;
|
|
28
|
-
REGISTER: string;
|
|
29
|
-
RATAFIA_LOGIN: string;
|
|
30
|
-
SIGN_EDITOR: string;
|
|
31
|
-
}
|
|
32
|
-
export interface DesktopSearchBarProps {
|
|
33
|
-
products: Products[];
|
|
34
|
-
searchBarTexts: StrapiSearchBar;
|
|
35
|
-
routes: Routes;
|
|
36
|
-
handleResultClick: (product: string, link: string) => void;
|
|
37
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
export interface Products {
|
|
2
|
-
categoryUrl?: string
|
|
3
|
-
isFeatured?: boolean
|
|
4
|
-
popularOrder: number
|
|
5
|
-
jumboTitle: string
|
|
6
|
-
linkText: string
|
|
7
|
-
slug: string
|
|
8
|
-
footerPopularDocument?: boolean
|
|
9
|
-
logoImgBig?: string
|
|
10
|
-
logoImgSmall?: string
|
|
11
|
-
categoryProduct?: {
|
|
12
|
-
name: string
|
|
13
|
-
icon: string
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface StrapiSearchBar {
|
|
18
|
-
title: string
|
|
19
|
-
placeholder: string
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export interface Routes {
|
|
23
|
-
CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
|
|
24
|
-
CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
|
|
25
|
-
LEGAL_DOCUMENTS: string
|
|
26
|
-
LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
|
|
27
|
-
LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
|
|
28
|
-
LOGIN: string
|
|
29
|
-
MY_DOCUMENTS: string
|
|
30
|
-
REGISTER: string
|
|
31
|
-
RATAFIA_LOGIN: string
|
|
32
|
-
SIGN_EDITOR: string
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export interface DesktopSearchBarProps {
|
|
36
|
-
products: Products[]
|
|
37
|
-
searchBarTexts: StrapiSearchBar
|
|
38
|
-
routes: Routes
|
|
39
|
-
handleResultClick: (product: string, link: string) => void
|
|
40
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DesktopSearchBar } from './DesktopSearchBar';
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from 'react';
|
|
3
|
-
import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput';
|
|
4
|
-
import { MobileSearchBarStyled } from './MobileSearchBar.styled';
|
|
5
|
-
import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon';
|
|
6
|
-
import { useSearchFunction } from '../../../hooks/useSearchFunction';
|
|
7
|
-
export const MobileSearchBar = ({ products, searchBarTexts, routes, handleResultClick }) => {
|
|
8
|
-
const { results, searchFunction } = useSearchFunction({
|
|
9
|
-
products,
|
|
10
|
-
searchBarTexts,
|
|
11
|
-
routes,
|
|
12
|
-
handleResultClick
|
|
13
|
-
});
|
|
14
|
-
const searchInputRef = useRef(null);
|
|
15
|
-
const searchBarContainerRef = useRef(null);
|
|
16
|
-
const isResultsVisible = Array.isArray(results) && results.length > 0;
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
const handleKeyDown = (event) => {
|
|
19
|
-
if (event.key === 'Escape') {
|
|
20
|
-
searchFunction('');
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
const handleClickOutside = (event) => {
|
|
24
|
-
if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target)) {
|
|
25
|
-
searchFunction('');
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
if (isResultsVisible) {
|
|
29
|
-
document.addEventListener('keydown', handleKeyDown);
|
|
30
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
31
|
-
}
|
|
32
|
-
return () => {
|
|
33
|
-
document.removeEventListener('keydown', handleKeyDown);
|
|
34
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
35
|
-
};
|
|
36
|
-
}, [isResultsVisible, searchFunction]);
|
|
37
|
-
return (_jsx(MobileSearchBarStyled, { ref: searchBarContainerRef, children: _jsx(DropdownInput, { ref: searchInputRef, name: 'mobile-and-tablet-search', className: 'search', placeholder: searchBarTexts.placeholder, icon: _jsx(SearchIcon, {}), onChange: searchFunction, results: results }) }));
|
|
38
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const MobileSearchBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { device } from '../../../globalStyles/breakpoints';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
export const MobileSearchBarStyled = styled.div `
|
|
4
|
-
display: block;
|
|
5
|
-
width: 100%;
|
|
6
|
-
|
|
7
|
-
@media ${device['landscape-tablets']} {
|
|
8
|
-
display: none;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.dropdown_input {
|
|
12
|
-
.search {
|
|
13
|
-
width: calc(100% - 3rem);
|
|
14
|
-
margin: 0 1.5rem;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
`;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { device } from '../../../globalStyles/breakpoints'
|
|
2
|
-
import styled from 'styled-components'
|
|
3
|
-
|
|
4
|
-
export const MobileSearchBarStyled = styled.div`
|
|
5
|
-
display: block;
|
|
6
|
-
width: 100%;
|
|
7
|
-
|
|
8
|
-
@media ${device['landscape-tablets']} {
|
|
9
|
-
display: none;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.dropdown_input {
|
|
13
|
-
.search {
|
|
14
|
-
width: calc(100% - 3rem);
|
|
15
|
-
margin: 0 1.5rem;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
`
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react'
|
|
2
|
-
import { DropdownInput } from '../../atoms/DropdownInput/DropdownInput'
|
|
3
|
-
import { MobileSearchBarStyled } from './MobileSearchBar.styled'
|
|
4
|
-
import { type SearchBarProps } from '../SearchBar/SearchBarProps.types'
|
|
5
|
-
import { SearchIcon } from '../../../../images/componentsSvg/SearchIcon'
|
|
6
|
-
import { useSearchFunction } from '../../../hooks/useSearchFunction'
|
|
7
|
-
|
|
8
|
-
export const MobileSearchBar: React.FC<SearchBarProps> = ({ products, searchBarTexts, routes, handleResultClick }) => {
|
|
9
|
-
const { results, searchFunction } = useSearchFunction({
|
|
10
|
-
products,
|
|
11
|
-
searchBarTexts,
|
|
12
|
-
routes,
|
|
13
|
-
handleResultClick
|
|
14
|
-
})
|
|
15
|
-
const searchInputRef = useRef<HTMLInputElement>(null)
|
|
16
|
-
const searchBarContainerRef = useRef<HTMLDivElement>(null)
|
|
17
|
-
const isResultsVisible = Array.isArray(results) && results.length > 0
|
|
18
|
-
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const handleKeyDown = (event: KeyboardEvent) => {
|
|
21
|
-
if (event.key === 'Escape') {
|
|
22
|
-
searchFunction('')
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
const handleClickOutside = (event: MouseEvent) => {
|
|
26
|
-
if (searchBarContainerRef.current && !searchBarContainerRef.current.contains(event.target as Node)) {
|
|
27
|
-
searchFunction('')
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
if (isResultsVisible) {
|
|
32
|
-
document.addEventListener('keydown', handleKeyDown)
|
|
33
|
-
document.addEventListener('mousedown', handleClickOutside)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
return () => {
|
|
37
|
-
document.removeEventListener('keydown', handleKeyDown)
|
|
38
|
-
document.removeEventListener('mousedown', handleClickOutside)
|
|
39
|
-
}
|
|
40
|
-
}, [isResultsVisible, searchFunction])
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<MobileSearchBarStyled ref={searchBarContainerRef}>
|
|
44
|
-
<DropdownInput
|
|
45
|
-
ref={searchInputRef}
|
|
46
|
-
name='mobile-and-tablet-search'
|
|
47
|
-
className='search'
|
|
48
|
-
placeholder={searchBarTexts.placeholder}
|
|
49
|
-
icon={<SearchIcon />}
|
|
50
|
-
onChange={searchFunction}
|
|
51
|
-
results={results}
|
|
52
|
-
/>
|
|
53
|
-
</MobileSearchBarStyled>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
export interface Products {
|
|
2
|
-
categoryUrl?: string;
|
|
3
|
-
isFeatured?: boolean;
|
|
4
|
-
popularOrder: number;
|
|
5
|
-
jumboTitle: string;
|
|
6
|
-
linkText: string;
|
|
7
|
-
slug: string;
|
|
8
|
-
footerPopularDocument?: boolean;
|
|
9
|
-
logoImgBig?: string;
|
|
10
|
-
logoImgSmall?: string;
|
|
11
|
-
categoryProduct?: {
|
|
12
|
-
name: string;
|
|
13
|
-
icon: string;
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
export interface StrapiSearchBar {
|
|
17
|
-
title: string;
|
|
18
|
-
placeholder: string;
|
|
19
|
-
}
|
|
20
|
-
export interface Routes {
|
|
21
|
-
CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
|
|
22
|
-
CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
|
|
23
|
-
LEGAL_DOCUMENTS: string;
|
|
24
|
-
LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
|
|
25
|
-
LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
|
|
26
|
-
LOGIN: string;
|
|
27
|
-
MY_DOCUMENTS: string;
|
|
28
|
-
REGISTER: string;
|
|
29
|
-
RATAFIA_LOGIN: string;
|
|
30
|
-
SIGN_EDITOR: string;
|
|
31
|
-
}
|
|
32
|
-
export interface SearchBarProps {
|
|
33
|
-
products: Products[];
|
|
34
|
-
searchBarTexts: StrapiSearchBar;
|
|
35
|
-
routes: Routes;
|
|
36
|
-
handleResultClick: (product: string, link: string) => void;
|
|
37
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
export interface Products {
|
|
2
|
-
categoryUrl?: string
|
|
3
|
-
isFeatured?: boolean
|
|
4
|
-
popularOrder: number
|
|
5
|
-
jumboTitle: string
|
|
6
|
-
linkText: string
|
|
7
|
-
slug: string
|
|
8
|
-
footerPopularDocument?: boolean
|
|
9
|
-
logoImgBig?: string
|
|
10
|
-
logoImgSmall?: string
|
|
11
|
-
categoryProduct?: {
|
|
12
|
-
name: string
|
|
13
|
-
icon: string
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface StrapiSearchBar {
|
|
18
|
-
title: string
|
|
19
|
-
placeholder: string
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export interface Routes {
|
|
23
|
-
CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
|
|
24
|
-
CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
|
|
25
|
-
LEGAL_DOCUMENTS: string
|
|
26
|
-
LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
|
|
27
|
-
LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
|
|
28
|
-
LOGIN: string
|
|
29
|
-
MY_DOCUMENTS: string
|
|
30
|
-
REGISTER: string
|
|
31
|
-
RATAFIA_LOGIN: string
|
|
32
|
-
SIGN_EDITOR: string
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export interface SearchBarProps {
|
|
36
|
-
products: Products[]
|
|
37
|
-
searchBarTexts: StrapiSearchBar
|
|
38
|
-
routes: Routes
|
|
39
|
-
handleResultClick: (product: string, link: string) => void
|
|
40
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { MobileSearchBar } from './MobileSearchBar';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type SearchBarProps } from '../components/molecules/SearchBar/SearchBarProps.types';
|
|
3
|
-
interface SearchFunctionProps extends SearchBarProps {
|
|
4
|
-
onClose?: () => void;
|
|
5
|
-
}
|
|
6
|
-
export declare const useSearchFunction: (props: SearchFunctionProps) => {
|
|
7
|
-
results: React.JSX.Element[];
|
|
8
|
-
searchFunction: (text: string) => void;
|
|
9
|
-
};
|
|
10
|
-
export {};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
export const useSearchFunction = (props) => {
|
|
4
|
-
const [results, setResults] = useState([]);
|
|
5
|
-
const searchFunction = (text) => {
|
|
6
|
-
const { products, searchBarTexts, routes, handleResultClick, onClose } = props;
|
|
7
|
-
const searchTerm = text.toLowerCase();
|
|
8
|
-
const productsFiltered = products.filter((item) => item.linkText.toLowerCase().includes(searchTerm));
|
|
9
|
-
const newResults = productsFiltered
|
|
10
|
-
.map((item) => {
|
|
11
|
-
const product = item.linkText;
|
|
12
|
-
const preMatch = product.slice(0, product.toLowerCase().indexOf(searchTerm));
|
|
13
|
-
const match = product.slice(product.toLowerCase().indexOf(searchTerm), preMatch.length + searchTerm.length);
|
|
14
|
-
const postMatch = product.slice(product.toLowerCase().indexOf(searchTerm) + searchTerm.length, product.length);
|
|
15
|
-
const link = item.categoryUrl ? `${item.categoryUrl}/${item.slug}` : item.slug;
|
|
16
|
-
return (_jsx("li", { className: 'dropdown_input__item', children: _jsxs("a", { href: routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link), className: 'dropdown_input__link', onClick: (e) => {
|
|
17
|
-
e.preventDefault();
|
|
18
|
-
handleResultClick(product, routes.CUSTOM_URL_FROM_TARGET_ADDRESS(link));
|
|
19
|
-
if (onClose)
|
|
20
|
-
onClose();
|
|
21
|
-
}, title: product, children: [preMatch, _jsx("strong", { className: 'dropdown_input__link__emphasis', children: match }), postMatch] }) }, item.linkText));
|
|
22
|
-
})
|
|
23
|
-
.slice(0, 9);
|
|
24
|
-
newResults.push(_jsx("li", { className: 'dropdown_input__item', children: _jsx("a", { className: 'dropdown_input__link--all', title: searchBarTexts.title, href: routes.LEGAL_DOCUMENTS, onClick: onClose, children: searchBarTexts.title }) }, searchBarTexts.title));
|
|
25
|
-
setResults(newResults);
|
|
26
|
-
};
|
|
27
|
-
return { results, searchFunction };
|
|
28
|
-
};
|