button.Base: register menus to the ScrollSync main thread addon #4579

Author: tobiu

examples/ConfigurationViewport.mjs

@@ -49,7 +49,11 @@ class ConfigurationViewport extends Viewport {
         /**
          * @member {Number} exampleComponentFlex=1
          */
-        exampleComponentFlex: 2
+        exampleComponentFlex: 2,
+        /**
+         * @member {Number} exampleContainerConfig=null
+         */
+        exampleContainerConfig: null
     }
 
     /**
@@ -69,7 +73,8 @@ class ConfigurationViewport extends Viewport {
             items : [me.exampleComponent],
             flex  : me.exampleComponentFlex,
             layout: 'base',
-            style : {padding: '20px'}
+            style : {padding: '20px'},
+            ...me.exampleContainerConfig
         }, {
             module: Panel,
             cls   : ['neo-panel', 'neo-container', 'neo-configuration-panel'],

examples/button/base/MainContainer.mjs

@@ -1,6 +1,7 @@
 import Button                from '../../../src/button/Base.mjs';
 import CheckBox              from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Container             from '../../../src/container/Base.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
 import SelectField           from '../../../src/form/field/Select.mjs';
@@ -15,7 +16,14 @@ class MainContainer extends ConfigurationViewport {
         className           : 'Neo.examples.button.base.MainContainer',
         configItemLabelWidth: 160,
         configItemWidth     : 280,
-        layout              : {ntype: 'hbox', align: 'stretch'}
+        layout              : {ntype: 'hbox', align: 'stretch'},
+
+        exampleContainerConfig: {
+            style: {
+                overflow: 'auto',
+                padding : '20px'
+            }
+        }
     }
 
     createConfigurationComponents() {
@@ -175,32 +183,39 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return Neo.create({
-            module   : Button,
-            badgeText: 'Badge',
-            handler  : data => console.log('button click =>', data.component.id),
-            height   : 50,
-            iconCls  : 'fa fa-home',
-            text     : 'Hello World',
-            ui       : 'primary',
-            width    : 150,
+            module: Container,
+            height: 2000,
+            layout: 'vbox',
 
-            menu: [{
-                handler: data => console.log('menu item 1 click =>', data),
-                iconCls: 'fa fa-home',
-                text   : 'Item 1'
-            }, {
-                handler: data => console.log('menu item 2 click =>', data),
-                iconCls: 'fa fa-user',
-                text   : 'Item 2'
-            }, {
-                handler: data => console.log('menu item 3 click =>', data),
-                iconCls: 'fa fa-play',
-                text   : 'Item 3'
-            }]
+            items: [{
+                module   : Button,
+                badgeText: 'Badge',
+                handler  : data => console.log('button click =>', data.component.id),
+                height   : 50,
+                iconCls  : 'fa fa-home',
+                style    : {marginTop: '500px'},
+                text     : 'Hello World',
+                ui       : 'primary',
+                width    : 150,
 
-            /*tooltips: [{
-                text: 'Hello World Tooltip'
-            }]*/
+                menu: [{
+                    handler: data => console.log('menu item 1 click =>', data),
+                    iconCls: 'fa fa-home',
+                    text   : 'Item 1'
+                }, {
+                    handler: data => console.log('menu item 2 click =>', data),
+                    iconCls: 'fa fa-user',
+                    text   : 'Item 2'
+                }, {
+                    handler: data => console.log('menu item 3 click =>', data),
+                    iconCls: 'fa fa-play',
+                    text   : 'Item 3'
+                }]
+
+                /*tooltips: [{
+                    text: 'Hello World Tooltip'
+                }]*/
+            }]
         })
     }
 }

src/button/Base.mjs

@@ -251,12 +251,13 @@ class Base extends Component {
                 let me = this;
 
                 me.menuList = Neo.create({
-                    module      : module.default,
-                    appName     : me.appName,
-                    displayField: 'text',
-                    floating    : true,
-                    hidden      : true,
-                    items       : value
+                    module         : module.default,
+                    appName        : me.appName,
+                    displayField   : 'text',
+                    floating       : true,
+                    hidden         : true,
+                    items          : value,
+                    parentComponent: me
                 })
             })
         }

src/menu/List.mjs

@@ -106,7 +106,12 @@ class List extends BaseList {
 
     /**
      * If the menu is floating, it will anchor itself to the parentRect
-     * @member {Object|null} parentComponent=null
+     * @member {Neo.component.Base|null} parentComponent=null
+     */
+    parentComponent = null
+    /**
+     * If the menu is floating, it will anchor itself to the parentRect
+     * @member {Object|null} parentRect=null
      */
     parentRect = null
 
@@ -176,6 +181,11 @@ class List extends BaseList {
             parentRect = me.parentRect;
 
         if (value && parentRect) {
+            Neo.main.addon.ScrollSync.register({
+                sourceId: me.id,
+                targetId: me.parentComponent.id
+            })
+
             me.getDomRect().then(rect => {
                 let style = me.style || {};