Skip to content
Snippets Groups Projects
Commit 0fe864c7 authored by Rafael S Castilho's avatar Rafael S Castilho
Browse files

Merge branch 'notification' into 'development'

add notification

See merge request !8
parents e26123f1 2702c69f
No related branches found
No related tags found
2 merge requests!28Add js support,!8add notification
......@@ -28,6 +28,7 @@ import Wizard from './Components/Wizard';
import Tooltip from './Components/Tooltip';
import Modal from './Components/Modal';
import Table from './Components/Table';
import Notification from './Components/Notification';
import React, { useState, useEffect } from 'react';
......@@ -279,6 +280,8 @@ function App() {
<h2>Table</h2>
<Table title={'Título da Tabela'} type={'simple'} columnTitles={test_table_titles} content={test_table_content}></Table>
<h2>Notification</h2>
<Notification title={'Título da Notificação'} header={<div class="row"><div class="col-10"><span class="text-bold">Fulano da Silva</span><br/><small><a>nome.sobrenome@dominio.gov</a></small></div></div>} content={'Teste notiicações'}></Notification>
{/* <Footer image={'https://picsum.photos/id/826/400'} social={social} social2={social2} contents={content} legal={legal} inverted={'inverted'} ></Footer> */}
<h1>end of page</h1>
......
import BRNotification from './js-dsgov/Notification'
function Notification (props){
/*
**Parameters**
- title: string
- header: content of header
- content: content of notification
*/
let title = props.title ? props.title : ''
let header = props.header ? props.header : ''
let content = props.content ? props.content : ''
const notificationList = []
for (const brNotification of window.document.querySelectorAll(
'.br-notification'
)) {
notificationList.push(new BRNotification('br-notification', brNotification))
}
return (
<div class="container-fluid">
<div class="container-lg">
<p class="h5">{title}</p>
<div class="br-notification show">
<div class="notification-header">
{header}
</div>
<div class="notification-body">
{content}
</div>
</div>
</div>
</div>
)
}
export default Notification
class BRNotification {
constructor(name, component) {
this.name = name
this.component = component
this.menuBtns = component.querySelectorAll('.contextual-btn')
this.hideEvents = ['mouseleave', 'blur']
this._setMenu()
}
_setMenu() {
for (const btn of this.menuBtns) {
const menu = btn.parentNode.querySelector('.contextual-menu')
btn.addEventListener('click', () => {
menu.toggleAttribute('show')
})
this.hideEvents.forEach((event) => {
menu.addEventListener(event, () => {
menu.removeAttribute('show')
})
})
if (menu.children[0]) {
menu.children[0].addEventListener('click', () => {
this._hideNotification(menu.children[0])
})
}
if (menu.children[1]) {
menu.children[1].addEventListener('click', () => {
this._hideAllNotifications(menu.children[1])
})
}
}
}
_hideNotification(action) {
const notification = action.parentNode.parentNode
notification.setAttribute('hidden', '')
}
_hideAllNotifications(action) {
const notifications = action.parentNode.parentNode.parentNode.querySelectorAll(
'.br-item'
)
notifications.forEach((notification) => {
notification.setAttribute('hidden', '')
})
}
}
const notificationList = []
for (const brNotification of window.document.querySelectorAll(
'.br-notification'
)) {
notificationList.push(new BRNotification('br-notification', brNotification))
}
export default BRNotification
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment