refactor Modal render mode

robyth · May 6, 2016 · ed81459 · ed81459
1 parent a79fe65
commit ed81459
Show file tree

Hide file tree

Showing 6 changed files with 262 additions and 110 deletions.
diff --git a/docs/modal/api.md b/docs/modal/api.md
@@ -17,6 +17,12 @@ Modal 组件，用于弹出内容，实现 alert、confirm、prompt、loading、
 
 Modal 形式，不设置时为普通的模态窗口。
 
+##### `isOpen`
+
+> PropType: `bool`
+
+Modal 是否为打开状态。
+
 ##### `title`
 
 > PropType: `node`
@@ -53,6 +59,8 @@ Modal 标题。
 
 用户点击「确定」或「取消」按钮时的处理函数。
 
+`role` 为 `prompt` 时，通过该函数的返回值可以控制按钮点击时是否关闭 Modal。
+
 ##### `onOpen`
 
 > PropType: `func`
@@ -65,10 +73,18 @@ Modal 打开时的回调函数。
 
 Modal 关闭以后的回调函数。
 
+##### `onRequestClose`
+
+> PropType: `func`
+
+用户请求关闭操作时的处理函数。
+
 
 #### 方法
 
-调用方式见示例代码。
+~~调用方式见示例代码。~~
+
+**Modal 实现方式调整，请勿直接调用其方法。**
 
 ##### `.open()`
 

