feat(space): add space component (#716)

src/components/space/Item.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import { SpaceContext } from './Space';
+import { ItemProps } from './interface';
+
+const Item = ({
+    className,
+    index,
+    direction,
+    children,
+    split,
+    autoWrap,
+} : ItemProps) => {
+    const { horizontalSize, verticalSize, latestIndex } = useContext(SpaceContext);
+
+    let style : React.CSSProperties = {};
+
+    if(direction === 'vertical') {
+      if(index < latestIndex) {
+        style = { marginBottom: horizontalSize / (split ? 2 : 1) };
+      }
+    }else {
+        style = {
+            ...(index < latestIndex && { marginRight: horizontalSize / (split ? 2 : 1) }),
+            ...(autoWrap && { marginBottom: verticalSize }),
+        };
+    }
+
+    if(children === null || children === undefined) {
+        return null;
+    }
+
+    return (
+      <>
+        <div className={className} style={style}>
+          {children}
+        </div>
+        {
+            index < latestIndex && split && (
+            <span className={`${className}-split`} style={style}>
+              {split}
+            </span>
+            )
+        }
+      </>
+    )
+}
+
+export default Item;

src/components/space/Space.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { PlusCircleFilled } from '@gio-design/icons';
+import Space, { SpaceProps } from './index';
+import { Button } from '../..';
+
+export default {
+    title: 'Components/Basic/Space',
+    component: Space,
+} as Meta;
+
+const Template : Story<SpaceProps> = (args) => (
+  <Space {...args}>
+    <Button>主要按钮</Button>
+    <Button type="secondary">次要按钮</Button>
+    <Button type="secondary" icon={<PlusCircleFilled />}>次要按钮</Button>
+  </Space>
+);
+
+export const Default = Template.bind({});
+Default.args = {}
+

src/components/space/Space.tsx

@@ -0,0 +1,83 @@
+import React,{ useContext, useMemo } from 'react';
+import classnames from 'classnames';
+import toArray from 'rc-util/lib/Children/toArray';
+import { ConfigContext } from '../config-provider'
+import Item from './Item';
+import { SpaceProps, SpaceSize } from './interface';
+import './style'
+
+export const SpaceContext = React.createContext({
+    horizontalSize: 0,
+    verticalSize: 0,
+    latestIndex: 0,
+});
+
+const Space : React.FC<SpaceProps> = props => {
+    const { getPrefixCls } = useContext(ConfigContext);
+
+    const {
+        size = 8,
+        className,
+        children,
+        direction = 'horizontal',
+        prefixCls: customizePrefixCls,
+        split,
+        style,
+        autoWrap = false,
+        align = 'center',
+    } = props;
+
+    const [horizontalSize, verticalSize] = useMemo(() => ((Array.isArray(size) ? size : [size, size]) as [SpaceSize, SpaceSize]),[size]);
+
+    const childNodes = toArray(children, { keepEmpty: true });
+
+    if(childNodes.length === 0) {
+        return null;
+    }
+
+    const prefixCls = getPrefixCls('space', customizePrefixCls);
+    const itemCls = `${prefixCls}-item`;
+    const cls = classnames(
+        prefixCls,
+        `${prefixCls}-${direction}`,
+        `${prefixCls}-align-${align}`,
+        className,
+    );
+
+    let latestIndex = 0;
+    const nodes = childNodes.map((child, index) => {
+        if(child !== null && child !== undefined) {
+            latestIndex = index;
+        }
+
+        return (
+          <Item
+            className={itemCls}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            index={index}
+            direction={direction}
+            split={split}
+            autoWrap={autoWrap}
+          >
+            {child}
+          </Item>
+        )
+    })
+
+    return (
+      <div
+        className={cls}
+        style={{
+                ...(autoWrap && { flexWrap: 'wrap', marginBottom: -verticalSize }),
+                ...style
+            }}
+      >
+        <SpaceContext.Provider value={{ horizontalSize, verticalSize, latestIndex }}>
+          {nodes}
+        </SpaceContext.Provider>
+      </div>
+    )
+}
+
+export default Space;