Add new modal component

bigbluebutton-html5/imports/ui/components/modal/base/component.jsx

@@ -0,0 +1,61 @@
+import React, { Component, PropTypes } from 'react';
+import ReactModal from 'react-modal';
+import styles from './styles.scss';
+import cx from 'classnames';
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onShow: PropTypes.func,
+  onHide: PropTypes.func,
+};
+
+const defaultProps = {
+  isOpen: false,
+};
+
+export default class ModalBase extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleAfterOpen = this.handleAfterOpen.bind(this);
+    this.handleRequestClose = this.handleRequestClose.bind(this);
+  }
+
+  handleAfterOpen() {
+    const { onShow } = this.props;
+    if (onShow) {
+      onShow.call(this, ...arguments);
+    }
+  }
+
+  handleRequestClose() {
+    const { onHide } = this.props;
+    if (onHide) {
+      onHide.call(this, ...arguments);
+    }
+  }
+
+  render() {
+    const {
+      isOpen,
+      onShow,
+      onHide,
+      className,
+    } = this.props;
+
+    return (
+      <ReactModal
+      className={cx(styles.modal, className)}
+      overlayClassName={styles.overlay}
+      portalClassName={styles.portal}
+      isOpen={isOpen}
+      onAfterOpen={this.handleAfterOpen}
+      onRequestClose={this.handleRequestClose}>
+        {this.props.children}
+      </ReactModal>
+    );
+  }
+};
+
+ModalBase.propTypes = propTypes;
+ModalBase.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/modal/base/styles.scss

@@ -0,0 +1,37 @@
+@import "../../../stylesheets/variables/_all";
+@import "../../../stylesheets/mixins/_scrollable";
+
+.modal {
+  @include scrollbox-vertical();
+
+  max-width: 60vw;
+  max-height: 100%;
+  border-radius: $border-radius;
+  background: #fff;
+  overflow: auto;
+  outline: none;
+
+  @include mq($small-only) {
+    max-width: 95vw;
+  }
+
+  @include mq($medium-up) {
+    max-width: 80vw;
+  }
+}
+
+.overlay {
+  z-index: 1000;
+  //background: transparentize($color-white, .35);
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.portal {}

bigbluebutton-html5/imports/ui/components/modal/component.jsx

@@ -0,0 +1,110 @@
+import React, { Component, PropTypes } from 'react';
+import ModalBase from './base/component';
+import Button from '../button/component';
+import styles from './styles.scss';
+import cx from 'classnames';
+
+const propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  confirm: PropTypes.shape({
+    callback: PropTypes.func.isRequired,
+    label: PropTypes.string.isRequired,
+    description: PropTypes.string,
+  }),
+  dismiss: PropTypes.shape({
+    callback: PropTypes.func,
+    label: PropTypes.string.isRequired,
+    description: PropTypes.string,
+  }),
+};
+
+const defaultProps = {
+  isOpen: true,
+  title: 'LUL LUL',
+  confirm: {
+    label: 'Done',
+    description: 'Saves changes and closes the modal',
+  },
+  dismiss: {
+    label: 'Cancel',
+    description: 'Disregards changes and closes the modal',
+  },
+};
+
+export default class Modal extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: this.props.isOpen,
+    };
+
+    this.handleDismiss = this.handleDismiss.bind(this);
+    this.handleConfirm = this.handleConfirm.bind(this);
+  }
+
+  handleDismiss() {
+    this.setState({ isOpen: false });
+  }
+
+  handleConfirm() {
+    const { confirm } = this.props;
+    confirm.callback(...arguments);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.isOpen !== this.props.isOpen
+      && this.state.isOpen !== this.props.isOpen) {
+      this.setState({ isOpen: this.props.isOpen });
+    }
+  }
+
+  render() {
+    const {
+      title,
+      dismiss,
+      confirm,
+    } = this.props;
+
+    const { isOpen } = this.state;
+
+    console.log('oi', confirm);
+
+    return (
+      <ModalBase
+        className={styles.modal}
+        isOpen={isOpen}
+        onHide={dismiss.callback}
+        onShow={this.props.onShow}
+      >
+        <header className={styles.header}>
+          <h1 className={styles.title}>{title}</h1>
+          <div className={styles.actions}>
+            <Button
+              className={styles.dismiss}
+              label={dismiss.label}
+              onClick={this.handleDismiss}
+              aria-describedby={'modalDismissDescription'}
+              tabIndex={1} />
+            <Button
+              color={'primary'}
+              className={styles.confirm}
+              label={confirm.label}
+              onClick={this.handleConfirm}
+              aria-describedby={'modalConfirmDescription'}
+              tabIndex={2} />
+          </div>
+        </header>
+        <div className={styles.content}>
+          {this.props.children}
+        </div>
+        <div id="modalDismissDescription" hidden>{dismiss.description}</div>
+        <div id="modalConfirmDescription" hidden>{confirm.description}</div>
+      </ModalBase>
+    );
+  }
+};
+
+Modal.propTypes = propTypes;
+Modal.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/modal/styles.scss

@@ -0,0 +1,50 @@
+@import "../../stylesheets/variables/_all";
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+}
+
+.content {
+  overflow: auto;
+  color: $color-text;
+  font-weight: normal;
+  padding: $line-height-computed 0;
+}
+
+.header {
+  display: flex;
+  padding: $line-height-computed 0;
+  border-bottom: $border-size solid $color-gray-lighter;
+  flex-shrink: 0;
+}
+
+.actions {
+  flex: 0 1 35%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  @extend %text-elipsis;
+  flex: 1;
+  margin: 0;
+  font-weight: 400;
+}
+
+%btn {
+  flex: 0 1 48%;
+}
+
+.dismiss,
+.confirm {
+  @extend %btn;
+}
+
+.dismiss {
+}
+
+.confirm {
+}