-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
JasonLantz
committed
Jan 6, 2017
1 parent
07bcffb
commit c320c12
Showing
10 changed files
with
140 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,3 +8,4 @@ npm-debug.log | |
| build/dev* | ||
| build/dist* | ||
| npm_scripts/*.js | ||
| yarn.lock | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,25 @@ | ||
| import React from 'react'; | ||
| import Icon from './icon'; | ||
| import Icon from './icon'; | ||
|
|
||
| const Alert = (props) => ( | ||
| <span className={`pe-template__static-small ${props.closeTitleProp}`} id={`${props.whichAlertProp}`} role="alert" style={{opacity: props.opacity}}> | ||
| <strong className={`pe-label ${props.whichAlertProp}-title`}>{props.whichAlertProp}</strong> | ||
| <li | ||
| key = {props.key} | ||
| className = {`pe-alert pe-template__static-small ${props.closeTitleProp}`} | ||
| id = {`${props.alertType}`} | ||
| role = "alert" | ||
| style = {{opacity: props.opacity}}> | ||
|
|
||
| <strong className={`pe-label ${props.alertType}-title`}>{props.alertType}</strong> | ||
|
|
||
| <button className="close-title" onClick={props.handleClose} aria-label="Close alert"> | ||
| <Icon name="remove-lg-18" /> | ||
| </button><br/> | ||
|
|
||
| <span className="pe-copy"> | ||
| {props.alertMessage} | ||
| </span> | ||
| </span> | ||
|
|
||
| </li> | ||
| ) | ||
|
|
||
| export default Alert; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,87 @@ | ||
| import React, { Component } from 'react'; | ||
| import { intlShape, injectIntl } from 'react-intl'; | ||
| import Alert from './alert'; | ||
| // import Helper from './helper'; | ||
|
|
||
| import '../scss/component-specific.scss'; | ||
|
|
||
| import React, { PropTypes, Component} from 'react'; | ||
| import { intlShape, injectIntl } from 'react-intl'; | ||
| import Alert from './alert'; | ||
| import Helper from './helper'; | ||
|
|
||
| class AlertsComponent extends Component { | ||
|
|
||
| static propTypes = { | ||
| intl: intlShape.isRequired, | ||
| data: PropTypes.shape({ | ||
| locale: PropTypes.string, | ||
| alertType: PropTypes.string, | ||
| alertMessage: PropTypes.string | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| class ComponentOwner extends Component { | ||
|
|
||
| static propTypes = { intl: intlShape.isRequired } | ||
|
|
||
|
|
||
| constructor(props) { | ||
| super(); | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| alertIsOpen: false, | ||
| opacity: 0, | ||
| closeProp: '', | ||
| alertType: '', | ||
| alertMessage: '' | ||
| opacity : 0, | ||
| closeProp : '', | ||
| alertType : '', | ||
| alertMessage : '', | ||
| alertList : [] | ||
| }; | ||
| } | ||
|
|
||
| componentDidUpdate = () => { | ||
| const findAlert1 = document.querySelector('#demo-target1 [data-reactroot] .pe-template__static-small'); | ||
| const findAlert2 = document.querySelector('#demo-target2 [data-reactroot] .pe-template__static-small'); | ||
| if (findAlert1 && findAlert2) { findAlert2.style.top = '170px'; } | ||
| if (!findAlert1 && findAlert2) { findAlert2.style.top = '50px'; } | ||
| }; | ||
|
|
||
| handleErrorOpen = (props) => { | ||
| this.setState({ alertIsOpen: true, opacity: 1, alertType: this.props.alertType, | ||
| alertMessage: this.props.alertMessage }); | ||
| }; | ||
|
|
||
| handleSuccessOpen = (props) => { | ||
| this.setState({ alertIsOpen: true, opacity: 1, alertType: this.props.alertType, | ||
| alertMessage: this.props.alertMessage }); | ||
| }; | ||
|
|
||
| handleClose = () => { | ||
| const alert1 = document.getElementById('demo-target1'); | ||
| const alert2 = document.getElementById('demo-target2'); | ||
|
|
||
| const removeEL = () => { | ||
| this.setState({ alertIsOpen: false, opacity: 0, closeProp: '', alertType: '', alertMessage: '' }); | ||
| if (this.state.alertIsOpen === false) { | ||
| alert1.removeEventListener(Helper.whichTransitionEvent(), removeEL); | ||
| alert2.removeEventListener(Helper.whichTransitionEvent(), removeEL); | ||
| } | ||
| } | ||
|
|
||
| this.setState({ closeProp: 'close-title-animation' }); | ||
|
|
||
| alert1.addEventListener(Helper.whichTransitionEvent(), removeEL); | ||
| alert2.addEventListener(Helper.whichTransitionEvent(), removeEL); | ||
| }; | ||
|
|
||
| renderAlert = () => ( | ||
| <Alert | ||
| opacity={this.state.opacity} | ||
| handleClose={this.handleClose} | ||
| closeTitleProp={this.state.closeProp} | ||
| whichAlertProp={this.state.alertType} | ||
| alertMessage={this.state.alertMessage} | ||
| /> | ||
| ); | ||
| // this.handleClose = _handleClose.bind(this); | ||
| this.renderAlert = _renderAlert.bind(this); | ||
|
|
||
| render () { | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <button onClick={this.handleErrorOpen}>Error</button> | ||
| {this.state.alertIsOpen | ||
| ? this.renderAlert() | ||
| : '' | ||
| } | ||
| <button onClick={this.handleSuccessOpen}>Success</button> | ||
| </div> | ||
|
|
||
| componentDidMount() { | ||
| // const { alertList } = this.state; | ||
| document.body.addEventListener('triggerAlert', | ||
| alert => console.log(alert) | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| render () { | ||
| const { alertList } = this.state; | ||
| console.log(alertList[0]) | ||
| return this.state.alertList.length > 0 ? alertList.forEach( (alert, index) => <ul>{this.renderAlert(alert, index)}</ul> ) : null; | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
| export default injectIntl(AlertsComponent); | ||
|
|
||
|
|
||
| export default injectIntl(ComponentOwner); | ||
|
|
||
|
|
||
|
|
||
| function _renderAlert (alert, index) { | ||
| return ( | ||
| <Alert | ||
| key = {index} | ||
| opacity = {1} | ||
| closeTitleProp = {this.state.closeProp} | ||
| alertType = {alert.alertType} | ||
| alertMessage = {alert.alertMessage} | ||
| handleClose = {this.handleClose} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| // function _handleClose() { | ||
| // | ||
| // const alert1 = document.getElementById('demo-target1'); | ||
| // | ||
| // const removeEL = () => { | ||
| // if (this.state.alertIsOpen === false) { | ||
| // alert1.removeEventListener(Helper.whichTransitionEvent(), removeEL); | ||
| // } | ||
| // } | ||
| // | ||
| // this.setState({ | ||
| // // closeProp : 'close-title-animation', | ||
| // opacity : 0, | ||
| // closeProp : '', | ||
| // alertType : '', | ||
| // alertMessage : '' | ||
| // }); | ||
| // | ||
| // }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,24 @@ | ||
| const Helper = { | ||
| whichTransitionEvent: () => { | ||
|
|
||
| let transition; | ||
|
|
||
| const transitions = { | ||
| transition: 'animationend', | ||
| WebkitTransition: 'webkitAnimationEnd' | ||
| }; | ||
| Object.keys(transitions).forEach((transitionKey) => { | ||
|
|
||
| Object.keys(transitions).forEach(transitionKey => { | ||
| if (document.getElementById('demo-target1').style[transitionKey] !== undefined) { | ||
| transition = transitions[transitionKey]; | ||
| } | ||
| }); | ||
|
|
||
| return transition; | ||
|
|
||
| } | ||
| }; | ||
|
|
||
|
|
||
|
|
||
| export default Helper; |
Oops, something went wrong.