Skip to content

#168 Add viewOnly prop #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 19, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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.

1 change: 1 addition & 0 deletions demo/src/App.tsx
Original file line number Diff line number Diff line change
@@ -382,6 +382,7 @@ function App() {
}
: false
}
// viewOnly
restrictEdit={restrictEdit}
// restrictEdit={(nodeData) => !(typeof nodeData.value === 'string')}
restrictDelete={restrictDelete}
27 changes: 22 additions & 5 deletions src/JsonEditor.tsx
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
@@ -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