<Dialog /> - Basic Implementation

demo/components-demo.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {AutoCompleteDemo} from './components/auto-complete.demo';
 import {CheckBoxDemo} from './components/checkbox-demo';
 import {DatePickerDemo} from './components/date-picker-demo';
+import {DialogDemo} from './components/dialog-demo';
 import {DropDownDemo} from './components/drop-down.demo';
 import {ImageDemo} from './components/image-demo';
 import {LoaderDemo} from './components/loader-demo';
@@ -397,6 +398,11 @@ export class ComponentsDemo extends React.Component<DemoProps> {
                     <h2>Modal</h2>
                     <ModalDemo />
                 </div>
+                <hr />
+                <div>
+                    <h2>Dialog</h2>
+                    <DialogDemo />
+                </div>
             </div>
         );
     }

demo/components/dialog-demo.st.css

@@ -0,0 +1,7 @@
+.content {
+    width: 300px;
+    height: 300px;
+    font-size: 250px;
+    text-align: center;
+    vertical-align: middle;
+}

demo/components/dialog-demo.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {stylable} from 'wix-react-tools';
+import {Dialog} from '../../src';
+import styles from './dialog-demo.st.css';
+
+export interface DialogDemoState {
+    isOpen: boolean;
+}
+
+@stylable(styles)
+export class DialogDemo extends React.Component<{}, DialogDemoState> {
+    public state: DialogDemoState = {
+        isOpen: false
+    };
+
+    public render() {
+        return (
+            <div>
+                <button data-automation-id="DIALOG_BUTTON" onClick={this.toggleOpen}>Open The Dialog!</button>
+                <Dialog className="root" isOpen={this.state.isOpen} onCancel={this.toggleOpen} onOk={this.toggleOpen}>
+                    <div role="children" className="content">🌌</div>
+                </Dialog>
+            </div>
+        );
+    }
+
+    private toggleOpen = () => {
+        this.setState({isOpen: !this.state.isOpen});
+    }
+}

src/components/dialog/dialog.st.css

@@ -0,0 +1,38 @@
+@namespace "Dialog";
+
+:import{
+    -st-from: "../modal/modal.st.css";
+    -st-default: Modal;
+}
+
+.root {
+    -st-extends: Modal;
+    display: inline-block;
+}
+
+.root::children {
+    border: 1px solid black;
+    border-radius: 5px;
+    background-color: lightgray;
+}
+
+.header {
+    border-bottom: 1px solid black;
+}
+
+.header .title {
+    margin-left: 5px;
+}
+
+.header button {
+    float: right;
+    margin-right: 5px;
+}
+
+.footer {
+    display: flex;
+    justify-content: space-around;
+    padding-bottom: 5%;
+}
+
+

src/components/dialog/dialog.tsx

