Add errorMessageTimeout prop #121

Author: CarlosNZ

README.md

@@ -147,6 +147,7 @@ The only *required* value is `data` (although you will need to provide a `setDat
 | `customButtons`         | `CustomButtonDefinition[]`                    | `[]`                                      | You can add your own buttons to the Edit Buttons panel if you'd like to be able to perform a custom operation on the data. See [Custom Buttons](#custom-buttons)                                                                                                                                                                               |
 | `jsonParse`             | `(input: string) => JsonData`                 | `JSON.parse`                              | When editing a block of JSON directly, you may wish to allow some "looser" input -- e.g. 'single quotes', trailing commas, or unquoted field names. In this case, you can provide a third-party JSON parsing method. I recommend [JSON5](https://json5.org/), which is what is used in the [Demo](https://carlosnz.github.io/json-edit-react/) |
 | `jsonStringify`         | `(data: JsonData) => string`                  | `(data) => JSON.stringify(data, null, 2)` | Similarly, you can override the default presentation of the JSON string when starting editing JSON. You can supply different formatting parameters to the native `JSON.stringify()`, or provide a third-party option, like the aforementioned JSON5.                                                                                           |
+| `errorMessageTimeout`   | `number`                                      | `2500`                                    | Time (in milliseconds) to display the error message in the UI.                                                                                                                                                                                                                                                                                 |  |
 
 ## Managing state
 

src/JsonEditor.tsx

@@ -63,6 +63,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   customButtons = [],
   jsonParse = JSON.parse,
   jsonStringify = (data: JsonData) => JSON.stringify(data, null, 2),
+  errorMessageTimeout = 2500,
 }) => {
   const { getStyles } = useTheme()
   const collapseFilter = useCallback(getFilterFunction(collapse), [collapse])
@@ -281,6 +282,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     parentData: null,
     jsonParse,
     jsonStringify,
+    errorMessageTimeout,
   }
 
   const mainContainerStyles = { ...getStyles('container', nodeData), minWidth, maxWidth }

src/hooks/useCommon.ts

@@ -12,7 +12,6 @@ import {
   type ValueData,
   type ValueNodeProps,
   type JsonData,
-  ERROR_DISPLAY_TIME,
 } from '../types'
 import { toPathString } from '../helpers'
 
@@ -34,6 +33,7 @@ export const useCommon = ({ props, collapsed }: CommonProps) => {
     restrictAddFilter,
     restrictDragFilter,
     translate,
+    errorMessageTimeout,
   } = props
   const { currentlyEditingElement, setCurrentlyEditingElement } = useTreeState()
   const [error, setError] = useState<string | null>(null)
@@ -54,7 +54,7 @@ export const useCommon = ({ props, collapsed }: CommonProps) => {
   const showError = (errorString: ErrorString) => {
     if (showErrorMessages) {
       setError(errorString)
-      setTimeout(() => setError(null), ERROR_DISPLAY_TIME)
+      setTimeout(() => setError(null), errorMessageTimeout)
     }
     console.warn('Error', errorString)
   }

src/types.ts

@@ -1,7 +1,5 @@
 import { type LocalisedStrings, type TranslateFunction } from './localisation'
 
-export const ERROR_DISPLAY_TIME = 2500 // ms
-
 export type JsonData = CollectionData | ValueData
 
 export interface JsonEditorProps {
@@ -46,6 +44,7 @@ export interface JsonEditorProps {
   customButtons?: CustomButtonDefinition[]
   jsonParse?: (input: string) => JsonData
   jsonStringify?: (input: JsonData) => string
+  errorMessageTimeout?: number // ms
 }
 
 const ValueDataTypes = ['string', 'number', 'boolean', 'null'] as const
@@ -189,6 +188,7 @@ interface BaseNodeProps {
   translate: TranslateFunction
   customNodeDefinitions: CustomNodeDefinition[]
   customButtons: CustomButtonDefinition[]
+  errorMessageTimeout: number
 }
 
 export interface CollectionNodeProps extends BaseNodeProps {