diff --git a/browser/config-overrides.js b/browser/config-overrides.js index 9efe90df65..8a2a0fd79f 100644 --- a/browser/config-overrides.js +++ b/browser/config-overrides.js @@ -180,8 +180,8 @@ module.exports = function override(config, env) { chunks: 'all', }, igniteuiDockmanager: { - test: /[\\/]node_modules[\\/](igniteui-dockmanager)[\\/]/, - name: 'igniteui-dockmanager', + test: /[\\/]node_modules[\\/](igniteui-react-dockmanager)[\\/]/, + name: 'igniteui-react-dockmanager', chunks: 'all', } }; diff --git a/browser/package-lock.json b/browser/package-lock.json index b4dcb7dd43..48ded16e39 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -15,16 +15,16 @@ "classnames": "2.3.1", "dompurify": "^3.3.0", "file-saver": "1.3.8", - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "^19.3.0", + "igniteui-react": "^19.4.0-rc.0", "igniteui-react-charts": "19.3.0-beta.0", "igniteui-react-core": "19.3.0-beta.0", "igniteui-react-dashboards": "19.3.0-beta.0", "igniteui-react-data-grids": "19.3.0-beta.0", "igniteui-react-datasources": "19.3.0-beta.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "igniteui-react-excel": "19.3.0-beta.0", "igniteui-react-gauges": "19.3.0-beta.0", - "igniteui-react-grids": "^19.3.0", + "igniteui-react-grids": "^19.4.0-rc.0", "igniteui-react-inputs": "19.3.0-beta.0", "igniteui-react-layouts": "19.3.0-beta.0", "igniteui-react-maps": "19.3.0-beta.0", @@ -2943,6 +2943,18 @@ "node": ">= 8" } }, + "node_modules/anymatch/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/append-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz", @@ -4256,6 +4268,16 @@ "node": ">=8" } }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -7937,9 +7959,10 @@ } }, "node_modules/igniteui-react": { - "version": "19.3.2", - "resolved": "https://registry.npmjs.org/igniteui-react/-/igniteui-react-19.3.2.tgz", - "integrity": "sha512-80xpiow/YEMSZjA1KzdoFLqrIl7J8hxGzGOX2+Cgd82JTwnXjkHY4qx+J+Q34Jh+n++lB5o+RDInfTjVAHzGJw==", + "version": "19.4.0-rc.0", + "resolved": "https://registry.npmjs.org/igniteui-react/-/igniteui-react-19.4.0-rc.0.tgz", + "integrity": "sha512-StSL38REThDaswOvq48NJGmJ6+ek4k71S2/AYZQ7EQlUbb5vkqhvxLvXguvyFlP2FvCtbEfrKWSANK6l2ljhdA==", + "license": "MIT", "dependencies": { "@lit/react": "^1.0.7", "igniteui-dockmanager": "~1.17.0", @@ -8027,6 +8050,17 @@ "igniteui-react-core": "19.3.0-beta.0" } }, + "node_modules/igniteui-react-dockmanager": { + "version": "19.4.0-rc.0", + "resolved": "https://registry.npmjs.org/igniteui-react-dockmanager/-/igniteui-react-dockmanager-19.4.0-rc.0.tgz", + "integrity": "sha512-+QQvRGLUY5MVYvHFYE5jpr6+PIA6+HaowL8DwUA6qQhvZmff2i0s9mM9cFKr9/3KKesAYSPywa3wBnVwmlYyeg==", + "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)", + "dependencies": { + "@lit/react": "^1.0.7", + "igniteui-dockmanager": "~1.18.1", + "lit": "^3.3.0" + } + }, "node_modules/igniteui-react-excel": { "version": "19.3.0-beta.0", "resolved": "https://registry.npmjs.org/igniteui-react-excel/-/igniteui-react-excel-19.3.0-beta.0.tgz", @@ -8052,9 +8086,10 @@ } }, "node_modules/igniteui-react-grids": { - "version": "19.3.2", - "resolved": "https://registry.npmjs.org/igniteui-react-grids/-/igniteui-react-grids-19.3.2.tgz", - "integrity": "sha512-5lRTewUBN+oT99XSmUPvs2vrNk3ZxXiL0LQdZ6a4r3QdbdYjS2hcI/VKQfv/PaTfC8c1mgZZ5ulqmKMS5jxT1w==", + "version": "19.4.0-rc.0", + "resolved": "https://registry.npmjs.org/igniteui-react-grids/-/igniteui-react-grids-19.4.0-rc.0.tgz", + "integrity": "sha512-42mMu7XTAMEuQiCJi9l+mVSEQuaJXkRYDhTDG/fD65O6Gk6C/gb9iOqysxVJGBDT1YgnvRU3PLTnjznVZGoSFQ==", + "license": "Infragistics(R) Ultimate license (http://www.infragistics.com/legal/ultimate/license/)", "dependencies": { "@lit/react": "^1.0.7", "igniteui-webcomponents-grids": "~6.2.1", @@ -9075,6 +9110,19 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/jest-util/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/jest-worker": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", @@ -10572,6 +10620,19 @@ "node": ">=8.6" } }, + "node_modules/micromatch/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -11467,11 +11528,13 @@ "dev": true }, "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "dev": true, + "license": "MIT", "engines": { - "node": ">=8.6" + "node": ">=12" }, "funding": { "url": "https://github.com/sponsors/jonschlinkert" @@ -12137,6 +12200,19 @@ "node": ">=8.10.0" } }, + "node_modules/readdirp/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/rechoir": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", @@ -14522,18 +14598,6 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, - "node_modules/tinyglobby/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/tinypool": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz", @@ -15729,18 +15793,6 @@ } } }, - "node_modules/vite/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/vitest": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz", @@ -15825,18 +15877,6 @@ "vitest": "*" } }, - "node_modules/vitest/node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/walk": { "version": "2.3.15", "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.15.tgz", @@ -16263,12 +16303,18 @@ "dev": true }, "node_modules/yaml": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", + "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "bin": { + "yaml": "bin.mjs" + }, "engines": { - "node": ">= 6" + "node": ">= 14.6" } }, "node_modules/yargs": { diff --git a/browser/package.json b/browser/package.json index 5ab498f506..92533c38b2 100644 --- a/browser/package.json +++ b/browser/package.json @@ -23,16 +23,16 @@ "classnames": "2.3.1", "dompurify": "^3.3.0", "file-saver": "1.3.8", - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "^19.3.0", + "igniteui-react": "^19.4.0-rc.0", "igniteui-react-charts": "19.3.0-beta.0", "igniteui-react-core": "19.3.0-beta.0", "igniteui-react-dashboards": "19.3.0-beta.0", "igniteui-react-data-grids": "19.3.0-beta.0", "igniteui-react-datasources": "19.3.0-beta.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "igniteui-react-excel": "19.3.0-beta.0", "igniteui-react-gauges": "19.3.0-beta.0", - "igniteui-react-grids": "^19.3.0", + "igniteui-react-grids": "^19.4.0-rc.0", "igniteui-react-inputs": "19.3.0-beta.0", "igniteui-react-layouts": "19.3.0-beta.0", "igniteui-react-maps": "19.3.0-beta.0", diff --git a/browser/src/index.tsx b/browser/src/index.tsx index 7e9d66bc79..8448fe8ebb 100644 --- a/browser/src/index.tsx +++ b/browser/src/index.tsx @@ -34,10 +34,3 @@ root.render( // Learn more about service workers: https://bit.ly/CRA-PWA RegisterServiceWorker(); // serviceWorker.unregister(); - -// // copied from https://stenciljs.com/docs/react -// import { applyPolyfills, defineCustomElements } from 'igniteui-dockmanager/loader'; - -// applyPolyfills().then(() => { -// defineCustomElements(); -// }); diff --git a/browser/src/typedecls.d.ts b/browser/src/typedecls.d.ts deleted file mode 100644 index 0cfd71d7b4..0000000000 --- a/browser/src/typedecls.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/* tslint:disable */ -declare module JSX { - interface IntrinsicElements { - "igc-dockmanager": any; - } - } - /* tslint:enable */ \ No newline at end of file diff --git a/browser/tasks/gulp-samples.js b/browser/tasks/gulp-samples.js index a1a18a7e9c..3d3aeacd17 100644 --- a/browser/tasks/gulp-samples.js +++ b/browser/tasks/gulp-samples.js @@ -860,7 +860,7 @@ function updateIG(cb) { { version: "^19.3.0", name: "igniteui-react" }, // these IG packages are sometimes updated: { version: "^6.3.0", name: "igniteui-webcomponents" }, - { version: "^1.17.0", name: "igniteui-dockmanager" }, + { version: "^19.4.0-rc.0", name: "igniteui-react-dockmanager" }, // main react packages { version: "^19.2.0", name: "react" }, { version: "^19.2.0", name: "react-dom" }, diff --git a/browser/templates/sample/package.json b/browser/templates/sample/package.json index 390ab51aab..5df50ed85c 100644 --- a/browser/templates/sample/package.json +++ b/browser/templates/sample/package.json @@ -22,7 +22,7 @@ "@material-ui/icons": { "version": "^4.5.1", "usage": "detect", "keywords": ["@material-ui/core"] }, "@types/file-saver": { "version": "^2.0.0", "usage": "detect", "keywords": ["ExcelUtility"] }, "file-saver": { "version": "^1.3.8", "usage": "detect", "keywords": ["ExcelUtility"] }, - "igniteui-dockmanager": { "version": "1.0.0", "usage": "detect", "note": "will detect if needs to inject it by checking import statements in source of a sample" }, + "igniteui-react-dockmanager": { "version": "1.0.0", "usage": "detect", "note": "will detect if needs to inject it by checking import statements in source of a sample" }, "igniteui-react-core": { "version": "19.0.0-alpha.0", "usage": "always", "note": "will always force injecting it to a package.json "}, "igniteui-react-maps": { "version": "19.0.0-alpha.0", "usage": "detect" }, "igniteui-react-charts": { "version": "19.0.0-alpha.0", "usage": "detect", "keywords": ["igniteui-react-maps", "igniteui-react-spreadsheet-chart-adapter"] }, diff --git a/browser/tsconfig.paths.json b/browser/tsconfig.paths.json index 6010a244ac..3b136a8dc0 100644 --- a/browser/tsconfig.paths.json +++ b/browser/tsconfig.paths.json @@ -4,6 +4,7 @@ "paths": { "igniteui-react-core": [ "node_modules/igniteui-react-core", "node_modules/@infragistics/igniteui-react-core" ], "igniteui-react-charts": [ "node_modules/igniteui-react-charts", "node_modules/@infragistics/igniteui-react-charts" ], + "igniteui-react-dockmanager": [ "node_modules/igniteui-react-dockmanager", "node_modules/@infragistics/igniteui-react-dockmanager" ], "igniteui-react-grids": [ "node_modules/igniteui-react-grids", "node_modules/@infragistics/igniteui-react-grids" ], "igniteui-react-grids/grids": [ "node_modules/igniteui-react-grids/grids", "node_modules/@infragistics/igniteui-react-grids/grids" ], "igniteui-react-data-grids": [ "node_modules/igniteui-react-data-grids", "node_modules/@infragistics/igniteui-react-data-grids" ], @@ -17,9 +18,7 @@ "igniteui-react-dashboards": [ "node_modules/igniteui-react-dashboards", "node_modules/@infragistics/igniteui-react-dashboards" ], "igniteui-react-spreadsheet": [ "node_modules/igniteui-react-spreadsheet", "node_modules/@infragistics/igniteui-react-spreadsheet" ], "igniteui-react-spreadsheet-chart-adapter": [ "node_modules/igniteui-react-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-react-spreadsheet-chart-adapter" ], - "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ], - "igniteui-dockmanager": [ "node_modules/igniteui-dockmanager", "node_modules/@infragistics/igniteui-dockmanager" ], - "igniteui-dockmanager/loader": [ "node_modules/igniteui-dockmanager/loader", "node_modules/@infragistics/igniteui-dockmanager/loader" ] + "igniteui-webcomponents": [ "node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents" ] } } } \ No newline at end of file diff --git a/samples/layouts/dock-manager/customize-buttons/package.json b/samples/layouts/dock-manager/customize-buttons/package.json index 8855149b1e..0f3ab023a5 100644 --- a/samples/layouts/dock-manager/customize-buttons/package.json +++ b/samples/layouts/dock-manager/customize-buttons/package.json @@ -12,9 +12,8 @@ "test": "vitest" }, "dependencies": { - "igniteui-dockmanager": "^1.17.0", "igniteui-react-core": "19.3.0-beta.0", - "igniteui-webcomponents": "^6.3.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/dock-manager/customize-buttons/src/index.tsx b/samples/layouts/dock-manager/customize-buttons/src/index.tsx index 3f0cc5e955..618ae35f3d 100644 --- a/samples/layouts/dock-manager/customize-buttons/src/index.tsx +++ b/samples/layouts/dock-manager/customize-buttons/src/index.tsx @@ -2,31 +2,16 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './DockManagerStyles.css'; -import { IgcDockManagerComponent, IgcContentPane } from "igniteui-dockmanager"; -import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "igniteui-dockmanager"; -import { defineCustomElements } from "igniteui-dockmanager/loader"; - -/* eslint-disable */ -declare global { - namespace JSX { - // tslint:disable-next-line:interface-name - interface IntrinsicElements { - "igc-dockmanager": any; - } - } -} -/* eslint-enable */ - -defineCustomElements(); +import { IgrDockManager, IgrDockManagerPaneType, IgrSplitPaneOrientation } from 'igniteui-react-dockmanager'; export default class DockManagerOverview extends React.Component { - public dockManager: IgcDockManagerComponent; + public dockManager: IgrDockManager; public render(): JSX.Element { return (
- +
Content 1
Content 2
Content 3
@@ -36,7 +21,7 @@ export default class DockManagerOverview extends React.Component {
Content 7
Content 8
Content 9
- +
); } @@ -45,15 +30,15 @@ export default class DockManagerOverview extends React.Component { const pane = { // size: 150, header: paneHeader, - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: contentID }; return pane; } - public createSplitPane(orientation: IgcSplitPaneOrientation, contentPanes: any[], size?: number): any { + public createSplitPane(orientation: IgrSplitPaneOrientation, contentPanes: any[], size?: number): any { const pane = { - type: IgcDockManagerPaneType.splitPane, + type: IgrDockManagerPaneType.splitPane, orientation: orientation, panes: contentPanes, size: size @@ -61,16 +46,16 @@ export default class DockManagerOverview extends React.Component { return pane; } - public createTabPane(orientation: IgcSplitPaneOrientation, contentPanes: any[], size?: number): any { + public createTabPane(orientation: IgrSplitPaneOrientation, contentPanes: any[], size?: number): any { const pane = { - type: IgcDockManagerPaneType.documentHost, + type: IgrDockManagerPaneType.documentHost, size: size, rootPane: { - type: IgcDockManagerPaneType.splitPane, + type: IgrDockManagerPaneType.splitPane, orientation: orientation, panes: [ { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, panes: contentPanes } ] @@ -96,16 +81,16 @@ export default class DockManagerOverview extends React.Component { const pane8 = this.createContentPane('content8', 'Content Pane 2'); const pane9 = this.createContentPane('content9', 'Floating Pane'); - const tabPane1 = this.createTabPane(IgcSplitPaneOrientation.horizontal, [ pane3, pane4 ], 200); + const tabPane1 = this.createTabPane(IgrSplitPaneOrientation.horizontal, [ pane3, pane4 ], 200); - const splitPane1 = this.createSplitPane(IgcSplitPaneOrientation.vertical, [ pane1, pane2 ]); - const splitPane2 = this.createSplitPane(IgcSplitPaneOrientation.vertical, [ tabPane1, contentPane5 ], 200); + const splitPane1 = this.createSplitPane(IgrSplitPaneOrientation.vertical, [ pane1, pane2 ]); + const splitPane2 = this.createSplitPane(IgrSplitPaneOrientation.vertical, [ tabPane1, contentPane5 ], 200); - this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent; + this.dockManager = document.getElementById("dockManager") as IgrDockManager; this.dockManager.layout = { rootPane: { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, panes: [ splitPane1, // or: // { @@ -124,11 +109,11 @@ export default class DockManagerOverview extends React.Component { // ] // }, { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, panes: [ { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, size: 200, panes: [ pane6, pane7 ] }, @@ -139,8 +124,8 @@ export default class DockManagerOverview extends React.Component { }, floatingPanes: [ { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, floatingHeight: 150, floatingWidth: 250, floatingLocation: { x: 300, y: 200 }, diff --git a/samples/layouts/dock-manager/embedding-frames/package.json b/samples/layouts/dock-manager/embedding-frames/package.json index ee0a46b6d3..5f2b50f62f 100644 --- a/samples/layouts/dock-manager/embedding-frames/package.json +++ b/samples/layouts/dock-manager/embedding-frames/package.json @@ -12,9 +12,8 @@ "test": "vitest" }, "dependencies": { - "igniteui-dockmanager": "^1.17.0", "igniteui-react-core": "19.3.0-beta.0", - "igniteui-webcomponents": "^6.3.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/dock-manager/embedding-frames/src/index.tsx b/samples/layouts/dock-manager/embedding-frames/src/index.tsx index 1ec90ac955..46bbf30cd8 100644 --- a/samples/layouts/dock-manager/embedding-frames/src/index.tsx +++ b/samples/layouts/dock-manager/embedding-frames/src/index.tsx @@ -2,29 +2,14 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './DockManagerStyles.css'; -import { IgcDockManagerComponent, IgcContentPane } from "igniteui-dockmanager"; -import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "igniteui-dockmanager"; -import { defineCustomElements } from "igniteui-dockmanager/loader"; - -/* eslint-disable */ -declare global { - namespace JSX { - // tslint:disable-next-line:interface-name - interface IntrinsicElements { - "igc-dockmanager": any; - } - } -} -/* eslint-enable */ - -defineCustomElements(); +import { IgrContentPane, IgrDockManager, IgrDockManagerPaneType, IgrSplitPaneOrientation } from 'igniteui-react-dockmanager'; export default class DockManagerEmbeddingFrames extends React.Component { - public dockManager: IgcDockManagerComponent; - public geoMapPane: IgcContentPane; - public gaugePane: IgcContentPane; - public doughnutChartPane: IgcContentPane; + public dockManager: IgrDockManager; + public geoMapPane: IgrContentPane; + public gaugePane: IgrContentPane; + public doughnutChartPane: IgrContentPane; constructor(props: any) { super(props); @@ -35,7 +20,7 @@ export default class DockManagerEmbeddingFrames extends React.Component { public render(): JSX.Element { return (
- +
@@ -48,7 +33,7 @@ export default class DockManagerEmbeddingFrames extends React.Component {
- +
); } @@ -59,39 +44,39 @@ export default class DockManagerEmbeddingFrames extends React.Component { this.gaugePane = { // size: 150, header: 'ANGULAR RADIAL GAUGE', - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: 'gaugeContainer' }; this.doughnutChartPane = { // size: 150, header: 'WEB COMPONENT DOUGHNUT CHART', - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: 'doughnutChartContainer' }; this.geoMapPane = { // size: 200, header: 'REACT GEOGRAPHIC MAP', - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: 'geoMapContainer' }; - this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent; + this.dockManager = document.getElementById("dockManager") as IgrDockManager; this.dockManager.layout = { rootPane: { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, panes: [ { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, // size: 250, panes: [ this.gaugePane, this.doughnutChartPane] }, { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, // size: 200, panes: [ // this.financialChartPane, diff --git a/samples/layouts/dock-manager/overview/package.json b/samples/layouts/dock-manager/overview/package.json index 8855149b1e..0f3ab023a5 100644 --- a/samples/layouts/dock-manager/overview/package.json +++ b/samples/layouts/dock-manager/overview/package.json @@ -12,9 +12,8 @@ "test": "vitest" }, "dependencies": { - "igniteui-dockmanager": "^1.17.0", "igniteui-react-core": "19.3.0-beta.0", - "igniteui-webcomponents": "^6.3.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/dock-manager/overview/src/index.tsx b/samples/layouts/dock-manager/overview/src/index.tsx index 3f0cc5e955..142f8b5e2e 100644 --- a/samples/layouts/dock-manager/overview/src/index.tsx +++ b/samples/layouts/dock-manager/overview/src/index.tsx @@ -2,31 +2,16 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './DockManagerStyles.css'; -import { IgcDockManagerComponent, IgcContentPane } from "igniteui-dockmanager"; -import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "igniteui-dockmanager"; -import { defineCustomElements } from "igniteui-dockmanager/loader"; - -/* eslint-disable */ -declare global { - namespace JSX { - // tslint:disable-next-line:interface-name - interface IntrinsicElements { - "igc-dockmanager": any; - } - } -} -/* eslint-enable */ - -defineCustomElements(); +import { IgrDockManager, IgrDockManagerPaneType, IgrSplitPaneOrientation } from 'igniteui-react-dockmanager'; export default class DockManagerOverview extends React.Component { - public dockManager: IgcDockManagerComponent; + public dockManager: IgrDockManager; public render(): JSX.Element { return (
- +
Content 1
Content 2
Content 3
@@ -36,7 +21,7 @@ export default class DockManagerOverview extends React.Component {
Content 7
Content 8
Content 9
- +
); } @@ -45,15 +30,15 @@ export default class DockManagerOverview extends React.Component { const pane = { // size: 150, header: paneHeader, - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: contentID }; return pane; } - public createSplitPane(orientation: IgcSplitPaneOrientation, contentPanes: any[], size?: number): any { + public createSplitPane(orientation: IgrSplitPaneOrientation, contentPanes: any[], size?: number): any { const pane = { - type: IgcDockManagerPaneType.splitPane, + type: IgrDockManagerPaneType.splitPane, orientation: orientation, panes: contentPanes, size: size @@ -61,16 +46,16 @@ export default class DockManagerOverview extends React.Component { return pane; } - public createTabPane(orientation: IgcSplitPaneOrientation, contentPanes: any[], size?: number): any { + public createTabPane(orientation: IgrSplitPaneOrientation, contentPanes: any[], size?: number): any { const pane = { - type: IgcDockManagerPaneType.documentHost, + type: IgrDockManagerPaneType.documentHost, size: size, rootPane: { - type: IgcDockManagerPaneType.splitPane, + type: IgrDockManagerPaneType.splitPane, orientation: orientation, panes: [ { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, panes: contentPanes } ] @@ -96,27 +81,27 @@ export default class DockManagerOverview extends React.Component { const pane8 = this.createContentPane('content8', 'Content Pane 2'); const pane9 = this.createContentPane('content9', 'Floating Pane'); - const tabPane1 = this.createTabPane(IgcSplitPaneOrientation.horizontal, [ pane3, pane4 ], 200); + const tabPane1 = this.createTabPane(IgrSplitPaneOrientation.horizontal, [ pane3, pane4 ], 200); - const splitPane1 = this.createSplitPane(IgcSplitPaneOrientation.vertical, [ pane1, pane2 ]); - const splitPane2 = this.createSplitPane(IgcSplitPaneOrientation.vertical, [ tabPane1, contentPane5 ], 200); + const splitPane1 = this.createSplitPane(IgrSplitPaneOrientation.vertical, [ pane1, pane2 ]); + const splitPane2 = this.createSplitPane(IgrSplitPaneOrientation.vertical, [ tabPane1, contentPane5 ], 200); - this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent; + this.dockManager = document.getElementById("dockManager") as IgrDockManager; this.dockManager.layout = { rootPane: { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, panes: [ splitPane1, // or: // { - // type: IgcDockManagerPaneType.splitPane, - // orientation: IgcSplitPaneOrientation.vertical, + // type: IgrDockManagerPaneType.splitPane, + // orientation: IgrSplitPaneOrientation.vertical, // panes: [ pane1, pane2 ] // }, splitPane2, // or: // { - // type: IgcDockManagerPaneType.splitPane, - // orientation: IgcSplitPaneOrientation.vertical, + // type: IgrDockManagerPaneType.splitPane, + // orientation: IgrSplitPaneOrientation.vertical, // size: 200, // panes: [ // tabPane1, @@ -124,11 +109,11 @@ export default class DockManagerOverview extends React.Component { // ] // }, { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, panes: [ { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, size: 200, panes: [ pane6, pane7 ] }, @@ -139,8 +124,8 @@ export default class DockManagerOverview extends React.Component { }, floatingPanes: [ { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, floatingHeight: 150, floatingWidth: 250, floatingLocation: { x: 300, y: 200 }, diff --git a/samples/layouts/dock-manager/styling/package.json b/samples/layouts/dock-manager/styling/package.json index 7cd02935e8..d8a4243721 100644 --- a/samples/layouts/dock-manager/styling/package.json +++ b/samples/layouts/dock-manager/styling/package.json @@ -12,10 +12,9 @@ "test": "vitest" }, "dependencies": { - "igniteui-dockmanager": "^1.17.0", - "igniteui-react": "^19.3.0", + "igniteui-react": "^19.4.0-rc.0", "igniteui-react-core": "19.3.0-beta.0", - "igniteui-webcomponents": "^6.3.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/dock-manager/styling/src/index.tsx b/samples/layouts/dock-manager/styling/src/index.tsx index 840b813814..bbe820a1ee 100644 --- a/samples/layouts/dock-manager/styling/src/index.tsx +++ b/samples/layouts/dock-manager/styling/src/index.tsx @@ -2,38 +2,24 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './DockManagerStyles.css'; -import { IgcDockManagerComponent, IgcContentPane, IgcDockManagerLayout, IgcSplitPane, IgcTabGroupPane } from "igniteui-dockmanager"; -import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "igniteui-dockmanager"; -import { defineCustomElements } from "igniteui-dockmanager/loader"; +import { + IgrDockManager, + IgrContentPane, + IgrDockManagerLayout, + IgrDockManagerPaneType, + IgrSplitPane, + IgrSplitPaneOrientation, + IgrTabGroupPane +} from 'igniteui-react-dockmanager'; import { IgrAvatar, IgrButton, IgrCard, IgrCardActions, IgrCardContent, IgrIcon, IgrList, IgrListItem, registerIconFromText } from "igniteui-react" ; -import { IgrAvatarModule, IgrButtonModule, IgrCardModule, IgrIconModule, IgrListModule } from "igniteui-react"; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -IgrAvatarModule.register(); -IgrButtonModule.register(); -IgrCardModule.register(); -IgrIconModule.register(); -IgrListModule.register(); - -/* eslint-disable */ -declare global { - namespace JSX { - // tslint:disable-next-line:interface-name - interface IntrinsicElements { - "igc-dockmanager": any; - } - } -} -/* eslint-enable */ - -defineCustomElements(); - const arrowDown = ""; const arrowUp = ""; export default class DockManagerStyling extends React.Component { - public dockManager: IgcDockManagerComponent; + public dockManager: IgrDockManager; public layouts: any[]; constructor(props: any){ @@ -46,7 +32,7 @@ export default class DockManagerStyling extends React.Component { public render(): JSX.Element { return (
- +
ACCOUNTS {/* */} @@ -518,14 +504,14 @@ export default class DockManagerStyling extends React.Component {
- +
); } - public getContentPane(header: string, contentId: string, headerId: string, floatingHeaderId: string): IgcContentPane { - const pane: IgcContentPane = { - type: IgcDockManagerPaneType.contentPane, + public getContentPane(header: string, contentId: string, headerId: string, floatingHeaderId: string): IgrContentPane { + const pane: IgrContentPane = { + type: IgrDockManagerPaneType.contentPane, header: header, contentId: contentId, headerId: headerId, @@ -539,7 +525,7 @@ export default class DockManagerStyling extends React.Component { return pane; } - public getLayout1() : IgcDockManagerLayout{ + public getLayout1() : IgrDockManagerLayout{ const accountPane = this.getContentPane("ACCOUNTS", "content1", "accountHeader", "accountFloatingHeader"); const topMoversPane = this.getContentPane("TODAY'S TOP MOVERS", "content2", "todayTopMovers", "todayTopMoversFloatingHeader"); @@ -547,61 +533,61 @@ export default class DockManagerStyling extends React.Component { const popularStocksPane = this.getContentPane("POPULAR STOCKS", "content4", "popularStocksHeader", "popularStocksFloatingHeader"); const cardsPane = this.getContentPane("PHYSICAL CARDS", "content5", "cardsHeader", "cardsFloatingHeader"); - const splitPane1: IgcSplitPane = + const splitPane1: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, panes: [] }; - const splitPane2: IgcSplitPane = + const splitPane2: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [] }; - const splitPane3: IgcSplitPane = + const splitPane3: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, size: 300, panes: [] }; //AccountPane, CardsPane - const splitPane4: IgcSplitPane = + const splitPane4: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [] }; //TransactionsPane - const splitPane5: IgcSplitPane = + const splitPane5: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [] }; //Top Movers - const splitPane6: IgcSplitPane = + const splitPane6: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, size: 130, panes: [] }; //Popular Stocks - const splitPane7: IgcSplitPane = + const splitPane7: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 200, panes: [] }; @@ -624,14 +610,14 @@ export default class DockManagerStyling extends React.Component { splitPane1.panes.push(splitPane2); splitPane1.panes.push(splitPane7); - const layout: IgcDockManagerLayout = { + const layout: IgrDockManagerLayout = { rootPane: splitPane1 } return layout; } - public getLayout2() : IgcDockManagerLayout + public getLayout2() : IgrDockManagerLayout { const accountPane = this.getContentPane("ACCOUNTS", "content1", "accountHeader", "accountFloatingHeader"); const topMoversPane = this.getContentPane("TODAY'S TOP MOVERS", "content2", "todayTopMovers", "todayTopMoversFloatingHeader"); @@ -640,60 +626,60 @@ export default class DockManagerStyling extends React.Component { const cardsPane = this.getContentPane("PHYSICAL CARDS", "content5", "cardsHeader", "cardsFloatingHeader"); - const splitPane1: IgcSplitPane = + const splitPane1: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, panes: [] }; - const splitPane2: IgcSplitPane = + const splitPane2: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [] }; - const splitPane3: IgcSplitPane = + const splitPane3: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, size: 300, panes: [] }; //Transactions Pane, TGP1 - const splitPane4: IgcSplitPane = + const splitPane4: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [] }; //Popular Stocks Pane - const splitPane5: IgcSplitPane = + const splitPane5: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [] }; //Top Movers - const splitPane6: IgcSplitPane = + const splitPane6: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, size: 130, panes: [] }; //AccountPane, CardsPane - const tabGroupPane1: IgcTabGroupPane = + const tabGroupPane1: IgrTabGroupPane = { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, size: 100, panes: [] }; @@ -716,14 +702,14 @@ export default class DockManagerStyling extends React.Component { splitPane1.panes.push(splitPane2); - const layout: IgcDockManagerLayout = { + const layout: IgrDockManagerLayout = { rootPane: splitPane1 }; return layout; } - public getLayout3() : IgcDockManagerLayout + public getLayout3() : IgrDockManagerLayout { const accountPane = this.getContentPane("ACCOUNTS", "content1", "accountHeader", "accountFloatingHeader"); const topMoversPane = this.getContentPane("TODAY'S TOP MOVERS", "content2", "todayTopMovers", "todayTopMoversFloatingHeader"); @@ -731,23 +717,23 @@ export default class DockManagerStyling extends React.Component { const popularStocksPane = this.getContentPane("POPULAR STOCKS", "content4", "popularStocksHeader", "popularStocksFloatingHeader"); const cardsPane = this.getContentPane("PHYSICAL CARDS", "content5", "cardsHeader", "cardsFloatingHeader"); - const splitPane1: IgcSplitPane = + const splitPane1: IgrSplitPane = { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, panes: [] }; - const tabGroupPane1: IgcTabGroupPane = + const tabGroupPane1: IgrTabGroupPane = { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, size: 200, panes: [] }; - const tabGroupPane2: IgcTabGroupPane = + const tabGroupPane2: IgrTabGroupPane = { - type: IgcDockManagerPaneType.tabGroupPane, + type: IgrDockManagerPaneType.tabGroupPane, size: 300, panes: [] }; @@ -762,7 +748,7 @@ export default class DockManagerStyling extends React.Component { splitPane1.panes.push(tabGroupPane1); splitPane1.panes.push(tabGroupPane2); - const layout: IgcDockManagerLayout = { + const layout: IgrDockManagerLayout = { rootPane: splitPane1 }; @@ -785,11 +771,11 @@ export default class DockManagerStyling extends React.Component { public componentDidMount() { - const layout1: IgcDockManagerLayout = this.getLayout1(); - const layout2: IgcDockManagerLayout = this.getLayout2(); - const layout3: IgcDockManagerLayout = this.getLayout3(); + const layout1: IgrDockManagerLayout = this.getLayout1(); + const layout2: IgrDockManagerLayout = this.getLayout2(); + const layout3: IgrDockManagerLayout = this.getLayout3(); - this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent; + this.dockManager = document.getElementById("dockManager") as IgrDockManager; window.onresize = this.onSampleResize; diff --git a/samples/layouts/dock-manager/updating-panes/package.json b/samples/layouts/dock-manager/updating-panes/package.json index 90b078eae7..a5d59b1391 100644 --- a/samples/layouts/dock-manager/updating-panes/package.json +++ b/samples/layouts/dock-manager/updating-panes/package.json @@ -12,11 +12,10 @@ "test": "vitest" }, "dependencies": { - "igniteui-dockmanager": "^1.17.0", "igniteui-react-charts": "19.3.0-beta.0", "igniteui-react-core": "19.3.0-beta.0", + "igniteui-react-dockmanager": "^19.4.0-rc.0", "igniteui-react-maps": "19.3.0-beta.0", - "igniteui-webcomponents": "^6.3.0", "react": "^19.2.0", "react-dom": "^19.2.0", "tslib": "^2.4.0" diff --git a/samples/layouts/dock-manager/updating-panes/src/index.tsx b/samples/layouts/dock-manager/updating-panes/src/index.tsx index c808ad9988..243411505d 100644 --- a/samples/layouts/dock-manager/updating-panes/src/index.tsx +++ b/samples/layouts/dock-manager/updating-panes/src/index.tsx @@ -12,22 +12,7 @@ import { IgrDataContext } from 'igniteui-react-core'; import { IgrCategoryChartModule, MarkerType, ToolTipType, YAxisLabelLocation } from "igniteui-react-charts"; import { IgrCategoryChart, CategoryTransitionInMode, CategoryChartType } from "igniteui-react-charts"; import { IgrLegendModule } from "igniteui-react-charts"; -import { IgcDockManagerComponent, IgcContentPane } from "igniteui-dockmanager"; -import { IgcDockManagerPaneType, IgcSplitPaneOrientation } from "igniteui-dockmanager"; -import { defineCustomElements } from "igniteui-dockmanager/loader"; - -/* eslint-disable */ -declare global { - namespace JSX { - // tslint:disable-next-line:interface-name - interface IntrinsicElements { - "igc-dockmanager": any; - } - } -} -/* eslint-enable */ - -defineCustomElements(); +import { IgrDockManager, IgrContentPane, IgrDockManagerPaneType, IgrSplitPaneOrientation } from 'igniteui-react-dockmanager'; IgrCategoryChartModule.register(); IgrGeographicMapModule.register(); @@ -37,19 +22,19 @@ IgrLegendModule.register(); export default class DockManagerUpdatingPanes extends React.Component { private chart: IgrCategoryChart; private map: IgrGeographicMap; - private dockManager: IgcDockManagerComponent; + private dockManager: IgrDockManager; private employeesDatabase = DockManagerSharedData.getEmployees(60); private employeeListContainer: HTMLDivElement; - private employeeListPane: IgcContentPane; + private employeeListPane: IgrContentPane; private employeesList: HTMLDivElement[] = []; private productivityChart: IgrCategoryChart; - private productivityChartPane: IgcContentPane; + private productivityChartPane: IgrContentPane; private productivityChartContainer: HTMLDivElement; private geoLocationMap: IgrGeographicMap; - private geoLocationMapPane: IgcContentPane; + private geoLocationMapPane: IgrContentPane; private geoLocationMapContainer: HTMLDivElement; private geoLocationSeries: IgrGeographicSymbolSeries; @@ -58,6 +43,7 @@ export default class DockManagerUpdatingPanes extends React.Component this.mapRef = this.mapRef.bind(this); this.chartRef = this.chartRef.bind(this); + this.dockManagerRef = this.dockManagerRef.bind(this); this.createEmployeeList = this.createEmployeeList.bind(this); this.createLocationMapTooltip = this.createLocationMapTooltip.bind(this); @@ -70,7 +56,7 @@ export default class DockManagerUpdatingPanes extends React.Component public render(): JSX.Element { return (
- +
width="100%" height="100%"/>
- +
); } private chartRef(chart: IgrCategoryChart) { this.chart = chart; - if (this.chart && this.map) { + if (this.chart && this.map && this.dockManager) { this.onReady(); } } private mapRef(map: IgrGeographicMap) { this.map = map; - if (this.chart && this.map) { + if (this.chart && this.map && this.dockManager) { + this.onReady(); + } + } + + private dockManagerRef(dockManager: IgrDockManager) { + this.dockManager = dockManager; + if (this.chart && this.map && this.dockManager) { this.onReady(); } } @@ -127,38 +120,37 @@ export default class DockManagerUpdatingPanes extends React.Component this.productivityChartPane = { size: 150, header: "EMPLOYEE PRODUCTIVITY", - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: "productivityChartContainer" }; this.geoLocationMapPane = { size: 150, header: "EMPLOYEE LOCATIONS", - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: "geoLocationMapContainer" }; this.employeeListPane = { header: "EMPLOYEE LIST", - type: IgcDockManagerPaneType.contentPane, + type: IgrDockManagerPaneType.contentPane, contentId: "employeeListContainer" }; - this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent; this.dockManager.layout = { rootPane: { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.horizontal, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.horizontal, panes: [ { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 100, panes: [this.employeeListPane] }, { - type: IgcDockManagerPaneType.splitPane, - orientation: IgcSplitPaneOrientation.vertical, + type: IgrDockManagerPaneType.splitPane, + orientation: IgrSplitPaneOrientation.vertical, size: 300, panes: [this.productivityChartPane, this.geoLocationMapPane] }