feat: add popover

Also made general improvements to the modal.
ipfs-shipyard · Jul 17, 2018 · 5fc01d9 · 5fc01d9
1 parent cb3664d
commit 5fc01d9
Show file tree

Hide file tree

Showing 17 changed files with 846 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,8 +32,10 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-modal": "^3.5.1",
+    "react-popper": "^1.0.0",
     "react-preload-image": "^1.0.4",
-    "react-time-ago": "^2.0.3"
+    "react-time-ago": "^2.0.3",
+    "react-transition-group": "^2.4.0"
   },
   "devDependencies": {
     "@storybook/addon-knobs": "^3.4.8",

diff --git a/src/components/button/Button.js b/src/components/button/Button.js
@@ -32,7 +32,7 @@ export default class Button extends Component {
     }
 
     render() {
-        const { variant, fullWidth, children, className, disabled, ...rest } = this.props;
+        const { variant, fullWidth, disabled, className, children, ...rest } = this.props;
         const { feedback, feedbackOutcome } = this.state;
         const loading = feedback === 'loading';
         const finalDisabled = disabled || loading;

diff --git a/src/components/button/ProgressBar.js b/src/components/button/ProgressBar.js
@@ -42,7 +42,7 @@ export default class ProgressBar extends Component {
     }
 
     storeRef = (ref) => {
-        this.progressBar = ref;
+        this.progressBarNode = ref;
     };
 
     maybeHandleRunningChange(prevRunning) {
@@ -75,24 +75,24 @@ export default class ProgressBar extends Component {
         this.clearTimersAndListeners();
         this.currentProgress = 1;
 
-        this.progressBar.style.transform = 'scaleX(1)';
-        this.cancelOnTransitionEnd = onTransitionEnd(this.progressBar, () => {
+        this.progressBarNode.style.transform = 'scaleX(1)';
+        this.cancelOnTransitionEnd = onTransitionEnd(this.progressBarNode, () => {
             this.props.onEnd && this.props.onEnd();
 
-            this.progressBar.style.opacity = '0';
-            this.cancelOnTransitionEnd = onTransitionEnd(this.progressBar, () => this.reset);
+            this.progressBarNode.style.opacity = '0';
+            this.cancelOnTransitionEnd = onTransitionEnd(this.progressBarNode, () => this.reset);
         });
     }
 
     reset = () => {
         this.clearTimersAndListeners();
         this.currentProgress = 0;
 
-        this.progressBar.style.transition = 'none';
-        this.progressBar.style.transform = '';
-        this.progressBar.style.opacity = '';
-        this.progressBar.offsetHeight; // eslint-disable-line no-unused-expressions
-        this.progressBar.style.transition = '';
+        this.progressBarNode.style.transition = 'none';
+        this.progressBarNode.style.transform = '';
+        this.progressBarNode.style.opacity = '';
+        this.progressBarNode.offsetHeight; // eslint-disable-line no-unused-expressions
+        this.progressBarNode.style.transition = '';
 
         this.props.onReset && this.props.onReset();
     };
@@ -113,7 +113,7 @@ export default class ProgressBar extends Component {
         }
 
         this.currentProgress += increment;
-        this.progressBar.style.transform = `scaleX(${this.currentProgress})`;
+        this.progressBarNode.style.transform = `scaleX(${this.currentProgress})`;
     };
 
     determineIncrement() {

diff --git a/src/components/modal/Modal.css b/src/components/modal/Modal.css
@@ -1,4 +1,5 @@
 @import "colors";
+@import "mixins/typography";
 
 :root {
     --spacing: 4em;
@@ -28,10 +29,10 @@
         opacity: 0;
         transition: opacity 0.1s linear;
     }
-}
 
-.modal-content {
-    @mixin typography-body-1 em;
+    & .content {
+        @mixin typography-body-1 em;
+    }
 }
 
 .modal-overlay {
@@ -53,6 +54,11 @@
     }
 }
 
+.modal-portal {
+    position: relative;
+    z-index: 999999;
+}
+
 .modal-body-open {
     overflow: hidden;
 }
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import ReactModal from 'react-modal';
 import styles from './Modal.css';
 
-const CLOSE_TIMEOUT_MS = 250; // Must be 50ms higher than the close animation
+const CLOSE_TRANSITION_DURATION = 250; // Must be 50ms higher than the actual CSS duration
 
 const computeClassName = (className, classNameProp) => {
     if (classNameProp) {
@@ -55,13 +55,13 @@ export default class Modal extends Component {
 
         return (
             <ReactModal
-                closeTimeoutMS={ CLOSE_TIMEOUT_MS }
+                closeTimeoutMS={ CLOSE_TRANSITION_DURATION }
                 { ...rest }
                 className={ finalClassName }
                 overlayClassName={ finalOverlayClassName }
                 portalClassName={ classNames(styles.modalPortal, portalClassName) }
                 bodyOpenClassName={ classNames(styles.modalBodyOpen, bodyOpenClassName) }>
-                <div className={ classNames(styles.modalContent, contentClassName) }>
+                <div className={ classNames(styles.content, contentClassName) }>
                     { children }
                 </div>
             </ReactModal>

diff --git a/src/components/modal/ModalTrigger.js b/src/components/modal/ModalTrigger.js
@@ -4,34 +4,85 @@ import PropTypes from 'prop-types';
 export default class ModalTrigger extends Component {
     static propTypes = {
         modal: PropTypes.element.isRequired,
-        children: PropTypes.func.isRequired,
+        children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
     };
 
+    constructor() {
+        super();
+
+        this.defaultEventProps = {
+            onClick: this.handleOpen,
+        };
+    }
+
     state = { isOpen: false };
 
-    render() {
-        const { children: trigger, modal } = this.props;
-        const { isOpen } = this.state;
+    componentWillUnmount() {
+        clearTimeout(this.openCloseTimeoutId);
+    }
 
+    render() {
         return (
             <Fragment>
-                { trigger({
-                    isOpen,
-                    open: this.handleOpen,
-                    close: this.handleClose,
-                    toggle: this.handleToggle,
-                }) }
-                { cloneElement(modal, {
-                    isOpen,
-                    onRequestClose: this.handleClose,
-                }) }
+                { this.renderTrigger() }
+                { this.renderModal() }
             </Fragment>
         );
     }
 
-    handleOpen = () => this.setState({ isOpen: true });
+    renderTrigger() {
+        const { children: trigger } = this.props;
+        const { isOpen } = this.state;
+
+        return typeof trigger === 'function' ?
+            trigger({
+                isOpen,
+                open: this.handleOpen,
+                cancelOpen: this.handleCancelOpen,
+                close: this.handleClose,
+                toggle: this.handleToggle,
+                defaultEventProps: this.defaultEventProps,
+            }) :
+            cloneElement(trigger, this.defaultEventProps);
+    }
+
+    renderModal() {
+        const { modal } = this.props;
+        const { isOpen } = this.state;
 
-    handleClose = () => this.setState({ isOpen: false });
+        return cloneElement(modal, {
+            isOpen,
+            onRequestClose: this.handleModalRequestClose,
+        });
+    }
+
+    handleOpen = (delay) => {
+        clearTimeout(this.openCloseTimeoutId);
+
+        this.openCloseTimeoutId = setTimeout(() => {
+            this.setState({ isOpen: true });
+        }, delay);
+    };
+
+    handleCancelOpen = () => {
+        clearTimeout(this.openCloseTimeoutId);
+    };
+
+    handleClose = (delay) => {
+        clearTimeout(this.openCloseTimeoutId);
+
+        this.openCloseTimeoutId = setTimeout(() => {
+            this.setState({ isOpen: false });
+        }, delay);
+    };
+
+    handleToggle = (delay) => {
+        if (this.state.isOpen) {
+            this.handleClose(delay);
+        } else {
+            this.handleOpen(delay);
+        }
+    };
 
-    handleToggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
+    handleModalRequestClose = (e, delay) => this.handleClose(e, delay);
 }