[form-builder] Fix lint errors (#248)

* [form-builder] Fix lint errors * [form-builder] Fix lint errors
sanity-io · Oct 12, 2017 · b4bf026 · b4bf026
1 parent 0dd2a28
commit b4bf026
Show file tree

Hide file tree

Showing 49 changed files with 183 additions and 505 deletions.
diff --git a/packages/@sanity/form-builder/src/FormBuilderInput.js b/packages/@sanity/form-builder/src/FormBuilderInput.js
@@ -18,7 +18,6 @@ export class FormBuilderInput extends React.Component {
   };
 
   static defaultProps = {
-    onChange() {},
     validation: {messages: [], fields: {}},
     isRoot: false
   }

diff --git a/packages/@sanity/form-builder/src/inputs/Array/InvalidItem.js b/packages/@sanity/form-builder/src/inputs/Array/InvalidItem.js
@@ -9,7 +9,7 @@ type Type = {
   of: Array<Type>
 }
 
-export default class Item extends React.PureComponent {
+export default class Item extends React.PureComponent<*> {
   props: {
     // note: type here is the *array* type
     type: Type,

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/ArrayOfPrimitives.js b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/ArrayOfPrimitives.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 // @flow
-/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react'
 import {get} from 'lodash'
 import {List as DefaultList, Item as DefaultItem} from 'part:@sanity/components/lists/default'
@@ -37,7 +36,7 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent {
     onChange: PropTypes.func
   }
 
-  set (nextValue: any[]) {
+  set(nextValue: any[]) {
     const patch = nextValue.length === 0 ? unset() : set(nextValue)
     this.props.onChange(PatchEvent.from(patch))
   }
@@ -117,12 +116,16 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent {
     const sortable = get(type, 'options.sortable') !== false
 
     return sortable
-      ? <SortableList onSort={this.handleSort} useDragHandle>
-        {value.map(this.renderItem)}
-      </SortableList>
-      : <DefaultList decoration="divider">
-        {value.map(this.renderItem)}
-      </DefaultList>
+      ? (
+        <SortableList onSort={this.handleSort} useDragHandle>
+          {value.map(this.renderItem)}
+        </SortableList>
+      )
+      : (
+        <DefaultList decoration="divider">
+          {value.map(this.renderItem)}
+        </DefaultList>
+      )
 
   }
 

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/Item.js b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/Item.js
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+// @flow
 import React from 'react'
 import {FormBuilderInput} from '../../FormBuilderInput'
 import styles from './styles/Item.css'
@@ -10,17 +10,21 @@ import getEmptyValue from './getEmptyValue'
 
 import {createDragHandle} from 'part:@sanity/components/lists/sortable'
 import DragBarsIcon from 'part:@sanity/base/bars-icon'
+import type {Type} from '../../typedefs'
 
 const DragHandle = createDragHandle(() => <span className={styles.dragHandle}><DragBarsIcon /></span>)
 
-export default class Item extends React.PureComponent {
-  static propTypes = {
-    type: PropTypes.object.isRequired,
-    onChange: PropTypes.func,
-    index: PropTypes.number
-  }
+type Props = {
+  type: Type,
+  onChange: PatchEvent => void,
+  index: number,
+  value: string | number | boolean,
+  sortable: boolean,
+  level: number
+}
+export default class Item extends React.PureComponent<Props> {
 
-  handleRemove = event => {
+  handleRemove = () => {
     const {index, onChange} = this.props
     onChange(PatchEvent.from(unset([index])))
   }
@@ -35,32 +39,16 @@ export default class Item extends React.PureComponent {
     ))).prefixAll(index))
   }
 
-  handleClick = () => {
-    this.setState({edit: true})
-  }
-
-  handleBlur = () => {
-    this.setState({edit: false})
-  }
-
-  handleKeyPress = event => {
-    if (event.key === 'Enter' || event.keyCode === 27) {
-      this.setState({edit: false})
-    }
-  }
-
   render() {
     const {value, level, type, sortable} = this.props
     return (
       <div className={styles.root}>
-        {sortable && <DragHandle className={styles.dragHandle}/>}
-        <div onClick={this.handleClick} className={styles.input}>
+        {sortable && <DragHandle className={styles.dragHandle} />}
+        <div className={styles.input}>
           <FormBuilderInput
             value={value}
             type={type}
             onChange={this.handleChange}
-            onKeyPress={this.handleKeyPress}
-            onBlur={this.handleBlur}
             level={level}
           />
         </div>

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/getEmptyValue.js b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitives/getEmptyValue.js
@@ -10,6 +10,7 @@ export default function getEmptyValue(type) {
     case 'boolean': {
       return false
     }
+    default:
+      return undefined
   }
-  return undefined
 }
diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderBlock.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderBlock.js
@@ -28,23 +28,13 @@ export default class FormBuilderBlock extends React.Component {
 
   state = {
     isSelected: false,
-    isFocused: false,
     isEditing: false,
     isDragging: false
   }
 
   _dropTarget = null
   _editorNode = null
 
-  componentWillUpdate(nextProps) {
-    const {node} = this.props
-    const selection = nextProps.state.selection
-    if (selection !== this.props.state.selection) {
-      const isFocused = selection.hasFocusIn(node)
-      this.setState({isFocused})
-    }
-  }
-
   componentDidMount() {
     this.addSelectionHandler()
   }
@@ -60,7 +50,6 @@ export default class FormBuilderBlock extends React.Component {
       .setNodeByKey(node.key, {
         data: {value: applyAll(node.data.get('value'), event.patches)}
       })
-
     editor.onChange(change)
   }
 
@@ -293,10 +282,11 @@ export default class FormBuilderBlock extends React.Component {
 
   render() {
     const {isEditing} = this.state
-    const {attributes} = this.props
+    const {attributes, node, editor} = this.props
+    const isFocused = editor.props.blockEditor.props.value.selection.hasFocusIn(node)
 
     let className
-    if (this.state.isFocused && !this.state.isSelected) {
+    if (isFocused && !this.state.isSelected) {
       className = styles.focused
     } else if (this.state.isSelected) {
       className = styles.selected

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderInline.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderInline.js
@@ -28,23 +28,13 @@ export default class FormBuilderInline extends React.Component {
 
   state = {
     isSelected: false,
-    isFocused: false,
     isEditing: false,
     isDragging: false
   }
 
   _dropTarget = null
   _editorNode = null
 
-  componentWillUpdate(nextProps) {
-    const {node} = this.props
-    const selection = nextProps.state.selection
-    if (selection !== this.props.state.selection) {
-      const isFocused = selection.hasFocusIn(node)
-      this.setState({isFocused})
-    }
-  }
-
   componentDidMount() {
     this.addSelectionHandler()
   }
@@ -315,9 +305,11 @@ export default class FormBuilderInline extends React.Component {
   render() {
     const {isEditing} = this.state
     const {attributes} = this.props
+    const {node, editor} = this.props
+    const isFocused = editor.props.blockEditor.props.value.selection.hasFocusIn(node)
 
     let className
-    if (this.state.isFocused && !this.state.isSelected) {
+    if (isFocused && !this.state.isSelected) {
       className = styles.focused
     } else if (this.state.isSelected) {
       className = styles.selected

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderSpan.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderSpan.js
@@ -27,7 +27,7 @@ export default class FormBuilderSpan extends React.Component {
     node: PropTypes.object
   }
 
-  state = {isFocused: false, isEditing: false, focusedAnnotationName: undefined}
+  state = {isEditing: false, focusedAnnotationName: undefined}
 
   _clickCounter = 0
   _isMarkingText = false
@@ -56,16 +56,6 @@ export default class FormBuilderSpan extends React.Component {
   }
 
   componentWillUpdate(nextProps, nextState) {
-    const {node} = this.props
-    const {state} = nextProps
-    const selection = state.selection
-    const isFocused = selection.hasFocusIn(node)
-
-    if (selection !== this.props.state.selection) {
-      if (!isFocused) {
-        this.setState({isEditing: false, ...{isFocused}})
-      }
-    }
     // If annotations where emptied, just destroy this span (unwrap it to text actually)
     if (!nextProps.node.data.get('annotations')) {
       this.destroy()

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/SlateValueContainer.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/SlateValueContainer.js
diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/accessors.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/accessors.js
@@ -199,18 +199,18 @@ export class SpansAccessor {
     // Now groups contain only consecutive spans with identical marks, we may replace them with merged
     // versions of the same content. As each of these mutations change the length of the array, we must do them in
     // reverse order from back to front so that our indicies stay valid as we mutate
-    groups.reverse().forEach(group => {
+    groups.reverse().forEach(grp => {
       const value = {
         _type: 'textspan',
-        content: group.spans.map(span => span.content).join('')
+        content: grp.spans.map(span => span.content).join('')
       }
-      if (group.marks.length > 0) {
-        value.marks = group.marks
+      if (grp.marks.length > 0) {
+        value.marks = grp.marks
       }
       patches.push({
         type: 'insert',
         position: 'replace',
-        path: [`[${group.firstIndex}:${group.lastIndex}]`],
+        path: [`[${grp.firstIndex}:${grp.lastIndex}]`],
         value: [value]
       })
     })

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/createBlockEditorOperations.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/createBlockEditorOperations.js
@@ -25,8 +25,6 @@ export default function createBlockEditorOperations(blockEditor) {
       } else {
         change = this.expandToFocusedWord(state.change())
         if (!change) {
-          // No word to expand to
-          console.warn('No text in vincinity to bind span to')
           return null
         }
       }

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/docUtils.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/docUtils.js
@@ -66,7 +66,7 @@ export function spanAccessorsToSlateNodes(spans) {
       const firstIndex = i
       // consume until we get something else
       let next = i
-      while (next < spans.length && (spans[next] instanceof TextSpanAccessor)) {
+      while (next < spans.length && (spans[next] instanceof TextSpanAccessor)) { // eslint-disable-line max-depth
         next++
       }
       joined = joined.push(consecutiveSanitySpansToSlateText(span.key, spans.slice(i, next), firstIndex))