Skip to content

Commit 08cb226

Browse files
author
pipeline
committed
v20.1.47 is released
1 parent 9bab823 commit 08cb226

File tree

473 files changed

+6206
-4514
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

473 files changed

+6206
-4514
lines changed

‎index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,14 @@
174174
</div>
175175
<div id='theme-switcher-popup' class='sb-theme-popup'>
176176
<ul id="themelist" class="options">
177+
<li class="e-list" id="fluent">
178+
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
179+
<span class="switch-text">Fluent</span>
180+
</li>
181+
<li class="e-list" id="fluent-dark">
182+
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
183+
<span class="switch-text">Fluent Dark</span>
184+
</li>
177185
<li class="e-list" id="bootstrap5">
178186
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
179187
<span class="switch-text">Bootstrap v5</span>
@@ -238,6 +246,8 @@
238246
</div>
239247
<div class='setting-content setting-theme-change'>
240248
<select id='sb-setting-theme' class='sb-setting-theme-select'>
249+
<option value="fluent">Fluent</option>
250+
<option value="fluent-dark">Fluent Dark</option>
241251
<option value="bootstrap5">Bootstrap v5</option>
242252
<option value="bootstrap5-dark">Bootstrap v5 Dark</option>
243253
<option value="tailwind">Tailwind CSS</option>

‎package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-react-samples",
3-
"version": "19.4.38",
3+
"version": "20.1.47",
44
"description": "Examples of React UI Components",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",
@@ -39,16 +39,18 @@
3939
"@syncfusion/ej2-react-gantt": "*",
4040
"@syncfusion/ej2-react-spreadsheet": "*",
4141
"@syncfusion/ej2-react-progressbar": "*",
42-
"@types/react": "^15.0.24",
43-
"@types/react-dom": "^15.5.1",
42+
"@types/react": "^17.0.39",
43+
"@types/react-dom": "^17.0.11",
4444
"@types/history": "4.7.7",
4545
"@types/react-router": "4.0.19",
4646
"@types/moment-timezone": "0.5.7",
4747
"fuse.js": "3.2.0",
48+
"gulp-typescript": "^5.0.1",
49+
"typescript": "^4.5.5",
4850
"moment-timezone": "0.5.13",
4951
"@microsoft/signalr": "5.0.9",
50-
"react": "16.3.1",
51-
"react-dom": "16.3.1",
52+
"react": "^17.0.2",
53+
"react-dom": "^17.0.2",
5254
"react-redux": "^5.0.5",
5355
"react-router": "4.3.1",
5456
"react-router-dom": "4.3.0",

