fix Layout style (#4506)

* fix #4459

* improve

components/layout/Sider.tsx

@@ -25,6 +25,7 @@ export default class Sider extends React.Component<SiderProps, any> {
     width: 200,
     collapsedWidth: 64,
     style: {},
+    name: 'Sider',
   };
 
   constructor(props) {
@@ -70,7 +71,7 @@ export default class Sider extends React.Component<SiderProps, any> {
       prefixCls, className, collapsible, trigger, style, width, collapsedWidth,
       ...others,
     } = this.props;
-    const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse']);
+    const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'name']);
     const siderCls = classNames(className, prefixCls, {
       [`${prefixCls}-collapsed`]: !!this.state.collapsed,
       [`${prefixCls}-has-trigger`]: !!trigger,

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -22,7 +22,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
       Header
     </div>
     <div
-      class="ant-layout">
+      class="ant-layout ant-layout-has-sider">
       <div
         class="ant-layout-sider"
         style="flex:0 0 200px;">
@@ -45,7 +45,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
       Header
     </div>
     <div
-      class="ant-layout">
+      class="ant-layout ant-layout-has-sider">
       <div
         class="ant-layout-content">
         Content
@@ -62,7 +62,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-layout">
+    class="ant-layout ant-layout-has-sider">
     <div
       class="ant-layout-sider"
       style="flex:0 0 200px;">
@@ -89,7 +89,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
 
 exports[`test renders ./components/layout/demo/custom-trigger.md correctly 1`] = `
 <div
-  class="ant-layout">
+  class="ant-layout ant-layout-has-sider">
   <div
     class="ant-layout-sider"
     style="flex:0 0 200px;">
@@ -157,7 +157,7 @@ exports[`test renders ./components/layout/demo/custom-trigger.md correctly 1`] =
 
 exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
 <div
-  class="ant-layout">
+  class="ant-layout ant-layout-has-sider">
   <div
     class="ant-layout-sider"
     style="flex:0 0 200px;">
@@ -457,7 +457,7 @@ exports[`test renders ./components/layout/demo/top-side.md correctly 1`] = `
       </span>
     </div>
     <div
-      class="ant-layout"
+      class="ant-layout ant-layout-has-sider"
       style="padding:24px 0;background:#fff;">
       <div
         class="ant-layout-sider"

components/layout/layout.tsx

@@ -5,6 +5,7 @@ export interface BasicProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
+  name: string;
 }
 
 function generator(props) {
@@ -16,7 +17,7 @@ function generator(props) {
       static Sider: any;
       render() {
         const { prefixCls } = props;
-        return <Basic prefixCls={prefixCls} {...this.props}/>;
+        return <Basic prefixCls={prefixCls} name={props.name} {...this.props}/>;
       }
     };
   };
@@ -24,28 +25,42 @@ function generator(props) {
 
 class Basic extends React.Component<BasicProps, any> {
   render() {
-    const { prefixCls, className, ...others } = this.props;
-    const divCls = classNames(className, prefixCls);
+    const { prefixCls, className, children, name, ...others } = this.props;
+    let hasSider;
+    if (name === 'Layout') {
+      React.Children.forEach(children, (ele: React.ReactElement<any>) => {
+        if (ele && ele.props && ele.props.name === 'Sider') {
+          hasSider = true;
+        }
+      });
+    }
+    const divCls = classNames(className, prefixCls, {
+      [`${prefixCls}-has-sider`]: hasSider,
+    });
     return (
-      <div className={divCls} {...others} />
+      <div className={divCls} {...others}>{children}</div>
     );
   }
 }
 
 const Layout = generator({
   prefixCls: 'ant-layout',
+  name: 'Layout',
 })(Basic);
 
 const Header = generator({
   prefixCls: 'ant-layout-header',
+  name: 'Header',
 })(Basic);
 
 const Footer = generator({
   prefixCls: 'ant-layout-footer',
+  name: 'Footer',
 })(Basic);
 
 const Content = generator({
   prefixCls: 'ant-layout-content',
+  name: 'Content',
 })(Basic);
 
 Layout.Header = Header;

components/layout/style/index.less

@@ -5,14 +5,18 @@
 
 .@{layout-prefix-cls} {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   flex: auto;
   overflow: auto;
   background: @layout-body-background;
 
+  &&-has-sider {
+    flex-direction: row;
+  }
+
   &-header,
   &-footer {
-    flex: 1 0 100%;
+    flex: 0 0 auto;
   }
 
   &-header {