Playground

├── example ├── .npmignore ├── index.html ├── tsconfig.json ├── package.json └── index.tsx ├── .gitignore ├── src ├── index.ts ├── inputType.ts ├── Input.tsx ├── machine.ts └── InlineEdit.tsx ├── test └── blah.test.tsx ├── tsconfig.json ├── .github └── workflows │ └── main.yml ├── LICENSE ├── package.json └── README.md /example/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | dist -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import InlineEdit from './InlineEdit' 2 | import InputType from './inputType' 3 | 4 | export { InputType } 5 | export default InlineEdit 6 | -------------------------------------------------------------------------------- /src/inputType.ts: -------------------------------------------------------------------------------- 1 | enum InputType { 2 | Text = 'text', 3 | Number = 'number', 4 | Email = 'email', 5 | Password = 'password', 6 | Date = 'date', 7 | Range = 'range', 8 | TextArea = 'textarea', 9 | Select = 'select', 10 | } 11 | 12 | export default InputType 13 | -------------------------------------------------------------------------------- /test/blah.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import * as ReactDOM from 'react-dom' 3 | import InlineEdit from '../src' 4 | 5 | describe('it', () => { 6 | it('renders without crashing', () => { 7 | const div = document.createElement('div') 8 | ReactDOM.render( fetch('')} />, div) 9 | ReactDOM.unmountComponentAtNode(div) 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Playground 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": false, 4 | "target": "es5", 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "moduleResolution": "node", 8 | "noImplicitAny": false, 9 | "noUnusedLocals": false, 10 | "noUnusedParameters": false, 11 | "removeComments": true, 12 | "strictNullChecks": true, 13 | "preserveConstEnums": true, 14 | "sourceMap": true, 15 | "lib": ["es2015", "es2016", "dom"], 16 | "baseUrl": ".", 17 | "types": ["node"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "parcel index.html", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": { 11 | "react-app-polyfill": "^1.0.6" 12 | }, 13 | "alias": { 14 | "react": "../node_modules/react", 15 | "react-dom": "../node_modules/react-dom/profiling", 16 | "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^16.9.49", 20 | "@types/react-dom": "^16.9.8", 21 | "parcel": "^1.12.4", 22 | "typescript": "^4.0.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noImplicitAny": true, 12 | "strictNullChecks": true, 13 | "strictFunctionTypes": true, 14 | "strictPropertyInitialization": true, 15 | "noImplicitThis": true, 16 | "alwaysStrict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noImplicitReturns": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "moduleResolution": "node", 22 | "baseUrl": "./", 23 | "paths": { 24 | "*": ["src/*", "node_modules/*"] 25 | }, 26 | "jsx": "react", 27 | "esModuleInterop": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [push] 3 | jobs: 4 | build: 5 | runs-on: ubuntu-latest 6 | 7 | steps: 8 | - name: Begin CI... 9 | uses: actions/checkout@v2 10 | 11 | - name: Use Node 12 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: 12.x 15 | 16 | - name: Use cached node_modules 17 | uses: actions/cache@v1 18 | with: 19 | path: node_modules 20 | key: nodeModules-${{ hashFiles('**/yarn.lock') }} 21 | restore-keys: | 22 | nodeModules- 23 | 24 | - name: Install dependencies 25 | run: yarn install --frozen-lockfile 26 | env: 27 | CI: true 28 | 29 | - name: Lint 30 | run: yarn lint 31 | env: 32 | CI: true 33 | 34 | - name: Test 35 | run: yarn test --ci --coverage --maxWorkers=2 36 | env: 37 | CI: true 38 | 39 | - name: Build 40 | run: yarn build 41 | env: 42 | CI: true 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 F2 .net engineering s.r.l. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "riec", 3 | "version": "0.1.9", 4 | "author": "Matteo Frana ", 5 | "description": "Modern React component for inline edit of text/select values, written in Typescript", 6 | "keywords": [ 7 | "react inline edit", 8 | "react edit", 9 | "react", 10 | "inline", 11 | "edit", 12 | "riek" 13 | ], 14 | "license": "MIT", 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/ReactBricks/react-inline-edit-async.git" 18 | }, 19 | "main": "dist/index.js", 20 | "typings": "dist/index.d.ts", 21 | "files": [ 22 | "dist", 23 | "src" 24 | ], 25 | "engines": { 26 | "node": ">=10" 27 | }, 28 | "scripts": { 29 | "start": "tsdx watch", 30 | "build": "tsdx build", 31 | "test": "tsdx test --passWithNoTests", 32 | "lint": "tsdx lint", 33 | "prepare": "tsdx build" 34 | }, 35 | "peerDependencies": { 36 | "react": ">=16" 37 | }, 38 | "husky": { 39 | "hooks": { 40 | "pre-commit": "tsdx lint" 41 | } 42 | }, 43 | "prettier": { 44 | "printWidth": 80, 45 | "semi": false, 46 | "singleQuote": true, 47 | "trailingComma": "es5" 48 | }, 49 | "module": "dist/react-inline-edit-async.esm.js", 50 | "devDependencies": { 51 | "@types/jest": "^26.0.13", 52 | "@types/react": "^16.9.49", 53 | "@types/react-dom": "^16.9.8", 54 | "husky": "^4.2.5", 55 | "react": "^16.13.1", 56 | "react-dom": "^16.13.1", 57 | "tsdx": "^0.13.3", 58 | "tslib": "^2.0.1", 59 | "typescript": "^4.0.2" 60 | }, 61 | "dependencies": { 62 | "@xstate/react": "^0.8.1", 63 | "xstate": "^4.13.0" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/Input.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useCallback } from 'react' 2 | import { useRef } from 'react' 3 | import InputType from './inputType' 4 | 5 | interface InputProps { 6 | value: any 7 | type: InputType 8 | editProps?: { 9 | [key: string]: any 10 | } 11 | editClassProp: { className: string } | {} 12 | options: any[] 13 | valueKey: string 14 | labelKey: string 15 | handleChange: (value: any) => void 16 | handleKeyDown: React.KeyboardEventHandler 17 | handleBlur: React.FocusEventHandler 18 | } 19 | 20 | const Input: React.FC = ({ 21 | value, 22 | type, 23 | editProps, 24 | editClassProp, 25 | options, 26 | valueKey, 27 | labelKey, 28 | handleChange, 29 | handleKeyDown, 30 | handleBlur, 31 | }) => { 32 | //========================== 33 | // Focus input as it mounts 34 | // ========================= 35 | const inputRef = useRef(null) 36 | const textareaRef = useRef(null) 37 | const selectRef = useRef(null) 38 | 39 | const getRef = useCallback(() => { 40 | if (type === InputType.Select) { 41 | return selectRef 42 | } 43 | if (type === InputType.TextArea) { 44 | return textareaRef 45 | } 46 | return inputRef 47 | }, [type]) 48 | 49 | useEffect(() => { 50 | const controlRef = getRef() 51 | 52 | if (controlRef.current) { 53 | setTimeout(function() { 54 | if (controlRef.current) { 55 | // Focus input 56 | controlRef.current.focus() 57 | if (controlRef === inputRef || controlRef === textareaRef) { 58 | // If it is not a Select => select input content 59 | controlRef.current.select() 60 | } 61 | } 62 | }, 10) 63 | } 64 | }, [getRef]) 65 | 66 | //========================== 67 | // Select 68 | // ========================= 69 | if (type === InputType.Select) { 70 | return ( 71 | 86 | ) 87 | } 88 | 89 | //========================== 90 | // TextArea 91 | // ========================= 92 | if (type === InputType.TextArea) { 93 | return ( 94 |

handleChange(event.target.value)}
100 |         onKeyDown={handleKeyDown}
101 |         onBlur={handleBlur}
102 |       />
103 |     )
104 |   }
105 | 
106 |   //==========================
107 |   // All Others
108 |   // =========================
109 |   return (
110 |     <input
111 |       {...editProps}
112 |       {...editClassProp}
113 |       ref={inputRef}
114 |       type={type}
115 |       value={value}
116 |       onChange={event => handleChange(event.target.value)}
117 |       onKeyDown={handleKeyDown}
118 |       onBlur={handleBlur}
119 |     />
120 |   )
121 | }
122 | 
123 | export default Input
124 |

