From f91efcaeee4a4822412c64a2d16cf062edd71aa9 Mon Sep 17 00:00:00 2001
From: panyushan <1193345664@qq.com>
Date: Wed, 24 May 2023 18:27:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84Space=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Space/_style.scss       | 12 ++++-
 src/components/Space/index.tsx         | 53 +++++++++++++++-----
 src/components/Space/space.stories.tsx | 68 ++++++++++++++++++++++++--
 src/styles/index.scss                  |  3 ++
 4 files changed, 120 insertions(+), 16 deletions(-)

diff --git a/src/components/Space/_style.scss b/src/components/Space/_style.scss
index 9402f2a..82cbb35 100644
--- a/src/components/Space/_style.scss
+++ b/src/components/Space/_style.scss
@@ -1,3 +1,13 @@
 .dui-space {
-  color: red;
+  display: inline-flex;
+}
+
+@each $dir in start, end, center,baseline {
+  .dui-space-align-#{$dir} {
+    align-items: $dir;
+  }
+}
+
+.dui-space-vertical {
+  flex-direction: column;
 }
diff --git a/src/components/Space/index.tsx b/src/components/Space/index.tsx
index b738a92..e64f6c2 100644
--- a/src/components/Space/index.tsx
+++ b/src/components/Space/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Children, Fragment } from "react";
 import className from "classnames";
 
 export type SpaceDir = "vertical" | "horizontal";
@@ -16,6 +16,7 @@ export interface SpaceProps {
   split?: React.ReactNode;
   /**是否自动换行，仅在 horizontal 时有效 */
   wrap?: boolean;
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }
 
@@ -28,24 +29,52 @@ export interface SpaceProps {
  * ~~~
  */
 const Space: React.FC<SpaceProps> = (props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { size = "middle", children, ...restprops } = props;
-
-  //如果是link类型就生成a标签
+  const {
+    size = "small",
+    wrap,
+    split,
+    align,
+    direction,
+    children,
+    style,
+  } = props;
   const classNames = className(
-    // cusClassname,
-    "dui-btn",
-    { [`dui-btn-${size}`]: true }
+    "dui-space",
+    { [`dui-space-align-${align}`]: true },
+    { [`dui-space-${direction}`]: true }
   );
+
+  const gapMap = {
+    small: 8,
+    middle: 16,
+    large: 24,
+  };
+  const gap = typeof size === "number" ? size : gapMap[size] ?? 8;
+
+  const child = Children.toArray(children);
+
   return (
-    <button className={classNames} {...restprops}>
-      {children}
-    </button>
+    <div
+      className={classNames}
+      style={{ gap, flexWrap: wrap ? "wrap" : undefined, ...style }}
+    >
+      {child.map((ch, index) => {
+        return (
+          <Fragment key={index}>
+            <div className="dui-space-item">{ch}</div>
+            {index === child.length - 1 || !split ? null : (
+              <span className="dui-space-item-split">{split}</span>
+            )}
+          </Fragment>
+        );
+      })}
+    </div>
   );
 };
 
 Space.defaultProps = {
-  size: "middle",
+  size: "small",
+  align: "center",
   direction: "horizontal",
   wrap: false,
 };
diff --git a/src/components/Space/space.stories.tsx b/src/components/Space/space.stories.tsx
index 5b17b3d..6c7e392 100644
--- a/src/components/Space/space.stories.tsx
+++ b/src/components/Space/space.stories.tsx
@@ -1,8 +1,70 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-
+import Button from "../Button";
 import Space from "./index";
 
-const defaultSpace = () => <Space> default button </Space>;
+const defaultSpace = () => (
+  <Space>
+    Space
+    <Button type="primary"> primary button </Button>
+    <Button danger> danger button </Button>
+    <div>Text</div>
+    {null}
+    {undefined}
+  </Space>
+);
+
+const sizeSpace = () => (
+  <>
+    <Space size="large">
+      Space
+      <Button type="primary"> primary button </Button>
+      <Button danger> danger button </Button>
+      <div>Text</div>
+    </Space>
+    <br />
+    <br />
+    <Space size={50}>
+      Space
+      <Button type="primary"> primary button </Button>
+      <Button danger> danger button </Button>
+      <div>Text</div>
+    </Space>
+  </>
+);
+
+const wrapSpace = () => (
+  <div style={{ width: 300 }}>
+    <Space wrap>
+      Space
+      <Button type="primary"> primary button </Button>
+      <Button danger> danger button </Button>
+      <div>Text</div>
+    </Space>
+  </div>
+);
+
+const splitSpace = () => (
+  <Space split="|">
+    Space
+    <Button type="primary"> primary button </Button>
+    <Button danger> danger button </Button>
+    <div>Text</div>
+  </Space>
+);
+
+const verticalSpace = () => (
+  <Space direction="vertical" size="middle">
+    Space
+    <Button type="primary"> primary button </Button>
+    <Button danger> danger button </Button>
+    <div>Text</div>
+  </Space>
+);
 
-storiesOf("Space 间距", module).add("Space", defaultSpace);
+storiesOf("Space 间距", module)
+  .add("Space", defaultSpace)
+  .add("Space 大小", sizeSpace)
+  .add("Space 换行", wrapSpace)
+  .add("Space 分隔符", splitSpace)
+  .add("Space 垂直间距", verticalSpace);
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f050105..794fc01 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -37,3 +37,6 @@
 
 // Empty
 @import "../components/Empty/style";
+
+// Space
+@import "../components/Space/style";