feat: Space add split (#26948)

* feat: Space add split * Update index.en-US.md * changed * improve * improve * Update demo.test.js.snap * Update vertical-split.md * Update demo.test.js.snap * remove vertical-split * Update demo.test.js.snap
4 years ago · 2eec689d74
8 changed files with 160 additions and 17 deletions
--- a/components/space/Item.tsx
+++ b/components/space/Item.tsx
@ -15,6 +15,7 @@ export interface ItemProps {
  direction?: 'horizontal' | 'vertical';
  size?: SizeType | number;
  marginDirection: 'marginLeft' | 'marginRight';
+  split?: string | React.ReactNode;
 }

 export default function Item({
@ -24,6 +25,7 @@ export default function Item({
  size,
  marginDirection,
  children,
+  split,
 }: ItemProps) {
  const latestIndex = React.useContext(LastIndexContext);

@ -31,19 +33,24 @@ export default function Item({
    return null;
  }

+  const style =
+    index >= latestIndex
+      ? {}
+      : {
+          [direction === 'vertical' ? 'marginBottom' : marginDirection]:
+            ((typeof size === 'string' ? spaceSize[size] : size) ?? 0) / (split ? 2 : 1),
+        };
+
  return (
-    <div
-      className={className}
-      style={
-        index >= latestIndex
-          ? {}
-          : {
-              [direction === 'vertical' ? 'marginBottom' : marginDirection]:
-                typeof size === 'string' ? spaceSize[size] : size,
-            }
-      }
-    >
-      {children}
-    </div>
+    <>
+      <div className={className} style={style}>
+        {children}
+      </div>
+      {index < latestIndex && split && (
+        <span className={`${className}-split`} style={style}>
+          {split}
+        </span>
+      )}
+    </>
  );
 }
--- a/components/space/tests/snapshots/demo.test.js.snap
+++ b/components/space/tests/snapshots/demo.test.js.snap
@ -533,6 +533,60 @@ Array [
 ]
 `;

+exports[`renders ./components/space/demo/split.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    <a
+      class="ant-typography"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    <a
+      class="ant-typography"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography"
+    >
+      Link
+    </a>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
--- a/components/space/tests/snapshots/index.test.js.snap
+++ b/components/space/tests/snapshots/index.test.js.snap
@ -87,3 +87,41 @@ Array [
  </div>,
 ]
 `;
+
+exports[`Space split 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    text1
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    -
+  </span>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    <span>
+      text1
+    </span>
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    -
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    text3
+  </div>
+</div>
+`;
--- a/components/space/tests/index.test.js
+++ b/components/space/tests/index.test.js
@ -125,4 +125,15 @@ describe('Space', () => {

    expect(wrapper.find('#demo').text()).toBe('2');
  });
+
+  it('split', () => {
+    const wrapper = mount(
+      <Space split="-">
+        text1<span>text1</span>
+        <>text3</>
+      </Space>,
+    );
+
+    expect(render(wrapper)).toMatchSnapshot();
+  });
 });
--- a/components/space/demo/split.md
+++ b/components/space/demo/split.md
@ -0,0 +1,30 @@
+---
+order: 99
+title:
+  zh-CN: 分隔符
+  en-US: Split
+---
+
+## zh-CN
+
+相邻组件分隔符。
+
+## en-US
+
+Crowded components split.
+
+```jsx
+import { Space, Typography, Divider } from 'antd';
+
+function SpaceSplit() {
+  return (
+    <Space split={<Divider type="vertical" />}>
+      <Typography.Link>Link</Typography.Link>
+      <Typography.Link>Link</Typography.Link>
+      <Typography.Link>Link</Typography.Link>
+    </Space>
+  );
+}
+
+ReactDOM.render(<SpaceSplit />, mountNode);
+```
--- a/components/space/index.en-US.md
+++ b/components/space/index.en-US.md
@ -19,3 +19,4 @@ Avoid components clinging together and set a unified space.
 | align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
 | direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | The space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
+| split | Set split | ReactNode | - | 4.7.0 |
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
-import { ConfigConsumerProps, ConfigContext } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { SizeType } from '../config-provider/SizeContext';
 import Item from './Item';

@ -15,12 +15,11 @@ export interface SpaceProps {
  direction?: 'horizontal' | 'vertical';
  // No `stretch` since many components do not support that.
  align?: 'start' | 'end' | 'center' | 'baseline';
+  split?: React.ReactNode;
 }

 const Space: React.FC<SpaceProps> = props => {
-  const { getPrefixCls, space, direction: directionConfig }: ConfigConsumerProps = React.useContext(
-    ConfigContext,
-  );
+  const { getPrefixCls, space, direction: directionConfig } = React.useContext(ConfigContext);

  const {
    size = space?.size || 'small',
@ -29,6 +28,7 @@ const Space: React.FC<SpaceProps> = props => {
    children,
    direction = 'horizontal',
    prefixCls: customizePrefixCls,
+    split,
    ...otherProps
  } = props;

@ -70,6 +70,7 @@ const Space: React.FC<SpaceProps> = props => {
        size={size}
        index={i}
        marginDirection={marginDirection}
+        split={split}
      >
        {child}
      </Item>
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@ -23,3 +23,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
 | align     | 对齐方式 | `start` \| `end` \|`center` \|`baseline`   | -            | 4.2.0 |
 | direction | 间距方向 | `vertical` \| `horizontal`                 | `horizontal` | 4.1.0 |
 | size      | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small`      | 4.1.0 |
+| split     | 设置拆分 | ReactNode                                  | -            | 4.7.0 |