alexkuz / react-dock

Resizable dockable react component
http://alexkuz.github.io/react-dock/demo/
MIT License
546 stars 76 forks source link

Dynamically changing page content #20

Open firaskrichi opened 7 years ago

firaskrichi commented 7 years ago

Is there a way to make content in the rest of the page scale dynamically based on the width of the dock?

csillag commented 7 years ago

Yes, I would also be interested in that.

sufius commented 7 years ago

Hey friends,

whats about this solution:

Link to dynamic main content width example

const styles = {
  main: {
    width: '100%',
    height: '150%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'top',
    paddingTop: '0',
    marginLeft: '0'
  }
}

@Radium
export default class PmbMainContent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { children, className, ...reactProps } = this.props;
    if (this.props.isSidebarVisible){
        styles.main.width = (1 - this.props.size) * 100 + '%';
        styles.main.marginLeft =  this.props.size * 100 + '%';
    } else {
        styles.main.width = '100%';
        styles.main.marginLeft =  '0';
    }
    return (
        <div style={[styles.main]}>
          {children}
        </div>
    );
  }
}

Im passing the state and the width (size) of the sidebar component down to the main content component and calculating the new width dependent on the current width (size) of the sidebar. This calculated size is added as "left margin" to the main content component. Hope this solution is clean enough??? Thanks in advance