@tinacms/toolkit/dist/packages/react-screens/screen-plugin.d.ts

Tina is a lightweight but powerful toolkit for creating a site editing ui with javascript components. Tina surfaces superpowers for dev’s to create, expand on and customize a simple yet intuitive ui for editing content.

/**



*/
import React from 'react';
import { Plugin } from '../core';
/**
 * Represents a Screen that should be accessible via the CMS.
 *
 * The purpose of these screens is to give a way to display information
 * about the website that is not suited to inline editing. Example use
 * cases may include:
 *
 * * User Management
 * * CI build status
 * * Website Metadata e.g. SEO
 * * Layout Configuration e.g. Menus
 */
export interface ScreenPlugin<ExtraProps = {}> extends Plugin {
    __type: 'screen';
    Component(props: ScreenComponentProps & ExtraProps): React.ReactElement;
    Icon: any;
    layout: 'fullscreen' | 'popup';
}
/**
 * The set of props passed to all Screen Components.
 */
export interface ScreenComponentProps {
    close(): void;
}
/**
 * An options object used to create Screen Plugins.
 */
export interface ScreenOptions<ExtraProps = {}> {
    name: string;
    Component: React.FC<ExtraProps & ScreenComponentProps>;
    Icon: any;
    layout?: ScreenPlugin['layout'];
    props?: ExtraProps;
}
/**
 * Creates screen plugins.
 *
 * @param options
 */
export declare function createScreen<ExtraProps>({ Component, props, ...options }: ScreenOptions<ExtraProps>): ScreenPlugin<ExtraProps>;