import * as React from 'react' import * as ReactDOM from 'react-dom' import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart' import JqxLayout, { ILayoutProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlayout' import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea' import JqxTree from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree' const App = () => { const myTextArea = React.useRef(null) const [layout] = React.useState([{ items: [{ alignment: 'left', items: [{ contentContainer: 'ToolboxPanel', title: 'Toolbox', type: 'layoutPanel' }, { contentContainer: 'HelpPanel', title: 'Help', type: 'layoutPanel' }], type: 'autoHideGroup', unpinnedWidth: 200, width: 80 }, { items: [{ height: 400, items: [{ contentContainer: 'Document1Panel', initContent: (): void => { ReactDOM.render( , document.getElementById('Document1TextArea'), () => { myTextArea.current!.val('\n\n\t\n\tPage Title\n\t\n\t\n\t\t

This is a Heading

\n\t\t

This is a paragraph.

\n\t\n') } ) }, title: 'index.htm', type: 'documentPanel' }, { contentContainer: 'Document2Panel', initContent: (): void => { ReactDOM.render( , document.getElementById('Document2TextArea') ) }, title: 'New Document', type: 'documentPanel' }], minHeight: 200, type: 'documentGroup' }, { height: 200, items: [{ contentContainer: 'ErrorListPanel', title: 'Error List', type: 'layoutPanel' }, { contentContainer: 'PerformancePanel', initContent: (): void => { const data = [1, 5, 12, 5, 33, 38, 40, 42, 18, 18, 70, 76, 75, 99, 100, 88, 64, 13, 19, 15] const padding = { left: 0, top: 10, right: 0, bottom: 0 } const titlePadding = { left: 0, top: 0, right: 0, bottom: 0 } const xAxis = { visible: false, valuesOnTicks: false } const seriesGroups: IChartProps['seriesGroups'] = [{ columnsGapPercent: 0, columnsMaxWidth: 2, series: [{ colorFunction: (value: number | string, itemIndex: number, serie: any, group: any): string => { if (typeof value === 'number' && value <= 33) { return '#32CD32' } else if (typeof value === 'number' && value <= 66) { return '#FFD700' } else { return '#AA4643' } }, linesUnselectMode: 'click' }], type: 'line', valueAxis: { minValue: 0, visible: false } }] ReactDOM.render( , document.getElementById('cpuUsage') ) }, selected: true, title: 'Performance', type: 'layoutPanel' }], minHeight: 200, pinnedHeight: 30, type: 'tabbedGroup' }], orientation: 'vertical', type: 'layoutGroup', width: 500 }, { items: [{ contentContainer: 'SolutionExplorerPanel', initContent: (): void => { const source = [{ expanded: true, icon: 'https://www.jqwidgets.com/react/images/earth.png', items: [{ expanded: true, icon: 'https://www.jqwidgets.com/react/images/folder.png', items: [{ icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqx.base.css' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqx.energyblue.css' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqx.orange.css' }], label: 'css' }, { icon: 'https://www.jqwidgets.com/react/images/folder.png', items: [{ icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqxcore.js' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqxdata.js' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqxgrid.js' }], label: 'scripts', }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'index.htm' }], label: 'Project' }] ReactDOM.render( , document.getElementById('solutionExplorerTree') ) }, title: 'Solution Explorer', type: 'layoutPanel' }, { contentContainer: 'PropertiesPanel', title: 'Properties', type: 'layoutPanel' }], minWidth: 200, type: 'tabbedGroup', width: 220 }], orientation: 'horizontal', type: 'layoutGroup' }]) return (

List of tools

Help topics

List of errors

List of properties

) } export default App