[form-builder] Change useChangeIndicator from boolean to options object

sanity-io · Oct 6, 2020 · 3bda077 · 3bda077
1 parent cba2133
commit 3bda077
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 96 deletions.
diff --git a/packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx b/packages/@sanity/components/src/fieldsets/DefaultFieldset.tsx
@@ -1,14 +1,16 @@
-/* eslint-disable complexity */
-
-import {Marker, Path} from '@sanity/types'
+import React from 'react'
+import classNames from 'classnames'
+import {FOCUS_TERMINATOR} from '@sanity/util/paths'
+import {isValidationMarker, Marker, Path} from '@sanity/types'
 import {FieldPresence, FormFieldPresence} from '@sanity/base/presence'
+import {
+  ChangeIndicator,
+  ChangeIndicatorContextProvidedProps
+} from '@sanity/base/lib/change-indicators'
 import defaultStyles from 'part:@sanity/components/fieldsets/default-style'
-import React from 'react'
 import ArrowDropDown from 'part:@sanity/base/arrow-drop-down'
-import ValidationStatus from 'part:@sanity/components/validation/status'
-import {FOCUS_TERMINATOR} from '@sanity/util/paths'
 import DefaultLabel from 'part:@sanity/components/labels/default'
-import {ChangeIndicator} from '@sanity/base/lib/change-indicators'
+import ValidationStatus from 'part:@sanity/components/validation/status'
 import FieldStatus from './FieldStatus'
 
 const EMPTY_ARRAY = []
@@ -32,7 +34,7 @@ interface FieldsetProps {
   styles?: Record<string, string>
   markers?: Marker[]
   presence: FormFieldPresence[]
-  useChangeIndicator?: boolean
+  changeIndicator: ChangeIndicatorContextProvidedProps | boolean
 }
 
 interface State {
@@ -57,7 +59,7 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
     styles: undefined,
     tabIndex: undefined,
     transparent: undefined,
-    useChangeIndicator: true,
+    changeIndicator: true,
     presence: EMPTY_ARRAY
   }
 
@@ -109,7 +111,7 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
       className,
       isCollapsible,
       isCollapsed: _ignore,
-      useChangeIndicator,
+      changeIndicator,
       children,
       tabIndex,
       transparent,
@@ -125,19 +127,16 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
       ...this.props.styles
     }
 
-    const validation = markers.filter(marker => marker.type === 'validation')
-    // const errors = validation.filter(marker => marker.level === 'error')
+    const validation = markers.filter(isValidationMarker)
 
-    const rootClassName = [
+    const rootClassName = classNames(
       styles.root,
       styles[`columns${columns}`],
       styles[`level${level}`],
       transparent && styles.transparent,
       this.props.onFocus && styles.canFocus,
       className
-    ]
-      .filter(Boolean)
-      .join(' ')
+    )
 
     // Only show a summary of validation issues if field is collapsible and has been collapsed
     const showSummary = isCollapsible && isCollapsed
