@fluentui/react-northstar
Version:
A themable React component library.
73 lines (72 loc) • 3.17 kB
TypeScript
import { Accessibility, EmbedBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { UIComponentProps } from '../../utils';
import { VideoProps } from '../Video/Video';
import { BoxProps } from '../Box/Box';
import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types';
export interface EmbedSlotClassNames {
control: string;
}
export interface EmbedProps extends UIComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<EmbedBehaviorProps>;
/** Alternative text. */
alt?: string;
/** Corresponds to HTML title attribute. */
title?: string;
/** Whether the embedded object should be active. */
active?: boolean;
/** Whether the embedded object should start active. */
defaultActive?: boolean;
/** Shorthand for an control. */
control?: ShorthandValue<BoxProps>;
/** Shorthand for an embedded iframe. */
iframe?: ShorthandValue<BoxProps>;
/**
* Event for request to change 'active' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onActiveChange?: ComponentEventHandler<EmbedProps>;
/**
* Called when is clicked.
*
* @param event - React's original SyntheticEvent.
* @param data - All item props.
*/
onClick?: ComponentEventHandler<EmbedProps>;
/** Image source URL for when video isn't playing. */
placeholder?: string;
/** Shorthand for an embedded video. */
video?: ShorthandValue<VideoProps>;
}
export declare const embedClassName = "ui-embed";
export declare const embedSlotClassNames: EmbedSlotClassNames;
export declare type EmbedStylesProps = Required<Pick<EmbedProps, 'active'>> & {
iframeLoaded: boolean;
};
/**
* An Embed displays content from external websites, like a post from external social network.
*
* @accessibility
* A `placeholder` slot represents an [`Image`](/components/image/definition) component, please follow recommendations from its
* accessibility section.
*/
export declare const Embed: (<TExtendedElementType extends React.ElementType<any> = "span">(props: React.RefAttributes<HTMLSpanElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof EmbedProps> & {
as?: TExtendedElementType;
} & EmbedProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<EmbedProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<EmbedProps & {
as: "span";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLSpanElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
ref?: React.Ref<HTMLSpanElement>;
}, "as" | keyof EmbedProps> & {
as?: "span";
} & EmbedProps;
} & FluentComponentStaticProps<EmbedProps>;