JAVASCRIPT 7
App.js Guest on 29th July 2020 11:52:00 AM
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. import JqxSplitter from '../../../jqwidgets-react/react_jqxsplitter.js';
  5. import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';
  6.  
  7. class App extends React.Component {
  8.     componentDidMount() {
  9.         let capitaliseFirstLetter = (string) => {
  10.             return string.charAt(0).toUpperCase() + string.slice(1);
  11.         };
  12.         let displayEvent = (event) => {
  13.             let eventData = "Event:" + capitaliseFirstLetter(event.type);
  14.             eventData += ", Panel 1: " + event.args.panels[0].size;
  15.             eventData += ", Panel 2: " + event.args.panels[1].size;
  16.             this.refs.events.prepend('<div class="item" style="margin-top: 5px;">' + eventData + '</div>');
  17.         };
  18.  
  19.         this.refs.mainSplitter.on('resize', (event) => {
  20.             displayEvent(event);
  21.         });
  22.  
  23.         this.refs.mainSplitter.on('expanded', (event) => {
  24.             displayEvent(event);
  25.         });
  26.  
  27.         this.refs.mainSplitter.on('collapsed', (event) => {
  28.             displayEvent(event);
  29.         });
  30.     }
  31.     render() {
  32.         return (
  33.             <div id='container' style={{ float: 'left' }}>
  34.  
  35.                 <JqxSplitter ref='mainSplitter'
  36.                     width={850} height={480}
  37.                     panels={[{ size: 200 }]}
  38.                 >
  39.                     <div style={{ backgroundColor: '#F5FFF2' }}><span style={{ margin: 5 }}>Panel 1</span></div>
  40.                     <div style={{ backgroundColor: '#F5FFF2' }}><span style={{ margin: 5 }}>Panel 2</span></div>
  41.                 </JqxSplitter>
  42.  
  43.                 <div>
  44.                     <div style={{ fontFamily: 'Verdana', fontSize: 13 }}>
  45.                         Events:</div>
  46.                         <JqxPanel ref='events' style={{ borderWidth: '0px' }}
  47.                             width={450} height={250}
  48.                         />
  49.                 </div>
  50.  
  51.             </div >
  52.         )
  53.     }
  54. }
  55.  
  56. ReactDOM.render(<App />, document.getElementById('app'));

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.