@douyinfe/semi-ui/lib/es/jsonViewer/index.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React from 'react';
import JsonViewerFoundation, { JsonViewerOptions, JsonViewerAdapter } from '@douyinfe/semi-foundation/lib/es/jsonViewer/foundation';
import '@douyinfe/semi-foundation/lib/es/jsonViewer/jsonViewer.css';
import BaseComponent, { BaseProps } from '../_base/baseComponent';
export type { JsonViewerOptions };
export interface JsonViewerProps extends BaseProps {
    value: string;
    width: number | string;
    height: number | string;
    showSearch?: boolean;
    className?: string;
    style?: React.CSSProperties;
    onChange?: (value: string) => void;
    renderTooltip?: (value: string, el: HTMLElement) => HTMLElement;
    options?: JsonViewerOptions;
    /**
     * Whether to limit the search button drag bounds within the jsonViewer container
     * @default false
     */
    limitSearchButtonBounds?: boolean;
    /**
     * Custom render search button
     * @param defaultSearchButton - Default search button React node
     * @param searchControls - Search related controls and methods
     */
    renderSearchButton?: (defaultSearchButton: React.ReactNode, searchControls: {
        showSearchBar: boolean;
        onToggleSearchBar: () => void;
        onSearch: (text: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean) => void;
        onPrevSearch: () => void;
        onNextSearch: () => void;
        onReplace: (text: string) => void;
        onReplaceAll: (text: string) => void;
    }) => React.ReactNode;
}
export interface JsonViewerState {
    searchOptions: SearchOptions;
    showSearchBar: boolean;
    customRenderMap: Map<HTMLElement, React.ReactNode>;
}
export interface SearchOptions {
    caseSensitive: boolean;
    wholeWord: boolean;
    regex: boolean;
}
declare class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
    static defaultProps: Partial<JsonViewerProps>;
    private editorRef;
    private searchInputRef;
    private replaceInputRef;
    private isComposing;
    private resizeObserver;
    private resizeRafId;
    private lastObservedWidth;
    foundation: JsonViewerFoundation;
    constructor(props: JsonViewerProps);
    componentDidMount(): void;
    private teardownResizeObserver;
    private setupResizeObserver;
    componentWillUnmount(): void;
    componentDidUpdate(prevProps: JsonViewerProps): void;
    get adapter(): JsonViewerAdapter<JsonViewerProps, JsonViewerState>;
    getValue(): string;
    format(): void;
    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean): void;
    getSearchResults(): import("@douyinfe/semi-json-viewer-core/src/common/model").FindMatch[];
    prevSearch(step?: number): void;
    nextSearch(step?: number): void;
    replace(replaceText: string): void;
    replaceAll(replaceText: string): void;
    getStyle(): {
        width: string | number;
        height: string | number;
    };
    searchHandler: () => void;
    changeSearchOptions: (key: string) => void;
    renderSearchBox(): React.JSX.Element;
    renderSearchOptions(): React.JSX.Element;
    renderSearchBar(): React.JSX.Element;
    renderReplaceBar(): React.JSX.Element;
    render(): React.JSX.Element;
}
export default JsonViewerCom;