Add overlay component

src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/Backdrop.js

@@ -8,12 +8,16 @@ type Props = {
     isOpen: boolean,
     /** When set to false the backdrop renders transparent. */
     isVisible: boolean,
+    /** If true, the backdrop gets rendered in the placed element and not in the body. */
+    local: boolean,
     onClick?: () => void,
 };
 
 export default class Backdrop extends React.PureComponent<Props> {
     static defaultProps = {
+        isOpen: true,
         isVisible: true,
+        local: false,
     };
 
     handleClick = () => {
@@ -31,13 +35,10 @@ export default class Backdrop extends React.PureComponent<Props> {
             [backdropStyles.backdrop]: true,
             [backdropStyles.isVisible]: isVisible,
         });
-
-        return (
-            <Portal isOpened={isOpen}>
-                <div
-                    onClick={this.handleClick}
-                    className={backdropClasses} />
-            </Portal>
-        );
+        const backdrop = <div onClick={this.handleClick} className={backdropClasses} />;
+        if (this.props.local) {
+            return backdrop;
+        }
+        return <Portal isOpened={isOpen}>{backdrop}</Portal>;
     }
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/README.md

@@ -1,4 +1,4 @@
-The Backdrop component serves as a simple solution to create a backdrop for modals and other kinds of overlays.
+The Backdrop component serves as a simple solution to create a backdrop for overlays.
 
 Here is a basic example of the component. The open state of the backdrop is controlled by the `isOpen` property.
 
@@ -7,7 +7,7 @@ intialState = {open: false};
 
 <div>
     <button onClick={() => setState({open: true})}>Open Backdrop</button>
-    <Backdrop isOpen={state.open} onClick={() => setState({open: false})} />
+    <Backdrop isOpen={!!state.open} onClick={() => setState({open: false})} />
 </div>
 ```
 
@@ -18,6 +18,6 @@ intialState = {open: false};
 
 <div>
     <button onClick={() => setState({open: true})}>Open Backdrop</button>
-    <Backdrop isVisible={false} isOpen={state.open} onClick={() => setState({open: false})} />
+    <Backdrop isVisible={false} isOpen={!!state.open} onClick={() => setState({open: false})} />
 </div>
 ```

src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/backdrop.scss

@@ -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;
     }
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/tests/Backdrop.test.js

@@ -13,6 +13,11 @@ test('The component should render in body when open', () => {
     expect(pretty(body.innerHTML)).toMatchSnapshot();
 });
 
