content: import React from 'react';
  import ReactDOM from 'react-dom';
  
  import JqxDockPanel from '../../../jqwidgets-react/react_jqxdockpanel.js';
  
  class App extends React.Component {
      componentDidMount() {
          document.getElementById('layout').addEventListener('click', (event) => {
              layoutOnClick(event);
              this.refs.DockPanel.refresh();
          }, true);
  
          for (let i = 0; i < 4; i++) {
              document.getElementsByClassName('DockPanel')[0].children[0].children[i].style.color = 'white';
              document.getElementsByClassName('DockPanel')[1].children[0].children[i].style.color = 'white';
  
              document.getElementsByClassName('DockPanel')[1].children[0].children[i].style.width = '20px';
              document.getElementsByClassName('DockPanel')[1].children[0].children[i].style.height = '20px';
          }
  
          let layoutOnClick = (event) => {
              let firstElement = document.getElementById('first');
              let secondElement = document.getElementById('second');
              let thirdElement = document.getElementById('third');
              let fourthElement = document.getElementById('fourth');
  
              let position = parseInt(event.clientX) - parseInt(event.target.offsetLeft);
  
              if (position < 55) {
                  firstElement.setAttribute('dock', 'bottom');
                  firstElement.style.height = '105px';
                  secondElement.setAttribute('dock', 'left');
                  secondElement.style.width = '100px';
                  thirdElement.setAttribute('dock', 'left');
                  thirdElement.style.width = '100px';
                  fourthElement.setAttribute('dock', 'left');
                  fourthElement.style.width = '100px';
              } else
                  if (position < 115) {
                      for (let i = 0; i < 4; i++) {
                          document.getElementsByClassName('DockPanel')[0].children[0].children[i].style.width = '100px';
                      }
                      firstElement.setAttribute('dock', 'left');
                      secondElement.setAttribute('dock', 'right');
                      thirdElement.setAttribute('dock', 'bottom');
                      thirdElement.style.height = '140px';
                      fourthElement.setAttribute('dock', 'top');
                      fourthElement.style.height = '70px';
                  } else if (position < 175) {
                      for (let i = 0; i < 4; i++) {
                          document.getElementsByClassName('DockPanel')[0].children[0].children[i].style.width = '150px';
                      }
                      firstElement.setAttribute('dock', 'left');
                      secondElement.setAttribute('dock', 'left');
                      thirdElement.setAttribute('dock', 'left');
                      fourthElement.setAttribute('dock', 'left');
  
                  } else if (position < 235) {
                      for (let i = 0; i < 4; i++) {
                          document.getElementsByClassName('DockPanel')[0].children[0].children[i].style.height = '70px';
                      }
                      firstElement.setAttribute('dock', 'top');
                      secondElement.setAttribute('dock', 'top');
                      thirdElement.setAttribute('dock', 'top');
                      fourthElement.setAttribute('dock', 'top');
                  }
                  else {
                      for (let i = 0; i < 4; i++) {
                          document.getElementsByClassName('DockPanel')[0].children[0].children[i].style.width = '100px';
                      }
                      firstElement.setAttribute('dock', 'left');
                      secondElement.setAttribute('dock', 'left');
                      thirdElement.setAttribute('dock', 'left');
                      fourthElement.setAttribute('dock', 'left');
                  }
          }
  
      }
      render() {
          let dockPanel1HTML = `
        <div id='first' dock='left' style='background: #486974;'>First Div</div>
        <div id='second' dock='top' style='height: 100px; background: #368ba7;'>Second Div</div>
        <div id='third' dock='right' style='background: #df7169;'>Third Div</div>
        <div id='fourth' style='background: #a73654;'>Fourth Div</div>
      `;
          let dockPanel2HTML = `
        <div id='Div1' dock='left' style='background: #486974;'>1</div>
        <div id='Div2' dock='top' style='background: #368ba7;'>2</div>
        <div id='Div3' dock='right' style='background: #df7169;'>3</div>
        <div id='Div4' dock='bottom' style='background: #a73654;'>4</div>
      `;
          return (
              <div id='jqxWidget' style={{ width: 300, height: 600, fontSize: 13, fontFamily: 'Verdana' }}>
                  <JqxDockPanel className='DockPanel' ref='DockPanel' template={dockPanel1HTML}
                      width={300} height={210}
                  />
                  <br />
                  <div>Layout Types:</div>
                  <div id='layout'>
                      <img title='click to apply a new layout' alt='layout types' src='../../../../images/LayoutTypes.png' />
                  </div>
                  <br />
                  <div>Spiral:</div>
                  <JqxDockPanel className='DockPanel' template={dockPanel2HTML}
                      width={300} height={210} lastchildfill={false}
                  />
              </div>
          )
      }
  }
  
  ReactDOM.render(<App />, document.getElementById('app'));
  