Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | 3x 3x 3x 3x 3x 3x | import * as React from 'react'
import { observer } from 'mobx-react'
import { Store } from './store'
import { Button, Collapse, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'
import { getKernel } from '@code-202/kernel'
import Customize, { Props as CustomizeProps } from './customize'
interface BtnProps {
color?: string
size?: string
outline?: boolean
className?: string
content?: (store: Store) => React.ReactNode
}
export interface Props {
storeId?: string
className?: string
header?: {
className?: string
content?: (store: Store) => React.ReactNode
}
body?: {
className?: string
content?: (store: Store, customize: React.ReactNode) => React.ReactNode
}
footer?: {
className?: string
collapse?: {
className?: string
contentClassName?: string
}
acceptAll?: BtnProps
declineAll?: BtnProps
customize?: BtnProps
close?: BtnProps
}
customize?: CustomizeProps
}
export interface State {
}
class Dialog extends React.Component<Props, State> {
protected store: Store
constructor(props: Props) {
super(props)
this.store = getKernel().container.get(props.storeId !== undefined ? props.storeId : 'cookie-consent') as Store
}
render (): React.ReactNode {
const { className, header, body, footer } = this.props
const customize = <Customize {...this.props.customize}/>
return <>
<Modal isOpen={this.store.dialogIsOpened} centered toggle={this.store.noCookie !== true ? () => this.store.toggleDialog() : undefined} className={className}>
<ModalHeader className={header?.className} toggle={this.store.noCookie !== true ? () => this.store.toggleDialog() : undefined}>
{header?.content !== undefined ? header.content(this.store) : (
this.store.newServiceSinceLastConsent ? 'New cookie from last consent !' : 'Cookie Consent ?'
)}
</ModalHeader>
<ModalBody className={body?.className}>
{body?.content !== undefined ? body.content(this.store, customize) : (
!this.store.customizing ? null : customize
)}
</ModalBody>
<ModalFooter className={footer?.className}>
<Collapse isOpen={!this.store.customizing} className={footer?.collapse?.className !== undefined ? footer.collapse.className : 'w-100'}>
<div className={footer?.collapse !== undefined ? footer.collapse.contentClassName : 'd-flex justify-content-between align-items-center'}>
<Button
color={footer?.acceptAll?.color !== undefined ? footer.acceptAll.color : 'primary'}
size={footer?.acceptAll?.size}
outline={footer?.acceptAll?.outline !== undefined ? footer.acceptAll.outline : false}
className={footer?.acceptAll?.className !== undefined ? footer.acceptAll.className : '' }
onClick={this.onAcceptClickHandler}
>
{footer?.acceptAll?.content !== undefined ? footer.acceptAll.content(this.store) : 'Accept all'}
</Button>
<Button
color={footer?.declineAll?.color !== undefined ? footer.declineAll.color : 'dark'}
size={footer?.declineAll?.size}
outline={footer?.declineAll?.outline !== undefined ? footer.declineAll.outline : true}
className={footer?.declineAll?.className !== undefined ? footer.declineAll.className : '' }
onClick={this.onDeclineClickHandler}
>
{footer?.declineAll?.content !== undefined ? footer.declineAll.content(this.store) : 'Decline all'}
</Button>
{ this.store.isCustomizable && (
<Button
color={footer?.customize?.color !== undefined ? footer.customize.color : 'secondary'}
size={footer?.customize?.size}
outline={footer?.customize?.outline !== undefined ? footer.customize.outline : false}
className={footer?.customize?.className !== undefined ? footer.customize.className : '' }
onClick={this.onCustomizeClickHandler}
>
{footer?.customize?.content !== undefined ? footer.customize.content(this.store) : 'Customize'}
</Button>
)}
</div>
</Collapse>
<Collapse isOpen={this.store.customizing}>
<Button
color={footer?.close?.color !== undefined ? footer.close.color : 'secondary'}
size={footer?.close?.size}
outline={footer?.close?.outline !== undefined ? footer.close.outline : false}
className={footer?.close?.className !== undefined ? footer.close.className : '' }
onClick={this.onCloseClickHandler}
>
{footer?.close?.content !== undefined ? footer.close.content(this.store) : 'Close'}
</Button>
</Collapse>
</ModalFooter>
</Modal>
</>
}
protected onDeclineClickHandler = (): void => {
this.store.declineAll()
}
protected onAcceptClickHandler = (): void => {
this.store.acceptAll()
}
protected onCustomizeClickHandler = (): void => {
this.store.toggleCustomize()
}
protected onCloseClickHandler = (): void => {
if (this.store.isClosable) {
this.store.toggleDialog()
} else {
this.store.toggleCustomize()
}
}
}
export default observer(Dialog)
|