feat: 加入modal组件

ChocolateUI · Oct 15, 2021 · 1fc3eae · 1fc3eae
1 parent b60f858
commit 1fc3eae
Show file tree

Hide file tree

Showing 24 changed files with 960 additions and 88 deletions.
diff --git a/src/components/Buttons/__tests__/button.tsx → src/components/Button/__tests__/button.tsx b/src/components/Buttons/__tests__/button.tsx → src/components/Button/__tests__/button.tsx
diff --git a/src/components/Buttons/button-doc.mdx → src/components/Button/button-doc.mdx b/src/components/Buttons/button-doc.mdx → src/components/Button/button-doc.mdx
diff --git a/src/components/Buttons/button.stories.tsx → src/components/Button/button.stories.tsx b/src/components/Buttons/button.stories.tsx → src/components/Button/button.stories.tsx
diff --git a/src/components/Buttons/button.tsx → src/components/Button/button.tsx b/src/components/Buttons/button.tsx → src/components/Button/button.tsx
diff --git a/src/components/Buttons/index.tsx → src/components/Button/index.tsx b/src/components/Buttons/index.tsx → src/components/Button/index.tsx
diff --git a/src/components/Buttons/style.scss → src/components/Button/style.scss b/src/components/Buttons/style.scss → src/components/Button/style.scss
diff --git a/src/components/Buttons/style.ts → src/components/Button/style.ts b/src/components/Buttons/style.ts → src/components/Button/style.ts
diff --git a/src/components/DropdownButton/index.js b/src/components/DropdownButton/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Dropdown, useDropdownToggle, useDropdownMenu } from "react-overlays";
 import scopedClass from "../../utils/scopedClass";
 import classNames from "classnames";
-import { Button } from "../Buttons/button";
+import { Button } from "../Button/button";
 
 const sc = scopedClass("chocolate-dropdown");
 

diff --git a/src/components/InputDatePicker/datePicker.tsx b/src/components/InputDatePicker/datePicker.tsx
@@ -6,7 +6,7 @@ import getDate from "date-fns/getDate";
 import getMonth from "date-fns/getMonth";
 import isSameDay from "date-fns/isSameDay";
 import dateFnsIsToday from "date-fns/isToday";
-import { Button } from "../Buttons/button";
+import { Button } from "../Button/button";
 import { CalendarProps } from "./calendar";
 
 const sc = scopedClass("chocolate-picker");

diff --git a/src/components/InputDatePicker/dateView.tsx b/src/components/InputDatePicker/dateView.tsx
@@ -5,7 +5,7 @@ import React, {
 } from "react";
 import { ViewLayout } from "./viewLayout";
 import DatePicker, { CalendarType } from "./datePicker";
-import { Button } from "../Buttons/button";
+import { Button } from "../Button/button";
 import Icon from "../Icon/icon";
 import HeaderTitle from "./headerTitle";
 import { CalendarProps } from "./calendar";

diff --git a/src/components/InputDatePicker/headerTitle.tsx b/src/components/InputDatePicker/headerTitle.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "../Buttons/button";
+import { Button } from "../Button/button";
 import format from "date-fns/format";
 import { CalendarType } from "./datePicker";
 import YearPicker from "./yearPicker";

diff --git a/src/components/InputDatePicker/monthPicker.tsx b/src/components/InputDatePicker/monthPicker.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import scopedClass from "../../utils/scopedClass";
-import { Button } from "../Buttons/button";
+import { Button } from "../Button/button";
 import { buildMonths } from "./utils/generator";
 import classNames from "classnames";
 const sc = scopedClass("chocolate-picker-month");

diff --git a/src/components/InputDatePicker/monthYearView.tsx b/src/components/InputDatePicker/monthYearView.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, MouseEventHandler } from "react";
 import MonthPicker from "./monthPicker";
 import ViewLayout from "./viewLayout";
-import { Button } from "../Buttons/button";
+import { Button } from "../Button/button";
 import Icon from "../Icon";
 import { CalendarType } from "./datePicker";
 import HeaderTitle from "./headerTitle";

diff --git a/src/components/Modal/close.png b/src/components/Modal/close.png
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -0,0 +1,3 @@
+import Modal from "./modal";
+
+export default Modal;
diff --git a/src/components/Modal/modal-doc.mdx b/src/components/Modal/modal-doc.mdx
@@ -0,0 +1,63 @@
+<!-- Modal Doc -->
+## Modal 模态框
+对话框组件
+
+import { Story, Meta, ArgsTable, Source } from '@storybook/addon-docs/blocks';
+import { Modal } from './modal';
+import dedent from 'ts-dedent';
+<Meta title="Components/Input" component={Modal} />;
+
+### 使用
+
+<Source
+  language='jsx'
+  code={
+    dedent`
+      <Modal
+        title="提示"
+        visible={visible}
+        showMask
+        onCancel={() => setVisible(false)}
+        footer={
+          <>
+            <Button
+              btnType="default"
+              size="sm"
+              onClick={() => setVisible(false)}
+            >
+              取消
+            </Button>
+            <Button
+              btnType="primary"
+              style={{ marginLeft: 16 }}
+              onClick={() => setVisible(false)}
+              size="sm"
+            >
+              确认
+            </Button>
+          </>
+        }
+      >
+        <div>确认一下</div>
+        <span style={{ color: "#999999", fontSize: 12 }}>
+          是否要关闭模态框？
+        </span>
+      </Modal>
+    `
+  }
+/>
+
+### 具体参数
+<ArgsTable of={Modal} />
+
+export const Template = (args) => <Modal {...args} />
+
+
+### 组件展示
+
+
+##### default 类型
+
+<Story name="default" id="modal--default">
+{Template.bind({})}
+</Story>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Modal from "./modal";

		export default Modal;