Modal component

docs/components/Modal.md

@@ -0,0 +1,41 @@
+
+
+<b>Examples:</b>
+
+```js
+const handleOk = () => {
+  // do your stuff here
+  modal.hide()
+}
+
+const handleCancel = () => {
+  modal.hide()
+}
+
+const showModal = () => {
+    modal.show(
+        <Card style={{width: 400}}>
+          <CardHeader 
+              title="Modals Are Cool" 
+              subtitle="Super-cool"
+           />
+           <CardBody>
+              This is a modal-card.
+           </CardBody>
+           <CardFooter
+              left={
+                <Button onClick={handleCancel}> Cancel </Button>
+              }
+              right={
+                <Button primary onClick={handleOk}> Ok </Button>
+              }
+            />
+          </Card>
+    ) 
+};
+
+<div>
+    <Button onClick={showModal}> Click Here </Button>
+    <Modal id="unique-id-1" ref={(comp) => modal = comp}/>
+</div>
+```

src/Modal/Modal.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'preact';
+import PropTypes from 'prop-types';
+import { StyledModal } from './styles';
+import ModalPortal from './ModalPortal';
+
+/**
+ * Description
+ *
+ * @example ./../../docs/components/Modal.md
+ */
+class Modal extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            content: false,
+        };
+    }
+
+    static propTypes = {
+        /**
+         * Custom styles
+         */
+        style: PropTypes.object,
+    };
+
+    static defaultProps = {};
+
+    static contextTypes = {
+        theme: PropTypes.object,
+    };
+
+    show = content => {
+        this.setState({ content });
+    };
+
+    hide = () => {
+        this.setState({ content: false });
+    };
+
+    render() {
+        const { style = {}, className } = this.props;
+        const { theme } = this.context;
+
+        return this.state.content ? (
+            <ModalPortal>
+                <StyledModal style={style} className={className} theme={theme}>
+                    {this.state.content}
+                </StyledModal>
+            </ModalPortal>
+        ) : null;
+    }
+}
+
+export default Modal;

src/Modal/ModalPortal.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'preact';
+import PropTypes from 'prop-types';
+import { StyledModalWrapper } from './styles';
+
+/**
+ * Modal Portal Component
+ */
+class ModalPortal extends Component {
+    constructor(props) {
+        super(props);
+        this.portal = null;
+    }
+    componentDidMount() {
+        let portal =
+            this.props.portalId && document.getElementById(this.props.portalId);
+        if (!portal) {
+            portal = document.createElement('div');
+            portal.id = this.props.portalId;
+            portal.style.position = 'fixed';
+            portal.style[this.props.position] = '0';
+            portal.style.top = '0';
+            portal.style.left = '0';
+            portal.style.width = '100vw';
+            portal.style.height = '100vh';
+            portal.style.overflow = 'hidden';
+            portal.style.display = 'flex';
+            portal.style.alignItems = 'center';
+            portal.style.justifyContent = 'center';
+            portal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+            document.body.appendChild(portal);
+        }
+        this.portal = portal;
+        this.componentDidUpdate();
+    }
+    componentWillUnmount() {
+        const element = document.getElementById(this.props.portalId);
+        if (element) {
+            document.body.removeChild(this.portal);
+        }
+    }
+    componentDidUpdate() {
+        if (!this.props.children.length) {
+            return;
+        }
+        React.render(
+            <StyledModalWrapper {...this.props}>
+                {this.props.children}
+            </StyledModalWrapper>,
+            this.portal
+        );
+    }
+    render = () => null;
+}
+
+export default ModalPortal;

src/Modal/index.js

@@ -0,0 +1 @@
+export default from './Modal';

src/Modal/styles.js

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+import defaultTheme from '../theme';
+
+const StyledModal = styled.div`
+    ${props =>
+        props.style &&
+        css`
+            ${props.style};
+        `};
+`;
+
+StyledModal.defaultProps = {
+    theme: defaultTheme,
+};
+
+export { StyledModal };

src/index.js

@@ -23,4 +23,5 @@ export TextField from './Form/TextField';
 export Radio from './Form/Radio';
 export RadioGroup from './Form/RadioGroup';
 export Checkbox from './Form/Checkbox';
+export Modal from './Modal';
 

styleguide.config.js

@@ -22,6 +22,7 @@ module.exports = {
                     './src/AppBar/AppBar.js',
                     './src/Card/Card.js',
                     './src/List/List.js',
+                    './src/Modal/Modal.js',
                     './src/Notify/Notify.js',
                     './src/Tooltip/Tooltip.js',
                     './src/Dropdown/Dropdown.js',