+test('The component should not render in body when local property is set', () => {
+    const view = mount(<Backdrop local={true} />).render();
+    expect(view).toMatchSnapshot();
+});
+
 test('The component should not render in the body when closed', () => {
     const body = document.body;
     const view = mount(<Backdrop isOpen={false} />).render();

src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/tests/__snapshots__/Backdrop.test.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`The component should not render in body when local property is set 1`] = `
+<div
+  class="backdrop isVisible"
+/>
+`;
+
 exports[`The component should render in body when open 1`] = `
 "<div>
   <div data-reactroot=\\"\\" class=\\"backdrop isVisible\\"></div>

src/Sulu/Bundle/AdminBundle/Resources/js/components/GenericSelect/GenericSelect.js

@@ -45,7 +45,7 @@ export default class GenericSelect extends React.PureComponent<Props> {
     };
 
     handleDisplayValueClick = this.openList;
-    handleListRequestClose = this.closeList;
+    handleListClose = this.closeList;
     setDisplayValue = (displayValue: ?ElementRef<typeof DisplayValue>) => this.displayValue = displayValue;
 
     render() {
@@ -68,7 +68,7 @@ export default class GenericSelect extends React.PureComponent<Props> {
                     anchorHeight={displayValueDimensions.height}
                     isOpen={this.isOpen}
                     centeredChildIndex={this.centeredChildIndex}
-                    onRequestClose={this.handleListRequestClose}>
+                    onClose={this.handleListClose}>
                     {listChildren}
                 </OverlayList>
             </div>

src/Sulu/Bundle/AdminBundle/Resources/js/components/GenericSelect/OverlayList.js

@@ -14,7 +14,7 @@ import OverlayListPositioner from './OverlayListPositioner';
 type Props = {
     isOpen: boolean,
     children: SelectChildren,
-    onRequestClose?: () => void,
+    onClose?: () => void,
     /** The top coordinate relative to which the list will be positioned */
     anchorTop: number,
     /** The left coordinate relative to which the list will be positioned */
@@ -50,13 +50,13 @@ export default class OverlayList extends React.PureComponent<Props> {
     }
 
     componentDidMount() {
-        window.addEventListener('blur', this.requestClose);
-        window.addEventListener('resize', this.requestClose);
+        window.addEventListener('blur', this.close);
+        window.addEventListener('resize', this.close);
     }
 
     componentWillUnmount() {
-        window.removeEventListener('blur', this.requestClose);
-        window.removeEventListener('resize', this.requestClose);
+        window.removeEventListener('blur', this.close);
+        window.removeEventListener('resize', this.close);
     }
 
     @action componentWillReceiveProps(newProps: Props) {
@@ -73,9 +73,9 @@ export default class OverlayList extends React.PureComponent<Props> {
         });
     }
 
-    requestClose = () => {
-        if (this.props.isOpen && this.props.onRequestClose) {
-            this.props.onRequestClose();
+    close = () => {
+        if (this.props.isOpen && this.props.onClose) {
+            this.props.onClose();
         }
     };
 
@@ -110,7 +110,7 @@ export default class OverlayList extends React.PureComponent<Props> {
         }));
     };
 
-    handleBackropClick = this.requestClose;
+    handleBackropClick = this.close;
 
     render() {
         let style = {opacity: '0'};

src/Sulu/Bundle/AdminBundle/Resources/js/components/GenericSelect/tests/OverlayList.test.js

@@ -51,28 +51,28 @@ test('The list should not render in body when not open', () => {
 });
 
 test('The list should request to be closed when the backdrop is clicked', () => {
-    const onRequestCloseSpy = jest.fn();
+    const onCloseSpy = jest.fn();
     const list = shallow(
-        <OverlayList isOpen={true} onRequestClose={onRequestCloseSpy}>
+        <OverlayList isOpen={true} onClose={onCloseSpy}>
             <Option value="option-1">My option 1</Option>
         </OverlayList>
     );
     list.find('Backdrop').simulate('click');
-    expect(onRequestCloseSpy).toBeCalled();
+    expect(onCloseSpy).toBeCalled();
 });
 
 test('The list should request to be closed when the window is blurred', () => {
     const windowListeners = {};
     window.addEventListener = jest.fn((event, cb) => windowListeners[event] = cb);
-    const onRequestCloseSpy = jest.fn();
+    const onCloseSpy = jest.fn();
     mount(
-        <OverlayList isOpen={true} onRequestClose={onRequestCloseSpy}>
+        <OverlayList isOpen={true} onClose={onCloseSpy}>
             <Option value="option-1">My option 1</Option>
         </OverlayList>
     ).render();
     expect(windowListeners.blur).toBeDefined();
     windowListeners.blur();
-    expect(onRequestCloseSpy).toBeCalled();
+    expect(onCloseSpy).toBeCalled();
 });
 
 test('The list should take its dimensions from the positioner', () => {

src/Sulu/Bundle/AdminBundle/Resources/js/components/Icon/Icon.js

@@ -5,19 +5,17 @@ import classNames from 'classnames';
 
 type Props = {
     className?: string,
+    onClick?: () => void,
     name: string,
 };
 
 export default class Icon extends React.PureComponent<Props> {
     render() {
-        const className = classNames(
-            this.props.className,
-            'fa',
-            'fa-' + this.props.name
-        );
+        const {className, name, onClick} = this.props;
+        const classes = classNames(className, 'fa', 'fa-' + name);
 
         return (
-            <span className={className} aria-hidden={true} />
+            <span className={classes} aria-hidden={true} onClick={onClick} />
         );
     }
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/Icon/tests/Icon.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 import React from 'react';
-import {render} from 'enzyme';
+import {render, shallow} from 'enzyme';
 import Icon from '../Icon';
 
 test('Icon should render', () => {
@@ -10,3 +10,10 @@ test('Icon should render', () => {
 test('Icon should render with class names', () => {
     expect(render(<Icon className="test" name="edit" />)).toMatchSnapshot();
 });
+
+test('Icon should call the callback on click', () => {
+    const onClick = jest.fn();
+    const icon = shallow(<Icon className="test" name="edit" onClick={onClick} />);
+    icon.simulate('click');
+    expect(onClick).toBeCalled();
+});

src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/Actions.js

@@ -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>
+        );
+    }
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/Overlay.js

@@ -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>
+        );
+    }
+}