All files / app/ui/modal ModalLink.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
82x
 
82x
82x
82x
 
82x
82x
82x
 
 
 
 
 
 
82x
1x
1x
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
82x
 
import React, { useCallback, FunctionComponent, ReactNode } from 'react';
 
import { preventDefault } from '../../common/dom';
import { TranslatedString } from '../../locale';
import { Button, ButtonSize } from '../button';
 
import Modal from './Modal';
import './ModalLink.scss';
import ModalTrigger, { ModalTriggerModalProps } from './ModalTrigger';
 
export interface ModalLinkProps {
    header: ReactNode;
    body: ReactNode;
}
 
const ModalLink: FunctionComponent<ModalLinkProps> = ({
    children,
    body,
    header,
}) => {
    const renderModal = useCallback((props: ModalTriggerModalProps) => (
        <Modal
            { ...props }
            additionalBodyClassName="modal--withText"
            footer={ (
                <Button
                    onClick={ props.onRequestClose }
                    size={ ButtonSize.Small }
                >
                    <TranslatedString id="common.ok_action" />
                </Button>
            ) }
            header={ header }
            shouldShowCloseButton={ true }
        >
            { body }
        </Modal>
    ), [header, body]);
 
    return (
        <ModalTrigger modal={ renderModal }>
            { ({ onClick }) => (
                <a onClick={ preventDefault(onClick) }>
                    { children }
                </a>
            ) }
        </ModalTrigger>
    );
};
 
export default ModalLink;