Skip to content

Commit 23ccc17

Browse files
RivaIvanovaRivaIvanova
authored
Add Banner samples (#629)
* feat(banner): add samples
1 parent 2c1c0cd commit 23ccc17

40 files changed

+1428
-0
lines changed

‎samples/notifications/banner/banner-advanced-sample/.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/notifications/banner/banner-advanced-sample/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 Advanced Sample feature using [Banner](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/notifications/banner/banner-advanced-sample" 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/notifications/banner/banner-advanced-sample?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/notifications/banner/banner-advanced-sample
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/notifications/banner/banner-advanced-sample/package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-banner-advanced-sample",
3+
"description": "This project provides example of Banner Advanced sample 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-react": "18.7.0-beta.1",
16+
"igniteui-react-core": "18.7.0-beta.1",
17+
"react": "^18.2.0",
18+
"react-dom": "^18.2.0",
19+
"react-scripts": "^5.0.1",
20+
"tslib": "^2.4.0"
21+
},
22+
"devDependencies": {
23+
"@types/jest": "^29.2.0",
24+
"@types/node": "^18.11.7",
25+
"@types/react": "^18.0.24",
26+
"@types/react-dom": "^18.0.8",
27+
"react-app-rewired": "^2.2.1",
28+
"typescript": "^4.8.4",
29+
"worker-loader": "^3.0.8"
30+
},
31+
"browserslist": [
32+
">0.2%",
33+
"not dead",
34+
"not ie <= 11",
35+
"not op_mini all"
36+
]
37+
}

‎samples/notifications/banner/banner-advanced-sample/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>Banner Sample 2</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/notifications/banner/banner-advanced-sample/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/notifications/banner/banner-advanced-sample/src/BannerAdvancedSample.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.offline-banner {
2+
border-bottom: 1px solid rgba(0, 0, 0, .12);
3+
}
4+
5+
.gallery__wrapper {
6+
max-width: 400px;
7+
padding-top: 24px;
8+
margin: 0 auto;
9+
}
10+
11+
.gallery__content {
12+
display: flex;
13+
flex-flow: column;
14+
max-height: 430px;
15+
overflow: hidden;
16+
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
17+
}
18+
19+
.gallery__item {
20+
margin: 8px 16px;
21+
overflow: visible;
22+
border-radius: 0;
23+
24+
& div {
25+
display: flex;
26+
justify-content: center;
27+
}
28+
}
29+
30+
img {
31+
max-width: 100%;
32+
}

‎samples/notifications/banner/banner-advanced-sample/src/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */

‎samples/notifications/banner/banner-advanced-sample/src/index.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, { useEffect, useRef, useState } from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import {
4+
IgrBanner,
5+
IgrBannerModule,
6+
IgrButton,
7+
IgrButtonModule,
8+
IgrCard,
9+
IgrCardModule,
10+
IgrIcon,
11+
IgrIconModule,
12+
IgrNavbar,
13+
IgrNavbarModule,
14+
IgrRipple,
15+
IgrRippleModule,
16+
IgrToast,
17+
IgrToastModule,
18+
} from 'igniteui-react';
19+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
20+
import './BannerAdvancedSample.css';
21+
import './index.css';
22+
import { registerIconFromText } from 'igniteui-webcomponents';
23+
24+
IgrBannerModule.register();
25+
IgrNavbarModule.register();
26+
IgrIconModule.register();
27+
IgrCardModule.register();
28+
IgrButtonModule.register();
29+
IgrRippleModule.register();
30+
IgrToastModule.register();
31+
32+
const wifiOnIcon =
33+
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/></svg>';
34+
const wifiOffIcon =
35+
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"/></svg>';
36+
37+
export default function BannerAdvancedSample() {
38+
const bannerRef = useRef<IgrBanner>(null);
39+
const iconRef = useRef<IgrIcon>(null);
40+
const toastRef = useRef<IgrToast>(null);
41+
42+
const [wifiState, setWifiState] = useState(false);
43+
44+
useEffect(() => {
45+
registerIconFromText('signal_wifi_off', wifiOffIcon);
46+
registerIconFromText('signal_wifi_4_bar', wifiOnIcon);
47+
bannerRef.current.open = true;
48+
}, []);
49+
50+
function refreshBanner() {
51+
if (!wifiState) {
52+
iconRef.current.name = 'signal_wifi_4_bar';
53+
bannerRef.current.hide();
54+
} else {
55+
iconRef.current.name = 'signal_wifi_off';
56+
bannerRef.current.show();
57+
}
58+
59+
setWifiState(current => !current);
60+
showToast();
61+
}
62+
63+
function showToast() {
64+
toastRef.current.open = false;
65+
toastRef.current.show();
66+
}
67+
68+
return (
69+
<div className="gallery__wrapper">
70+
<div className="gallery__content">
71+
<IgrNavbar>
72+
<h1 key="header">Gallery</h1>
73+
<IgrIcon ref={iconRef} key="icon-wifi-off" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
74+
</IgrNavbar>
75+
76+
<IgrBanner ref={bannerRef} className="offline-banner">
77+
<IgrIcon key="icon-wifi-off" name="signal_wifi_off" slot="prefix"></IgrIcon>
78+
<span key="message">You have lost connection to the internet. This app is offline.</span>
79+
<div key="actions" slot="actions">
80+
<IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.current.hide()}>
81+
<IgrRipple key="ripple-offline" />
82+
<span key="action-offline">Continue Offline</span>
83+
</IgrButton>
84+
<IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
85+
<IgrRipple key="ripple-wifi" />
86+
<span key="action-wifi">Turn On Wifi</span>
87+
</IgrButton>
88+
</div>
89+
</IgrBanner>
90+
91+
<IgrCard className="gallery__item" elevated>
92+
<div key="img-forest">
93+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
94+
</div>
95+
</IgrCard>
96+
<IgrCard className="gallery__item" elevated>
97+
<div key="img-yosemite">
98+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
99+
</div>
100+
</IgrCard>
101+
<IgrToast ref={toastRef} position="middle">
102+
<span key="toast-message">{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
103+
</IgrToast>
104+
</div>
105+
</div>
106+
);
107+
}
108+
109+
// rendering above class to the React DOM
110+
const root = ReactDOM.createRoot(document.getElementById('root'));
111+
root.render(<BannerAdvancedSample/>);

‎samples/notifications/banner/banner-advanced-sample/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/notifications/banner/banner-advanced-sample/tsconfig.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
"suppressImplicitAnyIndexErrors": true,
25+
"allowSyntheticDefaultImports": true,
26+
"skipLibCheck": true,
27+
"strict": false,
28+
"isolatedModules": true,
29+
"noEmit": true
30+
},
31+
"exclude": [
32+
"node_modules",
33+
"build",
34+
"scripts",
35+
"acceptance-tests",
36+
"webpack",
37+
"jest",
38+
"src/setupTests.ts",
39+
"**/odatajs-4.0.0.js",
40+
"config-overrides.js"
41+
],
42+
"include": [
43+
"src"
44+
]
45+
}

0 commit comments

Comments
 (0)