Tidy inline docs and added sdk support table.

src/components/inputs/InputBlock.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import DocLabel from '../fields/DocLabel'
+import SpecDoc from './SpecDoc'
+
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
@@ -11,7 +13,6 @@ class InputBlock extends React.Component {
       PropTypes.string,
       PropTypes.element,
     ]).isRequired,
-    doc: PropTypes.string,
     action: PropTypes.element,
     children: PropTypes.node.isRequired,
     style: PropTypes.object,
@@ -44,16 +45,16 @@ class InputBlock extends React.Component {
         "maputnik-action-block": this.props.action
       })}
       >
-      {this.props.doc &&
+      {this.props.fieldSpec &&
       <div className="maputnik-input-block-label">
         <DocLabel
           label={this.props.label}
-          doc={this.props.doc}
           onToggleDoc={this.onToggleDoc}
+          fieldSpec={this.props.fieldSpec}
         />
       </div>
       }
-      {!this.props.doc &&
+      {!this.props.fieldSpec &&
       <label className="maputnik-input-block-label">
         {this.props.label}
       </label>
@@ -66,12 +67,12 @@ class InputBlock extends React.Component {
       <div className="maputnik-input-block-content">
         {this.props.children}
       </div>
-      {this.props.doc &&
+      {this.props.fieldSpec &&
       <div
         className="maputnik-doc-inline"
         style={{display: this.state.showDoc ? '' : 'none'}}
       >
-        {this.props.doc}
+        <SpecDoc fieldSpec={this.props.fieldSpec} />
       </div>
       }
     </div>

src/components/inputs/SelectInput.jsx

@@ -8,6 +8,7 @@ class SelectInput extends React.Component {
     options: PropTypes.array.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
   }
 
 
@@ -21,6 +22,7 @@ class SelectInput extends React.Component {
       className="maputnik-select"
       data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}
+      title={this.props.title}
       value={this.props.value}
       onChange={e => this.props.onChange(e.target.value)}
     >

src/components/inputs/SpecDoc.js

@@ -0,0 +1,55 @@
+import React from 'react'
+
+export default function SpecDoc (props={}) {
+  const {fieldSpec} = props;
+
+  const {doc} = fieldSpec;
+  const sdkSupport = fieldSpec['sdk-support'];
+
+  const headers = {
+    js: "JS",
+    android: "Android",
+    ios: "iOS",
+    macos: "macOS",
+  };
+
+  return (
+    <>
+      {doc && 
+        <div>{doc}</div>
+      }
+      {sdkSupport &&
+        <div className="sdk-support">
+          <table className="sdk-support__table">
+            <thead>
+              <tr>
+                <th></th>
+                {Object.values(headers).map(header => {
+                  return <th key={header}>{header}</th>;
+                })}
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(sdkSupport).map(([key, supportObj]) => {
+                return (
+                  <tr key={key}>
+                    <td>{key}</td>
+                    {Object.keys(headers).map(k => {
+                      const value = supportObj[k];
+                      if (supportObj.hasOwnProperty(k)) {
+                        return <td key={k}>{supportObj[k]}</td>;
+                      }
+                      else {
+                        return <td key={k}>no</td>;
+                      }
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      }
+    </>
+  );
+}