@fluentui/react-northstar
Version:
A themable React component library.
55 lines (54 loc) • 2.71 kB
TypeScript
import { Accessibility } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ShorthandValue, FluentComponentStaticProps } from '../../types';
import { UIComponentProps, SizeValue } from '../../utils';
import { AvatarStatusProps } from './AvatarStatus';
import { AvatarImageProps } from './AvatarImage';
import { AvatarIconProps } from './AvatarIcon';
import { AvatarLabelProps } from './AvatarLabel';
export interface AvatarProps extends UIComponentProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<never>;
/** Avatar can contain icon. It will be rendered only if the image is not present. */
icon?: ShorthandValue<AvatarIconProps>;
/** Shorthand for the image. */
image?: ShorthandValue<AvatarImageProps>;
/** Shorthand for the label. */
label?: ShorthandValue<AvatarLabelProps>;
/** The name used for displaying the initials of the avatar if the image is not provided. */
name?: string;
/** The avatar can have a square shape. */
square?: boolean;
/** Size multiplier. */
size?: AvatarSizeValue;
/** Shorthand for the status of the user. */
status?: ShorthandValue<AvatarStatusProps>;
/** Custom method for generating the initials from the name property, which is shown if no image is provided. */
getInitials?: (name: string) => string;
}
export declare type AvatarSizeValue = SizeValue | 'medium-large';
export declare type AvatarStylesProps = Pick<AvatarProps, 'size' | 'square'>;
export declare const avatarClassName = "ui-avatar";
/**
* An Avatar is a graphical representation of a user.
*/
export declare const Avatar: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof AvatarProps> & {
as?: TExtendedElementType;
} & AvatarProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<AvatarProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<AvatarProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof AvatarProps> & {
as?: "div";
} & AvatarProps;
} & FluentComponentStaticProps<AvatarProps>;