onChange should not return a promise (more flexible);

Timeout on save to cancel if new value not returned;
saved and error states;
cleaned up machine context;
new props: savedClass, errorClass, saveTimeout, savedDuration, errorDuration

Author: matteofrana

example/index.tsx

@@ -1,12 +1,15 @@
 import 'react-app-polyfill/ie11'
 import * as React from 'react'
+import { useState } from 'react'
 import * as ReactDOM from 'react-dom'
 import InlineEdit, { InputType } from '../.'
 
 const App = () => {
-  const validate = input => input.length > 3
-  const onChange = value => {
-    return fetch(value).then(_ => value)
+  const validate = (input: string) => input.length > 3
+  const onChange = (value: string) => {
+    setTimeout(() => {
+      setValue(value)
+    }, 500)
   }
 
   const options = [
@@ -15,37 +18,47 @@ const App = () => {
     { id: 3, name: 'Albicocca' },
   ]
 
+  const [value, setValue] = useState('pizza')
+
   return (
     <div>
       <style
         dangerouslySetInnerHTML={{
           __html: `
 .styled { display: block; padding: 5px 10px; border-radius: 3px; }
-.styled:hover { background-color: #f0f0f0 }
-    `,
+.styled:hover { background-color: #f0f0f0; }
+.disabled { color: #ccc; }
+.invalid { border: 1px solid #ff0000; }
+.loading { color: #fc0; }
+.saved { color: #4caf50; }
+.error { color: #c00; }
+`,
         }}
       />
 
       <InlineEdit
-        value="pizza"
+        value={value}
         validate={validate}
         onChange={onChange}
         viewClass="styled"
         allowEditWhileLoading
-        optimisticUpdate={false}
       />
       <InlineEdit
         value="disabled"
         validate={validate}
         onChange={onChange}
-        editProps={{ style: { padding: 10 } }}
         isDisabled
       />
       <InlineEdit
-        value="koala"
+        value={value}
         validate={validate}
         onChange={onChange}
-        editProps={{ style: { padding: 10 } }}
+        invalidClass="invalid"
+        loadingClass="loading"
+        savedClass="saved"
+        errorClass="error"
+        errorDuration={1200}
+        savedDuration={1200}
       />
       <InlineEdit
         type={InputType.Number}
@@ -54,6 +67,8 @@ const App = () => {
         onChange={onChange}
         editProps={{ min: 10, max: 20, step: 2 }}
         format={value => '€ ' + value}
+        loadingClass="loading"
+        saveTimeout={1200}
       />
       <InlineEdit
         type={InputType.Date}

src/InlineEdit.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
+import { useEffect, useRef } from 'react'
 import { useMachine } from '@xstate/react'
 import getInlineEditMachine from './machine'
 import Input from './Input'
 import InputType from './inputType'
 
 interface InlineEditProps {
   value: string
-  onChange: (value: string) => Promise<any>
+  onChange: (value: string) => void
   type?: InputType
   validate?: (value: string) => boolean
   isDisabled?: boolean
@@ -17,6 +18,8 @@ interface InlineEditProps {
   disabledClass?: string
   loadingClass?: string
   invalidClass?: string
+  savedClass?: string
+  errorClass?: string
   editProps?: {
     [key: string]: any
   }
@@ -25,6 +28,9 @@ interface InlineEditProps {
   options?: any[]
   valueKey?: string
   labelKey?: string
+  saveTimeout?: number
+  savedDuration?: number
+  errorDuration?: number
 }
 
 const InlineEdit: React.FC<InlineEditProps> = ({
@@ -41,11 +47,16 @@ const InlineEdit: React.FC<InlineEditProps> = ({
   disabledClass,
   loadingClass,
   invalidClass,
+  savedClass,
+  errorClass,
   format,
   showNewLines = true,
   options = [],
   valueKey = 'value',
   labelKey = 'label',
+  saveTimeout = 2000,
+  savedDuration = 700,
+  errorDuration = 1000,
 }) => {
   //==========================
   // XState Machine
@@ -58,9 +69,29 @@ const InlineEdit: React.FC<InlineEditProps> = ({
       optimisticUpdate,
       validate,
       onChange,
+      saveTimeout,
+      savedDuration,
+      errorDuration,
     })
   )
 
+  //==========================
+  // Send SAVED event when a
+  // new value is received
+  // =========================
+  const isFirstRun = useRef(true)
+
+  useEffect(() => {
+    // Prevent triggering SAVED
+    // on first render
+    if (isFirstRun.current) {
+      isFirstRun.current = false
+      return
+    }
+    // Trigger it on value changes
+    send({ type: 'SAVED', value })
+  }, [value])
+
   //==========================
   // Event Handlers
   // =========================
@@ -94,6 +125,12 @@ const InlineEdit: React.FC<InlineEditProps> = ({
   if (loadingClass && current.value === 'loading') {
     viewClassNames.push(loadingClass)
   }
+  if (savedClass && current.value === 'saved') {
+    viewClassNames.push(savedClass)
+  }
+  if (errorClass && current.value === 'error') {
+    viewClassNames.push(errorClass)
+  }
   if (disabledClass && isDisabled) {
     viewClassNames.push(disabledClass)
   }
@@ -151,7 +188,10 @@ const InlineEdit: React.FC<InlineEditProps> = ({
   // =========================
   return (
     <div>
-      {(current.value === 'view' || current.value === 'loading') && (
+      {(current.value === 'view' ||
+        current.value === 'loading' ||
+        current.value === 'saved' ||
+        current.value === 'error') && (
         <span
           {...viewClassProp}
           onClick={() => send('CLICK')}

src/machine.ts

@@ -5,6 +5,8 @@ interface InlineEditState {
     view: {}
     edit: {}
     loading: {}
+    saved: {}
+    error: {}
   }
 }
 
@@ -15,22 +17,25 @@ type InlineEditEvent =
   | { type: 'ESC'; value: string }
   | { type: 'ENTER'; value: string }
   | { type: 'BLUR'; value: string }
+  | { type: 'SAVED'; value: string }
 
 interface InlineEditContext {
   value: string
   newValue: string
-  isDisabled: boolean
-  allowEditWhileLoading: boolean
+  oldValue: string
   isValid: boolean
 }
 
 interface InlineEditMachineProps {
   value: string
+  onChange: (value: string) => void
   isDisabled: boolean
   allowEditWhileLoading: boolean
   optimisticUpdate: boolean
   validate?: (value: string) => boolean
-  onChange: (value: string) => Promise<any>
+  saveTimeout: number
+  savedDuration: number
+  errorDuration: number
 }
 
 const getInlineEditMachine = ({
@@ -40,6 +45,9 @@ const getInlineEditMachine = ({
   optimisticUpdate,
   validate,
   onChange,
+  saveTimeout,
+  savedDuration,
+  errorDuration
 }: InlineEditMachineProps) =>
   Machine<InlineEditContext, InlineEditState, InlineEditEvent>(
     {
@@ -48,8 +56,7 @@ const getInlineEditMachine = ({
       context: {
         value,
         newValue: '',
-        isDisabled,
-        allowEditWhileLoading,
+        oldValue: '',
         isValid:
           validate && typeof validate === 'function' ? validate(value) : true,
       },
@@ -59,6 +66,7 @@ const getInlineEditMachine = ({
           on: {
             CLICK: { target: 'edit', cond: 'isEnabled' },
             FOCUS: { target: 'edit', cond: 'isEnabled' },
+            SAVED: { target: 'saved', actions: 'commitChange' }
           },
         },
         edit: {
@@ -67,27 +75,46 @@ const getInlineEditMachine = ({
             CHANGE: { target: 'edit', actions: 'change' },
             ESC: 'view',
             ENTER: [
-              { target: 'loading', cond: 'shouldCommit' },
+              { target: 'loading', cond: 'shouldSend' },
               { target: 'view' },
             ],
             BLUR: [
-              { target: 'loading', cond: 'shouldCommit' },
+              { target: 'loading', cond: 'shouldSend' },
               { target: 'view' },
             ],
           },
         },
         loading: {
-          invoke: {
-            id: 'commitChange',
-            src: 'commitChange',
-            onDone: { target: 'view', actions: optimisticUpdate ? 'optimisticUpdate' : '' },
-            onError: { target: 'view' },
-          },
+          entry: [optimisticUpdate ? 'optimisticUpdate': 'noAction', 'sendChange'],
           on: {
             CLICK: { target: 'edit', cond: 'canEditWhileLoading' },
             FOCUS: { target: 'edit', cond: 'canEditWhileLoading' },
+            SAVED: { target: 'saved', actions: 'commitChange' }
           },
+          after: {
+            SAVE_TIMEOUT: { target: 'error', actions: 'cancelChange' }
+          }
         },
+        saved: {
+          on: {
+            CLICK: { target: 'edit', cond: 'isEnabled' },
+            FOCUS: { target: 'edit', cond: 'isEnabled' },
+            SAVED: { target: 'saved', actions: 'commitChange' }
+          },
+          after: {
+            SAVED_DURATION: { target: 'view' }
+          }
+        },
+        error: {
+          on: {
+            CLICK: { target: 'edit', cond: 'isEnabled' },
+            FOCUS: { target: 'edit', cond: 'isEnabled' },
+            SAVED: { target: 'saved', actions: 'commitChange' }
+          },
+          after: {
+            ERROR_DURATION: { target: 'view' }
+          }
+        }
       },
     },
     {
@@ -99,8 +126,19 @@ const getInlineEditMachine = ({
           newValue: context => context.value,
         }),
         optimisticUpdate: assign({
+          oldValue: context => context.value,
           value: context => context.newValue,
         }),
+        noAction: () => { },
+        sendChange: (context: InlineEditContext) => {
+          onChange(context.newValue)
+        },
+        commitChange: assign({
+          value: (_, event) => event.value,
+        }),
+        cancelChange: assign({
+          value: context => context.oldValue,
+        }),
         validate:
           validate && typeof validate === 'function'
             ? assign({
@@ -109,17 +147,17 @@ const getInlineEditMachine = ({
             : () => {},
       },
       guards: {
-        shouldCommit: context =>
+        shouldSend: context =>
           context.isValid && context.newValue !== context.value,
-        isEnabled: context => !context.isDisabled,
-        canEditWhileLoading: context =>
-          !context.isDisabled && context.allowEditWhileLoading,
-      },
-      services: {
-        commitChange: context => {
-          return onChange(context.newValue)
-        },
+        isEnabled: () => !isDisabled,
+        canEditWhileLoading: () =>
+          !isDisabled && allowEditWhileLoading,
       },
+      delays: {
+        SAVE_TIMEOUT: saveTimeout,
+        SAVED_DURATION: savedDuration,
+        ERROR_DURATION: errorDuration
+      }
     }
   )