From fb5561dfc2b03bbdd2b9ed9d113f4edb659f7428 Mon Sep 17 00:00:00 2001
From: "BugMaker.Huang" <BugMaker.Huang@1695529682694277.onaliyun.com>
Date: Thu, 28 Mar 2024 14:29:22 +0800
Subject: [PATCH] docs(modal): add html source code

---
 docs/example/Modal/demos/basicUsage.tsx   |  4 +-
 docs/example/Modal/demos/buttonStatus.tsx |  6 +-
 docs/example/Modal/demos/buttonText.tsx   |  6 +-
 docs/example/Modal/demos/customFooter.tsx |  6 +-
 docs/example/Modal/demos/customWidth.tsx  |  4 +-
 docs/example/Modal/demos/overflow.tsx     |  6 +-
 public/Modal/basicUsage.html              | 26 +++++++++
 public/Modal/buttonStatus.html            | 32 +++++++++++
 public/Modal/buttonText.html              | 24 ++++++++
 public/Modal/customFooter.html            | 34 +++++++++++
 public/Modal/customWidth.html             | 70 +++++++++++++++++++++++
 public/Modal/overflow.html                | 26 +++++++++
 12 files changed, 228 insertions(+), 16 deletions(-)
 create mode 100644 public/Modal/basicUsage.html
 create mode 100644 public/Modal/buttonStatus.html
 create mode 100644 public/Modal/buttonText.html
 create mode 100644 public/Modal/customFooter.html
 create mode 100644 public/Modal/customWidth.html
 create mode 100644 public/Modal/overflow.html

diff --git a/docs/example/Modal/demos/basicUsage.tsx b/docs/example/Modal/demos/basicUsage.tsx
index 85f471d1..93da8419 100644
--- a/docs/example/Modal/demos/basicUsage.tsx
+++ b/docs/example/Modal/demos/basicUsage.tsx
@@ -9,7 +9,7 @@ export default function BasicUsage() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         Open Modal
       </Button>
