import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import { SiderProps } from './Sider'; export interface BasicProps extends React.HTMLAttributes { prefixCls?: string; hasSider?: boolean; } function generator(props: BasicProps) { return (BasicComponent: React.ComponentClass): any => { return class Adapter extends React.Component { static Header: any; static Footer: any; static Content: any; static Sider: any; render() { const { prefixCls } = props; return ; } }; }; } class Basic extends React.Component { render() { const { prefixCls, className, children, ...others } = this.props; const divCls = classNames(className, prefixCls); return (
{children}
); } } class BasicLayout extends React.Component { static childContextTypes = { siderHook: PropTypes.object, }; state = { siders: [] }; getChildContext() { return { siderHook: { addSider: (id: string) => { this.setState({ siders: [...this.state.siders, id], }); }, removeSider: (id: string) => { this.setState({ siders: this.state.siders.filter(currentId => currentId !== id), }); }, }, }; } render() { const { prefixCls, className, children, hasSider, ...others } = this.props; const divCls = classNames(className, prefixCls, { [`${prefixCls}-has-sider`]: hasSider || this.state.siders.length > 0, }); return (
{children}
); } } const Layout: React.ComponentClass & { Header: React.ComponentClass; Footer: React.ComponentClass; Content: React.ComponentClass; Sider: React.ComponentClass; } = generator({ prefixCls: 'ant-layout', })(BasicLayout); const Header = generator({ prefixCls: 'ant-layout-header', })(Basic); const Footer = generator({ prefixCls: 'ant-layout-footer', })(Basic); const Content = generator({ prefixCls: 'ant-layout-content', })(Basic); Layout.Header = Header; Layout.Footer = Footer; Layout.Content = Content; export default Layout;