diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/.eslintrc.js b/samples/grids/hierarchical-grid/cell-editing-custom-theme/.eslintrc.js new file mode 100644 index 0000000000..0280480e75 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/.eslintrc.js @@ -0,0 +1,78 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "no-mixed-spaces-and-tabs": 0, + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-var": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-mixed-spaces-and-tabs": 0, + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/ReadMe.md b/samples/grids/hierarchical-grid/cell-editing-custom-theme/ReadMe.md new file mode 100644 index 0000000000..ed70437c4e --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Cell Editing Custom Theme feature using [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/grids/hierarchical-grid/cell-editing-custom-theme +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/package.json b/samples/grids/hierarchical-grid/cell-editing-custom-theme/package.json new file mode 100644 index 0000000000..97d8eef75d --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/package.json @@ -0,0 +1,46 @@ +{ + "name": "example-ignite-ui-react", + "description": "This project provides example of using Ignite UI for React components", + "author": "Infragistics", + "version": "1.4.0", + "license": "", + "homepage": ".", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.2.0", + "igniteui-react-core": "19.2.2", + "igniteui-react-grids": "^19.2.0", + "igniteui-webcomponents": "^6.2.0", + "lit-html": "^3.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "eslint": "^8.33.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/public/index.html b/samples/grids/hierarchical-grid/cell-editing-custom-theme/public/index.html new file mode 100644 index 0000000000..62f1d228f2 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/sandbox.config.json b/samples/grids/hierarchical-grid/cell-editing-custom-theme/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/NwindData.json b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/NwindData.json new file mode 100644 index 0000000000..c00b03ec8d --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/NwindData.json @@ -0,0 +1,458 @@ +[ + { + "ProductID": 1, + "ProductName": "Chai", + "SupplierID": 1, + "CategoryID": 1, + "QuantityPerUnit": "10 boxes x 20 bags", + "UnitPrice": 18, + "UnitsInStock": 39, + "UnitsOnOrder": 30, + "ReorderLevel": 10, + "Discontinued": false, + "OrderDate": "2012-02-12", + "Rating": 5, + "Locations": [ + { + "Shop": "Fun-Tasty Co.", + "LastInventory": "2018-06-12" + }, + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + } + ] + }, + { + "ProductID": 2, + "ProductName": "Chang", + "SupplierID": 1, + "CategoryID": 1, + "QuantityPerUnit": "24 - 12 oz bottles", + "UnitPrice": 19, + "UnitsInStock": 17, + "UnitsOnOrder": 40, + "ReorderLevel": 25, + "Discontinued": true, + "OrderDate": "2003-03-17", + "Rating": 5, + "Locations": [ + { + "Shop": "Super Market", + "LastInventory": "2018-09-09" + } + ] + }, + { + "ProductID": 3, + "ProductName": "Aniseed Syrup", + "SupplierID": 1, + "CategoryID": 2, + "QuantityPerUnit": "12 - 550 ml bottles", + "UnitPrice": 10, + "UnitsInStock": 13, + "UnitsOnOrder": 70, + "ReorderLevel": 25, + "Discontinued": false, + "OrderDate": "2006-03-17", + "Rating": 3, + "Locations": [ + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + }, + { + "Shop": "Street Market", + "LastInventory": "2018-12-12" + }, + { + "Shop": "24/7 Market", + "LastInventory": "2018-11-11" + } + ] + }, + { + "ProductID": 4, + "ProductName": "Chef Antons Cajun Seasoning", + "SupplierID": 2, + "CategoryID": 2, + "QuantityPerUnit": "48 - 6 oz jars", + "UnitPrice": 22, + "UnitsInStock": 53, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2016-03-17", + "Rating": 3, + "Locations": [ + { + "Shop": "Fun-Tasty Co.", + "LastInventory": "2018-06-12" + }, + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + }, + { + "Shop": "Street Market", + "LastInventory": "2018-12-12" + } + ] + }, + { + "ProductID": 5, + "ProductName": "Chef Antons Gumbo Mix", + "SupplierID": 2, + "CategoryID": 2, + "QuantityPerUnit": "36 boxes", + "UnitPrice": 21.35, + "UnitsInStock": 0, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": true, + "OrderDate": "2011-11-11", + "Rating": 5, + "Locations": [ + { + "Shop": "Super Market", + "LastInventory": "2018-09-09" + } + ] + }, + { + "ProductID": 6, + "ProductName": "Grandmas Boysenberry Spread", + "SupplierID": 3, + "CategoryID": 2, + "QuantityPerUnit": "12 - 8 oz jars", + "UnitPrice": 25, + "UnitsInStock": 0, + "UnitsOnOrder": 30, + "ReorderLevel": 25, + "Discontinued": false, + "OrderDate": "2017-12-17", + "Rating": 4, + "Locations": [ + { + "Shop": "Super Market", + "LastInventory": "2018-09-09" + } + ] + }, + { + "ProductID": 7, + "ProductName": "Uncle Bobs Organic Dried Pears", + "SupplierID": 3, + "CategoryID": 7, + "QuantityPerUnit": "12 - 1 lb pkgs.", + "UnitPrice": 30, + "UnitsInStock": 150, + "UnitsOnOrder": 30, + "ReorderLevel": 10, + "Discontinued": false, + "OrderDate": "2016-07-17", + "Rating": 5, + "Locations": [ + { + "Shop": "Fun-Tasty Co.", + "LastInventory": "2018-06-12" + }, + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + }, + { + "Shop": "Street Market", + "LastInventory": "2018-12-12" + } + ] + }, + { + "ProductID": 8, + "ProductName": "Northwoods Cranberry Sauce", + "SupplierID": 3, + "CategoryID": 2, + "QuantityPerUnit": "12 - 12 oz jars", + "UnitPrice": 40, + "UnitsInStock": 6, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2018-01-17", + "Rating": 4, + "Locations": [ + { + "Shop": "Fun-Tasty Co.", + "LastInventory": "2018-06-12" + }, + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + } + ] + }, + { + "ProductID": 9, + "ProductName": "Mishi Kobe Niku", + "SupplierID": 4, + "CategoryID": 6, + "QuantityPerUnit": "18 - 500 g pkgs.", + "UnitPrice": 97, + "UnitsInStock": 29, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": true, + "OrderDate": "2010-02-17", + "Rating": 4, + "Locations": [ + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + } + ] + }, + { + "ProductID": 10, + "ProductName": "Ikura", + "SupplierID": 4, + "CategoryID": 8, + "QuantityPerUnit": "12 - 200 ml jars", + "UnitPrice": 31, + "UnitsInStock": 31, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2008-05-17", + "Rating": 3, + "Locations": [ + { + "Shop": "Wall Market", + "LastInventory": "2018-12-06" + } + ] + }, + { + "ProductID": 11, + "ProductName": "Queso Cabrales", + "SupplierID": 5, + "CategoryID": 4, + "QuantityPerUnit": "1 kg pkg.", + "UnitPrice": 21, + "UnitsInStock": 22, + "UnitsOnOrder": 30, + "ReorderLevel": 30, + "Discontinued": false, + "OrderDate": "2009-01-17", + "Rating": 5, + "Locations": [ + { + "Shop": "Fun-Tasty Co.", + "LastInventory": "2018-06-12" + }, + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + } + ] + }, + { + "ProductID": 12, + "ProductName": "Queso Manchego La Pastora", + "SupplierID": 5, + "CategoryID": 4, + "QuantityPerUnit": "10 - 500 g pkgs.", + "UnitPrice": 38, + "UnitsInStock": 86, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2015-11-17", + "Rating": 3, + "Locations": [ + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + } + ] + }, + { + "ProductID": 13, + "ProductName": "Konbu", + "SupplierID": 6, + "CategoryID": 8, + "QuantityPerUnit": "2 kg box", + "UnitPrice": 6, + "UnitsInStock": 24, + "UnitsOnOrder": 30, + "ReorderLevel": 5, + "Discontinued": false, + "OrderDate": "2015-03-17", + "Rating": 2, + "Locations": [ + { + "Shop": "Super Market", + "LastInventory": "2018-09-09" + } + ] + }, + { + "ProductID": 14, + "ProductName": "Tofu", + "SupplierID": 6, + "CategoryID": 7, + "QuantityPerUnit": "40 - 100 g pkgs.", + "UnitPrice": 23.25, + "UnitsInStock": 35, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2017-06-17", + "Rating": 4, + "Locations": [ + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + }, + { + "Shop": "Street Market", + "LastInventory": "2018-12-12" + } + ] + }, + { + "ProductID": 15, + "ProductName": "Genen Shouyu", + "SupplierID": 6, + "CategoryID": 2, + "QuantityPerUnit": "24 - 250 ml bottles", + "UnitPrice": 15.5, + "UnitsInStock": 39, + "UnitsOnOrder": 30, + "ReorderLevel": 5, + "Discontinued": false, + "OrderDate": "2014-03-17", + "Rating": 4, + "Locations": [ + { + "Shop": "Local Market", + "LastInventory": "2018-07-03" + }, + { + "Shop": "Wall Market", + "LastInventory": "2018-12-06" + } + ] + }, + { + "ProductID": 16, + "ProductName": "Pavlova", + "SupplierID": 7, + "CategoryID": 3, + "QuantityPerUnit": "32 - 500 g boxes", + "UnitPrice": 17.45, + "UnitsInStock": 29, + "UnitsOnOrder": 30, + "ReorderLevel": 10, + "Discontinued": false, + "OrderDate": "2018-03-28", + "Rating": 2, + "Locations": [ + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + }, + { + "Shop": "Street Market", + "LastInventory": "2018-12-12" + }, + { + "Shop": "24/7 Market", + "LastInventory": "2018-11-11" + } + ] + }, + { + "ProductID": 17, + "ProductName": "Alice Mutton", + "SupplierID": 7, + "CategoryID": 6, + "QuantityPerUnit": "20 - 1 kg tins", + "UnitPrice": 39, + "UnitsInStock": 0, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": true, + "OrderDate": "2015-08-17", + "Rating": 2, + "Locations": [ + { + "Shop": "Farmer Market", + "LastInventory": "2018-04-04" + } + ] + }, + { + "ProductID": 18, + "ProductName": "Carnarvon Tigers", + "SupplierID": 7, + "CategoryID": 8, + "QuantityPerUnit": "16 kg pkg.", + "UnitPrice": 62.5, + "UnitsInStock": 42, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2005-09-27", + "Rating": 2, + "Locations": [ + { + "Shop": "24/7 Market", + "LastInventory": "2018-11-11" + }, + { + "Shop": "Super Market", + "LastInventory": "2018-09-09" + } + ] + }, + { + "ProductID": 19, + "ProductName": "Teatime Chocolate Biscuits", + "SupplierID": 8, + "CategoryID": 3, + "QuantityPerUnit": "", + "UnitPrice": 9.2, + "UnitsInStock": 25, + "UnitsOnOrder": 30, + "ReorderLevel": 5, + "Discontinued": false, + "OrderDate": "2001-03-17", + "Rating": 2, + "Locations": [ + { + "Shop": "Local Market", + "LastInventory": "2018-07-03" + } + ] + }, + { + "ProductID": 20, + "ProductName": "Sir Rodneys Marmalade", + "SupplierID": 8, + "CategoryID": 3, + "QuantityPerUnit": "4 - 100 ml jars", + "UnitPrice": 4.5, + "UnitsInStock": 40, + "UnitsOnOrder": 30, + "ReorderLevel": 0, + "Discontinued": false, + "OrderDate": "2005-03-17", + "Rating": 5, + "Locations": [ + { + "Shop": "Super Market", + "LastInventory": "2018-09-09" + } + ] + } +] \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/index.css b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/index.css new file mode 100644 index 0000000000..6699c5e8bf --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/index.css @@ -0,0 +1,38 @@ +:root { + /* Base colors */ + --white: #fff; + --blue: #4567bb; + --orange: #cc6600; + --gold: #ffcd0f; + --gray: #efefef; + --dark-gray: #404040; + --border-gray: #555555; + + /* Color Palette */ + --palette-primary: var(--white); + --palette-secondary: var(--blue); + --palette-surface: var(--gray); + --palette-accent: var(--gold); + --palette-highlight: var(--orange); + --palette-background: var(--dark-gray); + --palette-border: var(--border-gray); + + /* Secondary color variations */ + --palette-secondary-200: #6B87DD; + --palette-secondary-400: var(--blue); + --palette-secondary-600: #3A4FA0; +} + +.custom-grid-palette-theme { + --ig-grid-cell-editing-background: var(--palette-highlight); + --ig-grid-cell-edited-value-color: var(--palette-primary); + --ig-grid-cell-active-border-color: var(--palette-primary); + --ig-grid-edit-mode-color: var(--palette-secondary-200); + + --ig-input-text-color: var(--palette-primary); + --ig-input-background: var(--palette-background); + --ig-input-border-color: var(--palette-border); + --ig-input-focused-border-color: var(--palette-accent); + + --ig-size: var(--ig-size-medium); +} diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/index.tsx b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/index.tsx new file mode 100644 index 0000000000..c361eb5d45 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/index.tsx @@ -0,0 +1,127 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrHierarchicalGrid, IgrPaginator, IgrColumn, IgrRowIsland } from 'igniteui-react-grids'; +import { ComponentRenderer, WebHierarchicalGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-react-core'; +import NwindData from './NwindData.json'; + +import 'igniteui-react-grids/grids/themes/dark/bootstrap.css'; + +export default class Sample extends React.Component { + private grid: IgrHierarchicalGrid + private gridRef(r: IgrHierarchicalGrid) { + this.grid = r; + this.setState({}); + } + + constructor(props: any) { + super(props); + + this.gridRef = this.gridRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+ ); + } + + private _nwindData: any[] = NwindData; + public get nwindData(): any[] { + return this._nwindData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + WebHierarchicalGridDescriptionModule.register(context); + WebPaginatorDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/react-app-env.d.ts b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/grids/hierarchical-grid/cell-editing-custom-theme/tsconfig.json b/samples/grids/hierarchical-grid/cell-editing-custom-theme/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-editing-custom-theme/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/.eslintrc.js b/samples/grids/tree-grid/cell-editing-custom-theme/.eslintrc.js new file mode 100644 index 0000000000..0280480e75 --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/.eslintrc.js @@ -0,0 +1,78 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "no-mixed-spaces-and-tabs": 0, + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-var": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-mixed-spaces-and-tabs": 0, + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/ReadMe.md b/samples/grids/tree-grid/cell-editing-custom-theme/ReadMe.md new file mode 100644 index 0000000000..e5b344648f --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Cell Editing Custom Theme feature using [Tree Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/grids/tree-grid/cell-editing-custom-theme +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/package.json b/samples/grids/tree-grid/cell-editing-custom-theme/package.json new file mode 100644 index 0000000000..97d8eef75d --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/package.json @@ -0,0 +1,46 @@ +{ + "name": "example-ignite-ui-react", + "description": "This project provides example of using Ignite UI for React components", + "author": "Infragistics", + "version": "1.4.0", + "license": "", + "homepage": ".", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.2.0", + "igniteui-react-core": "19.2.2", + "igniteui-react-grids": "^19.2.0", + "igniteui-webcomponents": "^6.2.0", + "lit-html": "^3.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "eslint": "^8.33.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/public/index.html b/samples/grids/tree-grid/cell-editing-custom-theme/public/index.html new file mode 100644 index 0000000000..62f1d228f2 --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/sandbox.config.json b/samples/grids/tree-grid/cell-editing-custom-theme/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/src/EmployeesNestedData.ts b/samples/grids/tree-grid/cell-editing-custom-theme/src/EmployeesNestedData.ts new file mode 100644 index 0000000000..066499ed3f --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/src/EmployeesNestedData.ts @@ -0,0 +1,98 @@ +export class EmployeesNestedDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public ID: number; + public Age: number; + public Salary: number; + public Productivity: number; + public City: string; + public Country: string; + public Phone: string; + public HireDate: string; + public Name: string; + public Title: string; + public Employees: EmployeesNestedDataItem_EmployeesItem[]; + +} +export class EmployeesNestedDataItem_EmployeesItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public Age: number; + public Salary: number; + public Productivity: number; + public City: string; + public Country: string; + public Phone: string; + public HireDate: string; + public ID: number; + public Name: string; + public Title: string; + +} +export class EmployeesNestedData extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new EmployeesNestedDataItem({ ID: 1, Age: 55, Salary: 80000, Productivity: 90, City: `Berlin`, Country: `Germany`, Phone: `609-202-505`, HireDate: `2008-03-20`, Name: `John Winchester`, Title: `Development Manager`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 43, Salary: 70000, Productivity: 80, City: `Hamburg`, Country: `Germany`, Phone: `609-444-555`, HireDate: `2011-06-03`, ID: 3, Name: `Michael Burke`, Title: `Senior Software Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 29, Salary: 60000, Productivity: 80, City: `Munich`, Country: `Germany`, Phone: `609-333-444`, HireDate: `2009-06-19`, ID: 2, Name: `Thomas Anderson`, Title: `Senior Software Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 31, Salary: 90000, Productivity: 80, City: `Warasw`, Country: `Poland`, Phone: `609-222-205`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, Title: `Software Development Team Lead` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 35, Salary: 70000, Productivity: 70, City: `Koln`, Country: `Germany`, Phone: `609-502-525`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, Title: `Senior Software Developer` })] + }), + new EmployeesNestedDataItem({ ID: 4, Age: 42, Salary: 90000, Productivity: 80, City: `Kielce`, Country: `Poland`, Phone: `609-202-505`, HireDate: `2014-01-22`, Name: `Ana Sanders`, Title: `CEO`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 44, Salary: 80000, Productivity: 80, City: `Warasw`, Country: `Poland`, Phone: `609-202-505`, HireDate: `2014-04-04`, ID: 14, Name: `Laurence Johnson`, Title: `Director` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 25, Salary: 85000, Productivity: 55, City: `Paris`, Country: `France`, Phone: `609-202-505`, HireDate: `2017-11-09`, ID: 5, Name: `Elizabeth Richards`, Title: `Vice President` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 39, Salary: 88000, Productivity: 88, City: `London`, Country: `UK`, Phone: `609-202-505`, HireDate: `2010-03-22`, ID: 13, Name: `Trevor Ashworth`, Title: `Director` })] + }), + new EmployeesNestedDataItem({ ID: 18, Age: 49, Salary: 77000, Productivity: 70, City: `Manchester`, Country: `UK`, Phone: `222-555-577`, HireDate: `2014-01-22`, Name: `Victoria Lincoln`, Title: `Senior Accountant`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 43, Salary: 70000, Productivity: 80, City: `Hamburg`, Country: `Germany`, Phone: `609-444-555`, HireDate: `2011-06-03`, ID: 23, Name: `Thomas Burke`, Title: `Senior Accountant` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 29, Salary: 60000, Productivity: 80, City: `Munich`, Country: `Germany`, Phone: `609-333-444`, HireDate: `2009-06-19`, ID: 22, Name: `Michael Anderson`, Title: `Junior Accountant` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 31, Salary: 90000, Productivity: 80, City: `Warasw`, Country: `Poland`, Phone: `609-222-205`, HireDate: `2014-08-18`, ID: 21, Name: `Roland Reyes`, Title: `Accountant Team Lead` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 35, Salary: 70000, Productivity: 70, City: `Koln`, Country: `Germany`, Phone: `609-502-525`, HireDate: `2015-09-17`, ID: 24, Name: `Monica Mendel`, Title: `Senior Software Developer` })] + }), + new EmployeesNestedDataItem({ ID: 10, Age: 61, Salary: 85000, Productivity: 890, City: `Lyon`, Country: `France`, Phone: `259-266-887`, HireDate: `2010-01-01`, Name: `Yang Wang`, Title: `Localization Developer`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 31, Salary: 90000, Productivity: 80, City: `Warasw`, Country: `Poland`, Phone: `609-222-205`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, Title: `Software Development Team Lead` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 35, Salary: 70000, Productivity: 70, City: `Koln`, Country: `Germany`, Phone: `609-502-525`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, Title: `Senior Software Developer` })] + }), + new EmployeesNestedDataItem({ ID: 35, Age: 35, Salary: 75000, Productivity: 75, City: `Warasw`, Country: `Poland`, Phone: `688-244-844`, HireDate: `2014-01-22`, Name: `Janine Munoz`, Title: `HR`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 43, Salary: 70000, Productivity: 80, City: `Hamburg`, Country: `Germany`, Phone: `609-444-555`, HireDate: `2011-06-03`, ID: 3, Name: `Michael Burke`, Title: `Senior Software Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 31, Salary: 90000, Productivity: 80, City: `Warasw`, Country: `Poland`, Phone: `609-222-205`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, Title: `Software Development Team Lead` })] + }), + new EmployeesNestedDataItem({ ID: 10, Age: 49, Salary: 95000, Productivity: 80, City: `Krakow`, Country: `Poland`, Phone: `677-266-555`, HireDate: `2010-01-01`, Name: `Yang Wang`, Title: `Sales Manager`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 29, Salary: 60000, Productivity: 80, City: `Munich`, Country: `Germany`, Phone: `609-333-444`, HireDate: `2009-06-19`, ID: 2, Name: `Thomas Anderson`, Title: `Senior Software Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 35, Salary: 70000, Productivity: 70, City: `Koln`, Country: `Germany`, Phone: `609-502-525`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, Title: `Senior Software Developer` })] + }), + new EmployeesNestedDataItem({ ID: 25, Age: 38, Salary: 92000, Productivity: 85, City: `Tokyo`, Country: `Japan`, Phone: `81-3-555-1234`, HireDate: `2012-05-15`, Name: `Akira Tanaka`, Title: `Marketing Director`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 32, Salary: 65000, Productivity: 78, City: `Osaka`, Country: `Japan`, Phone: `81-6-555-9876`, HireDate: `2016-08-20`, ID: 26, Name: `Yuki Sato`, Title: `Marketing Specialist` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 28, Salary: 58000, Productivity: 82, City: `Kyoto`, Country: `Japan`, Phone: `81-75-555-4567`, HireDate: `2018-03-10`, ID: 27, Name: `Hiroshi Yamamoto`, Title: `Digital Marketing Analyst` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 34, Salary: 72000, Productivity: 90, City: `Tokyo`, Country: `Japan`, Phone: `81-3-555-7890`, HireDate: `2015-11-05`, ID: 28, Name: `Kenji Watanabe`, Title: `Senior Marketing Manager` })] + }), + new EmployeesNestedDataItem({ ID: 30, Age: 45, Salary: 88000, Productivity: 87, City: `Sydney`, Country: `Australia`, Phone: `61-2-555-1111`, HireDate: `2011-09-12`, Name: `Sarah Mitchell`, Title: `Product Manager`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 30, Salary: 68000, Productivity: 85, City: `Melbourne`, Country: `Australia`, Phone: `61-3-555-2222`, HireDate: `2017-01-18`, ID: 31, Name: `James Wilson`, Title: `Product Designer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 27, Salary: 62000, Productivity: 79, City: `Brisbane`, Country: `Australia`, Phone: `61-7-555-3333`, HireDate: `2019-06-25`, ID: 32, Name: `Emma Thompson`, Title: `UX Designer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 33, Salary: 74000, Productivity: 88, City: `Sydney`, Country: `Australia`, Phone: `61-2-555-4444`, HireDate: `2016-04-30`, ID: 33, Name: `David Brown`, Title: `Senior Product Analyst` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 29, Salary: 65000, Productivity: 83, City: `Perth`, Country: `Australia`, Phone: `61-8-555-5555`, HireDate: `2018-10-14`, ID: 34, Name: `Lisa Davis`, Title: `Product Coordinator` })] + }), + new EmployeesNestedDataItem({ ID: 40, Age: 52, Salary: 105000, Productivity: 92, City: `Toronto`, Country: `Canada`, Phone: `1-416-555-6666`, HireDate: `2009-02-28`, Name: `Robert Chen`, Title: `Engineering Director`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 36, Salary: 82000, Productivity: 89, City: `Vancouver`, Country: `Canada`, Phone: `1-604-555-7777`, HireDate: `2013-07-16`, ID: 41, Name: `Jennifer Lee`, Title: `Senior DevOps Engineer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 31, Salary: 75000, Productivity: 86, City: `Montreal`, Country: `Canada`, Phone: `1-514-555-8888`, HireDate: `2017-12-03`, ID: 42, Name: `Alexandre Dubois`, Title: `Full Stack Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 28, Salary: 68000, Productivity: 84, City: `Calgary`, Country: `Canada`, Phone: `1-403-555-9999`, HireDate: `2019-09-20`, ID: 43, Name: `Maria Rodriguez`, Title: `Frontend Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 34, Salary: 78000, Productivity: 91, City: `Toronto`, Country: `Canada`, Phone: `1-416-555-0000`, HireDate: `2015-05-11`, ID: 44, Name: `Kevin O'Connor`, Title: `Backend Developer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 37, Salary: 85000, Productivity: 93, City: `Ottawa`, Country: `Canada`, Phone: `1-613-555-1010`, HireDate: `2012-11-08`, ID: 45, Name: `Stephanie Kim`, Title: `Senior Software Architect` })] + }), + new EmployeesNestedDataItem({ ID: 50, Age: 41, Salary: 96000, Productivity: 88, City: `Stockholm`, Country: `Sweden`, Phone: `46-8-555-2020`, HireDate: `2013-03-14`, Name: `Lars Andersson`, Title: `Quality Assurance Manager`, Employees: [ + new EmployeesNestedDataItem_EmployeesItem({ Age: 33, Salary: 71000, Productivity: 87, City: `Gothenburg`, Country: `Sweden`, Phone: `46-31-555-3030`, HireDate: `2016-09-22`, ID: 51, Name: `Anna Johansson`, Title: `Senior QA Engineer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 29, Salary: 64000, Productivity: 81, City: `Malmo`, Country: `Sweden`, Phone: `46-40-555-4040`, HireDate: `2018-12-17`, ID: 52, Name: `Erik Nilsson`, Title: `QA Automation Engineer` }), + new EmployeesNestedDataItem_EmployeesItem({ Age: 26, Salary: 58000, Productivity: 78, City: `Uppsala`, Country: `Sweden`, Phone: `46-18-555-5050`, HireDate: `2020-04-06`, ID: 53, Name: `Sofia Lindberg`, Title: `Junior QA Tester` })] + }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/src/index.css b/samples/grids/tree-grid/cell-editing-custom-theme/src/index.css new file mode 100644 index 0000000000..6699c5e8bf --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/src/index.css @@ -0,0 +1,38 @@ +:root { + /* Base colors */ + --white: #fff; + --blue: #4567bb; + --orange: #cc6600; + --gold: #ffcd0f; + --gray: #efefef; + --dark-gray: #404040; + --border-gray: #555555; + + /* Color Palette */ + --palette-primary: var(--white); + --palette-secondary: var(--blue); + --palette-surface: var(--gray); + --palette-accent: var(--gold); + --palette-highlight: var(--orange); + --palette-background: var(--dark-gray); + --palette-border: var(--border-gray); + + /* Secondary color variations */ + --palette-secondary-200: #6B87DD; + --palette-secondary-400: var(--blue); + --palette-secondary-600: #3A4FA0; +} + +.custom-grid-palette-theme { + --ig-grid-cell-editing-background: var(--palette-highlight); + --ig-grid-cell-edited-value-color: var(--palette-primary); + --ig-grid-cell-active-border-color: var(--palette-primary); + --ig-grid-edit-mode-color: var(--palette-secondary-200); + + --ig-input-text-color: var(--palette-primary); + --ig-input-background: var(--palette-background); + --ig-input-border-color: var(--palette-border); + --ig-input-focused-border-color: var(--palette-accent); + + --ig-size: var(--ig-size-medium); +} diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/src/index.tsx b/samples/grids/tree-grid/cell-editing-custom-theme/src/index.tsx new file mode 100644 index 0000000000..7127b7af59 --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/src/index.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrTreeGrid, IgrPaginator, IgrColumn } from 'igniteui-react-grids'; +import { ComponentRenderer, WebTreeGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-react-core'; +import { EmployeesNestedDataItem, EmployeesNestedData } from './EmployeesNestedData'; + +import 'igniteui-react-grids/grids/themes/dark/bootstrap.css'; + +export default class Sample extends React.Component { + private grid: IgrTreeGrid + private gridRef(r: IgrTreeGrid) { + this.grid = r; + this.setState({}); + } + + constructor(props: any) { + super(props); + + this.gridRef = this.gridRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ + + + + + + + + + + + + + +
+
+ ); + } + + private _employeesNestedData: EmployeesNestedData = null; + public get employeesNestedData(): EmployeesNestedData { + if (this._employeesNestedData == null) { + this._employeesNestedData = new EmployeesNestedData(); + } + return this._employeesNestedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + WebTreeGridDescriptionModule.register(context); + WebPaginatorDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/src/react-app-env.d.ts b/samples/grids/tree-grid/cell-editing-custom-theme/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/grids/tree-grid/cell-editing-custom-theme/tsconfig.json b/samples/grids/tree-grid/cell-editing-custom-theme/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/tree-grid/cell-editing-custom-theme/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +}