From b6e215dec9f2337dd79b68c38603eafdbdba05dd Mon Sep 17 00:00:00 2001 From: bc17 <bc17@inf.ufpr.br> Date: Fri, 23 Apr 2021 10:10:23 -0300 Subject: [PATCH 1/2] add modal --- ds-gov-componentes-react/src/App.js | 22 +++- .../src/Components/Card.js | 106 ++++++++++-------- .../src/Components/Modal.js | 79 +++++++++++++ .../src/Components/js-dsgov/Modal.js | 29 +++++ .../src/Components/js-dsgov/Scrim.js | 54 +++++++++ 5 files changed, 242 insertions(+), 48 deletions(-) create mode 100644 ds-gov-componentes-react/src/Components/Modal.js create mode 100644 ds-gov-componentes-react/src/Components/js-dsgov/Modal.js create mode 100644 ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js diff --git a/ds-gov-componentes-react/src/App.js b/ds-gov-componentes-react/src/App.js index cd86915..04470ba 100644 --- a/ds-gov-componentes-react/src/App.js +++ b/ds-gov-componentes-react/src/App.js @@ -3,7 +3,7 @@ import '@govbr/dsgov/dist/dsgov.min.css' import DateTimePicker from './Components/DateTimePicker' import Avatar from './Components/Avatar' -// import Breadcrumb from './Components/Breadcrumb' +import Breadcrumb from './Components/Breadcrumb' import Button from './Components/Button' import Card from './Components/Card' import Checkbox from './Components/Checkbox'; @@ -26,6 +26,7 @@ import Tag from './Components/Tag'; import Textarea from './Components/Textarea'; import Wizard from './Components/Wizard'; import Tooltip from './Components/Tooltip'; +import Modal from './Components/Modal'; import React, { useState, useEffect } from 'react'; @@ -179,7 +180,16 @@ function App() { </div> </div> - let test_card_flip_titles = {'front': 'Frente Card', 'back': 'Atrás Card'} + + let test_modal_footer = + <div> + <button className="br-button secondary small m-2" type="button">Cancelar + </button> + <button className="br-button primary small m-2" type="button">Retornar + </button> + </div> + + let test_modal_header = <button className="br-button close circle small" type="button" data-dismiss="br-modal" aria-label="Close"><i className="fas fa-times" aria-hidden="true"></i></button> return ( <div classNameName="App"> @@ -254,7 +264,13 @@ function App() { <h2>Card</h2> <Card cardType={'complete'} title={'Card com expansão'} content={test_card} title={'Card'} header={true} headerContent={test_card_header} footer={true} footerContent={test_card_footer} expanded={true} expandedContent={test_card_expanded}></Card> - <Card cardType={'flip'} title={'Flip card'} content={'Conteúdo da frent do card'} verseContent={'Conteúdo do verso do card'} flipTitle={test_card_flip_titles}></Card> + <Card cardType={'flip'} title={'Flip card'} content={'Conteúdo da frent do card'} verseContent={'Conteúdo do verso do card'} flipTitle={ {'front': 'Frente Card', 'back': 'Atrás Card'}}></Card> + + <h2>Modal</h2> + <Modal title={'Retornar para página inicial?'} content={'Você está sendo redirecionado para a página inicial do sistema'} header={test_modal_header} footer={test_modal_footer} closeIcon={true}></Modal> + + <Modal title={'Carregando'} modalType={'loading'} footer={test_modal_footer} header={test_modal_header} footer_justify_content={'justify-content-around'}></Modal> + {/* <Footer image={'https://picsum.photos/id/826/400'} social={social} social2={social2} contents={content} legal={legal} inverted={'inverted'} ></Footer> */} diff --git a/ds-gov-componentes-react/src/Components/Card.js b/ds-gov-componentes-react/src/Components/Card.js index d17295c..edcb8d8 100644 --- a/ds-gov-componentes-react/src/Components/Card.js +++ b/ds-gov-componentes-react/src/Components/Card.js @@ -5,7 +5,7 @@ function Card (props) { /* **Parameters** - title: string - - cardType: 'simple', 'complete', 'flip' (default simple/complete) + - cardType: 'simple', 'complete', 'flip' (default simple) - content: content of cart (card front if it is cardType flip) - verseContent: content of verse if cardType flip - disabled: 'disabled' or '' @@ -72,66 +72,82 @@ function Card (props) { } } - if (cardType == 'flip'){ - return( - <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-sm-0"> - <p className="h5">{title}</p> - <div className={`br-card ${disabled}`} data-flip="data-flip"> - <div className="front" id="front"> - <div className="header"> - <div className="d-flex"> - <p className="h5">{flipTitle.front}</p> - <div className="ml-auto"> - {flipButton} + switch (cardType) { + case 'complete': + return( + <div className="container-fluid"> + <div className="row"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <p className="h5">{title}</p> + <div className={`br-card ${disabled}`} > + <div className="header"> + {headerContent} </div> - </div> - </div> - <div className="card-content"> - {content} - </div> - </div> - <div className="back" id="back"> - <div className="header"> - <div className="d-flex"> - <div> - <p className="h5">{flipTitle.back}</p> + <div className="card-content"> + {content} </div> - <div className="ml-auto"> - {flipBackButton} + <div className="card-footer"> + {div_footer} </div> </div> </div> - <div className="card-content"> - {verseContent} - </div> </div> </div> - </div> - - ) - - } - else { - return( - <div className="container-fluid"> - <div className="row"> - <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> - <p className="h5">{title}</p> - <div className={`br-card ${disabled}`} > + ) + break; + case 'flip': + return( + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-sm-0"> + <p className="h5">{title}</p> + <div className={`br-card ${disabled}`} data-flip="data-flip"> + <div className="front" id="front"> <div className="header"> - {headerContent} + <div className="d-flex"> + <p className="h5">{flipTitle.front}</p> + <div className="ml-auto"> + {flipButton} + </div> + </div> </div> <div className="card-content"> {content} </div> - <div className="card-footer"> - {div_footer} + </div> + <div className="back" id="back"> + <div className="header"> + <div className="d-flex"> + <div> + <p className="h5">{flipTitle.back}</p> + </div> + <div className="ml-auto"> + {flipBackButton} + </div> + </div> + </div> + <div className="card-content"> + {verseContent} + </div> + </div> + </div> + </div> + ) + break; + default: + return( + <div className="container-fluid"> + <div className="row"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <p className="h5">{title}</p> + <div className={`br-card ${disabled}`} > + <div className="card-content"> + {content} + </div> </div> </div> </div> </div> - </div> - ) + ) + } } diff --git a/ds-gov-componentes-react/src/Components/Modal.js b/ds-gov-componentes-react/src/Components/Modal.js new file mode 100644 index 0000000..2834170 --- /dev/null +++ b/ds-gov-componentes-react/src/Components/Modal.js @@ -0,0 +1,79 @@ +import BRModal from './js-dsgov/Modal' + +function Modal (props) { + + /* + **Parameters** + - title: string + - modalType: 'alert', 'loading' + - content: content of modal + - loading: boolean + - justify_content: 'justify-content-around' 'justify-content-end' + - header: content of header + - footer: content of footer + */ + + let modalType = props.modalType ? props.modalType : 'alert' + let title = props.title ? props.title : '' + let header = props.header ? props.header : '' + let content = props.content ? props.content : '' + let footer = props.footer ? props.footer : '' + let justify_content = props.footer_justify_content === 'justify-content-around' ? 'justify-content-around' : 'justify-content-end' + + switch (modalType) { + case 'alert': + return( + <div className="container-fluid"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <div className="br-modal"> + <div className="br-card"> + <div className="container-fluid p-1 p-sm-4"> + <div className="br-modal-header"> + <div className="br-modal-title" tabindex="0" title={title}>{title}</div> + {header} + </div> + <div className="br-modal-body" tabindex="-1"> + <p tabindex="0">{content}</p> + </div> + <div className={`br-modal-footer ${justify_content}`}> + {footer} + </div> + </div> + </div> + </div> + </div> + </div> + ) + break; + case 'loading': + return( + <div className="container-fluid"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + + <div className="br-modal"> + <div className="br-card"> + <div className="container-fluid p-1 p-sm-4"> + <div className="br-modal-header"> + <div className="br-modal-title" tabindex="0" title={title}>{title}</div> + {header} + </div> + <div className="br-modal-body align-center is-loading" tabindex="-1"> + </div> + <div className={`br-modal-footer ${justify_content}`}> + {footer} + </div> + </div> + </div> + </div> + </div> + </div> + ) + break; + default: + + } + + +} + +export default Modal; diff --git a/ds-gov-componentes-react/src/Components/js-dsgov/Modal.js b/ds-gov-componentes-react/src/Components/js-dsgov/Modal.js new file mode 100644 index 0000000..9075d4e --- /dev/null +++ b/ds-gov-componentes-react/src/Components/js-dsgov/Modal.js @@ -0,0 +1,29 @@ +import brScrim from './Scrim' + +class BRModal { + constructor(name, component) { + this.name = name + this.component = component + this._setBehavior() + } + + _setBehavior() { + for (const brScrim of window.document.querySelectorAll('.br-scrim')) { + const scrim = new ('br-scrim', brScrim) + for (const button of window.document.querySelectorAll( + '.br-scrim + button' + )) { + button.addEventListener('click', () => { + scrim.showScrim() + }) + } + } + } +} + +const modalList = [] +for (const brModal of window.document.querySelectorAll('.br-modal')) { + modalList.push(new BRModal('br-modal', brModal)) +} + +export default BRModal diff --git a/ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js b/ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js new file mode 100644 index 0000000..ba17470 --- /dev/null +++ b/ds-gov-componentes-react/src/Components/js-dsgov/Scrim.js @@ -0,0 +1,54 @@ +class BRScrim { + constructor(name, component) { + this.name = name + this.component = component + this._setType() + this._setBehavior() + } + + _setType() { + if (this.component.classList.contains('foco')) { + this._type = 'foco' + } + if (this.component.classList.contains('legibilidade')) { + this._type = 'legibilidade' + } + if (this.component.classList.contains('inibicao')) { + this._type = 'inibicao' + } + } + + _setBehavior() { + if (this.component.classList.contains('foco')) { + this.component.addEventListener('click', (event) => { + this._hideScrim(event) + }) + } + } + + _hideScrim(event) { + event.currentTarget.classList.remove('active') + } + + showScrim() { + if (this._type === 'foco') { + this.component.classList.add('active') + } + } +} +const scrimList = [] +for (const brScrim of window.document.querySelectorAll('.br-scrim')) { + scrimList.push(new BRScrim('br-scrim', brScrim)) +} + +for (const buttonBloco1 of window.document.querySelectorAll( + '.scrimexemplo button' +)) { + buttonBloco1.addEventListener('click', () => { + for (const brScrim of scrimList) { + brScrim.showScrim() + } + }) +} + +export default BRScrim -- GitLab From c4dc85d17dc2778c636c2a3a8fc359c27f7cd1ce Mon Sep 17 00:00:00 2001 From: bc17 <bc17@inf.ufpr.br> Date: Fri, 23 Apr 2021 10:31:07 -0300 Subject: [PATCH 2/2] add card inside modal --- ds-gov-componentes-react/src/App.js | 2 +- .../src/Components/Card.js | 15 +++- .../src/Components/Modal.js | 84 +++++++++---------- 3 files changed, 57 insertions(+), 44 deletions(-) diff --git a/ds-gov-componentes-react/src/App.js b/ds-gov-componentes-react/src/App.js index 04470ba..03fb217 100644 --- a/ds-gov-componentes-react/src/App.js +++ b/ds-gov-componentes-react/src/App.js @@ -3,7 +3,7 @@ import '@govbr/dsgov/dist/dsgov.min.css' import DateTimePicker from './Components/DateTimePicker' import Avatar from './Components/Avatar' -import Breadcrumb from './Components/Breadcrumb' +// import Breadcrumb from './Components/Breadcrumb' import Button from './Components/Button' import Card from './Components/Card' import Checkbox from './Components/Checkbox'; diff --git a/ds-gov-componentes-react/src/Components/Card.js b/ds-gov-componentes-react/src/Components/Card.js index edcb8d8..62edfe0 100644 --- a/ds-gov-componentes-react/src/Components/Card.js +++ b/ds-gov-componentes-react/src/Components/Card.js @@ -5,7 +5,7 @@ function Card (props) { /* **Parameters** - title: string - - cardType: 'simple', 'complete', 'flip' (default simple) + - cardType: 'simple', 'complete', 'flip' e 'modal' (default simple) - content: content of cart (card front if it is cardType flip) - verseContent: content of verse if cardType flip - disabled: 'disabled' or '' @@ -132,6 +132,19 @@ function Card (props) { </div> ) break; + case 'modal': + return( + <div className="container-fluid"> + <div className="row"> + <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> + <div className={`br-card ${disabled}`} > + {content} + </div> + </div> + </div> + </div> + ) + break; default: return( <div className="container-fluid"> diff --git a/ds-gov-componentes-react/src/Components/Modal.js b/ds-gov-componentes-react/src/Components/Modal.js index 2834170..7e76ace 100644 --- a/ds-gov-componentes-react/src/Components/Modal.js +++ b/ds-gov-componentes-react/src/Components/Modal.js @@ -1,4 +1,5 @@ import BRModal from './js-dsgov/Modal' +import Card from './Card' function Modal (props) { @@ -13,6 +14,12 @@ function Modal (props) { - footer: content of footer */ + const modalList = [] + for (const brModal of window.document.querySelectorAll('.br-modal')) { + modalList.push(new BRModal('br-modal', brModal)) + } + + let modalType = props.modalType ? props.modalType : 'alert' let title = props.title ? props.title : '' let header = props.header ? props.header : '' @@ -20,59 +27,52 @@ function Modal (props) { let footer = props.footer ? props.footer : '' let justify_content = props.footer_justify_content === 'justify-content-around' ? 'justify-content-around' : 'justify-content-end' + let div_modal= '' + switch (modalType) { case 'alert': - return( - <div className="container-fluid"> - <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> - <div className="br-modal"> - <div className="br-card"> - <div className="container-fluid p-1 p-sm-4"> - <div className="br-modal-header"> - <div className="br-modal-title" tabindex="0" title={title}>{title}</div> - {header} - </div> - <div className="br-modal-body" tabindex="-1"> - <p tabindex="0">{content}</p> - </div> - <div className={`br-modal-footer ${justify_content}`}> - {footer} - </div> - </div> - </div> - </div> - </div> + div_modal = + <div className="container-fluid p-1 p-sm-4"> + <div className="br-modal-header"> + <div className="br-modal-title" tabindex="0" title={title}>{title}</div> + {header} + </div> + <div className="br-modal-body" tabindex="-1"> + <p tabindex="0">{content}</p> + </div> + <div className={`br-modal-footer ${justify_content}`}> + {footer} </div> - ) + </div> break; case 'loading': - return( - <div className="container-fluid"> - <div className="col-sm-6 col-md-4 col-lg-3 mt-5 mt-md-0"> - - <div className="br-modal"> - <div className="br-card"> - <div className="container-fluid p-1 p-sm-4"> - <div className="br-modal-header"> - <div className="br-modal-title" tabindex="0" title={title}>{title}</div> - {header} - </div> - <div className="br-modal-body align-center is-loading" tabindex="-1"> - </div> - <div className={`br-modal-footer ${justify_content}`}> - {footer} - </div> - </div> - </div> - </div> - </div> + div_modal = + <div className="container-fluid p-1 p-sm-4"> + <div className="br-modal-header"> + <div className="br-modal-title" tabindex="0" title={title}>{title}</div> + {header} + </div> + <div className="br-modal-body align-center is-loading" tabindex="-1"> + </div> + <div className={`br-modal-footer ${justify_content}`}> + {footer} </div> - ) + </div> break; default: } + let div_card = <Card cardType={'modal'} content={div_modal}></Card> + + + return( + <div className="container-fluid"> + <div className="br-modal"> + {div_card} + </div> + </div> + ) } -- GitLab