-
Notifications
You must be signed in to change notification settings - Fork 60
/
modal.tsx
64 lines (58 loc) · 1.32 KB
/
modal.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
/*
* SPDX-FileCopyrightText: 2022 Siemens AG
*
* SPDX-License-Identifier: MIT
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import {
IxButton,
IxIconButton,
Modal,
ModalRef,
showModal,
} from '@siemens/ix-react';
import { useRef } from 'react';
function CustomModal() {
const modalRef = useRef<ModalRef>(null);
const close = () => {
modalRef.current?.close('close payload!');
};
const dismiss = () => {
modalRef.current?.dismiss('dismiss payload');
};
return (
<Modal ref={modalRef}>
<div className="modal-header">
Message headline
<IxIconButton
data-button-close
ghost
icon="close"
onClick={() => dismiss()}
></IxIconButton>
</div>
<div className="modal-body">Message text lorem ipsum</div>
<div className="modal-footer">
<IxButton outline onClick={() => dismiss()}>
Cancel
</IxButton>
<IxButton onClick={() => close()}>OK</IxButton>
</div>
</Modal>
);
}
export const ModalExample: React.FC = () => {
function show() {
showModal({
title: 'test',
content: <CustomModal />,
});
}
return (
<>
<IxButton onClick={show}>Show modal</IxButton>
</>
);
};