mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
making notifcations closable by adding function to props
This commit is contained in:
parent
0cc21f83d9
commit
4c80ca619f
@ -1,14 +1,22 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const closeIcon = require('../../shared/assets/close.png');
|
||||
const fns = require('../../shared/functions');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const StyledButton = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: ${remcalc(16)};
|
||||
right: ${remcalc(16)};
|
||||
`;
|
||||
|
||||
const Close = ({
|
||||
|
@ -3,6 +3,7 @@ const fns = require('../../shared/functions');
|
||||
const composers = require('../../shared/composers');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
const Close = require('../close');
|
||||
|
||||
const {
|
||||
colors
|
||||
@ -51,14 +52,19 @@ const Notificaton = ({
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
type
|
||||
type,
|
||||
close
|
||||
}) => {
|
||||
const renderClose = close ? (<Close onClick={close} />) : null;
|
||||
|
||||
return (
|
||||
<StyledNotification
|
||||
className={className}
|
||||
style={style}
|
||||
type={type}
|
||||
>
|
||||
{ renderClose }
|
||||
|
||||
<StyledContent>
|
||||
{children}
|
||||
</StyledContent>
|
||||
@ -69,6 +75,7 @@ const Notificaton = ({
|
||||
Notificaton.propTypes = {
|
||||
children: React.PropTypes.object,
|
||||
className: React.PropTypes.str,
|
||||
close: React.PropTypes.func,
|
||||
style: React.PropTypes.object,
|
||||
type: React.PropTypes.string
|
||||
};
|
||||
|
@ -260,8 +260,11 @@ storiesOf('Notificaton', module)
|
||||
))
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Notificaton type="success">
|
||||
<span>This is the success content</span>
|
||||
<Notificaton
|
||||
close={function noop() {}}
|
||||
type="success"
|
||||
>
|
||||
<span>This is a success notification that is closable</span>
|
||||
</Notificaton>
|
||||
</Base>
|
||||
))
|
||||
|
Loading…
Reference in New Issue
Block a user