@fluentui/react-northstar
Version:
A themable React component library.
77 lines (76 loc) • 3.48 kB
TypeScript
import { Accessibility, ListItemBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ShorthandValue, ComponentEventHandler, FluentComponentStaticProps } from '../../types';
import { UIComponentProps, ContentComponentProps } from '../../utils';
import { ListItemContentProps } from './ListItemContent';
import { ListItemContentMediaProps } from './ListItemContentMedia';
import { ListItemEndMediaProps } from './ListItemEndMedia';
import { ListItemHeaderProps } from './ListItemHeader';
import { ListItemHeaderMediaProps } from './ListItemHeaderMedia';
import { ListItemMediaProps } from './ListItemMedia';
export interface ListItemSlotClassNames {
headerWrapper: string;
contentWrapper: string;
main: string;
}
export interface ListItemProps extends UIComponentProps, ContentComponentProps<ShorthandValue<ListItemContentProps>> {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<ListItemBehaviorProps>;
contentMedia?: ShorthandValue<ListItemContentMediaProps>;
/** Toggle debug mode. */
debug?: boolean;
header?: ShorthandValue<ListItemHeaderProps>;
headerMedia?: ShorthandValue<ListItemHeaderMediaProps>;
endMedia?: ShorthandValue<ListItemEndMediaProps>;
/** A list item can appear more important and draw the user's attention. */
important?: boolean;
media?: ShorthandValue<ListItemMediaProps>;
index?: number;
/** A list item can indicate that it can be selected. */
selectable?: boolean;
/** A list item can indicate that it can be navigable. */
navigable?: boolean;
/** Indicates if the current list item is selected. */
selected?: boolean;
truncateContent?: boolean;
truncateHeader?: boolean;
/**
* Called on click.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onClick?: ComponentEventHandler<ListItemProps>;
}
export declare type ListItemStylesProps = Pick<ListItemProps, 'debug' | 'important' | 'navigable' | 'selectable' | 'selected'>;
export declare const listItemClassName = "ui-list__item";
export declare const listItemSlotClassNames: ListItemSlotClassNames;
/**
* A ListItem contains a single piece of content within a List.
*/
export declare const ListItem: (<TExtendedElementType extends React.ElementType<any> = "li">(props: React.RefAttributes<HTMLLIElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof ListItemProps> & {
as?: TExtendedElementType;
} & ListItemProps & {
index: number;
}) => JSX.Element) & {
propTypes?: React.WeakValidationMap<ListItemProps & {
index: number;
}> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<ListItemProps & {
index: number;
} & {
as: "li";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLLIElement> & Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
ref?: React.Ref<HTMLLIElement>;
}, "as" | keyof ListItemProps> & {
as?: "li";
} & ListItemProps & {
index: number;
};
} & FluentComponentStaticProps<ListItemProps>;