‎sampleName.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,17 @@
9999
"islamic-calendar": "Islamic Calendar"
100100
}
101101
},
102+
"carousel": {
103+
"ControlName": "Carousel",
104+
"Samples": {
105+
"overview": "Overview",
106+
"default": "Default Functionalities",
107+
"templates": "Templates",
108+
"datasource-binding": "Data Binding",
109+
"keyboard-navigation": "Keyboard Navigation",
110+
"api": "API"
111+
}
112+
},
102113
"card": {
103114
"ControlName": "Card",
104115
"Samples": {
@@ -170,7 +181,7 @@
170181
"doughnut": "Doughnut",
171182
"pyramid": "Pyramid",
172183
"funnel": "Funnel",
173-
"default-doughnut": "Pie With Legend",
184+
"pie-legend": "Pie With Legend",
174185
"semi-pie": "Semi Pie",
175186
"smartlabels": "Smart Labels",
176187
"drilldown": "Drilldown",

‎src/accordion/accordion.component.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,4 +196,9 @@
196196
text-overflow: ellipsis;
197197
font-weight: bold;
198198
font-size: 16px;
199+
}
200+
201+
.key-class {
202+
display: inline-block;
203+
width: 130px;
199204
}

‎src/accordion/config.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
export const AccordionSampleOrder:Object = [
2-
{ 'path': 'accordion/default', 'component':'Default', 'name': 'Default Functionalities', 'description':'The sample demonstrates that default functionalities of the Accordion component which works by expand and collapse action in React platform.', 'order': '01', 'category': 'Accordion', 'api': '{ "AccordionComponent": ["items"] }' },
3-
{ 'path': 'accordion/ajax', 'component':'AjaxContent', 'name': 'Ajax Content', 'description':'The sample demonstrates how to load the content to the Accordion component from external sources using Ajax library in React platform.', 'order': '01', 'category': 'Accordion', 'api': '{ "AccordionComponent": ["expandMode", "expanding"] }' },
4-
{ 'path': 'accordion/icon', 'component':'Icons', 'name': 'Icons', 'description':'The sample demonstrates how to represent pane headers with an icon in Accordion component which populates from items collection in React platform.', 'order': '01', 'category': 'Accordion' }
1+
export const AccordionSampleOrder: Object = [
2+
{ 'path': 'accordion/default', 'component': 'Default', 'name': 'Default Functionalities', 'description': 'The sample demonstrates that default functionalities of the Accordion component which works by expand and collapse action in React platform.', 'order': '01', 'category': 'Accordion', 'api': '{ "AccordionComponent": ["items"] }' },
3+
{ 'path': 'accordion/ajax', 'component': 'AjaxContent', 'name': 'Ajax Content', 'description': 'The sample demonstrates how to load the content to the Accordion component from external sources using Ajax library in React platform.', 'order': '01', 'category': 'Accordion', 'api': '{ "AccordionComponent": ["expandMode", "expanding"] }' },
4+
{ 'path': 'accordion/icon', 'component': 'Icons', 'name': 'Icons', 'description': 'The sample demonstrates how to represent pane headers with an icon in Accordion component which populates from items collection in React platform.', 'order': '01', 'category': 'Accordion' },
5+
{ 'path': 'accordion/keyboard-interaction', 'component': 'KeyboardInteraction', 'name': 'Keyboard Interaction', 'description': 'The sample showcases the keyboard shortcuts applicable on Accordion component with details in React platform.', 'order': '01', 'category': 'Accordion', 'api': '{ "AccordionComponent": ["items"] }' }
56
]

‎src/accordion/keyboard-interaction.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import * as ReactDOM from 'react-dom';
2+
import * as React from 'react';
3+
import { AccordionComponent, AccordionItemDirective, AccordionItemsDirective } from '@syncfusion/ej2-react-navigations';
4+
import { SampleBase } from '../common/sample-base';
5+
6+
export class KeyboardInteraction extends SampleBase<{}, {}> {
7+
8+
render() {
9+
function acrdnheader1() {
10+
return (
11+
<div>
12+
ASP.NET
13+
</div>
14+
);
15+
}
16+
function acrdnheader2() {
17+
return (
18+
<div>
19+
ASP.NET MVC
20+
</div>
21+
);
22+
}
23+
function acrdnheader3() {
24+
return (
25+
<div>
26+
JavaScript
27+
</div>
28+
);
29+
}
30+
function acrdnContent1() {
31+
return (
32+
<div>
33+
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.
34+
</div>
35+
);
36+
}
37+
function acrdnContent2() {
38+
return (
39+
<div>
40+
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
41+
</div>
42+
);
43+
}
44+
function acrdnContent3() {
45+
return (
46+
<div>
47+
JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.
48+
</div>
49+
);
50+
}
51+
return (
52+
<div className='control-pane'>
53+
<div className='control-section accordion-control-section'>
54+
<div className='control Accordion-sample' style={{ margin: '25px 0' }}>
55+
{/* Render the Accoridon Component */}
56+
<AccordionComponent>
57+
<AccordionItemsDirective>
58+
<AccordionItemDirective header={acrdnheader1} expanded={true} content={acrdnContent1} />
59+
<AccordionItemDirective header={acrdnheader2} content={acrdnContent2} />
60+
<AccordionItemDirective header={acrdnheader3} content={acrdnContent3} />
61+
</AccordionItemsDirective>
62+
</AccordionComponent>
63+
</div></div>
64+
<div id="action-description">
65+
<p>
66+
This demo showcases the keyboard shortcuts applicable on <code>Accordion</code>.
67+
</p>
68+
</div>
69+
<div id="description">
70+
<i>Below key combinations can be used in Accordion to initiate various actions.</i>
71+
<ul>
72+
<li>
73+
<b>Focus</b>
74+
<ul>
75+
<li>
76+
<span className="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
77+
<span> - Focuses on the first component of the demo.</span>
78+
</li>
79+
<li>
80+
<span className="key-class"><kbd>Home</kbd></span>
81+
<span> - Focus the first Accordion header.</span>
82+
</li>
83+
<li>
84+
<span className="key-class"><kbd>End</kbd></span>
85+
<span> - Focus the last Accordion header.</span>
86+
</li>
87+
<li>
88+
<span className="key-class"><kbd>Down arrow</kbd></span>
89+
<span> - Focus the next Accordion header.</span>
90+
</li>
91+
<li>
92+
<span className="key-class"><kbd>Up arrow</kbd></span>
93+
<span> - Focus the previous Accordion header.</span>
94+
</li>
95+
</ul>
96+
</li>
97+
<li>
98+
<b>Expand and Collapse</b>
99+
<ul>
100+
<li>
101+
<span className="key-class"><kbd>Enter</kbd> or <kbd>Space</kbd></span>
102+
<span> - Expand and collapse when the focus is on the Accordion header.</span>
103+
</li>
104+
</ul>
105+
</li>
106+
</ul>
107+
</div>
108+
</div>
109+
110+
);
111+
}
112+
}

‎src/auto-complete/data-binding.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ export class Data extends SampleBase<{}, {}> {
7474
information to interact with the service endpoint properly.
7575
</p>
7676
<ul>
77-
<li><code>DataManager->url</code> - Defines the service endpoint to fetch data.</li>
78-
<li><code>DataManager->adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for
77+
<li><code>DataManager-&gt;url</code> - Defines the service endpoint to fetch data.</li>
78+
<li><code>DataManager-&gt;adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for
7979
remote binding.</li>
8080
</ul>
8181
<p>The adaptor is responsible for processing response and request from/to the service endpoint.

‎src/auto-complete/icons.css

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/auto-complete/templates.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,40 @@
3434
color: #6c757d;
3535
}
3636

37+
.fluent-dark #employees_popup .header {
38+
background: #252423;
39+
color: #2899F5;
40+
}
41+
42+
.bootstrap5-dark #employees_popup .header {
43+
background: #343A40;
44+
color: #7B848D;
45+
}
46+
47+
.fluent #employees_popup .header{
48+
color: #2899F5;
49+
}
50+
51+
.tailwind-dark #employees_popup .header {
52+
background: #374151;
53+
color: rgb(255, 255, 255);
54+
}
55+
56+
.material-dark #employees_popup .header {
57+
background: rgb(66, 66, 66);
58+
color: rgb(255, 255, 255);
59+
}
60+
61+
.fabric-dark #employees_popup .header {
62+
background: rgb(40, 39, 39);
63+
color: rgb(255, 255, 255);
64+
}
65+
66+
.bootstrap-dark #employees_popup .header {
67+
background: rgb(49, 49, 49);
68+
color: rgb(255, 255, 255);
69+
}
70+
3771
#employees_popup .ename {
3872
display: block !important;
3973
opacity: .87;

0 commit comments

Comments
 (0)