blob: 302b043ef4b82f082a39169a61608dec3834b7d1 (
plain)
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
|
import styled from 'styled-components';
import { colors } from '../../config.json';
import { messages } from '../../shared/gettext';
import { useBoolean } from '../lib/utilityHooks';
import * as AppButton from './AppButton';
import ImageView from './ImageView';
import { ModalAlert, ModalAlertType } from './Modal';
const StyledInfoButton = styled.button({
margin: '0 16px 0 0',
borderWidth: 0,
padding: 0,
cursor: 'default',
backgroundColor: 'transparent',
});
interface IInfoIconProps {
className?: string;
size?: number;
}
export function InfoIcon(props: IInfoIconProps) {
return (
<ImageView
source="icon-info"
width={props.size ?? 18}
tintColor={colors.white}
tintHoverColor={colors.white80}
className={props.className}
/>
);
}
interface IInfoButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
message?: string;
children?: React.ReactNode;
}
export default function InfoButton(props: IInfoButtonProps) {
const { message, children, ...otherProps } = props;
const [isOpen, show, hide] = useBoolean(false);
return (
<>
<StyledInfoButton
onClick={show}
aria-label={messages.pgettext('accessibility', 'More information')}
{...otherProps}>
<InfoIcon />
</StyledInfoButton>
<ModalAlert
isOpen={isOpen}
message={props.message}
type={ModalAlertType.info}
buttons={[
<AppButton.BlueButton key="back" onClick={hide}>
{messages.gettext('Got it!')}
</AppButton.BlueButton>,
]}
close={hide}>
{props.children}
</ModalAlert>
</>
);
}
|
