From 2f9c3897a13fef49cc89c2dd2b77462fe56b3bcb Mon Sep 17 00:00:00 2001 From: Bozhidara Pachilova Date: Wed, 22 Apr 2026 11:19:20 +0300 Subject: [PATCH] feat(splitter): add samples --- browser/src/navigation/SamplesBrowser.json | 2 +- .../grid/data-exporting-indicator/ReadMe.md | 8 +- samples/grids/grid/localization/ReadMe.md | 2 +- .../query-builder/template/README.md | 2 +- .../base/.devcontainer/devcontainer.json | 4 + samples/layouts/splitter/base/.eslintrc.js | 75 ++++++++++++++++++ samples/layouts/splitter/base/README.md | 56 +++++++++++++ samples/layouts/splitter/base/index.html | 11 +++ samples/layouts/splitter/base/package.json | 42 ++++++++++ .../layouts/splitter/base/sandbox.config.json | 5 ++ samples/layouts/splitter/base/src/index.css | 16 ++++ samples/layouts/splitter/base/src/index.tsx | 78 +++++++++++++++++++ samples/layouts/splitter/base/tsconfig.json | 44 +++++++++++ samples/layouts/splitter/base/vite.config.js | 12 +++ .../nested/.devcontainer/devcontainer.json | 4 + samples/layouts/splitter/nested/.eslintrc.js | 75 ++++++++++++++++++ samples/layouts/splitter/nested/README.md | 56 +++++++++++++ samples/layouts/splitter/nested/index.html | 11 +++ samples/layouts/splitter/nested/package.json | 42 ++++++++++ .../splitter/nested/sandbox.config.json | 5 ++ samples/layouts/splitter/nested/src/index.css | 6 ++ samples/layouts/splitter/nested/src/index.tsx | 50 ++++++++++++ samples/layouts/splitter/nested/tsconfig.json | 44 +++++++++++ .../layouts/splitter/nested/vite.config.js | 12 +++ .../styling/.devcontainer/devcontainer.json | 4 + samples/layouts/splitter/styling/.eslintrc.js | 75 ++++++++++++++++++ samples/layouts/splitter/styling/README.md | 56 +++++++++++++ samples/layouts/splitter/styling/index.html | 11 +++ samples/layouts/splitter/styling/package.json | 42 ++++++++++ .../splitter/styling/sandbox.config.json | 5 ++ .../layouts/splitter/styling/src/index.css | 16 ++++ .../layouts/splitter/styling/src/index.tsx | 36 +++++++++ .../layouts/splitter/styling/tsconfig.json | 44 +++++++++++ .../layouts/splitter/styling/vite.config.js | 12 +++ 34 files changed, 956 insertions(+), 7 deletions(-) create mode 100644 samples/layouts/splitter/base/.devcontainer/devcontainer.json create mode 100644 samples/layouts/splitter/base/.eslintrc.js create mode 100644 samples/layouts/splitter/base/README.md create mode 100644 samples/layouts/splitter/base/index.html create mode 100644 samples/layouts/splitter/base/package.json create mode 100644 samples/layouts/splitter/base/sandbox.config.json create mode 100644 samples/layouts/splitter/base/src/index.css create mode 100644 samples/layouts/splitter/base/src/index.tsx create mode 100644 samples/layouts/splitter/base/tsconfig.json create mode 100644 samples/layouts/splitter/base/vite.config.js create mode 100644 samples/layouts/splitter/nested/.devcontainer/devcontainer.json create mode 100644 samples/layouts/splitter/nested/.eslintrc.js create mode 100644 samples/layouts/splitter/nested/README.md create mode 100644 samples/layouts/splitter/nested/index.html create mode 100644 samples/layouts/splitter/nested/package.json create mode 100644 samples/layouts/splitter/nested/sandbox.config.json create mode 100644 samples/layouts/splitter/nested/src/index.css create mode 100644 samples/layouts/splitter/nested/src/index.tsx create mode 100644 samples/layouts/splitter/nested/tsconfig.json create mode 100644 samples/layouts/splitter/nested/vite.config.js create mode 100644 samples/layouts/splitter/styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/splitter/styling/.eslintrc.js create mode 100644 samples/layouts/splitter/styling/README.md create mode 100644 samples/layouts/splitter/styling/index.html create mode 100644 samples/layouts/splitter/styling/package.json create mode 100644 samples/layouts/splitter/styling/sandbox.config.json create mode 100644 samples/layouts/splitter/styling/src/index.css create mode 100644 samples/layouts/splitter/styling/src/index.tsx create mode 100644 samples/layouts/splitter/styling/tsconfig.json create mode 100644 samples/layouts/splitter/styling/vite.config.js diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index c3f48b2b9a..781fcd1442 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-02-02 17:54:15","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-04-22 10:58:24","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/grids/grid/data-exporting-indicator/ReadMe.md b/samples/grids/grid/data-exporting-indicator/ReadMe.md index 2b494dc483..b3cb1ec851 100644 --- a/samples/grids/grid/data-exporting-indicator/ReadMe.md +++ b/samples/grids/grid/data-exporting-indicator/ReadMe.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Data Exporting Indicator feature using [Tree Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Data Exporting Indicator feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Data Ex View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ 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/data-exporting-indicator +cd ./samples/grids/grid/data-exporting-indicator ``` open above folder in VS Code or type: diff --git a/samples/grids/grid/localization/ReadMe.md b/samples/grids/grid/localization/ReadMe.md index 6de13fe48a..aa0434bb99 100644 --- a/samples/grids/grid/localization/ReadMe.md +++ b/samples/grids/grid/localization/ReadMe.md @@ -34,7 +34,7 @@ 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/grid/action-strip +cd ./samples/grids/grid/localization ``` open above folder in VS Code or type: diff --git a/samples/interactions/query-builder/template/README.md b/samples/interactions/query-builder/template/README.md index b61472b1b1..25c06663ce 100644 --- a/samples/interactions/query-builder/template/README.md +++ b/samples/interactions/query-builder/template/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Custom Search Template feature using [Query Builder](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Template feature using [Query Builder](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. diff --git a/samples/layouts/splitter/base/.devcontainer/devcontainer.json b/samples/layouts/splitter/base/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/splitter/base/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/splitter/base/.eslintrc.js b/samples/layouts/splitter/base/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/splitter/base/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/layouts/splitter/base/README.md b/samples/layouts/splitter/base/README.md new file mode 100644 index 0000000000..599fb36278 --- /dev/null +++ b/samples/layouts/splitter/base/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Base feature using [Splitter](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/layouts/splitter/base +``` + +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/layouts/splitter/base/index.html b/samples/layouts/splitter/base/index.html new file mode 100644 index 0000000000..5407fc551a --- /dev/null +++ b/samples/layouts/splitter/base/index.html @@ -0,0 +1,11 @@ + + + + Splitter Overview + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/splitter/base/package.json b/samples/layouts/splitter/base/package.json new file mode 100644 index 0000000000..245990d4a7 --- /dev/null +++ b/samples/layouts/splitter/base/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-splitter-base", + "description": "This project provides example of Splitter using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.5.0", + "igniteui-react-core": "19.3.2", + "igniteui-webcomponents": "^7.0.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/splitter/base/sandbox.config.json b/samples/layouts/splitter/base/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/splitter/base/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/splitter/base/src/index.css b/samples/layouts/splitter/base/src/index.css new file mode 100644 index 0000000000..dcec233a87 --- /dev/null +++ b/samples/layouts/splitter/base/src/index.css @@ -0,0 +1,16 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.controls { + display: flex; + flex-wrap: wrap; + gap: 16px; + align-items: center; + padding: 12px 16px; + height: 60px; + box-sizing: border-box; +} + +p { + padding: 0 16px; +} diff --git a/samples/layouts/splitter/base/src/index.tsx b/samples/layouts/splitter/base/src/index.tsx new file mode 100644 index 0000000000..3d7cb085d5 --- /dev/null +++ b/samples/layouts/splitter/base/src/index.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrSplitter, + IgrSwitch, + IgrSwitchChangeEventArgs, + SplitterOrientation, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export interface SplitterOverviewState { + orientation: SplitterOrientation; + disableCollapse: boolean; + disableResize: boolean; + hideDragHandle: boolean; + hideCollapseButtons: boolean; +} + +export default class SplitterOverview extends React.Component { + constructor(props: any) { + super(props); + this.state = { + orientation: 'horizontal', + disableCollapse: false, + disableResize: false, + hideDragHandle: false, + hideCollapseButtons: false, + }; + } + + public render(): JSX.Element { + return ( +
+
+ this.setState({ orientation: e.detail.checked ? 'vertical' : 'horizontal' })}> + Make Splitter Vertical + + this.setState({ disableCollapse: e.detail.checked })}> + Disable Collapse + + this.setState({ disableResize: e.detail.checked })}> + Disable Resize + + this.setState({ hideDragHandle: e.detail.checked })}> + Hide Drag Handle + + this.setState({ hideCollapseButtons: e.detail.checked })}> + Hide Collapse Buttons + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. +

+
+
+

+ Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. +

+
+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/splitter/base/tsconfig.json b/samples/layouts/splitter/base/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/splitter/base/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", + "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/layouts/splitter/base/vite.config.js b/samples/layouts/splitter/base/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/splitter/base/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/splitter/nested/.devcontainer/devcontainer.json b/samples/layouts/splitter/nested/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/splitter/nested/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/splitter/nested/.eslintrc.js b/samples/layouts/splitter/nested/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/splitter/nested/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/layouts/splitter/nested/README.md b/samples/layouts/splitter/nested/README.md new file mode 100644 index 0000000000..cced1f3184 --- /dev/null +++ b/samples/layouts/splitter/nested/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Nested feature using [Splitter](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/layouts/splitter/nested +``` + +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/layouts/splitter/nested/index.html b/samples/layouts/splitter/nested/index.html new file mode 100644 index 0000000000..c061719faa --- /dev/null +++ b/samples/layouts/splitter/nested/index.html @@ -0,0 +1,11 @@ + + + + Splitter Nested Panes + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/splitter/nested/package.json b/samples/layouts/splitter/nested/package.json new file mode 100644 index 0000000000..3cb81a584b --- /dev/null +++ b/samples/layouts/splitter/nested/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-splitter-nested", + "description": "This project provides example of Splitter using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.5.0", + "igniteui-react-core": "19.3.2", + "igniteui-webcomponents": "^7.0.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/splitter/nested/sandbox.config.json b/samples/layouts/splitter/nested/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/splitter/nested/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/splitter/nested/src/index.css b/samples/layouts/splitter/nested/src/index.css new file mode 100644 index 0000000000..3e736aab54 --- /dev/null +++ b/samples/layouts/splitter/nested/src/index.css @@ -0,0 +1,6 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +p { + padding: 0 16px; +} diff --git a/samples/layouts/splitter/nested/src/index.tsx b/samples/layouts/splitter/nested/src/index.tsx new file mode 100644 index 0000000000..3f5f8b9a9a --- /dev/null +++ b/samples/layouts/splitter/nested/src/index.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrSplitter, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class SplitterOverview extends React.Component { + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. +

+
+
+

+ Suspendisse potenti. Mauris vehicula neque ullamcorper tortor pulvinar gravida. Integer porttitor orci ex, ac vehicula nisi ultricies vel. Phasellus feugiat, urna eget congue sollicitudin, augue mi vulputate velit, in porttitor lacus orci sit amet eros. Donec mollis tempor mi. Ut sed justo consectetur, laoreet orci id, vestibulum velit. Aliquam ultricies arcu nec placerat eleifend. Integer ornare auctor mauris, vitae placerat est hendrerit ut. +

+
+ + +
+

+ Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. +

+
+
+

+ Suspendisse potenti. Proin faucibus venenatis purus in pellentesque. Nunc eget justo pretium massa pellentesque sodales. Phasellus orci ligula, condimentum et faucibus id, faucibus sit amet mauris. Praesent consequat cursus mauris, eget tempus lorem. Quisque vel leo nec massa aliquam pellentesque sit amet vel erat. Phasellus at mauris laoreet, egestas magna eget, dignissim nisl. Etiam non nibh nec orci elementum facilisis a vel tortor. Praesent sagittis mattis risus non tincidunt. +

+
+ + +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/splitter/nested/tsconfig.json b/samples/layouts/splitter/nested/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/splitter/nested/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", + "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/layouts/splitter/nested/vite.config.js b/samples/layouts/splitter/nested/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/splitter/nested/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/layouts/splitter/styling/.devcontainer/devcontainer.json b/samples/layouts/splitter/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/layouts/splitter/styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/layouts/splitter/styling/.eslintrc.js b/samples/layouts/splitter/styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/layouts/splitter/styling/.eslintrc.js @@ -0,0 +1,75 @@ +// 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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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", + "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", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/layouts/splitter/styling/README.md b/samples/layouts/splitter/styling/README.md new file mode 100644 index 0000000000..c6f7a6be32 --- /dev/null +++ b/samples/layouts/splitter/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Splitter](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/layouts/splitter/styling +``` + +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/layouts/splitter/styling/index.html b/samples/layouts/splitter/styling/index.html new file mode 100644 index 0000000000..9c1118e1f3 --- /dev/null +++ b/samples/layouts/splitter/styling/index.html @@ -0,0 +1,11 @@ + + + + Splitter Styling + + + +
+ + + \ No newline at end of file diff --git a/samples/layouts/splitter/styling/package.json b/samples/layouts/splitter/styling/package.json new file mode 100644 index 0000000000..58b6eac1ea --- /dev/null +++ b/samples/layouts/splitter/styling/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-splitter-styling", + "description": "This project provides example of Splitter using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "^19.5.0", + "igniteui-react-core": "19.3.2", + "igniteui-webcomponents": "^7.0.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/layouts/splitter/styling/sandbox.config.json b/samples/layouts/splitter/styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/layouts/splitter/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/layouts/splitter/styling/src/index.css b/samples/layouts/splitter/styling/src/index.css new file mode 100644 index 0000000000..7609a569e2 --- /dev/null +++ b/samples/layouts/splitter/styling/src/index.css @@ -0,0 +1,16 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} + +p { + padding: 0 16px; +} diff --git a/samples/layouts/splitter/styling/src/index.tsx b/samples/layouts/splitter/styling/src/index.tsx new file mode 100644 index 0000000000..b2bfc5a6d9 --- /dev/null +++ b/samples/layouts/splitter/styling/src/index.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { + IgrSplitter, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default class SplitterOverview extends React.Component { + constructor(props: any) { + super(props); + } + + public render(): JSX.Element { + return ( +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. Curabitur id tortor laoreet, luctus justo sit amet, viverra mi. Nunc laoreet auctor metus eget suscipit. Vestibulum vestibulum imperdiet pharetra. Sed ac dignissim dui. In vitae suscipit nunc. Praesent vel felis nulla. Nullam non justo elit. Ut quis eleifend libero. Morbi ut maximus dui, non tristique risus. +

+
+
+

+ Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. Maecenas efficitur nibh elementum, pellentesque sapien sit amet, fermentum sem. Pellentesque nisl mi, porta eget viverra a, tincidunt ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. +

+
+ +
+ ); + } +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/splitter/styling/tsconfig.json b/samples/layouts/splitter/styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/layouts/splitter/styling/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", + "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/layouts/splitter/styling/vite.config.js b/samples/layouts/splitter/styling/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/layouts/splitter/styling/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file