json-edit-react/build/index.d.ts

React component for editing or viewing JSON/object data

import React$1 from 'react';
import { Options } from 'object-property-assigner';
export { default as assign } from 'object-property-assigner';
export { default as extract } from 'object-property-extractor';

declare const localisedStrings: {
    ITEM_SINGLE: string;
    ITEMS_MULTIPLE: string;
    KEY_NEW: string;
    KEY_SELECT: string;
    NO_KEY_OPTIONS: string;
    ERROR_KEY_EXISTS: string;
    ERROR_INVALID_JSON: string;
    ERROR_UPDATE: string;
    ERROR_DELETE: string;
    ERROR_ADD: string;
    DEFAULT_STRING: string;
    DEFAULT_NEW_KEY: string;
    SHOW_LESS: string;
};
type LocalisedStrings = typeof localisedStrings;
type TranslateFunction = (key: keyof LocalisedStrings, customData: NodeData, count?: number) => string;

interface EditState {
    path?: CollectionKey[];
    action?: 'accept' | 'cancel';
}
interface ExternalTriggers {
    collapse?: CollapseState | CollapseState[];
    edit?: EditState;
}

type JsonData = CollectionData | ValueData;
interface JsonEditorProps {
    data: JsonData;
    setData?: (data: JsonData) => void;
    rootName?: string;
    onUpdate?: UpdateFunction;
    onEdit?: UpdateFunction;
    onDelete?: UpdateFunction;
    onAdd?: UpdateFunction;
    onChange?: OnChangeFunction;
    onError?: OnErrorFunction;
    showErrorMessages?: boolean;
    enableClipboard?: boolean | CopyFunction;
    theme?: ThemeInput;
    icons?: IconReplacements;
    className?: string;
    id?: string;
    indent?: number;
    collapse?: boolean | number | FilterFunction;
    collapseAnimationTime?: number;
    showCollectionCount?: boolean | 'when-closed';
    restrictEdit?: boolean | FilterFunction;
    restrictDelete?: boolean | FilterFunction;
    restrictAdd?: boolean | FilterFunction;
    restrictTypeSelection?: boolean | TypeOptions | TypeFilterFunction;
    restrictDrag?: boolean | FilterFunction;
    viewOnly?: boolean;
    searchText?: string;
    searchFilter?: 'key' | 'value' | 'all' | SearchFilterFunction;
    searchDebounceTime?: number;
    keySort?: boolean | CompareFunction;
    showArrayIndices?: boolean;
    showStringQuotes?: boolean;
    defaultValue?: string | number | boolean | null | object | DefaultValueFunction;
    newKeyOptions?: string[] | NewKeyOptionsFunction;
    minWidth?: string | number;
    maxWidth?: string | number;
    rootFontSize?: string | number;
    stringTruncate?: number;
    translations?: Partial<LocalisedStrings>;
    customNodeDefinitions?: CustomNodeDefinition[];
    customText?: CustomTextDefinitions;
    customButtons?: CustomButtonDefinition[];
    jsonParse?: (input: string) => JsonData;
    jsonStringify?: (input: JsonData) => string;
    TextEditor?: React.FC<TextEditorProps>;
    errorMessageTimeout?: number;
    keyboardControls?: KeyboardControls;
    insertAtTop?: boolean | 'array' | 'object';
    collapseClickZones?: Array<'left' | 'header' | 'property'>;
    onEditEvent?: OnEditEventFunction;
    onCollapse?: OnCollapseFunction;
    externalTriggers?: ExternalTriggers;
}
declare const standardDataTypes: readonly ["string", "number", "boolean", "null", "object", "array"];
type DataType = (typeof standardDataTypes)[number] | 'invalid';
type CollectionKey = string | number;
type CollectionData = object | unknown[];
interface EnumDefinition {
    enum: string;
    values: string[];
    matchPriority?: number;
}
type TypeOptions = Array<DataType | string | EnumDefinition>;
type ErrorString = string;
interface IconReplacements {
    add?: JSX.Element;
    edit?: JSX.Element;
    delete?: JSX.Element;
    copy?: JSX.Element;
    ok?: JSX.Element;
    cancel?: JSX.Element;
    chevron?: JSX.Element;
}
interface TextEditorProps {
    value: string;
    onChange: (value: string) => void;
    onKeyDown: (e: React.KeyboardEvent) => void;
}
interface UpdateFunctionProps {
    newData: JsonData;
    currentData: JsonData;
    newValue: unknown;
    currentValue: unknown;
    name: CollectionKey;
    path: CollectionKey[];
}
type UpdateFunctionReturn = ['error' | 'value', JsonData];
type UpdateFunction = (props: UpdateFunctionProps) => void | ErrorString | boolean | UpdateFunctionReturn | Promise<boolean | ErrorString | void | UpdateFunctionReturn>;
type OnChangeFunction = (props: {
    currentData: JsonData;
    newValue: ValueData;
    currentValue: ValueData;
    name: CollectionKey;
    path: CollectionKey[];
}) => ValueData;
interface JerError {
    code: 'UPDATE_ERROR' | 'DELETE_ERROR' | 'ADD_ERROR' | 'INVALID_JSON' | 'KEY_EXISTS';
    message: ErrorString;
}
type OnErrorFunction = (props: {
    currentData: JsonData;
    errorValue: JsonData;
    currentValue: JsonData;
    name: CollectionKey;
    path: CollectionKey[];
    error: JerError;
}) => unknown;
type FilterFunction = (input: NodeData) => boolean;
type TypeFilterFunction = (input: NodeData) => boolean | TypeOptions;
type CustomTextFunction = (input: NodeData) => string | null;
type DefaultValueFunction = (input: NodeData, newKey?: string) => unknown;
type SearchFilterFunction = (inputData: NodeData, searchText: string) => boolean;
type NewKeyOptionsFunction = (input: NodeData) => string[] | null | void;
type CopyType = 'path' | 'value';
type CopyFunction = (input: {
    success: boolean;
    errorMessage: string | null;
    key: CollectionKey;
    path: CollectionKey[];
    value: unknown;
    stringValue: string;
    type: CopyType;
}) => void;
type CompareFunction = (a: [string | number, unknown], b: [string | number, unknown]) => number;
type SortFunction = <T>(arr: T[], nodeMap: (input: T) => [string | number, unknown]) => void;
type OnEditEventFunction = (path: CollectionKey[] | string | null, isKey: boolean) => void;
interface CollapseState {
    path: CollectionKey[];
    collapsed: boolean;
    includeChildren: boolean;
}
type OnCollapseFunction = (input: CollapseState) => void;
type InternalUpdateFunction = (value: unknown, path: CollectionKey[], options?: Options) => Promise<string | void>;
type Position = 'above' | 'below';
type InternalMoveFunction = (source: CollectionKey[] | null, dest: CollectionKey[], position: Position) => Promise<string | void>;
interface KeyEvent {
    key: string;
    modifier?: React.ModifierKey | React.ModifierKey[];
}
interface KeyboardControls {
    confirm?: KeyEvent | string;
    cancel?: KeyEvent | string;
    objectConfirm?: KeyEvent | string;
    objectLineBreak?: KeyEvent | string;
    stringConfirm?: KeyEvent | string;
    stringLineBreak?: KeyEvent | string;
    booleanConfirm?: KeyEvent | string;
    booleanToggle?: KeyEvent | string;
    numberConfirm?: KeyEvent | string;
    numberUp?: KeyEvent | string;
    numberDown?: KeyEvent | string;
    tabForward?: KeyEvent | string;
    tabBack?: KeyEvent | string;
    clipboardModifier?: React.ModifierKey | React.ModifierKey[];
    collapseModifier?: React.ModifierKey | React.ModifierKey[];
}
type KeyboardControlsFull = Omit<Required<{
    [Property in keyof KeyboardControls]: KeyEvent;
}>, 'clipboardModifier' | 'collapseModifier'> & {
    clipboardModifier: React.ModifierKey[];
    collapseModifier: React.ModifierKey[];
};
interface NodeData {
    key: CollectionKey;
    path: CollectionKey[];
    level: number;
    index: number;
    value: JsonData;
    size: number | null;
    parentData: object | null;
    fullData: JsonData;
    collapsed?: boolean;
}
interface BaseNodeProps {
    data: unknown;
    parentData: CollectionData | null;
    nodeData: NodeData;
    onEdit: InternalUpdateFunction;
    onDelete: InternalUpdateFunction;
    onError?: OnErrorFunction;
    showErrorMessages: boolean;
    onMove: InternalMoveFunction;
    enableClipboard: boolean | CopyFunction;
    restrictEditFilter: FilterFunction;
    restrictDeleteFilter: FilterFunction;
    restrictAddFilter: FilterFunction;
    restrictDragFilter: FilterFunction;
    canDragOnto: boolean;
    searchFilter?: SearchFilterFunction;
    searchText?: string;
    restrictTypeSelection: boolean | TypeOptions | TypeFilterFunction;
    stringTruncate: number;
    indent: number;
    sort: SortFunction;
    translate: TranslateFunction;
    customNodeDefinitions: CustomNodeDefinition[];
    customButtons: CustomButtonDefinition[];
    errorMessageTimeout: number;
    keyboardControls: KeyboardControlsFull;
    handleKeyboard: (e: React.KeyboardEvent, eventMap: Partial<Record<keyof KeyboardControlsFull, () => void>>) => void;
    editConfirmRef: React.RefObject<HTMLDivElement>;
}
interface CollectionNodeProps extends BaseNodeProps {
    mainContainerRef: React.MutableRefObject<Element>;
    data: CollectionData;
    collapseFilter: FilterFunction;
    collapseAnimationTime: number;
    onAdd: InternalUpdateFunction;
    showArrayIndices: boolean;
    showCollectionCount: boolean | 'when-closed';
    showStringQuotes: boolean;
    defaultValue: unknown;
    newKeyOptions?: string[] | NewKeyOptionsFunction;
    jsonParse: (input: string) => JsonData;
    jsonStringify: (data: JsonData) => string;
    insertAtTop: {
        object: boolean;
        array: boolean;
    };
    TextEditor?: React.FC<TextEditorProps>;
    onCollapse?: OnCollapseFunction;
    collapseClickZones: Array<'left' | 'header' | 'property'>;
}
type ValueData = string | number | boolean;
interface ValueNodeProps extends BaseNodeProps {
    data: ValueData;
    showLabel: boolean;
    showStringQuotes: boolean;
    onChange?: OnChangeFunction;
}
interface CustomNodeProps<T = Record<string, unknown>> extends BaseNodeProps {
    value: JsonData;
    customNodeProps?: T;
    parentData: CollectionData | null;
    setValue: (value: ValueData) => void;
    handleEdit: () => void;
    handleCancel: () => void;
    handleKeyPress: (e: React.KeyboardEvent) => void;
    isEditing: boolean;
    setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
    getStyles: (element: ThemeableElement, nodeData: NodeData) => React.CSSProperties;
    children?: JSX.Element | JSX.Element[] | null;
    originalNode?: JSX.Element;
    originalNodeKey?: JSX.Element;
}
interface CustomNodeDefinition<T = Record<string, unknown>, U = Record<string, unknown>> {
    condition: FilterFunction;
    element?: React.FC<CustomNodeProps<T>>;
    name?: string;
    customNodeProps?: T;
    hideKey?: boolean;
    defaultValue?: unknown;
    showInTypesSelector?: boolean;
    showOnEdit?: boolean;
    showOnView?: boolean;
    showEditTools?: boolean;
    passOriginalNode?: boolean;
    showCollectionWrapper?: boolean;
    wrapperElement?: React.FC<CustomNodeProps<U>>;
    wrapperProps?: Record<string, unknown>;
}
type CustomTextDefinitions = Partial<{
    [key in keyof LocalisedStrings]: CustomTextFunction;
}>;
interface CustomButtonDefinition {
    Element: React.FC<{
        nodeData: NodeData;
    }>;
    onClick: (nodeData: NodeData, e: React.MouseEvent) => void;
}
type ThemeInput = Theme | Partial<ThemeStyles> | Array<Theme | Partial<ThemeStyles>>;
declare const themeableElements: readonly ["container", "collection", "collectionInner", "collectionElement", "dropZone", "property", "bracket", "itemCount", "string", "number", "boolean", "null", "input", "inputHighlight", "error", "iconCollection", "iconEdit", "iconDelete", "iconAdd", "iconCopy", "iconOk", "iconCancel"];
type ThemeableElement = (typeof themeableElements)[number];
type ThemeFunction = (nodeData: NodeData) => React.CSSProperties | null | undefined;
type ThemeValue = string | React.CSSProperties | Array<string | React.CSSProperties | ThemeFunction> | ThemeFunction;
type ThemeStyles = Record<ThemeableElement, ThemeValue>;
type Fragments = Record<string, React.CSSProperties | string>;
interface Theme {
    displayName?: string;
    fragments?: Fragments;
    styles: Partial<ThemeStyles>;
}

