-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.tsx
111 lines (97 loc) · 2.86 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { useState, Suspense } from 'react'
import {
ConsentManager,
ConsentManagerProps,
ConsentManagerConfig,
} from '@consent-manager/core'
import { IoShieldCheckmark } from '@react-icons/all-files/io5/IoShieldCheckmark'
import defaultStyles from './index.module.css'
import { useDefaultButton } from './default-button'
import { FallbackComponent } from './fallback-component'
import { ConsentManagerDefaultInterfaceContext } from './context'
import { Messages, defaultMessages } from './i18n'
import { ToggleButtonProps } from './toggle-button'
import { SwitchProps } from './switch'
import { ConsentFormProps } from './form'
const InterfaceChunk = React.lazy(
() =>
import(
/* webpackChunkName: "consent-manager-interface" */ './interface-chunk'
)
)
export * from './i18n'
export { ToggleButtonProps, SwitchProps, ConsentFormProps }
export interface Styles {
[key: string]: string
}
export interface IconProps {
[key: string]: unknown
}
export interface ButtonProps {
[key: string]: unknown
className?: string
}
export interface ConsentManagerDefaultInterfaceDesignProps {
useDefaultButtonForIntroduction?: boolean
slideDuration?: number
noActionDelay?: number
styles?: Styles
animationStyles?: Styles
ToggleButton?: React.FC<ToggleButtonProps>
ToggleIcon?: React.FC<IconProps>
CloseIcon?: React.FC<IconProps>
Switch?: React.FC<SwitchProps>
Button?: React.FC<ButtonProps>
Form?: React.FC<ConsentFormProps>
}
interface ConsentManagerDefaultInterfaceProps
extends ConsentManagerProps,
ConsentManagerDefaultInterfaceDesignProps {
messages?: Messages
children: React.ReactNode
config: ConsentManagerConfig
}
export const ConsentManagerDefaultInterface: React.FC<
ConsentManagerDefaultInterfaceProps
> = ({
messages = defaultMessages,
children,
config,
store,
styles = defaultStyles,
ToggleIcon = IoShieldCheckmark,
Button,
...rest
}) => {
const [formVisible, setFormVisible] = useState(false)
// Extend user styles
styles = { ...defaultStyles, ...styles }
const DefaultButton = useDefaultButton(styles)
const props = { styles, ToggleIcon, Button: Button || DefaultButton, ...rest }
// Extend user messages by default messages
messages = { ...defaultMessages, ...messages }
return (
<ConsentManager
config={config}
store={store}
fallbackComponent={(fallbackProps) => (
<FallbackComponent
{...props}
{...fallbackProps}
Button={Button || DefaultButton}
styles={styles}
ToggleIcon={ToggleIcon}
/>
)}
>
<ConsentManagerDefaultInterfaceContext.Provider
value={{ formVisible, setFormVisible, messages }}
>
{children}
<Suspense fallback={null}>
<InterfaceChunk {...props} />
</Suspense>
</ConsentManagerDefaultInterfaceContext.Provider>
</ConsentManager>
)
}