overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

noti

Browse Source
This commit is contained in:
insanity 2017-07-21 16:31:36 +09:00
parent 8c67e143d0
commit a63f1c013d
2 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ts/@overflow/app/views/layout/LogoBar.tsx
View File

@ -35,7 +35,7 @@ export class LogoBar extends React.Component<any, any> {
position='right'
icon='bell'
/>}
on='click' basic wide >
on='click' wide >
<Notification />
</Popup>

62
src/ts/@overflow/commons/react/component/Notification.tsx
View File

@ -9,7 +9,7 @@ export interface Props {
}
export interface State {
list: object[];
}
export class Notification extends React.Component<Props, State> {
@ -17,8 +17,46 @@ export class Notification extends React.Component<Props, State> {
constructor(props: Props, context: State) {
super(props, context);
this.state = {
list: null,
};
}
public componentWillMount(): void {
let tempData = [
{
'icon': 'github',
'header': 'Notification title1',
'content': 'Notification content blahblahblahblahblah',
},
{
'icon': 'github',
'header': 'Notification title2',
'content': 'Notification content2 blahblahblahblahblah',
},
{
'icon': 'github',
'header': 'Notification title3',
'content': 'Notification content3 blahblahblahblahblahblahblahblahblahblahblahblahblah',
},
];
this.setState({
list: tempData,
});
}
public renderItems(): (JSX.Element | JSX.Element[]) {
if (this.state.list === null || this.state.list.length === 0) {
return <div>No user notifications found. </div>;
}
return this.state.list.map((item: any, index: number) => (
<List.Item key={index}>
<List.Icon name={item.icon} size='large' verticalAlign='middle' />
<List.Content>
<List.Header as='a'>{item.header}</List.Header>
<List.Description as='a'>{item.content}</List.Description>
</List.Content>
</List.Item>
));
}
public render(): JSX.Element {
@ -26,27 +64,7 @@ export class Notification extends React.Component<Props, State> {
<Container fluid>
<Header as='h4' content='User Notifications' />
<List divided relaxed>
<List.Item>
<List.Icon name='github' size='large' verticalAlign='middle' />
<List.Content>
<List.Header as='a'>Semantic-Org/Semantic-UI</List.Header>
<List.Description as='a'>Updated 10 mins ago</List.Description>
</List.Content>
</List.Item>
<List.Item>
<List.Icon name='github' size='large' verticalAlign='middle' />
<List.Content>
<List.Header as='a'>Semantic-Org/Semantic-UI-Docs</List.Header>
<List.Description as='a'>Updated 22 mins ago</List.Description>
</List.Content>
</List.Item>
<List.Item>
<List.Icon name='github' size='large' verticalAlign='middle' />
<List.Content>
<List.Header as='a'>Semantic-Org/Semantic-UI-Meteor</List.Header>
<List.Description as='a'>Updated 34 mins ago</List.Description>
</List.Content>
</List.Item>
{this.renderItems()}
</List>
</Container>
);