{
+ }
+
+ export namespace Styles {
+ interface AutoPrefix {
+ all(styles: React.CSSProperties): React.CSSProperties;
+ set(style: React.CSSProperties, key: string, value: string | number): void;
+ single(key: string): string;
+ singleHyphened(key: string): string;
+ }
+ export var AutoPrefix: AutoPrefix;
+
+ 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;
+ canvasColor?: string;
+ borderColor?: string;
+ disabledColor?: string;
+ alternateTextColor?: string;
+ }
+ interface MuiTheme {
+ rawTheme: RawTheme;
+ static: boolean;
+ appBar?: {
+ color?: string,
+ textColor?: string,
+ height?: number
+ },
+ avatar?: {
+ borderColor?: string;
+ }
+ button?: {
+ height?: number,
+ minWidth?: number,
+ iconButtonSize?: number
+ },
+ checkbox?: {
+ boxColor?: string,
+ checkedColor?: string,
+ requiredColor?: string,
+ disabledColor?: string,
+ labelColor?: string,
+ labelDisabledColor?: string
+ },
+ datePicker?: {
+ color?: string,
+ textColor?: string,
+ calendarTextColor?: string,
+ selectColor?: string,
+ selectTextColor?: string,
+ },
+ dropDownMenu?: {
+ accentColor?: string,
+ },
+ flatButton?: {
+ color?: string,
+ textColor?: string,
+ primaryTextColor?: string,
+ secondaryTextColor?: string,
+ disabledColor?: string
+ },
+ floatingActionButton?: {
+ buttonSize?: number,
+ miniSize?: number,
+ color?: string,
+ iconColor?: string,
+ secondaryColor?: string,
+ secondaryIconColor?: string,
+ disabledColor?: string,
+ disabledTextColor?: string
+ },
+ inkBar?: {
+ backgroundColor?: string;
+ },
+ leftNav?: {
+ width?: number,
+ color?: string,
+ },
+ listItem?: {
+ nestedLevelDepth?: number;
+ },
+ menu?: {
+ backgroundColor?: string,
+ containerBackgroundColor?: string,
+ },
+ menuItem?: {
+ dataHeight?: number,
+ height?: number,
+ hoverColor?: string,
+ padding?: number,
+ selectedTextColor?: string,
+ },
+ menuSubheader?: {
+ padding?: number,
+ borderColor?: string,
+ textColor?: string,
+ },
+ paper?: {
+ backgroundColor?: 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
+ },
+ refreshIndicator?: {
+ strokeColor?: string;
+ loadingStrokeColor?: string;
+ };
+ slider?: {
+ trackSize?: number,
+ trackColor?: string,
+ trackColorSelected?: string,
+ handleSize?: number,
+ handleSizeActive?: number,
+ handleSizeDisabled?: number,
+ handleColorZero?: string,
+ handleFillColor?: string,
+ selectionColor?: string,
+ rippleColor?: string,
+ },
+ snackbar?: {
+ textColor?: string,
+ backgroundColor?: string,
+ actionColor?: string,
+ },
+ table?: {
+ backgroundColor?: string;
+ };
+ tableHeader?: {
+ borderColor?: string;
+ };
+ tableHeaderColumn?: {
+ textColor?: string;
+ };
+ tableFooter?: {
+ borderColor?: string;
+ textColor?: string;
+ };
+ tableRow?: {
+ hoverColor?: string;
+ stripeColor?: string;
+ selectedColor?: string;
+ textColor?: string;
+ borderColor?: string;
+ };
+ tableRowColumn?: {
+ height?: number;
+ spacing?: number;
+ };
+ timePicker?: {
+ color?: string;
+ textColor?: string;
+ accentColor?: string;
+ clockColor?: string;
+ selectColor?: string;
+ selectTextColor?: string;
+ };
+ toggle?: {
+ thumbOnColor?: string,
+ thumbOffColor?: string,
+ thumbDisabledColor?: string,
+ thumbRequiredColor?: string,
+ trackOnColor?: string,
+ trackOffColor?: string,
+ trackDisabledColor?: string,
+ trackRequiredColor?: string,
+ labelColor?: string,
+ labelDisabledColor?: string
+ },
+ toolbar?: {
+ backgroundColor?: string,
+ height?: number,
+ titleFontSize?: number,
+ iconColor?: string,
+ separatorColor?: string,
+ menuHoverColor?: string,
+ };
+ tabs?: {
+ backgroundColor?: string;
+ };
+ textField?: {
+ textColor?: string;
+ hintColor?: string;
+ floatingLabelColor?: string;
+ disabledTextColor?: string;
+ errorColor?: string;
+ focusColor?: string;
+ backgroundColor?: string;
+ borderColor?: string;
+ };
+ isRtl: boolean;
+ }
+
+ interface RawTheme {
+ spacing: Spacing;
+ fontFamily?: string;
+ palette: ThemePalette;
+ }
+
+ export function ThemeDecorator(muiTheme: Styles.MuiTheme): (Component: React.ComponentClass
) => React.ComponentClass
;
+
+ interface ThemeManager {
+ getMuiTheme(rawTheme: RawTheme): MuiTheme;
+ modifyRawThemeSpacing(muiTheme: MuiTheme, newSpacing: Spacing): MuiTheme;
+ modifyRawThemePalette(muiTheme: MuiTheme, newPaletteKeys: ThemePalette): MuiTheme;
+ 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;
+
+ export var DarkRawTheme: RawTheme;
+ export var LightRawTheme: RawTheme;
+ }
+
+ interface SnackbarProps extends React.Props {
+ message: string;
+ action?: string;
+ autoHideDuration?: number;
+ onActionTouchTap?: React.TouchEventHandler;
+ onShow?: () => void;
+ onDismiss?: () => void;
+ openOnMount?: boolean;
+ style?: React.CSSProperties;
+ }
+ export class Snackbar extends React.Component {
+ }
+
+ namespace Tabs {
+ interface TabProps extends React.Props {
+ label?: any;
+ value?: string;
+ selected?: boolean;
+ width?: string;
+ style?: React.CSSProperties;
+
+ // Called by Tabs component
+ onActive?: (tab: Tab) => void;
+
+ onTouchTap?: (value: string, e: TouchTapEvent, tab: Tab) => void;
+ }
+ export class Tab extends React.Component {
+ }
+
+ interface TabsProps extends React.Props {
+ contentContainerStyle?: React.CSSProperties;
+ initialSelectedIndex?: number;
+ inkBarStyle?: React.CSSProperties;
+ style?: React.CSSProperties;
+ tabItemContainerStyle?: React.CSSProperties;
+ tabWidth?: number;
+ value?: string | number;
+ tabTemplate?: __React.ComponentClass;
+
+ onChange?: (value: string | number, e: React.FormEvent, tab: Tab) => void;
+ }
+ export class Tabs extends React.Component {
+ }
+ }
+
+ namespace Table {
+ interface TableProps extends React.Props {
+ allRowsSelected?: boolean;
+ fixedFooter?: boolean;
+ fixedHeader?: boolean;
+ height?: string;
+ multiSelectable?: boolean;
+ onCellClick?: (row: number, column: number) => void;
+ onCellHover?: (row: number, column: number) => void;
+ onCellHoverExit?: (row: number, column: number) => void;
+ onRowHover?: (row: number) => void;
+ onRowHoverExit?: (row: number) => void;
+ onRowSelection?: (selectedRows: number[]) => void;
+ selectable?: boolean;
+ style?: React.CSSProperties;
+ }
+ export class Table extends React.Component {
+ }
+
+ interface TableBodyProps extends React.Props {
+ allRowsSelected?: boolean;
+ deselectOnClickaway?: boolean;
+ displayRowCheckbox?: boolean;
+ multiSelectable?: boolean;
+ onCellClick?: (row: number, column: number) => void;
+ onCellHover?: (row: number, column: number) => void;
+ onCellHoverExit?: (row: number, column: number) => void;
+ onRowHover?: (row: number) => void;
+ onRowHoverExit?: (row: number) => void;
+ onRowSelection?: (selectedRows: number[]) => void;
+ preScanRows?: boolean;
+ selectable?: boolean;
+ showRowHover?: boolean;
+ stripedRows?: boolean;
+ style?: React.CSSProperties;
+ }
+ export class TableBody extends React.Component