--------------------------------------------------------------------------------
/example/index.tsx:
--------------------------------------------------------------------------------
  1 | import 'react-app-polyfill/ie11'
  2 | import * as React from 'react'
  3 | import { useState } from 'react'
  4 | import * as ReactDOM from 'react-dom'
  5 | import InlineEdit, { InputType } from '../.'
  6 | 
  7 | const App = () => {
  8 |   const validate = (input: string) => input.length > 3
  9 |   const onChange = (value: string) => {
 10 |     setTimeout(() => {
 11 |       setValue(value)
 12 |     }, 500)
 13 |   }
 14 | 
 15 |   const options = [
 16 |     { id: 1, name: 'Mela' },
 17 |     { id: 2, name: 'Arancia' },
 18 |     { id: 3, name: 'Albicocca' },
 19 |   ]
 20 | 
 21 |   const [value, setValue] = useState('pizza')
 22 | 
 23 |   return (
 24 |     <div>
 25 |       <style
 26 |         dangerouslySetInnerHTML={{
 27 |           __html: `
 28 | .styled { display: block; padding: 5px 10px; border-radius: 3px; }
 29 | .styled:hover { background-color: #f0f0f0; }
 30 | .disabled { color: #ccc; }
 31 | .invalid { border: 1px solid #ff0000; }
 32 | .loading { color: #fc0; }
 33 | .saved { color: #4caf50; }
 34 | .error { color: #c00; }
 35 | `,
 36 |         }}
 37 |       />
 38 | 
 39 |       <div>
 40 |         <InlineEdit
 41 |           value={value}
 42 |           validate={validate}
 43 |           onChange={onChange}
 44 |           viewClass="styled"
 45 |           allowEditWhileLoading
 46 |           optimisticUpdate={true}
 47 |         />
 48 |       </div>
 49 | 
 50 |       <div>
 51 |         <InlineEdit
 52 |           value="disabled"
 53 |           validate={validate}
 54 |           onChange={onChange}
 55 |           isDisabled
 56 |         />
 57 |       </div>
 58 | 
 59 |       <div>
 60 |         <InlineEdit
 61 |           value={value}
 62 |           validate={validate}
 63 |           onChange={onChange}
 64 |           invalidClass="invalid"
 65 |           loadingClass="loading"
 66 |           savedClass="saved"
 67 |           errorClass="error"
 68 |           errorDuration={1200}
 69 |           savedDuration={1200}
 70 |           render={v => <code>{v}<sup>2</sup></code>}
 71 |         />
 72 |       </div>
 73 | 
 74 |       <div>
 75 |         <InlineEdit
 76 |           type={InputType.Number}
 77 |           value="34"
 78 |           validate={i => parseInt(i, 10) > 0}
 79 |           onChange={onChange}
 80 |           editProps={{ min: 10, max: 20, step: 2 }}
 81 |           format={value => '€ ' + value}
 82 |           loadingClass="loading"
 83 |           saveTimeout={1200}
 84 |         />
 85 |       </div>
 86 | 
 87 |       <div>
 88 |         <InlineEdit
 89 |           type={InputType.Date}
 90 |           value="2020-03-12"
 91 |           onChange={onChange}
 92 |         />
 93 |       </div>
 94 | 
 95 |       <div>
 96 |         <InlineEdit
 97 |           type={InputType.Range}
 98 |           value="6"
 99 |           validate={i => parseInt(i, 10) > 3}
100 |           onChange={onChange}
101 |           editProps={{ min: 0, max: 10, step: 1 }}
102 |         />
103 |       </div>
104 | 
105 |       <div>
106 |         <InlineEdit
107 |           type={InputType.TextArea}
108 |           value="pizza patatine"
109 |           onChange={onChange}
110 |           editProps={{ rows: 4 }}
111 |           format={v => v.toUpperCase()}
112 |         />
113 |       </div>
114 | 
115 |       <div>
116 |         <InlineEdit
117 |           type={InputType.Select}
118 |           value="2"
119 |           onChange={onChange}
120 |           options={options}
121 |           valueKey="id"
122 |           labelKey="name"
123 |         />
124 |       </div>
125 |     </div>
126 |   )
127 | }
128 | 
129 | ReactDOM.render(<App />, document.getElementById('root'))
130 |

