feature(Ej2-5420): Chart plunk issue fixes

Author: pipeline

production/react/demos/src/common/index.tsx

@@ -97,10 +97,17 @@ if (isMobile) {
   select('.sb-left-pane-footer').appendChild(select('.sb-footer-left'));
   select('.sb-left-pane').classList.add('sb-hide');
   leftToggle.classList.remove('toggle-active');
-
 } else {
   leftPane.classList.remove('sb-hide');
 }
+/**
+ * Tab View
+ */
+if (isTablet || (Browser.isDevice && isPc)) {
+  leftToggle.classList.remove('toggle-active');
+  select('.sb-left-pane').classList.add('sb-hide');
+  select('.sb-right-pane').classList.add('control-fullview');
+}
 changeMouseOrTouch(switchText);
 localStorage.removeItem('ej2-switch');
 enableRipple(selectedTheme === 'material' || !selectedTheme);
@@ -552,6 +559,9 @@ export function toggleLeftPane(): void {
       leftPane.style.overflowY = '';
       resizeManualTrigger = true;
       window.dispatchEvent(new Event('resize'));
+      if (Browser.isDevice) {
+        window.dispatchEvent(new Event('orientationchange'));
+      }
       resizeManualTrigger = false;
     }
   });
@@ -593,17 +603,17 @@ function processResize(e: any): void {
     if (footer.parentElement.classList.contains('sb-left-pane-footer')) {
       select('.sb-footer').appendChild(footer);
     }
-    if (isTablet) {
+    if (isTablet || (Browser.isDevice && isPc)) {
       if (!leftPane.classList.contains('sb-hide')) {
         toggleLeftPane();
       }
       setTimeout(() => {
         if (!rightPane.classList.contains('control-fullview')) {
           rightPane.classList.add('control-fullview');
         }
-      }, 500);
+      }, 600);
     }
-    if (isPc) {
+    if (isPc && !Browser.isDevice) {
       if (isVisible('.sb-left-pane')) {
         rightPane.classList.remove('control-fullview');
       } else {

production/react/demos/src/common/leftpane.tsx

@@ -10,6 +10,7 @@ import { selectDefaultTab } from './component-content';
 
 let isMobile: boolean;
 let isTablet: boolean;
+let isPc: boolean;
 let sampleOrder: string[] = [];
 let controlSampleData: any = {};
 
@@ -186,14 +187,16 @@ export class LeftPane extends React.Component<{}, {}> {
         if (path) {
             this.controlListRefresh(arg.node || arg.item);
             if (path !== curHashCollection) {
+                isMobile = window.matchMedia('(max-width:550px)').matches;
+                isTablet = window.matchMedia('(min-width:600px) and (max-width: 850px)').matches;
+                isPc = window.matchMedia('(min-width:850px)').matches;
                 sampleOverlay();
                 let theme: string = location.hash.split('/')[1] || 'material';
-                location.hash = '#/' + theme + path;
-            }
-            isMobile = window.matchMedia('(max-width:550px)').matches;
-            isTablet = window.matchMedia('(min-width:600px) and (max-width: 850px)').matches;
-            if ((arg.item && isMobile && !select('.sb-left-pane').classList.contains('sb-hide')) || (isTablet && isLeftPaneOpen())) {
-                toggleLeftPane();
+                if (arg.item && ((isMobile && !select('.sb-mobile-left-pane').classList.contains('sb-hide')) ||
+                    ((isTablet || (Browser.isDevice && isPc)) && isLeftPaneOpen()))) {
+                    toggleLeftPane();
+                }
+                setTimeout(() => { location.hash = '#/' + theme + path; }, 600);
             }
         }
     }