diff --git a/kitchen-sink/pages/ModalExample.js b/kitchen-sink/pages/ModalExample.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import {
   Container,
   Group,
@@ -9,40 +10,81 @@ import {
 } from 'amazeui-touch';
 
 const ModalExample = React.createClass({
-  open() {
-    this.refs.modal.open();
+  getInitialState() {
+    return {
+      isModalOpen: false,
+    };
   },
 
-  close() {
-    this.refs.modal.close();
+  openModal() {
+    this.setState({
+      isModalOpen: true,
+    })
+  },
+
+  closeModal() {
+    this.setState({
+      isModalOpen: false,
+    });
+  },
+
+  onOpen() {
+    console.log('modal open....');
+  },
+
+  onClosed() {
+    console.log('modal closed....');
   },
 
   handleAction(data) {
-    let role = this.refs.modal.props.role;
+    let role = this.getModalRole();
 
     // 确定和取消放在一起处理
     // data 为 true 时为 `确定`
     if (role === 'confirm') {
-      console.log('你的选择是：「' + (data ? '确定' : '取消')  + '」')
+      console.log('你的选择是：「' + (data ? '确定' : '取消') + '」')
     } else if (role === 'prompt') {
+      // `prompt` 类型支持通过返回值控制是否关闭 Modal
+
+      // 点击取消时 data 的值为 null
+
+      // 简单的验证逻辑
+      // 仅适用于一个输入框的场景，多个输入框的 data 值为 `['', '', ...]`
+      if (data === '') {
+        console.error('赶紧交出来啊，不然...你懂的...');
+        return false; // 点击确定时不关闭 Modal
+      }
+
       console.log('输入的数据是：', data);
+      return true; // 点击确定时关闭 Modal
     }
   },
 
+  getModalRole() {
+    return this.props.modalProps.role;
+  },
+
   render() {
     return (
       <div>
         <Button
           amStyle='primary'
-          onClick={this.open}
+          onClick={this.openModal}
         >
           {this.props.title}
         </Button>
-
-        {React.cloneElement(React.Children.only(this.props.children), {
-          ref: 'modal',
-          onAction: this.handleAction
-        })}
+        <Modal
+          ref="modal"
+          isOpen={this.state.isModalOpen}
+          onRequestClose={this.closeModal}
+          onOpen={this.onOpen}
+          onClosed={this.onClosed}
+          onBeforeConfirm={this.onBeforeConfirm}
+          onAction={this.handleAction}
+          {...this.props.modalProps}
+        >
+          {this.getModalRole() !== 'loading' && this.props.children}
+        </Modal>
       </div>
     );
   }
@@ -55,12 +97,13 @@ const ModalExamples = React.createClass({
         <Group
           header="默认 Modal"
         >
-          <ModalExample title="普通 Modal">
-            <Modal
-              title="Modal 标题"
-            >
-              Modal 内容
-            </Modal>
+          <ModalExample
+            title="普通 Modal"
+            modalProps={{
+              title: 'Modal 标题',
+            }}
+          >
+            Hello, Modal 内容
           </ModalExample>
         </Group>
 
@@ -69,28 +112,25 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Alert Modal"
+            modalProps={{
+              role: 'alert',
+              title: 'Amaze UI',
+            }}
           >
-            <Modal
-              role="alert"
-              title="Amaze UI"
-            >
-              这一个 Alert 窗口。
-            </Modal>
+            这一个 Alert 窗口。
           </ModalExample>
         </Group>
-
         <Group
           header="Confirm"
         >
           <ModalExample
             title="Confirm Modal"
+            modalProps={{
+              role: 'confirm',
+              title: 'Amaze UI',
+            }}
           >
-            <Modal
-              role="confirm"
-              title="Amaze UI"
-            >
-              这一个 Confirm 窗口。
-            </Modal>
+            这一个 Confirm 窗口。
           </ModalExample>
         </Group>
 
@@ -99,14 +139,13 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Prompt Modal"
+            modalProps={{
+              role: 'prompt',
+              title: 'Amaze UI',
+            }}
           >
-            <Modal
-              role="prompt"
-              title="Amaze UI"
-            >
-              输入你的 IQ 卡密码：
-              <Field placeholder="把 IQ 卡密码交出来" />
-            </Modal>
+            输入你的 IQ 卡密码：
+            <Field placeholder="把 IQ 卡密码交出来" />
           </ModalExample>
         </Group>
 
@@ -115,16 +154,15 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Prompt Modal"
+            modalProps={{
+              role: 'prompt',
+              title: 'Login',
+            }}
           >
-            <Modal
-              role="prompt"
-              title="Login"
-            >
-              <div className="form-set">
-                <Field placeholder="Name." />
-                <Field placeholder="Password." />
-              </div>
-            </Modal>
+            <div className="form-set">
+              <Field placeholder="Name." />
+              <Field placeholder="Password." />
+            </div>
           </ModalExample>
         </Group>
 
@@ -133,41 +171,46 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Loading Modal"
-          >
-            <Modal
-              title="使劲加载中..."
-              role="loading"
-            />
-          </ModalExample>
+            modalProps={{
+              title: '使劲加载中...',
+              role: 'loading'
+            }}
+          />
         </Group>
 
         <Group
           header="Actions"
         >
           <ModalExample
             title="Actions Modal"
+            modalProps={{
+              role: 'actions'
+            }}
           >
-            <Modal
-              role="actions"
-            >
-              <div className="modal-actions-group">
-                <List>
-                  <List.Item className="modal-actions-header">分享到</List.Item>
-                  <List.Item>微信</List.Item>
-                  <List.Item className="modal-actions-alert"> Twitter</List.Item>
-                </List>
-              </div>
-            </Modal>
+            <div className="modal-actions-group">
+              <List>
+                <List.Item className="modal-actions-header">分享到</List.Item>
+                <List.Item>微信</List.Item>
+                <List.Item className="modal-actions-alert">
+                  Twitter</List.Item>
+              </List>
+            </div>
           </ModalExample>
         </Group>
 
         <Group
           header="Popup"
         >
-          <ModalExample title="Popup Modal">
-            <Modal role="popup" title="爱过什么女爵的滋味">
-              <p>为你封了国境<br/>为你赦了罪<br/>为你撤了历史记载<br/>为你涂了装扮<br/>为你喝了醉<br/>为你建了城池围墙<br/>一颗热的心穿着冰冷外衣<br/>一张白的脸漆上多少褪色的情节<br/>在我的空虚身体里面<br/>爱上哪个肤浅的王位<br/>在你的空虚宝座里面<br/>爱过什麽女爵的滋味<br/>为你封了国境</p><p>为你赦了罪<br/>为你撤了历史记载<br/>一颗热的心<br/>穿着冰冷外衣<br/>一张白的脸<br/>漆上多少褪色的情节<br/>在我的空虚身体里面<br/>爱上哪个肤浅的王位<br/>在你的空虚宝座里面<br/>爱过什麽女爵的滋味<br/>在我的空虚身体里面<br/>爱上哪个肤浅的王位<br/>在你的空虚宝座里面<br/>爱过什麽女爵的滋味</p>
-            </Modal>
+          <ModalExample
+            title="Popup Modal"
+            modalProps={{
+              role: 'popup',
+              title: '爱过什么女爵的滋味',
+            }}
+          >
+            <p>为你封了国境<br />为你赦了罪<br />为你撤了历史记载<br />为你涂了装扮<br />为你喝了醉<br />为你建了城池围墙<br />一颗热的心穿着冰冷外衣<br />一张白的脸漆上多少褪色的情节<br />在我的空虚身体里面<br />爱上哪个肤浅的王位<br />在你的空虚宝座里面<br />爱过什麽女爵的滋味<br />为你封了国境
+            </p><p>为你赦了罪<br />为你撤了历史记载<br />一颗热的心<br />穿着冰冷外衣<br />一张白的脸<br />漆上多少褪色的情节<br />在我的空虚身体里面<br />爱上哪个肤浅的王位<br />在你的空虚宝座里面<br />爱过什麽女爵的滋味<br />在我的空虚身体里面<br />爱上哪个肤浅的王位<br />在你的空虚宝座里面<br />爱过什麽女爵的滋味
+          </p>
           </ModalExample>
         </Group>
       </Container>

diff --git a/src/js/index.js b/src/js/index.js
@@ -21,7 +21,7 @@ export {default as Icon} from './Icon';
 export {default as Field} from './Field';
 export {default as List} from './List';
 export {default as Loader} from './Loader';
-export {default as Modal} from './Modal';
+export {default as Modal} from './modal';
 export {default as NavBar} from './NavBar';
 export {default as Notification} from './Notification';
 export {default as OffCanvas} from './OffCanvas';