declarations
Version:
[](https://www.npmjs.com/package/declarations)
1,292 lines (1,213 loc) • 364 kB
TypeScript
// Type definitions for material-ui v0.15.1
// Project: https://github.com/callemall/material-ui
// Definitions by: Nathan Brown <https://github.com/ngbrown>, Oliver Herrmann <https://github.com/herrmanno>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
///<reference path='../react/react.d.ts' />
declare module "material-ui" {
export import AppBar = __MaterialUI.AppBar;
export import AutoComplete = __MaterialUI.AutoComplete;
export import Avatar = __MaterialUI.Avatar;
export import Badge = __MaterialUI.Badge;
export import Card = __MaterialUI.Card.Card;
export import CardActions = __MaterialUI.Card.CardActions;
export import CardHeader = __MaterialUI.Card.CardHeader;
export import CardMedia = __MaterialUI.Card.CardMedia;
export import CardText = __MaterialUI.Card.CardText;
export import CardTitle = __MaterialUI.Card.CardTitle;
export import Checkbox = __MaterialUI.Switches.Checkbox;
export import Chip = __MaterialUI.Chip;
export import CircularProgress = __MaterialUI.CircularProgress;
export import DatePicker = __MaterialUI.DatePicker.DatePicker;
export import Dialog = __MaterialUI.Dialog;
export import Divider = __MaterialUI.Divider;
export import Drawer = __MaterialUI.Drawer;
export import DropDownMenu = __MaterialUI.Menus.DropDownMenu;
export import FlatButton = __MaterialUI.FlatButton;
export import FloatingActionButton = __MaterialUI.FloatingActionButton;
export import FontIcon = __MaterialUI.FontIcon;
export import GridList = __MaterialUI.GridList.GridList;
export import GridTile = __MaterialUI.GridList.GridTile;
export import IconButton = __MaterialUI.IconButton;
export import IconMenu = __MaterialUI.Menus.IconMenu;
export import LinearProgress = __MaterialUI.LinearProgress;
export import List = __MaterialUI.List.List;
export import ListItem = __MaterialUI.List.ListItem;
export import MakeSelectable = __MaterialUI.List.MakeSelectable;
export import Menu = __MaterialUI.Menus.Menu;
export import MenuItem = __MaterialUI.Menus.MenuItem;
export import Paper = __MaterialUI.Paper;
export import Popover = __MaterialUI.Popover.Popover;
export import RadioButton = __MaterialUI.Switches.RadioButton;
export import RadioButtonGroup = __MaterialUI.Switches.RadioButtonGroup;
export import RaisedButton = __MaterialUI.RaisedButton;
export import RefreshIndicator = __MaterialUI.RefreshIndicator;
export import SelectField = __MaterialUI.SelectField;
export import Slider = __MaterialUI.Slider;
export import Subheader = __MaterialUI.Subheader;
export import SvgIcon = __MaterialUI.SvgIcon;
export import Step = __MaterialUI.Stepper.Step;
export import StepButton = __MaterialUI.Stepper.StepButton;
export import StepContent = __MaterialUI.Stepper.StepContent;
export import StepLabel = __MaterialUI.Stepper.StepLabel;
export import Stepper = __MaterialUI.Stepper;
export import Snackbar = __MaterialUI.Snackbar;
export import Tab = __MaterialUI.Tabs.Tab;
export import Tabs = __MaterialUI.Tabs.Tabs;
export import Table = __MaterialUI.Table.Table;
export import TableBody = __MaterialUI.Table.TableBody;
export import TableFooter = __MaterialUI.Table.TableFooter;
export import TableHeader = __MaterialUI.Table.TableHeader;
export import TableHeaderColumn = __MaterialUI.Table.TableHeaderColumn;
export import TableRow = __MaterialUI.Table.TableRow;
export import TableRowColumn = __MaterialUI.Table.TableRowColumn;
export import TextField = __MaterialUI.TextField;
export import TimePicker = __MaterialUI.TimePicker;
export import Toggle = __MaterialUI.Switches.Toggle;
export import Toolbar = __MaterialUI.Toolbar.Toolbar;
export import ToolbarGroup = __MaterialUI.Toolbar.ToolbarGroup;
export import ToolbarSeparator = __MaterialUI.Toolbar.ToolbarSeparator;
export import ToolbarTitle = __MaterialUI.Toolbar.ToolbarTitle;
// export type definitions
export type TouchTapEvent = __MaterialUI.TouchTapEvent;
export type TouchTapEventHandler = __MaterialUI.TouchTapEventHandler;
}
declare namespace __MaterialUI {
export import React = __React;
// ReactLink is from "react/addons"
interface ReactLink<T> {
value: T;
requestChange(newValue: T): void;
}
// What's common between React.TouchEvent and React.MouseEvent
interface TouchTapEvent extends React.SyntheticEvent {
altKey: boolean;
ctrlKey: boolean;
getModifierState(key: string): boolean;
metaKey: boolean;
shiftKey: boolean;
}
// What's common between React.TouchEventHandler and React.MouseEventHandler
interface TouchTapEventHandler extends React.EventHandler<TouchTapEvent> { }
interface ThemeWrapperProps extends React.Props<ThemeWrapper> {
theme: Styles.MuiTheme;
}
export class ThemeWrapper extends React.Component<ThemeWrapperProps, {}> {
}
export namespace Styles {
interface Spacing {
iconSize?: number;
desktopGutter?: number;
desktopGutterMore?: number;
desktopGutterLess?: number;
desktopGutterMini?: number;
desktopKeylineIncrement?: number;
desktopDropDownMenuItemHeight?: number;
desktopDropDownMenuFontSize?: number;
desktopLeftNavMenuItemHeight?: number;
desktopSubheaderHeight?: number;
desktopToolbarHeight?: number;
}
export var Spacing: Spacing;
interface ThemePalette {
primary1Color?: string;
primary2Color?: string;
primary3Color?: string;
accent1Color?: string;
accent2Color?: string;
accent3Color?: string;
textColor?: string;
alternateTextColor?: string;
canvasColor?: string;
borderColor?: string;
disabledColor?: string;
pickerHeaderColor?: string;
clockCircleColor?: string;
shadowColor?: string;
}
interface MuiTheme {
spacing?: Spacing;
fontFamily?: string;
palette?: ThemePalette;
isRtl?: boolean;
userAgent?: string;
zIndex?: zIndex;
baseTheme?: RawTheme;
rawTheme?: RawTheme;
appBar?: {
color?: string;
textColor?: string;
height?: number;
titleFontWeight?: number;
padding?: number;
};
avatar?: {
color?: string;
backgroundColor?: string;
borderColor?: string;
};
badge?: {
color?: string;
textColor?: string;
primaryColor?: string;
primaryTextColor?: string;
secondaryColor?: string;
secondaryTextColor?: string;
fontWeight?: number;
};
button?: {
height?: number;
minWidth?: number;
iconButtonSize?: number;
};
card?: {
titleColor?: string;
subtitleColor?: string;
fontWeight?: number;
};
cardMedia?: {
color?: string;
overlayContentBackground?: string;
titleColor?: string;
subtitleColor?: string;
};
cardText?: {
textColor?: string;
};
checkbox?: {
boxColor?: string;
checkedColor?: string;
requiredColor?: string;
disabledColor?: string;
labelColor?: string;
labelDisabledColor?: string;
};
chip?: {
backgroundColor?: string;
deleteIconColor?: string;
textColor?: string;
fontSize?: number;
fontWeight?: number;
shadow?: string;
};
datePicker?: {
color?: string;
textColor?: string;
calendarTextColor?: string;
selectColor?: string;
selectTextColor?: string;
calendarYearBackgroundColor?: string;
};
dialog?: {
titleFontSize?: number;
bodyFontSize?: number;
bodyColor?: string;
};
dropDownMenu?: {
accentColor?: string;
};
enhancedButton?: {
tapHighlightColor?: string;
};
flatButton?: {
color?: string;
buttonFilterColor?: string;
disabledTextColor?: string;
textColor?: string;
primaryTextColor?: string;
secondaryTextColor?: string;
fontSize?: number;
fontWeight?: number;
};
floatingActionButton?: {
buttonSize?: number;
miniSize?: number;
color?: string;
iconColor?: string;
secondaryColor?: string;
secondaryIconColor?: string;
disabledTextColor?: string;
disabledColor?: string;
};
gridTile?: {
textColor?: string;
};
icon?: {
color?: string;
backgroundColor?: string;
};
inkBar?: {
backgroundColor?: string;
};
drawer?: {
width?: number;
color?: string;
};
listItem?: {
nestedLevelDepth?: number;
secondaryTextColor?: string;
leftIconColor?: string;
rightIconColor?: string;
};
menu?: {
backgroundColor?: string;
containerBackgroundColor?: string;
};
menuItem?: {
dataHeight?: number;
height?: number;
hoverColor?: string;
padding?: number;
selectedTextColor?: string;
rightIconDesktopFill?: string;
};
menuSubheader?: {
padding?: number;
borderColor?: string;
textColor?: string;
};
overlay?: {
backgroundColor?: string;
};
paper?: {
color?: string;
backgroundColor?: string;
zDepthShadows?: string[];
};
radioButton?: {
borderColor?: string;
backgroundColor?: string;
checkedColor?: string;
requiredColor?: string;
disabledColor?: string;
size?: number;
labelColor?: string;
labelDisabledColor?: string;
};
raisedButton?: {
color?: string;
textColor?: string;
primaryColor?: string;
primaryTextColor?: string;
secondaryColor?: string;
secondaryTextColor?: string;
disabledColor?: string;
disabledTextColor?: string;
fontSize?: number;
fontWeight?: number;
};
refreshIndicator?: {
strokeColor?: string;
loadingStrokeColor?: string;
};
ripple?: {
color?: string;
};
slider?: {
trackSize?: number;
trackColor?: string;
trackColorSelected?: string;
handleSize?: number;
handleSizeDisabled?: number;
handleSizeActive?: number;
handleColorZero?: string;
handleFillColor?: string;
selectionColor?: string;
rippleColor?: string;
};
snackbar?: {
textColor?: string;
backgroundColor?: string;
actionColor?: string;
};
subheader?: {
color?: string;
fontWeight?: number;
};
stepper?: {
backgroundColor?: string;
hoverBackgroundColor?: string;
iconColor?: string;
hoveredIconColor?: string;
inactiveIconColor?: string;
textColor?: string;
disabledTextColor?: string;
connectorLineColor?: string;
};
table?: {
backgroundColor?: string;
};
tableFooter?: {
borderColor?: string;
textColor?: string;
};
tableHeader?: {
borderColor?: string;
};
tableHeaderColumn?: {
textColor?: string;
height?: number;
spacing?: number;
};
tableRow?: {
hoverColor?: string;
stripeColor?: string;
selectedColor?: string;
textColor?: string;
borderColor?: string;
height?: number;
};
tableRowColumn?: {
height?: number;
spacing?: number;
};
tabs?: {
backgroundColor?: string;
textColor?: string;
selectedTextColor?: string;
};
textField?: {
textColor?: string;
hintColor?: string;
floatingLabelColor?: string;
disabledTextColor?: string;
errorColor?: string;
focusColor?: string;
backgroundColor?: string;
borderColor?: string;
};
timePicker?: {
color?: string;
textColor?: string;
accentColor?: string;
clockColor?: string;
clockCircleColor?: string;
headerColor?: string;
selectColor?: string;
selectTextColor?: string;
};
toggle?: {
thumbOnColor?: string;
thumbOffColor?: string;
thumbDisabledColor?: string;
thumbRequiredColor?: string;
trackOnColor?: string;
trackOffColor?: string;
trackDisabledColor?: string;
labelColor?: string;
labelDisabledColor?: string;
trackRequiredColor?: string;
};
toolbar?: {
color?: string;
hoverColor?: string;
backgroundColor?: string;
height?: number;
titleFontSize?: number;
iconColor?: string;
separatorColor?: string;
menuHoverColor?: string;
};
tooltip?: {
color?: string;
rippleBackgroundColor?: string;
};
}
interface zIndex {
menu: number;
appBar: number;
drawerOverlay: number;
drawer: number;
dialogOverlay: number;
dialog: number;
layer: number;
popover: number;
snackbar: number;
tooltip: number;
}
export var zIndex: zIndex;
interface RawTheme {
spacing?: Spacing;
fontFamily?: string;
palette?: ThemePalette;
}
var lightBaseTheme: RawTheme;
var darkBaseTheme: RawTheme;
export function muiThemeable<TComponent extends React.Component<P, S>, P, S>(): (component: TComponent) => TComponent;
//** @deprecated use MuiThemeProvider instead **/
export function themeDecorator(muiTheme: Styles.MuiTheme): <TFunction extends Function>(Component: TFunction) => TFunction;
interface MuiThemeProviderProps extends React.Props<MuiThemeProvider> {
muiTheme?: Styles.MuiTheme;
}
export class MuiThemeProvider extends React.Component<MuiThemeProviderProps, {}>{
}
export function getMuiTheme(...muiTheme: MuiTheme[]): MuiTheme;
interface ThemeManager {
//** @deprecated ThemeManager is deprecated. please import getMuiTheme directly from "material-ui/styles/getMuiTheme" **/
getMuiTheme(baseTheme: RawTheme, muiTheme?: MuiTheme): MuiTheme;
//** @deprecated modifyRawThemeSpacing is deprecated. please use getMuiTheme to modify your theme directly. http://www.material-ui.com/#/customization/themes **/
modifyRawThemeSpacing(muiTheme: MuiTheme, newSpacing: Spacing): MuiTheme;
//** @deprecated modifyRawThemePalette is deprecated. please use getMuiTheme to modify your theme directly. http://www.material-ui.com/#/customization/themes **/
modifyRawThemePalette(muiTheme: MuiTheme, newPaletteKeys: ThemePalette): MuiTheme;
//** @deprecated modifyRawThemeFontFamily is deprecated. please use getMuiTheme to modify your theme directly. http://www.material-ui.com/#/customization/themes **/
modifyRawThemeFontFamily(muiTheme: MuiTheme, newFontFamily: string): MuiTheme;
}
export var ThemeManager: ThemeManager;
interface Transitions {
easeOut(duration?: string, property?: string | string[], delay?: string, easeFunction?: string): string;
create(duration?: string, property?: string, delay?: string, easeFunction?: string): string;
easeOutFunction: string;
easeInOutFunction: string;
}
export var Transitions: Transitions;
interface Typography {
textFullBlack: string;
textDarkBlack: string;
textLightBlack: string;
textMinBlack: string;
textFullWhite: string;
textDarkWhite: string;
textLightWhite: string;
// font weight
fontWeightLight: number;
fontWeightNormal: number;
fontWeightMedium: number;
fontStyleButtonFontSize: number;
}
export var Typography: Typography;
//** @deprecated use darkBaseTheme instead **/
export var DarkRawTheme: RawTheme;
//** @deprecated use lightBaseTheme instead **/
export var LightRawTheme: RawTheme;
}
interface AppBarProps extends React.Props<AppBar> {
className?: string;
iconClassNameLeft?: string;
iconClassNameRight?: string;
iconElementLeft?: React.ReactElement<any>;
iconElementRight?: React.ReactElement<any>;
iconStyleRight?: React.CSSProperties;
iconStyleLeft?: React.CSSProperties;
onLeftIconButtonTouchTap?: TouchTapEventHandler;
onRightIconButtonTouchTap?: TouchTapEventHandler;
onTitleTouchTap?: TouchTapEventHandler;
showMenuIconButton?: boolean;
style?: React.CSSProperties;
title?: React.ReactNode;
titleStyle?: React.CSSProperties;
zDepth?: number;
}
export class AppBar extends React.Component<AppBarProps, {}>{
}
interface AppCanvasProps extends React.Props<AppCanvas> {
}
export class AppCanvas extends React.Component<AppCanvasProps, {}> {
}
namespace propTypes {
type horizontal = 'left' | 'middle' | 'right';
type vertical = 'top' | 'center' | 'bottom';
type direction = 'left' | 'right' | 'up' | 'down';
interface origin {
horizontal: horizontal;
vertical: vertical;
}
type corners = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
type cornersAndCenter = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
}
type AutoCompleteDataItem = { text: string, value: React.ReactNode } | string;
type AutoCompleteDataSource = { text: string, value: React.ReactNode }[] | string[];
interface AutoCompleteProps extends React.Props<AutoComplete> {
anchorOrigin?: propTypes.origin;
animated?: boolean;
dataSource: AutoCompleteDataSource;
disableFocusRipple?: boolean;
errorStyle?: React.CSSProperties;
errorText?: string;
filter?: (searchText: string, key: string, item: AutoCompleteDataItem) => boolean;
floatingLabelText?: React.ReactNode;
fullWidth?: boolean;
hintText?: string;
listStyle?: React.CSSProperties;
maxSearchResults?: number;
menuCloseDelay?: number;
menuProps?: any;
menuStyle?: React.CSSProperties;
onBlur?: React.FocusEventHandler;
onFocus?: React.FocusEventHandler;
onKeyDown?: React.KeyboardEventHandler;
onNewRequest?: (chosenRequest: string, index: number) => void;
onUpdateInput?: (searchText: string, dataSource: AutoCompleteDataSource) => void;
open?: boolean;
openOnFocus?: boolean;
searchText?: string;
style?: React.CSSProperties;
targetOrigin?: propTypes.origin;
/** @deprecated Instead, use openOnFocus */
triggerUpdateOnFocus?: boolean;
}
export class AutoComplete extends React.Component<AutoCompleteProps, {}> {
static noFilter: () => boolean;
static defaultFilter: (searchText: string, key: string) => boolean;
static caseSensitiveFilter: (searchText: string, key: string) => boolean;
static caseInsensitiveFilter: (searchText: string, key: string) => boolean;
static levenshteinDistanceFilter(distanceLessThan: number): (searchText: string, key: string) => boolean;
static fuzzyFilter: (searchText: string, key: string) => boolean;
static Item: Menus.MenuItem;
static Divider: Divider;
}
interface AvatarProps extends React.Props<Avatar> {
backgroundColor?: string;
className?: string;
color?: string;
icon?: React.ReactElement<any>;
size?: number;
src?: string;
style?: React.CSSProperties;
}
export class Avatar extends React.Component<AvatarProps, {}> {
}
interface BadgeProps extends React.Props<Badge> {
badgeContent: React.ReactNode;
badgeStyle?: React.CSSProperties;
className?: string;
primary?: boolean;
secondary?: boolean;
style?: React.CSSProperties;
}
export class Badge extends React.Component<BadgeProps, {}> {
}
interface BeforeAfterWrapperProps extends React.Props<BeforeAfterWrapper> {
afterElementType?: string;
afterStyle?: React.CSSProperties;
beforeElementType?: string;
beforeStyle?: React.CSSProperties;
elementType?: string;
style?: React.CSSProperties;
}
export class BeforeAfterWrapper extends React.Component<BeforeAfterWrapperProps, {}> {
}
// non generally overridden elements of EnhancedButton
interface SharedEnhancedButtonProps<T> extends React.Props<T> {
centerRipple?: boolean;
disableFocusRipple?: boolean;
disableKeyboardFocus?: boolean;
disableTouchRipple?: boolean;
focusRippleColor?: string;
focusRippleOpacity?: number;
keyboardFocused?: boolean;
linkButton?: boolean;
onBlur?: React.FocusEventHandler;
onFocus?: React.FocusEventHandler;
onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void;
onKeyDown?: React.KeyboardEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onTouchTap?: TouchTapEventHandler;
onClick?: React.MouseEventHandler;
style?: React.CSSProperties;
tabIndex?: number;
touchRippleColor?: string;
touchRippleOpacity?: number;
type?: string;
containerElement?: React.ReactNode | string;
}
interface EnhancedButtonProps extends React.HTMLAttributes, SharedEnhancedButtonProps<EnhancedButton> {
// container element, <button/>, or <span/>(if disabled link) is the element that get the 'other' properties
containerElement?: React.ReactNode | string;
disabled?: boolean;
}
export class EnhancedButton extends React.Component<EnhancedButtonProps, {}> {
}
interface FlatButtonProps extends React.DOMAttributes, SharedEnhancedButtonProps<FlatButton> {
// <EnhancedButton/> is the element that get the 'other' properties
backgroundColor?: string;
disabled?: boolean;
hoverColor?: string;
href?: string;
icon?: React.ReactNode;
label?: React.ReactNode;
labelPosition?: "before" | "after";
labelStyle?: React.CSSProperties;
linkButton?: boolean;
onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onTouchStart?: React.TouchEventHandler;
primary?: boolean;
rippleColor?: string;
secondary?: boolean;
style?: React.CSSProperties;
}
export class FlatButton extends React.Component<FlatButtonProps, {}> {
}
interface RaisedButtonProps extends SharedEnhancedButtonProps<RaisedButton> {
// <EnhancedButton/> is the element that get the 'other' properties
backgroundColor?: string;
className?: string;
disabled?: boolean;
disabledBackgroundColor?: string;
disabledLabelColor?: string;
fullWidth?: boolean;
href?: string;
icon?: React.ReactNode;
label?: React.ReactNode;
labelColor?: string;
labelPosition?: "before" | "after";
labelStyle?: React.CSSProperties;
linkButton?: boolean;
onMouseDown?: React.MouseEventHandler;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onMouseUp?: React.MouseEventHandler;
onTouchEnd?: React.TouchEventHandler;
onTouchStart?: React.TouchEventHandler;
primary?: boolean;
rippleStyle?: React.CSSProperties;
secondary?: boolean;
style?: React.CSSProperties;
}
export class RaisedButton extends React.Component<RaisedButtonProps, {}> {
}
interface FloatingActionButtonProps extends React.HTMLAttributes, SharedEnhancedButtonProps<FloatingActionButton> {
// <EnhancedButton/> is the element that get the 'other' properties
backgroundColor?: string;
className?: string;
disabled?: boolean;
disabledColor?: string;
href?: string;
iconClassName?: string;
iconStyle?: React.CSSProperties;
linkButton?: boolean;
mini?: boolean;
onMouseDown?: React.MouseEventHandler;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onMouseUp?: React.MouseEventHandler;
onTouchEnd?: React.TouchEventHandler;
onTouchStart?: React.TouchEventHandler;
secondary?: boolean;
style?: React.CSSProperties;
zDepth?: number;
}
export class FloatingActionButton extends React.Component<FloatingActionButtonProps, {}> {
}
interface IconButtonProps extends React.HTMLAttributes, SharedEnhancedButtonProps<IconButton> {
// <EnhancedButton/> is the element that get the 'other' properties
className?: string;
disableTouchRipple?: boolean;
disabled?: boolean;
iconClassName?: string;
iconStyle?: React.CSSProperties;
onBlur?: React.FocusEventHandler;
onFocus?: React.FocusEventHandler;
onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onMouseOut?: React.MouseEventHandler;
style?: React.CSSProperties;
tooltip?: string;
tooltipPosition?: propTypes.cornersAndCenter;
tooltipStyles?: React.CSSProperties;
touch?: boolean;
}
export class IconButton extends React.Component<IconButtonProps, {}> {
}
namespace Card {
interface CardProps extends React.Props<Card> {
actAsExpander?: boolean;
containerStyle?: React.CSSProperties;
expandable?: boolean;
expanded?: boolean;
initiallyExpanded?: boolean;
onExpandChange?: (isExpanded: boolean) => void;
showExpandableButton?: boolean;
style?: React.CSSProperties;
}
export class Card extends React.Component<CardProps, {}> {
}
interface CardActionsProps extends React.Props<CardActions> {
actAsExpander?: boolean;
expandable?: boolean;
showExpandableButton?: boolean;
style?: React.CSSProperties;
}
export class CardActions extends React.Component<CardActionsProps, {}> {
}
interface CardExpandableProps extends React.Props<CardExpandable> {
expanded?: boolean;
onExpanding?: (isExpanded: boolean) => void;
style?: React.CSSProperties;
}
export class CardExpandable extends React.Component<CardExpandableProps, {}> {
}
interface CardHeaderProps extends React.Props<CardHeader> {
actAsExpander?: boolean;
avatar?: React.ReactNode;
expandable?: boolean;
showExpandableButton?: boolean;
style?: React.CSSProperties;
subtitle?: React.ReactNode;
subtitleColor?: string;
subtitleStyle?: React.CSSProperties;
textStyle?: React.CSSProperties;
title?: React.ReactNode;
titleColor?: string;
titleStyle?: React.CSSProperties;
}
export class CardHeader extends React.Component<CardHeaderProps, {}> {
}
interface CardMediaProps extends React.Props<CardMedia> {
actAsExpander?: boolean;
expandable?: boolean;
mediaStyle?: React.CSSProperties;
overlay?: React.ReactNode;
overlayContainerStyle?: React.CSSProperties;
overlayContentStyle?: React.CSSProperties;
overlayStyle?: React.CSSProperties;
style?: React.CSSProperties;
}
export class CardMedia extends React.Component<CardMediaProps, {}> {
}
interface CardTextProps extends React.Props<CardText> {
actAsExpander?: boolean;
color?: string;
expandable?: boolean;
style?: React.CSSProperties;
}
export class CardText extends React.Component<CardTextProps, {}> {
}
interface CardTitleProps extends React.Props<CardTitle> {
actAsExpander?: boolean;
expandable?: boolean;
showExpandableButton?: boolean;
style?: React.CSSProperties;
subtitle?: React.ReactNode;
subtitleColor?: string;
subtitleStyle?: React.CSSProperties;
title?: React.ReactNode;
titleColor?: string;
titleStyle?: React.CSSProperties;
}
export class CardTitle extends React.Component<CardTitleProps, {}> {
}
}
interface ChipProps extends React.Props<Chip> {
backgroundColor?: string;
className?: string;
labelColor?: string;
labelStyle?: React.CSSProperties;
onRequestDelete?: React.TouchEventHandler;
onTouchTap?: React.TouchEventHandler;
style?: React.CSSProperties;
}
export class Chip extends React.Component<ChipProps, {}> {
}
namespace DatePicker {
interface DatePickerProps extends React.Props<DatePicker> {
// <TextField/> is the element that get the 'other' properties
DateTimeFormat?: Intl.DateTimeFormat;
autoOk?: boolean;
cancelLabel?: React.ReactNode;
container?: "dialog" | "inline";
defaultDate?: Date;
disableYearSelection?: boolean;
disabled?: boolean;
firstDayOfWeek?: number;
formatDate?: (date: Date) => string;
locale?: string;
maxDate?: Date;
minDate?: Date;
mode?: "portrait" | "landscape";
okLabel?: React.ReactNode;
onChange?: (e: any, date: Date) => void; // e is always null
onDismiss?: () => void;
onFocus?: React.FocusEventHandler;
onShow?: () => void;
onTouchTap?: React.TouchEventHandler;
shouldDisableDate?: (day: Date) => boolean;
style?: React.CSSProperties;
textFieldStyle?: React.CSSProperties;
value?: Date;
/** @deprecated use cancelLabel and okLabel instead */
wordings?: {ok: string, cancel: string};
// From <TextField />
className?: string;
defaultValue?: string;
errorStyle?: React.CSSProperties;
errorText?: React.ReactNode;
floatingLabelStyle?: React.CSSProperties;
floatingLabelText?: React.ReactNode;
fullWidth?: boolean;
hintStyle?: React.CSSProperties;
hintText?: React.ReactNode;
id?: string;
inputStyle?: React.CSSProperties;
name?: string;
onBlur?: React.FocusEventHandler;
onKeyDown?: React.KeyboardEventHandler;
type?: string;
underlineDisabledStyle?: React.CSSProperties;
underlineFocusStyle?: React.CSSProperties;
underlineShow?: boolean;
underlineStyle?: React.CSSProperties;
}
export class DatePicker extends React.Component<DatePickerProps, {}> {
}
interface DatePickerDialogProps extends React.Props<DatePickerDialog> {
// <Container/> is the element that get the 'other' properties
DateTimeFormat?: Intl.DateTimeFormat;
autoOk?: boolean;
cancelLabel?: React.ReactNode;
container?: "dialog" | "inline";
disableYearSelection?: boolean;
firstDayOfWeek?: number;
initialDate?: Date;
locale?: string;
maxDate?: Date;
minDate?: Date;
mode?: "portrait" | "landscape";
okLabel?: React.ReactNode;
onAccept?: (d: Date) => void;
onDismiss?: () => void;
onShow?: () => void;
shouldDisableDate?: (day: Date) => boolean;
style?: React.CSSProperties;
wordings?: { ok: string, cancel: string };
}
export class DatePickerDialog extends React.Component<DatePickerDialogProps, {}> {
}
}
interface DialogProps extends React.DOMAttributes, React.Props<Dialog> {
actions?: React.ReactElement<any> | React.ReactElement<any>[];
actionsContainerClassName?: string;
actionsContainerStyle?: React.CSSProperties;
autoDetectWindowHeight?: boolean;
autoScrollBodyContent?: boolean;
bodyClassName?: string;
bodyStyle?: React.CSSProperties;
className?: string;
contentClassName?: string;
contentStyle?: React.CSSProperties;
modal?: boolean;
onRequestClose?: (buttonClicked: boolean) => void;
open: boolean;
overlayClassName?: string;
overlayStyle?: React.CSSProperties;
repositionOnUpdate?: boolean;
style?: React.CSSProperties;
title?: React.ReactNode;
titleClassName?: string;
titleStyle?: React.CSSProperties;
}
export class Dialog extends React.Component<DialogProps, {}> {
}
interface DividerProps extends React.Props<Divider> {
className?: string;
inset?: boolean;
style?: React.CSSProperties;
}
export class Divider extends React.Component<DividerProps, {}>{
}
interface DrawerProps extends React.Props<Drawer> {
className?: string;
containerClassName?: string;
containerStyle?: React.CSSProperties;
disableSwipeToOpen?: boolean;
docked?: boolean;
onRequestChange?: (opening: boolean, reason: string) => void;
open?: boolean;
openSecondary?: Boolean;
overlayClassName?: string;
overlayStyle?: React.CSSProperties;
style?: React.CSSProperties;
swipeAreaWidth?: number;
width?: number;
zDepth?: number;
}
export class Drawer extends React.Component<DrawerProps, {}> {
}
namespace GridList {
interface GridListProps extends React.Props<GridList> {
cellHeight?: number;
cols?: number;
padding?: number;
style?: React.CSSProperties;
}
export class GridList extends React.Component<GridListProps, {}>{
}
interface GridTileProps extends React.Props<GridTile> {
actionIcon?: React.ReactElement<any>;
actionPosition?: "left" | "right";
cols?: number;
containerElement?: string | React.ReactElement<any> | React.ComponentClass<any>;
rows?: number;
style?: React.CSSProperties;
subtitle?: React.ReactNode;
title?: React.ReactNode;
titleBackground?: string;
titlePosition?: "top" | "bottom";
}
export class GridTile extends React.Component<GridTileProps, {}>{
}
}
interface FontIconProps extends React.HTMLAttributes, React.Props<FontIcon> {
// <span/> is the element that get the 'other' properties
color?: string;
hoverColor?: string;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
style?: React.CSSProperties;
}
export class FontIcon extends React.Component<FontIconProps, {}> {
}
interface SvgIconProps extends React.SVGAttributes, React.Props<SvgIcon> {
// <svg/> is the element that get the 'other' properties
color?: string;
hoverColor?: string;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
style?: React.CSSProperties;
viewBox?: string;
}
export class SvgIcon extends React.Component<SvgIconProps, {}> {
}
namespace List {
interface ListProps extends React.Props<List> {
// <Paper/> is the element that get the 'other' properties
/** @deprecated nest the Subheader component directly inside the List instead */
insetSubheader?: boolean;
style?: React.CSSProperties;
/** @deprecated nest the Subheader component directly inside the List instead */
subheader?: string;
/** @deprecated nest the Subheader component directly inside the List instead */
subheaderStyle?: React.CSSProperties;
/** @deprecated wrap it in `Paper` or another component that provides zDepth instead */
zDepth?: number;
}
export class List extends React.Component<ListProps, {}> {
}
interface ListItemProps extends React.HTMLAttributes, React.Props<ListItem> {
// <EnhancedButton/> is the element that get the 'other' properties
autoGenerateNestedIndicator?: boolean;
disableKeyboardFocus?: boolean;
disabled?: boolean;
initiallyOpen?: boolean;
innerDivStyle?: React.CSSProperties;
insetChildren?: boolean;
leftAvatar?: React.ReactElement<any>;
leftCheckbox?: React.ReactElement<any>;
leftIcon?: React.ReactElement<any>;
nestedItems?: React.ReactElement<ListItemProps>[];
nestedLevel?: number;
nestedListStyle?: React.CSSProperties;
onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onNestedListToggle?: (item: ListItem) => void;
onTouchStart?: React.TouchEventHandler;
onTouchTap?: TouchTapEventHandler;
primaryText?: React.ReactNode;
primaryTogglesNestedList?: boolean;
rightAvatar?: React.ReactElement<any>;
rightIcon?: React.ReactElement<any>;
rightIconButton?: React.ReactElement<any>;
rightToggle?: React.ReactElement<any>;
secondaryText?: React.ReactNode;
secondaryTextLines?: number; // 1 or 2
style?: React.CSSProperties;
}
export class ListItem extends React.Component<ListItemProps, {}> {
}
interface SelectableProps {
onChange?: (e: TouchTapEvent, value: any) => void;
selectedItemStyle?: React.CSSProperties;
value?: any;
/** @deprecated use the value and onChange property instead */
valueLink?: { value: any; requestChange: (e: TouchTapEvent, value: any) => void };
}
// union types for higher order components in TypeScript 1.8: https://github.com/Microsoft/TypeScript/issues/4362
export function MakeSelectable<P extends {}>(component: React.ComponentClass<P>): React.ComponentClass<P & SelectableProps>;
}
namespace Menus {
interface MenuProps extends React.Props<Menu> {
// <List/> is the element that get the 'other' properties
/** @deprecated Instead, use a Popover */
animated?: boolean;
autoWidth?: boolean;
desktop?: boolean;
disableAutoFocus?: boolean;
initiallyKeyboardFocused?: boolean;
listStyle?: React.CSSProperties;
maxHeight?: number;
multiple?: boolean;
onChange?: (e: TouchTapEvent, itemValue: any | any[]) => void;
onEscKeyDown?: React.KeyboardEventHandler;
onItemTouchTap?: (e: TouchTapEvent, item: MenuItem) => void;
onKeyDown?: React.KeyboardEventHandler;
/** @deprecated Instead, use a Popover */
openDirection?: propTypes.corners;
selectedMenuItemStyle?: React.CSSProperties;
style?: React.CSSProperties;
value?: any | any[];
valueLink?: ReactLink<any | any[]>;
width?: string | number;
/** @deprecated wrap it in `Paper` or another component that provides zDepth instead */
zDepth?: number;
}
export class Menu extends React.Component<MenuProps, {}>{
}
interface MenuItemProps extends React.HTMLAttributes, React.Props<MenuItem> {
// <ListItem/> is the element that get the 'other' properties
checked?: boolean;
desktop?: boolean;
disabled?: boolean;
focusState?: string; // 'none', 'focused', or 'keyboard-focused'
innerDivStyle?: React.CSSProperties;
insetChildren?: boolean;
leftIcon?: React.ReactElement<any>;
menuItems?: React.ReactNode;
onTouchTap?: TouchTapEventHandler;
rightIcon?: React.ReactElement<any>;
secondaryText?: React.ReactNode;
style?: React.CSSProperties;
value?: any;
// useful attributes passed to <ListItem/>
primaryText?: React.ReactNode;
secondaryTextLines?: number; // 1 or 2
}
export class MenuItem extends React.Component<MenuItemProps, {}>{
}
interface IconMenuProps extends React.Props<IconMenu> {
// <Menu/> is the element that get the 'other' properties
anchorOrigin?: propTypes.origin;
className?: string;
iconButtonElement: React.ReactElement<IconButtonProps>;
iconStyle?: React.CSSProperties;
menuStyle?: React.CSSProperties;
onItemTouchTap?: (e: TouchTapEvent, item: MenuItem) => void;
onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void;
onMouseDown?: React.MouseEventHandler;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
onMouseUp?: React.MouseEventHandler;
onRequestChange?: (opening: boolean, reason: string) => void;
onTouchTap?: TouchTapEventHandler;
open?: boolean;
style?: React.CSSProperties;
targetOrigin?: propTypes.origin;
touchTapCloseDelay?: number;
useLayerForClickAway?: boolean;
animated?: boolean;
autoWidth?: boolean;
desktop?: boolean;
listStyle?: React.CSSProperties;
maxHeight?: number;
multiple?: boolean;
onChange?: (e: TouchTapEvent, itemValue: any | any[]) => void;
onKeyDown?: React.KeyboardEventHandler;
/** @deprecated Instead, use a Popover */
openDirection?: string;
selectedMenuItemStyle?: React.CSSProperties;
value?: any | any[];
valueLink?: ReactLink<any | any[]>;
width?: string | number;
}
export class IconMenu extends React.Component<IconMenuProps, {}> {
}
interface DropDownMenuProps extends React.Props<DropDownMenu> {
// <div/> is the element that gets the 'other' properties
animated?: boolean;
autoWidth?: boolean;
className?: string;
disabled?: boolean;
iconStyle?: React.CSSProperties;
labelStyle?: React.CSSProperties;
listStyle?: React.CSSProperties;
maxHeight?: number;
menuStyle?: React.CSSProperties;
onChange?: (e: TouchTapEvent, index: number, menuItemValue: any) => void;
openImmediately?: boolean;
style?: React.CSSProperties;
underlineStyle?: React.CSSProperties;
value?: any;
}
export class DropDownMenu extends React.Component<DropDownMenuProps, {}> {
}
}
interface PaperProps extends React.HTMLAttributes, React.Props<Paper> {
circle?: boolean;
rounded?: boolean;
style?: React.CSSProperties;
transitionEnabled?: boolean;
zDepth?: number;
}
export class Paper extends React.Component<PaperProps, {}> {
}
namespace Popover {
interface PopoverAnimationProps {
open: boolean;
style?: React.CSSProperties;
}
interface PopoverProps extends React.Props<Popover> {
anchorEl?: React.ReactInstance;
anchorOrigin?: propTypes.origin;
animated?: boolean;
animation?: React.ComponentClass<PopoverAnimationProps>;
autoCloseWhenOffScreen?: boolean;
canAutoPosition?: boolean;
className?: string;
onRequestClose?: (reason: string) => void;
open?: boolean;
style?: React.CSSProperties;
targetOrigin?: propTypes.origin;
useLayerForClickAway?: boolean;
zDepth?: number;
}
export class Popover extends React.Component<PopoverProps, {}>{
}
interface PopoverAnimationVerticalProps extends PopoverAnimationProps, React.Props<PopoverAnimationVertical> {
className?: string;
targetOrigin?: propTypes.origin;
zDepth?: number;
}
export class PopoverAnimationVertical extends React.Component<PopoverAnimationVerticalProps, {}>{
}
interface PopoverAnimationDefaultProps extends PopoverAnimationProps, React.Props<PopoverAnimationDefault> {
className?: string;
targetOrigin?: propTypes.origin;
zDepth?: number;
}
export class PopoverAnimationDefault extends React.Component<PopoverAnimationDefaultProps, {}>{
}
}
interface CircularProgressProps extends React.Props<CircularProgress> {
color?: string;
innerStyle?: React.CSSProperties;
max?: number;
min?: number;
mode?: "determinate" | "indeterminate";
size?: number;
style?: React.CSSProperties;
value?: number;
}
export class CircularProgress extends React.Component<CircularProgressProps, {}> {
}
interface LinearProgressProps extends React.Props<LinearProgress> {
color?: string;
max?: number;
min?: number;
mode?: "determinate" | "indeterminate";
style?: React.CSSProperties;
value?: number;
}
export class LinearProgress extends React.Component<LinearProgressProps, {}> {
}
interface RefreshIndicatorProps extends React.Props<RefreshIndicator> {
color?: string;
left: number;
loadingColor?: string;
percentage?: number;
size?: number;
status?: "ready" | "loading" | "hide";
style?: React.CSSProperties;
top: number;
}
export class RefreshIndicator extends React.Component<RefreshIndicatorProps, {}>