feature(EJ2-5519): scrollTop to Action Description in Mobile View

Author: pipeline

production/react/demos/src/common/component-content.tsx

@@ -20,6 +20,7 @@ let categoryName: string;
 let propBorder: HTMLElement = createElement('div', { className: 'sb-property-border' });
 export let sampleNameElement: Element = select('#component-name>.sb-sample-text');
 
+let rightPane: Element = select('.sb-right-pane');
 export let sourceTab: Tab;
 
 let mobilePropPane: Element = select('.sb-mobile-prop-pane');
@@ -260,7 +261,8 @@ function processDeviceDependables(): void {
 }
 
 export function intialLoadScrollTop(): void {
-    select('.sb-right-pane').scrollTop = 0;
+    isMobile = window.matchMedia('(max-width:550px)').matches;
+    isMobile ? rightPane.scrollTop = 74 : rightPane.scrollTop = 0;   
 }
 
 export function renderDescriptions(): void {
@@ -286,7 +288,7 @@ export function onComponentLoad(): void {
         propBorder.classList.add('sb-hide');
     }
     let mobileSetting: Element = select('.sb-mobile-setting');
-    isMobile = window.matchMedia('(max-width:550px)').matches;;
+    isMobile = window.matchMedia('(max-width:550px)').matches;
     if (isMobile && mobileSetting) {
         if (propPanel) {
             mobileSetting.classList.remove('sb-hide');

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

@@ -492,7 +492,10 @@ export function removeOverlay(): void {
   if (!sbBodyOverlay.classList.contains('sb-hide')) {
     sbBodyOverlay.classList.add('sb-hide');
   }
-  sbRightPane.scrollTop = 0;
+  isMobile = window.matchMedia('(max-width:550px)').matches;
+  if (!isMobile) {
+    sbRightPane.scrollTop = 0;
+  }
 }
 
 export function sampleOverlay(): void {
@@ -673,6 +676,8 @@ function loadTheme(theme: string): void {
     setSelectList();
     removeOverlay();
     ReactDOM.render(<Content />, document.getElementById('tab-component'));
-    document.querySelector('.sb-right-pane').scrollTop = 0;
+    if (!isMobile) {
+      document.querySelector('.sb-right-pane').scrollTop = 0;      
+    }
   });
 }

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

@@ -192,7 +192,7 @@ export class LeftPane extends React.Component<{}, {}> {
                 isPc = window.matchMedia('(min-width:850px)').matches;
                 sampleOverlay();
                 let theme: string = location.hash.split('/')[1] || 'material';
-                if (arg.item && ((isMobile && !select('.sb-mobile-left-pane').classList.contains('sb-hide')) ||
+                if (arg.item && ((isMobile && !select('.sb-left-pane').classList.contains('sb-hide')) ||
                     ((isTablet || (Browser.isDevice && isPc)) && isLeftPaneOpen()))) {
                     toggleLeftPane();
                 }