add prop for Layout with Sider

Right now we have to use like this:

<Layout>
  <Layout.Sider>...</Layout.Sider>
</Layout>

in that case we have classname ant-layout-has-sider

But if we have custom Sider like this:

const Sider = (props) => <Layout.Sider>.....</Layout.Sider>

<Layout>
  <Sider>...</Sider>
</Layout>

in that case we don’t have classname ant-layout-has-sider, because you are checking for property name:

ele && ele.props && ele.props.name === 'Sider'

so we can fix it by 2 ways now:

1. manually add classname ant-layout-has-sider to Layout, but I would consider it like internal feature, this classname can be changed in future

2. manually add property name to our custom Side, but I would consider it like internal feature too, you can change that logic in future.

As possible fix I would recommend next fix add property withSider to Layout:

Layout.propTypes = {
  withSider: PropTypes.bool
}

and check it like this:

    const { prefixCls, className, children, name, ...others } = this.props;
    let hasSider = this.props.hasSider;

    if (name === 'Layout') {
      React.Children.forEach(children, (ele: React.ReactElement<any>) => {
        if (ele && ele.props && ele.props.name === 'Sider') {
          hasSider = true;
        }
      });
    }

and use it like this:

const Sider = (props) => <Layout.Sider>.....</Layout.Sider>

<Layout withSider>
  <Sider>...</Sider>
</Layout>

[plandem]

well, right now I’m using it like this (pass name prop manually):

import { Sider, Header, Footer, Content } from '../../components/layout';
....
			<Layout className='app'>
				<Sider name='Sider' {...siderProps}/>
				<Layout>
					<Header name='Header' {...headerProps} />
					<Content name='Content'>
						<div className='container'>
							<Router.Match path='/' handler={()=><div>aaaaa</div>}/>
							<Router.Miss handler={NotFound}/>
						</div>
					</Content>
					<Footer name='Footer'/>
				</Layout>
			</Layout>

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.