2016-12-12 01:43:41 +02:00
|
|
|
const constants = require('../../shared/constants');
|
|
|
|
const fns = require('../../shared/functions');
|
|
|
|
const match = require('../../shared/match');
|
2016-11-28 19:53:40 +02:00
|
|
|
const React = require('react');
|
2016-12-12 01:43:41 +02:00
|
|
|
const Styled = require('styled-components');
|
|
|
|
|
|
|
|
const {
|
|
|
|
colors
|
|
|
|
} = constants;
|
|
|
|
|
|
|
|
const {
|
|
|
|
remcalc
|
|
|
|
} = fns;
|
|
|
|
|
|
|
|
const {
|
|
|
|
prop: matchProp
|
|
|
|
} = match;
|
|
|
|
|
|
|
|
const {
|
|
|
|
default: styled
|
|
|
|
} = Styled;
|
|
|
|
|
|
|
|
const background = matchProp({
|
|
|
|
warning: colors.warningLight,
|
|
|
|
alert: colors.alertLight,
|
|
|
|
}, 'transparent');
|
|
|
|
|
|
|
|
const border = matchProp({
|
|
|
|
warning: colors.warning,
|
|
|
|
alert: 'red',
|
|
|
|
}, 'none');
|
|
|
|
|
|
|
|
const StyledNotification = styled.div`
|
|
|
|
border-radius: 4px;
|
|
|
|
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
|
|
|
display: inline-block;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
background-color: ${background('type')};
|
|
|
|
border: ${border('type')};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StyledContent = styled.div`
|
|
|
|
float: left;
|
|
|
|
padding: ${remcalc(20)};
|
|
|
|
`;
|
2016-11-28 19:53:40 +02:00
|
|
|
|
|
|
|
const Notificaton = ({
|
|
|
|
children,
|
|
|
|
className,
|
|
|
|
style,
|
2016-12-12 01:43:41 +02:00
|
|
|
type = ''
|
2016-11-28 19:53:40 +02:00
|
|
|
}) => {
|
|
|
|
return (
|
2016-12-12 01:43:41 +02:00
|
|
|
<StyledNotification
|
|
|
|
className={className}
|
2016-11-28 19:53:40 +02:00
|
|
|
style={style}
|
|
|
|
type={type}
|
|
|
|
>
|
2016-12-12 01:43:41 +02:00
|
|
|
<StyledContent>
|
2016-11-28 19:53:40 +02:00
|
|
|
{children}
|
2016-12-12 01:43:41 +02:00
|
|
|
</StyledContent>
|
|
|
|
</StyledNotification>
|
2016-11-28 19:53:40 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Notificaton.propTypes = {
|
|
|
|
children: React.PropTypes.object,
|
|
|
|
className: React.PropTypes.str,
|
|
|
|
style: React.PropTypes.object,
|
|
|
|
type: React.PropTypes.str
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = Notificaton;
|