feat: add component Space (#2669)

Author: sendya

components/index.js

@@ -146,6 +146,7 @@ import { default as Result } from './result';
 
 import { default as Descriptions } from './descriptions';
 import { default as PageHeader } from './page-header';
+import { default as Space } from './space';
 
 const components = [
   Base,
@@ -211,6 +212,7 @@ const components = [
   Result,
   Descriptions,
   PageHeader,
+  Space,
 ];
 
 const install = function(Vue) {
@@ -301,6 +303,7 @@ export {
   Result,
   Descriptions,
   PageHeader,
+  Space,
 };
 
 export default {

components/space/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Space should render correct with children 1`] = `
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;">text1</div>
+  <div class="ant-space-item" style="margin-right: 8px;"><span>text1</span></div>
+  <div class="ant-space-item">text3</div>
+</div>
+`;

components/space/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('space');

components/space/__tests__/demo.test.js

@@ -0,0 +1,77 @@
+import { mount } from '@vue/test-utils';
+import Space from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Space', () => {
+  mountTest(Space);
+
+  it('should render width empty children', () => {
+    const wrapper = mount({
+      render() {
+        return <Space />;
+      },
+    });
+    expect(wrapper.html()).toBeUndefined();
+  });
+
+  it('should render width customize size', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Space size={10}>
+            <span>1</span>
+            <span>2</span>
+          </Space>
+        );
+      },
+    });
+    expect(wrapper.findAll('.ant-space-item').at(0).element.style.marginRight).toBe('10px');
+    expect(wrapper.findAll('.ant-space-item').at(1).element.style.marginRight).toBeFalsy();
+  });
+
+  it('should render vertical space width customize size', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Space size={10} direction="vertical">
+            <span>1</span>
+            <span>2</span>
+          </Space>
+        );
+      },
+    });
+
+    expect(wrapper.findAll('.ant-space-item').at(0).element.style.marginBottom).toBe('10px');
+    expect(wrapper.findAll('.ant-space-item').at(1).element.style.marginBottom).toBeFalsy();
+  });
+
+  it('should render correct with children', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Space>
+            text1<span>text1</span>
+            text3
+          </Space>
+        );
+      },
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render with invalidElement', () => {
+    const wrapper = mount({
+      render() {
+        return (
+          <Space>
+            text1<span>text1</span>
+            text1
+          </Space>
+        );
+      },
+    });
+
+    expect(wrapper.findAll('.ant-space-item').length).toBe(3);
+  });
+});

components/space/__tests__/index.test.js

@@ -0,0 +1,89 @@
+import PropTypes from '../_util/vue-types';
+import { filterEmpty, initDefaultProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
+
+export const SpaceSizeType = PropTypes.oneOfType([
+  PropTypes.number,
+  PropTypes.oneOf(['small', 'middle', 'large']),
+]);
+
+const spaceSize = {
+  small: 8,
+  middle: 16,
+  large: 24,
+};
+
+export const SpaceProps = {
+  prefixCls: PropTypes.string,
+  size: SpaceSizeType,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  align: PropTypes.oneOf(['start', 'end', 'center', 'baseline']),
+};
+
+const Space = {
+  functional: true,
+  name: 'ASpace',
+  props: initDefaultProps(SpaceProps, {
+    size: 'small',
+    direction: 'horizontal',
+  }),
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  render(h, content) {
+    const {
+      prefixCls: customizePrefixCls,
+      injections: { configProvider },
+      children,
+    } = content;
+    const { align, size, direction } = content.props;
+
+    const getPrefixCls = configProvider.getPrefixCls;
+    const prefixCls = getPrefixCls('space', customizePrefixCls);
+    const items = filterEmpty(children);
+    const len = items.length;
+
+    if (len === 0) {
+      return null;
+    }
+
+    const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
+
+    const someSpaceClass = {
+      [prefixCls]: true,
+      [`${prefixCls}-${direction}`]: true,
+      // [`${prefixCls}-rtl`]: directionConfig === 'rtl',
+      [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
+    };
+
+    const itemClassName = `${prefixCls}-item`;
+    const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
+
+    return (
+      <div class={someSpaceClass}>
+        {items.map((child, i) => (
+          <div
+            class={itemClassName}
+            key={`${itemClassName}-${i}`}
+            style={
+              i === len - 1
+                ? {}
+                : {
+                    [direction === 'vertical' ? 'marginBottom' : marginDirection]:
+                      typeof size === 'string' ? `${spaceSize[size]}px` : `${size}px`,
+                  }
+            }
+          >
+            {child}
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+/* istanbul ignore next */
+Space.install = function(Vue) {
+  Vue.component(Space.name, Space);
+};
+export default Space;

components/space/index.jsx

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/space/style/index.js

@@ -0,0 +1,28 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@space-prefix-cls: ~'@{ant-prefix}-space';
+
+.@{space-prefix-cls} {
+  display: inline-flex;
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+}
+
+// @import './rtl';

components/space/style/index.less

@@ -60,4 +60,5 @@ import './result/style';
 import './descriptions/style';
 import './page-header/style';
 import './form-model/style';
+import './space/style';
 // import './color-picker/style';