feat: 完善Space组件

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

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

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

src/styles/index.scss

@@ -37,3 +37,6 @@
 
 // Empty
 @import "../components/Empty/style";
+
+// Space
+@import "../components/Space/style";