Merge pull request #73 from microcmsio/feature/dialog-element

[feature] Modal components with <dialog> element

Author: dc7290

README.md

@@ -210,7 +210,7 @@ $ npm run watch
 ### Start demo
 
 ```
-$ npm start
+$ npm run start:demo
 ```
 
 Then access it on http://localhost:3001/react-hooks-use-modal

css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

examples-routes.js

@@ -13,4 +13,8 @@ module.exports = [
     path: '/components-option',
     title: 'useModal with components option example',
   },
+  {
+    path: '/future',
+    title: 'Future useModal example',
+  },
 ];

examples/src/index.tsx

@@ -8,6 +8,7 @@ import { ModalWrapper as ComponentsOptionModal } from './js/components-option';
 import { Modal as InitialValueModal } from './js/initial-value';
 import { ModalWrapper as ModalProviderModal } from './js/modal-config';
 import { Modal as PreventScrollModal } from './js/prevent-scroll';
+import { Modal as FutureCommonModal } from './js/future';
 
 const CurrentModal = () => {
   switch (
@@ -27,6 +28,9 @@ const CurrentModal = () => {
     case '/components-option': {
       return <ComponentsOptionModal />;
     }
+    case '/future': {
+      return <FutureCommonModal />;
+    }
     default: {
       return <CommonModal />;
     }

examples/src/js/future/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+import { useModal } from '../../../../src/future';
+
+const contentStyle1: React.CSSProperties = {
+  width: '400px',
+  padding: '10px 40px 40px',
+  backgroundColor: '#fff',
+  borderRadius: '10px',
+};
+const contentStyle2: React.CSSProperties = {
+  width: '400px',
+  height: '100%',
+  padding: '10px 40px 40px',
+  boxSizing: 'border-box',
+  backgroundColor: '#fff',
+  borderRadius: '10px',
+};
+const dialogStyle2: React.CSSProperties = {
+  justifyContent: 'flex-end',
+};
+
+export const Modal = () => {
+  const [Modal1, open1, close1, isOpen1] = useModal();
+  const [Modal2, open2, close2] = useModal();
+  const [value, setValue] = useState('');
+
+  return (
+    <div>
+      <div>Modal is Open? {isOpen1 ? 'Yes' : 'No'}</div>
+      <button onClick={open1}>OPEN</button>
+      <Modal1
+        title="Title"
+        description="This is a customizable modal."
+        contentProps={{
+          style: contentStyle1,
+        }}
+      >
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <button onClick={close1}>CLOSE</button>
+        <button onClick={open2}>OPEN 2</button>
+      </Modal1>
+      <Modal2
+        title="Title"
+        description="This is a customizable modal."
+        dialogProps={{
+          style: dialogStyle2,
+        }}
+        contentProps={{
+          style: contentStyle2,
+        }}
+      >
+        <button onClick={close2}>CLOSE</button>
+      </Modal2>
+    </div>
+  );
+};