github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: layout provide not work

pull/2682/head
tanjinzhou 2020-07-31 18:19:50 +08:00
parent a19beced12
commit 85fcb138a2
5 changed files with 93 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit bda092900405709ab19219754c43d68975a143be
Subproject commit 549184a4fab38d9a234bc04e818ecc8b958ab4f4

31
components/layout/Sider.jsx
View File

@ -14,6 +14,7 @@ import { ConfigConsumerProps } from '../config-provider';
import BarsOutlined from '@ant-design/icons-vue/BarsOutlined';
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
import omit from 'omit.js';
// matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82
@ -53,6 +54,9 @@ export const SiderProps = {
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
breakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
theme: PropTypes.oneOf(['light', 'dark']).def('dark'),
onBreakpoint: PropTypes.func,
onCollapse: PropTypes.func,
'onUpdate:collapse': PropTypes.func,
};
// export interface SiderState {
@ -177,16 +181,29 @@ export default {
render() {
const {
prefixCls: customizePrefixCls,
class: className,
theme,
collapsible,
reverseArrow,
style,
width,
collapsedWidth,
zeroWidthTriggerStyle,
} = getOptionProps(this);
...others
} = { ...getOptionProps(this), ...this.$attrs };
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
const divProps = omit(others, [
'collapsed',
'defaultCollapsed',
'onCollapse',
'breakpoint',
'onBreakpoint',
'siderHook',
'zeroWidthTriggerStyle',
'trigger',
'onUpdate:collapse',
]);
const trigger = getComponent(this, 'trigger');
const rawWidth = this.sCollapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
@ -219,24 +236,20 @@ export default {
)
: null;
const divStyle = {
// ...style,
...style,
flex: `0 0 ${siderWidth}`,
maxWidth: siderWidth, // Fix width transition bug in IE11
minWidth: siderWidth, // https://github.com/ant-design/ant-design/issues/6349
width: siderWidth,
};
const siderCls = classNames(prefixCls, `${prefixCls}-${theme}`, {
const siderCls = classNames(className, prefixCls, `${prefixCls}-${theme}`, {
[`${prefixCls}-collapsed`]: !!this.sCollapsed,
[`${prefixCls}-has-trigger`]: collapsible && trigger !== null && !zeroWidthTrigger,
[`${prefixCls}-below`]: !!this.below,
[`${prefixCls}-zero-width`]: parseFloat(siderWidth) === 0,
});
const divProps = {
class: siderCls,
style: divStyle,
};
return (
<aside {...divProps}>
<aside class={siderCls} {...divProps} style={divStyle}>
<div class={`${prefixCls}-children`}>{getSlot(this)}</div>
{collapsible || (this.below && zeroWidthTrigger) ? triggerDom : null}
</aside>

101
components/layout/__tests__/index.test.js
View File

@ -1,7 +1,7 @@
import { mount } from '@vue/test-utils';
import * as Vue from 'vue';
import Layout from '..';
import mountTest from '../../../tests/shared/mountTest';
import { sleep } from '../../../tests/utils';
const { Sider, Content } = Layout;
@ -9,58 +9,61 @@ describe('Layout', () => {
mountTest(Layout);
mountTest(Content);
mountTest(Sider);
it('detect the sider as children', done => {
const wrapper = mount({
render() {
return (
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
</Layout>
);
},
});
Vue.nextTick(() => {
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
done();
});
});
it('detect the sider inside the children', done => {
const wrapper = mount({
render() {
return (
<Layout>
<div>
it('detect the sider as children', async () => {
const wrapper = mount(
{
render() {
return (
<Layout>
<Sider>Sider</Sider>
</div>
<Content>Content</Content>
</Layout>
);
<Content>Content</Content>
</Layout>
);
},
},
});
Vue.nextTick(() => {
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
done();
});
{ sync: false },
);
await sleep();
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
});
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', done => {
const wrapper = mount({
render() {
return (
<Layout>
<div>
<Sider collapsible>Sider</Sider>
</div>
<Content>Content</Content>
</Layout>
);
it('detect the sider inside the children', async () => {
const wrapper = mount(
{
render() {
return (
<Layout>
<div>
<Sider>Sider</Sider>
</div>
<Content>Content</Content>
</Layout>
);
},
},
});
Vue.nextTick(() => {
expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
done();
});
{ sync: false },
);
await sleep();
expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
});
it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', async () => {
const wrapper = mount(
{
render() {
return (
<Layout>
<div>
<Sider collapsible>Sider</Sider>
</div>
<Content>Content</Content>
</Layout>
);
},
},
{ sync: false },
);
await sleep();
expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
});
});

20
components/layout/layout.jsx
View File

@ -1,4 +1,4 @@
import { inject } from 'vue';
import { inject, provide } from 'vue';
import PropTypes from '../_util/vue-types';
import classNames from 'classnames';
import { getOptionProps, getSlot } from '../_util/props-util';
@ -54,17 +54,15 @@ const BasicLayout = {
siders: [],
};
},
provide() {
return {
siderHook: {
addSider: id => {
this.siders = [...this.siders, id];
},
removeSider: id => {
this.siders = this.siders.filter(currentId => currentId !== id);
},
created() {
provide('siderHook', {
addSider: id => {
this.siders = [...this.siders, id];
},
};
removeSider: id => {
this.siders = this.siders.filter(currentId => currentId !== id);
},
});
},
render() {
const { prefixCls, hasSider, tagName: Tag } = this;

18
tests/setup.js
View File

@ -8,15 +8,15 @@ if (typeof window !== 'undefined') {
global.window.dispatchEvent(new Event('resize'));
};
global.window.scrollTo = () => {};
if (!window.matchMedia) {
Object.defineProperty(global.window, 'matchMedia', {
value: jest.fn(query => ({
matches: query.includes('max-width'),
addListener: jest.fn(),
removeListener: jest.fn(),
})),
});
}
// if (!window.matchMedia) {
// Object.defineProperty(global.window, 'matchMedia', {
// value: jest.fn(query => ({
// matches: query.includes('max-width'),
// addListener: jest.fn(),
// removeListener: jest.fn(),
// })),
// });
// }
}
// The built-in requestAnimationFrame and cancelAnimationFrame not working with jest.runFakeTimes()