@@ -28,6 +28,6 @@ export default function BasicUsage() {
         <div>Some contents...</div>
         <div>Some contents...</div>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Modal/demos/buttonStatus.tsx b/docs/example/Modal/demos/buttonStatus.tsx
index e9e90bfc..749c921f 100644
--- a/docs/example/Modal/demos/buttonStatus.tsx
+++ b/docs/example/Modal/demos/buttonStatus.tsx
@@ -4,14 +4,14 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function ButtonStatus() {
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         自定义按钮状态
       </Button>
@@ -37,6 +37,6 @@ export default function ButtonStatus() {
         <div>Some contents...</div>
         <div>Some contents...</div>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Modal/demos/buttonText.tsx b/docs/example/Modal/demos/buttonText.tsx
index e6f04c68..69706d91 100644
--- a/docs/example/Modal/demos/buttonText.tsx
+++ b/docs/example/Modal/demos/buttonText.tsx
@@ -4,13 +4,13 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function ButtonText() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         Open Modal
       </Button>
@@ -29,6 +29,6 @@ export default function ButtonText() {
       >
         是否开通连续包月？
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Modal/demos/customFooter.tsx b/docs/example/Modal/demos/customFooter.tsx
index ee0f3004..7ec45565 100644
--- a/docs/example/Modal/demos/customFooter.tsx
+++ b/docs/example/Modal/demos/customFooter.tsx
@@ -4,13 +4,13 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function CustomFooter() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         自定义Footer
       </Button>
@@ -33,6 +33,6 @@ export default function CustomFooter() {
           </Button>
         </div>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Modal/demos/customWidth.tsx b/docs/example/Modal/demos/customWidth.tsx
index f27a353d..930657f2 100644
--- a/docs/example/Modal/demos/customWidth.tsx
+++ b/docs/example/Modal/demos/customWidth.tsx
@@ -12,7 +12,7 @@ export default function CustomWidth() {
   const [visible3, setVisible3] = useState(false);
 
   return (
-    <div>
+    <>
       <Button onClick={() => setVisible(true)} style={{ marginRight: '20px' }}>
         一个300px宽度的Modal
       </Button>
@@ -67,6 +67,6 @@ export default function CustomWidth() {
         <div>Some contents...</div>
         <div>Some contents...</div>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Modal/demos/overflow.tsx b/docs/example/Modal/demos/overflow.tsx
index e3022fc8..6730b6bc 100644
--- a/docs/example/Modal/demos/overflow.tsx
+++ b/docs/example/Modal/demos/overflow.tsx
@@ -4,13 +4,13 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function Overflow() {
   const [visible, setVisible] = useState(false);
 
   return (
-    <div>
+    <>
       <Button type="primary" onClick={() => setVisible(true)}>
         Open Modal
       </Button>
@@ -30,6 +30,6 @@ export default function Overflow() {
           <span>Hi~ o(*￣▽￣*)ブ</span>
         </div>
       </Modal>
-    </div>
+    </>
   );
 }
diff --git a/public/Modal/basicUsage.html b/public/Modal/basicUsage.html
new file mode 100644
index 00000000..6352cc58
--- /dev/null
+++ b/public/Modal/basicUsage.html
@@ -0,0 +1,26 @@
+<b-button type="primary">
+  Open Modal
+</b-button>
+<b-modal title="I am a Modal~">
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>
\ No newline at end of file
diff --git a/public/Modal/buttonStatus.html b/public/Modal/buttonStatus.html
new file mode 100644
index 00000000..dbf25ed6
--- /dev/null
+++ b/public/Modal/buttonStatus.html
@@ -0,0 +1,32 @@
+<b-button type="primary">
+  自定义按钮状态
+</b-button>
+<b-modal title="I am a Modal~">
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+  <div>Some contents...</div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.okButtonLoading = true;
+    modal.cancelButtonDisabled = true;
+    setTimeout(() => {
+      modal.okButtonLoading = false;
+      modal.cancelButtonDisabled = false;
+      modal.open = false;
+      window.BMessage.success({ content: "OK~" })
+    }, 3000);
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>
\ No newline at end of file
diff --git a/public/Modal/buttonText.html b/public/Modal/buttonText.html
new file mode 100644
index 00000000..29fa1459
--- /dev/null
+++ b/public/Modal/buttonText.html
@@ -0,0 +1,24 @@
+<b-button type="primary">
+  Open Modal
+</b-button>
+<b-modal title="会员畅享内容" ok-text="没问题！" cancel-text="算了">
+  是否开通连续包月？
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>
\ No newline at end of file
diff --git a/public/Modal/customFooter.html b/public/Modal/customFooter.html
new file mode 100644
index 00000000..ecbf3e8d
--- /dev/null
+++ b/public/Modal/customFooter.html
@@ -0,0 +1,34 @@
+<b-button type="primary" id="open-button">自定义Footer</b-button>
+<b-modal title="删除数据">
+  <p>是否删除数据？</p>
+  <div slot="footer">
+    <b-button id="cancel-button" style="margin-right: 10px;">取消</b-button>
+    <b-button type="danger" id="delete-button">删除</b-button>
+  </div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('#open-button');
+  const modal = document.querySelector('b-modal');
+  const cancelButton = document.querySelector('#cancel-button');
+  const deleteButton = document.querySelector('#delete-button');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  // 自定义的Footer中的按钮被点击后不会触发ok或cancel事件，需要手动关闭Modal
+  // 但是点击Modal的遮罩层会或按ESC键或点击Modal的关闭按钮仍然会触发cancel事件
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+
+  cancelButton.addEventListener('click', () => {
+    modal.open = false;
+  });
+
+  deleteButton.addEventListener('click', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "已删除数据" })
+  });
+</script>
\ No newline at end of file
diff --git a/public/Modal/customWidth.html b/public/Modal/customWidth.html
new file mode 100644
index 00000000..d7f1740b
--- /dev/null
+++ b/public/Modal/customWidth.html
@@ -0,0 +1,70 @@
+<b-button id="open-button1" style="margin-right: 20px;">一个300px宽度的Modal</b-button>
+<b-button id="open-button2">一个50vw宽度的Modal</b-button>
+<p>你甚至可以使用`css变量`来设置宽度</p>
+<b-button id="open-button3">使用css变量设置宽度</b-button>
+
+<b-modal id="modal1" title="一个300px宽度的Modal" width="300">
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+</b-modal>
+
+<b-modal id="modal2" title="一个50vw宽度的Modal" width="50vw">
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+</b-modal>
+
+<b-modal id="modal3" title="使用css变量设置宽度" style="--banana-modal-width: 50vw;">
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+  <p>Some contents...</p>
+</b-modal>
+
+<script>
+  const button1 = document.querySelector('#open-button1');
+  const button2 = document.querySelector('#open-button2');
+  const button3 = document.querySelector('#open-button3');
+  const modal1 = document.querySelector('#modal1');
+  const modal2 = document.querySelector('#modal2');
+  const modal3 = document.querySelector('#modal3');
+
+  button1.addEventListener('click', () => {
+    modal1.open = true;
+  });
+
+  button2.addEventListener('click', () => {
+    modal2.open = true;
+  });
+
+  button3.addEventListener('click', () => {
+    modal3.open = true;
+  });
+
+  modal1.addEventListener('ok', () => {
+    modal1.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal2.addEventListener('ok', () => {
+    modal2.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal3.addEventListener('ok', () => {
+    modal3.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal1.addEventListener('cancel', () => {
+    modal1.open = false;
+  });
+
+  modal2.addEventListener('cancel', () => {
+    modal2.open = false;
+  });
+
+  modal3.addEventListener('cancel', () => {
+    modal3.open = false;
+  });
+</script>
\ No newline at end of file
diff --git a/public/Modal/overflow.html b/public/Modal/overflow.html
new file mode 100644
index 00000000..f6b8a092
--- /dev/null
+++ b/public/Modal/overflow.html
@@ -0,0 +1,26 @@
+<b-button type="primary">Open Modal</b-button>
+
+<b-modal title="I am a Modal~">
+  <div style="padding: 30px 20px; border: 1px dashed #ccc">
+    <div style="height: 200vh">往下滚动试试~👇🏻👇👇🏻👇👇🏻👇</div>
+    <span>Hi~ o(*￣▽￣*)ブ</span>
+  </div>
+</b-modal>
+
+<script>
+  const button = document.querySelector('b-button');
+  const modal = document.querySelector('b-modal');
+
+  button.addEventListener('click', () => {
+    modal.open = true;
+  });
+
+  modal.addEventListener('ok', () => {
+    modal.open = false;
+    window.BMessage.success({ content: "OK~" })
+  });
+
+  modal.addEventListener('cancel', () => {
+    modal.open = false;
+  });
+</script>
\ No newline at end of file