84 lines
1.9 KiB
JavaScript
84 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import { Button, Icon } from '@ohif/ui';
|
|
|
|
const Notification = ({ type, message, actions, onSubmit }) => {
|
|
const iconsByType = {
|
|
error: {
|
|
icon: 'info',
|
|
color: 'text-red-700',
|
|
},
|
|
warning: {
|
|
icon: 'info',
|
|
color: 'text-yellow-500',
|
|
},
|
|
info: {
|
|
icon: 'info',
|
|
color: 'text-primary-main',
|
|
},
|
|
success: {
|
|
icon: 'info',
|
|
color: 'text-green-500',
|
|
},
|
|
};
|
|
|
|
const getIconData = () => {
|
|
return (
|
|
iconsByType[type] || {
|
|
icon: '',
|
|
color: '',
|
|
}
|
|
);
|
|
};
|
|
|
|
const { icon, color } = getIconData();
|
|
|
|
return (
|
|
<div className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright">
|
|
<div className="flex flex-grow">
|
|
<Icon name={icon} className={classnames('w-5', color)} />
|
|
<span className="ml-2 text-base text-black">{message}</span>
|
|
</div>
|
|
<div className="flex justify-end mt-2">
|
|
{actions.map((action, index) => {
|
|
const isFirst = index === 0;
|
|
const isPrimary = action.type === 'primary';
|
|
|
|
return (
|
|
<Button
|
|
key={index}
|
|
className={classnames({ 'ml-2': !isFirst })}
|
|
color={isPrimary ? 'primary' : undefined}
|
|
onClick={() => {
|
|
onSubmit(action.value);
|
|
}}
|
|
>
|
|
{action.text}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Notification.defaultProps = {
|
|
type: 'info',
|
|
};
|
|
|
|
Notification.propTypes = {
|
|
type: PropTypes.string,
|
|
message: PropTypes.string.isRequired,
|
|
actions: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
text: PropTypes.string.isRequired,
|
|
value: PropTypes.any.isRequired,
|
|
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
|
|
})
|
|
).isRequired,
|
|
onSubmit: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default Notification;
|