declare const JsonEditor: React$1.FC<JsonEditorProps>;

declare const defaultTheme: Theme;

interface IconProps {
    size: string;
    style?: React$1.CSSProperties;
    className?: string;
}
declare const IconAdd: React$1.FC<IconProps>;
declare const IconEdit: React$1.FC<IconProps>;
declare const IconDelete: React$1.FC<IconProps>;
declare const IconCopy: React$1.FC<IconProps>;
declare const IconOk: React$1.FC<IconProps>;
declare const IconCancel: React$1.FC<IconProps>;
declare const IconChevron: React$1.FC<IconProps>;

interface StringDisplayProps {
    nodeData: NodeData;
    styles: React$1.CSSProperties;
    pathString: string;
    showStringQuotes?: boolean;
    stringTruncate?: number;
    canEdit: boolean;
    setIsEditing: (value: React$1.SetStateAction<boolean>) => void;
    translate: TranslateFunction;
}
declare const StringDisplay: React$1.FC<StringDisplayProps>;

declare const LinkCustomComponent: React$1.FC<CustomNodeProps<{
    stringTruncate?: number;
}> & ValueNodeProps>;
declare const LinkCustomNodeDefinition: CustomNodeDefinition;

declare const isCollection: (value: unknown) => value is Record<string, unknown> | unknown[];
declare const matchNode: (input: Partial<NodeData>, searchText: string) => boolean;
declare const matchNodeKey: SearchFilterFunction;

