2019-01-12 11:33:27 +08:00
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { getOptionProps } from '../_util/props-util';
|
2018-04-20 12:52:31 +08:00
|
|
|
|
|
|
|
export const BasicProps = {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
hasSider: PropTypes.boolean,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
function generator(props, name) {
|
|
|
|
return BasicComponent => {
|
2018-04-20 12:52:31 +08:00
|
|
|
return {
|
|
|
|
name,
|
|
|
|
props: BasicComponent.props,
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
const { prefixCls } = props;
|
2018-04-20 12:52:31 +08:00
|
|
|
const basicComponentProps = {
|
|
|
|
props: {
|
|
|
|
prefixCls,
|
|
|
|
...getOptionProps(this),
|
|
|
|
},
|
|
|
|
on: this.$listeners,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
return <BasicComponent {...basicComponentProps}>{this.$slots.default}</BasicComponent>;
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
};
|
2018-04-20 12:52:31 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const Basic = {
|
|
|
|
props: BasicProps,
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
const { prefixCls, $slots, $listeners } = this;
|
2018-04-20 12:52:31 +08:00
|
|
|
const divProps = {
|
|
|
|
class: prefixCls,
|
|
|
|
on: $listeners,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
return <div {...divProps}>{$slots.default}</div>;
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-04-20 12:52:31 +08:00
|
|
|
|
|
|
|
const BasicLayout = {
|
|
|
|
props: BasicProps,
|
2019-01-12 11:33:27 +08:00
|
|
|
data() {
|
2018-04-20 12:52:31 +08:00
|
|
|
return {
|
|
|
|
siders: [],
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
provide() {
|
2018-04-20 12:52:31 +08:00
|
|
|
return {
|
|
|
|
siderHook: {
|
2019-01-12 11:33:27 +08:00
|
|
|
addSider: id => {
|
|
|
|
this.siders = [...this.siders, id];
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
removeSider: id => {
|
|
|
|
this.siders = this.siders.filter(currentId => currentId !== id);
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
const { prefixCls, $slots, hasSider, $listeners } = this;
|
2018-04-20 12:52:31 +08:00
|
|
|
const divCls = classNames(prefixCls, {
|
|
|
|
[`${prefixCls}-has-sider`]: hasSider || this.siders.length > 0,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-04-20 12:52:31 +08:00
|
|
|
const divProps = {
|
|
|
|
class: divCls,
|
|
|
|
on: $listeners,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
return <div {...divProps}>{$slots.default}</div>;
|
2018-04-20 12:52:31 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const Layout = generator(
|
|
|
|
{
|
|
|
|
prefixCls: 'ant-layout',
|
|
|
|
},
|
|
|
|
'ALayout',
|
|
|
|
)(BasicLayout);
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const Header = generator(
|
|
|
|
{
|
|
|
|
prefixCls: 'ant-layout-header',
|
|
|
|
},
|
|
|
|
'ALayoutHeader',
|
|
|
|
)(Basic);
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const Footer = generator(
|
|
|
|
{
|
|
|
|
prefixCls: 'ant-layout-footer',
|
|
|
|
},
|
|
|
|
'ALayoutFooter',
|
|
|
|
)(Basic);
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const Content = generator(
|
|
|
|
{
|
|
|
|
prefixCls: 'ant-layout-content',
|
|
|
|
},
|
|
|
|
'ALayoutContent',
|
|
|
|
)(Basic);
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
Layout.Header = Header;
|
|
|
|
Layout.Footer = Footer;
|
|
|
|
Layout.Content = Content;
|
2018-04-20 12:52:31 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
export default Layout;
|