@@ -208,8 +207,8 @@ export default class Fieldset extends React.PureComponent<FieldsetProps, State>
 
             {!isCollapsible && (
               <div className={styles.content}>
-                {useChangeIndicator ? (
-                  <ChangeIndicator>
+                {changeIndicator ? (
+                  <ChangeIndicator {...changeIndicator}>
                     <div className={styles.fieldWrapper}>{children}</div>
                   </ChangeIndicator>
                 ) : (

diff --git a/packages/@sanity/components/src/formfields/DefaultFormField.tsx b/packages/@sanity/components/src/formfields/DefaultFormField.tsx
@@ -1,11 +1,14 @@
-import {FieldPresence, FormFieldPresence} from '@sanity/base/presence'
-import {Marker} from '@sanity/types'
-import {ChangeIndicator} from '@sanity/base/lib/change-indicators'
+import React from 'react'
 import classNames from 'classnames'
+import {Marker} from '@sanity/types'
+import {
+  ChangeIndicator,
+  ChangeIndicatorContextProvidedProps
+} from '@sanity/base/lib/change-indicators'
+import {FieldPresence, FormFieldPresence} from '@sanity/base/presence'
 import styles from 'part:@sanity/components/formfields/default-style'
 import DefaultLabel from 'part:@sanity/components/labels/default'
 import ValidationStatus from 'part:@sanity/components/validation/status'
-import React from 'react'
 import FieldStatus from '../fieldsets/FieldStatus'
 
 const EMPTY_MARKERS = []
@@ -21,63 +24,63 @@ interface DefaultFormFieldProps {
   labelFor?: string
   markers?: Marker[]
   presence?: FormFieldPresence[]
-  useChangeIndicator?: boolean
+  changeIndicator?: ChangeIndicatorContextProvidedProps | boolean
 }
 
-export default class DefaultFormField extends React.PureComponent<DefaultFormFieldProps> {
-  render() {
-    const {
-      level = 1,
-      label,
-      labelFor,
-      description,
-      children,
-      inline,
-      wrapped,
-      className: classNameProp,
-      useChangeIndicator = true,
-      markers = EMPTY_MARKERS,
-      presence
-    } = this.props
+export default React.memo(function DefaultFormField({
+  level = 1,
+  label,
+  labelFor,
+  description,
+  children,
+  inline,
+  wrapped,
+  className,
+  changeIndicator = true,
+  markers = EMPTY_MARKERS,
+  presence
+}: DefaultFormFieldProps) {
+  const levelClass = `level_${level}`
 
-    const levelClass = `level_${level}`
+  const rootClassName = classNames(
+    className,
+    inline ? styles.inline : styles.block,
+    styles[levelClass],
+    wrapped && styles.wrapped
+  )
 
-    const className = classNames(
-      classNameProp,
-      inline ? styles.inline : styles.block,
-      styles[levelClass],
-      wrapped && styles.wrapped
-    )
-
-    return (
-      <div className={className}>
-        <label className={styles.inner} htmlFor={labelFor}>
-          {label && (
-            <div className={styles.header}>
-              <div className={styles.headerMain}>
-                <div className={styles.title}>
-                  {label && (
-                    <DefaultLabel className={styles.label} level={level}>
-                      {label}
-                    </DefaultLabel>
-                  )}
-                  <ValidationStatus markers={markers} />
-                </div>
-                {description && <div className={styles.description}>{description}</div>}
+  return (
+    <div className={rootClassName}>
+      <label className={styles.inner} htmlFor={labelFor}>
+        {label && (
+          <div className={styles.header}>
+            <div className={styles.headerMain}>
+              <div className={styles.title}>
+                {label && (
+                  <DefaultLabel className={styles.label} level={level}>
+                    {label}
+                  </DefaultLabel>
+                )}
+                <ValidationStatus markers={markers} />
               </div>
-              {presence && (
-                <FieldStatus>
-                  <FieldPresence maxAvatars={4} presence={presence} />
-                </FieldStatus>
-              )}
+              {description && <div className={styles.description}>{description}</div>}
             </div>
-          )}
-        </label>
+            {presence && (
+              <FieldStatus>
+                <FieldPresence maxAvatars={4} presence={presence} />
+              </FieldStatus>
+            )}
+          </div>
+        )}
+      </label>
 
-        <div className={styles.content}>
-          {useChangeIndicator ? <ChangeIndicator>{children}</ChangeIndicator> : children}
-        </div>
+      <div className={styles.content}>
+        {changeIndicator ? (
+          <ChangeIndicator {...changeIndicator}>{children}</ChangeIndicator>
+        ) : (
+          children
+        )}
       </div>
-    )
-  }
-}
+    </div>
+  )
+})
diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/ArrayInput.tsx b/packages/@sanity/form-builder/src/inputs/ArrayInput/ArrayInput.tsx
@@ -357,7 +357,7 @@ export default class ArrayInput extends React.Component<Props, ArrayInputState>
           onFocus={this.handleFocus}
           ref={this.setElement}
           markers={markers}
-          useChangeIndicator={false}
+          changeIndicator={false}
         >
           <div className={styles.missingKeysWarning}>
             Some items in this list are missing their keys. We need to fix this before the list can
@@ -396,7 +396,7 @@ export default class ArrayInput extends React.Component<Props, ArrayInputState>
         type={type}
         ref={this.setElement}
         presence={presence.filter(item => item.path[0] === '$')}
-        useChangeIndicator={false}
+        changeIndicator={false}
         {...uploadProps}
       >
         <div>

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputListItem.tsx b/packages/@sanity/form-builder/src/inputs/ArrayInput/item/ArrayInputListItem.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable complexity */
-
 import {ChangeIndicatorScope} from '@sanity/base/lib/change-indicators'
 import {ContextProvidedChangeIndicator} from '@sanity/base/lib/change-indicators/ChangeIndicator'
 import {ArraySchemaType, isValidationMarker, Marker, Path, SchemaType} from '@sanity/types'
@@ -231,17 +229,13 @@ export class ArrayInputListItem extends React.PureComponent<ArrayInputListItemPr
     const options = type.options || {}
     const isSortable = !readOnly && !type.readOnly && options.sortable !== false
     const validation = markers.filter(isValidationMarker)
-    const scopedValidation = validation
-      .map(marker => {
-        if (marker.path.length <= 1) {
-          return marker
-        }
-        const level = marker.level === 'error' ? 'errors' : 'warnings'
-        return Object.assign({}, marker, {
-          item: marker.item.cloneWithMessage(`Contains ${level}`)
-        })
-      })
-      .filter(Boolean)
+    const scopedValidation = validation.map(marker => {
+      if (marker.path.length <= 1) {
+        return marker
+      }
+      const level = marker.level === 'error' ? 'errors' : 'warnings'
+      return {...marker, item: marker.item.cloneWithMessage(`Contains ${level}`)}
+    })
 
     const hasItemFocus = PathUtils.isExpanded(pathSegmentFrom(value), focusPath)
     const memberType = this.getMemberType()

diff --git a/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx b/packages/@sanity/form-builder/src/inputs/ArrayOfPrimitivesInput/ArrayOfPrimitivesInput.tsx
@@ -246,7 +246,7 @@ export default class ArrayOfPrimitivesInput extends React.PureComponent<Props> {
         ref={this.setElement}
         markers={markers}
         presence={presence.filter(item => item.path[0] === '$' || item.path.length === 0)}
-        useChangeIndicator={false}
+        changeIndicator={false}
       >
         <div className={styles.root}>
           {value && value.length > 0 && <div className={styles.list}>{this.renderList(value)}</div>}

diff --git a/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.tsx b/packages/@sanity/form-builder/src/inputs/FileInput/FileInput.tsx
@@ -355,7 +355,7 @@ export default class FileInput extends React.PureComponent<Props, FileInputState
         getUploadOptions={this.getUploadOptions}
         ref={this.setFocusArea}
         presence={presence.filter(item => item.path[0] === '$' || isInside.includes(item.identity))}
-        useChangeIndicator={false}
+        changeIndicator={false}
       >
         {uploadError && (
           <Snackbar

diff --git a/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.tsx b/packages/@sanity/form-builder/src/inputs/ImageInput/ImageInput.tsx
@@ -592,7 +592,7 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         ref={this.setFocusArea}
-        useChangeIndicator={false}
+        changeIndicator={false}
         {...uploadProps}
       >
         <div

diff --git a/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.tsx b/packages/@sanity/form-builder/src/inputs/ObjectInput/ObjectInput.tsx
@@ -154,7 +154,7 @@ export default class ObjectInput extends React.PureComponent<ObjectInputProps> {
           isCollapsed={isCollapsed}
           presence={isCollapsed ? childPresence : []}
           onFocus={onFocus}
-          useChangeIndicator={false}
+          changeIndicator={false}
         >
           {fieldset.fields.map((field, fieldIndex) => {
             return this.renderField(field, level + 2, fieldsetIndex + fieldIndex)
@@ -244,7 +244,7 @@ export default class ObjectInput extends React.PureComponent<ObjectInputProps> {
           markers={markers}
           presence={presence.filter(item => item.path[0] === '$' || item.path.length === 0)}
           onFocus={onFocus}
-          useChangeIndicator={false}
+          changeIndicator={false}
         >
           {renderedFields}
           {renderedUnknownFields}

diff --git a/packages/@sanity/form-builder/src/inputs/OptionsArrayInput/OptionsArrayInput.tsx b/packages/@sanity/form-builder/src/inputs/OptionsArrayInput/OptionsArrayInput.tsx
@@ -10,6 +10,8 @@ import Item from './Item'
 import styles from './styles/OptionsArrayInput.css'
 import {resolveValueWithLegacyOptionsSupport, isLegacyOptionsItem} from './legacyOptionsSupport'
 
+const changeIndicatorOptions = {compareDeep: true}
+
 function isEqual(item, otherItem) {
   if (isLegacyOptionsItem(item) || isLegacyOptionsItem(otherItem)) {
     return item.value === otherItem.value
@@ -39,6 +41,7 @@ function isEqual(item, otherItem) {
   }
   return keys.every(keyName => isEqual(item[keyName], otherItem[keyName]))
 }
+
 function inArray(array, candidate) {
   return array ? array.some(item => isEqual(item, candidate)) : false
 }
@@ -71,6 +74,7 @@ export default class OptionsArrayInput extends React.PureComponent<OptionsArrayI
       .map(resolveValueWithLegacyOptionsSupport)
     this.props.onChange(PatchEvent.from(nextValue.length > 0 ? set(nextValue) : unset()))
   }
+
   getMemberTypeOfItem(option) {
     const {type} = this.props
     return type.of.find(
@@ -111,7 +115,7 @@ export default class OptionsArrayInput extends React.PureComponent<OptionsArrayI
         presence={presence}
         level={level}
         onClick={this.handleFocus}
-        useChangeIndicator={false}
+        changeIndicator={changeIndicatorOptions}
       >
         <div>
           <div

diff --git a/packages/@sanity/google-maps-input/src/input/GeopointInput.tsx b/packages/@sanity/google-maps-input/src/input/GeopointInput.tsx
@@ -164,7 +164,7 @@ class GeopointInput extends React.PureComponent<InputProps, InputState> {
         presence={presence}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
-        useChangeIndicator={false}
+        changeIndicator={false}
       >
         <div>
           {value && (