From 2b5d587a00f0d1aae7020f4fa93971ae7de1e16a Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 12 Aug 2020 22:08:06 +0800 Subject: [PATCH] feat: space support vue3 --- antdv-demo | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 414 ++++++++++++++++++ .../__snapshots__/index.test.js.snap | 2 + components/space/__tests__/index.test.js | 10 +- components/space/index.jsx | 104 ++--- examples/App.vue | 2 +- 6 files changed, 470 insertions(+), 64 deletions(-) diff --git a/antdv-demo b/antdv-demo index 747488ec6..c0e98550d 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 747488ec6b7df7cb3f7fd2a3c15c16e4368a79ec +Subproject commit c0e98550d636c6b056ad1df07f4cdc446675d22e diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap index 1f0baf35a..560ce8768 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap @@ -612,6 +612,420 @@ exports[`renders ./antdv-demo/docs/calendar/demo/card.md correctly 1`] = ` `; +exports[`renders ./antdv-demo/docs/calendar/demo/customize-header.md correctly 1`] = ` +
+
+
+
Custom header
+
+
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SuMoTuWeThFrSa
+
+
30
+
+ +
+
+ 		+
+
31
+
+ +
+
+ 		+
+
01
+
+ +
+
+ 		+
+
02
+
+ +
+
+ 		+
+
03
+
+ +
+
+ 		+
+
04
+
+ +
+
+ 		+
+
05
+
+ +
+
+
+
+
06
+
+ +
+
+ 		+
+
07
+
+ +
+
+ 		+
+
08
+
+ +
+
+ 		+
+
09
+
+ +
+
+ 		+
+
10
+
+ +
+
+ 		+
+
11
+
+ +
+
+ 		+
+
12
+
+ +
+
+
+
+
13
+
+ +
+
+ 		+
+
14
+
+ +
+
+ 		+
+
15
+
+ +
+
+ 		+
+
16
+
+ +
+
+ 		+
+
17
+
+ +
+
+ 		+
+
18
+
+ +
+
+ 		+
+
19
+
+ +
+
+
+
+
20
+
+ +
+
+ 		+
+
21
+
+ +
+
+ 		+
+
22
+
+ +
+
+ 		+
+
23
+
+ +
+
+ 		+
+
24
+
+ +
+
+ 		+
+
25
+
+ +
+
+ 		+
+
26
+
+ +
+
+
+
+
27
+
+ +
+
+ 		+
+
28
+
+ +
+
+ 		+
+
29
+
+ +
+
+ 		+
+
30
+
+ +
+
+ 		+
+
01
+
+ +
+
+ 		+
+
02
+
+ +
+
+ 		+
+
03
+
+ +
+
+
+
+
04
+
+ +
+
+ 		+
+
05
+
+ +
+
+ 		+
+
06
+
+ +
+
+ 		+
+
07
+
+ +
+
+ 		+
+
08
+
+ +
+
+ 		+
+
09
+
+ +
+
+ 		+
+
10
+
+ +
+
+
+
+
+
+
+`; + exports[`renders ./antdv-demo/docs/calendar/demo/notice-calendar.md correctly 1`] = `
diff --git a/components/space/__tests__/__snapshots__/index.test.js.snap b/components/space/__tests__/__snapshots__/index.test.js.snap index 206475628..285159adb 100644 --- a/components/space/__tests__/__snapshots__/index.test.js.snap +++ b/components/space/__tests__/__snapshots__/index.test.js.snap @@ -7,3 +7,5 @@ exports[`Space should render correct with children 1`] = `
text3
`; + +exports[`Space should render width empty children 1`] = ``; diff --git a/components/space/__tests__/index.test.js b/components/space/__tests__/index.test.js index 3bddfd070..43ee978db 100644 --- a/components/space/__tests__/index.test.js +++ b/components/space/__tests__/index.test.js @@ -11,7 +11,7 @@ describe('Space', () => { return ; }, }); - expect(wrapper.html()).toBeUndefined(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should render width customize size', () => { @@ -25,8 +25,8 @@ describe('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(); + expect(wrapper.findAll('.ant-space-item')[0].element.style.marginRight).toBe('10px'); + expect(wrapper.findAll('.ant-space-item')[1].element.style.marginRight).toBeFalsy(); }); it('should render vertical space width customize size', () => { @@ -41,8 +41,8 @@ describe('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(); + expect(wrapper.findAll('.ant-space-item')[0].element.style.marginBottom).toBe('10px'); + expect(wrapper.findAll('.ant-space-item')[1].element.style.marginBottom).toBeFalsy(); }); it('should render correct with children', () => { diff --git a/components/space/index.jsx b/components/space/index.jsx index 15b5a33c6..914c3cfe0 100644 --- a/components/space/index.jsx +++ b/components/space/index.jsx @@ -1,3 +1,4 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; import { filterEmpty, initDefaultProps } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; @@ -20,70 +21,59 @@ export const SpaceProps = { 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 ASpace = (props, { slots }) => { + const configProvider = inject('configProvider', ConfigConsumerProps); + const { align, size, direction, prefixCls: customizePrefixCls } = props; - const getPrefixCls = configProvider.getPrefixCls; - const prefixCls = getPrefixCls('space', customizePrefixCls); - const items = filterEmpty(children); - const len = items.length; + const getPrefixCls = configProvider.getPrefixCls; + const prefixCls = getPrefixCls('space', customizePrefixCls); + const items = filterEmpty(slots.default && slots.default()); + const len = items.length; - if (len === 0) { - return null; - } + if (len === 0) { + return null; + } - const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align; + const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align; - const someSpaceClass = { - [prefixCls]: true, - [`${prefixCls}-${direction}`]: true, - // [`${prefixCls}-rtl`]: directionConfig === 'rtl', - [`${prefixCls}-align-${mergedAlign}`]: mergedAlign, - }; + 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'; + const itemClassName = `${prefixCls}-item`; + const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight'; - return ( -
- {items.map((child, i) => ( -
- {child} -
- ))} -
- ); - }, + return ( +
+ {items.map((child, i) => ( +
+ {child} +
+ ))} +
+ ); }; +ASpace.props = initDefaultProps(SpaceProps, { + size: 'small', + direction: 'horizontal', +}); /* istanbul ignore next */ -Space.install = function(Vue) { - Vue.component(Space.name, Space); +ASpace.install = function(app) { + app.component(ASpace.name, ASpace); }; -export default Space; +export default ASpace; diff --git a/examples/App.vue b/examples/App.vue index 68b390d2e..a47ee6538 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -4,7 +4,7 @@