Modal (#25)

* init modal

* feat:添加modalprops

* feat:modal

* feat:add dragge

* style:close icon

* fix:dragge fuction

* fix:skeleton li style effect gloal

* fix:change close icon

* fix:change close icon

* fix;button disabled prevent default

* feat: add modal dragge

* feat: add modal dragge

* fix:modal dragge position not  update

* feat:add useModal

* feat:useModal Modalcancel and modalok

* feat:add description

* chore: (Modal)remove useless

* chore: (Modal)type

* fix:card line-height problem

* fix:card mdx

* chore: [Modal]样式、文档优化

* feat: [Modal]props优化

---------

Co-authored-by: 1360151219 <[email protected]>

Author: hoshinogami

packages/demo/index.tsx

@@ -23,5 +23,4 @@ ReactDom.createRoot(document.getElementById('root') as HTMLElement).render(
       <App />
     </AutoScrollToTop>
   </HashRouter>
-
 );

packages/demo/src/components/Card/index.mdx

@@ -2,16 +2,18 @@ import Actions from './svg/index.tsx';
 import More from './svg/tab.tsx';
 
 # Card
-
-<div className="title">默认样式</div>
+通用卡片容器
+## 默认样式
+一个简单的卡片用法。
 <CodeBlock line={'5-7'}>
   <Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More />} actions={<Actions></Actions>}>
     <div>
       <p>我好想买Airpods但是没有钱，梁老师可不可以资助我 一点钱钱呢啊？不多不多的 </p>
     </div>
   </Card>
 </CodeBlock>
-<div className="title">带头像</div>
+## 带头像
+通过avatar属性来添加头像。
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -29,8 +31,8 @@ import More from './svg/tab.tsx';
     梁老师可不可以资助我一点钱钱呢啊？ 不多不多的， 球球了！我好想买Airpods但是没有钱，梁老师可
   </Card>
 </CodeBlock>
-
-<div className="title">栅格</div>
+## 栅格
+利用Grid属性，实现栅格布局。
 <CodeBlock line={'5-7'}>
   <Card
     avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
@@ -48,15 +50,16 @@ import More from './svg/tab.tsx';
     <div>足球</div>
   </Card>
 </CodeBlock>
-<div className="title">收起与展开长度</div>
+## 收起与展开长度
+通过css变量实现展示内容的长度。
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
     time="19:20 2020-09-15"
     extra={<More />}
     avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
     actions={<Actions />}
-    style={{ '--card-minLength': '5' }}
+    style={{ '--card-minLength': 5 }}
   >
     我好想买Airpods但是没有钱，梁老师可不可以资助我 我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
     啊？不多不多的，球球了！我好想买Airpods但 是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
@@ -72,7 +75,7 @@ import More from './svg/tab.tsx';
     extra={<More />}
     avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
     actions={<Actions />}
-    style={{ '--card-maxLength': '7' }}
+    style={{ '--card-maxLength': 7 }}
   >
     我好想买Airpods但是没有钱，梁老师可不可以资助我 我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢
     啊？不多不多的，球球了！我好想买Airpods但 是没有钱，梁老师可不可以资助我一点钱钱呢啊？不多不多的，
@@ -83,7 +86,8 @@ import More from './svg/tab.tsx';
     梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
   </Card>
 </CodeBlock>
-<div className="title">自定义背景色和宽度</div>
+## 自定义背景颜色和宽度
+自定义更改卡片的样式。
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -101,7 +105,8 @@ import More from './svg/tab.tsx';
   </Card>
 </CodeBlock>
 
-<div className="title">加载中</div>
+## 加载中
+数据读入前会有文本块样式。
 <CodeBlock line={'5-7'}>
   <Loading />
 </CodeBlock>

packages/demo/src/components/Modal/demo/Common.tsx