@@ -0,0 +1,87 @@
+import keycode = require('keycode');
+import * as React from 'react';
+import {properties, stylable} from 'wix-react-tools';
+import {noop} from '../../utils';
+import {Button} from '../button';
+import {Modal, RequestCloseEvent} from '../modal';
+import styles from './dialog.st.css';
+
+export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    onCancel?: (src: RequestCloseEvent) => void;
+    onOk?: () => void;
+    title?: string;
+}
+
+@stylable(styles)
+@properties
+export class Dialog extends React.PureComponent<DialogProps> {
+    public static defaultProps: DialogProps = {
+        isOpen: false,
+        onCancel: noop,
+        onOk: noop,
+        title: 'Dialog'
+    };
+
+    public render() {
+        return (
+            <Modal
+                className="root"
+                isOpen={!!this.props.isOpen}
+                onRequestClose={this.props.onCancel}
+            >
+                <div
+                    data-automation-id="DIALOG_BODY"
+                    onClick={this.onDialogBodyClick}
+                    onKeyDown={this.handleKeyDown}
+                    tabIndex={0}
+                >
+                    <div className="header" role="header">
+                        <span data-automation-id="DIALOG_TITLE" role="title" className="title">{this.props.title}</span>
+                        <Button
+                            onClick={this.props.onCancel}
+                            role="header-close-button"
+                            data-automation-id="DIALOG_CLOSE"
+                        >
+                            X
+                        </Button>
+                    </div>
+                    <div className="body" role="body">
+                        {this.props.children}
+                    </div>
+                    <div className="footer" role="footer">
+                        <Button
+                            onClick={this.props.onCancel}
+                            role="footer-close-button"
+                            data-automation-id="DIALOG_CANCEL"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={this.props.onOk}
+                            role="footer-primary-button"
+                            data-automation-id="DIALOG_PRIMARY"
+                        >
+                            OK
+                        </Button>
+                    </div>
+                </div>
+            </Modal>
+        );
+    }
+
+    private handleKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {
+        debugger;
+        switch (e.keyCode) {
+            case keycode('esc'):
+                const closeEvent: RequestCloseEvent = {source: 'escKeyPress'};
+                this.props.onCancel!(closeEvent);
+        }
+    }
+
+    private onDialogBodyClick(e: React.SyntheticEvent<HTMLElement>) {
+        // without this, the click on the body propagates
+        // to the backdrop which closes the dialog
+        e.stopPropagation();
+    }
+}

src/components/dialog/index.ts

@@ -0,0 +1 @@
+export * from './dialog';

src/components/index.ts

@@ -3,6 +3,7 @@ export * from './button';
 export * from './checkbox';
 export * from './context-provider';
 export * from './date-picker';
+export * from './dialog';
 export * from './drop-down';
 export * from './global-event';
 export * from './image';

src/components/modal/modal.tsx

@@ -6,7 +6,7 @@ import {enableScrolling, stopScrolling} from '../../utils/stop-scrolling';
 import {Portal} from '../portal';
 import styles from './modal.st.css';
 
