Update dependencies (rjsf-team#722)

* Bump eslint and related packages These aren't the most up-to-date versions of these dependencies as of this writing (babel-eslint released v8.0.1 and jsx-a11y has a 6.0 release), but these are the peer dependencies required by eslint-config-react-app. The new version of eslint appears to have slightly different configuration than the old version. * Fix new eslint-flagged errors * Fix formatting * Update to react-codemirror2 This appears to be better-maintained. See also Kinto/kinto-admin#448.

Author: glasserc

.eslintrc

@@ -4,7 +4,9 @@
  "react/jsx-uses-react": 2,
  "react/jsx-uses-vars": 2,
  "react/react-in-jsx-scope": 2,
- "react/jsx-space-before-closing": [1, "always"],
+ "react/jsx-tag-spacing": [1, {
+ "beforeSelfClosing": "always"
+ }],
  "curly": [2],
  "linebreak-style": [2, "unix"],
  "semi": [2, "always"],
@@ -30,6 +32,7 @@
  "experimentalObjectRestSpread": true
  },
  "plugins": [
+ "jsx-a11y",
  "react"
  ]
 }

package.json

@@ -49,7 +49,7 @@
  "atob": "^2.0.3",
  "babel-cli": "^6.18.0",
  "babel-core": "^6.18.2",
- "babel-eslint": "^6.1.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",
@@ -58,13 +58,15 @@
  "babel-preset-react": "^6.16.0",
  "babel-register": "^6.18.0",
  "chai": "^3.3.0",
- "codemirror": "^5.20.2",
+ "codemirror": "^5.30.0",
  "cross-env": "^2.0.1",
  "css-loader": "^0.23.1",
- "eslint": "^3.15.0",
+ "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-react": "^4.2.3",
+ "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",
@@ -79,7 +81,7 @@
  "prettier": "^1.7.2",
  "react": "^15.5.0",
  "react-addons-test-utils": "^15.3.2",
- "react-codemirror": "^0.2.3",
+ "react-codemirror2": "^2.0.2",
  "react-dom": "^15.3.2",
  "react-transform-catch-errors": "^1.0.0",
  "react-transform-hmr": "^1.0.1",

playground/app.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { render } from "react-dom";
-import Codemirror from "react-codemirror";
+import CodeMirror from "react-codemirror2";
 import "codemirror/mode/javascript/javascript";
 
 import { shouldRender } from "../src/utils";
@@ -18,25 +18,6 @@ import "codemirror/theme/solarized.css";
 import "codemirror/theme/monokai.css";
 import "codemirror/theme/eclipse.css";
 
-// Patching CodeMirror#componentWillReceiveProps so it's executed synchronously
-// Ref https://github.com/mozilla-services/react-jsonschema-form/issues/174
-Codemirror.prototype.componentWillReceiveProps = function(nextProps) {
- if (
- this.codeMirror &&
- nextProps.value !== undefined &&
- this.codeMirror.getValue() != nextProps.value
- ) {
- this.codeMirror.setValue(nextProps.value);
- }
- if (typeof nextProps.options === "object") {
- for (var optionName in nextProps.options) {
- if (nextProps.options.hasOwnProperty(optionName)) {
- this.codeMirror.setOption(optionName, nextProps.options[optionName]);
- }
- }
- }
-};
-
 const log = type => console.log.bind(console, type);
 const fromJson = json => JSON.parse(json);
 const toJson = val => JSON.stringify(val, null, 2);
@@ -208,7 +189,7 @@ class Editor extends Component {
  return shouldRender(this, nextProps, nextState);
  }
 
- onCodeChange = code => {
+ onCodeChange = (editor, metadata, code) => {
  this.setState({ valid: true, code });
  setImmediate(() => {
  try {
@@ -229,7 +210,7 @@ class Editor extends Component {
  <span className={`${cls} glyphicon glyphicon-${icon}`} />
  {" " + title}
  </div>
- <Codemirror
+ <CodeMirror
  value={this.state.code}
  onChange={this.onCodeChange}
  options={Object.assign({}, cmOptions, { theme })}

test/uiSchema_test.js

@@ -354,11 +354,11 @@ describe("uiSchema", () => {
  };
 
  const CustomWidget = props => {
- const { value, options } = props;
+ const { options } = props;
  const { enumOptions, className } = options;
  return (
  <select className={className}>
- {enumOptions.map(({ label, value }, i) => (
+ {enumOptions.map(({ value }, i) => (
  <option key={i}>{value}</option>
  ))}
  </select>
@@ -379,7 +379,8 @@ describe("uiSchema", () => {
  expect(node.querySelectorAll(".custom option")).to.have.length.of(2);
  });
  });
- describe("enum fields disbaled options", () => {
+
+ describe("enum fields disabled options", () => {
  const schema = {
  type: "object",
  properties: {