Bump version 1.0.3

README.md

@@ -674,13 +674,16 @@ render((
 
 ### Help texts
 
-Sometimes it's convenient to add some text next to a field to guide the end user filling it; this is the purpose of the `ui:help` uiSchema directive:
+Sometimes it's convenient to add some text next to a field to guide the end user filling it; this is the purpose of the `ui:help` uiSchema directive. By default the help is under the field but you can put it in a tooltip next to the label: 
 
 ```js
 const schema = {type: "string"};
 const uiSchema = {
   "ui:widget": "password",
-  "ui:help": "Hint: Make it strong!"
+  "ui:help": "Hint: Make it strong!",
+  "ui:options": {
+    tooltip: true
+  }
 };
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jsonschema-form",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
@@ -43,7 +43,9 @@
     "ajv": "^5.2.3",
     "lodash.topath": "^4.5.2",
     "prop-types": "^15.5.8",
-    "setimmediate": "^1.0.5"
+    "react-tooltip": "^3.4.0",
+    "setimmediate": "^1.0.5",
+    "shortid": "^2.2.8"
   },
   "devDependencies": {
     "atob": "^2.0.3",

playground/samples/simple.js

@@ -45,10 +45,14 @@ module.exports = {
     },
     bio: {
       "ui:widget": "textarea",
+      "ui:help": "Hint: Make it strong!",
     },
     password: {
       "ui:widget": "password",
-      "ui:help": "Hint: Make it strong!",
+      "ui:help": "Hint: Make it strong in tooltip!",
+      "ui:options": {
+        tooltip: true,
+      },
     },
     date: {
       "ui:widget": "alt-datetime",

src/components/fields/SchemaField.js

@@ -1,5 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
+import ReactTooltip from "react-tooltip";
+import shortid from "shortid";
 
 import {
   isMultiSelect,
@@ -46,29 +48,48 @@ function getFieldComponent(schema, uiSchema, idSchema, fields) {
 }
 
 function Label(props) {
-  const { label, required, id } = props;
+  const { label, required, id, help, helpTooltip } = props;
   if (!label) {
     // See #312: Ensure compatibility with old versions of React.
     return <div />;
   }
+  let tooltipHelp = helpTooltip ? help : null;
   return (
     <label className="control-label" htmlFor={id}>
       {label}
       {required && <span className="required">{REQUIRED_FIELD_SYMBOL}</span>}
+      {tooltipHelp}
     </label>
   );
 }
 
 function Help(props) {
-  const { help } = props;
+  const { help, isTooltip } = props;
   if (!help) {
     // See #312: Ensure compatibility with old versions of React.
     return <div />;
   }
-  if (typeof help === "string") {
-    return <p className="help-block">{help}</p>;
+  if (isTooltip) {
+    const tooltipId = shortid.generate();
+    return (
+      <span>
+        <i
+          data-tip
+          data-for={tooltipId}
+          className="help-tooltip glyphicon glyphicon-info-sign"
+          style={{ "padding-left": "3px" }}
+        />
+        <ReactTooltip id={tooltipId} place="top" type="light" effect="solid">
+          {help}
+        </ReactTooltip>
+      </span>
+    );
+  } else {
+    if (typeof help === "string") {
+      return <p className="help-block">{help}</p>;
+    }
+    return <div className="help-block">{help}</div>;
   }
-  return <div className="help-block">{help}</div>;
 }
 
 function ErrorList(props) {
@@ -100,6 +121,7 @@ function DefaultTemplate(props) {
     children,
     errors,
     help,
+    helpTooltip,
     description,
     hidden,
     required,
@@ -108,14 +130,22 @@ function DefaultTemplate(props) {
   if (hidden) {
     return children;
   }
-
+  let defaultHelp = helpTooltip ? null : help;
   return (
     <div className={classNames}>
-      {displayLabel && <Label label={label} required={required} id={id} />}
+      {displayLabel && (
+        <Label
+          label={label}
+          required={required}
+          id={id}
+          help={help}
+          helpTooltip={helpTooltip}
+        />
+      )}
       {displayLabel && description ? description : null}
       {children}
       {errors}
-      {help}
+      {defaultHelp}
     </div>
   );
 }
@@ -136,6 +166,7 @@ if (process.env.NODE_ENV !== "production") {
     required: PropTypes.bool,
     readonly: PropTypes.bool,
     displayLabel: PropTypes.bool,
+    helpTooltip: PropTypes.bool,
     fields: PropTypes.object,
     formContext: PropTypes.object,
   };
@@ -146,6 +177,7 @@ DefaultTemplate.defaultProps = {
   readonly: false,
   required: false,
   displayLabel: true,
+  helpTooltip: false,
 };
 
 function SchemaFieldRender(props) {
@@ -177,7 +209,7 @@ function SchemaFieldRender(props) {
   }
 
   const uiOptions = getUiOptions(uiSchema);
-  let { label: displayLabel = true } = uiOptions;
+  let { label: displayLabel = true, tooltip: helpTooltip = false } = uiOptions;
   if (schema.type === "array") {
     displayLabel =
       isMultiSelect(schema, definitions) ||
@@ -240,7 +272,7 @@ function SchemaFieldRender(props) {
       />
     ),
     rawDescription: description,
-    help: <Help help={help} />,
+    help: <Help help={help} isTooltip={helpTooltip} />,
     rawHelp: typeof help === "string" ? help : undefined,
     errors: <ErrorList errors={errors} />,
     rawErrors: errors,
@@ -251,6 +283,7 @@ function SchemaFieldRender(props) {
     disabled,
     readonly,
     displayLabel,
+    helpTooltip,
     classNames,
     formContext,
     fields,

yarn-error.log

@@ -0,0 +1,147 @@
+Arguments: 
+  /usr/local/bin/node /usr/local/Cellar/yarn/1.5.1/libexec/bin/yarn.js i
+
+PATH: 
+  /Users/marina/.avn/bin:/Users/marina/.rbenv/shims:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+
+Yarn version: 
+  1.5.1
+
+Node version: 
+  8.9.4
+
+Platform: 
+  darwin x64
+
+npm manifest: 
+  {
+    "name": "react-jsonschema-form",
+    "version": "1.0.2",
+    "description": "A simple React component capable of building HTML forms out of a JSON schema.",
+    "scripts": {
+      "build:readme": "toctoc README.md -w",
+      "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
+      "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
+      "build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
+      "cs-check": "prettier -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'",
+      "cs-format": "prettier $npm_package_prettierOptions '{playground,src,test}/**/*.js' --write",
+      "dist": "npm run build:lib && npm run build:dist",
+      "lint": "eslint src test playground",
+      "precommit": "lint-staged",
+      "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
+      "publish-to-npm": "npm run build:readme && npm run dist && npm publish",
+      "start": "node devServer.js",
+      "tdd": "cross-env NODE_ENV=test mocha --compilers js:babel-register --watch --require ./test/setup-jsdom.js test/**/*_test.js",
+      "test": "cross-env NODE_ENV=test mocha --compilers js:babel-register --require ./test/setup-jsdom.js test/**/*_test.js"
+    },
+    "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi",
+    "lint-staged": {
+      "{playground,src,test}/**/*.js": [
+        "npm run lint",
+        "npm run cs-format",
+        "git add"
+      ]
+    },
+    "main": "lib/index.js",
+    "files": [
+      "dist",
+      "lib"
+    ],
+    "engineStrict": false,
+    "engines": {
+      "npm": "^2.14.7",
+      "node": ">=6"
+    },
+    "peerDependencies": {
+      "react": ">=15"
+    },
+    "dependencies": {
+      "ajv": "^5.2.3",
+      "lodash.topath": "^4.5.2",
+      "prop-types": "^15.5.8",
+      "setimmediate": "^1.0.5"
+    },
+    "devDependencies": {
+      "atob": "^2.0.3",
+      "babel-cli": "^6.18.0",
+      "babel-core": "^6.18.2",
+      "babel-eslint": "^7.2.3",
+      "babel-loader": "^6.2.7",
+      "babel-plugin-react-transform": "^2.0.2",
+      "babel-plugin-transform-class-properties": "^6.18.0",
+      "babel-plugin-transform-object-rest-spread": "^6.16.0",
+      "babel-preset-es2015": "^6.18.0",
+      "babel-preset-react": "^6.16.0",
+      "babel-register": "^6.18.0",
+      "chai": "^3.3.0",
+      "codemirror": "^5.30.0",
+      "cross-env": "^2.0.1",
+      "css-loader": "^0.23.1",
+      "eslint": "^4.9.0",
+      "eslint-config-react-app": "^2.0.1",
+      "eslint-plugin-flowtype": "^2.39.1",
+      "eslint-plugin-import": "^2.7.0",
+      "eslint-plugin-jsx-a11y": "^5.1.1",
+      "eslint-plugin-react": "^7.4.0",
+      "estraverse": "^4.2.0",
+      "estraverse-fb": "^1.3.1",
+      "express": "^4.14.0",
+      "extract-text-webpack-plugin": "^1.0.1",
+      "gh-pages": "^0.11.0",
+      "html": "0.0.10",
+      "husky": "^0.13.2",
+      "jsdom": "^8.3.0",
+      "json-loader": "^0.5.7",
+      "lint-staged": "^3.3.1",
+      "mocha": "^2.5.3",
+      "prettier": "^1.8.2",
+      "react": "^15.5.0",
+      "react-addons-test-utils": "^15.3.2",
+      "react-codemirror2": "^4.1.0",
+      "react-dom": "^15.3.2",
+      "react-transform-catch-errors": "^1.0.0",
+      "react-transform-hmr": "^1.0.1",
+      "redbox-react": "^1.3.3",
+      "rimraf": "^2.5.4",
+      "sinon": "^1.17.6",
+      "style-loader": "^0.13.1",
+      "toctoc": "^0.2.3",
+      "webpack": "^1.13.3",
+      "webpack-dev-middleware": "^1.8.4",
+      "webpack-hot-middleware": "^2.13.2"
+    },
+    "directories": {
+      "test": "test"
+    },
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/mozilla-services/react-jsonschema-form.git"
+    },
+    "author": "Nicolas Perriault <nperriault@mozilla.com>",
+    "keywords": [
+      "react",
+      "form",
+      "json-schema"
+    ],
+    "license": "Apache-2.0",
+    "homepage": "https://github.com/mozilla-services/react-jsonschema-form#readme"
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile
+
+Trace: 
+  Error: Command "i" not found.
+      at new MessageError (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:186:110)
+      at /usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:87307:17
+      at Generator.next (<anonymous>)
+      at step (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:98:30)
+      at /usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:116:14
+      at new Promise (<anonymous>)
+      at new F (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:23451:28)
+      at /usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:95:12
+      at runCommand (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:87312:22)
+      at Object.<anonymous> (/usr/local/Cellar/yarn/1.5.1/libexec/lib/cli.js:87412:14)