-export interface RequestCloseEvent extends React.SyntheticEvent<Element> {
+export interface RequestCloseEvent {
     source: string;
 }
 
@@ -48,7 +48,7 @@ export class Modal extends React.PureComponent<ModalProps> {
     private onClick: React.EventHandler<React.SyntheticEvent<Element>> = event => {
         const {target} = event;
         if (isElement(target)) {
-            const closeEvent: RequestCloseEvent = {...event, source: this.getDataFromNearestNode(target)};
+            const closeEvent: RequestCloseEvent = {source: this.getDataFromNearestNode(target)};
             this.props.onRequestClose!(closeEvent);
         }
     }

test-kit/components/dialog-driver.ts

@@ -0,0 +1,31 @@
+import {DriverBase} from 'test-drive-react';
+import {Dialog} from '../../src';
+import {ModalTestDriver} from './modal-driver';
+
+export type DialogButtonType = 'CANCEL' | 'CLOSE' | 'PRIMARY';
+
+export class DialogTestDriver extends DriverBase {
+    public static ComponentClass = Dialog;
+    public modalDriver: ModalTestDriver;
+
+    constructor(getDialog: () => HTMLElement) {
+        super(getDialog);
+        this.modalDriver = new ModalTestDriver(getDialog);
+    }
+
+    public get root(): Element {
+        return this.modalDriver.children[0];
+    }
+
+    public get title(): Element {
+        return this.getDialogElement('DIALOG_TITLE');
+    }
+
+    public getButton(type: DialogButtonType) {
+        return this.getDialogElement(`DIALOG_${type}`);
+    }
+
+    private getDialogElement(elem: string): Element {
+        return this.select(this.root.getAttribute('data-automation-id')!, elem);
+    }
+}

test-kit/components/index.ts

@@ -2,7 +2,9 @@ export * from './checkbox-driver';
 export * from './tree-view-driver';
 export * from './drop-down-driver';
 export * from './image-driver';
+export * from './modal-driver';
 export * from './portal-driver';
+export * from './dialog-driver';
 export * from './modal-driver';
 export * from './radio-group-driver';
 export * from './selection-list-driver';

test/components/dialog.spec.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {ClientRenderer, DriverBase, expect, sinon, waitFor} from 'test-drive-react';
+import {DialogDemo} from '../../demo/components/dialog-demo';
+import {Dialog} from '../../src';
+import {DialogButtonType, DialogTestDriver} from '../../test-kit/components';
+
+const dialogButtons = [
+    {id: 'X', handler: 'onCancel', type: 'CLOSE'},
+    {id: 'CANCEL', handler: 'onCancel', type: 'CANCEL'},
+    {id: 'PRIMARY', handler: 'onOk', type: 'PRIMARY'}
+];
+
+class DialogDemoDriver extends DriverBase {
+    public static ComponentClass = DialogDemo;
+    public dialogDriver: DialogTestDriver;
+
+    constructor(getDialogDemo: () => HTMLElement) {
+        super(getDialogDemo);
+        this.dialogDriver = new DialogTestDriver(getDialogDemo);
+    }
+
+    public get dialog(): Element {
+        return this.dialogDriver.root;
+    }
+
+    public get showDialogButton(): Element {
+        return this.select('DIALOG_BUTTON');
+    }
+}
+
+describe('<Dialog />', () => {
+    const clientRenderer = new ClientRenderer();
+
+    afterEach(() => clientRenderer.cleanup());
+
+    it('opens the dialog upon extra button click, and closes it upon clicking any of the buttons', async () => {
+        const {driver: dialogDemo, waitForDom} =
+            clientRenderer
+                .render(<DialogDemo />)
+                .withDriver(DialogDemoDriver);
+
+        const showDialogBtn = dialogDemo.showDialogButton as HTMLButtonElement;
+        showDialogBtn.click();
+
+        const dialogDriver = dialogDemo.dialogDriver;
+
+        await waitForDom(() => expect(dialogDemo.dialog).to.be.present());
+
+        (dialogDriver.getButton('CLOSE') as HTMLButtonElement).click();
+
+        await waitForDom(() => expect(dialogDriver.modalDriver.root).to.be.absent());
+        showDialogBtn.click();
+
+        (dialogDriver.getButton('CANCEL') as HTMLButtonElement).click();
+
+        await waitForDom(() => expect(dialogDriver.modalDriver.root).to.be.absent());
+        showDialogBtn.click();
+
+        (dialogDriver.getButton('PRIMARY') as HTMLButtonElement).click();
+
+        await waitForDom(() => expect(dialogDriver.modalDriver.root).to.be.absent());
+    });
+
+    it('displays the provided title', async () => {
+        const testTitle = 'Do you accept this?';
+        const {driver: dialog, waitForDom} = clientRenderer
+            .render(<Dialog isOpen title={testTitle} />)
+            .withDriver(DialogTestDriver);
+
+        await waitForDom(() => expect(dialog.title).to.have.text(testTitle));
+
+    });
+
+    dialogButtons.forEach(button => {
+        it(`invokes the callback handler provided for ${button.id} button`, async () => {
+            const onClick = sinon.spy();
+
+            const handlerProp = {
+                [button.handler]: onClick
+            };
+
+            const {driver: dialog} = clientRenderer
+                                        .render(<Dialog isOpen {...handlerProp} />)
+                                        .withDriver(DialogTestDriver);
+
+            const getButton: Element = dialog.getButton(button.type as DialogButtonType);
+
+            (getButton as HTMLButtonElement).click();
+
+            await waitFor(() => expect(onClick).to.have.been.calledOnce);
+        });
+    });
+
+});

test/contracts/root-element.spec.tsx

@@ -7,7 +7,7 @@ import {isReactComponent} from '../utils/is-react-component';
 
 const allComponents = Object.keys(WixReactComponents);
 const failingComponents = [
-    'Portal', 'Popup', 'Modal', 'ContextProvider', 'GlobalEvent'
+    'Portal', 'Popup', 'Modal', 'ContextProvider', 'GlobalEvent', 'Dialog'
 ];
 
 describe('Root Element contract', () => {