v20.3.47 is released

Author: pipeline

config.json

@@ -125,6 +125,10 @@
 		"online",
 		"editor",
 		"richtexteditor",
+		"appbar",
+		"checkbox",
+		"dropdown",
+		"dropdown-button",
 		null
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-react-samples",
-  "version": "20.2.43",
+  "version": "20.3.47",
   "description": "Examples of React UI Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -39,6 +39,7 @@
     "@syncfusion/ej2-react-gantt": "*",
     "@syncfusion/ej2-react-spreadsheet": "*",
     "@syncfusion/ej2-react-progressbar": "*",
+    "@syncfusion/ej2-react-image-editor": "*",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/history": "4.7.7",

sampleName.json

@@ -7,6 +7,13 @@
             "icon":"Icons"
         }
     },
+    "appbar": {
+        "ControlName": "AppBar",
+        "Samples": {
+            "default": "Default Functionalities",
+            "color": "Color"
+        }
+    },
     "auto-complete": {
         "ControlName": "AutoComplete",
         "Samples": {
@@ -376,7 +383,6 @@
         "ControlName": "Dialog",
         "Samples": {
             "default": "Default Functionalities",
-            "custom-dialog": "Custom Dialogs",
             "modal-dialog": "Modal",
             "template": "Template",
             "dialog-contents-via-ajax": "Ajax Content",
@@ -413,6 +419,13 @@
             "form-fields": "Form Fields"
         }
     },
+    "image-editor": {
+        "ControlName": "Image Editor",
+        "Samples": {
+            "default": "Default Functionalities",
+            "profile-picture": "Profile Picture"
+		}
+	},
     "drop-down-list": {
         "ControlName": "Dropdown List",
         "Samples": {
@@ -456,6 +469,15 @@
             "ibm-cos-node-file-provider":"IBM Cloud File Provider"
         }
     },
+    "floating-action-button": {
+        "ControlName": "Floating Action Button",
+        "Samples": {
+            "overview": "Overview",
+            "default": "Default Functionalities",
+            "position": "Position",
+            "styles": "Styles"
+        }
+    },
     "form-validator": {
         "ControlName": "Form Validator",
         "Samples": {
@@ -717,6 +739,14 @@
             "toolbar-integration": "Toolbar Integration"
         }
     },
+    "mention": {
+        "ControlName": "Mention",
+        "Samples": {
+            "default": "Default Functionalities",
+            "multiple-list": "Multiple List",
+            "template": "Template"
+        }
+    },
     "multi-select": {
         "ControlName": "MultiSelect Dropdown",
         "Samples": {
@@ -792,6 +822,14 @@
             "exporting": "Export"
         }
     },
+    "predefined-dialogs": {
+        "ControlName": "Predefined Dialogs",
+        "Samples": { 
+            "default": "Default Functionalities",
+            "customization": "Customization",
+            "animation": "Animation"
+        }
+    },
     "query-builder": {
         "ControlName": "Query Builder",
         "Samples": {
@@ -825,6 +863,7 @@
             "image": "Image",
             "inline": "Inline",
             "paste-cleanup": "Paste from MS Word",
+            "mention-integration": "Mention Integration",
             "iframe": "IFrame",
             "print": "Print",
             "ajax-load": "Ajax Content",
@@ -839,8 +878,7 @@
             "insert-special-characters": "Insert Special Characters",
             "markdown-editor": "Overview",
             "markdown-editor-preview": "Preview",
-            "markdown-editor-custom-format": "Custom Format",
-            "tribute": "Tribute JS"
+            "markdown-editor-custom-format": "Custom Format"
         }
     },
     "schedule": {
@@ -933,6 +971,13 @@
             "azure-pricing": "Cloud Pricing"
         }
     },
+    "skeleton": {
+        "ControlName": "Skeleton",
+        "Samples": {
+            "default": "Default Functionalities",
+            "animation": "Animation"
+        }
+    },
     "smith-chart": {
         "ControlName": "Smith Chart",
         "Samples": {
@@ -953,6 +998,17 @@
             "range-band": "Range Band"
         }
     },
