Add some rules to keep JS and JSX well formatted (rjsf-team#361)

Author: Fabien Rassinier

.eslintrc

@@ -4,6 +4,8 @@
  "react/jsx-uses-react": 2,
  "react/jsx-uses-vars": 2,
  "react/react-in-jsx-scope": 2,
+ "react/jsx-space-before-closing": [1, "never"],
+ "react/jsx-closing-bracket-location": [1, "after-props"],
 
  "curly": [2],
  "indent": [2, 2, {"SwitchCase": 1}],
@@ -12,7 +14,8 @@
  "semi": [2, "always"],
  "comma-dangle": [0],
  "no-unused-vars": [2, {"vars": "all", "args": "none"}],
- "no-console": [0]
+ "no-console": [0],
+ "object-curly-spacing": [1, "never"]
  },
  "env": {
  "es6": true,

src/components/Form.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from "react";
+import React, {Component, PropTypes} from "react";
 
 import SchemaField from "./fields/SchemaField";
 import TitleField from "./fields/TitleField";
@@ -72,7 +72,7 @@ export default class Form extends Component {
  const {showErrorList} = this.props;
 
  if (status !== "editing" && errors.length && showErrorList != false) {
- return <ErrorList errors={errors} />;
+ return <ErrorList errors={errors}/>;
  }
  return null;
  }
@@ -175,7 +175,7 @@ export default class Form extends Component {
  formData={formData}
  onChange={this.onChange}
  registry={registry}
- safeRenderCompletion={safeRenderCompletion} />
+ safeRenderCompletion={safeRenderCompletion}/>
  { children ? children :
  <p>
  <button type="submit" className="btn btn-info">Submit</button>

src/components/fields/ArrayField.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from "react";
+import React, {Component, PropTypes} from "react";
 
 import {
  getAlternativeWidget,
@@ -20,19 +20,19 @@ import FileWidget from "./../widgets/FileWidget";
 function ArrayFieldTitle({TitleField, idSchema, title, required}) {
  if (!title) {
  // See #312: Ensure compatibility with old versions of React.
- return <div />;
+ return <div/>;
  }
  const id = `${idSchema.$id}__title`;
- return <TitleField id={id} title={title} required={required} />;
+ return <TitleField id={id} title={title} required={required}/>;
 }
 
 function ArrayFieldDescription({DescriptionField, idSchema, description}) {
  if (!description) {
  // See #312: Ensure compatibility with old versions of React.
- return <div />;
+ return <div/>;
  }
  const id = `${idSchema.$id}__description`;
- return <DescriptionField id={id} description={description} />;
+ return <DescriptionField id={id} description={description}/>;
 }
 
 class ArrayField extends Component {
@@ -179,12 +179,12 @@ class ArrayField extends Component {
  TitleField={TitleField}
  idSchema={idSchema}
  title={title}
- required={required} />
+ required={required}/>
  {schema.description ?
  <ArrayFieldDescription
  DescriptionField={DescriptionField}
  idSchema={idSchema}
- description={schema.description} /> : null}
+ description={schema.description}/> : null}
  <div className="row array-item-list">{
  items.map((item, index) => {
  const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
@@ -204,7 +204,7 @@ class ArrayField extends Component {
  })
  }</div>
  <AddButton
- onClick={this.onAddClick} disabled={disabled || readonly} />
+ onClick={this.onAddClick} disabled={disabled || readonly}/>
  </fieldset>
  );
  }
@@ -229,8 +229,7 @@ class ArrayField extends Component {
  value={items}
  disabled={disabled}
  readonly={readonly}
- autofocus={autofocus}
- />
+ autofocus={autofocus}/>
  );
  }
 
@@ -248,8 +247,7 @@ class ArrayField extends Component {
  value={items}
  disabled={disabled}
  readonly={readonly}
- autofocus={autofocus}
- />
+ autofocus={autofocus}/>
  );
  }
 
@@ -286,7 +284,7 @@ class ArrayField extends Component {
  TitleField={TitleField}
  idSchema={idSchema}
  title={title}
- required={required} />
+ required={required}/>
  {schema.description ?
  <div className="field-description">{schema.description}</div> : null}
  <div className="row array-item-list">{
@@ -319,7 +317,7 @@ class ArrayField extends Component {
  {
  additionalSchema ? <AddButton
  onClick={this.onAddClick}
- disabled={disabled || readonly} /> : null
+ disabled={disabled || readonly}/> : null
  }
  </fieldset>
  );
@@ -363,7 +361,7 @@ class ArrayField extends Component {
  registry={this.props.registry}
  disabled={this.props.disabled}
  readonly={this.props.readonly}
- autofocus={autofocus} />
+ autofocus={autofocus}/>
  </div>
  {
  hasToolbar ?

src/components/fields/BooleanField.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from "react";
+import React, {PropTypes} from "react";
 
 import {
  defaultFieldValue,
@@ -56,9 +56,9 @@ function BooleanField(props) {
  };
  if (widget) {
  const Widget = getAlternativeWidget(schema, widget, widgets);
- return <Widget options={buildOptions(schema, uiSchema["ui:widget"])} {...commonProps} />;
+ return <Widget options={buildOptions(schema, uiSchema["ui:widget"])} {...commonProps}/>;
  }
- return <CheckboxWidget {...commonProps} />;
+ return <CheckboxWidget {...commonProps}/>;
 }
 
 if (process.env.NODE_ENV !== "production") {

src/components/fields/DescriptionField.js

@@ -4,7 +4,7 @@ function DescriptionField(props) {
  const {id, description} = props;
  if (!description) {
  // See #312: Ensure compatibility with old versions of React.
- return <div />;
+ return <div/>;
  }
  if (typeof description === "string") {
  return <p id={id} className="field-description">{description}</p>;

src/components/fields/NumberField.js

@@ -1,12 +1,12 @@
-import React, { PropTypes } from "react";
+import React, {PropTypes} from "react";
 
-import { asNumber } from "../../utils";
+import {asNumber} from "../../utils";
 import StringField from "./StringField";
 
 function NumberField(props) {
  return (
  <StringField {...props}
- onChange={(value) => props.onChange(asNumber(value))} />
+ onChange={(value) => props.onChange(asNumber(value))}/>
  );
 }
 

src/components/fields/ObjectField.js

@@ -1,6 +1,6 @@
-import React, { Component, PropTypes } from "react";
+import React, {Component, PropTypes} from "react";
 
-import { deepEquals } from "../../utils";
+import {deepEquals} from "../../utils";
 
 
 import {
@@ -123,7 +123,7 @@ class ObjectField extends Component {
  <DescriptionField
  id={`${idSchema.$id}__description`}
  description={schema.description}
- formContext={formContext} /> : null}
+ formContext={formContext}/> : null}
  {
  orderedProperties.map((name, index) => {
  return (
@@ -138,7 +138,7 @@ class ObjectField extends Component {
  onChange={this.onPropertyChange(name)}
  registry={this.props.registry}
  disabled={disabled}
- readonly={readonly} />
+ readonly={readonly}/>
  );
  })
  }</fieldset>

src/components/fields/SchemaField.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from "react";
+import React, {PropTypes} from "react";
 
 import {
  isMultiSelect,
@@ -38,7 +38,7 @@ function Label(props) {
  const {label, required, id} = props;
  if (!label) {
  // See #312: Ensure compatibility with old versions of React.
- return <div />;
+ return <div/>;
  }
  return (
  <label className="control-label" htmlFor={id}>
@@ -51,7 +51,7 @@ function Help(props) {
  const {help} = props;
  if (!help) {
  // See #312: Ensure compatibility with old versions of React.
- return <div />;
+ return <div/>;
  }
  if (typeof help === "string") {
  return <p className="help-block">{help}</p>;
@@ -62,7 +62,7 @@ function Help(props) {
 function ErrorList(props) {
  const {errors = []} = props;
  if (errors.length === 0) {
- return <div />;
+ return <div/>;
  }
  return (
  <div>
@@ -95,7 +95,7 @@ function DefaultTemplate(props) {
 
  return (
  <div className={classNames}>
- {displayLabel ? <Label label={label} required={required} id={id} /> : null}
+ {displayLabel ? <Label label={label} required={required} id={id}/> : null}
  {displayLabel && description ? description : null}
  {children}
  {errors}
@@ -144,7 +144,7 @@ function SchemaField(props) {
 
  if (Object.keys(schema).length === 0) {
  // See #312: Ensure compatibility with old versions of React.
- return <div />;
+ return <div/>;
  }
 
  let displayLabel = true;
@@ -167,7 +167,7 @@ function SchemaField(props) {
  disabled={disabled}
  readonly={readonly}
  autofocus={autofocus}
- formContext={formContext} />
+ formContext={formContext}/>
  );
 
  const {type} = schema;
@@ -188,11 +188,11 @@ function SchemaField(props) {
  const fieldProps = {
  description: <DescriptionField id={id + "__description"}
  description={description}
- formContext={formContext} />,
+ formContext={formContext}/>,
  rawDescription: description,
- help: <Help help={help} />,
+ help: <Help help={help}/>,
  rawHelp: typeof help === "string" ? help : undefined,
- errors: <ErrorList errors={errors} />,
+ errors: <ErrorList errors={errors}/>,
  rawErrors: errors,
  id,
  label,

src/components/fields/StringField.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from "react";
+import React, {PropTypes} from "react";
 
 import {
  defaultFieldValue,
@@ -44,15 +44,15 @@ function StringField(props) {
  const enumOptions = optionsList(schema);
  if (widget) {
  const Widget = getAlternativeWidget(schema, widget, widgets, {enumOptions});
- return <Widget {...commonProps} />;
+ return <Widget {...commonProps}/>;
  }
- return <SelectWidget options={{enumOptions}} {...commonProps} />;
+ return <SelectWidget options={{enumOptions}} {...commonProps}/>;
  }
  if (widget) {
  const Widget = getAlternativeWidget(schema, widget, widgets);
- return <Widget {...commonProps} placeholder={placeholder} />;
+ return <Widget {...commonProps} placeholder={placeholder}/>;
  }
- return <TextWidget {...commonProps} placeholder={placeholder} />;
+ return <TextWidget {...commonProps} placeholder={placeholder}/>;
 }
 
 if (process.env.NODE_ENV !== "production") {

src/components/widgets/AltDateTimeWidget.js

@@ -1,10 +1,10 @@
-import React, { PropTypes } from "react";
+import React, {PropTypes} from "react";
 
 import AltDateWidget from "./AltDateWidget";
 
 
 function AltDateTimeWidget(props) {
- return <AltDateWidget time {...props} />;
+ return <AltDateWidget time {...props}/>;
 }
 
 if (process.env.NODE_ENV !== "production") {