jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
49 lines (45 loc) • 1.92 kB
Plain Text
import React from 'react';
import ReactDOM from 'react-dom';
import JqxExpander from '../../../jqwidgets-react/react_jqxexpander.js';
import JqxTree from '../../../jqwidgets-react/react_jqxtree.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTree.selectItem(null);
}
render () {
let source = [
{ icon: "../images/mailIcon.png", label: "Mail", expanded: true, items:
[
{ icon: "../images/calendarIcon.png", label: "Calendar" },
{ icon: "../images/contactsIcon.png", label: "Contacts", selected: true }
]
},
{ icon: "../images/folder.png", label: "Inbox", expanded: true, items:
[
{ icon: "../images/folder.png", label: "Admin" },
{ icon: "../images/folder.png", label: "Corporate" },
{ icon: "../images/folder.png", label: "Finance" },
{ icon: "../images/folder.png", label: "Other" }
]
},
{ icon: "../images/recycle.png", label: "Deleted Items" },
{ icon: "../images/notesIcon.png", label: "Notes" },
{ iconsize: 14, icon: "../images/settings.png", label: "Settings" },
{ icon: "../images/favorites.png", label: "Favorites" }
];
return (
<JqxExpander
width={300} height={370}
showArrow={false} toggleMode={'none'}
>
<div>Folders</div>
<div style={{ overflow: 'hidden' }}>
<JqxTree ref='myTree'
width={'100%'} height={'100%'} source={source}
/>
</div>
</JqxExpander>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));