-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #393 from IgniteUI/skrastev/state-persistence-sample
Add custom state persistence samples.
- Loading branch information
Showing
19 changed files
with
1,146 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| // 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", | ||
| "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-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" | ||
| } | ||
| } | ||
| ] | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!-- NOTE: do not change this file because it's auto re-generated from template: --> | ||
| <!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md --> | ||
|
|
||
| This folder contains implementation of React application with example of Row Drag Base feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. | ||
|
|
||
|
|
||
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <body> | ||
| <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer"> | ||
| <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/> | ||
| </a> | ||
| <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer"> | ||
| <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/> | ||
| </a> | ||
| <a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid/row-drag-base" rel="noopener noreferrer"> | ||
| <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/> | ||
| </a> | ||
| <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid/row-drag-base?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer"> | ||
| <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/> | ||
| </a> | ||
| </body> | ||
| </html> | ||
|
|
||
| ## Instructions | ||
|
|
||
| To set up this project locally, execute these commands: | ||
|
|
||
| ``` | ||
| git clone https://github.com/IgniteUI/igniteui-react-examples.git | ||
| cd ./igniteui-react-examples | ||
| cd ./samples/grids/grid/row-drag-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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| { | ||
| "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.14.2", | ||
| "igniteui-react": "18.3.0-beta.10", | ||
| "igniteui-react-core": "18.3.0-beta.10", | ||
| "igniteui-react-datasources": "18.3.0-beta.10", | ||
| "igniteui-react-grids": "18.3.0-beta.10", | ||
| "igniteui-react-inputs": "18.3.0-beta.10", | ||
| "igniteui-react-layouts": "18.3.0-beta.10", | ||
| "igniteui-webcomponents": "4.5.0", | ||
| "lit-html": "^2.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" | ||
| ] | ||
| } |
11 changes: 11 additions & 0 deletions
11
samples/grids/grid/state-persistence-about/public/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Sample | Ignite UI | React | infragistics</title> | ||
| <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" > | ||
| <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| </body> | ||
| </html> |
5 changes: 5 additions & 0 deletions
5
samples/grids/grid/state-persistence-about/sandbox.config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "infiniteLoopProtection": false, | ||
| "hardReloadOnChange": false, | ||
| "view": "browser" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| /* shared styles are loaded from: */ | ||
| /* https://static.infragistics.com/xplatform/css/samples */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
|
|
||
| import { ButtonVariant, IgrButton } from 'igniteui-react'; | ||
| import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; | ||
| import './index.css'; | ||
|
|
||
| export default function App() { | ||
| function onBackClicked() { | ||
| window.location.replace("./grids/grid/state-persistence-main"); | ||
| } | ||
|
|
||
| return ( | ||
| <div id="root"> | ||
| <div className="container sample"> | ||
| <div style={{ textAlign: "center", width: "900px"}}> | ||
| <br /> | ||
| <span>By default navigating to the previous page, components will reinitialize as per their initial configuration, therefore the IgrGrid will lose its state.</span> | ||
| <br /> | ||
| <span>What our App Component does is reading the state from the window.localStorage object and applying the corresponding state in the `useEffect`` hook.</span><br /> | ||
| <IgrButton clicked={onBackClicked} variant={ButtonVariant.Contained}><span>Go Back</span></IgrButton> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| // rendering above component in the React DOM | ||
| const root = ReactDOM.createRoot(document.getElementById('root')); | ||
| root.render(<App />); |
1 change: 1 addition & 0 deletions
1
samples/grids/grid/state-persistence-about/src/react-app-env.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="react-scripts" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| { | ||
| "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, | ||
| "suppressImplicitAnyIndexErrors": 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" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| // 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", | ||
| "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-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" | ||
| } | ||
| } | ||
| ] | ||
| }; |
Oops, something went wrong.