Merge remote-tracking branch 'upstream/master' into feature/ui-errors-and-expressions

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,11 +13,18 @@ class InputBlock extends React.Component {
       PropTypes.string,
       PropTypes.element,
     ]).isRequired,
-    doc: PropTypes.string,
     action: PropTypes.element,
     children: PropTypes.node.isRequired,
     style: PropTypes.object,
     onChange: PropTypes.func,
+    fieldSpec: PropTypes.object,
+  }
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      showDoc: false,
+    }
   }
 
   onChange(e) {
@@ -23,6 +32,12 @@ class InputBlock extends React.Component {
     return this.props.onChange(value === "" ? undefined : value)
   }
 
+  onToggleDoc = (val) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
   render() {
     return <div style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
@@ -32,15 +47,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>
@@ -58,6 +74,14 @@ class InputBlock extends React.Component {
           {this.props.error.message}
         </div>
       }
+      {this.props.fieldSpec &&
+      <div
+        className="maputnik-doc-inline"
+        style={{display: this.state.showDoc ? '' : 'none'}}
+      >
+        <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,83 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class SpecDoc extends React.Component {
+  static propTypes = {
+    fieldSpec: PropTypes.object.isRequired,
+  }
+
+  render () {
+    const {fieldSpec} = this.props;
+
+    const {doc, values} = fieldSpec;
+    const sdkSupport = fieldSpec['sdk-support'];
+
+    const headers = {
+      js: "JS",
+      android: "Android",
+      ios: "iOS",
+      macos: "macOS",
+    };
+
+    const renderValues = (
+      !!values &&
+      // HACK: Currently we merge additional values into the stylespec, so this is required
+      // See <https://github.com/maputnik/editor/blob/master/src/components/fields/PropertyGroup.jsx#L16>
+      !Array.isArray(values)
+    );
+
+    return (
+      <>
+        {doc && 
+          <div className="SpecDoc">
+            <div className="SpecDoc__doc">{doc}</div>
+            {renderValues &&
+              <ul className="SpecDoc__values">
+                {Object.entries(values).map(([key, value]) => {
+                  return (
+                    <li key={key}>
+                      <code>{JSON.stringify(key)}</code>
+                      <div>{value.doc}</div>
+                    </li>
+                  );
+                })}
+              </ul>
+            }
+          </div>
+        }
+        {sdkSupport &&
+          <div className="SpecDoc__sdk-support">
+            <table className="SpecDoc__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>
+        }
+      </>
+    );
+  }
+}