--------------------------------------------------------------------------------
/src/machine.ts:
--------------------------------------------------------------------------------
  1 | import { Machine, assign } from 'xstate'
  2 | 
  3 | interface InlineEditState {
  4 |   states: {
  5 |     view: {}
  6 |     edit: {}
  7 |     loading: {}
  8 |     saved: {}
  9 |     error: {}
 10 |   }
 11 | }
 12 | 
 13 | type InlineEditEvent =
 14 |   | { type: 'CLICK'; value: string }
 15 |   | { type: 'FOCUS'; value: string }
 16 |   | { type: 'CHANGE'; value: string }
 17 |   | { type: 'ESC'; value: string }
 18 |   | { type: 'ENTER'; value: string }
 19 |   | { type: 'BLUR'; value: string }
 20 |   | { type: 'SAVED'; value: string }
 21 | 
 22 | interface InlineEditContext {
 23 |   value: string
 24 |   newValue: string
 25 |   oldValue: string
 26 |   isValid: boolean
 27 | }
 28 | 
 29 | interface InlineEditMachineProps {
 30 |   value: string
 31 |   onChange: (value: string) => void
 32 |   isDisabled: boolean
 33 |   allowEditWhileLoading: boolean
 34 |   optimisticUpdate: boolean
 35 |   validate?: (value: string) => boolean
 36 |   saveTimeout: number
 37 |   savedDuration: number
 38 |   errorDuration: number
 39 | }
 40 | 
 41 | const getInlineEditMachine = ({
 42 |   value,
 43 |   isDisabled,
 44 |   allowEditWhileLoading,
 45 |   optimisticUpdate,
 46 |   validate,
 47 |   onChange,
 48 |   saveTimeout,
 49 |   savedDuration,
 50 |   errorDuration,
 51 | }: InlineEditMachineProps) =>
 52 |   Machine<InlineEditContext, InlineEditState, InlineEditEvent>(
 53 |     {
 54 |       id: 'inlineEdit',
 55 |       initial: 'view',
 56 |       context: {
 57 |         value,
 58 |         newValue: '',
 59 |         oldValue: '',
 60 |         isValid:
 61 |           validate && typeof validate === 'function' ? validate(value) : true,
 62 |       },
 63 |       states: {
 64 |         view: {
 65 |           entry: 'reset',
 66 |           on: {
 67 |             CLICK: { target: 'edit', cond: 'isEnabled' },
 68 |             FOCUS: { target: 'edit', cond: 'isEnabled' },
 69 |             SAVED: { target: 'saved', actions: 'commitChange' },
 70 |           },
 71 |         },
 72 |         edit: {
 73 |           entry: 'validate',
 74 |           on: {
 75 |             CHANGE: { target: 'edit', actions: 'change' },
 76 |             ESC: 'view',
 77 |             ENTER: [
 78 |               { target: 'loading', cond: 'shouldSend' },
 79 |               { target: 'view' },
 80 |             ],
 81 |             BLUR: [
 82 |               { target: 'loading', cond: 'shouldSend' },
 83 |               { target: 'view' },
 84 |             ],
 85 |           },
 86 |         },
 87 |         loading: {
 88 |           entry: [
 89 |             optimisticUpdate ? 'optimisticUpdate' : 'noAction',
 90 |             'sendChange',
 91 |           ],
 92 |           on: {
 93 |             CLICK: { target: 'edit', cond: 'canEditWhileLoading' },
 94 |             FOCUS: { target: 'edit', cond: 'canEditWhileLoading' },
 95 |             SAVED: { target: 'saved', actions: 'commitChange' },
 96 |           },
 97 |           after: {
 98 |             SAVE_TIMEOUT: {
 99 |               target: 'error',
100 |               actions: optimisticUpdate ? 'cancelChange' : 'noAction',
101 |             },
102 |           },
103 |         },
104 |         saved: {
105 |           on: {
106 |             CLICK: { target: 'edit', cond: 'isEnabled' },
107 |             FOCUS: { target: 'edit', cond: 'isEnabled' },
108 |             SAVED: { target: 'saved', actions: 'commitChange' },
109 |           },
110 |           after: {
111 |             SAVED_DURATION: { target: 'view' },
112 |           },
113 |         },
114 |         error: {
115 |           on: {
116 |             CLICK: { target: 'edit', cond: 'isEnabled' },
117 |             FOCUS: { target: 'edit', cond: 'isEnabled' },
118 |             SAVED: { target: 'saved', actions: 'commitChange' },
119 |           },
120 |           after: {
121 |             ERROR_DURATION: { target: 'view' },
122 |           },
123 |         },
124 |       },
125 |     },
126 |     {
127 |       actions: {
128 |         change: assign({
129 |           newValue: (_, event) => event.value,
130 |         }),
131 |         reset: assign({
132 |           newValue: context => context.value,
133 |         }),
134 |         optimisticUpdate: assign({
135 |           oldValue: context => context.value,
136 |           value: context => context.newValue,
137 |         }),
138 |         noAction: () => {},
139 |         sendChange: (context: InlineEditContext) => {
140 |           onChange(context.newValue)
141 |         },
142 |         commitChange: assign({
143 |           value: (_, event) => event.value,
144 |         }),
145 |         cancelChange: assign({
146 |           value: context => context.oldValue,
147 |         }),
148 |         validate:
149 |           validate && typeof validate === 'function'
150 |             ? assign({
151 |                 isValid: context => validate(context.newValue),
152 |               })
153 |             : () => {},
154 |       },
155 |       guards: {
156 |         shouldSend: context =>
157 |           context.isValid && context.newValue !== context.value,
158 |         isEnabled: () => !isDisabled,
159 |         canEditWhileLoading: () => !isDisabled && allowEditWhileLoading,
160 |       },
161 |       delays: {
162 |         SAVE_TIMEOUT: saveTimeout,
163 |         SAVED_DURATION: savedDuration,
164 |         ERROR_DURATION: errorDuration,
165 |       },
166 |     }
167 |   )
168 | 
169 | export default getInlineEditMachine
170 |

