From d3276829b2c63a975bcd8a0cadcf1e95cab4c2e1 Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 22:44:22 +0100
Subject: [PATCH] Show hints in the source modal as well

---
 src/components/modals/SettingsModal.jsx     |  6 +++---
 src/components/modals/SourcesModal.jsx      |  5 +++--
 src/components/sources/SourceTypeEditor.jsx | 11 ++++++-----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index f977aee..7a2e419 100644
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -46,7 +46,7 @@ class SettingsModal extends React.Component {
       onOpenToggle={this.props.onOpenToggle}
       title={'Style Settings'}
     >
-      <InputBlock label={"Name"} doc={GlSpec['$root'].name.doc}>
+      <InputBlock label={"Name"} doc={GlSpec.$root.name.doc}>
         <StringInput {...inputProps}
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
@@ -58,14 +58,14 @@ class SettingsModal extends React.Component {
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
-      <InputBlock label={"Sprite URL"} doc={GlSpec['$root'].sprite.doc}>
+      <InputBlock label={"Sprite URL"} doc={GlSpec.$root.sprite.doc}>
         <StringInput {...inputProps}
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
       </InputBlock>
 
-      <InputBlock label={"Glyphs URL"} doc={GlSpec['$root'].glyphs.doc}>
+      <InputBlock label={"Glyphs URL"} doc={GlSpec.$root.glyphs.doc}>
         <StringInput {...inputProps}
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index da1d10f..e0378c4 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import Modal from './Modal'
 import Heading from '../Heading'
 import Button from '../Button'
@@ -163,13 +164,13 @@ class AddSource extends React.Component {
 
   render() {
     return <div>
-      <InputBlock label={"Source ID"}>
+      <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
         <StringInput
           value={this.state.sourceId}
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"}>
+      <InputBlock label={"Source Type"} doc={GlSpec.source_tile.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 913d813..289b3ec 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/src/components/sources/SourceTypeEditor.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
@@ -10,7 +11,7 @@ class TileJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"TileJSON URL"}>
+    return <InputBlock label={"TileJSON URL"} doc={GlSpec.source_tile.url.doc}>
       <StringInput
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -32,7 +33,7 @@ class TileURLSourceEditor extends React.Component {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={GlSpec.source_tile.tiles.doc}>
         <StringInput
           value={tileUrl}
         />
@@ -43,7 +44,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"}>
+      <InputBlock label={"Min Zoom"} doc={GlSpec.source_tile.minzoom.doc}>
         <NumberInput
           value={this.props.source.minZoom}
           onChange={minZoom => this.props.onChange({
@@ -52,7 +53,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"}>
+      <InputBlock label={"Max Zoom"} doc={GlSpec.source_tile.maxzoom.doc}>
         <NumberInput
           value={this.props.source.maxZoom}
           onChange={maxZoom => this.props.onChange({
@@ -73,7 +74,7 @@ class GeoJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"}>
+    return <InputBlock label={"GeoJSON Data"} doc={GlSpec.source_geojson.data.doc}>
       <StringInput
         value={this.props.source.data}
         onChange={data => this.props.onChange({