Add viewOnly prop (#173)

Author: CarlosNZ

README.md

@@ -148,6 +148,7 @@ The only *required* property is `data` (although you will need to provide a `set
 | `restrictAdd`           | `boolean\|FilterFunction`                 | `false` | As with `restrictEdit` but for adding new properties                                                                                                                                                                            |
 | `restrictTypeSelection` | `boolean\|DataType[]\|TypeFilterFunction` | `false` | For restricting the data types the user can select. Can be a list of data types (e.g. `[ 'string', 'number', 'boolean', 'array', 'object', 'null' ]`), a boolean. or a function — see [TypeFilterFunction](#typefilterfunction) |
 | `restrictDrag`          | `boolean\|FilterFunction`                 | `true`  | Set to `false` to enable drag and drop functionality — see [Drag-n-drop](#drag-n-drop)                                                                                                                                          |
+| `viewOnly`              | `boolean`                                 |         | A shorthand if you just want the component to be a viewer, with no editing. Overrides any values of the above edit restrictions.                                                                                                |
 
 ### Look and Feel / UI
 
@@ -329,7 +330,7 @@ For restricting data types, the (Type) filter function is slightly more sophisti
 - `"object"`
 - `"array"`
 
-There is no specific restriction function for editing object key names, but they must return `true` for *both* `restrictEdit` and `restrictDelete` (and `restrictAdd` for collections), since changing a key name is equivalent to deleting a property and adding a new one.
+There is no specific restriction function for editing object key names, but they must return `false` for *both* `restrictEdit` and `restrictDelete` (and `restrictAdd` for collections), since changing a key name is equivalent to deleting a property and adding a new one.
 
 You can also set a dynamic default value by passing a filter function to the `defaultValue` prop -- the input is the same as the above, but also takes the new `key` value as its second parameter, so the new value can depend on the new key added.
 

demo/src/App.tsx

@@ -382,6 +382,7 @@ function App() {
                     }
                   : false
               }
+              // viewOnly
               restrictEdit={restrictEdit}
               // restrictEdit={(nodeData) => !(typeof nodeData.value === 'string')}
               restrictDelete={restrictDelete}

src/JsonEditor.tsx

@@ -51,6 +51,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   restrictAdd = false,
   restrictTypeSelection = false,
   restrictDrag = true,
+  viewOnly,
   searchFilter: searchFilterInput,
   searchText,
   searchDebounceTime = 350,
@@ -249,10 +250,22 @@ const Editor: React.FC<JsonEditorProps> = ({
     })
   }
 
-  const restrictEditFilter = useMemo(() => getFilterFunction(restrictEdit), [restrictEdit])
-  const restrictDeleteFilter = useMemo(() => getFilterFunction(restrictDelete), [restrictDelete])
-  const restrictAddFilter = useMemo(() => getFilterFunction(restrictAdd), [restrictAdd])
-  const restrictDragFilter = useMemo(() => getFilterFunction(restrictDrag), [restrictDrag])
+  const restrictEditFilter = useMemo(
+    () => getFilterFunction(restrictEdit, viewOnly),
+    [restrictEdit, viewOnly]
+  )
+  const restrictDeleteFilter = useMemo(
+    () => getFilterFunction(restrictDelete, viewOnly),
+    [restrictDelete, viewOnly]
+  )
+  const restrictAddFilter = useMemo(
+    () => getFilterFunction(restrictAdd, viewOnly),
+    [restrictAdd, viewOnly]
+  )
+  const restrictDragFilter = useMemo(
+    () => getFilterFunction(restrictDrag, viewOnly),
+    [restrictDrag, viewOnly]
+  )
   const searchFilter = useMemo(() => getSearchFilter(searchFilterInput), [searchFilterInput])
 
   const fullKeyboardControls = useMemo(
@@ -426,7 +439,11 @@ const updateDataObject = (
   }
 }
 
-const getFilterFunction = (propValue: boolean | number | FilterFunction): FilterFunction => {
+const getFilterFunction = (
+  propValue: boolean | number | FilterFunction,
+  viewOnly?: boolean
+): FilterFunction => {
+  if (viewOnly) return () => true
   if (typeof propValue === 'boolean') return () => propValue
   if (typeof propValue === 'number') return ({ level }) => level >= propValue
   return propValue

src/types.ts

@@ -28,6 +28,7 @@ export interface JsonEditorProps {
   restrictAdd?: boolean | FilterFunction
   restrictTypeSelection?: boolean | DataType[] | TypeFilterFunction
   restrictDrag?: boolean | FilterFunction
+  viewOnly?: boolean
   searchText?: string
   searchFilter?: 'key' | 'value' | 'all' | SearchFilterFunction
   searchDebounceTime?: number