Modal

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>
   );
 }

packages/design-icon/Icon/icon-svg/close.tsx

@@ -1,18 +1,14 @@
 const Close: React.FC<any> = (props) => {
   return (
     <svg
-      viewBox="0 0 1024 1024"
+      viewBox="0 0 20 20"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
-      p-id="1724"
       width={props.size ?? '16'}
       height={props.size ?? '16'}
       fill={props.color ?? 'currentColor'}
     >
-      <path
-        d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z"
-        p-id="1725"
-      ></path>
+      <path d="M10 8.586l-7.071-7.071-1.414 1.414 7.071 7.071-7.071 7.071 1.414 1.414 7.071-7.071 7.071 7.071 1.414-1.414-7.071-7.071 7.071-7.071-1.414-1.414-7.071 7.071z" />
     </svg>
   );
 };