@itwin/itwinui-react
Version:
A react component library for iTwinUI
328 lines (327 loc) • 10.4 kB
TypeScript
import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import { IconButton } from '../Buttons/IconButton.js';
type TileWrapperOwnProps = {
/**
* Status of the tile.
*/
status?: 'positive' | 'warning' | 'negative';
/**
* Whether the tile is selected or in "active" state.
* Gets highlighted and shows a checkmark icon near tile name.
*/
isSelected?: boolean;
/**
* Whether the tile is "new". Tile name becomes bold and gets a new status icon.
*/
isNew?: boolean;
/**
* Default tile variant or the folder layout.
* @default 'default'
*/
variant?: 'default' | 'folder';
/**
* Display a loading state.
* @default false
*/
isLoading?: boolean;
/**
* Flag whether the tile is disabled.
*
* Note: This only affects the tile. You need to manually disable
* the buttons and other interactive elements inside the tile.
*
* @default false
*/
isDisabled?: boolean;
};
type TileThumbnailPictureOwnProps = {
url?: string;
} | {
url?: never;
children?: React.ReactNode;
};
type TileNameOwnProps = {
name?: React.ReactNode;
};
type TileMoreOptionsOwnProps = {
buttonProps?: React.ComponentPropsWithoutRef<typeof IconButton>;
children?: React.ReactNode[];
};
type TileLegacyProps = {
/**
* Name or title of the tile.
*/
name: React.ReactNode;
/**
* Description text of the tile.
* Gets truncated if it can't fit in the tile.
*/
description?: React.ReactNode;
/**
* Metadata section located below description.
* @example
* <Tile
* // ...
* metadata='basic metadata'
* // or
* metadata={<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
* // or
* metadata={<>
* <SvgTag2 />
* <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
* </>}
* />
*/
metadata?: React.ReactNode;
/**
* Thumbnail image url, a custom component or an svg.
* @example
* <Tile
* // ...
* thumbnail='/url/to/image.jpg'
* // or
* thumbnail={<Avatar image={<img src='icon.png' />} />}
* // or
* thumbnail={<SvgImodelHollow />}
* />
*/
thumbnail?: string | React.ReactNode;
/**
* `Badge` shown on the bottom right of thumbnail.
*/
badge?: React.ReactNode;
/**
* Icon shown on top left of the tile. Also known as "type indicator".
* Recommended to use an invisible `IconButton`.
*/
leftIcon?: React.ReactNode;
/**
* Icon shown on top right of the tile. Also known as "quick action".
* Recommended to use an invisible `IconButton`.
*/
rightIcon?: React.ReactNode;
/**
* Upto two buttons shown at the bottom of the tile.
*/
buttons?: [React.ReactNode?, React.ReactNode?];
/**
* Dropdown menu containing `MenuItem`s.
*/
moreOptions?: React.ReactNode[];
/**
* Status of the tile.
*/
status?: 'positive' | 'warning' | 'negative';
/**
* Whether the tile is selected or in "active" state.
* Gets highlighted and shows a checkmark icon near tile name.
*/
isSelected?: boolean;
/**
* Whether the tile is "new". Tile name becomes bold and gets a new status icon.
*/
isNew?: boolean;
/**
* Default tile variant or the folder layout.
* @default 'default'
*/
variant?: 'default' | 'folder';
/**
* Any custom nodes that will be appended to the tile's main content.
*/
children?: React.ReactNode;
/**
* Whether the tile is expected to be interactable (i.e. `onClick`).
* It becomes focusable and gets on hover styling.
*/
isActionable?: boolean;
/**
* Display a loading state.
* @default false
*/
isLoading?: boolean;
/**
* Flag whether the tile is disabled.
*
* Note: This only affects the tile. You need to manually disable
* the buttons and other interactive elements inside the tile.
*
* @default false
*/
isDisabled?: boolean;
/**
* Adds onClick to the TileAction component.
*/
onClick?: React.MouseEventHandler<HTMLElement>;
};
/**
* Tile with customizable Thumbnail, Name, Content and Buttons subcomponents
* @example
* <Tile.Wrapper>
* <Tile.ThumbnailArea>
* <Tile.ThumbnailPicture/>
* <Tile.Badge/>
* <Tile.TypeIndicator/>
* <Tile.QuickAction/>
* </Tile.ThumbnailArea>
* <Tile.Name>
* <Tile.NameIcon/>
* <Tile.NameLabel/>
* </Tile.Name>
* <Tile.ContentArea>
* <Tile.Description />
* <Tile.Metadata/>
* <Tile.MoreOptions/>
* </Tile.ContentArea>
* <Tile.Buttons/>
* </Tile.Wrapper>
*
* @example
* <Tile
* name='Tile name'
* description='Tile description that takes upto 3 lines'
* metadata={<TagContainer><Tag variant='basic'>Tag 1</Tag></TagContainer>}
* thumbnail='/url/to/image.jpg'
* badge={<Badge backgroundColor='blue'>Badge label</Badge>}
* buttons={[<Button>Button 1</Button>, <Button>Button 2</Button>]}
* moreOptions={[<MenuItem>Item 1</MenuItem>, <MenuItem>Item 2</MenuItem>]}
* leftIcon={<IconButton><SvgInfo /></IconButton>}
* rightIcon={<IconButton><SvgStar /></IconButton>}
* isSelected={true}
* isNew={false}
* />
*/
export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps> & {
/**
* Wrapper subcomponent for fully customisable Tile.
*/
Wrapper: PolymorphicForwardRefComponent<"div", TileWrapperOwnProps>;
/**
* ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer`
* @example
* <Tile.ThumbnailArea>
* <Tile.ThumbnailPicture/>
* <Tile.QuickAction/>
* <Tile.TypeIndicator/>
* <Tile.BadgeContainer/>
* </Tile.ThumbnailArea>
*/
ThumbnailArea: PolymorphicForwardRefComponent<"div", {}>;
/**
* Thumbnail image url, a custom component or an svg for thumbnail avatar.
* @example
* <Tile.Wrapper>
* // ...
* <Tile.ThumbnailArea>
* <Tile.ThumbnailPicture url = '/url/to/image.jpg'/>
* </Tile.ThumbnailArea>
* </Tile.Wrapper>
* or
* <Tile.Wrapper>
* // ...
* <Tile.ThumbnailArea>
* <Tile.ThumbnailPicture>
* {<Avatar image={<img src='icon.png' />} />}
* // or
* {<SvgImodelHollow />}
* </Tile.ThumbnailPicture>
* </Tile.ThumbnailArea>
* /Tile>
*/
ThumbnailPicture: PolymorphicForwardRefComponent<"div", TileThumbnailPictureOwnProps>;
/**
* `QuickAction` subcomponent shown on top left of the tile.
* Recommended to use an invisible `IconButton`.
*/
QuickAction: PolymorphicForwardRefComponent<"div", {}>;
/**
* `TypeIndicator` subcomponent shown on top left of the tile.
* Recommended to use an invisible `IconButton`.
*/
TypeIndicator: PolymorphicForwardRefComponent<"div", {}>;
/**
* `BadgeContainer` subcomponent shown on the bottom right of thumbnail.
*/
BadgeContainer: PolymorphicForwardRefComponent<"div", {}>;
/**
* `IconButton` subcomponent: custom icon for `QuickAction` and `TypeIndicator` buttons.
*/
IconButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
isActive?: boolean;
label?: React.ReactNode;
labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
iconProps?: React.ComponentProps<"span">;
title?: string;
} & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
as?: "button" | undefined;
}, "ref">>;
/**
* `Name` subcomponent under thumbnail or top of the Tile if no thumbnail present.
*/
Name: PolymorphicForwardRefComponent<"div", TileNameOwnProps>;
/**
* `NameIcon` next to name of the tile. Goes under <Tile.Name>
* @example
* <Tile.Wrapper>
* <Tile.Name>
* <Tile.NameIcon/>
* </Tile.Name>
* </Tile.Wrapper>
*/
NameIcon: PolymorphicForwardRefComponent<"div", {}>;
NameLabel: PolymorphicForwardRefComponent<"span", {}>;
/**
* Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
* Renders `a` element by default.
* @example
* <Tile.Name>
* <Tile.NameLabel>
* {<Tile.Action href='/new-page'>Tile Name<Tile.Action/>}
* <Tile.NameLabel/>
* </Tile.Name>
*/
Action: PolymorphicForwardRefComponent<"a", {}>;
/**
* Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents
* @example
* <Tile.Wrapper>
* <Tile.ContentArea>
* <Tile.Description/>
* <Tile.Metadata/>
* <Tile.MoreOptions/>
* </Tile.ContentArea>
* </Tile.Wrapper>
*/
ContentArea: PolymorphicForwardRefComponent<"div", {}>;
/**
* Description text of the tile.
* Gets truncated if it can't fit in the tile.
*/
Description: PolymorphicForwardRefComponent<"div", {}>;
/**
* Metadata section located below description.
* @example
* <Tile.Metadata>
* // ...
* 'basic metadata'
* // or
* {<span><SvgClock /> 2021-01-01, 04:30 AM</span>}
* // or
* {<>
* <SvgTag2 />
* <TagContainer><Tag variant='basic'>Tag 1</Tag><Tag variant='basic'>Tag 2</Tag></TagContainer>
* </>}
* </Tile.Metadata>
*/
Metadata: PolymorphicForwardRefComponent<"div", {}>;
/**
* Dropdown menu containing `MenuItem`s.
*/
MoreOptions: PolymorphicForwardRefComponent<"div", TileMoreOptionsOwnProps>;
/**
* Upto two buttons shown at the bottom of the tile.
*/
Buttons: PolymorphicForwardRefComponent<"div", {}>;
};
export {};