{
+ }
+
+ 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 {
+ }
+
+ interface TableFooterProps extends React.Props {
+ adjustForCheckbox?: boolean;
+ style?: React.CSSProperties;
+ }
+ export class TableFooter extends React.Component {
+ }
+
+ interface TableHeaderProps extends React.Props {
+ adjustForCheckbox?: boolean;
+ displaySelectAll?: boolean;
+ enableSelectAll?: boolean;
+ onSelectAll?: (event: React.MouseEvent) => void;
+ selectAllSelected?: boolean;
+ style?: React.CSSProperties;
+ }
+ export class TableHeader extends React.Component {
+ }
+
+ interface TableHeaderColumnProps extends React.Props {
+ columnNumber?: number;
+ onClick?: (e: React.MouseEvent, column: number) => void;
+ tooltip?: string;
+ tooltipStyle?: React.CSSProperties;
+ style?: React.CSSProperties;
+ }
+ export class TableHeaderColumn extends React.Component {
+ }
+
+ interface TableRowProps extends React.Props {
+ displayBorder?: boolean;
+ hoverable?: boolean;
+ onCellClick?: (e: React.MouseEvent, row: number, column: number) => void;
+ onCellHover?: (e: React.MouseEvent, row: number, column: number) => void;
+ onCellHoverExit?: (e: React.MouseEvent, row: number, column: number) => void;
+ onRowClick?: (e: React.MouseEvent, row: number) => void;
+ onRowHover?: (e: React.MouseEvent, row: number) => void;
+ onRowHoverExit?: (e: React.MouseEvent, row: number) => void;
+ rowNumber?: number;
+ selectable?: boolean;
+ selected?: boolean;
+ striped?: boolean;
+ style?: React.CSSProperties;
+ }
+ export class TableRow extends React.Component {
+ }
+
+ interface TableRowColumnProps extends React.Props {
+ columnNumber?: number;
+ colSpan?: number;
+ hoverable?: boolean;
+ onClick?: React.MouseEventHandler;
+ onHover?: (e: React.MouseEvent, column: number) => void;
+ onHoverExit?: (e: React.MouseEvent, column: number) => void;
+ style?: React.CSSProperties;
+ }
+ export class TableRowColumn extends React.Component {
+ }
+ }
+
+ interface ThemeWrapperProps extends React.Props {
+ theme: Styles.MuiTheme;
+ }
+ export class ThemeWrapper extends React.Component {
+ }
+
+ interface ToggleProps extends CommonEnhancedSwitchProps {
+ // is root element
+
+ elementStyle?: React.CSSProperties;
+ labelStyle?: React.CSSProperties;
+ onToggle?: (e: React.MouseEvent, isInputChecked: boolean) => void;
+ toggled?: boolean;
+ defaultToggled?: boolean;
+ }
+ export class Toggle extends React.Component {
+ isToggled(): boolean;
+ setToggled(newToggledValue: boolean): void;
+ }
+
+ interface TimePickerProps extends React.Props {
+ defaultTime?: Date;
+ format?: string;
+ pedantic?: boolean;
+ style?: __React.CSSProperties;
+ textFieldStyle?: __React.CSSProperties;
+ autoOk?: boolean;
+ openDialog?: () => void;
+ onFocus?: React.FocusEventHandler;
+ onTouchTap?: TouchTapEventHandler;
+ onChange?: (e: any, time: Date) => void;
+ onShow?: () => void;
+ onDismiss?: () => void;
+ }
+ export class TimePicker extends React.Component {
+ }
+
+ interface TextFieldProps extends React.Props {
+ errorStyle?: React.CSSProperties;
+ errorText?: string;
+ floatingLabelText?: string;
+ floatingLabelStyle?: React.CSSProperties;
+ fullWidth?: boolean;
+ hintText?: string | React.ReactElement;
+ id?: string;
+ inputStyle?: React.CSSProperties;
+ multiLine?: boolean;
+ onEnterKeyDown?: React.KeyboardEventHandler;
+ style?: React.CSSProperties;
+ rows?: number,
+ underlineStyle?: React.CSSProperties;
+ underlineFocusStyle?: React.CSSProperties;
+ underlineDisabledStyle?: React.CSSProperties;
+ type?: string;
+ hintStyle?: React.CSSProperties;
+
+ disabled?: boolean;
+ isRtl?: boolean;
+ value?: string;
+ defaultValue?: string;
+ valueLink?: ReactLink;
+
+ onBlur?: React.FocusEventHandler;
+ onChange?: React.FormEventHandler;
+ onFocus?: React.FocusEventHandler;
+ onKeyDown?: React.KeyboardEventHandler;
+ }
+ export class TextField extends React.Component {
+ blur(): void;
+ clearValue(): void;
+ focus(): void;
+ getValue(): string;
+ setErrorText(newErrorText: string): void;
+ setValue(newValue: string): void;
+ }
+
+ namespace Toolbar {
+ interface ToolbarProps extends React.Props {
+ style?: React.CSSProperties;
+ }
+ export class Toolbar extends React.Component {
+ }
+
+ interface ToolbarGroupProps extends React.Props {
+ float?: string;
+ style?: React.CSSProperties;
+ }
+ export class ToolbarGroup extends React.Component {
+ }
+
+ interface ToolbarSeparatorProps extends React.Props {
+ style?: React.CSSProperties;
+ }
+ export class ToolbarSeparator extends React.Component {
+ }
+
+ interface ToolbarTitleProps extends React.HTMLAttributes, React.Props {
+ text?: string;
+ style?: React.CSSProperties;
+ }
+ export class ToolbarTitle extends React.Component {
+ }
+ }
+
+ interface TooltipProps extends React.Props {
+ label: string;
+ show?: boolean;
+ touch?: boolean;
+ verticalPosition?: string;
+ horizontalPosition?: string;
+ }
+ export class Tooltip extends React.Component {
+ }
+
+ export namespace Utils {
+ interface ContrastLevel {
+ range: [number, number];
+ color: string;
+ }
+ interface ColorManipulator {
+ fade(color: string, amount: string | number): string;
+ lighten(color: string, amount: string | number): string;
+ darken(color: string, amount: string | number): string;
+ contrastRatio(background: string, foreground: string): number;
+ contrastRatioLevel(background: string, foreground: string): ContrastLevel;
+ }
+ export var ColorManipulator: ColorManipulator;
+
+ interface CssEvent {
+ transitionEndEventName(): string;
+ animationEndEventName(): string;
+ onTransitionEnd(el: Element, callback: () => void): void;
+ onAnimationEnd(el: Element, callback: () => void): void;
+ }
+ export var CssEvent: CssEvent;
+
+ interface Dom {
+ isDescendant(parent: Node, child: Node): boolean;
+ offset(el: Element): { top: number, left: number };
+ getStyleAttributeAsNumber(el: HTMLElement, attr: string): number;
+ addClass(el: Element, className: string): void;
+ removeClass(el: Element, className: string): void;
+ hasClass(el: Element, className: string): boolean;
+ toggleClass(el: Element, className: string): void;
+ forceRedraw(el: HTMLElement): void;
+ withoutTransition(el: HTMLElement, callback: () => void): void;
+ }
+ export var Dom: Dom;
+
+ interface Events {
+ once(el: Element, type: string, callback: EventListener): void;
+ on(el: Element, type: string, callback: EventListener): void;
+ off(el: Element, type: string, callback: EventListener): void;
+ isKeyboard(e: Event): boolean;
+ }
+ export var Events: Events;
+
+ function Extend(base: T, override: S1): (T & S1);
+
+ interface ImmutabilityHelper {
+ merge(base: any, ...args: any[]): any;
+ mergeItem(obj: any, key: any, newValueObject: any): any;
+ push(array: any[], obj: any): any[];
+ shift(array: any[]): any[];
+ }
+ export var ImmutabilityHelper: ImmutabilityHelper;
+
+ interface KeyCode {
+ DOWN: number;
+ ESC: number;
+ ENTER: number;
+ LEFT: number;
+ RIGHT: number;
+ SPACE: number;
+ TAB: number;
+ UP: number;
+ }
+ var KeyCode: KeyCode;
+
+ interface KeyLine {
+ Desktop: {
+ GUTTER: number;
+ GUTTER_LESS: number;
+ INCREMENT: number;
+ MENU_ITEM_HEIGHT: number;
+ };
+
+ getIncrementalDim(dim: number): number;
+ }
+ export var KeyLine: KeyLine;
+
+ interface UniqueId {
+ generate(): string;
+ }
+ export var UniqueId: UniqueId;
+
+ interface Styles {
+ mergeAndPrefix(base: any, ...args: any[]): React.CSSProperties;
+ }
+ export var Styles: Styles;
+ }
+
+ // New menus available only through requiring directly to the end file
+ namespace Menus {
+ interface IconMenuProps extends React.Props {
+ closeOnItemTouchTap?: boolean;
+ desktop?: boolean;
+ iconButtonElement: React.ReactElement;
+ openDirection?: string;
+ menuStyle?: React.CSSProperties;
+ multiple?: boolean;
+ value?: string | Array;
+ width?: string | number;
+ touchTapCloseDelay?: number;
+ style?: React.CSSProperties;
+
+ onKeyboardFocus?: React.FocusEventHandler;
+ onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void;
+ onChange?: (e: React.FormEvent, value: string | Array) => void;
+ }
+ export class IconMenu extends React.Component {
+ }
+
+ interface MenuProps extends React.Props;
-
- // "http://material-ui.com/#/components/left-nav"
+
+ );
- // "http://material-ui.com/#/components/lists"
-
-
- // "http://material-ui.com/#/components/menus"
- element = ;
- element = ;
-
- // "http://material-ui.com/#/components/paper"
-
-
- // "http://material-ui.com/#/components/progress"
-
-
- // "http://material-ui.com/#/components/refresh-indicator"
-
-
- // "http://material-ui.com/#/components/sliders"
-
-
- // "http://material-ui.com/#/components/switches"
- element = ;
- element = ;
- element = }
- unCheckedIcon={}
- label="custom icon" />;
-
- element =
- ;
- ;
-
- ;
-
- element = ;
-
- element = ;
-
- element = ;
-
- // "http://material-ui.com/#/components/snackbar"
-
-
- // "http://material-ui.com/#/components/table"
-
-
- // "http://material-ui.com/#/components/tabs"
-
-
- // "http://material-ui.com/#/components/text-fields"
- element = ;
- element = ;
- element = ;
- element = ;
- element = ('valueLinkValue') } />;
- element = ;
- element = ;
- element = ;
- element = ;
- element = ;
- element = ;
- element = ;
-
- //Select Fields
- let arbitraryArrayMenuItems = [
+ // "http://www.material-ui.com/#/components/grid-list"
+ const tilesData = [
{
- id: 0,
- name: "zero",
- },
- ];
- element = ;
- element = ;
- element = ;
- element = ;
-
- //Floating Hint Text Labels
- element = ;
- element = ;
- element = ;
- element = ('floatingValueLinkValue') } />;
- element = ;
- element = ;
- element = ;
- element = ;
- element = ;
- element = ;
-
-
- // "http://material-ui.com/#/components/time-picker"
+ img: 'images/grid-list/00-52-29-429_640.jpg',
+ title: 'Breakfast',
+ author: 'jill111',
+ featured: false,
+ }];
+ const GridListExampleSimple = () => (
+
+
+ {tilesData.map(tile => (
+ by {tile.author}}
+ actionIcon={}
+ >
+ 
+
+ )) }
+
+
+
+ {tilesData.map(tile => (
+ }
+ actionPosition="left"
+ titlePosition="top"
+ titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
+ cols={tile.featured ? 2 : 1}
+ rows={tile.featured ? 2 : 1}
+ >
+
+
+ )) }
+
+
Children are Required!
;
+
+ // "http://www.material-ui.com/#/components/font-icon"
+ const FontIconExampleSimple = () => (
+
+
+
+
+
+
+
+ );
+
+ const FontIconExampleIcons = () => (
+
+ home
+ flight_takeoff
+ cloud_download
+ videogame_asset
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/svg-icon"
+ const HomeIcon = (props) => (
+
+
+
+ );
+
+ const SvgIconExampleSimple = () => (
+
+
+
+
+
+ );
+ const SvgIconExampleIcons = () => (
+
+ );
+ element = ;
+ element = ;
+ element = home;
+
+
+ // "http://www.material-ui.com/#/components/left-nav"
+ element = (
+
+
+
+
+
+
+
+ );
+ element = (
+
+
+ this.setState(Object.assign({}, this.state, { open })) }
+ >
+
+
+
+
+ );
+ element = (
+
+ );
+
+
+ // "http://material-ui.com/#/components/lists"
+ const ListExampleSimple = () => (
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+ } />
+ } />
+ } />
+ } />
+
+
+
+ }
+ rightIcon={}
+ />
+ }
+ rightIcon={}
+ />
+ }
+ rightIcon={}
+ />
+ }
+ rightIcon={}
+ />
+ }
+ rightIcon={}
+ />
+
+
+
+ }
+ />
+ }
+ />
+
+
+
+ } />
+ } />
+ }
+ initiallyOpen={true}
+ primaryTogglesNestedList={true}
+ nestedItems={[
+ }
+ />,
+ }
+ disabled={true}
+ nestedItems={[
+ } />,
+ ]}
+ />,
+ ]}
+ />
+
+
+ );
+ const iconButtonElement = (
+
+
+
+ );
+ const rightIconMenu = (
+
+
+
+
+
+ );
+ const ListExampleMessages = () => (
+
+
+ }
+ rightIconButton={rightIconMenu}
+ primaryText="Brendan Lim"
+ secondaryText={
+
+ Brunch this weekend?
+ I' ll be in your neighborhood doing errands this weekend.Do you want to grab brunch?
+
+ }
+ secondaryTextLines={2}
+ />
+
+
+
+ }
+ nestedItems={[
+ }
+ />,
+ ]}
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/menu"
+ const MenuExampleSimple = () => (
+
+
+
+
+ );
+ const MenuExampleDisable = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+ >
+
+
+
+
+
+
+ }
+ anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+ >
+
+
+
+
+
+
+ }
+ anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+ >
+
+
+
+
+
+
+ }
+ anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
+ targetOrigin={{ horizontal: 'right', vertical: 'top' }}
+ >
+
+
+
+
+
+
+
+ );
+ element = (
+
+ }
+ onChange={this.handleChangeSingle}
+ value={this.state.valueSingle}
+ >
+
+
+
+
+
+
+ }
+ onChange={this.handleChangeMultiple}
+ value={this.state.valueMultiple}
+ multiple={true}
+ >
+
+
+
+
+
+
+
+
+ );
+ const IconMenuExampleScrollable = () => (
+ }
+ anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+ maxHeight={272}
+ >
+
+
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/dropdown-menu"
+ element =
+
+
+
+
+
+ ;
+ const menuItems = [];
+ element = (
+
+ {menuItems}
+
+ );
+ element = (
+
+
+
+
+
+
+ );
+
+ // "http://material-ui.com/#/components/paper"
+ const PaperExampleSimple = () => (
+
+ );
+ const PaperExampleRounded = () => (
+
+ );
+ const PaperExampleCircle = () => (
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/popover"
+ element = (
+
+ );
+ element = (
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/circular-progress"
+ const CircularProgressExampleSimple = () => (
+
+
+
+
+
+ );
+ element = (
+
+
+
+
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/linear-progress"
+ const LinearProgressExampleSimple = () => (
+
+ );
+ element = (
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/refresh-indicator"
+ const RefreshIndicatorExampleSimple = () => (
+
+
+
+
+
+
+ );
+ const RefreshIndicatorExampleLoading = () => (
+
+
+
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/select-field"
+ element = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ element = (
+
+ {menuItems}
+
+ );
+ element = (
+
+
+
+
+
+
+ );
+ element = (
+
+
+ {menuItems}
+
+
+
+ {menuItems}
+
+
+ );
+ const {value} = this.state;
+ const night = value === 2 || value === 3;
+ element = (
+
+
+ {menuItems}
+
+
+
+ {menuItems}
+
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/slider"
+ const SliderExampleSimple = () => (
+
+
+
+
+
+ );
+ const SliderExampleDisabled = () => (
+
+
+
+
+
+ );
+ const SliderExampleStep = () => (
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/checkbox"
+ const CheckboxExampleSimple = () => (
+
+
+
+
+
}
+ unCheckedIcon={
}
+ label="Custom icon"
+ style={styles.checkbox}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+
+ // "http://www.material-ui.com/#/components/toggle"
+ const ToggleExampleSimple = () => (
+
+
+
+
+
+
+ );
+
+
+ // "http://material-ui.com/#/components/snackbar"
+ element = (
+
+
+
+
+ );
+ element = (
+
+
+
+
+
+
+ );
+
+ // "http://www.material-ui.com/#/components/table"
+ element = (
+
+
+
+ ID
+ Name
+ Status
+
+
+
+
+ 1
+ John Smith
+ Employed
+
+
+ 2
+ Randal White
+ Unemployed
+
+
+ 3
+ Stephanie Sanders
+ Employed
+
+
+ 4
+ Steve Brown
+ Employed
+
+
+
+ );
+ const tableData = [
+ {
+ name: 'John Smith',
+ status: 'Employed',
+ selected: true,
+ },
+ ];
+ element = (
+
+
+
+
+
+ Super Header
+
+
+
+ ID
+ Name
+ Status
+
+
+
+ {tableData.map( (row, index) => (
+
+ {index}
+ {row.name}
+ {row.status}
+
+ ))}
+
+
+
+ ID
+ Name
+ Status
+
+
+
+ Super Footer
+
+
+
+
+
+
+
Table Properties
+
+
+
+
+
+
+ TableBody Properties
+
+
+
+
+
+
Tab One
+
+ This is an example tab.
+
+
+ You can put any sort of HTML or react component in here. It even keeps the component state!
+
+
+
+
Tab Two
+
+ This is another example tab.
+
+
+
Tab Three
+
+ This is a third example tab.
+
+
+
Controllable Tab A
+
+ Tabs are also controllable if you want to programmatically pass them their values.
+ This allows for more functionality in Tabs such as not
+ having any Tab selected or assigning them different values.
+
+
+
Controllable Tab B
+
+ This is another example of a controllable tab. Remember, if you
+ use controllable Tabs, you need to give all of your tabs values or else
+ you wont be able to select them.
+
+
+
+
+
+
+
+
+
+
+
+ );
+ const TextFieldExampleError = () => (
+
+
+
+
+
+
+ );
+ const TextFieldExampleCustomize = () => (
+
+
+
+
+
+
+ );
+ const TextFieldExampleDisabled = () => (
+
+
+
+
+
+
+ );
+ element = ;
+
+
+ // "http://www.material-ui.com/#/components/time-picker"
+ const TimePickerExampleSimple = () => (
+
+
+
+
+ );
+ element = (
+
+ this.picker12hr = t}
+ format="ampm"
+ hintText="12hr Format"
+ onChange={this.handleChangeTimePicker12}
+ />
+ this.picker24hr = t}
+ format="24hr"
+ hintText="24hr Format"
+ onChange={this.handleChangeTimePicker24}
+ />
+
+ );
+
+ // "http://www.material-ui.com/#/components/toolbar"
+ const ToolbarExamplesSimple = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+ );
+
return element;
}
}
diff --git a/material-ui/material-ui-tests.tsx.tscparams b/material-ui/material-ui-tests.tsx.tscparams
new file mode 100644
index 000000000..855355b85
--- /dev/null
+++ b/material-ui/material-ui-tests.tsx.tscparams
@@ -0,0 +1 @@
+--experimentalDecorators
\ No newline at end of file
diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts
index 09d43bb86..d9f3a08d7 100644
--- a/material-ui/material-ui.d.ts
+++ b/material-ui/material-ui.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for material-ui v0.13.4
+// Type definitions for material-ui v0.14.4
// Project: https://github.com/callemall/material-ui
// Definitions by: Nathan Brown , Oliver Herrmann
// Definitions: https://github.com/borisyankov/DefinitelyTyped
@@ -8,6 +8,7 @@
declare module "material-ui" {
export import AppBar = __MaterialUI.AppBar; // require('material-ui/lib/app-bar');
export import AppCanvas = __MaterialUI.AppCanvas; // require('material-ui/lib/app-canvas');
+ export import AutoComplete = __MaterialUI.AutoComplete; // require('material-ui/lib/auto-complete');
export import Avatar = __MaterialUI.Avatar; // require('material-ui/lib/avatar');
export import Badge = __MaterialUI.Badge; // require('material-ui/lib/badge');
export import BeforeAfterWrapper = __MaterialUI.BeforeAfterWrapper; // require('material-ui/lib/before-after-wrapper');
@@ -24,12 +25,13 @@ declare module "material-ui" {
export import DatePicker = __MaterialUI.DatePicker.DatePicker; // require('material-ui/lib/date-picker/date-picker');
export import DatePickerDialog = __MaterialUI.DatePicker.DatePickerDialog; // require('material-ui/lib/date-picker/date-picker-dialog');
export import Dialog = __MaterialUI.Dialog // require('material-ui/lib/dialog');
- export import DropDownIcon = __MaterialUI.DropDownIcon; // require('material-ui/lib/drop-down-icon');
- export import DropDownMenu = __MaterialUI.DropDownMenu; // require('material-ui/lib/drop-down-menu');
+ export import DropDownMenu = __MaterialUI.Menus.DropDownMenu; // require('material-ui/lib/DropDownMenu/DropDownMenu');
export import EnhancedButton = __MaterialUI.EnhancedButton; // require('material-ui/lib/enhanced-button');
export import FlatButton = __MaterialUI.FlatButton; // require('material-ui/lib/flat-button');
export import FloatingActionButton = __MaterialUI.FloatingActionButton; // require('material-ui/lib/floating-action-button');
export import FontIcon = __MaterialUI.FontIcon; // require('material-ui/lib/font-icon');
+ export import GridList = __MaterialUI.GridList.GridList; // require('material-ui/lib/gridlist/grid-list');
+ export import GridTile = __MaterialUI.GridList.GridTile; // require('material-ui/lib/gridlist/grid-tile');
export import IconButton = __MaterialUI.IconButton; // require('material-ui/lib/icon-button');
export import IconMenu = __MaterialUI.Menus.IconMenu; // require('material-ui/lib/menus/icon-menu');
export import LeftNav = __MaterialUI.LeftNav; // require('material-ui/lib/left-nav');
@@ -37,21 +39,22 @@ declare module "material-ui" {
export import List = __MaterialUI.Lists.List; // require('material-ui/lib/lists/list');
export import ListDivider = __MaterialUI.Lists.ListDivider; // require('material-ui/lib/lists/list-divider');
export import ListItem = __MaterialUI.Lists.ListItem; // require('material-ui/lib/lists/list-item');
- export import Menu = __MaterialUI.Menu.Menu; // require('material-ui/lib/menu/menu');
- export import MenuItem = __MaterialUI.Menu.MenuItem; // require('material-ui/lib/menu/menu-item');
- export import Mixins = __MaterialUI.Mixins; // require('material-ui/lib/mixins/');
+ export import Menu = __MaterialUI.Menus.Menu; // require('material-ui/lib/menus/menu');
+ export import MenuItem = __MaterialUI.Menus.MenuItem; // require('material-ui/lib/menus/menu-item');
+ export import Mixins = __MaterialUI.Mixins; // require('material-ui/lib/mixins');
export import Overlay = __MaterialUI.Overlay; // require('material-ui/lib/overlay');
export import Paper = __MaterialUI.Paper; // require('material-ui/lib/paper');
+ export import Popover = __MaterialUI.Popover.Popover; // require('material-ui/lib/popover/popover');
export import RadioButton = __MaterialUI.RadioButton; // require('material-ui/lib/radio-button');
export import RadioButtonGroup = __MaterialUI.RadioButtonGroup; // require('material-ui/lib/radio-button-group');
export import RaisedButton = __MaterialUI.RaisedButton; // require('material-ui/lib/raised-button');
export import RefreshIndicator = __MaterialUI.RefreshIndicator; // require('material-ui/lib/refresh-indicator');
- export import Ripples = __MaterialUI.Ripples; // require('material-ui/lib/ripples/');
+ export import Ripples = __MaterialUI.Ripples; // require('material-ui/lib/ripples');
export import SelectField = __MaterialUI.SelectField; // require('material-ui/lib/select-field');
+ export import SelectableContainerEnhance = __MaterialUI.Hoc.SelectableContainerEnhance; // require('material-ui/lib/hoc/selectable-enhance');
export import Slider = __MaterialUI.Slider; // require('material-ui/lib/slider');
export import SvgIcon = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon');
- export import Icons = __MaterialUI.Icons;
- export import Styles = __MaterialUI.Styles; // require('material-ui/lib/styles/');
+ export import Styles = __MaterialUI.Styles; // require('material-ui/lib/styles');
export import Snackbar = __MaterialUI.Snackbar; // require('material-ui/lib/snackbar');
export import Tab = __MaterialUI.Tabs.Tab; // require('material-ui/lib/tabs/tab');
export import Tabs = __MaterialUI.Tabs.Tabs; // require('material-ui/lib/tabs/tabs');
@@ -62,8 +65,8 @@ declare module "material-ui" {
export import TableHeaderColumn = __MaterialUI.Table.TableHeaderColumn; // require('material-ui/lib/table/table-header-column');
export import TableRow = __MaterialUI.Table.TableRow; // require('material-ui/lib/table/table-row');
export import TableRowColumn = __MaterialUI.Table.TableRowColumn; // require('material-ui/lib/table/table-row-column');
- export import ThemeWrapper = __MaterialUI.ThemeWrapper; // require('material-ui/lib/theme-wrapper');
export import Toggle = __MaterialUI.Toggle; // require('material-ui/lib/toggle');
+ export import ThemeWrapper = __MaterialUI.ThemeWrapper; // require('material-ui/lib/theme-wrapper');
export import TimePicker = __MaterialUI.TimePicker; // require('material-ui/lib/time-picker');
export import TextField = __MaterialUI.TextField; // require('material-ui/lib/text-field');
export import Toolbar = __MaterialUI.Toolbar.Toolbar; // require('material-ui/lib/toolbar/toolbar');
@@ -71,10 +74,18 @@ declare module "material-ui" {
export import ToolbarSeparator = __MaterialUI.Toolbar.ToolbarSeparator; // require('material-ui/lib/toolbar/toolbar-separator');
export import ToolbarTitle = __MaterialUI.Toolbar.ToolbarTitle; // require('material-ui/lib/toolbar/toolbar-title');
export import Tooltip = __MaterialUI.Tooltip; // require('material-ui/lib/tooltip');
- export import Utils = __MaterialUI.Utils; // require('material-ui/lib/utils/');
-
- export import GridList = __MaterialUI.GridList.GridList; // require('material-ui/lib/gridlist/grid-list');
- export import GridTile = __MaterialUI.GridList.GridTile; // require('material-ui/lib/gridlist/grid-tile');
+ export import Utils = __MaterialUI.Utils; // require('material-ui/lib/utils');
+
+ // svg icons
+ import NavigationMenu = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon/navigation/menu');
+ import NavigationChevronLeft = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon/navigation/chevron-left');
+ import NavigationChevronRight = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon/navigation/chevron-right');
+
+ export const Icons: {
+ NavigationMenu: NavigationMenu,
+ NavigationChevronLeft: NavigationChevronLeft,
+ NavigationChevronRight: NavigationChevronRight,
+ };
// export type definitions
export type TouchTapEvent = __MaterialUI.TouchTapEvent;
@@ -83,7 +94,7 @@ declare module "material-ui" {
}
declare namespace __MaterialUI {
- import React = __React;
+ export import React = __React;
// ReactLink is from "react/addons"
interface ReactLink {
@@ -103,756 +114,10 @@ declare namespace __MaterialUI {
// What's common between React.TouchEventHandler and React.MouseEventHandler
interface TouchTapEventHandler extends React.EventHandler { }
- // more specific than React.HTMLAttributes
-
- interface AppBarProps extends React.Props {
- iconClassNameLeft?: string;
- iconClassNameRight?: string;
- iconElementLeft?: React.ReactElement;
- iconElementRight?: React.ReactElement;
- iconStyleRight?: string;
- style?: React.CSSProperties;
- showMenuIconButton?: boolean;
- title?: React.ReactNode;
- zDepth?: number;
-
- onLeftIconButtonTouchTap?: TouchTapEventHandler;
- onRightIconButtonTouchTap?: TouchTapEventHandler;
+ interface ThemeWrapperProps extends React.Props {
+ theme: Styles.MuiTheme;
}
- export class AppBar extends React.Component{
- }
-
- interface AppCanvasProps extends React.Props {
- style?: React.CSSProperties;
- }
- export class AppCanvas extends React.Component {
- }
-
- interface AvatarProps extends React.Props {
- icon?: React.ReactElement;
- backgroundColor?: string;
- color?: string;
- size?: number;
- src?: string;
- style?: React.CSSProperties;
- }
- export class Avatar extends React.Component {
- }
-
- interface BadgeProps extends React.Props {
- badgeContent: React.ReactElement | string | number;
- primary?: boolean;
- secondary?: boolean;
- style?: React.CSSProperties;
- badgeStyle?: React.CSSProperties;
- }
- export class Badge extends React.Component {
- }
-
- interface BeforeAfterWrapperProps extends React.Props {
- beforeStyle?: React.CSSProperties;
- afterStyle?: React.CSSProperties;
- beforeElementType?: string;
- afterElementType?: string;
- elementType?: string;
- }
- export class BeforeAfterWrapper extends React.Component {
- }
-
- namespace Card {
-
- interface CardProps extends React.Props {
- expandable?: boolean;
- initiallyExpanded?: boolean;
- onExpandedChange?: (isExpanded: boolean) => void;
- style?: React.CSSProperties;
- }
- export class Card extends React.Component {
- }
-
- interface CardActionsProps extends React.Props {
- expandable?: boolean;
- showExpandableButton?: boolean;
- style?: React.CSSProperties;
- }
- export class CardActions extends React.Component {
- }
-
- interface CardExpandableProps extends React.Props {
- onExpanding?: (isExpanded: boolean) => void;
- expanded?: boolean;
- style?: React.CSSProperties;
- }
- export class CardExpandable extends React.Component {
- }
-
- interface CardHeaderProps extends React.Props {
- expandable?: boolean;
- showExpandableButton?: boolean;
- title?: string | React.ReactElement;
- titleColor?: string;
- titleStyle?: React.CSSProperties;
- subtitle?: string | React.ReactElement;
- subtitleColor?: string;
- subtitleStyle?: React.CSSProperties;
- textStyle?: React.CSSProperties;
- style?: React.CSSProperties;
- avatar: React.ReactElement | string;
- }
- export class CardHeader extends React.Component {
- }
-
- interface CardMediaProps extends React.Props {
- expandable?: boolean;
- overlay?: React.ReactNode;
- overlayStyle?: React.CSSProperties;
- overlayContainerStyle?: React.CSSProperties;
- overlayContentStyle?: React.CSSProperties;
- mediaStyle?: React.CSSProperties;
- style?: React.CSSProperties;
- }
- export class CardMedia extends React.Component {
- }
-
- interface CardTextProps extends React.Props {
- expandable?: boolean;
- color?: string;
- style?: React.CSSProperties;
- }
- export class CardText extends React.Component {
- }
-
- interface CardTitleProps extends React.Props {
- expandable?: boolean;
- showExpandableButton?: boolean;
- title?: string | React.ReactElement;
- titleColor?: string;
- titleStyle?: React.CSSProperties;
- subtitle?: string | React.ReactElement;
- subtitleColor?: string;
- subtitleStyle?: React.CSSProperties;
- textStyle?: React.CSSProperties;
- style?: React.CSSProperties;
- }
- export class CardTitle extends React.Component {
- }
- }
-
- // what's not commonly overridden by Checkbox, RadioButton, or Toggle
- interface CommonEnhancedSwitchProps extends React.HTMLAttributes, React.Props {
- // is root element
- id?: string;
- iconStyle?: React.CSSProperties;
- labelStyle?: React.CSSProperties;
- rippleStyle?: React.CSSProperties;
- thumbStyle?: React.CSSProperties;
- trackStyle?: React.CSSProperties;
- name?: string;
- value?: string;
- label?: string;
- required?: boolean;
- disabled?: boolean;
- defaultSwitched?: boolean;
- disableFocusRipple?: boolean;
- disableTouchRipple?: boolean;
- }
-
- interface EnhancedSwitchProps extends CommonEnhancedSwitchProps {
- // is root element
- inputType: string;
- switchElement: React.ReactElement;
- onParentShouldUpdate: (isInputChecked: boolean) => void;
- switched: boolean;
- rippleColor?: string;
- onSwitch?: (e: React.MouseEvent, isInputChecked: boolean) => void;
- labelPosition?: string;
- }
- export class EnhancedSwitch extends React.Component {
- isSwitched(): boolean;
- setSwitched(newSwitchedValue: boolean): void;
- getValue(): any;
- isKeyboardFocused(): boolean;
- }
-
- interface CheckboxProps extends CommonEnhancedSwitchProps {
- // is root element
- checkedIcon?: React.ReactElement<{ style?: React.CSSProperties }>; // Normally an SvgIcon
- defaultChecked?: boolean;
- iconStyle?: React.CSSProperties;
- label?: string;
- labelStyle?: React.CSSProperties;
- labelPosition?: string;
- style?: React.CSSProperties;
- checked?: boolean;
- unCheckedIcon?: React.ReactElement<{ style?: React.CSSProperties }>; // Normally an SvgIcon
-
- disabled?: boolean;
- valueLink?: ReactLink;
- checkedLink?: ReactLink;
-
- onCheck?: (event: React.MouseEvent, checked: boolean) => void;
- }
- export class Checkbox extends React.Component {
- isChecked(): void;
- setChecked(newCheckedValue: boolean): void;
- }
-
- interface CircularProgressProps extends React.Props {
- mode?: string;
- value?: number;
- min?: number;
- max?: number;
- size?: number;
- color?: string;
- innerStyle?: React.CSSProperties;
- style?: React.CSSProperties;
-
- }
- export class CircularProgress extends React.Component {
- }
-
- interface ClearFixProps extends React.Props {
- }
- export class ClearFix extends React.Component {
- }
-
- namespace DatePicker {
- interface DatePickerProps extends React.Props {
- autoOk?: boolean;
- defaultDate?: Date;
- formatDate?: (date:Date) => string;
- hintText?: string;
- floatingLabelText?: string;
- hideToolbarYearChange?: boolean;
- maxDate?: Date;
- minDate?: Date;
- mode?: string;
- onDismiss?: () => void;
-
- // e is always null
- onChange?: (e: any, d: Date) => void;
-
- onFocus?: React.FocusEventHandler;
- onShow?: () => void;
- onTouchTap?: React.TouchEventHandler;
- shouldDisableDate?: (day: Date) => boolean;
- showYearSelector?: boolean;
- style?: React.CSSProperties;
- textFieldStyle?: React.CSSProperties;
- }
- export class DatePicker extends React.Component {
- }
-
- interface DatePickerDialogProps extends React.Props {
- disableYearSelection?: boolean;
- initialDate?: Date;
- maxDate?: Date;
- minDate?: Date;
- onAccept?: (d: Date) => void;
- onClickAway?: () => void;
- onDismiss?: () => void;
- onShow?: () => void;
- shouldDisableDate?: (day: Date) => boolean;
- showYearSelector?: boolean;
- }
- export class DatePickerDialog extends React.Component {
- }
- }
-
- export interface DialogAction {
- id?: string;
- text: string;
- ref?: string;
-
- onTouchTap?: TouchTapEventHandler;
- onClick?: React.MouseEventHandler;
- }
- interface DialogProps extends React.Props