Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import { forwardRef } from 'react';
import JsonView, { type JsonViewProps } from '../';
import { KeyNameRender } from './KeyName';
import { Context, Dispatch, useStoreReducer } from './store';
export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
/**
* When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
* @returns {boolean} Returning false from onEdit will prevent the change from being made.
*/
onEdit?: (option: {
value: unknown;
oldValue: unknown;
keyName?: string | number;
parentName?: string | number;
type?: 'value' | 'key';
}) => boolean;
/** Whether enable edit feature. @default true */
editable?: boolean;
}
const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((props, ref) => {
const { children, onEdit, editable = true, ...reset } = props;
const [state, dispatch] = useStoreReducer({ onEdit });
return (
<Context.Provider value={state}>
<Dispatch.Provider value={dispatch}>
<JsonView {...reset} shortenTextAfterLength={0} ref={ref}>
{editable && <JsonView.KeyName render={KeyNameRender} />}
{children}
</JsonView>
</Dispatch.Provider>
</Context.Provider>
);
});
export default JsonViewEditor;
|