Skip to content

Commit 9efb208

Browse files
author
pipeline
committed
v20.3.47 is released
1 parent 9d2a178 commit 9efb208

File tree

563 files changed

+30245
-10314
lines changed

Some content is hidden

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

563 files changed

+30245
-10314
lines changed

‎config.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,10 @@
125125
"online",
126126
"editor",
127127
"richtexteditor",
128+
"appbar",
129+
"checkbox",
130+
"dropdown",
131+
"dropdown-button",
128132
null
129133
]
130134
}

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-react-samples",
3-
"version": "20.2.43",
3+
"version": "20.3.47",
44
"description": "Examples of React UI Components",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",
@@ -39,6 +39,7 @@
3939
"@syncfusion/ej2-react-gantt": "*",
4040
"@syncfusion/ej2-react-spreadsheet": "*",
4141
"@syncfusion/ej2-react-progressbar": "*",
42+
"@syncfusion/ej2-react-image-editor": "*",
4243
"@types/react": "^18.0.8",
4344
"@types/react-dom": "^18.0.3",
4445
"@types/history": "4.7.7",

‎sampleName.json

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@
77
"icon":"Icons"
88
}
99
},
10+
"appbar": {
11+
"ControlName": "AppBar",
12+
"Samples": {
13+
"default": "Default Functionalities",
14+
"color": "Color"
15+
}
16+
},
1017
"auto-complete": {
1118
"ControlName": "AutoComplete",
1219
"Samples": {
@@ -376,7 +383,6 @@
376383
"ControlName": "Dialog",
377384
"Samples": {
378385
"default": "Default Functionalities",
379-
"custom-dialog": "Custom Dialogs",
380386
"modal-dialog": "Modal",
381387
"template": "Template",
382388
"dialog-contents-via-ajax": "Ajax Content",
@@ -413,6 +419,13 @@
413419
"form-fields": "Form Fields"
414420
}
415421
},
422+
"image-editor": {
423+
"ControlName": "Image Editor",
424+
"Samples": {
425+
"default": "Default Functionalities",
426+
"profile-picture": "Profile Picture"
427+
}
428+
},
416429
"drop-down-list": {
417430
"ControlName": "Dropdown List",
418431
"Samples": {
@@ -456,6 +469,15 @@
456469
"ibm-cos-node-file-provider":"IBM Cloud File Provider"
457470
}
458471
},
472+
"floating-action-button": {
473+
"ControlName": "Floating Action Button",
474+
"Samples": {
475+
"overview": "Overview",
476+
"default": "Default Functionalities",
477+
"position": "Position",
478+
"styles": "Styles"
479+
}
480+
},
459481
"form-validator": {
460482
"ControlName": "Form Validator",
461483
"Samples": {
@@ -717,6 +739,14 @@
717739
"toolbar-integration": "Toolbar Integration"
718740
}
719741
},
742+
"mention": {
743+
"ControlName": "Mention",
744+
"Samples": {
745+
"default": "Default Functionalities",
746+
"multiple-list": "Multiple List",
747+
"template": "Template"
748+
}
749+
},
720750
"multi-select": {
721751
"ControlName": "MultiSelect Dropdown",
722752
"Samples": {
@@ -792,6 +822,14 @@
792822
"exporting": "Export"
793823
}
794824
},
825+
"predefined-dialogs": {
826+
"ControlName": "Predefined Dialogs",
827+
"Samples": {
828+
"default": "Default Functionalities",
829+
"customization": "Customization",
830+
"animation": "Animation"
831+
}
832+
},
795833
"query-builder": {
796834
"ControlName": "Query Builder",
797835
"Samples": {
@@ -825,6 +863,7 @@
825863
"image": "Image",
826864
"inline": "Inline",
827865
"paste-cleanup": "Paste from MS Word",
866+
"mention-integration": "Mention Integration",
828867
"iframe": "IFrame",
829868
"print": "Print",
830869
"ajax-load": "Ajax Content",
@@ -839,8 +878,7 @@
839878
"insert-special-characters": "Insert Special Characters",
840879
"markdown-editor": "Overview",
841880
"markdown-editor-preview": "Preview",
842-
"markdown-editor-custom-format": "Custom Format",
843-
"tribute": "Tribute JS"
881+
"markdown-editor-custom-format": "Custom Format"
844882
}
845883
},
846884
"schedule": {
@@ -933,6 +971,13 @@
933971
"azure-pricing": "Cloud Pricing"
934972
}
935973
},
974+
"skeleton": {
975+
"ControlName": "Skeleton",
976+
"Samples": {
977+
"default": "Default Functionalities",
978+
"animation": "Animation"
979+
}
980+
},
936981
"smith-chart": {
937982
"ControlName": "Smith Chart",
938983
"Samples": {
@@ -953,6 +998,17 @@
953998
"range-band": "Range Band"
954999
}
9551000
},
1001+
"speed-dial": {
1002+
"ControlName": "SpeedDial",
1003+
"Samples": {
1004+
"default": "Default Functionalities",
1005+
"linear": "Position (Linear)",
1006+
"radial": "Radial Menu",
1007+
"styles": "Styles",
1008+
"template": "Template",
1009+
"modal": "Modal"
1010+
}
1011+
},
9561012
"splitter": {
9571013
"ControlName": "Splitter",
9581014
"Samples": {
@@ -1035,6 +1091,16 @@
10351091
"api": "API"
10361092
}
10371093
},
1094+
"message": {
1095+
"ControlName": "Message",
1096+
"Samples": {
1097+
"default": "Default Functionalities",
1098+
"variants": "Variants",
1099+
"icons": "Icons",
1100+
"customization": "Customization",
1101+
"template": "Template"
1102+
}
1103+
},
10381104
"toolbar": {
10391105
"ControlName": "Toolbar",
10401106
"Samples": {

‎src/appbar/color.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.color-appbar-section .e-dropdown-btn.e-inherit,
2+
.color-appbar-section .e-btn.e-inherit.home {
3+
margin: 0 5px;
4+
}
5+
6+
.color-appbar-section .e-appbar-icon-menu {
7+
display: none;
8+
}
9+
10+
.color-appbar-section .e-appbar .e-appbar-separator {
11+
margin: 0 10px;
12+
}
13+
14+
@media screen and (max-width: 480px) {
15+
16+
.color-appbar-section .e-appbar-icon-menu {
17+
display: block;
18+
}
19+
20+
.color-appbar-section .login,
21+
.color-appbar-section .e-appbar-separator,
22+
.color-appbar-section .e-dropdown-btn.e-inherit.e-appbar-menu,
23+
.color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-menu,
24+
.color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-icon-menu .e-menu .e-menu-item .e-caret,
25+
.color-appbar-section .e-btn.e-inherit.e-appbar-menu {
26+
display: none;
27+
}
28+
29+
.color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-icon-menu ul .e-menu-item.e-menu-caret-icon {
30+
padding: 0 8px;
31+
}
32+
33+
.color-appbar-section .e-menu-wrapper.e-inherit ul .e-menu-item .e-menu-icon {
34+
margin-right: 0;
35+
}
36+
37+
.color-appbar-section .e-menu-wrapper.e-inherit {
38+
margin: 0 10px;
39+
}
40+
41+
.fabric .color-appbar-section .e-menu-wrapper.e-inherit ul.e-menu:not(.e-vertical),
42+
.fabric-dark .color-appbar-section .e-menu-wrapper.e-inherit ul.e-menu:not(.e-vertical) {
43+
padding: 0;
44+
}
45+
46+
.color-appbar-section .e-input-group.e-control-wrapper.e-inherit {
47+
margin-left: 10px;
48+
}
49+
50+
.color-appbar-section .menu {
51+
margin-bottom: 3px;
52+
}
53+
54+
.color-appbar-section .color-appbar-container {
55+
margin: 0 -15px;
56+
}
57+
}

‎src/appbar/color.tsx

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import * as React from 'react';
2+
import { AppBarComponent, MenuComponent, MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-react-navigations';
3+
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
4+
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
5+
import { SampleBase } from '../common/sample-base';
6+
import './color.css';
7+
8+
export class Color extends SampleBase<{}, {}> {
9+
public btnCreated(): void {
10+
const menuButtonElement = document.querySelectorAll('.color-appbar-section .e-inherit.menu');
11+
for (let i = 0; i < menuButtonElement.length; i++) {
12+
if (!(menuButtonElement[i].hasAttribute("aria-label"))) {
13+
menuButtonElement[i].setAttribute('aria-label', 'menu');
14+
}
15+
}
16+
}
17+
public productDropDownButtonItems: ItemModel[] = [
18+
{ text: 'Developer' },
19+
{ text: 'Analytics' },
20+
{ text: 'Reporting' },
21+
{ text: 'E-Signature' },
22+
{ text: 'Help Desk' }
23+
];
24+
public companyDropDownButtonItems: ItemModel[] = [
25+
{ text: 'About Us' },
26+
{ text: 'Customers' },
27+
{ text: 'Blog' },
28+
{ text: 'Careers' }
29+
];
30+
public verticalMenuItems: MenuItemModel[] = [
31+
{
32+
iconCss: 'e-icons e-more-vertical-1',
33+
items: [
34+
{ text: 'Home' },
35+
{
36+
text: 'Products',
37+
items: [
38+
{ text: 'Developer' },
39+
{ text: 'Analytics' },
40+
{ text: 'Reporting' },
41+
{ text: 'E-Signature' },
42+
{ text: 'Help Desk' }
43+
]
44+
},
45+
{
46+
text: 'Company',
47+
items: [
48+
{ text: 'About Us' },
49+
{ text: 'Customers' },
50+
{ text: 'Blog' },
51+
{ text: 'Careers' }
52+
]
53+
},
54+
{ text: 'Login' }
55+
]
56+
}
57+
];
58+
public appBarColors: any = [
59+
{ colorMode: 'Light', colorClass: 'e-light', isPrimary: 'true', loginClass: 'login' }, { colorMode: 'Dark', colorClass: 'e-dark', isPrimary: 'false', loginClass: 'e-inherit login' },
60+
{ colorMode: 'Primary', colorClass: 'e-primary', isPrimary: 'false', loginClass: 'e-inherit login' }, { colorMode: 'Inherit', colorClass: 'e-inherit', isPrimary: 'true', loginClass: 'login' }
61+
];
62+
public onInputFocus(args: React.FocusEvent) {
63+
((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
64+
}
65+
public onInputBlur(args: React.FocusEvent) {
66+
((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
67+
}
68+
public beforeItemRender(args: MenuEventArgs): void {
69+
if (args.element.children.length > 0 && args.element.children[0].classList.contains("e-more-vertical-1")) {
70+
args.element.setAttribute('aria-label', 'more vertical');
71+
}
72+
}
73+
74+
render() {
75+
return (
76+
<div className='control-pane'>
77+
<div className='col-lg-12 control-section color-appbar-section'>
78+
<div className='control appbar-sample'>
79+
<div className="color-appbar-container">
80+
{this.appBarColors?.map((props, key) => (
81+
<div key={key}>
82+
<div className="row">
83+
<div className="col-md-12">
84+
<h5>{props.colorMode}</h5>
85+
</div>
86+
</div>
87+
<div className="row">
88+
<div className="col-md-12">
89+
<AppBarComponent colorMode={props.colorMode}>
90+
<ButtonComponent created={this.btnCreated.bind(this)} cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
91+
<ButtonComponent cssClass='e-inherit home e-appbar-menu'>Home</ButtonComponent>
92+
<DropDownButtonComponent cssClass={'e-inherit e-appbar-menu ' + props.colorClass} items={this.productDropDownButtonItems}>Products</DropDownButtonComponent>
93+
<DropDownButtonComponent cssClass={'e-inherit e-appbar-menu ' + props.colorClass} items={this.companyDropDownButtonItems}>Company</DropDownButtonComponent>
94+
<div className='e-appbar-spacer'></div>
95+
<div style={{ width: '200px', marginRight: '10px' }}>
96+
<span className='e-input-group e-control-wrapper e-inherit'>
97+
<input type='text' className='e-searchinput e-input' placeholder='Search' onFocus={this.onInputFocus} onBlur={this.onInputBlur} />
98+
<span className='e-icons e-search e-input-group-icon'></span>
99+
</span>
100+
</div>
101+
<div className="e-appbar-separator"></div>
102+
<ButtonComponent isPrimary={props.isPrimary} cssClass={props.loginClass}>Login</ButtonComponent>
103+
<MenuComponent cssClass={'e-inherit e-appbar-icon-menu ' + props.colorClass} items={this.verticalMenuItems} beforeItemRender={this.beforeItemRender.bind(this)}></MenuComponent>
104+
</AppBarComponent>
105+
</div>
106+
</div>
107+
<br />
108+
</div>
109+
))}
110+
</div>
111+
</div></div>
112+
<div id="action-description">
113+
<p>
114+
This sample demonstrates the available types of color in the <strong>React AppBar</strong>.
115+
</p>
116+
</div>
117+
<div id="description">
118+
<p>In this demo, the available types of background color for <strong>React AppBar</strong> are showcased. The background and font colors can be set using the <strong>ColorMode</strong> property. The different types are <code>light</code>, <code>dark</code>, <code>primary</code>, and <code>inherit</code>.</p>
119+
<p><code>Light</code> - The AppBar can be displayed with a light background.</p>
120+
<p><code>Dark</code> - The AppBar can be displayed with a dark background.</p>
121+
<p><code>Primary</code> - The AppBar can be displayed with primary colors.</p>
122+
<p><code>Inherit</code> - The AppBar inherits the color from its parent element.</p> <br />
123+
<p> On <code>mobile devices</code>, media query is used to display the AppBar in adaptive views. You can click the menu to see the hidden AppBar content.</p>
124+
</div>
125+
</div>
126+
);
127+
}
128+
}

‎src/appbar/config.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const AppBarSampleOrder: Object = [
2+
{ 'path': 'appbar/default', 'component': 'Default', 'name': 'Default Functionalities', 'description': 'This sample demonstrates the default functionalities of the Syncfusion React AppBar component platform.', 'order': '01', 'category': 'AppBar', 'api': '{ "AppBar":["mode", "colorMode"] }' },
3+
{ 'path': 'appbar/color', 'component': 'Color', 'name': 'Color', 'description': 'This sample demonstrates the available bar color modes in the Syncfusion React AppBar component platform.', 'order': '01', 'category': 'AppBar', 'api': '{ "AppBar":["colorMode"] }' }
4+
]

0 commit comments

Comments
 (0)