declare const githubDarkTheme: Theme;
declare const githubLightTheme: Theme;
declare const monoDarkTheme: Theme;
declare const monoLightTheme: Theme;
declare const candyWrapperTheme: Theme;
declare const psychedelicTheme: Theme;

export { CollapseState, CollectionNodeProps, CompareFunction, CopyFunction, CustomNodeDefinition, CustomNodeProps, CustomTextDefinitions, CustomTextFunction, DataType, DefaultValueFunction, EditState, EnumDefinition, ExternalTriggers, FilterFunction, IconAdd, IconCancel, IconChevron, IconCopy, IconDelete, IconEdit, IconOk, IconReplacements, JerError, JsonData, JsonEditor, JsonEditorProps, KeyboardControls, LinkCustomComponent, LinkCustomNodeDefinition, LocalisedStrings, NewKeyOptionsFunction, NodeData, OnChangeFunction, OnCollapseFunction, OnEditEventFunction, OnErrorFunction, SearchFilterFunction, StringDisplay, TextEditorProps, Theme, ThemeInput, ThemeStyles, TranslateFunction, TypeFilterFunction, UpdateFunction, ValueNodeProps, candyWrapperTheme, defaultTheme, githubDarkTheme, githubLightTheme, isCollection, matchNode, matchNodeKey, monoDarkTheme, monoLightTheme, psychedelicTheme, standardDataTypes };