1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 20:57:12 +01:00
metamask-extension/ui/components/app/home-notification/home-notification.component.js
2021-04-28 14:53:59 -05:00

106 lines
3.0 KiB
JavaScript

import React, { useState } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Button from '../../ui/button';
import Checkbox from '../../ui/check-box';
import Tooltip from '../../ui/tooltip';
const HomeNotification = ({
acceptText,
checkboxText,
checkboxTooltipText,
classNames = [],
descriptionText,
ignoreText,
infoText,
onAccept,
onIgnore,
}) => {
const [checkboxState, setCheckBoxState] = useState(false);
const checkboxElement = checkboxText && (
<Checkbox
id="homeNotification_checkbox"
checked={checkboxState}
className="home-notification__checkbox"
onClick={() => setCheckBoxState((checked) => !checked)}
/>
);
return (
<div className={classnames('home-notification', ...classNames)}>
<div className="home-notification__content">
<div className="home-notification__content-container">
<div className="home-notification__text">{descriptionText}</div>
</div>
{infoText ? (
<Tooltip
position="top"
title={infoText}
wrapperClassName="home-notification__tooltip-wrapper"
>
<i className="fa fa-info-circle" />
</Tooltip>
) : null}
</div>
<div className="home-notification__buttons">
{onAccept && acceptText ? (
<Button
type="primary"
className="home-notification__accept-button"
onClick={onAccept}
>
{acceptText}
</Button>
) : null}
{onIgnore && ignoreText ? (
<Button
type="secondary"
className="home-notification__ignore-button"
// Some onIgnore handlers use the checkboxState to determine whether
// to disable the notification
onClick={() => onIgnore(checkboxState)}
>
{ignoreText}
</Button>
) : null}
{checkboxText ? (
<div className="home-notification__checkbox-wrapper">
{checkboxTooltipText ? (
<Tooltip
position="top"
title={checkboxTooltipText}
wrapperClassName="home-notification__checkbox-label-tooltip"
>
{checkboxElement}
</Tooltip>
) : (
checkboxElement
)}
<label
className="home-notification__checkbox-label"
htmlFor="homeNotification_checkbox"
>
{checkboxText}
</label>
</div>
) : null}
</div>
</div>
);
};
HomeNotification.propTypes = {
acceptText: PropTypes.node,
checkboxText: PropTypes.node,
checkboxTooltipText: PropTypes.node,
classNames: PropTypes.array,
descriptionText: PropTypes.node.isRequired,
ignoreText: PropTypes.node,
infoText: PropTypes.node,
onAccept: PropTypes.func,
onIgnore: PropTypes.func,
};
export default HomeNotification;