jqwidgets-scripts-custom/demos/React/app/splitter/api/app.js

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

import React from 'react';
import ReactDOM from 'react-dom';

import JqxSplitter from '../../../jqwidgets-react/react_jqxsplitter.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.expandFirstButton.on('click', () => {
            let panels = this.refs.mainSplitter.panels();
            panels[0].collapsible = true;
            panels[1].collapsible = false;
            this.refs.mainSplitter.panels(panels);
            this.refs.mainSplitter.expand();
        });

        this.refs.expandLastButton.on('click', () => {
            let panels = this.refs.mainSplitter.panels();
            panels[0].collapsible = false;
            panels[1].collapsible = true;
            this.refs.mainSplitter.panels(panels);
            this.refs.mainSplitter.expand();
        });

        this.refs.collapseFirstButton.on('click', () => {
            let panels = this.refs.mainSplitter.panels();
            panels[0].collapsible = true;
            panels[1].collapsible = false;
            this.refs.mainSplitter.panels(panels);
            this.refs.mainSplitter.collapse();
        });

        this.refs.collapseLastButton.on('click', () => {
            let panels = this.refs.mainSplitter.panels();
            panels[0].collapsible = false;
            panels[1].collapsible = true;
            this.refs.mainSplitter.panels(panels);
            this.refs.mainSplitter.collapse();
        });
        
        this.refs.enableButton.on('click', () => {            
            this.refs.mainSplitter.enable();
        });

        this.refs.disableButton.on('click', () => {
            this.refs.mainSplitter.disable();
        });

        this.refs.orientationButton.on('click', () => {
            let currentOrientation = this.refs.mainSplitter.orientation();
            if (currentOrientation === 'vertical') {
                this.refs.mainSplitter.orientation('horizontal');
            } else {
                this.refs.mainSplitter.orientation('vertical');
            }
        });
    }
    render() {
        let buttonStyle = { float: 'left', marginLeft: 5 };
        return (
            <div>
                <JqxButton ref='orientationButton' style={buttonStyle} value='Orientation' width={90} />
                <JqxButton ref='expandFirstButton' style={buttonStyle} value='Expand first' width={90} />
                <JqxButton ref='expandLastButton' style={buttonStyle} value='Expand last' width={90} />
                <JqxButton ref='collapseFirstButton' style={buttonStyle} value='Collapse first' width={95} />
                <JqxButton ref='collapseLastButton' style={buttonStyle} value='Collapse last' width={95} />
                <JqxButton ref='enableButton' style={buttonStyle} value='Enable' width={80} />
                <JqxButton ref='disableButton' style={{ float: 'left', margin: '0 0 20px 5px' }} value='Disable' width={80} />

                <JqxSplitter ref='mainSplitter' style={{ marginTop: 20 }}
                    width={850} height={600}
                    panels={[{ size: 250 }]}
                >
                    <div style={{ backgroundColor: '#F5FFF2' }}></div>
                    <div style={{ backgroundColor: '#EBF1FF' }}></div>
                </JqxSplitter >
            </div >
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));