From b38004a08ae1ecdce36bf67cd658f31df28fdc69 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Tue, 26 Mar 2019 20:33:00 +0800
Subject: [PATCH] Add Modal.tsx

---
 packages/client/src/components/Modal.test.tsx | 47 +++++++++++++++++++
 packages/client/src/components/Modal.tsx      | 20 ++++++++
 packages/client/src/components/index.ts       |  1 +
 3 files changed, 68 insertions(+)
 create mode 100644 packages/client/src/components/Modal.test.tsx
 create mode 100644 packages/client/src/components/Modal.tsx

diff --git a/packages/client/src/components/Modal.test.tsx b/packages/client/src/components/Modal.test.tsx
new file mode 100644
index 0000000..623f6af
--- /dev/null
+++ b/packages/client/src/components/Modal.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import T from 'react-dom/test-utils'
+import {Modal} from './Modal'
+import {TestUtils} from '../test-utils'
+
+describe('Modal', () => {
+
+  class TestToggle extends React.PureComponent<{}, {visible: boolean}> {
+    constructor(props: {}) {
+      super(props)
+      this.state = {
+        visible: false,
+      }
+    }
+    toggle = () => {
+      this.setState({
+        visible: !this.state.visible,
+      })
+    }
+    render() {
+      return (
+        <div>
+          <button onClick={this.toggle}>Toggle</button>
+          <Modal isActive={this.state.visible}>
+            hi!
+          </Modal>
+        </div>
+      )
+    }
+  }
+
+  describe('isActive', () => {
+    const t = new TestUtils()
+
+    it('toggles is-active via isActive property', () => {
+      const {node} = t.render(<TestToggle />)
+      expect(node.innerHTML).toContain('hi!')
+      const modal = node.querySelector('.modal') as HTMLElement
+      expect(modal.className).toEqual('modal')
+      T.Simulate.click(node.querySelector('button') as HTMLElement)
+      expect(modal.className).toEqual('modal is-active')
+      T.Simulate.click(node.querySelector('button') as HTMLElement)
+      expect(modal.className).toEqual('modal')
+    })
+  })
+
+})
diff --git a/packages/client/src/components/Modal.tsx b/packages/client/src/components/Modal.tsx
new file mode 100644
index 0000000..2ce3f60
--- /dev/null
+++ b/packages/client/src/components/Modal.tsx
@@ -0,0 +1,20 @@
+import {Modal as M, ModalBackground, ModalContent, ModalClose} from 'bloomer'
+import React from 'react'
+
+export interface IModalProps {
+  isActive?: boolean
+}
+
+export class Modal extends React.PureComponent<IModalProps> {
+  render() {
+    return (
+      <M isActive={this.props.isActive}>
+        <ModalBackground />
+        <ModalContent>
+          {this.props.children}
+       </ModalContent>
+       <ModalClose />
+      </M>
+    )
+  }
+}
diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts
index e6c9daa..0444255 100644
--- a/packages/client/src/components/index.ts
+++ b/packages/client/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from './Button'
 // export * from './Component'
 export * from './Input'
+export * from './Modal'
 export * from './Redirect'