@@ -2,31 +2,16 @@ import React from 'react';
22import ReactDOM from 'react-dom/client' ;
33import './index.css' ;
44import './DockManagerStyles.css' ;
5- import { IgcDockManagerComponent , IgcContentPane } from "igniteui-dockmanager" ;
6- import { IgcDockManagerPaneType , IgcSplitPaneOrientation } from "igniteui-dockmanager" ;
7- import { defineCustomElements } from "igniteui-dockmanager/loader" ;
8-
9- /* eslint-disable */
10- declare global {
11- namespace JSX {
12- // tslint:disable-next-line:interface-name
13- interface IntrinsicElements {
14- "igc-dockmanager" : any ;
15- }
16- }
17- }
18- /* eslint-enable */
19-
20- defineCustomElements ( ) ;
5+ import { IgrDockManager , IgrDockManagerPaneType , IgrSplitPaneOrientation } from 'igniteui-react-dockmanager' ;
216
227export default class DockManagerOverview extends React . Component {
238
24- public dockManager : IgcDockManagerComponent ;
9+ public dockManager : IgrDockManager ;
2510
2611 public render ( ) : JSX . Element {
2712 return (
2813 < div className = "container sample" >
29- < igc-dockmanager id = "dockManager" >
14+ < IgrDockManager id = "dockManager" >
3015 < div slot = "content1" className = "dockManagerContent" > Content 1</ div >
3116 < div slot = "content2" className = "dockManagerContent" > Content 2</ div >
3217 < div slot = "content3" className = "dockManagerContent" > Content 3</ div >
@@ -36,7 +21,7 @@ export default class DockManagerOverview extends React.Component {
3621 < div slot = "content7" className = "dockManagerContent" > Content 7</ div >
3722 < div slot = "content8" className = "dockManagerContent" > Content 8</ div >
3823 < div slot = "content9" className = "dockManagerContent" > Content 9</ div >
39- </ igc-dockmanager >
24+ </ IgrDockManager >
4025 </ div >
4126 ) ;
4227 }
@@ -45,32 +30,32 @@ export default class DockManagerOverview extends React.Component {
4530 const pane = {
4631 // size: 150,
4732 header : paneHeader ,
48- type : IgcDockManagerPaneType . contentPane ,
33+ type : IgrDockManagerPaneType . contentPane ,
4934 contentId : contentID
5035 } ;
5136 return pane ;
5237 }
5338
54- public createSplitPane ( orientation : IgcSplitPaneOrientation , contentPanes : any [ ] , size ?: number ) : any {
39+ public createSplitPane ( orientation : IgrSplitPaneOrientation , contentPanes : any [ ] , size ?: number ) : any {
5540 const pane = {
56- type : IgcDockManagerPaneType . splitPane ,
41+ type : IgrDockManagerPaneType . splitPane ,
5742 orientation : orientation ,
5843 panes : contentPanes ,
5944 size : size
6045 } ;
6146 return pane ;
6247 }
6348
64- public createTabPane ( orientation : IgcSplitPaneOrientation , contentPanes : any [ ] , size ?: number ) : any {
49+ public createTabPane ( orientation : IgrSplitPaneOrientation , contentPanes : any [ ] , size ?: number ) : any {
6550 const pane = {
66- type : IgcDockManagerPaneType . documentHost ,
51+ type : IgrDockManagerPaneType . documentHost ,
6752 size : size ,
6853 rootPane : {
69- type : IgcDockManagerPaneType . splitPane ,
54+ type : IgrDockManagerPaneType . splitPane ,
7055 orientation : orientation ,
7156 panes : [
7257 {
73- type : IgcDockManagerPaneType . tabGroupPane ,
58+ type : IgrDockManagerPaneType . tabGroupPane ,
7459 panes : contentPanes
7560 }
7661 ]
@@ -96,16 +81,16 @@ export default class DockManagerOverview extends React.Component {
9681 const pane8 = this . createContentPane ( 'content8' , 'Content Pane 2' ) ;
9782 const pane9 = this . createContentPane ( 'content9' , 'Floating Pane' ) ;
9883
99- const tabPane1 = this . createTabPane ( IgcSplitPaneOrientation . horizontal , [ pane3 , pane4 ] , 200 ) ;
84+ const tabPane1 = this . createTabPane ( IgrSplitPaneOrientation . horizontal , [ pane3 , pane4 ] , 200 ) ;
10085
101- const splitPane1 = this . createSplitPane ( IgcSplitPaneOrientation . vertical , [ pane1 , pane2 ] ) ;
102- const splitPane2 = this . createSplitPane ( IgcSplitPaneOrientation . vertical , [ tabPane1 , contentPane5 ] , 200 ) ;
86+ const splitPane1 = this . createSplitPane ( IgrSplitPaneOrientation . vertical , [ pane1 , pane2 ] ) ;
87+ const splitPane2 = this . createSplitPane ( IgrSplitPaneOrientation . vertical , [ tabPane1 , contentPane5 ] , 200 ) ;
10388
104- this . dockManager = document . getElementById ( "dockManager" ) as IgcDockManagerComponent ;
89+ this . dockManager = document . getElementById ( "dockManager" ) as IgrDockManager ;
10590 this . dockManager . layout = {
10691 rootPane : {
107- type : IgcDockManagerPaneType . splitPane ,
108- orientation : IgcSplitPaneOrientation . horizontal ,
92+ type : IgrDockManagerPaneType . splitPane ,
93+ orientation : IgrSplitPaneOrientation . horizontal ,
10994 panes : [
11095 splitPane1 , // or:
11196 // {
@@ -124,11 +109,11 @@ export default class DockManagerOverview extends React.Component {
124109 // ]
125110 // },
126111 {
127- type : IgcDockManagerPaneType . splitPane ,
128- orientation : IgcSplitPaneOrientation . vertical ,
112+ type : IgrDockManagerPaneType . splitPane ,
113+ orientation : IgrSplitPaneOrientation . vertical ,
129114 panes : [
130115 {
131- type : IgcDockManagerPaneType . tabGroupPane ,
116+ type : IgrDockManagerPaneType . tabGroupPane ,
132117 size : 200 ,
133118 panes : [ pane6 , pane7 ]
134119 } ,
@@ -139,8 +124,8 @@ export default class DockManagerOverview extends React.Component {
139124 } ,
140125 floatingPanes : [
141126 {
142- type : IgcDockManagerPaneType . splitPane ,
143- orientation : IgcSplitPaneOrientation . horizontal ,
127+ type : IgrDockManagerPaneType . splitPane ,
128+ orientation : IgrSplitPaneOrientation . horizontal ,
144129 floatingHeight : 150 ,
145130 floatingWidth : 250 ,
146131 floatingLocation : { x : 300 , y : 200 } ,
0 commit comments