Skip to content

Commit 1132779

Browse files
tishko0tishko0
authored
Added Combo template sample (#837)
1 parent 916e69a commit 1132779

10 files changed

Lines changed: 341 additions & 0 deletions

File tree

‎samples/inputs/combo/templates/.eslintrc.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
2+
module.exports = {
3+
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
4+
parserOptions: {
5+
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
6+
sourceType: "module", // Allows for the use of imports
7+
ecmaFeatures: {
8+
jsx: true // Allows for the parsing of JSX
9+
}
10+
},
11+
settings: {
12+
react: {
13+
version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
14+
}
15+
},
16+
extends: [
17+
"eslint:recommended",
18+
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
19+
"plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
20+
],
21+
rules: {
22+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
23+
"default-case": "off",
24+
"no-undef": "off",
25+
"no-unused-vars": "off",
26+
"no-extend-native": "off",
27+
"no-throw-literal": "off",
28+
"no-useless-concat": "off",
29+
"no-mixed-operators": "off",
30+
"no-prototype-builtins": "off",
31+
"prefer-const": "off",
32+
"prefer-rest-params": "off",
33+
"jsx-a11y/alt-text": "off",
34+
"jsx-a11y/iframe-has-title": "off",
35+
"@typescript-eslint/no-unused-vars": "off",
36+
"@typescript-eslint/no-explicit-any": "off",
37+
"@typescript-eslint/no-inferrable-types": "off",
38+
"@typescript-eslint/no-useless-constructor": "off",
39+
"@typescript-eslint/no-use-before-define": "off",
40+
"@typescript-eslint/no-non-null-assertion": "off",
41+
"@typescript-eslint/interface-name-prefix": "off",
42+
"@typescript-eslint/prefer-namespace-keyword": "off",
43+
"@typescript-eslint/explicit-function-return-type": "off",
44+
"@typescript-eslint/explicit-module-boundary-types": "off"
45+
},
46+
"overrides": [
47+
{
48+
"files": ["*.ts", "*.tsx"],
49+
"rules": {
50+
"default-case": "off",
51+
"no-undef": "off",
52+
"no-unused-vars": "off",
53+
"no-extend-native": "off",
54+
"no-throw-literal": "off",
55+
"no-useless-concat": "off",
56+
"no-mixed-operators": "off",
57+
"no-prototype-builtins": "off",
58+
"prefer-const": "off",
59+
"prefer-rest-params": "off",
60+
"jsx-a11y/alt-text": "off",
61+
"jsx-a11y/iframe-has-title": "off",
62+
"@typescript-eslint/no-unused-vars": "off",
63+
"@typescript-eslint/no-explicit-any": "off",
64+
"@typescript-eslint/no-inferrable-types": "off",
65+
"@typescript-eslint/no-useless-constructor": "off",
66+
"@typescript-eslint/no-use-before-define": "off",
67+
"@typescript-eslint/no-non-null-assertion": "off",
68+
"@typescript-eslint/interface-name-prefix": "off",
69+
"@typescript-eslint/prefer-namespace-keyword": "off",
70+
"@typescript-eslint/explicit-function-return-type": "off",
71+
"@typescript-eslint/explicit-module-boundary-types": "off"
72+
}
73+
}
74+
]
75+
};

‎samples/inputs/combo/templates/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
3+
4+
This folder contains implementation of React application with example of Templates feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
10+
<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"/>
11+
</a>
12+
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
13+
<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"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/combo/templates" rel="noopener noreferrer">
16+
<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"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/combo/templates?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
19+
<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"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_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.
27+
28+
## Instructions
29+
30+
Follow these instructions to run this example:
31+
32+
33+
```
34+
git clone https://github.com/IgniteUI/igniteui-react-examples.git
35+
git checkout master
36+
cd ./igniteui-react-examples
37+
cd ./samples/inputs/combo/templates
38+
```
39+
40+
open above folder in VS Code or type:
41+
```
42+
code .
43+
```
44+
45+
In terminal window, run:
46+
```
47+
npm install --legacy-peer-deps
48+
npm run-script start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
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).

‎samples/inputs/combo/templates/package.json‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "react-combo-overview",
3+
"description": "This project provides example of Combo Overview using Infragistics React components",
4+
"author": "Infragistics",
5+
"homepage": ".",
6+
"version": "1.4.0",
7+
"private": true,
8+
"scripts": {
9+
"start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
10+
"build": "react-scripts --max_old_space_size=10240 build ",
11+
"test": "react-scripts test --env=jsdom",
12+
"eject": "react-scripts eject"
13+
},
14+
"dependencies": {
15+
"igniteui-dockmanager": "1.16.1",
16+
"igniteui-react": "19.0.2",
17+
"igniteui-react-core": "19.0.0-alpha.0",
18+
"igniteui-react-grids": "19.0.2",
19+
"igniteui-react-inputs": "19.0.0-alpha.0",
20+
"igniteui-react-layouts": "19.0.0-alpha.0",
21+
"igniteui-webcomponents": "6.0.0",
22+
"lit-html": "^3.2.0",
23+
"react": "^19.1.0",
24+
"react-dom": "^19.1.0",
25+
"react-scripts": "^5.0.1",
26+
"tslib": "^2.4.0"
27+
},
28+
"devDependencies": {
29+
"@types/jest": "^29.2.0",
30+
"@types/node": "^18.11.7",
31+
"@types/react": "^18.0.24",
32+
"@types/react-dom": "^18.0.8",
33+
"react-app-rewired": "^2.2.1",
34+
"typescript": "^4.8.4",
35+
"worker-loader": "^3.0.8"
36+
},
37+
"browserslist": [
38+
">0.2%",
39+
"not dead",
40+
"not ie <= 11",
41+
"not op_mini all"
42+
]
43+
}

‎samples/inputs/combo/templates/public/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Combo Overview</title>
5+
<link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
</body>
10+
</html>

‎samples/inputs/combo/templates/sandbox.config.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser"
5+
}

‎samples/inputs/combo/templates/src/data.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
export interface City {
2+
id: string;
3+
name: string;
4+
country: string;
5+
}
6+
7+
export const Cities: City[] = [
8+
{ name: "London", id: "UK01", country: "UK" },
9+
{ name: "Manchester", id: "UK02", country: "UK" },
10+
{ name: "Birmingham", id: "UK03", country: "UK" },
11+
{ name: "Glasgow", id: "UK04", country: "UK" },
12+
{ name: "Liverpool", id: "UK05", country: "UK" },
13+
{ name: "New York", id: "US01", country: "USA" },
14+
{ name: "Miami", id: "US02", country: "USA" },
15+
{ name: "Philadelphia", id: "US03", country: "USA" },
16+
{ name: "Chicago", id: "US04", country: "USA" },
17+
{ name: "Springfield", id: "US05", country: "USA" },
18+
{ name: "Los Angeles", id: "US06", country: "USA" },
19+
{ name: "Houston", id: "US07", country: "USA" },
20+
{ name: "Phoenix", id: "US08", country: "USA" },
21+
{ name: "San Diego", id: "US09", country: "USA" },
22+
{ name: "Dallas", id: "US010", country: "USA" },
23+
{ name: "Sofia", id: "BG01", country: "Bulgaria" },
24+
{ name: "Plovdiv", id: "BG02", country: "Bulgaria" },
25+
{ name: "Varna", id: "BG03", country: "Bulgaria" },
26+
{ name: "Burgas", id: "BG04", country: "Bulgaria" },
27+
{ name: "Rome", id: "IT01", country: "Italy" },
28+
{ name: "Milan", id: "IT02", country: "Italy" },
29+
{ name: "Naples", id: "IT03", country: "Italy" },
30+
{ name: "Turin", id: "IT04", country: "Italy" },
31+
{ name: "Palermo", id: "IT05", country: "Italy" },
32+
{ name: "Florence", id: "IT06", country: "Italy" },
33+
];

‎samples/inputs/combo/templates/src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */
3+
4+
.combo-padding {
5+
padding: 12px 16px;
6+
}

‎samples/inputs/combo/templates/src/index.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useEffect } from "react";
2+
import ReactDOM from "react-dom/client";
3+
import {
4+
IgrCombo,
5+
ComboTemplateProps,
6+
IgrIcon,
7+
registerIconFromText
8+
} from "igniteui-react";
9+
import "igniteui-webcomponents/themes/light/bootstrap.css";
10+
import { Cities, City } from "./data";
11+
import "./index.css";
12+
13+
export default function ComboTemplates() {
14+
15+
const downIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>';
16+
const clearIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M120-280v-80h560v80H120Zm80-160v-80h560v80H200Zm80-160v-80h560v80H280Z"/></svg>';
17+
18+
useEffect(() => {
19+
registerIconFromText("down", downIcon, "material");
20+
registerIconFromText("clear", clearIcon, "material");
21+
}, []);
22+
23+
const renderGroupHeaderTemplate = (args: ComboTemplateProps<City>) => {
24+
return <span>Country of {args.item.country}</span>;
25+
};
26+
27+
const renderItemTemplate = (args: ComboTemplateProps<City>) => {
28+
const item = args.item;
29+
return (
30+
<span>
31+
<b>{item.name}</b> [{item.id}] - {item.country}
32+
</span>
33+
);
34+
};
35+
36+
return (
37+
<div className="sample">
38+
<IgrCombo
39+
valueKey="id"
40+
displayKey="name"
41+
groupKey="country"
42+
data={Cities}
43+
itemTemplate={renderItemTemplate}
44+
groupHeaderTemplate={renderGroupHeaderTemplate}
45+
>
46+
<header slot="header" className="combo-padding">
47+
<strong>Select a City</strong>
48+
<div>List of countries and their most popular cities</div>
49+
</header>
50+
<footer slot="footer" className="combo-padding">
51+
<em>
52+
Tip: Start typing to find your city if you have troubles finding it.
53+
</em>
54+
</footer>
55+
<span slot="toggle-icon">
56+
<IgrIcon name="down" collection="material"></IgrIcon>
57+
</span>
58+
<span slot="clear-icon">
59+
<IgrIcon name="clear" collection="material"></IgrIcon>
60+
</span>
61+
</IgrCombo>
62+
</div>
63+
);
64+
}
65+
66+
// rendering above function to the React DOM
67+
const root = ReactDOM.createRoot(document.getElementById("root"));
68+
root.render(<ComboTemplates />);

‎samples/inputs/combo/templates/src/react-app-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎samples/inputs/combo/templates/tsconfig.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"compilerOptions": {
3+
"resolveJsonModule": true,
4+
"esModuleInterop": true,
5+
"baseUrl": ".",
6+
"outDir": "build/dist",
7+
"module": "esnext",
8+
"target": "es5",
9+
"lib": [
10+
"es6",
11+
"dom"
12+
],
13+
"sourceMap": true,
14+
"allowJs": true,
15+
"jsx": "react",
16+
"moduleResolution": "node",
17+
"rootDir": "src",
18+
"forceConsistentCasingInFileNames": true,
19+
"noImplicitReturns": true,
20+
"noImplicitThis": true,
21+
"noImplicitAny": true,
22+
"noUnusedLocals": false,
23+
"importHelpers": true,
24+
"allowSyntheticDefaultImports": true,
25+
"skipLibCheck": true,
26+
"strict": false,
27+
"isolatedModules": true,
28+
"noEmit": true
29+
},
30+
"exclude": [
31+
"node_modules",
32+
"build",
33+
"scripts",
34+
"acceptance-tests",
35+
"webpack",
36+
"jest",
37+
"src/setupTests.ts",
38+
"**/odatajs-4.0.0.js",
39+
"config-overrides.js"
40+
],
41+
"include": [
42+
"src"
43+
]
44+
}

0 commit comments

Comments
 (0)