-
Notifications
You must be signed in to change notification settings - Fork 326
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Created modal component * Wrote modal tests * Implemented review comments * Refactored flow types * Implemented modal element * Implemented review comments * Added react-keydown for modal closing * Implemented review comments * use early return * removed double colors * remove ClickModal * renamed types to OverlayProps * removed ModalBox * renamed css * renamed modal folder to overlay * add mousetrap for keyboard shortcut * renamed onRequestClose to requestClose
- Loading branch information
Showing
26 changed files
with
617 additions
and
52 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
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
7 changes: 3 additions & 4 deletions
7
src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/backdrop.scss
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,16 @@ | ||
@import '../../containers/Application/colors.scss'; | ||
|
||
$backdropBackground: $black; | ||
$backdropBackground: rgba($dustyGray, .9); | ||
|
||
.backdrop { | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
background-color: $backdropBackground; | ||
opacity: 0; | ||
background: transparent; | ||
|
||
&.is-visible { | ||
opacity: .4; | ||
background: $backdropBackground; | ||
} | ||
} |
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
6 changes: 6 additions & 0 deletions
6
...le/AdminBundle/Resources/js/components/Backdrop/tests/__snapshots__/Backdrop.test.js.snap
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
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
31 changes: 31 additions & 0 deletions
31
src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/Actions.js
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 |
---|---|---|
@@ -0,0 +1,31 @@ | ||
// @flow | ||
import React from 'react'; | ||
import type {Action} from './types'; | ||
import actionsStyles from './actions.scss'; | ||
|
||
type Props = { | ||
actions: Array<Action>, | ||
}; | ||
|
||
export default class Actions extends React.PureComponent<Props> { | ||
render() { | ||
const {actions} = this.props; | ||
if (!actions.length) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<div className={actionsStyles.actions}> | ||
{actions.map((action, index) => { | ||
const handleButtonClick = action.onClick; | ||
return ( | ||
<button | ||
key={index} | ||
className={actionsStyles.action} | ||
onClick={handleButtonClick}>{action.title}</button> | ||
); | ||
})} | ||
</div> | ||
); | ||
} | ||
} |
116 changes: 116 additions & 0 deletions
116
src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/Overlay.js
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 |
---|---|---|
@@ -0,0 +1,116 @@ | ||
// @flow | ||
import classNames from 'classnames'; | ||
import Mousetrap from 'mousetrap'; | ||
import {observable, action} from 'mobx'; | ||
import {observer} from 'mobx-react'; | ||
import type {Node} from 'react'; | ||
import React from 'react'; | ||
import Portal from 'react-portal'; | ||
import Icon from '../Icon'; | ||
import {afterElementsRendered} from '../../services/DOM'; | ||
import Backdrop from '../Backdrop'; | ||
import type {Action} from './types'; | ||
import Actions from './Actions'; | ||
import overlayStyles from './overlay.scss'; | ||
|
||
type Props = { | ||
title: string, | ||
children: Node, | ||
actions: Array<Action>, | ||
confirmText: string, | ||
onConfirm: () => void, | ||
isOpen: boolean, | ||
onClose: () => void, | ||
}; | ||
|
||
const CLOSE_ICON = 'times'; | ||
|
||
@observer | ||
export default class Overlay extends React.PureComponent<Props> { | ||
static defaultProps = { | ||
isOpen: false, | ||
actions: [], | ||
}; | ||
|
||
@observable isVisible: boolean = false; | ||
@observable isOpenHasChanged: boolean = false; | ||
|
||
@action componentWillMount() { | ||
Mousetrap.bind('esc', this.close); | ||
this.isOpenHasChanged = this.props.isOpen; | ||
} | ||
|
||
componentWillUnmount() { | ||
Mousetrap.unbind('esc', this.close); | ||
} | ||
|
||
componentDidMount() { | ||
this.toggle(); | ||
} | ||
|
||
@action componentWillReceiveProps(newProps: Props) { | ||
this.isOpenHasChanged = newProps.isOpen !== this.props.isOpen; | ||
} | ||
|
||
componentDidUpdate() { | ||
this.toggle(); | ||
} | ||
|
||
close = () => { | ||
this.props.onClose(); | ||
}; | ||
|
||
@action toggle() { | ||
afterElementsRendered(action(() => { | ||
if (this.isOpenHasChanged) { | ||
this.isVisible = this.props.isOpen; | ||
} | ||
})); | ||
} | ||
|
||
@action handleTransitionEnd = () => { | ||
afterElementsRendered(action(() => { | ||
this.isOpenHasChanged = false; | ||
})); | ||
}; | ||
|
||
handleIconClick = () => { | ||
this.close(); | ||
}; | ||
|
||
render() { | ||
const containerClass = classNames({ | ||
[overlayStyles.container]: true, | ||
[overlayStyles.isDown]: this.isVisible, | ||
}); | ||
const {isOpen, title, actions, onConfirm, confirmText, children} = this.props; | ||
|
||
return ( | ||
<Portal isOpened={isOpen || this.isOpenHasChanged}> | ||
<div | ||
className={containerClass} | ||
onTransitionEnd={this.handleTransitionEnd}> | ||
<div className={overlayStyles.overlay}> | ||
<section className={overlayStyles.content}> | ||
<header> | ||
{title} | ||
<Icon | ||
name={CLOSE_ICON} | ||
className={overlayStyles.icon} | ||
onClick={this.handleIconClick} /> | ||
</header> | ||
<article>{children}</article> | ||
<footer> | ||
<Actions actions={actions} /> | ||
<button className={overlayStyles.confirmButton} onClick={onConfirm}> | ||
{confirmText} | ||
</button> | ||
</footer> | ||
</section> | ||
</div> | ||
<Backdrop local={true} onClick={this.props.onClose} /> | ||
</div> | ||
</Portal> | ||
); | ||
} | ||
} |
Oops, something went wrong.