Merge pull request #709 from helpscout/feature/editable-fields-validate

Allow for richer validation

src/components/EditableField/EditableField.tsx

@@ -224,7 +224,8 @@ export class EditableField extends React.Component<
     )
   }
 
-  handleInputBlur = ({ name, event }) => {
+  handleInputBlur = payload => {
+    const { name, event } = payload
     const {
       activeField,
       fieldValue,
@@ -246,6 +247,28 @@ export class EditableField extends React.Component<
       fieldValue.length === 1
         ? fieldValue[0]
         : find(fieldValue, val => val.id === event.target.id)
+    const initialField =
+      initialFieldValue.length === 1
+        ? initialFieldValue[0]
+        : find(initialFieldValue, val => val.id === event.target.id)
+
+    /* istanbul ignore next */
+    if (equal(initialField, changedField)) {
+      this.setState({ activeField: EMPTY_VALUE }, () => {
+        onInputBlur({ name, value: fieldValue, event })
+      })
+
+      return
+    }
+
+    /* istanbul ignore next */
+    if (this.state.disabledItem === changedField.id) {
+      this.setState({ activeField: EMPTY_VALUE }, () => {
+        onInputBlur({ name, value: fieldValue, event })
+      })
+
+      return
+    }
 
     if (!changedField.value) {
       if (!multipleValuesEnabled) {
@@ -269,11 +292,36 @@ export class EditableField extends React.Component<
     if (changedField.value && !changedField.validated) {
       this.setState({ disabledItem: changedField.id })
 
+      // Get the next values and commit prior to validation so that
+      // we can use it in validation.
+      let updatedFieldValue = this.state.fieldValue.map(field => {
+        // tested
+        /* istanbul ignore next */
+        if (field.id === changedField.id) {
+          return { ...changedField, validated: true }
+        }
+        // tested
+        /* istanbul ignore next */
+        return field
+      })
+
       validate({
-        value: changedField.value,
+        data: {
+          cause: 'BLUR',
+          operation:
+            /* istanbul ignore next */ updatedFieldValue.length >
+            initialFieldValue.length
+              ? OPERATION.CREATE
+              : OPERATION.UPDATE,
+          item: changedField,
+        },
         name: changedField.id,
+        value: changedField.value,
+        values: updatedFieldValue,
       }).then(validation => {
-        const updatedFieldValue = this.state.fieldValue.map(field => {
+        // Since this is async and the state of other fields may have changed,
+        // we need to recompute this.
+        updatedFieldValue = this.state.fieldValue.map(field => {
           // tested
           /* istanbul ignore next */
           if (field.id === changedField.id) {
@@ -434,13 +482,15 @@ export class EditableField extends React.Component<
     const isEnter = event.key === key.ENTER
     const isEscape = event.key === key.ESCAPE
 
+    const { fieldValue: value } = this.state
+    this.props.onInputKeyDown({ name, value, event })
+
     if (isEnter) {
       return this.handleFieldEnterPress({ event, name })
     } else if (isEscape) {
       return this.handleFieldEscapePress({ event, name })
     }
-    const { fieldValue: value } = this.state
-    this.props.onInputKeyDown({ name, value, event })
+
     return new Promise((resolve, reject) => {
       reject()
     })
@@ -489,15 +539,35 @@ export class EditableField extends React.Component<
         // Case 3: value was changed
         const impactedField = find(fieldValue, val => val.id === name)
 
+        // Get the next values and commit prior to validation so that
+        // we can use it in validation.
+        let updatedFieldValue = this.updateFieldValue({
+          name,
+          value: inputValue,
+        })
+
         // Skip if the field was marked as validated
         /* istanbul ignore else */
         if (!impactedField.validated) {
           this.setState({ disabledItem: name })
 
-          validate({ value: inputValue, name }).then(validation => {
-            let updatedFieldValue
-
+          validate({
+            data: {
+              cause: 'ENTER',
+              operation:
+                /* istanbul ignore next */ updatedFieldValue.length >
+                initialFieldValue.length
+                  ? OPERATION.CREATE
+                  : OPERATION.UPDATE,
+              item: updatedFieldValue.filter(field => field.id === name)[0],
+            },
+            name,
+            value: inputValue,
+            values: updatedFieldValue,
+          }).then(validation => {
             if (validation.isValid) {
+              // Since this is async and the state of other fields may have changed,
+              // we need to recompute this.
               updatedFieldValue = this.updateFieldValue({
                 name,
                 value: inputValue,

src/components/EditableField/EditableField.types.ts

@@ -116,7 +116,12 @@ export interface EditableFieldProps {
   }) => void
   onDelete: (args: { name: string; value: FieldValue[]; event: Event }) => void
   onDiscard: (args: { value: FieldValue[] }) => void
-  validate: (args: { value: string; name: string }) => Promise<Validation>
+  validate: (args: {
+    data: CommitData
+    name: string
+    value: string
+    values: FieldValue[]
+  }) => Promise<Validation>
 }
 
 export interface EditableFieldState {

src/components/PortalWrapper/PortalWrapper.tsx

@@ -20,6 +20,7 @@ import matchPath from '../../utilities/react-router/matchPath'
 import Content from './PortalWrapper.Content'
 
 interface PortalWrapperProps extends PortalProps {
+  closeOnEscape: boolean
   isOpen: boolean
   trigger: any
   isOpenProps: boolean
@@ -55,6 +56,7 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => {
     PortalWrapperState
   > {
     static defaultProps = {
+      closeOnEscape: true,
       isOpen: false,
     }
     static contextTypes = {
@@ -90,8 +92,8 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => {
         props.timeout !== undefined
           ? props.timeout
           : composedWrapperTimeout !== undefined
-            ? composedWrapperTimeout
-            : extendedOptions.timeout
+          ? composedWrapperTimeout
+          : extendedOptions.timeout
 
       this.state = {
         isOpen: props.isOpen,
@@ -336,10 +338,17 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => {
       )
     }
 
+    renderEventListener() {
+      const { closeOnEscape } = this.props
+      return closeOnEscape ? (
+        <KeypressListener keyCode={Keys.ESCAPE} handler={this.handleOnEsc} />
+      ) : null
+    }
+
     render() {
       return (
         <div className="c-PortalWrapper">
-          <KeypressListener keyCode={Keys.ESCAPE} handler={this.handleOnEsc} />
+          {this.renderEventListener()}
           {this.renderTrigger()}
           {this.renderPortal()}
         </div>

src/components/PortalWrapper/__tests__/PortalWrapper.test.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
+import KeypressListener from '../../KeypressListener'
 import PortalWrapper from '../PortalWrapper'
 import Keys from '../../../constants/Keys'
 import { classNames } from '../../../utilities/classNames'
@@ -352,6 +353,24 @@ describe('Esc keypress', () => {
       window.removeEventListener('keyup', globalSpy)
     }, 20)
   })
+
+  test('Prevents adding KeypressListener when closeOnEscape is false', () => {
+    const TestComponent = PortalWrapper(options)(TestButton)
+    const trigger = <div className="trigger">Trigger</div>
+    const wrapper = mount(
+      <TestComponent timeout={0} closeOnEscape={false} trigger={trigger} />
+    )
+    expect(wrapper.find(KeypressListener)).toHaveLength(0)
+  })
+
+  test('Adds KeypressListener when closeOnEscape is true', () => {
+    const TestComponent = PortalWrapper(options)(TestButton)
+    const trigger = <div className="trigger">Trigger</div>
+    const wrapper = mount(
+      <TestComponent timeout={0} closeOnEscape trigger={trigger} />
+    )
+    expect(wrapper.find(KeypressListener)).toHaveLength(1)
+  })
 })
 
 describe('displayName', () => {

src/utilities/pkg.ts

@@ -1,3 +1,3 @@
 export default {
-  version: '2.63.0',
+  version: '2.63.1-9',
 }

stories/EditableField.stories.js

@@ -397,7 +397,8 @@ stories.add('Key Events', () => (
   </ContainerUI>
 ))
 
-function validateFieldValue({ name, value }) {
+function validateFieldValue(payload) {
+  const { name, value } = payload
   let isValid = value !== 'off' && value !== 'other' && value !== 'warn'
 
   return new Promise(resolve => {

stories/Modal.stories.js

@@ -147,6 +147,17 @@ stories.add('default', () => (
   </Modal>
 ))
 
+stories.add('no close on escape', () => (
+  <Modal closeOnEscape={false} trigger={<Link>Open dis modal</Link>}>
+    <Modal.Body>
+      <Heading>Title</Heading>
+      {ContentSpec.generate(8).map(({ id, content }) => (
+        <p key={id}>{content}</p>
+      ))}
+    </Modal.Body>
+  </Modal>
+))
+
 stories.add('open', () => (
   <Modal isOpen trigger={<Link>Clicky</Link>}>
     <Modal.Content>