From 65298635d7fe9f8b20a04281f51a78e71c6cf82a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A8=80=E8=82=86?= <18x@loacg.com> Date: Wed, 12 Aug 2020 18:22:21 +0800 Subject: [PATCH] feat: add component Space (#2669) --- components/index.js | 3 + .../__tests__/__snapshots__/demo.test.js.snap | 291 ++++++++++++++++++ .../__snapshots__/index.test.js.snap | 9 + components/space/__tests__/demo.test.js | 3 + components/space/__tests__/index.test.js | 77 +++++ components/space/index.jsx | 89 ++++++ components/space/style/index.js | 2 + components/space/style/index.less | 28 ++ components/style.js | 1 + 9 files changed, 503 insertions(+) create mode 100644 components/space/__tests__/__snapshots__/demo.test.js.snap create mode 100644 components/space/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/space/__tests__/demo.test.js create mode 100644 components/space/__tests__/index.test.js create mode 100644 components/space/index.jsx create mode 100644 components/space/style/index.js create mode 100644 components/space/style/index.less diff --git a/components/index.js b/components/index.js index 226826aaa..57ec362a3 100644 --- a/components/index.js +++ b/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 { diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..0650f384f --- /dev/null +++ b/components/space/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,291 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./antdv-demo/docs/space/demo/403.md correctly 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
403
+
Sorry, you are not authorized to access this page.
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/404.md correctly 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
404
+
Sorry, the page you visited does not exist.
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/500.md correctly 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
500
+
Sorry, the server is wrong.
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/customIcon.md correctly 1`] = ` +
+
+
Great, we have done all the operations!
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/error.md correctly 1`] = ` +
+
+
Submission Failed
+
Please check and modify the following information before resubmitting.
+
+
+

The content you submitted has the following error:

+

Your account has been frozen + Thaw immediately >

+

Your account is not yet eligible to + apply Apply Unlock >

+
+
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/info.md correctly 1`] = ` +
+
+
Your operation has been executed
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/success.md correctly 1`] = ` +
+
+
Successfully Purchased Cloud Server ECS!
+
Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
+
+
+`; + +exports[`renders ./antdv-demo/docs/space/demo/warning.md correctly 1`] = ` +
+
+
There are some problems with your operation.
+
+
+`; diff --git a/components/space/__tests__/__snapshots__/index.test.js.snap b/components/space/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..206475628 --- /dev/null +++ b/components/space/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Space should render correct with children 1`] = ` +
+
text1
+
text1
+
text3
+
+`; diff --git a/components/space/__tests__/demo.test.js b/components/space/__tests__/demo.test.js new file mode 100644 index 000000000..3880234b2 --- /dev/null +++ b/components/space/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('space'); diff --git a/components/space/__tests__/index.test.js b/components/space/__tests__/index.test.js new file mode 100644 index 000000000..3bddfd070 --- /dev/null +++ b/components/space/__tests__/index.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 ; + }, + }); + expect(wrapper.html()).toBeUndefined(); + }); + + it('should render width customize size', () => { + const wrapper = mount({ + render() { + return ( + + 1 + 2 + + ); + }, + }); + 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 ( + + 1 + 2 + + ); + }, + }); + + 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 ( + + text1text1 + text3 + + ); + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); + }); + + it('should render with invalidElement', () => { + const wrapper = mount({ + render() { + return ( + + text1text1 + text1 + + ); + }, + }); + + expect(wrapper.findAll('.ant-space-item').length).toBe(3); + }); +}); diff --git a/components/space/index.jsx b/components/space/index.jsx new file mode 100644 index 000000000..15b5a33c6 --- /dev/null +++ b/components/space/index.jsx @@ -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 ( +
+ {items.map((child, i) => ( +
+ {child} +
+ ))} +
+ ); + }, +}; + +/* istanbul ignore next */ +Space.install = function(Vue) { + Vue.component(Space.name, Space); +}; +export default Space; diff --git a/components/space/style/index.js b/components/space/style/index.js new file mode 100644 index 000000000..3a3ab0de5 --- /dev/null +++ b/components/space/style/index.js @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/space/style/index.less b/components/space/style/index.less new file mode 100644 index 000000000..953c75d0b --- /dev/null +++ b/components/space/style/index.less @@ -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'; diff --git a/components/style.js b/components/style.js index acf4fc160..55e1270ea 100644 --- a/components/style.js +++ b/components/style.js @@ -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';