@@ -0,0 +1,23 @@
+import { Button, Modal } from 'pivot-design';
+import React, { useState } from 'react';
+const App: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const onchange = () => {
+    setOpen(true);
+  };
+  const onOk = () => {
+    setOpen(false);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Modal title="这是" open={open} onOk={onOk} onCancel={onCancel}>
+        h1这是内容
+      </Modal>
+      <Button onClick={onchange}>按钮</Button>
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Modal/demo/FooterRow.tsx

@@ -0,0 +1,31 @@
+import { Button, Modal } from 'pivot-design';
+import React, { useState } from 'react';
+const App: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const onchange = () => {
+    setOpen(true);
+  };
+  const onOk = () => {
+    setOpen(false);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Modal
+        title="这是"
+        content="Hello world"
+        open={open}
+        onOk={onOk}
+        onCancel={onCancel}
+        footerButtonDirection={'col'}
+        cancelButtonProps={{ disabled: true }}
+      >
+        <p>h1这是内容</p>
+      </Modal>
+      <Button onClick={onchange}>竖版</Button>
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Modal/demo/Mask.tsx

@@ -0,0 +1,43 @@
+import { Button, Modal } from 'pivot-design';
+import React, { useState } from 'react';
+const App: React.FC = () => {
+  const [openOne, setOpenOne] = useState(false);
+  const [openSecond, setOpenSecond] = useState(false);
+  const onchangeOne = () => {
+    setOpenOne(true);
+  };
+  const onOkOne = () => {
+    setOpenOne(false);
+  };
+  const onCancelOne = () => {
+    setOpenOne(false);
+  };
+
+  const onchangeSecond = () => {
+    setOpenSecond(true);
+  };
+
+  const onCancelSecond = () => {
+    setOpenSecond(false);
+  };
+  return (
+    <>
+      <Modal title="没有蒙层的模态框" open={openOne} onOk={onOkOne} onCancel={onCancelOne} hasMask={false}>
+        没有蒙层
+      </Modal>
+      <Button onClick={onchangeOne}>没有蒙层</Button>
+
+      <Modal
+        title="点击蒙层不会消失的模态框"
+        open={openSecond}
+        onCancel={onCancelSecond}
+        maskClosable={false}
+        hasMask={true}
+      >
+        点击蒙层不会消失的模态框
+      </Modal>
+      <Button onClick={onchangeSecond}>点击蒙层</Button>
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Modal/demo/Position.tsx

@@ -0,0 +1,23 @@
+import { Button, Modal } from 'pivot-design';
+import React, { useState } from 'react';
+const App: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const onchange = () => {
+    setOpen(true);
+  };
+  const onOk = () => {
+    setOpen(false);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Modal title="模态框" open={open} onOk={onOk} onCancel={onCancel} position={{ x: 0, y: 100 }}>
+        <p>h1这是内容</p>
+      </Modal>
+      <Button onClick={onchange}>按钮</Button>
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Modal/demo/UseModal.tsx

@@ -0,0 +1,18 @@
+import { Button, Modal } from 'pivot-design';
+import React from 'react';
+
+const App: React.FC = () => {
+  return (
+    <Button
+      onClick={() => {
+        Modal.show({
+          title: 'Modal',
+          children: 'show调起的对话框',
+        });
+      }}
+    >
+      Show
+    </Button>
+  );
+};
+export default App;

packages/demo/src/components/Modal/index.mdx

@@ -0,0 +1,43 @@
+# Modal
+
+模态对话框组件，用于展示需要用户确认的重要信息。
+
+## 基本用法
+
+最基本的模态对话框用法
+
+<CodeBlock line={'5-7'}>
+  <Common />
+</CodeBlock>
+
+## 底部按钮组定制
+
+提供自定义底部按钮，可以通过 `OkButtonProps`，`cancelButtonProps` 控制 Button，还可以传入 `footer` 来自定义模态框的底部。
+
+<CodeBlock line={'7-11'}>
+  <FooterRow />
+</CodeBlock>
+
+## 弹窗出现位置
+
+通过 `position` 属性，从而改变模态框的出现位置。
+
+<CodeBlock line={'7-11'}>
+  <Position />
+</CodeBlock>
+
+## 蒙层动作自定义
+
+你可以通过给 `hasMask` 传入 `false` 来关闭模态框的蒙层。
+
+<CodeBlock line={'7-11'}>
+  <Mask />
+</CodeBlock>
+
+## 声明式调用
+
+你可以使用 `Modal.show(props)` 的方式来调起一个模态框。
+
+<CodeBlock line={'7-11'}>
+  <UseModal />
+</CodeBlock>

packages/demo/src/components/Skeleton/index.mdx

@@ -19,4 +19,4 @@
 <div className="title">静态</div>
 <CodeBlock line={'5-7'}>
 <Skeleton style={{width:"380px",'--skeleton-active':'false'}}></Skeleton>
-</CodeBlock>
+</CodeBlock>

packages/demo/src/pages/component/index.tsx

@@ -1,19 +1,21 @@
 import { useState } from 'react';
-import { Button, Icon, Input, Skeleton, Card, Popover } from 'pivot-design';
+import { Button, Icon, Input, Skeleton, Card, Popover, Modal } from 'pivot-design';
 // import router from '@/routers';
 import ButtonMdx from '../../components/Button/index.mdx';
 import IconMdx from '../../components/Icon/index.mdx';
 import InputMdx from '../../components/Input/index.mdx';
 import CardMdx from '../../components/Card/index.mdx';
 import SkeletonMdx from '../../components/Skeleton/index.mdx';
+//import PopoverMdx from '@/components/Popover/index.mdx';
+import ModalMdx from '../../components/Modal/index.mdx';
 import PopoverMdx from '../../components/Popover/index.mdx';
 import './index.scss';
 
 import Draggable from '@/examples/Draggable/Draggable';
 import CodeBlock from '@/components/_CodeBlock/codeBlock';
 
 function Index() {
-  const [select, setSelect] = useState('Draggable');
+  const [select, setSelect] = useState('Modal');
   const demoSelect = () => {
     return (
       <div className="demo-container">
@@ -38,6 +40,9 @@ function Index() {
         <div className={`demo-item ${select === 'Popover' ? 'active' : ''}`} onClick={() => setSelect('Popover')}>
           气泡
         </div>
+        <div className={`demo-item ${select === 'Modal' ? 'active' : ''}`} onClick={() => setSelect('Modal')}>
+          弹窗
+        </div>
       </div>
     );
   };
@@ -53,8 +58,11 @@ function Index() {
         {select === 'Popover' ? <PopoverMdx components={{ Popover, CodeBlock }} /> : null}
         {select === 'Draggable' ? <Draggable /> : null}
         {select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
+        {select === 'Modal' ? <ModalMdx components={{ Modal, CodeBlock }} /> : null}
+      </div>
+      <div className="demo-component-catalogue" style={{ width: '200px' }}>
+        1
       </div>
-      <div className="demo-component-catalogue" style={{ width: '200px' }}>1</div>
     </div>
   );
 }