mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
Merge pull request #6060 from use-strict/material-ui-0-12
material-ui - updated definitions for v0.12.1
This commit is contained in:
Masahiro Wakame
@@ -0,0 +1,476 @@
|
||||
///<reference path='../../react/react.d.ts' />
|
||||
///<reference path='material-ui-0.11.1.d.ts' />
|
||||
|
||||
import * as React from "react/addons";
|
||||
import mui = require("material-ui");
|
||||
import Colors = require("material-ui/lib/styles/colors");
|
||||
import AppBar = require("material-ui/lib/app-bar");
|
||||
import IconButton = require("material-ui/lib/icon-button");
|
||||
import FlatButton = require("material-ui/lib/flat-button");
|
||||
import Avatar = require("material-ui/lib/avatar");
|
||||
import FontIcon = require("material-ui/lib/font-icon");
|
||||
import Typography = require("material-ui/lib/styles/typography");
|
||||
import RaisedButton = require("material-ui/lib/raised-button");
|
||||
import FloatingActionButton = require("material-ui/lib/floating-action-button");
|
||||
import Card = require("material-ui/lib/card/card");
|
||||
import CardHeader = require("material-ui/lib/card/card-header");
|
||||
import CardText = require("material-ui/lib/card/card-text");
|
||||
import CardActions = require("material-ui/lib/card/card-actions");
|
||||
import Dialog = require("material-ui/lib/dialog");
|
||||
import DropDownMenu = require("material-ui/lib/drop-down-menu");
|
||||
import RadioButtonGroup = require("material-ui/lib/radio-button-group");
|
||||
import RadioButton = require("material-ui/lib/radio-button");
|
||||
import Toggle = require("material-ui/lib/toggle");
|
||||
import TextField = require("material-ui/lib/text-field");
|
||||
import SelectField = require("material-ui/lib/select-field");
|
||||
import IconMenu = require("material-ui/lib/menus/icon-menu");
|
||||
import Menu = require('material-ui/lib/menus/menu');
|
||||
import MenuItem = require('material-ui/lib/menus/menu-item');
|
||||
import MenuDivider = require('material-ui/lib/menus/menu-divider');
|
||||
|
||||
import NavigationClose = require("material-ui/lib/svg-icon"); // TODO: Should actually import the actual "material-ui/lib/svg-icons/navigation/close", but they aren't defined yet.
|
||||
import FileFolder = require("material-ui/lib/svg-icon"); // TODO: Should actually import the actual "material-ui/lib/svg-icons/file/folder", but they aren't defined yet.
|
||||
import ToggleStar = require("material-ui/lib/svg-icon"); // TODO: Should actually import the actual "material-ui/lib/svg-icons/toggle/star", but they aren't defined yet.
|
||||
import ActionGrade = require("material-ui/lib/svg-icon"); // TODO: Should actually import the actual "material-ui/lib/svg-icons/action/grade", but they aren't defined yet.
|
||||
import ToggleStarBorder = require("material-ui/lib/svg-icon"); // TODO: Should actually import the actual "material-ui/lib/svg-icons/toggle/star-border", but they aren't defined yet.
|
||||
import ArrowDropRight = require("material-ui/lib/svg-icon"); // TODO: Should actually import the actual "material-ui/lib/svg-icons/toggle/star-border", but they aren't defined yet.
|
||||
|
||||
class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedStateMixin {
|
||||
|
||||
// injected with mixin
|
||||
linkState: <T>(key: string) => React.ReactLink<T>;
|
||||
dialog: mui.Dialog;
|
||||
//dialog2: Dialog; // can't get type directly from require("material-ui/lib/dialog");
|
||||
|
||||
private touchTapEventHandler(e: __MaterialUI.TouchTapEvent) {
|
||||
this.dialog.show();
|
||||
//this.dialog2.show();
|
||||
}
|
||||
private formEventHandler(e: React.FormEvent) {
|
||||
}
|
||||
private selectFieldChangeHandler(e: __MaterialUI.TouchTapEvent, si: number, mi: any) {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
// "http://material-ui.com/#/customization/themes"
|
||||
let ThemeManager = new mui.Styles.ThemeManager();
|
||||
ThemeManager.setTheme(ThemeManager.types.LIGHT);
|
||||
ThemeManager.setTheme(ThemeManager.types.DARK);
|
||||
let muiTheme = ThemeManager.getCurrentTheme();
|
||||
ThemeManager.setComponentThemes({
|
||||
toggle: {
|
||||
thumbOnColor: "#00bcd4",
|
||||
trackOnColor: "LightCyan",
|
||||
}
|
||||
});
|
||||
|
||||
// "http://material-ui.com/#/customization/inline-styles"
|
||||
let Checkbox = mui.Checkbox;
|
||||
let element: React.ReactElement<any>;
|
||||
element = <Checkbox
|
||||
id="checkboxId1"
|
||||
name="checkboxName1"
|
||||
value="checkboxValue1"
|
||||
label="went for a run today"
|
||||
style={{
|
||||
width: '50%',
|
||||
margin: '0 auto'
|
||||
}}
|
||||
iconStyle={{
|
||||
fill: '#FF4081'
|
||||
}}/>
|
||||
element = React.createElement<__MaterialUI.CheckboxProps>(Checkbox, {
|
||||
id: "checkboxId1", name: "checkboxName1", value: "checkboxValue1", label: "went for a run today", style: {
|
||||
width: '50%',
|
||||
margin: '0 auto'
|
||||
}, iconStyle: {
|
||||
fill: '#FF4081'
|
||||
}
|
||||
});
|
||||
|
||||
// "http://material-ui.com/#/customization/colors"
|
||||
ThemeManager.setComponentThemes({
|
||||
toggle: {
|
||||
thumbOnColor: Colors.cyan200,
|
||||
thumbOffColor: Colors.grey400,
|
||||
}
|
||||
});
|
||||
|
||||
// "http://material-ui.com/#/components/appbar"
|
||||
element = <AppBar
|
||||
title="Title"
|
||||
iconClassNameRight="muidocs-icon-navigation-expand-more" />
|
||||
element = <AppBar
|
||||
title="Title"
|
||||
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
|
||||
iconElementRight={<FlatButton label="Save" />} />;
|
||||
|
||||
// "http://material-ui.com/#/components/avatars"
|
||||
//image avatar
|
||||
element = <Avatar src="images/uxceo-128.jpg" />;
|
||||
//SvgIcon avatar
|
||||
element = <Avatar icon={<FileFolder />} />;
|
||||
//SvgIcon avatar with custom colors
|
||||
element = <Avatar
|
||||
icon={<FileFolder />}
|
||||
color={Colors.orange200}
|
||||
backgroundColor={Colors.pink400} />;
|
||||
//FontIcon avatar
|
||||
element = <Avatar
|
||||
icon={
|
||||
<FontIcon className="muidocs-icon-communication-voicemail" />
|
||||
} />;
|
||||
//FontIcon avatar with custom colors
|
||||
element = <Avatar
|
||||
icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
|
||||
color={Colors.blue300}
|
||||
backgroundColor={Colors.indigo900} />;
|
||||
//Letter avatar
|
||||
element = <Avatar>A</Avatar>;
|
||||
//Letter avatar with custom colors
|
||||
element = <Avatar
|
||||
color={Colors.deepOrange300}
|
||||
backgroundColor={Colors.purple500}>
|
||||
</Avatar>
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/buttons"
|
||||
element = <FlatButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
|
||||
<FontIcon style={{ color: Typography.textFullWhite }} className="muidocs-icon-custom-github"/>
|
||||
</FlatButton>;
|
||||
element = <RaisedButton linkButton={true} href="https://github.com/callemall/material-ui" secondary={true} label="GitHub">
|
||||
<FontIcon style={{ color: Typography.textFullWhite }} className="muidocs-icon-custom-github"/>
|
||||
</RaisedButton>;
|
||||
element = <FloatingActionButton secondary={true} mini={true} linkButton={true}
|
||||
href="https://github.com/callemall/material-ui" >
|
||||
<ToggleStar />
|
||||
</FloatingActionButton>;
|
||||
|
||||
// "http://material-ui.com/#/components/cards"
|
||||
element = <Card initiallyExpanded={true}>
|
||||
<CardHeader
|
||||
title="Title"
|
||||
subtitle="Subtitle"
|
||||
avatar={<Avatar style={{ color: 'red' }}>A</Avatar>}
|
||||
showExpandableButton={true}>
|
||||
</CardHeader>
|
||||
<CardText expandable={true}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</CardText>
|
||||
<CardActions expandable={true}>
|
||||
<FlatButton label="Action1"/>
|
||||
<FlatButton label="Action2"/>
|
||||
</CardActions>
|
||||
<CardText expandable={true}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</CardText>
|
||||
</Card>;
|
||||
|
||||
// "http://material-ui.com/#/components/date-picker"
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/dialog"
|
||||
let standardActions = [
|
||||
{ text: 'Cancel' },
|
||||
{ text: 'Submit', onTouchTap: this.touchTapEventHandler, ref: 'submit' }
|
||||
];
|
||||
|
||||
element = <Dialog
|
||||
title="Dialog With Standard Actions"
|
||||
actions={standardActions}
|
||||
actionFocus="submit"
|
||||
modal={true}>
|
||||
The actions in this window are created from the json that's passed in.
|
||||
</Dialog>;
|
||||
|
||||
//Custom Actions
|
||||
let customActions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
secondary={true}
|
||||
onTouchTap={this.touchTapEventHandler} />,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onTouchTap={this.touchTapEventHandler} />
|
||||
];
|
||||
|
||||
element = <Dialog
|
||||
title="Dialog With Custom Actions"
|
||||
actions={customActions}
|
||||
modal={false}
|
||||
autoDetectWindowHeight={true}
|
||||
autoScrollBodyContent={true}>
|
||||
The actions in this window were passed in as an array of react objects.
|
||||
</Dialog>;
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/dropdown-menu"
|
||||
let menuItems = [
|
||||
{ payload: '1', text: 'Never' },
|
||||
{ payload: '2', text: 'Every Night' },
|
||||
{ payload: '3', text: 'Weeknights' },
|
||||
{ payload: '4', text: 'Weekends' },
|
||||
{ payload: '5', text: 'Weekly' },
|
||||
];
|
||||
element = <DropDownMenu menuItems={menuItems} />;
|
||||
|
||||
// "http://material-ui.com/#/components/icons"
|
||||
element = <FontIcon className= "material-icons" color= { Colors.red500 } > home</FontIcon>;
|
||||
|
||||
// "http://material-ui.com/#/components/icon-buttons"
|
||||
//Method 1: muidocs-icon-github is defined in a style sheet.
|
||||
element = <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/>;
|
||||
//Method 2: ActionGrade is a component created using mui.SvgIcon.
|
||||
element = <IconButton tooltip= "Star" touch= { true}>
|
||||
<ActionGrade/>
|
||||
</IconButton >;
|
||||
//Method 3: Manually creating a mui.FontIcon component within IconButton
|
||||
element = <IconButton tooltip= "Sort" disabled= {true}>
|
||||
<FontIcon className="muidocs-icon-custom-sort"/>
|
||||
</IconButton>;
|
||||
//Method 4: Using Google material-icons
|
||||
element = <IconButton iconClassName="material-icons" tooltipPosition="bottom-center"
|
||||
tooltip="Sky">settings_system_daydream</IconButton>;
|
||||
|
||||
// "http://material-ui.com/#/components/icon-menus"
|
||||
element = <IconMenu iconButtonElement={<IconButton />}>
|
||||
<MenuItem primaryText="Refresh" />
|
||||
<MenuItem primaryText="Send feedback" />
|
||||
<MenuItem primaryText="Settings" />
|
||||
<MenuItem primaryText="Help" />
|
||||
<MenuItem primaryText="Sign out" />
|
||||
</IconMenu>;
|
||||
|
||||
// "http://material-ui.com/#/components/left-nav"
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/lists"
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/menus"
|
||||
element = <Menu>
|
||||
<MenuItem primaryText="Maps" />
|
||||
<MenuItem primaryText="Books" />
|
||||
<MenuItem primaryText="Flights" />
|
||||
<MenuItem primaryText="Apps" />
|
||||
</Menu>;
|
||||
element = <Menu desktop={true} width={320}>
|
||||
<MenuItem primaryText="Bold" secondaryText="⌘B" />
|
||||
<MenuItem primaryText="Italic" secondaryText="⌘I" />
|
||||
<MenuItem primaryText="Underline" secondaryText="⌘U" />
|
||||
<MenuItem primaryText="Strikethrough" secondaryText="Alt+Shift+5" />
|
||||
<MenuItem primaryText="Superscript" secondaryText="⌘." />
|
||||
<MenuItem primaryText="Subscript" secondaryText="⌘," />
|
||||
<MenuDivider />
|
||||
<MenuItem primaryText="Paragraph styles" rightIcon={<ArrowDropRight />} />
|
||||
<MenuItem primaryText="Align" rightIcon={<ArrowDropRight />} />
|
||||
<MenuItem primaryText="Line spacing" rightIcon={<ArrowDropRight />} />
|
||||
<MenuItem primaryText="Numbered list" rightIcon={<ArrowDropRight />} />
|
||||
<MenuItem primaryText="List options" rightIcon={<ArrowDropRight />} />
|
||||
<MenuDivider />
|
||||
<MenuItem primaryText="Clear formatting" secondaryText="⌘/" />
|
||||
</Menu>;
|
||||
|
||||
// "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 = <Checkbox
|
||||
name="checkboxName2"
|
||||
value="checkboxValue2"
|
||||
label="fed the dog"
|
||||
defaultChecked={true}/>;
|
||||
element = <Checkbox
|
||||
name = "checkboxName3"
|
||||
value = "checkboxValue3"
|
||||
label = "built a house on the moon"
|
||||
disabled = {true}/>;
|
||||
element = <Checkbox
|
||||
name="checkboxName4"
|
||||
value="checkboxValue4"
|
||||
checkedIcon={<ToggleStar />}
|
||||
unCheckedIcon={<ToggleStarBorder />}
|
||||
label="custom icon" />;
|
||||
|
||||
element = <RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
|
||||
<RadioButton
|
||||
value="light"
|
||||
label="prepare for light speed"
|
||||
style={{ marginBottom: 16 }} />;
|
||||
<RadioButton
|
||||
value="not_light"
|
||||
label="light speed too slow"
|
||||
style={{ marginBottom: 16 }}/>;
|
||||
<RadioButton
|
||||
value="ludicrous"
|
||||
label="go to ludicrous speed"
|
||||
style={{ marginBottom: 16 }}
|
||||
disabled={true}/>
|
||||
</RadioButtonGroup>;
|
||||
|
||||
element = <Toggle
|
||||
name="toggleName1"
|
||||
value="toggleValue1"
|
||||
label="activate thrusters"/>;
|
||||
|
||||
element = <Toggle
|
||||
name = "toggleName2"
|
||||
value = "toggleValue2"
|
||||
label = "auto-pilot"
|
||||
defaultToggled = { true}/>;
|
||||
|
||||
element = <Toggle
|
||||
name="toggleName3"
|
||||
value="toggleValue3"
|
||||
label="initiate self-destruct sequence"
|
||||
disabled={true}/>;
|
||||
|
||||
// "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 = <TextField
|
||||
hintText="Hint Text" />;
|
||||
element = <TextField
|
||||
hintText="Hint Text"
|
||||
defaultValue="Default Value" />;
|
||||
element = <TextField
|
||||
hintText = "Hint Text"
|
||||
value = { "value" }
|
||||
underlineStyle = {{ borderColor: Colors.green500 }}
|
||||
onChange = { this.formEventHandler } />;
|
||||
element = <TextField
|
||||
hintText="Custom Underline Focus Color"
|
||||
underlineFocusStyle={{ borderColor: Colors.amber900 }} />;
|
||||
element = <TextField
|
||||
hintText = "Hint Text"
|
||||
valueLink = { this.linkState<string>('valueLinkValue') } />;
|
||||
element = <TextField
|
||||
hintText="Hint Text (MultiLine)"
|
||||
multiLine={true} />;
|
||||
element = <TextField
|
||||
hintText = "The hint text can be as long as you want, it will wrap."
|
||||
multiLine = { true} />;
|
||||
element = <TextField
|
||||
hintText="Hint Text"
|
||||
errorText="The error text can be as long as you want, it will wrap." />;
|
||||
element = <TextField
|
||||
hintText = "Hint Text"
|
||||
errorText = { "error text" }
|
||||
onChange = { this.formEventHandler } />;
|
||||
element = <TextField
|
||||
hintText="Hint Text (custom error color)"
|
||||
errorText={"error text"}
|
||||
errorStyle={{ color: 'orange' }}
|
||||
onChange={ this.formEventHandler }
|
||||
defaultValue="Custom error color" />;
|
||||
element = <TextField
|
||||
hintText = "Disabled Hint Text"
|
||||
disabled = { true} />;
|
||||
element = <TextField
|
||||
hintText="Disabled Hint Text"
|
||||
disabled={true}
|
||||
defaultValue="Disabled With Value" />;
|
||||
|
||||
//Select Fields
|
||||
let arbitraryArrayMenuItems = [
|
||||
{
|
||||
id: 0,
|
||||
name: "zero",
|
||||
},
|
||||
];
|
||||
element = <SelectField
|
||||
value = { 0 }
|
||||
onChange = { this.selectFieldChangeHandler }
|
||||
hintText = "Hint Text"
|
||||
menuItems = { menuItems } />;
|
||||
element = <SelectField
|
||||
valueLink={this.linkState('selectValueLinkValue') }
|
||||
floatingLabelText="Float Label Text"
|
||||
valueMember="id"
|
||||
displayMember="name"
|
||||
menuItems={arbitraryArrayMenuItems} />;
|
||||
element = <SelectField
|
||||
valueLink = { this.linkState('selectValueLinkValue2') }
|
||||
floatingLabelText = "Float Custom Label Text"
|
||||
floatingLabelStyle = {{ color: "red" }}
|
||||
valueMember = "id"
|
||||
displayMember = "name"
|
||||
menuItems = { arbitraryArrayMenuItems } />;
|
||||
element = <SelectField
|
||||
value={0}
|
||||
onChange={ this.selectFieldChangeHandler }
|
||||
menuItems={arbitraryArrayMenuItems} />;
|
||||
|
||||
//Floating Hint Text Labels
|
||||
element = <TextField
|
||||
hintText = "Hint Text"
|
||||
floatingLabelText = "Floating Label Text" />;
|
||||
element = <TextField
|
||||
hintText="Hint Text"
|
||||
defaultValue="Default Value"
|
||||
floatingLabelText="Floating Label Text" />;
|
||||
element = <TextField
|
||||
hintText = "Hint Text"
|
||||
floatingLabelText = "Floating Label Text"
|
||||
value = { "value" }
|
||||
onChange = { this.formEventHandler } />;
|
||||
element = <TextField
|
||||
hintText="Hint Text"
|
||||
floatingLabelText="Floating Label Text"
|
||||
valueLink={this.linkState<string>('floatingValueLinkValue') } />;
|
||||
element = <TextField
|
||||
hintText = "Hint Text (MultiLine)"
|
||||
floatingLabelText = "Floating Label Text"
|
||||
multiLine = { true} />;
|
||||
element = <TextField
|
||||
hintText="Hint Text"
|
||||
errorText={"floating text"}
|
||||
floatingLabelText="Floating Label Text"
|
||||
onChange={this.formEventHandler } />;
|
||||
element = <TextField
|
||||
hintText = "Hint Text"
|
||||
errorText = { "error text" }
|
||||
defaultValue = "abc"
|
||||
floatingLabelText = "Floating Label Text"
|
||||
onChange = { this.formEventHandler } />;
|
||||
element = <TextField
|
||||
hintText="Disabled Hint Text"
|
||||
disabled={true}
|
||||
floatingLabelText="Floating Label Text" />;
|
||||
element = <TextField
|
||||
hintText = "Disabled Hint Text"
|
||||
disabled = { true}
|
||||
defaultValue = "Disabled With Value"
|
||||
floatingLabelText = "Floating Label Text" />;
|
||||
element = <TextField
|
||||
hintText="Password Field"
|
||||
floatingLabelText="Password"
|
||||
type="password" />;
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/time-picker"
|
||||
|
||||
|
||||
// "http://material-ui.com/#/components/toolbars"
|
||||
|
||||
return element;
|
||||
}
|
||||
}
|
||||
+2096
File diff suppressed because it is too large
Load Diff
@@ -54,14 +54,13 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta
|
||||
render() {
|
||||
|
||||
// "http://material-ui.com/#/customization/themes"
|
||||
let ThemeManager = new mui.Styles.ThemeManager();
|
||||
ThemeManager.setTheme(ThemeManager.types.LIGHT);
|
||||
ThemeManager.setTheme(ThemeManager.types.DARK);
|
||||
let muiTheme = ThemeManager.getCurrentTheme();
|
||||
ThemeManager.setComponentThemes({
|
||||
toggle: {
|
||||
thumbOnColor: "#00bcd4",
|
||||
trackOnColor: "LightCyan",
|
||||
let ThemeManager = mui.Styles.ThemeManager;
|
||||
let muiTheme: mui.Styles.MuiTheme = ThemeManager.getMuiTheme({
|
||||
palette: {
|
||||
accent1Color: Colors.cyan100
|
||||
},
|
||||
spacing: {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
@@ -89,14 +88,6 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta
|
||||
}
|
||||
});
|
||||
|
||||
// "http://material-ui.com/#/customization/colors"
|
||||
ThemeManager.setComponentThemes({
|
||||
toggle: {
|
||||
thumbOnColor: Colors.cyan200,
|
||||
thumbOffColor: Colors.grey400,
|
||||
}
|
||||
});
|
||||
|
||||
// "http://material-ui.com/#/components/appbar"
|
||||
element = <AppBar
|
||||
title="Title"
|
||||
|
||||
Vendored
+118
-49
@@ -1,4 +1,4 @@
|
||||
// Type definitions for material-ui v0.11.1
|
||||
// Type definitions for material-ui v0.12.1
|
||||
// Project: https://github.com/callemall/material-ui
|
||||
// Definitions by: Nathan Brown <https://github.com/ngbrown>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
@@ -72,7 +72,7 @@ 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 Theme = __MaterialUI.Theme; // require('material-ui/lib/theme');
|
||||
export import ThemeWrapper = __MaterialUI.ThemeWrapper; // require('material-ui/lib/theme-wrapper');
|
||||
export import Toggle = __MaterialUI.Toggle; // require('material-ui/lib/toggle');
|
||||
export import TimePicker = __MaterialUI.TimePicker; // require('material-ui/lib/time-picker');
|
||||
export import TextField = __MaterialUI.TextField; // require('material-ui/lib/text-field');
|
||||
@@ -319,7 +319,7 @@ declare namespace __MaterialUI {
|
||||
minDate?: Date;
|
||||
mode?: string;
|
||||
onDismiss?: () => void;
|
||||
|
||||
|
||||
// e is always null
|
||||
onChange?: (e: any, d: Date) => void;
|
||||
|
||||
@@ -350,6 +350,7 @@ declare namespace __MaterialUI {
|
||||
}
|
||||
|
||||
export interface DialogAction {
|
||||
id?: string;
|
||||
text: string;
|
||||
ref?: string;
|
||||
|
||||
@@ -672,7 +673,7 @@ declare namespace __MaterialUI {
|
||||
labelPosition?: string;
|
||||
style?: React.CSSProperties;
|
||||
value?: string;
|
||||
|
||||
|
||||
onCheck?: (e: React.FormEvent, selected: string) => void;
|
||||
}
|
||||
export class RadioButton extends React.Component<RadioButtonProps, {}> {
|
||||
@@ -843,23 +844,29 @@ declare namespace __MaterialUI {
|
||||
desktopToolbarHeight?: number;
|
||||
}
|
||||
interface ThemePalette {
|
||||
primary1Color?: string,
|
||||
primary2Color?: string,
|
||||
primary3Color?: string,
|
||||
accent1Color?: string,
|
||||
accent2Color?: string,
|
||||
accent3Color?: string,
|
||||
textColor?: string,
|
||||
canvasColor?: string,
|
||||
borderColor?: string,
|
||||
disabledColor?: string
|
||||
primary1Color?: string;
|
||||
primary2Color?: string;
|
||||
primary3Color?: string;
|
||||
accent1Color?: string;
|
||||
accent2Color?: string;
|
||||
accent3Color?: string;
|
||||
textColor?: string;
|
||||
canvasColor?: string;
|
||||
borderColor?: string;
|
||||
disabledColor?: string;
|
||||
alternateTextColor?: string;
|
||||
}
|
||||
interface Theme {
|
||||
interface MuiTheme {
|
||||
rawTheme: RawTheme;
|
||||
static: boolean;
|
||||
appBar?: {
|
||||
color?: string,
|
||||
textColor?: string,
|
||||
height?: number
|
||||
},
|
||||
avatar?: {
|
||||
borderColor?: string;
|
||||
}
|
||||
button?: {
|
||||
height?: number,
|
||||
minWidth?: number,
|
||||
@@ -900,10 +907,16 @@ declare namespace __MaterialUI {
|
||||
disabledColor?: string,
|
||||
disabledTextColor?: string
|
||||
},
|
||||
inkBar?: {
|
||||
backgroundColor?: string;
|
||||
},
|
||||
leftNav?: {
|
||||
width?: number,
|
||||
color?: string,
|
||||
},
|
||||
listItem?: {
|
||||
nestedLevelDepth?: number;
|
||||
},
|
||||
menu?: {
|
||||
backgroundColor?: string,
|
||||
containerBackgroundColor?: string,
|
||||
@@ -943,6 +956,10 @@ declare namespace __MaterialUI {
|
||||
disabledColor?: string,
|
||||
disabledTextColor?: string
|
||||
},
|
||||
refreshIndicator?: {
|
||||
strokeColor?: string;
|
||||
loadingStrokeColor?: string;
|
||||
};
|
||||
slider?: {
|
||||
trackSize?: number,
|
||||
trackColor?: string,
|
||||
@@ -960,6 +977,38 @@ declare namespace __MaterialUI {
|
||||
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,
|
||||
@@ -979,36 +1028,38 @@ declare namespace __MaterialUI {
|
||||
iconColor?: string,
|
||||
separatorColor?: string,
|
||||
menuHoverColor?: string,
|
||||
}
|
||||
}
|
||||
interface CustomTheme {
|
||||
spacing?: Spacing;
|
||||
contentFontFamily?: string;
|
||||
getPalette(): ThemePalette;
|
||||
getComponentThemes(palette: ThemePalette, spacing: Spacing): Theme;
|
||||
}
|
||||
|
||||
export class ThemeManager {
|
||||
static: boolean;
|
||||
spacing: Spacing;
|
||||
palette: ThemePalette;
|
||||
component: Theme;
|
||||
contentFontFamily: string;
|
||||
template: CustomTheme;
|
||||
types: {
|
||||
LIGHT: CustomTheme;
|
||||
DARK: CustomTheme;
|
||||
};
|
||||
|
||||
getCurrentTheme(): ThemeManager;
|
||||
setContentFontFamily(newContentFontFamily: string): void;
|
||||
setTheme(newTheme: CustomTheme): void;
|
||||
setSpacing(newSpacing: Spacing): void;
|
||||
setPalette(newPalette: ThemePalette): void;
|
||||
setComponentThemes(overrides: Theme): void;
|
||||
setIsRtl(isRtl: boolean): void;
|
||||
tabs?: {
|
||||
backgroundColor?: string;
|
||||
};
|
||||
textField?: {
|
||||
textColor?: string;
|
||||
hintColor?: string;
|
||||
floatingLabelColor?: string;
|
||||
disabledTextColor?: string;
|
||||
errorColor?: string;
|
||||
focusColor?: string;
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface RawTheme {
|
||||
spacing: Spacing;
|
||||
fontFamily?: string;
|
||||
palette: ThemePalette;
|
||||
}
|
||||
|
||||
export function ThemeDecorator(muiTheme: Styles.MuiTheme): <P>(Component: React.ComponentClass<P>) => React.ComponentClass<P>;
|
||||
|
||||
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;
|
||||
@@ -1034,6 +1085,9 @@ declare namespace __MaterialUI {
|
||||
fontStyleButtonFontSize: number;
|
||||
}
|
||||
export var Typography: Typography;
|
||||
|
||||
export var DarkRawTheme: RawTheme;
|
||||
export var LightRawTheme: RawTheme;
|
||||
}
|
||||
|
||||
interface SnackbarProps extends React.Props<Snackbar> {
|
||||
@@ -1054,7 +1108,7 @@ declare namespace __MaterialUI {
|
||||
value?: string;
|
||||
selected?: boolean;
|
||||
width?: string;
|
||||
|
||||
|
||||
// Called by Tabs component
|
||||
onActive?: (tab: Tab) => void;
|
||||
|
||||
@@ -1167,11 +1221,10 @@ declare namespace __MaterialUI {
|
||||
}
|
||||
}
|
||||
|
||||
interface ThemeProps extends React.Props<Theme> {
|
||||
theme: Styles.CustomTheme;
|
||||
interface ThemeWrapperProps extends React.Props<ThemeWrapper> {
|
||||
theme: Styles.MuiTheme;
|
||||
}
|
||||
export class Theme extends React.Component<ThemeProps, {}> {
|
||||
static theme(customTheme: Styles.CustomTheme): <P>(Component: React.ComponentClass<P>) => React.ComponentClass<P>;
|
||||
export class ThemeWrapper extends React.Component<ThemeWrapperProps, {}> {
|
||||
}
|
||||
|
||||
interface ToggleProps extends CommonEnhancedSwitchProps<Toggle> {
|
||||
@@ -1632,6 +1685,9 @@ declare module 'material-ui/lib/styles/' {
|
||||
export import ThemeManager = __MaterialUI.Styles.ThemeManager; // require('material-ui/lib/styles/theme-manager');
|
||||
export import Transitions = __MaterialUI.Styles.Transitions; // require('material-ui/lib/styles/transitions');
|
||||
export import Typography = __MaterialUI.Styles.Typography; // require('material-ui/lib/styles/typography');
|
||||
export import LightRawTheme = __MaterialUI.Styles.LightRawTheme; // require('material-ui/lib/styles/raw-themes/light-raw-theme'),
|
||||
export import DarkRawTheme = __MaterialUI.Styles.DarkRawTheme; // require('material-ui/lib/styles/raw-themes/dark-raw-theme'),
|
||||
export import ThemeDecorator = __MaterialUI.Styles.ThemeDecorator; //require('material-ui/lib/styles/theme-decorator');
|
||||
}
|
||||
|
||||
declare module 'material-ui/lib/styles/auto-prefix' {
|
||||
@@ -1655,6 +1711,19 @@ declare module 'material-ui/lib/styles/typography' {
|
||||
export = __MaterialUI.Styles.Typography;
|
||||
}
|
||||
|
||||
declare module 'material-ui/lib/styles/raw-themes/light-raw-theme' {
|
||||
export = __MaterialUI.Styles.LightRawTheme;
|
||||
}
|
||||
|
||||
declare module 'material-ui/lib/styles/raw-themes/dark-raw-theme' {
|
||||
export = __MaterialUI.Styles.DarkRawTheme;
|
||||
}
|
||||
|
||||
declare module 'material-ui/lib/styles/theme-decorator' {
|
||||
export = __MaterialUI.Styles.ThemeDecorator;
|
||||
}
|
||||
|
||||
|
||||
declare module 'material-ui/lib/snackbar' {
|
||||
export = __MaterialUI.Snackbar;
|
||||
}
|
||||
@@ -1695,8 +1764,8 @@ declare module 'material-ui/lib/table/table-row-column' {
|
||||
export = __MaterialUI.Table.TableRowColumn;
|
||||
}
|
||||
|
||||
declare module 'material-ui/lib/theme' {
|
||||
export = __MaterialUI.Theme;
|
||||
declare module 'material-ui/lib/theme-wrapper' {
|
||||
export = __MaterialUI.ThemeWrapper;
|
||||
}
|
||||
|
||||
declare module 'material-ui/lib/toggle' {
|
||||
|
||||
Reference in New Issue
Block a user