Commit fcc48447 authored by yoyo837's avatar yoyo837 Committed by ι™ˆεΈ…

FooterToolBar width is fixed at 100% when using rc-drawer SliderMenu.

parent cbadacb2
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
export default class FooterToolbar extends Component { export default class FooterToolbar extends Component {
static contextTypes = {
isMobile: PropTypes.bool,
};
state = {
width: undefined,
};
componentDidMount() {
window.addEventListener('resize', this.resizeFooterToolbar);
this.resizeFooterToolbar();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeFooterToolbar);
}
resizeFooterToolbar = () => {
const sider = document.querySelector('.ant-layout-sider');
if (sider == null) {
return;
}
const { isMobile } = this.context;
const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
const { width: stateWidth } = this.state;
if (stateWidth !== width) {
this.setState({ width });
}
};
render() { render() {
const { children, className, extra, ...restProps } = this.props; const { children, className, extra, ...restProps } = this.props;
const { width } = this.state;
return ( return (
<div className={classNames(className, styles.toolbar)} {...restProps}> <div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
<div className={styles.left}>{extra}</div> <div className={styles.left}>{extra}</div>
<div className={styles.right}>{children}</div> <div className={styles.right}>{children}</div>
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment