nope/pages/test/test-dynamic-layout.tsx
2020-11-04 22:36:52 +01:00

112 lines
3.1 KiB
TypeScript

import { faHatWizard } from '@fortawesome/free-solid-svg-icons';
import * as React from 'react';
import DynLayout, {IDynamicLayoutProps, IDynamicWidget} from '../../resources/ui/layout/dynamicLayout';
import TabEntry from '../../resources/ui/layout/tabs';
export interface DynLayoutProps {
}
export interface DynLayoutState {
}
class TestDynLayoutComponent extends React.Component<DynLayoutProps, DynLayoutState> {
componentDidMount(){
this.setState({
layoutSettings: {
width: process.browser ? window.innerWidth : 1920,
autoSize: false
},
});
console.log('here',process.browser ? window.innerWidth : 1920)
}
constructor(props) {
super(props);
}
render() {
const settings: IDynamicLayoutProps<any> = {
components: [
{
visible: true,
component() {
return (<># Test Widget 1 </>)
},
gridSettings: {
h: 5,
w: 5,
x: 0,
y: 0,
minW: 3,
maxH: 5,
minH: 5,
maxW: 5,
},
id: 'test',
label: 'Test Widget 1',
props: {
},
hideable: true,
},
{
visible: true,
component() {
return (<TabEntry tabs={{
active: '-1',
allowNewTabs: true,
items: [],
}}></TabEntry>)
},
gridSettings: {
h: 5,
w: 10,
x: 5,
y: 0,
minW: 5,
maxH: 5,
minH: 5,
},
id: 'test2',
label: '# Test Widget 2',
props: {
},
hideable: false,
bg:'light'
}
],
layoutSettings: {
width: process.browser ? window.innerWidth : 1920,
autoSize: false,
preventCollision: false,
cols: 15,
compactType: 'horizontal'
},
toolbar: {
items: [
{
type: 'link',
label: 'docs',
ref: '/docs',
icon: faHatWizard
}
]
},
generateData(){
return {
content: 'hello'
}
}
}
return React.createElement(DynLayout,settings);
}
}
export default TestDynLayoutComponent;