change detect type of Layout.Sider (#5036)

* save

* change detect type of Layout.Sider

components/layout/Sider.tsx

@@ -18,6 +18,7 @@ export interface SiderProps {
 }
 
 export default class Sider extends React.Component<SiderProps, any> {
+  static __ANT_LAYOUT_SIDER: any = true;
 
   static defaultProps = {
     prefixCls: 'ant-layout-sider',
@@ -27,7 +28,6 @@ export default class Sider extends React.Component<SiderProps, any> {
     width: 200,
     collapsedWidth: 64,
     style: {},
-    name: 'Sider',
   };
 
   constructor(props) {
@@ -73,7 +73,7 @@ export default class Sider extends React.Component<SiderProps, any> {
       prefixCls, className, collapsible, reverseArrow, trigger, style, width, collapsedWidth,
       ...others,
     } = this.props;
-    const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'name']);
+    const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse']);
     const siderCls = classNames(className, prefixCls, {
       [`${prefixCls}-collapsed`]: !!this.state.collapsed,
       [`${prefixCls}-has-trigger`]: !!trigger,

components/layout/index.en-US.md

@@ -57,3 +57,12 @@ width | width of the sidebar | number\|string | 200
 collapsedWidth | width of the collapsed sidebar, available only `collapsible: true` | number | 64
 style | to custom the styles | object | -
 className | container className | string | -
+
+> Note: If you want to wrap the `Sider`, do not forget to add this setting to the customized component: `__ANT_LAYOUT_SIDER = true`. e.g.
+
+```jsx
+const CustomizedSider = (props) => <Sider {...props} />
+CustomizedSider.__ANT_LAYOUT_SIDER = true;
+...
+<CustomizedSider>Sider Content</CustomizedSider>
+```

components/layout/index.zh-CN.md

@@ -58,3 +58,12 @@ title: Layout
 | collapsedWidth | 收缩宽度，仅当 `collapsible:true` 时生效 | number | 64 |
 | style | 指定样式 | object | - |
 | className | 容器 className | string | - |
+
+> 注意：如果你想在 `Sider` 基础上进行包装，需要给自定义组件加上 `__ANT_LAYOUT_SIDER = true` 设置，例如：
+
+```jsx
+const CustomizedSider = (props) => <Sider {...props} />
+CustomizedSider.__ANT_LAYOUT_SIDER = true;
+...
+<CustomizedSider>Sider Content</CustomizedSider>
+```

components/layout/layout.tsx

@@ -5,7 +5,6 @@ export interface BasicProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
-  name: string;
 }
 
 function generator(props) {
@@ -17,7 +16,7 @@ function generator(props) {
       static Sider: any;
       render() {
         const { prefixCls } = props;
-        return <Basic prefixCls={prefixCls} name={props.name} {...this.props}/>;
+        return <Basic prefixCls={prefixCls} {...this.props}/>;
       }
     };
   };
@@ -25,15 +24,13 @@ function generator(props) {
 
 class Basic extends React.Component<BasicProps, any> {
   render() {
-    const { prefixCls, className, children, name, ...others } = this.props;
+    const { prefixCls, className, children, ...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;
-        }
-      });
-    }
+    React.Children.forEach(children, (element: any) => {
+      if (element && element.type && element.type.__ANT_LAYOUT_SIDER) {
+        hasSider = true;
+      }
+    });
     const divCls = classNames(className, prefixCls, {
       [`${prefixCls}-has-sider`]: hasSider,
     });
@@ -45,22 +42,18 @@ class Basic extends React.Component<BasicProps, any> {
 
 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;