--------------------------------------------------------------------------------
/src/InlineEdit.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import { useEffect, useRef } from 'react'
  3 | import { useMachine } from '@xstate/react'
  4 | import getInlineEditMachine from './machine'
  5 | import Input from './Input'
  6 | import InputType from './inputType'
  7 | 
  8 | interface InlineEditProps {
  9 |   value: string
 10 |   onChange: (value: string) => void
 11 |   type?: InputType
 12 |   format?: (value: string) => string
 13 |   render?: (value: string) => React.ReactElement
 14 |   validate?: (value: string) => boolean
 15 |   isDisabled?: boolean
 16 |   allowEditWhileLoading?: boolean
 17 |   optimisticUpdate?: boolean
 18 |   saveTimeout?: number
 19 |   savedDuration?: number
 20 |   errorDuration?: number
 21 |   editProps?: {
 22 |     [key: string]: any
 23 |   }
 24 |   viewClass?: string
 25 |   editClass?: string
 26 |   disabledClass?: string
 27 |   loadingClass?: string
 28 |   invalidClass?: string
 29 |   savedClass?: string
 30 |   errorClass?: string
 31 |   showNewLines?: boolean
 32 |   options?: any[]
 33 |   valueKey?: string
 34 |   labelKey?: string
 35 | }
 36 | 
 37 | const InlineEdit: React.FC<InlineEditProps> = ({
 38 |   value,
 39 |   onChange,
 40 |   type = InputType.Text,
 41 |   format,
 42 |   render,
 43 |   validate,
 44 |   isDisabled = false,
 45 |   allowEditWhileLoading = false,
 46 |   optimisticUpdate = true,
 47 |   saveTimeout = 2000,
 48 |   savedDuration = 700,
 49 |   errorDuration = 1000,
 50 |   editProps,
 51 |   viewClass,
 52 |   editClass,
 53 |   disabledClass,
 54 |   loadingClass,
 55 |   invalidClass,
 56 |   savedClass,
 57 |   errorClass,
 58 |   showNewLines = true,
 59 |   options = [],
 60 |   valueKey = 'value',
 61 |   labelKey = 'label',
 62 | }) => {
 63 |   //==========================
 64 |   // XState Machine
 65 |   // =========================
 66 |   const [current, send] = useMachine(
 67 |     getInlineEditMachine({
 68 |       value,
 69 |       isDisabled,
 70 |       allowEditWhileLoading,
 71 |       optimisticUpdate,
 72 |       validate,
 73 |       onChange,
 74 |       saveTimeout,
 75 |       savedDuration,
 76 |       errorDuration,
 77 |     })
 78 |   )
 79 | 
 80 |   //==========================
 81 |   // Send SAVED event when a
 82 |   // new value is received
 83 |   // =========================
 84 |   const isFirstRun = useRef(true)
 85 | 
 86 |   useEffect(() => {
 87 |     // Prevent triggering SAVED
 88 |     // on first render
 89 |     if (isFirstRun.current) {
 90 |       isFirstRun.current = false
 91 |       return
 92 |     }
 93 |     // Trigger it on value changes
 94 |     send({ type: 'SAVED', value })
 95 |   }, [value])
 96 | 
 97 |   //==========================
 98 |   // Event Handlers
 99 |   // =========================
100 | 
101 |   const handleChange = (value: any) => {
102 |     send({ type: 'CHANGE', value: value })
103 |     if (type === InputType.Select) {
104 |       send('ENTER')
105 |     }
106 |   }
107 | 
108 |   const handleBlur = () => {
109 |     send('BLUR')
110 |   }
111 | 
112 |   const handleKeyDown = (event: React.KeyboardEvent) => {
113 |     if (event.keyCode === 13 && type !== InputType.TextArea) {
114 |       send('ENTER')
115 |     } else if (event.keyCode === 27) {
116 |       send('ESC')
117 |     }
118 |   }
119 | 
120 |   //==========================
121 |   // CSS Classes View
122 |   // =========================
123 |   let viewClassNames = []
124 |   if (viewClass) {
125 |     viewClassNames.push(viewClass)
126 |   }
127 |   if (loadingClass && current.value === 'loading') {
128 |     viewClassNames.push(loadingClass)
129 |   }
130 |   if (savedClass && current.value === 'saved') {
131 |     viewClassNames.push(savedClass)
132 |   }
133 |   if (errorClass && current.value === 'error') {
134 |     viewClassNames.push(errorClass)
135 |   }
136 |   if (disabledClass && isDisabled) {
137 |     viewClassNames.push(disabledClass)
138 |   }
139 |   const viewClassProp =
140 |     viewClassNames.length > 0 ? { className: viewClassNames.join(' ') } : {}
141 | 
142 |   //==========================
143 |   // CSS Classes Edit
144 |   // =========================
145 |   let editClassNames = []
146 |   if (editClass) {
147 |     editClassNames.push(editClass)
148 |   }
149 |   if (invalidClass && !current.context.isValid) {
150 |     editClassNames.push(invalidClass)
151 |   }
152 |   const editClassProp =
153 |     editClassNames.length > 0 ? { className: editClassNames.join(' ') } : {}
154 | 
155 |   //==========================
156 |   // Format View Value
157 |   // =========================
158 |   let viewValue: any = current.context.value
159 | 
160 |   // If Select => get label
161 |   if (type === InputType.Select) {
162 |     const valueOption = options.find(
163 |       (option: any) => option[valueKey] + '' === current.context.value
164 |     )
165 | 
166 |     if (valueOption) {
167 |       viewValue = valueOption[labelKey]
168 |     }
169 |   }
170 | 
171 |   // If format function, apply
172 |   if (format) {
173 |     viewValue = format(viewValue)
174 |   }
175 | 
176 |   // If TextArea and showNewLine, do it
177 |   if (type === InputType.TextArea && showNewLines) {
178 |     viewValue = viewValue.split('\n').map((item: string, key: number) => {
179 |       return (
180 |         <span key={key}>
181 |           {item}
182 |           <br />
183 |         </span>
184 |       )
185 |     })
186 |   }
187 | 
188 |   //==========================
189 |   // Render
190 |   // =========================
191 |   return (
192 |     <>
193 |       {(current.value === 'view' ||
194 |         current.value === 'loading' ||
195 |         current.value === 'saved' ||
196 |         current.value === 'error') && (
197 |         <span
198 |           {...viewClassProp}
199 |           onClick={() => send('CLICK')}
200 |           onFocus={() => send('FOCUS')}
201 |           tabIndex={0}
202 |         >
203 |           {render ? render(viewValue) : viewValue}
204 |         </span>
205 |       )}
206 |       {current.value === 'edit' && (
207 |         <Input
208 |           type={type}
209 |           value={current.context.newValue}
210 |           editProps={editProps}
211 |           editClassProp={editClassProp}
212 |           options={options}
213 |           valueKey={valueKey}
214 |           labelKey={labelKey}
215 |           handleChange={handleChange}
216 |           handleKeyDown={handleKeyDown}
217 |           handleBlur={handleBlur}
218 |         />
219 |       )}
220 |     </>
221 |   )
222 | }
223 | 
224 | export default InlineEdit
225 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # RIEC: React Inline Edit Component
  2 | 
  3 | Modern React component for inline edit of text/select values, written in Typescript.
  4 | 
  5 | I wrote this package to replace the good [`riek`](https://github.com/kaivi/riek) package that served me well, but hasn't been updated since June 2017.
  6 | 
  7 | Internally, RIEC uses the great [XState](https://xstate.js.org/) library by David Khourshid ([@DavidKPiano](https://twitter.com/DavidKPiano)).
  8 | 
  9 | ## Installation
 10 | 
 11 | ```bash
 12 | $ npm i --save riec
 13 | # or
 14 | $ yarn add riec
 15 | ```
 16 | 
 17 | ## Getting Started
 18 | 
 19 | ### Minimal example
 20 | 
 21 | Here you can see a minimal example:
 22 | 
 23 | ```jsx
 24 | import React, { useState } from 'react'
 25 | import InlineEdit from 'riec'
 26 | 
 27 | const App = () => {
 28 |   const onChange = value => {
 29 |     // serverCall().then...
 30 |     setValue(value)
 31 |   }
 32 | 
 33 |   const [value, setValue] = useState('pizza')
 34 | 
 35 |   return (
 36 |     <div>
 37 |       <InlineEdit value={value} onChange={onChange} />
 38 |     </div>
 39 |   )
 40 | }
 41 | ```
 42 | 
 43 | RIEC is a controlled component. Only two props are mandatory:
 44 | 
 45 | - `value`: a `string` representing the initial value, updated by the onChange function
 46 | - `onChange`: a function of value, which is supposed to update value upon success
 47 | 
 48 | ### Why a string value
 49 | 
 50 | The `value` should be always a string, because anyway you would receive back a string from a React input component, so I think it's better to do any casting before setting the value.
 51 | 
 52 | For the `select` input type is really important that the provided `value` (and the key corresponding to the `valueKey` are strings to enable pre-selecting the correct option.)
 53 | 
 54 | ### A more complex example
 55 | Soon available on CodeSandbox...
 56 | 
 57 | # API
 58 | 
 59 | RIEC exposes just one component (`InlineEditProps`) and the "enum" object `InputType`.
 60 | 
 61 | ## TypeScript interface
 62 | 
 63 | I think that it's useful to see the TypeScript interfaces, even if you don't use TypeScript, because they are very clear and concise.
 64 | 
 65 | ```ts
 66 | interface InlineEditProps {
 67 |   value: string
 68 |   onChange: (value: string) => void
 69 |   type?: InputType
 70 |   format?: (value: string) => string
 71 |   render?: (value: string) => React.ReactElement
 72 |   validate?: (value: string) => boolean
 73 |   isDisabled?: boolean
 74 |   allowEditWhileLoading?: boolean
 75 |   optimisticUpdate?: boolean
 76 |   saveTimeout?: number
 77 |   savedDuration?: number
 78 |   errorDuration?: number
 79 |   editProps?: {
 80 |     [key: string]: any
 81 |   }
 82 |   viewClass?: string
 83 |   editClass?: string
 84 |   disabledClass?: string
 85 |   loadingClass?: string
 86 |   invalidClass?: string
 87 |   savedClass?: string
 88 |   errorClass?: string
 89 |   showNewLines?: boolean
 90 |   options?: any[]
 91 |   valueKey?: string
 92 |   labelKey?: string
 93 | }
 94 | ```
 95 | 
 96 | The `InputType` is an `enum` representing all the input types provided by RIEC.
 97 | 
 98 | ```ts
 99 | enum InputType {
100 |   Text = 'text',
101 |   Number = 'number',
102 |   Email = 'email',
103 |   Password = 'password',
104 |   Date = 'date',
105 |   Range = 'range',
106 |   TextArea = 'textarea',
107 |   Select = 'select',
108 | }
109 | ```
110 | 
111 | ## Details of each prop
112 | 
113 | RIEC props may be split into 3 categories:
114 | 
115 | - **Main props** (such as the validation function)
116 | - **CSS classes props** (such as the CSS class to apply while loading)
117 | - **Input specific props** (such as the options for the `select` input type)
118 | 
119 | ### Main props
120 | 
121 | - `value`:
122 | 
123 |   - A `string` representing the initial value, updated by the onChange function
124 |   - Required
125 |   - Defaults: none
126 | 
127 | - `onChange`:
128 | 
129 |   - a `function` accepting a string value: it is supposed to update the `value` upon success
130 |   - Defaults: none
131 | 
132 | - `type`:
133 | 
134 |   - The input type to be displayed one of `text`, `number`, `email`, `password`, `date`, `range`, `textarea`, `select`.
135 |   - You can reference the type by using the exported `InputType` enum:
136 |     - `InputType.Text`
137 |     - `InputType.Number`
138 |     - `InputType.Email`
139 |     - `InputType.Password`
140 |     - `InputType.Date`
141 |     - `InputType.Range`
142 |     - `InputType.TextArea`
143 |     - `InputType.Select`
144 |   - Optional
145 |   - Default: `text`
146 | 
147 | - `format`:
148 | 
149 |   - A function to format the value. It receives the `value` string and should return the formatted string (for example for dates or money)
150 |   - Optional
151 |   - Default: none
152 | 
153 | - `render`:
154 | 
155 |   - A function to render a custom React element based on the value. It receives the `value` string and should return a React Element
156 |   - Optional
157 |   - Default: none
158 | 
159 | - `validate`:
160 | 
161 |   - A `function` to validate the value entered in the input field. It receives the `value` string and should return `true` if the value is valid, ore else `false`.
162 |   - It is possible to apply a CSS class to the invalid input field (see `invalidClass`).
163 |   - Invalid values are not sent to the `onChange` function.
164 |   - Optional
165 |   - Default: none (always valid)
166 | 
167 | - `isDisabled`:
168 | 
169 |   - `Boolean`. If `true`, the component will never switch to the "Edit" mode
170 |   - Optional
171 |   - Default: `false`
172 | 
173 | - `allowEditWhileLoading`:
174 | 
175 |   - `Boolean`. If `true`, the component allows editing while it is in the loading state (when `onChange` has been called but a new `value` hasn't been provided)
176 |   - Optional
177 |   - Default: `false`
178 | 
179 | - `optimisticUpdate`:
180 | 
181 |   - `Boolean`. If `true`, the component shows the new value immediately after calling `onChange`, even if it has not been set as a new `value` yet.
182 |   - Optional
183 |   - Default: `true`
184 | 
185 | - `saveTimeout`:
186 | 
187 |   - `Number` in milliseconds. When the component is in the "loading" state (after calling the `onChange` callback), if it doesn't receive a new value within this number of millisencods, it will abort the change and revert back to the old value, supposing `onChange` had some problems.
188 |   - Optional
189 |   - Default: 2000
190 | 
191 | - `savedDuration`:
192 | 
193 |   - `Number` in milliseconds. After receiving a new value, the component enters the "saved" state and remains there for this number of milliseconds.
194 |   - During this period the `savedClass` CSS class is applied
195 |   - Optional
196 |   - Default: 700
197 | 
198 | - `errorDuration`:
199 | 
200 |   - `Number` in milliseconds. After the `saveTimeout` has passed, the component enters the "error" state and remains there for this number of millisencods.
201 |   - During this period the `errorClass` CSS class is applied
202 |   - Optional
203 |   - Default: 1000
204 | 
205 | - `editProps`:
206 |   - Props spread on the input tag if necessary (for example to pass `min`, `max`, `step` values to an input of type `number` or `range`)
207 |   - Optional, no defaults
208 | 
209 | ### CSS Classes props
210 | 
211 | - `viewClass`:
212 | 
213 |   - Class applied to the value `span` tag when in "view", "loading", "saved" or "error" states
214 |   - Optional, no defaults
215 | 
216 | - `editClass`:
217 | 
218 |   - Class applied to the input tag when in "edit" state (valid or invalid value)
219 |   - Optional, no defaults
220 | 
221 | - `disabledClass`:
222 | 
223 |   - Class applied to the value `span` tag when `isDisabled` is `true`
224 |   - Optional, no defaults
225 | 
226 | - `loadingClass`:
227 | 
228 |   - Class applied to the value `span` tag when in "loading" state (`onChange` fired, no new `value` received, `saveTimeout` not expired)
229 |   - Optional, no defaults
230 | 
231 | - `invalidClass`:
232 | 
233 |   - Class applied to the input tag in "edit" state when the input value is not valid (the `validate` function returns `false`)
234 |   - Optional, no defaults
235 | 
236 | - `savedClass`:
237 | 
238 |   - Class applied to the input tag when in "saved" state (new `value` received, `savedDuration` not expired)
239 |   - Optional, no defaults
240 | 
241 | - `errorClass`:
242 |   - Class applied to the input tag when in "error" state (after `onChange` called, no new `value` received, `saveTimeout` expired and `errorDuration` not expired)
243 |   - Optional, no defaults
244 | 
245 | ### Component-specific props
246 | 
247 | #### For `textarea`:
248 | 
249 | - `showNewLines`:
250 |   - `Boolean`. If `true`, `<br />` are added to the value, so that it mirrors the editing `textarea` content
251 |   - Optional
252 |   - Default: `true`
253 | 
254 | #### For `select`:
255 | 
256 | - `options`:
257 |   - `Array` of objects to populate the select input `options`.
258 |   - If `valueKey` and `labelKey` are not set, it should have a key with name `value` used for values and a key with name `label` used to show labels in the select input
259 | - `valueKey`: 
260 |   - the name of the object key containing the values
261 |   - Optional
262 |   - Default: `'value'`
263 | - `labelKey`: 
264 |   - the name of the object key containing the labels
265 |   - Optional
266 |   - Default: `'label'`
267 |

--------------------------------------------------------------------------------