Expose appid to callback in sidebar

Author: chabb

dash_mp_components/MatSidebar.py

@@ -9,21 +9,21 @@ class MatSidebar(Component):
 
 Keyword arguments:
 - id (string; optional): The ID used to identify this component in Dash callbacks.
-- currentApp (string; optional)
-- state (string; optional)
-- layout (a value equal to: 'vertical', 'horizontal'; optional)"""
+- currentApp (string; optional): The ID of the current selected app
+- appId (string; optional): This is a read-only prop that dash callback can subscribe to
+- layout (a value equal to: 'vertical', 'horizontal'; optional): The layout of the sidebar"""
     @_explicitize_args
     def __init__(self,
                  id=Component.UNDEFINED,
                  currentApp=Component.UNDEFINED,
-                 state=Component.UNDEFINED,
+                 appId=Component.UNDEFINED,
                  layout=Component.UNDEFINED,
                  **kwargs):
-        self._prop_names = ['id', 'currentApp', 'state', 'layout']
+        self._prop_names = ['id', 'currentApp', 'appId', 'layout']
         self._type = 'MatSidebar'
         self._namespace = 'dash_mp_components'
         self._valid_wildcard_attributes = []
-        self.available_properties = ['id', 'currentApp', 'state', 'layout']
+        self.available_properties = ['id', 'currentApp', 'appId', 'layout']
         self.available_wildcard_properties = []
 
         _explicit_args = kwargs.pop('_explicit_args')

dash_mp_components/dash_mp_components.min.js

@@ -235,14 +235,14 @@
           "name": "string"
         },
         "required": false,
-        "description": ""
+        "description": "The ID of the current selected app"
       },
-      "state": {
+      "appId": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": ""
+        "description": "This is a read-only prop that dash callback can subscribe to"
       },
       "layout": {
         "type": {
@@ -259,7 +259,7 @@
           ]
         },
         "required": false,
-        "description": ""
+        "description": "The layout of the sidebar"
       }
     }
   },

dash_mp_components/dash_mp_components.min.js.map

@@ -10,7 +10,7 @@ export default class MatSidebar extends Component {
            currentApp={this.props.currentApp}
            onAppSelected={(v) => {
                 console.log(v);
-                this.props.setProps({state: v});
+                this.props.setProps({appId: v});
             }}/>
         );
     }
@@ -25,7 +25,20 @@ MatSidebar.propTypes = {
      * to Dash, to make them available for callbacks.
      */
     setProps: PropTypes.func,
+    /**
+     *
+     * The ID of the current selected app
+     *
+     */
     currentApp: PropTypes.string,
-    state: PropTypes.string,
+    /**
+     * This is a read-only prop that dash callback can subscribe to
+     */
+    appId: PropTypes.string,
+    /**
+    *
+    * The layout of the sidebar
+    *
+    */
     layout: PropTypes.oneOf(['vertical', 'horizontal']),
 };

dash_mp_components/metadata.json

@@ -592,11 +592,21 @@
                                             hiddenElements=['Fe', 'Dy'],
                                             enabledElements=['H', 'O']),
     html.P(id='p'),
+    html.P(id='p2'),
     html.Div(id='component'),
     dash_mp_components.MatSidebar(id='bar', layout='horizontal')
 ])
 
 
+@app.callback([Output(component_id='p2', component_property='children')],
+              [Input(component_id='bar', component_property='appId')])
+def display_output2(value):
+    print(value)
+    if value is None:
+        return ['']
+    return [value]
+
+
 @app.callback([Output(component_id='p', component_property='children')],
               [Input(component_id='context', component_property='state')])
 def display_output2(value):