Add sidebar with layout

Author: chabb

dash_mp_components/MatSidebar.py

@@ -10,18 +10,20 @@ class MatSidebar(Component):
 Keyword arguments:
 - id (string; optional): The ID used to identify this component in Dash callbacks.
 - currentApp (string; optional)
-- state (dict; optional)"""
+- state (string; optional)
+- layout (a value equal to: 'vertical', 'horizontal'; optional)"""
     @_explicitize_args
     def __init__(self,
                  id=Component.UNDEFINED,
                  currentApp=Component.UNDEFINED,
                  state=Component.UNDEFINED,
+                 layout=Component.UNDEFINED,
                  **kwargs):
-        self._prop_names = ['id', 'currentApp', 'state']
+        self._prop_names = ['id', 'currentApp', 'state', 'layout']
         self._type = 'MatSidebar'
         self._namespace = 'dash_mp_components'
         self._valid_wildcard_attributes = []
-        self.available_properties = ['id', 'currentApp', 'state']
+        self.available_properties = ['id', 'currentApp', 'state', 'layout']
         self.available_wildcard_properties = []
 
         _explicit_args = kwargs.pop('_explicit_args')

dash_mp_components/dash_mp_components.min.js

@@ -239,7 +239,24 @@
       },
       "state": {
         "type": {
-          "name": "object"
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "layout": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'vertical'",
+              "computed": false
+            },
+            {
+              "value": "'horizontal'",
+              "computed": false
+            }
+          ]
         },
         "required": false,
         "description": ""

dash_mp_components/dash_mp_components.min.js.map

@@ -6,11 +6,11 @@ import PropTypes from 'prop-types';
 export default class MatSidebar extends Component {
     render() {
         return (
-           <Sidebar width={100}
+           <Sidebar width={100} layout={this.props.layout}
            currentApp={this.props.currentApp}
            onAppSelected={(v) => {
-            //TODO filter state
-                //this.props.setProps({state: v});
+                console.log(v);
+                this.props.setProps({state: v});
             }}/>
         );
     }
@@ -26,5 +26,6 @@ MatSidebar.propTypes = {
      */
     setProps: PropTypes.func,
     currentApp: PropTypes.string,
-    state: PropTypes.object
+    state: PropTypes.string,
+    layout: PropTypes.oneOf(['vertical', 'horizontal']),
 };

dash_mp_components/metadata.json

@@ -593,7 +593,7 @@
                                             enabledElements=['H', 'O']),
     html.P(id='p'),
     html.Div(id='component'),
-    dash_mp_components.MatSidebar(id='bar')
+    dash_mp_components.MatSidebar(id='bar', layout='horizontal')
 ])