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