Skip to content

Commit 85fcb13

Browse files
tangjinzhoutangjinzhou
committed
fix: layout provide not work
1 parent a19bece commit 85fcb13

File tree

5 files changed

+91
-77
lines changed

5 files changed

+91
-77
lines changed

‎antdv-demo

‎components/layout/Sider.jsx

+22-9
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ConfigConsumerProps } from '../config-provider';
1414
import BarsOutlined from '@ant-design/icons-vue/BarsOutlined';
1515
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
1616
import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
17+
import omit from 'omit.js';
1718

1819
// matchMedia polyfill for
1920
// https://github.com/WickyNilliams/enquire.js/issues/82
@@ -53,6 +54,9 @@ export const SiderProps = {
5354
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
5455
breakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
5556
theme: PropTypes.oneOf(['light', 'dark']).def('dark'),
57+
onBreakpoint: PropTypes.func,
58+
onCollapse: PropTypes.func,
59+
'onUpdate:collapse': PropTypes.func,
5660
};
5761

5862
// export interface SiderState {
@@ -177,16 +181,29 @@ export default {
177181
render() {
178182
const {
179183
prefixCls: customizePrefixCls,
184+
class: className,
180185
theme,
181186
collapsible,
182187
reverseArrow,
188+
style,
183189
width,
184190
collapsedWidth,
185191
zeroWidthTriggerStyle,
186-
} = getOptionProps(this);
192+
...others
193+
} = { ...getOptionProps(this), ...this.$attrs };
187194
const getPrefixCls = this.configProvider.getPrefixCls;
188195
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
189-
196+
const divProps = omit(others, [
197+
'collapsed',
198+
'defaultCollapsed',
199+
'onCollapse',
200+
'breakpoint',
201+
'onBreakpoint',
202+
'siderHook',
203+
'zeroWidthTriggerStyle',
204+
'trigger',
205+
'onUpdate:collapse',
206+
]);
190207
const trigger = getComponent(this, 'trigger');
191208
const rawWidth = this.sCollapsed ? collapsedWidth : width;
192209
// use "px" as fallback unit for width
@@ -219,24 +236,20 @@ export default {
219236
)
220237
: null;
221238
const divStyle = {
222-
// ...style,
239+
...style,
223240
flex: `0 0 ${siderWidth}`,
224241
maxWidth: siderWidth, // Fix width transition bug in IE11
225242
minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
226243
width: siderWidth,
227244
};
228-
const siderCls = classNames(prefixCls, `${prefixCls}-${theme}`, {
245+
const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
229246
[`${prefixCls}-collapsed`]: !!this.sCollapsed,
230247
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
231248
[`${prefixCls}-below`]: !!this.below,
232249
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
233250
});
234-
const divProps = {
235-
class: siderCls,
236-
style: divStyle,
237-
};
238251
return (
239-
<aside {...divProps}>
252+
<aside class={siderCls} {...divProps} style={divStyle}>
240253
<div class={`${prefixCls}-children`}>{getSlot(this)}</div>
241254
{collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
242255
</aside>

‎components/layout/__tests__/index.test.js

+50-47
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
11
import { mount } from '@vue/test-utils';
2-
import * as Vue from 'vue';
32
import Layout from '..';
43
import mountTest from '../../../tests/shared/mountTest';
4+
import { sleep } from '../../../tests/utils';
55

66
const { Sider, Content } = Layout;
77

88
describe('Layout', () => {
99
mountTest(Layout);
1010
mountTest(Content);
1111
mountTest(Sider);
12-
it('detect the sider as children', done => {
13-
const wrapper = mount({
14-
render() {
15-
return (
16-
<Layout>
17-
<Sider>Sider</Sider>
18-
<Content>Content</Content>
19-
</Layout>
20-
);
12+
it('detect the sider as children', async () => {
13+
const wrapper = mount(
14+
{
15+
render() {
16+
return (
17+
<Layout>
18+
<Sider>Sider</Sider>
19+
<Content>Content</Content>
20+
</Layout>
21+
);
22+
},
2123
},
22-
});
23-
Vue.nextTick(() => {
24-
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
25-
done();
26-
});
24+
{ sync: false },
25+
);
26+
await sleep();
27+
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
2728
});
2829

29-
it('detect the sider inside the children', done => {
30-
const wrapper = mount({
31-
render() {
32-
return (
33-
<Layout>
34-
<div>
35-
<Sider>Sider</Sider>
36-
</div>
37-
<Content>Content</Content>
38-
</Layout>
39-
);
30+
it('detect the sider inside the children', async () => {
31+
const wrapper = mount(
32+
{
33+
render() {
34+
return (
35+
<Layout>
36+
<div>
37+
<Sider>Sider</Sider>
38+
</div>
39+
<Content>Content</Content>
40+
</Layout>
41+
);
42+
},
4043
},
41-
});
42-
Vue.nextTick(() => {
43-
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
44-
done();
45-
});
44+
{ sync: false },
45+
);
46+
await sleep();
47+
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
4648
});
4749

48-
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', done => {
49-
const wrapper = mount({
50-
render() {
51-
return (
52-
<Layout>
53-
<div>
54-
<Sider collapsible>Sider</Sider>
55-
</div>
56-
<Content>Content</Content>
57-
</Layout>
58-
);
50+
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
51+
const wrapper = mount(
52+
{
53+
render() {
54+
return (
55+
<Layout>
56+
<div>
57+
<Sider collapsible>Sider</Sider>
58+
</div>
59+
<Content>Content</Content>
60+
</Layout>
61+
);
62+
},
5963
},
60-
});
61-
Vue.nextTick(() => {
62-
expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
63-
done();
64-
});
64+
{ sync: false },
65+
);
66+
await sleep();
67+
expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
6568
});
6669
});

‎components/layout/layout.jsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { inject } from 'vue';
1+
import { inject, provide } from 'vue';
22
import PropTypes from '../_util/vue-types';
33
import classNames from 'classnames';
44
import { getOptionProps, getSlot } from '../_util/props-util';
@@ -54,17 +54,15 @@ const BasicLayout = {
5454
siders: [],
5555
};
5656
},
57-
provide() {
58-
return {
59-
siderHook: {
60-
addSider: id => {
61-
this.siders = [...this.siders, id];
62-
},
63-
removeSider: id => {
64-
this.siders = this.siders.filter(currentId => currentId !== id);
65-
},
57+
created() {
58+
provide('siderHook', {
59+
addSider: id => {
60+
this.siders = [...this.siders, id];
6661
},
67-
};
62+
removeSider: id => {
63+
this.siders = this.siders.filter(currentId => currentId !== id);
64+
},
65+
});
6866
},
6967
render() {
7068
const { prefixCls, hasSider, tagName: Tag } = this;

‎tests/setup.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ if (typeof window !== 'undefined') {
88
global.window.dispatchEvent(new Event('resize'));
99
};
1010
global.window.scrollTo = () => {};
11-
if (!window.matchMedia) {
12-
Object.defineProperty(global.window, 'matchMedia', {
13-
value: jest.fn(query => ({
14-
matches: query.includes('max-width'),
15-
addListener: jest.fn(),
16-
removeListener: jest.fn(),
17-
})),
18-
});
19-
}
11+
// if (!window.matchMedia) {
12+
// Object.defineProperty(global.window, 'matchMedia', {
13+
// value: jest.fn(query => ({
14+
// matches: query.includes('max-width'),
15+
// addListener: jest.fn(),
16+
// removeListener: jest.fn(),
17+
// })),
18+
// });
19+
// }
2020
}
2121

2222
// The built-in requestAnimationFrame and cancelAnimationFrame not working with jest.runFakeTimes()

0 commit comments

Comments
 (0)