+    "speed-dial": {
+        "ControlName": "SpeedDial",
+        "Samples": {
+            "default": "Default Functionalities",
+            "linear": "Position (Linear)",
+            "radial": "Radial Menu",
+            "styles": "Styles",
+            "template": "Template",
+            "modal": "Modal"
+        }
+    },
     "splitter": {
         "ControlName": "Splitter",
         "Samples": {
@@ -1035,6 +1091,16 @@
             "api": "API"
         }
     },
+    "message": {
+        "ControlName": "Message",
+        "Samples": {
+            "default": "Default Functionalities",
+            "variants": "Variants",
+            "icons": "Icons",
+            "customization": "Customization",
+            "template": "Template"
+        }
+    },
     "toolbar": {
         "ControlName": "Toolbar",
         "Samples": {

src/appbar/color.css

@@ -0,0 +1,57 @@
+.color-appbar-section .e-dropdown-btn.e-inherit,
+.color-appbar-section .e-btn.e-inherit.home {
+  margin: 0 5px;
+}
+
+.color-appbar-section .e-appbar-icon-menu {
+  display: none;
+}
+
+.color-appbar-section .e-appbar .e-appbar-separator {
+  margin: 0 10px;
+}
+
+@media screen and (max-width: 480px) {
+
+  .color-appbar-section .e-appbar-icon-menu {
+    display: block;
+  }
+
+  .color-appbar-section .login,
+  .color-appbar-section .e-appbar-separator,
+  .color-appbar-section .e-dropdown-btn.e-inherit.e-appbar-menu,
+  .color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-menu,
+  .color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-icon-menu .e-menu .e-menu-item .e-caret,
+  .color-appbar-section .e-btn.e-inherit.e-appbar-menu {
+    display: none;
+  }
+
+  .color-appbar-section .e-menu-wrapper.e-inherit.e-appbar-icon-menu ul .e-menu-item.e-menu-caret-icon {
+    padding: 0 8px;
+  }
+
+  .color-appbar-section .e-menu-wrapper.e-inherit ul .e-menu-item .e-menu-icon {
+    margin-right: 0;
+  }
+
+  .color-appbar-section .e-menu-wrapper.e-inherit {
+    margin: 0 10px;
+  }
+
+  .fabric .color-appbar-section .e-menu-wrapper.e-inherit ul.e-menu:not(.e-vertical),
+  .fabric-dark .color-appbar-section .e-menu-wrapper.e-inherit ul.e-menu:not(.e-vertical) {
+    padding: 0;
+  }
+
+  .color-appbar-section .e-input-group.e-control-wrapper.e-inherit {
+    margin-left: 10px;
+  }
+
+  .color-appbar-section .menu {
+    margin-bottom: 3px;
+  }
+
+  .color-appbar-section .color-appbar-container {
+    margin: 0 -15px;
+  }
+}

src/appbar/color.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { AppBarComponent, MenuComponent, MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-react-navigations';
+import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { SampleBase } from '../common/sample-base';
+import './color.css';
+
+export class Color extends SampleBase<{}, {}> {
+  public btnCreated(): void {
+    const menuButtonElement = document.querySelectorAll('.color-appbar-section .e-inherit.menu');
+    for (let i = 0; i < menuButtonElement.length; i++) {
+      if (!(menuButtonElement[i].hasAttribute("aria-label"))) {
+        menuButtonElement[i].setAttribute('aria-label', 'menu');
+      }
+    }
+  }
+  public productDropDownButtonItems: ItemModel[] = [
+    { text: 'Developer' },
+    { text: 'Analytics' },
+    { text: 'Reporting' },
+    { text: 'E-Signature' },
+    { text: 'Help Desk' }
+  ];
+  public companyDropDownButtonItems: ItemModel[] = [
+    { text: 'About Us' },
+    { text: 'Customers' },
+    { text: 'Blog' },
+    { text: 'Careers' }
+  ];
+  public verticalMenuItems: MenuItemModel[] = [
+    {
+      iconCss: 'e-icons e-more-vertical-1',
+      items: [
+        { text: 'Home' },
+        {
+          text: 'Products',
+          items: [
+            { text: 'Developer' },
+            { text: 'Analytics' },
+            { text: 'Reporting' },
+            { text: 'E-Signature' },
+            { text: 'Help Desk' }
+          ]
+        },
+        {
+          text: 'Company',
+          items: [
+            { text: 'About Us' },
+            { text: 'Customers' },
+            { text: 'Blog' },
+            { text: 'Careers' }
+          ]
+        },
+        { text: 'Login' }
+      ]
+    }
+  ];
+  public appBarColors: any = [
+    { colorMode: 'Light', colorClass: 'e-light', isPrimary: 'true', loginClass: 'login' }, { colorMode: 'Dark', colorClass: 'e-dark', isPrimary: 'false', loginClass: 'e-inherit login' },
+    { colorMode: 'Primary', colorClass: 'e-primary', isPrimary: 'false', loginClass: 'e-inherit login' }, { colorMode: 'Inherit', colorClass: 'e-inherit', isPrimary: 'true', loginClass: 'login' }
+  ];
+  public onInputFocus(args: React.FocusEvent) {
+    ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
+  }
+  public onInputBlur(args: React.FocusEvent) {
+    ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
+  }
+  public beforeItemRender(args: MenuEventArgs): void {
+    if (args.element.children.length > 0 && args.element.children[0].classList.contains("e-more-vertical-1")) {
+      args.element.setAttribute('aria-label', 'more vertical');
+    }
+  }
+
+  render() {
+    return (
+      <div className='control-pane'>
+        <div className='col-lg-12 control-section color-appbar-section'>
+          <div className='control appbar-sample'>
+            <div className="color-appbar-container">
+              {this.appBarColors?.map((props, key) => (
+                <div key={key}>
+                  <div className="row">
+                    <div className="col-md-12">
+                      <h5>{props.colorMode}</h5>
+                    </div>
+                  </div>
+                  <div className="row">
+                    <div className="col-md-12">
+                      <AppBarComponent colorMode={props.colorMode}>
+                        <ButtonComponent created={this.btnCreated.bind(this)} cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
+                        <ButtonComponent cssClass='e-inherit home e-appbar-menu'>Home</ButtonComponent>
+                        <DropDownButtonComponent cssClass={'e-inherit e-appbar-menu ' + props.colorClass} items={this.productDropDownButtonItems}>Products</DropDownButtonComponent>
+                        <DropDownButtonComponent cssClass={'e-inherit e-appbar-menu ' + props.colorClass} items={this.companyDropDownButtonItems}>Company</DropDownButtonComponent>
+                        <div className='e-appbar-spacer'></div>
+                        <div style={{ width: '200px', marginRight: '10px' }}>
+                          <span className='e-input-group e-control-wrapper e-inherit'>
+                            <input type='text' className='e-searchinput e-input' placeholder='Search' onFocus={this.onInputFocus} onBlur={this.onInputBlur} />
+                            <span className='e-icons e-search e-input-group-icon'></span>
+                          </span>
+                        </div>
+                        <div className="e-appbar-separator"></div>
+                        <ButtonComponent isPrimary={props.isPrimary} cssClass={props.loginClass}>Login</ButtonComponent>
+                        <MenuComponent cssClass={'e-inherit e-appbar-icon-menu ' + props.colorClass} items={this.verticalMenuItems} beforeItemRender={this.beforeItemRender.bind(this)}></MenuComponent>
+                      </AppBarComponent>
+                    </div>
+                  </div>
+                  <br />
+                </div>
+              ))}
+            </div>
+          </div></div>
+        <div id="action-description">
+          <p>
+            This sample demonstrates the available types of color in the <strong>React AppBar</strong>.
+          </p>
+        </div>
+        <div id="description">
+          <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>
+          <p><code>Light</code> - The AppBar can be displayed with a light background.</p>
+          <p><code>Dark</code> - The AppBar can be displayed with a dark background.</p>
+          <p><code>Primary</code> - The AppBar can be displayed with primary colors.</p>
+          <p><code>Inherit</code> - The AppBar inherits the color from its parent element.</p> <br />
+          <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>
+        </div>
+      </div>
+    );
+  }
+}

src/appbar/config.tsx

@@ -0,0 +1,4 @@
+export const AppBarSampleOrder: Object = [
+    { '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"] }' },
+    { '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"] }' }
+]