import * as React from 'react';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import JqxLoader from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxloader';

function App() {
    const myLoader = React.useRef<any>(null);
    const style = { display: 'inline-block' };

    const openLoaderClick = (event: any) => {
        if (myLoader.current) {
            myLoader.current.open();
        }
    };

    const closeLoaderClick = (event: any) => {
        if (myLoader.current) {
            myLoader.current.close();
        }
    };

    return (
        <div>
            <JqxLoader theme="material-purple" ref={myLoader} width={100} height={60} imagePosition="top" />
            <JqxButton theme="material-purple" style={style} onClick={openLoaderClick} width={150}>
                Open Loader
            </JqxButton>
            <JqxButton theme="material-purple" style={style} onClick={closeLoaderClick} width={100}>
                Close
            </JqxButton>
        </div>
    );
}

export default App;