@atlaskit/renderer
Version:
Renderer component
99 lines (98 loc) • 4.16 kB
TypeScript
import React, { Component } from 'react';
import type { ADFEntity } from '@atlaskit/adf-utils/types';
import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
import type { MediaClientConfig } from '@atlaskit/media-core';
import type { ImageResizeMode, Identifier, FileState, MediaClient } from '@atlaskit/media-client';
import type { MediaType } from '@atlaskit/adf-schema';
import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
import type { ImageLoaderProps, ImageStatus } from '@atlaskit/editor-common/utils';
import type { MediaFeatureFlags } from '@atlaskit/media-common';
import type { RendererAppearance } from './Renderer/types';
import type { RendererContext } from '../react/types';
import type { MediaSSR } from '../types/mediaOptions';
import type { MediaViewerExtensions } from '@atlaskit/media-viewer';
import type { AnalyticsEventPayload } from '../analytics/events';
export type MediaProvider = {
viewMediaClientConfig: MediaClientConfig;
};
export interface MediaCardProps {
alt?: string;
appearance?: CardAppearance;
cardDimensions?: CardDimensions;
collection?: string;
contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
dataAttributes?: Record<string, any>;
disableOverlay?: boolean;
enableSyncMediaCard?: boolean;
eventHandlers?: {
media?: {
onClick?: CardOnClickCallback;
};
};
featureFlags?: MediaFeatureFlags;
id?: string;
imageStatus?: ImageStatus;
localId?: string;
/** Extensions for the media viewer (e.g. comment button in header). */
mediaViewerExtensions?: MediaViewerExtensions;
/**
* Indicates if media node is nested under a bodiedSyncBlock
*/
nestedUnder?: string;
occurrenceKey?: string;
originalDimensions?: NumericalCardDimensions;
rendererAppearance?: RendererAppearance;
/**
* Renderer context that includes nestedRendererType for detecting renderer nesting.
* When nestedRendererType is 'syncedBlock', it indicates media is inside renderer inside a syncBlock.
*/
rendererContext?: RendererContext;
resizeMode?: ImageResizeMode;
shouldEnableDownloadButton?: boolean;
shouldOpenMediaViewer?: boolean;
ssr?: MediaSSR;
type: MediaType;
url?: string;
useInlinePlayer?: boolean;
}
interface State {
contextIdentifierProvider?: ContextIdentifierProvider;
fileState?: FileState;
}
export declare const mediaIdentifierMap: Map<string, Identifier>;
export declare const getListOfIdentifiersFromDoc: (doc?: ADFEntity) => Identifier[];
export declare class MediaCardView extends Component<MediaCardProps & {
fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
mediaClient?: MediaClient;
}, State> {
state: State;
componentDidMount(): Promise<void>;
componentDidUpdate(prevProps: MediaCardProps): void;
componentWillUnmount(): void;
saveFileState: (id: string) => Promise<void>;
private onError;
private renderLoadingCard;
private renderExternal;
/**
* We want to call provided `eventHandlers.media.onClick` when it's provided,
* but we also don't want to call it when it's a video and inline video player is enabled.
* This is due to consumers normally process this onClick call by opening media viewer and
* we don't want that to happened described above text.
*/
private getOnCardClickCallback;
render(): React.JSX.Element | null;
}
export type ClipboardAttrs = {
alt?: string;
collection?: string;
contextIdentifierProvider?: ContextIdentifierProvider;
fileState?: FileState;
id: string;
originalDimensions?: NumericalCardDimensions;
};
export declare const getClipboardAttrs: ({ id, alt, collection, contextIdentifierProvider, originalDimensions, fileState, }: ClipboardAttrs) => {
[key: string]: string | number | undefined;
};
export declare const MediaCardInternal: (props: MediaCardProps) => React.JSX.Element;
export declare const MediaCard: React.ComponentClass<MediaCardProps & ImageLoaderProps>;
export {};