From 78cd9fb0e0c9575b32f437c4624fadd54fdcf86a Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Sat, 19 Sep 2015 19:56:35 -0700 Subject: [PATCH 1/7] New definitions for material-ui. --- material-ui/material-ui-tests.ts | 220 ++++ material-ui/material-ui-tests.tsx | 488 ++++++++ material-ui/material-ui.d.ts | 1913 +++++++++++++++++++++++++++++ 3 files changed, 2621 insertions(+) create mode 100644 material-ui/material-ui-tests.ts create mode 100644 material-ui/material-ui-tests.tsx create mode 100644 material-ui/material-ui.d.ts diff --git a/material-ui/material-ui-tests.ts b/material-ui/material-ui-tests.ts new file mode 100644 index 000000000..3b8b34702 --- /dev/null +++ b/material-ui/material-ui-tests.ts @@ -0,0 +1,220 @@ +// This tests React components, so it is most natural to write the test as a .TSX file, +// however the DefinitelyTyped test runner only accepts .TS files. To convert: +// 1. Save in Visual Studio or otherwise use TSC to save as a "material-ui-tests.js" file. +// 2. Copy the "material-ui-tests.tsx" file to "material-ui-tests.ts". +// 3. Copy the body of "MaterialUiTests.prototype.render = function ()" in "material-ui-tsets.js" +// and replace the body of render() in "material-ui-tests.ts". +// 4. Correct some missing information: +// a. Find "var element;" and change to "let element: React.ReactElement;". +// b. Replace "this.linkState(" with "this.linkState(". +// c. Add generic type help for the Component Property to the remaining errors on +// React.createElement, for example, add "<__MaterialUI.DialogProp>". + +/// +/// + +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: (key: string) => React.ReactLink; + 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" + var ThemeManager = new mui.Styles.ThemeManager(); + ThemeManager.setTheme(ThemeManager.types.LIGHT); + ThemeManager.setTheme(ThemeManager.types.DARK); + var muiTheme = ThemeManager.getCurrentTheme(); + ThemeManager.setComponentThemes({ + toggle: { + thumbOnColor: "#00bcd4", + trackOnColor: "LightCyan", + } + }); + // "http://material-ui.com/#/customization/inline-styles" + var Checkbox = mui.Checkbox; + let element: React.ReactElement; + element = React.createElement(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(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 = React.createElement(AppBar, {"title": "Title", "iconClassNameRight": "muidocs-icon-navigation-expand-more"}); + element = React.createElement(AppBar, {"title": "Title", "iconElementLeft": React.createElement(IconButton, null, React.createElement(NavigationClose, null)), "iconElementRight": React.createElement(FlatButton, {"label": "Save"})}); + // "http://material-ui.com/#/components/avatars" + //image avatar + element = React.createElement(Avatar, {"src": "images/uxceo-128.jpg"}); + //SvgIcon avatar + element = React.createElement(Avatar, {"icon": React.createElement(FileFolder, null)}); + //SvgIcon avatar with custom colors + element = React.createElement(Avatar, {"icon": React.createElement(FileFolder, null), "color": Colors.orange200, "backgroundColor": Colors.pink400}); + //FontIcon avatar + element = React.createElement(Avatar, {"icon": React.createElement(FontIcon, {"className": "muidocs-icon-communication-voicemail"})}); + //FontIcon avatar with custom colors + element = React.createElement(Avatar, {"icon": React.createElement(FontIcon, {"className": "muidocs-icon-communication-voicemail"}), "color": Colors.blue300, "backgroundColor": Colors.indigo900}); + //Letter avatar + element = React.createElement(Avatar, null, "A"); + //Letter avatar with custom colors + element = React.createElement(Avatar, {"color": Colors.deepOrange300, "backgroundColor": Colors.purple500}); + // "http://material-ui.com/#/components/buttons" + element = React.createElement(FlatButton, {"linkButton": true, "href": "https://github.com/callemall/material-ui", "secondary": true, "label": "GitHub"}, React.createElement(FontIcon, {"style": { color: Typography.textFullWhite }, "className": "muidocs-icon-custom-github"})); + element = React.createElement(RaisedButton, {"linkButton": true, "href": "https://github.com/callemall/material-ui", "secondary": true, "label": "GitHub"}, React.createElement(FontIcon, {"style": { color: Typography.textFullWhite }, "className": "muidocs-icon-custom-github"})); + element = React.createElement(FloatingActionButton, {"secondary": true, "mini": true, "linkButton": true, "href": "https://github.com/callemall/material-ui"}, React.createElement(ToggleStar, null)); + // "http://material-ui.com/#/components/cards" + element = React.createElement(Card, {"initiallyExpanded": true}, React.createElement(CardHeader, {"title": "Title", "subtitle": "Subtitle", "avatar": React.createElement(Avatar, {"style": { color: 'red' }}, "A"), "showExpandableButton": true}), React.createElement(CardText, {"expandable": true}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), React.createElement(CardActions, {"expandable": true}, React.createElement(FlatButton, {"label": "Action1"}), React.createElement(FlatButton, {"label": "Action2"})), React.createElement(CardText, {"expandable": true}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")); + // "http://material-ui.com/#/components/date-picker" + // "http://material-ui.com/#/components/dialog" + var standardActions = [ + { text: 'Cancel' }, + { text: 'Submit', onTouchTap: this.touchTapEventHandler, ref: 'submit' } + ]; + element = React.createElement<__MaterialUI.DialogProp>(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."); + //Custom Actions + var customActions = [ + React.createElement(FlatButton, {"label": "Cancel", "secondary": true, "onTouchTap": this.touchTapEventHandler}), + React.createElement(FlatButton, {"label": "Submit", "primary": true, "onTouchTap": this.touchTapEventHandler}) + ]; + element = React.createElement(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."); + // "http://material-ui.com/#/components/dropdown-menu" + var menuItems = [ + { payload: '1', text: 'Never' }, + { payload: '2', text: 'Every Night' }, + { payload: '3', text: 'Weeknights' }, + { payload: '4', text: 'Weekends' }, + { payload: '5', text: 'Weekly' }, + ]; + element = React.createElement(DropDownMenu, {"menuItems": menuItems}); + // "http://material-ui.com/#/components/icons" + element = React.createElement(FontIcon, {"className": "material-icons", "color": Colors.red500}, " home"); + // "http://material-ui.com/#/components/icon-buttons" + //Method 1: muidocs-icon-github is defined in a style sheet. + element = React.createElement(IconButton, {"iconClassName": "muidocs-icon-custom-github", "tooltip": "GitHub"}); + //Method 2: ActionGrade is a component created using mui.SvgIcon. + element = React.createElement(IconButton, {"tooltip": "Star", "touch": true}, React.createElement(ActionGrade, null)); + //Method 3: Manually creating a mui.FontIcon component within IconButton + element = React.createElement(IconButton, {"tooltip": "Sort", "disabled": true}, React.createElement(FontIcon, {"className": "muidocs-icon-custom-sort"})); + //Method 4: Using Google material-icons + element = React.createElement(IconButton, {"iconClassName": "material-icons", "tooltipPosition": "bottom-center", "tooltip": "Sky"}, "settings_system_daydream"); + // "http://material-ui.com/#/components/icon-menus" + element = React.createElement(IconMenu, {"iconButtonElement": React.createElement(IconButton, null)}, React.createElement(MenuItem, {"primaryText": "Refresh"}), React.createElement(MenuItem, {"primaryText": "Send feedback"}), React.createElement(MenuItem, {"primaryText": "Settings"}), React.createElement(MenuItem, {"primaryText": "Help"}), React.createElement(MenuItem, {"primaryText": "Sign out"})); + // "http://material-ui.com/#/components/left-nav" + // "http://material-ui.com/#/components/lists" + // "http://material-ui.com/#/components/menus" + element = React.createElement(Menu, null, React.createElement(MenuItem, {"primaryText": "Maps"}), React.createElement(MenuItem, {"primaryText": "Books"}), React.createElement(MenuItem, {"primaryText": "Flights"}), React.createElement(MenuItem, {"primaryText": "Apps"})); + element = React.createElement(Menu, {"desktop": true, "width": 320}, React.createElement(MenuItem, {"primaryText": "Bold", "secondaryText": "⌘B"}), React.createElement(MenuItem, {"primaryText": "Italic", "secondaryText": "⌘I"}), React.createElement(MenuItem, {"primaryText": "Underline", "secondaryText": "⌘U"}), React.createElement(MenuItem, {"primaryText": "Strikethrough", "secondaryText": "Alt+Shift+5"}), React.createElement(MenuItem, {"primaryText": "Superscript", "secondaryText": "⌘."}), React.createElement(MenuItem, {"primaryText": "Subscript", "secondaryText": "⌘,"}), React.createElement(MenuDivider, null), React.createElement(MenuItem, {"primaryText": "Paragraph styles", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "Align", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "Line spacing", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "Numbered list", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "List options", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuDivider, null), React.createElement(MenuItem, {"primaryText": "Clear formatting", "secondaryText": "⌘/"})); + // "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 = React.createElement(Checkbox, {"name": "checkboxName2", "value": "checkboxValue2", "label": "fed the dog", "defaultChecked": true}); + element = React.createElement(Checkbox, {"name": "checkboxName3", "value": "checkboxValue3", "label": "built a house on the moon", "disabled": true}); + element = React.createElement<__MaterialUI.CheckboxProp>(Checkbox, {"name": "checkboxName4", "value": "checkboxValue4", "checkedIcon": React.createElement(ToggleStar, null), "unCheckedIcon": React.createElement(ToggleStarBorder, null), "label": "custom icon"}); + element = React.createElement(RadioButtonGroup, {"name": "shipSpeed", "defaultSelected": "not_light"}, React.createElement(RadioButton, {"value": "light", "label": "prepare for light speed", "style": { marginBottom: 16 }}), ";", React.createElement(RadioButton, {"value": "not_light", "label": "light speed too slow", "style": { marginBottom: 16 }}), ";", React.createElement(RadioButton, {"value": "ludicrous", "label": "go to ludicrous speed", "style": { marginBottom: 16 }, "disabled": true})); + element = React.createElement(Toggle, {"name": "toggleName1", "value": "toggleValue1", "label": "activate thrusters"}); + element = React.createElement(Toggle, {"name": "toggleName2", "value": "toggleValue2", "label": "auto-pilot", "defaultToggled": true}); + element = React.createElement(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 = React.createElement(TextField, {"hintText": "Hint Text"}); + element = React.createElement(TextField, {"hintText": "Hint Text", "defaultValue": "Default Value"}); + element = React.createElement(TextField, {"hintText": "Hint Text", "value": "value", "underlineStyle": { borderColor: Colors.green500 }, "onChange": this.formEventHandler}); + element = React.createElement(TextField, {"hintText": "Custom Underline Focus Color", "underlineFocusStyle": { borderColor: Colors.amber900 }}); + element = React.createElement(TextField, {"hintText": "Hint Text", "valueLink": this.linkState('valueLinkValue')}); + element = React.createElement(TextField, {"hintText": "Hint Text (MultiLine)", "multiLine": true}); + element = React.createElement(TextField, {"hintText": "The hint text can be as long as you want, it will wrap.", "multiLine": true}); + element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "The error text can be as long as you want, it will wrap."}); + element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "error text", "onChange": this.formEventHandler}); + element = React.createElement(TextField, {"hintText": "Hint Text (custom error color)", "errorText": "error text", "errorStyle": { color: 'orange' }, "onChange": this.formEventHandler, "defaultValue": "Custom error color"}); + element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true}); + element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "defaultValue": "Disabled With Value"}); + //Select Fields + var arbitraryArrayMenuItems = [ + { + id: 0, + name: "zero", + }, + ]; + element = React.createElement(SelectField, {"value": 0, "onChange": this.selectFieldChangeHandler, "hintText": "Hint Text", "menuItems": menuItems}); + element = React.createElement(SelectField, {"valueLink": this.linkState('selectValueLinkValue'), "floatingLabelText": "Float Label Text", "valueMember": "id", "displayMember": "name", "menuItems": arbitraryArrayMenuItems}); + element = React.createElement(SelectField, {"valueLink": this.linkState('selectValueLinkValue2'), "floatingLabelText": "Float Custom Label Text", "floatingLabelStyle": { color: "red" }, "valueMember": "id", "displayMember": "name", "menuItems": arbitraryArrayMenuItems}); + element = React.createElement(SelectField, {"value": 0, "onChange": this.selectFieldChangeHandler, "menuItems": arbitraryArrayMenuItems}); + //Floating Hint Text Labels + element = React.createElement(TextField, {"hintText": "Hint Text", "floatingLabelText": "Floating Label Text"}); + element = React.createElement(TextField, {"hintText": "Hint Text", "defaultValue": "Default Value", "floatingLabelText": "Floating Label Text"}); + element = React.createElement(TextField, {"hintText": "Hint Text", "floatingLabelText": "Floating Label Text", "value": "value", "onChange": this.formEventHandler}); + element = React.createElement(TextField, {"hintText": "Hint Text", "floatingLabelText": "Floating Label Text", "valueLink": this.linkState('floatingValueLinkValue')}); + element = React.createElement(TextField, {"hintText": "Hint Text (MultiLine)", "floatingLabelText": "Floating Label Text", "multiLine": true}); + element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "floating text", "floatingLabelText": "Floating Label Text", "onChange": this.formEventHandler}); + element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "error text", "defaultValue": "abc", "floatingLabelText": "Floating Label Text", "onChange": this.formEventHandler}); + element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "floatingLabelText": "Floating Label Text"}); + element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "defaultValue": "Disabled With Value", "floatingLabelText": "Floating Label Text"}); + element = React.createElement(TextField, {"hintText": "Password Field", "floatingLabelText": "Password", "type": "password"}); + // "http://material-ui.com/#/components/time-picker" + // "http://material-ui.com/#/components/toolbars" + return element; + } +} \ No newline at end of file diff --git a/material-ui/material-ui-tests.tsx b/material-ui/material-ui-tests.tsx new file mode 100644 index 000000000..accae0d71 --- /dev/null +++ b/material-ui/material-ui-tests.tsx @@ -0,0 +1,488 @@ +// This tests React components, so it is most natural to write the test as a .TSX file, +// however the DefinitelyTyped test runner only accepts .TS files. To convert: +// 1. Save in Visual Studio or otherwise use TSC to save as a "material-ui-tests.js" file. +// 2. Copy the "material-ui-tests.tsx" file to "material-ui-tests.ts". +// 3. Copy the body of "MaterialUiTests.prototype.render = function ()" in "material-ui-tsets.js" +// and replace the body of render() in "material-ui-tests.ts". +// 4. Correct some missing information: +// a. Find "var element;" and change to "let element: React.ReactElement;". +// b. Replace "this.linkState(" with "this.linkState(". +// c. Add generic type help for the Component Property to the remaining errors on +// React.createElement, for example, add "<__MaterialUI.DialogProp>". + +/// +/// + +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: (key: string) => React.ReactLink; + 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: __MaterialUI.Styles.CustomTheme = ThemeManager.getCurrentTheme(); + ThemeManager.setComponentThemes({ + toggle: { + thumbOnColor: "#00bcd4", + trackOnColor: "LightCyan", + } + }); + + // "http://material-ui.com/#/customization/inline-styles" + let Checkbox = mui.Checkbox; + let element: React.ReactElement; + element = + element = React.createElement<__MaterialUI.CheckboxProp>(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 = + element = } + iconElementRight={} />; + + // "http://material-ui.com/#/components/avatars" + //image avatar + element = ; + //SvgIcon avatar + element = } />; + //SvgIcon avatar with custom colors + element = } + color={Colors.orange200} + backgroundColor={Colors.pink400} />; + //FontIcon avatar + element = + } />; + //FontIcon avatar with custom colors + element = } + color={Colors.blue300} + backgroundColor={Colors.indigo900} />; + //Letter avatar + element = A; + //Letter avatar with custom colors + element = + + + + // "http://material-ui.com/#/components/buttons" + element = + + ; + element = + + ; + element = + + ; + + // "http://material-ui.com/#/components/cards" + element = + A} + showExpandableButton={true}> + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + ; + + // "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 = + The actions in this window are created from the json that's passed in. + ; + + //Custom Actions + let customActions = [ + , + + ]; + + element = + The actions in this window were passed in as an array of react objects. + ; + + + // "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 = ; + + // "http://material-ui.com/#/components/icons" + element = home; + + // "http://material-ui.com/#/components/icon-buttons" + //Method 1: muidocs-icon-github is defined in a style sheet. + element = ; + //Method 2: ActionGrade is a component created using mui.SvgIcon. + element = + + ; + //Method 3: Manually creating a mui.FontIcon component within IconButton + element = + + ; + //Method 4: Using Google material-icons + element = settings_system_daydream; + + // "http://material-ui.com/#/components/icon-menus" + element = }> + + + + + + ; + + // "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 = [ + { + 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" + + + // "http://material-ui.com/#/components/toolbars" + + return element; + } +} \ No newline at end of file diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts new file mode 100644 index 000000000..85afdb2bc --- /dev/null +++ b/material-ui/material-ui.d.ts @@ -0,0 +1,1913 @@ +// Type definitions for material-ui v0.11.1 +// Project: https://github.com/callemall/material-ui +// Definitions by: Nathan Brown +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module "material-ui" { + // The reason for exporting the namespace types (__MaterialUI.*) is to also export the type for casting variable. + + export import AppBar = __MaterialUI.AppBar; // require('material-ui/lib/app-bar'); + export import AppCanvas = __MaterialUI.AppCanvas; // require('material-ui/lib/app-canvas'); + export import Avatar = __MaterialUI.Avatar; // require('material-ui/lib/avatar'); + export import BeforeAfterWrapper = __MaterialUI.BeforeAfterWrapper; // require('material-ui/lib/before-after-wrapper'); + export import Card = __MaterialUI.Card.Card; // require('material-ui/lib/card/card'); + export import CardActions = __MaterialUI.Card.CardActions; // require('material-ui/lib/card/card-actions'); + export import CardExpandable = __MaterialUI.Card.CardExpandable; // require('material-ui/lib/card/card-expandable'); + export import CardHeader = __MaterialUI.Card.CardHeader; // require('material-ui/lib/card/card-header'); + export import CardMedia = __MaterialUI.Card.CardMedia; // require('material-ui/lib/card/card-media'); + export import CardText = __MaterialUI.Card.CardText; // require('material-ui/lib/card/card-text'); + export import CardTitle = __MaterialUI.Card.CardTitle; // require('material-ui/lib/card/card-title'); + export import Checkbox = __MaterialUI.Checkbox; // require('material-ui/lib/checkbox'); + export import CircularProgress = __MaterialUI.CircularProgress; // require('material-ui/lib/circular-progress'); + export import ClearFix = __MaterialUI.ClearFix; // require('material-ui/lib/clearfix'); + 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 DialogAction = __MaterialUI.DialogAction; // type definition + 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 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 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'); + export import LinearProgress = __MaterialUI.LinearProgress; // require('material-ui/lib/linear-progress'); + 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 Overlay = __MaterialUI.Overlay; // require('material-ui/lib/overlay'); + export import Paper = __MaterialUI.Paper; // require('material-ui/lib/paper'); + 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 SelectField = __MaterialUI.SelectField; // require('material-ui/lib/select-field'); + export import Slider = __MaterialUI.Slider; // require('material-ui/lib/slider'); + export import SvgIcon = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon'); + + import NavigationMenu = require('material-ui/lib/svg-icons/navigation/menu'); + import NavigationChevronLeft = require('material-ui/lib/svg-icons/navigation/chevron-left'); + import NavigationChevronRight = require('material-ui/lib/svg-icons/navigation/chevron-right'); + export var Icons: { + NavigationMenu: __MaterialUI.NavigationMenu; + NavigationChevronLeft: __MaterialUI.NavigationChevronLeft; + NavigationChevronRight: __MaterialUI.NavigationChevronRight; + }; + + 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'); + export import Table = __MaterialUI.Table.Table; // require('material-ui/lib/table/table'); + export import TableBody = __MaterialUI.Table.TableBody; // require('material-ui/lib/table/table-body'); + export import TableFooter = __MaterialUI.Table.TableFooter; // require('material-ui/lib/table/table-footer'); + export import TableHeader = __MaterialUI.Table.TableHeader; // require('material-ui/lib/table/table-header'); + 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 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'); + export import Toolbar = __MaterialUI.Toolbar.Toolbar; // require('material-ui/lib/toolbar/toolbar'); + export import ToolbarGroup = __MaterialUI.Toolbar.ToolbarGroup; // require('material-ui/lib/toolbar/toolbar-group'); + 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/'); +} + +declare namespace __MaterialUI { + import React = __React; + + // ReactLink is from "react/addons" + interface ReactLink { + 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 { } + + // more specific than React.HTMLAttributes + + interface AppBarProp extends React.Props> { + ref?: string | ((component: AppBar) => any); + + iconClassNameLeft?: string; + iconClassNameRight?: string; + iconElementLeft?: React.ReactElement; + iconElementRight?: React.ReactElement; + iconStyleRight?: string; + style?: React.CSSProperties; + showMenuIconButton?: boolean; + title?: any; + zDepth?: number; + + onLeftIconButtonTouchTap?: TouchTapEventHandler; + onRightIconButtonTouchTap?: TouchTapEventHandler; + } + export class AppBar extends React.Component{ + } + + interface AppCanvasProp extends React.Props { + ref?: string | ((component: AppCanvas) => any); + + } + export class AppCanvas extends React.Component { + } + + interface AvatarProp extends React.Props { + ref?: string | ((component: AvatarProp) => any); + + icon?: React.ReactElement; + backgroundColor?: string; + color?: string; + size?: number; + src?: string; + style?: React.CSSProperties; + } + export class Avatar extends React.Component { + } + + interface BeforeAfterWrapperProp extends React.Props { + ref?: string | ((component: BeforeAfterWrapper) => any); + + } + export class BeforeAfterWrapper extends React.Component { + } + + namespace Card { + + interface CardProp extends React.Props { + ref?: string | ((component: Card) => any); + + initiallyExpanded?: boolean; + onExpandedChange?: (isExpanded: boolean) => void; + style?: React.CSSProperties; + } + export class Card extends React.Component { + } + + interface CardActionsProp extends React.Props { + ref?: string | ((component: CardActions) => any); + + expandable?: boolean; + showExpandableButton?: boolean; + } + export class CardActions extends React.Component { + } + + interface CardExpandableProp extends React.Props { + ref?: string | ((component: CardExpandable) => any); + + onExpanding: (isExpanded: boolean) => void; + expanded: boolean; + } + export class CardExpandable extends React.Component { + } + + interface CardHeaderProp extends React.Props { + ref?: string | ((component: CardHeader) => any); + + 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 CardMediaProp extends React.Props { + ref?: string | ((component: CardMedia) => any); + + expandable?: boolean; + overlay?: React.ReactElement; + overlayStyle?: React.CSSProperties; + overlayContainerStyle?: React.CSSProperties; + overlayContentStyle?: React.CSSProperties; + mediaStyle?: React.CSSProperties; + style?: React.CSSProperties; + } + export class CardMedia extends React.Component { + } + + interface CardTextProp extends React.Props { + ref?: string | ((component: CardText) => any); + + expandable?: boolean; + color?: string; + style?: React.CSSProperties; + } + export class CardText extends React.Component { + } + + interface CardTitleProp extends React.Props { + ref?: string | ((component: CardTitle) => any); + + 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 CommonEnhancedSwitchProp extends React.HTMLAttributesBase { + // 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 EnhancedSwitchProp extends CommonEnhancedSwitchProp { + // 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 CheckboxProp extends CommonEnhancedSwitchProp { + // is root element + ref?: string | ((component: Checkbox) => any); + + 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 CircularProgressProp extends React.Props { + ref?: string | ((component: CircularProgress) => any); + + } + export class CircularProgress extends React.Component { + } + + interface ClearFixProp extends React.Props { + ref?: string | ((component: ClearFix) => any); + + } + export class ClearFix extends React.Component { + } + + namespace DatePicker { + interface DatePickerProp extends React.Props { + ref?: string | ((component: DatePicker) => any); + + } + export class DatePicker extends React.Component { + } + + interface DatePickerDialogProp extends React.Props { + ref?: string | ((component: DatePickerDialog) => any); + + } + export class DatePickerDialog extends React.Component { + } + } + + export interface DialogAction { + text: string; + ref?: string; + + onTouchTap?: TouchTapEventHandler; + onClick?: React.MouseEventHandler; + } + interface DialogProp extends React.Props { + ref?: string | ((component: Dialog) => any); + + actions?: Array>; + actionFocus?: string; + contentClassName?: string; + contentInnerStyle?: React.CSSProperties; + contentStyle?: React.CSSProperties; + modal?: boolean; + openImmediately?: boolean; + title?: any; + autoDetectWindowHeight?: boolean; + autoScrollBodyContent?: boolean; + + onDismiss?: () => void; + onShow?: () => void; + } + export class Dialog extends React.Component { + dismiss(): void; + show(): void; + } + + interface DropDownIconProp extends React.Props { + ref?: string | ((component: DropDownIcon) => any); + + } + export class DropDownIcon extends React.Component { + } + + interface DropDownMenuProp extends React.Props { + ref?: string | ((component: DropDownMenu) => any); + + displayMember?: string; + valueMember?: string; + autoWidth?: boolean; + menuItems?: Array<{ text: string, payload: string } | {}>; + menuItemStyle?: React.CSSProperties[]; + selectedIndex?: number; + underlineStyle?: React.CSSProperties; + iconStyle?: React.CSSProperties; + labelStyle?: React.CSSProperties; + style?: React.CSSProperties; + disabled?: boolean; + valueLink?: ReactLink; + value?: number; + + onChange?: (e: TouchTapEvent, selectedIndex: number, menuItem: any) => void; + } + export class DropDownMenu extends React.Component { + } + + // non generally overridden elements of EnhancedButton + interface SharedEnhancedButtonProp extends React.HTMLAttributesBase { + containerElement?: string | React.ReactElement; + disabled?: boolean; + disableFocusRipple?: boolean; + disableKeyboardFocus?: boolean; + disableTouchRipple?: boolean; + keyboardFocused?: boolean; + linkButton?: boolean; + focusRippleColor?: string; + focusRippleOpacity?: number; + touchRippleOpacity?: number; + tabIndex?: number; + + onBlur?: React.FocusEventHandler; + onFocus?: React.FocusEventHandler; + onKeyDown?: React.KeyboardEventHandler; + onKeyUp?: React.KeyboardEventHandler; + onMouseEnter?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; + onTouchStart?: React.TouchEventHandler; + onTouchEnd?: React.TouchEventHandler; + onTouchTap?: TouchTapEventHandler; + } + + interface EnhancedButtonProp extends SharedEnhancedButtonProp { + ref?: string | ((component: EnhancedButton) => any); + + onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void; + touchRippleColor?: string; + focusRippleColor?: string; + style?: React.CSSProperties; + } + export class EnhancedButton extends React.Component { + } + + interface FlatButtonProp extends SharedEnhancedButtonProp { + ref?: string | ((component: FlatButton) => any); + + hoverColor?: string; + label?: string; + labelPosition?: string; + labelStyle?: React.CSSProperties; + linkButton?: boolean; + primary?: boolean; + secondary?: boolean; + rippleColor?: string; + style?: React.CSSProperties; + + onKeyboardFocus?: (e: React.KeyboardEvent, isKeyboardFocused: boolean) => void; + } + export class FlatButton extends React.Component { + } + + interface FloatingActionButtonProp extends SharedEnhancedButtonProp { + ref?: string | ((component: FloatingActionButton) => any); + + backgroundColor?: string; + disabled?: boolean; + disabledColor?: string; + iconClassName?: string; + iconStyle?: React.CSSProperties; + mini?: boolean; + secondary?: boolean; + style?: React.CSSProperties; + } + export class FloatingActionButton extends React.Component { + } + + interface FontIconProp extends React.Props { + ref?: string | ((component: FontIcon) => any); + + color?: string; + hoverColor?: string; + onMouseLeave?: React.MouseEventHandler; + onMouseEnter?: React.MouseEventHandler; + style?: React.CSSProperties; + className?: string; + } + export class FontIcon extends React.Component { + } + + interface IconButtonProp extends SharedEnhancedButtonProp { + ref?: string | ((component: IconButton) => any); + + iconClassName?: string; + iconStyle?: React.CSSProperties; + style?: React.CSSProperties; + tooltip?: string; + tooltipPosition?: string; + tooltipStyles?: React.CSSProperties; + touch?: boolean; + + onBlur?: React.FocusEventHandler; + onFocus?: React.FocusEventHandler; + } + export class IconButton extends React.Component { + } + + interface LeftNavProp extends React.Props { + ref?: string | ((component: LeftNav) => any); + + } + export class LeftNav extends React.Component { + } + + interface LinearProgressProp extends React.Props { + ref?: string | ((component: LinearProgress) => any); + + } + export class LinearProgress extends React.Component { + } + + namespace Lists { + interface ListProp extends React.Props { + ref?: string | ((component: List) => any); + + } + export class List extends React.Component { + } + + interface ListDividerProp extends React.Props { + ref?: string | ((component: ListDivider) => any); + + } + export class ListDivider extends React.Component { + } + + interface ListItemProp extends React.Props { + ref?: string | ((component: ListItem) => any); + + } + export class ListItem extends React.Component { + } + } + + namespace Menu { + interface MenuProp extends React.Props { + ref?: string | ((component: Menu) => any); + + } + export class Menu extends React.Component { + } + + interface MenuItemProp extends React.Props { + ref?: string | ((component: MenuItem) => any); + + } + export class MenuItem extends React.Component { + } + } + + export namespace Mixins { + interface ClickAwayable extends React.Mixin { + } + var ClickAwayable: ClickAwayable + + interface WindowListenable extends React.Mixin { + } + var WindowListenable: WindowListenable; + + interface StylePropable extends React.Mixin { + } + var StylePropable: StylePropable + + interface StyleResizable extends React.Mixin { + } + var StyleResizable: StyleResizable + } + + interface OverlayProp extends React.Props { + ref?: string | ((component: Overlay) => any); + + } + export class Overlay extends React.Component { + } + + interface PaperProp extends React.Props { + ref?: string | ((component: Paper) => any); + + } + export class Paper extends React.Component { + } + + interface RadioButtonProp extends CommonEnhancedSwitchProp { + // is root element + ref?: string | ((component: RadioButton) => any); + + defaultChecked?: boolean; + iconStyle?: React.CSSProperties; + label?: string; + labelStyle?: React.CSSProperties; + labelPosition?: string; + style?: React.CSSProperties; + value?: string; + } + export class RadioButton extends React.Component { + } + + interface RadioButtonGroupProp extends React.Props { + ref?: string | ((component: RadioButtonGroup) => any); + + defaultSelected?: string; + labelPosition?: string; + name: string; + style?: React.CSSProperties; + valueSelected?: string; + + onChange?: (e: React.FormEvent, selected: string) => void; + } + export class RadioButtonGroup extends React.Component { + getSelectedValue(): string; + setSelectedValue(newSelectionValue: string): void; + clearValue(): void; + } + + interface RaisedButtonProp extends SharedEnhancedButtonProp { + ref?: string | ((component: RaisedButton) => any); + + className?: string; + disabled?: boolean; + label?: string; + primary?: boolean; + secondary?: boolean; + labelStyle?: React.CSSProperties; + backgroundColor?: string; + labelColor?: string; + disabledBackgroundColor?: string; + disabledLabelColor?: string; + fullWidth?: boolean; + } + export class RaisedButton extends React.Component { + } + + interface RefreshIndicatorProp extends React.Props { + ref?: string | ((component: RefreshIndicator) => any); + + } + export class RefreshIndicator extends React.Component { + } + + export interface Ripples { + } + + interface SelectFieldProp extends React.Props { + ref?: string | ((component: SelectField) => any); + + // passed to TextField + errorStyle?: React.CSSProperties; + errorText?: string; + floatingLabelText?: string; + floatingLabelStyle?: React.CSSProperties; + fullWidth?: boolean; + hintText?: string | React.ReactElement; + + // passed to DropDownMenu + displayMember?: string; + valueMember?: string; + autoWidth?: boolean; + menuItems?: Array<{ text: string, payload: string } | {}>; + menuItemStyle?: React.CSSProperties[]; + selectedIndex?: number; + underlineStyle?: React.CSSProperties; + iconStyle?: React.CSSProperties; + labelStyle?: React.CSSProperties; + style?: React.CSSProperties; + disabled?: boolean; + valueLink?: ReactLink; + value?: number; + + onChange?: (e: TouchTapEvent, selectedIndex: number, menuItem: any) => void; + + // own properties + selectFieldRoot?: string; + } + export class SelectField extends React.Component { + } + + interface SliderProp extends React.Props { + ref?: string | ((component: Slider) => any); + + } + export class Slider extends React.Component { + } + + interface SvgIconProp extends React.Props { + ref?: string | ((component: SvgIcon) => any); + + } + export class SvgIcon extends React.Component { + } + + interface NavigationMenuProp extends React.Props { + ref?: string | ((component: NavigationMenu) => any); + + } + export class NavigationMenu extends React.Component { + } + + interface NavigationChevronLeftProp extends React.Props { + ref?: string | ((component: NavigationChevronLeft) => any); + + } + export class NavigationChevronLeft extends React.Component { + } + + interface NavigationChevronRightProp extends React.Props { + ref?: string | ((component: NavigationChevronRight) => any); + + } + export class NavigationChevronRight extends React.Component { + } + + export namespace Styles { + interface AutoPrefixProp extends React.Props { + ref?: string | ((component: AutoPrefix) => any); + + } + export class AutoPrefix extends React.Component { + } + interface Spacing { + iconSize?: number; + + desktopGutter?: number; + desktopGutterMore?: number; + desktopGutterLess?: number; + desktopGutterMini?: number; + desktopKeylineIncrement?: number; + desktopDropDownMenuItemHeight?: number; + desktopDropDownMenuFontSize?: number; + desktopLeftNavMenuItemHeight?: number; + desktopSubheaderHeight?: number; + desktopToolbarHeight?: number; + } + interface ThemePalette { + primary1Color?: string, + primary2Color?: string, + primary3Color?: string, + accent1Color?: string, + accent2Color?: string, + accent3Color?: string, + textColor?: string, + canvasColor?: string, + borderColor?: string, + disabledColor?: string + } + interface Theme { + appBar?: { + color?: string, + textColor?: string, + height?: number + }, + 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 + }, + leftNav?: { + width?: number, + color?: string, + }, + 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 + }, + 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, + }, + 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, + } + } + interface CustomTheme { + getPalette(): ThemePalette; + getComponentThemes(palette: ThemePalette, spacing: Spacing): Theme; + } + + export class ThemeManager { + spacing: Spacing; + palette: ThemePalette; + component: any; + types: { + LIGHT: CustomTheme; + DARK: CustomTheme; + }; + + getCurrentTheme(): CustomTheme; + setTheme(newTheme: CustomTheme): void; + setSpacing(newSpacing: Spacing): void; + setPalette(newPalette: ThemePalette): void; + setComponentThemes(overrides: Theme): void; + } + + interface TransitionsProp extends React.Props { + ref?: string | ((component: Transitions) => any); + + } + export class Transitions extends React.Component { + } + + export class 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; + } + } + + interface SnackbarProp extends React.Props { + ref?: string | ((component: Snackbar) => any); + + } + export class Snackbar extends React.Component { + } + + namespace Tabs { + interface TabProp extends React.Props { + ref?: string | ((component: Tab) => any); + + label?: string; + value?: string; + + onActive?: (tab: Tab) => void; + } + export class Tab extends React.Component { + } + + interface TabsProp extends React.Props { + ref?: string | ((component: Tabs) => any); + + contentContainerStyle?: React.CSSProperties; + initialSelectedIndex?: number; + inkBarStyle?: React.CSSProperties; + style?: React.CSSProperties; + tabItemContainerStyle?: React.CSSProperties; + value?: string | number; + + onChange?: (value: string | number, e: React.FormEvent, tab: Tab) => void; + } + export class Tabs extends React.Component { + } + } + + namespace Table { + interface TableProp extends React.Props { + ref?: string | ((component: Table) => any); + + } + export class Table extends React.Component { + } + + interface TableBodyProp extends React.Props { + ref?: string | ((component: TableBody) => any); + + } + export class TableBody extends React.Component { + } + + interface TableFooterProp extends React.Props { + ref?: string | ((component: TableFooter) => any); + + } + export class TableFooter extends React.Component { + } + + interface TableHeaderProp extends React.Props { + ref?: string | ((component: TableHeader) => any); + + } + export class TableHeader extends React.Component { + } + + interface TableHeaderColumnProp extends React.Props { + ref?: string | ((component: TableHeaderColumn) => any); + + } + export class TableHeaderColumn extends React.Component { + } + + interface TableRowProp extends React.Props { + ref?: string | ((component: TableRow) => any); + + } + export class TableRow extends React.Component { + } + + interface TableRowColumnProp extends React.Props { + ref?: string | ((component: TableRowColumn) => any); + + } + export class TableRowColumn extends React.Component { + } + } + + interface ThemeProp extends React.Props { + ref?: string | ((component: Theme) => any); + + theme: Styles.CustomTheme; + } + export class Theme extends React.Component { + static theme(customTheme: Styles.CustomTheme):

(Component: React.ComponentClass

) => React.ComponentClass

; + } + + interface ToggleProp extends CommonEnhancedSwitchProp { + // is root element + ref?: string | ((component: Toggle) => any); + + 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 TimePickerProp extends React.Props { + ref?: string | ((component: TimePicker) => any); + + } + export class TimePicker extends React.Component { + } + + interface TextFieldProp extends React.Props { + ref?: string | ((component: TextField) => any); + + errorStyle?: React.CSSProperties; + errorText?: string; + floatingLabelText?: string; + floatingLabelStyle?: React.CSSProperties; + fullWidth?: boolean; + hintText?: string | React.ReactElement; + id?: string; + inputStyle?: React.CSSProperties; + multiLine?: boolean; + onEnterKeyDown?: () => void; + style?: React.CSSProperties; + rows?: number, + underlineStyle?: React.CSSProperties; + underlineFocusStyle?: React.CSSProperties; + type?: string; + + 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 ToolbarProp extends React.Props { + ref?: string | ((component: Toolbar) => any); + + } + export class Toolbar extends React.Component { + } + + interface ToolbarGroupProp extends React.Props { + ref?: string | ((component: ToolbarGroup) => any); + + } + export class ToolbarGroup extends React.Component { + } + + interface ToolbarSeparatorProp extends React.Props { + ref?: string | ((component: ToolbarSeparator) => any); + + } + export class ToolbarSeparator extends React.Component { + } + + interface ToolbarTitleProp extends React.Props { + ref?: string | ((component: ToolbarTitle) => any); + + } + export class ToolbarTitle extends React.Component { + } + } + + interface TooltipProp extends React.Props { + ref?: string | ((component: Tooltip) => any); + + } + export class Tooltip extends React.Component { + } + + export namespace Utils { + interface ColorManipulator { + fade(color: string, amount: number): string; + darken(color: string, amount: number): string; + contrastRatio(background: string, foreground: string): string; + contrastRatioLevel(background: string, foreground: string): any; + } + + interface CssEvent { + transitionEndEventName(): string; + animationEndEventName(): string; + onTransitionEnd(el: Element, callback: (e: Event) => any): void; + onAnimationEnd(el: Element, callback: (e: Event) => any): void; + } + + interface Dom { + isDescendant(parent: Element, child: Element): boolean; + offset(el: Element): { top: number, left: number }; + getStyleAttributeAsNumber(el: Element, 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: Element): void; + withoutTransition(el: Element, callback: () => any): void; + } + + interface Events { + once(el: Element, type: string, callback: (e: Event) => any): void; + on(el: Element, type: string, callback: (e: Event) => any): void; + off(el: Element, type: string, callback: (e: Event) => any): void; + isKeyboard(e: Event): boolean; + } + + function Extend(base: T, override: S1): (T & S1); + + interface ImmutabilityHelper { + merge(base: {}, ...args: {}[]): any; + mergeItem(obj: {}, key: string, newValueObject: {}): any; + push(array: T[], obj: T): T[]; + shift(array: T[]): T[]; + } + + interface KeyLine { + Desktop: { + GUTTER: number; + GUTTER_LESS: number; + INCREMENT: number; + MENU_ITEM_HEIGHT: number; + }; + + getIncrementalDim(dim: number): number; + } + + interface UniqueId { + generate(): string; + } + + interface Styles { + mergeAndPrefix(base: {}, ...args: {}[]): any; + } + } + + // New menus available only through requiring directly to the end file + namespace Menus { + interface IconMenuProp extends React.Props { + ref?: string | ((component: IconMenu) => any); + + closeOnItemTouchTap?: boolean; + desktop?: boolean; + iconButtonElement?: React.ReactElement; + openDirection?: string; + menuStyle?: React.CSSProperties; + multiple?: boolean; + value?: string | Array; + width?: string | number; + touchTapCloseDelay?: number; + + onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void; + onChange?: (e: React.FormEvent, value: string | Array) => void; + } + export class IconMenu extends React.Component { + } + + interface MenuProp extends React.Props

{ + animated?: boolean; + autoWidth?: boolean; + desktop?: boolean; + listStyle?: React.CSSProperties; + maxHeight?: number; + multiple?: boolean; + openDirection?: string; + value?: string | Array; + width?: string | number; + zDepth?: number; + } + export class Menu extends React.Component{ + } + + interface MenuItemProp extends React.Props { + checked?: boolean; + desktop?: boolean; + disabled?: boolean; + innerDivStyle?: React.CSSProperties; + insetChildren?: boolean; + leftIcon?: React.ReactElement; + primaryText?: string | React.ReactElement; + rightIcon?: React.ReactElement; + secondaryText?: string | React.ReactElement; + value?: string; + + onEscKeyDown?: React.KeyboardEventHandler; + onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void; + onChange?: (e: React.FormEvent, value: string) => void; + } + export class MenuItem extends React.Component{ + } + + interface MenuDividerProp extends React.Props { + inset?: boolean; + style?: React.CSSProperties; + } + export class MenuDivider extends React.Component{ + } + } +} // __MaterialUI + +declare module 'material-ui/lib/app-bar' { + export = __MaterialUI.AppBar; +} + +declare module 'material-ui/lib/app-canvas' { + export = __MaterialUI.AppCanvas; +} + +declare module 'material-ui/lib/avatar' { + export = __MaterialUI.Avatar; +} + +declare module 'material-ui/lib/before-after-wrapper' { + export = __MaterialUI.BeforeAfterWrapper; +} + +declare module 'material-ui/lib/card/card' { + export = __MaterialUI.Card.Card; +} + +declare module 'material-ui/lib/card/card-actions' { + export = __MaterialUI.Card.CardActions; +} + +declare module 'material-ui/lib/card/card-expandable' { + export = __MaterialUI.Card.CardExpandable; +} + +declare module 'material-ui/lib/card/card-header' { + export = __MaterialUI.Card.CardHeader; +} + +declare module 'material-ui/lib/card/card-media' { + export = __MaterialUI.Card.CardMedia; +} + +declare module 'material-ui/lib/card/card-text' { + export = __MaterialUI.Card.CardText; +} + +declare module 'material-ui/lib/card/card-title' { + export = __MaterialUI.Card.CardTitle; +} + +declare module 'material-ui/lib/checkbox' { + export = __MaterialUI.Checkbox; +} + +declare module 'material-ui/lib/circular-progress' { + export = __MaterialUI.CircularProgress; +} + +declare module 'material-ui/lib/clearfix' { + export = __MaterialUI.ClearFix; +} + +declare module 'material-ui/lib/date-picker/date-picker' { + export = __MaterialUI.DatePicker.DatePicker; +} + +declare module 'material-ui/lib/date-picker/date-picker-dialog' { + export = __MaterialUI.DatePicker.DatePickerDialog; +} + +declare module 'material-ui/lib/dialog' { + export = __MaterialUI.Dialog; +} + +declare module 'material-ui/lib/drop-down-icon' { + export = __MaterialUI.DropDownIcon; +} + +declare module 'material-ui/lib/drop-down-menu' { + export = __MaterialUI.DropDownMenu; +} + +declare module 'material-ui/lib/enhanced-button' { + export = __MaterialUI.EnhancedButton; +} + +declare module 'material-ui/lib/flat-button' { + export = __MaterialUI.FlatButton; +} + +declare module 'material-ui/lib/floating-action-button' { + export = __MaterialUI.FloatingActionButton; +} + +declare module 'material-ui/lib/font-icon' { + export = __MaterialUI.FontIcon; +} + +declare module 'material-ui/lib/icon-button' { + export = __MaterialUI.IconButton; +} + +declare module 'material-ui/lib/left-nav' { + export = __MaterialUI.LeftNav; +} + +declare module 'material-ui/lib/linear-progress' { + export = __MaterialUI.LinearProgress; +} + +declare module 'material-ui/lib/lists/list' { + export = __MaterialUI.Lists.List; +} + +declare module 'material-ui/lib/lists/list-divider' { + export = __MaterialUI.Lists.ListDivider; +} + +declare module 'material-ui/lib/lists/list-item' { + export = __MaterialUI.Lists.ListItem; +} + +declare module 'material-ui/lib/menu/menu' { + export = __MaterialUI.Menu.Menu; +} + +declare module 'material-ui/lib/menu/menu-item' { + export = __MaterialUI.Menu.MenuItem; +} + +declare module 'material-ui/lib/mixins/' { + export import ClickAwayable = __MaterialUI.Mixins.ClickAwayable; // require('material-ui/lib/mixins/click-awayable'); + export import WindowListenable = __MaterialUI.Mixins.WindowListenable; // require('material-ui/lib/mixins/window-listenable'); + export import StylePropable = __MaterialUI.Mixins.StylePropable; // require('material-ui/lib/mixins/style-propable'); + export import StyleResizable = __MaterialUI.Mixins.StyleResizable; // require('material-ui/lib/mixins/style-resizable'); +} + +declare module 'material-ui/lib/mixins/click-awayable' { + export = __MaterialUI.Mixins.ClickAwayable; +} + +declare module 'material-ui/lib/mixins/window-listenable' { + export = __MaterialUI.Mixins.WindowListenable; +} + +declare module 'material-ui/lib/mixins/style-propable' { + export = __MaterialUI.Mixins.StylePropable; +} + +declare module 'material-ui/lib/mixins/style-resizable' { + export = __MaterialUI.Mixins.StyleResizable; +} + +declare module 'material-ui/lib/overlay' { + export = __MaterialUI.Overlay; +} + +declare module 'material-ui/lib/paper' { + export = __MaterialUI.Paper; +} + +declare module 'material-ui/lib/radio-button' { + export = __MaterialUI.RadioButton; +} + +declare module 'material-ui/lib/radio-button-group' { + export = __MaterialUI.RadioButtonGroup; +} + +declare module 'material-ui/lib/raised-button' { + export = __MaterialUI.RaisedButton; +} + +declare module 'material-ui/lib/refresh-indicator' { + export = __MaterialUI.RefreshIndicator; +} + +declare module 'material-ui/lib/ripples/' { + var Ripples: __MaterialUI.Ripples; + export = Ripples; +} + +declare module 'material-ui/lib/select-field' { + export = __MaterialUI.SelectField; +} + +declare module 'material-ui/lib/slider' { + export = __MaterialUI.Slider; +} + +declare module 'material-ui/lib/svg-icon' { + export = __MaterialUI.SvgIcon; +} + +declare module 'material-ui/lib/svg-icons/navigation/menu' { + export = __MaterialUI.NavigationMenu; +} + +declare module 'material-ui/lib/svg-icons/navigation/chevron-left' { + export = __MaterialUI.NavigationChevronLeft; +} + +declare module 'material-ui/lib/svg-icons/navigation/chevron-right' { + export = __MaterialUI.NavigationChevronRight; +} + +declare module 'material-ui/lib/styles/' { + export import AutoPrefix = __MaterialUI.Styles.AutoPrefix; // require('material-ui/lib/styles/auto-prefix'); + export import Colors = require('material-ui/lib/styles/colors'); + export import Spacing = __MaterialUI.Styles.Spacing; // require('material-ui/lib/styles/spacing'); + 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'); +} + +declare module 'material-ui/lib/styles/auto-prefix' { + export = __MaterialUI.Styles.AutoPrefix; +} + +declare module 'material-ui/lib/styles/spacing' { + var Spacing: __MaterialUI.Styles.Spacing; + export = Spacing; +} + +declare module 'material-ui/lib/styles/theme-manager' { + export = __MaterialUI.Styles.ThemeManager; +} + +declare module 'material-ui/lib/styles/transitions' { + export = __MaterialUI.Styles.Transitions; +} + +declare module 'material-ui/lib/styles/typography' { + export = new __MaterialUI.Styles.Typography(); +} + +declare module 'material-ui/lib/snackbar' { + export = __MaterialUI.Snackbar; +} + +declare module 'material-ui/lib/tabs/tab' { + export = __MaterialUI.Tabs.Tab; +} + +declare module 'material-ui/lib/tabs/tabs' { + export = __MaterialUI.Tabs.Tabs; +} + +declare module 'material-ui/lib/table/table' { + export = __MaterialUI.Table.Table; +} + +declare module 'material-ui/lib/table/table-body' { + export = __MaterialUI.Table.TableBody; +} + +declare module 'material-ui/lib/table/table-footer' { + export = __MaterialUI.Table.TableFooter; +} + +declare module 'material-ui/lib/table/table-header' { + export = __MaterialUI.Table.TableHeader; +} + +declare module 'material-ui/lib/table/table-header-column' { + export = __MaterialUI.Table.TableHeaderColumn; +} + +declare module 'material-ui/lib/table/table-row' { + export = __MaterialUI.Table.TableRow; +} + +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/toggle' { + export = __MaterialUI.Toggle; +} + +declare module 'material-ui/lib/time-picker' { + export = __MaterialUI.TimePicker; +} + +declare module 'material-ui/lib/text-field' { + export = __MaterialUI.TextField; +} + +declare module 'material-ui/lib/toolbar/toolbar' { + export = __MaterialUI.Toolbar.Toolbar; +} + +declare module 'material-ui/lib/toolbar/toolbar-group' { + export = __MaterialUI.Toolbar.ToolbarGroup; +} + +declare module 'material-ui/lib/toolbar/toolbar-separator' { + export = __MaterialUI.Toolbar.ToolbarSeparator; +} + +declare module 'material-ui/lib/toolbar/toolbar-title' { + export = __MaterialUI.Toolbar.ToolbarTitle; +} + +declare module 'material-ui/lib/tooltip' { + export = __MaterialUI.Tooltip; +} + +declare module 'material-ui/lib/utils/' { + export import ColorManipulator = __MaterialUI.Utils.ColorManipulator; // require('material-ui/lib/utils/color-manipulator'); + export import CssEvent = __MaterialUI.Utils.CssEvent; // require('material-ui/lib/utils/css-event'); + export import Dom = __MaterialUI.Utils.Dom; // require('material-ui/lib/utils/dom'); + export import Events = __MaterialUI.Utils.Events; // require('material-ui/lib/utils/events'); + export import Extend = __MaterialUI.Utils.Extend; // require('material-ui/lib/utils/extend'); + export import ImmutabilityHelper = __MaterialUI.Utils.ImmutabilityHelper; // require('material-ui/lib/utils/immutability-helper'); + export import KeyCode = require('material-ui/lib/utils/key-code'); + export import KeyLine = __MaterialUI.Utils.KeyLine; // require('material-ui/lib/utils/key-line'); + export import UniqueId = __MaterialUI.Utils.UniqueId; // require('material-ui/lib/utils/unique-id'); + export import Styles = __MaterialUI.Utils.Styles; // require('material-ui/lib/utils/styles'); +} + +declare module 'material-ui/lib/utils/color-manipulator' { + let ColorManipulator: __MaterialUI.Utils.ColorManipulator; + export = ColorManipulator; +} + +declare module 'material-ui/lib/utils/css-event' { + let CssEvent: __MaterialUI.Utils.CssEvent; + export = CssEvent; +} + +declare module 'material-ui/lib/utils/dom' { + let Dom: __MaterialUI.Utils.Dom; + export = Dom; +} + +declare module 'material-ui/lib/utils/events' { + let Events: __MaterialUI.Utils.Events; + export = Events; +} + +declare module 'material-ui/lib/utils/extend' { + export = __MaterialUI.Utils.Extend; +} + +declare module 'material-ui/lib/utils/immutability-helper' { + let ImmutabilityHelper: __MaterialUI.Utils.ImmutabilityHelper; + export = ImmutabilityHelper; +} + +declare module 'material-ui/lib/utils/key-code' { + export = { + DOWN: 40, + ESC: 27, + ENTER: 13, + LEFT: 37, + RIGHT: 39, + SPACE: 32, + TAB: 9, + UP: 38, + } +} + +declare module 'material-ui/lib/utils/key-line' { + let KeyLine: __MaterialUI.Utils.KeyLine; + export = KeyLine; +} + +declare module 'material-ui/lib/utils/unique-id' { + let UniqueId: __MaterialUI.Utils.UniqueId; + export = UniqueId; +} + +declare module 'material-ui/lib/utils/styles' { + let Styles: __MaterialUI.Utils.Styles; + export = Styles; +} + +declare module "material-ui/lib/menus/icon-menu" { + export = __MaterialUI.Menus.IconMenu; +} + +declare module "material-ui/lib/menus/menu" { + export = __MaterialUI.Menus.Menu; +} + +declare module "material-ui/lib/menus/menu-item" { + export = __MaterialUI.Menus.MenuItem; +} + +declare module "material-ui/lib/menus/menu-divider" { + export = __MaterialUI.Menus.MenuDivider; +} + +declare module "material-ui/lib/styles/colors" { + export var red50: string; + export var red100: string; + export var red200: string; + export var red300: string; + export var red400: string; + export var red500: string; + export var red600: string; + export var red700: string; + export var red800: string; + export var red900: string; + export var redA100: string; + export var redA200: string; + export var redA400: string; + export var redA700: string; + + export var pink50: string; + export var pink100: string; + export var pink200: string; + export var pink300: string; + export var pink400: string; + export var pink500: string; + export var pink600: string; + export var pink700: string; + export var pink800: string; + export var pink900: string; + export var pinkA100: string; + export var pinkA200: string; + export var pinkA400: string; + export var pinkA700: string; + + export var purple50: string; + export var purple100: string; + export var purple200: string; + export var purple300: string; + export var purple400: string; + export var purple500: string; + export var purple600: string; + export var purple700: string; + export var purple800: string; + export var purple900: string; + export var purpleA100: string; + export var purpleA200: string; + export var purpleA400: string; + export var purpleA700: string; + + export var deepPurple50: string; + export var deepPurple100: string; + export var deepPurple200: string; + export var deepPurple300: string; + export var deepPurple400: string; + export var deepPurple500: string; + export var deepPurple600: string; + export var deepPurple700: string; + export var deepPurple800: string; + export var deepPurple900: string; + export var deepPurpleA100: string; + export var deepPurpleA200: string; + export var deepPurpleA400: string; + export var deepPurpleA700: string; + + export var indigo50: string; + export var indigo100: string; + export var indigo200: string; + export var indigo300: string; + export var indigo400: string; + export var indigo500: string; + export var indigo600: string; + export var indigo700: string; + export var indigo800: string; + export var indigo900: string; + export var indigoA100: string; + export var indigoA200: string; + export var indigoA400: string; + export var indigoA700: string; + + export var blue50: string; + export var blue100: string; + export var blue200: string; + export var blue300: string; + export var blue400: string; + export var blue500: string; + export var blue600: string; + export var blue700: string; + export var blue800: string; + export var blue900: string; + export var blueA100: string; + export var blueA200: string; + export var blueA400: string; + export var blueA700: string; + + export var lightBlue50: string; + export var lightBlue100: string; + export var lightBlue200: string; + export var lightBlue300: string; + export var lightBlue400: string; + export var lightBlue500: string; + export var lightBlue600: string; + export var lightBlue700: string; + export var lightBlue800: string; + export var lightBlue900: string; + export var lightBlueA100: string; + export var lightBlueA200: string; + export var lightBlueA400: string; + export var lightBlueA700: string; + + export var cyan50: string; + export var cyan100: string; + export var cyan200: string; + export var cyan300: string; + export var cyan400: string; + export var cyan500: string; + export var cyan600: string; + export var cyan700: string; + export var cyan800: string; + export var cyan900: string; + export var cyanA100: string; + export var cyanA200: string; + export var cyanA400: string; + export var cyanA700: string; + + export var teal50: string; + export var teal100: string; + export var teal200: string; + export var teal300: string; + export var teal400: string; + export var teal500: string; + export var teal600: string; + export var teal700: string; + export var teal800: string; + export var teal900: string; + export var tealA100: string; + export var tealA200: string; + export var tealA400: string; + export var tealA700: string; + + export var green50: string; + export var green100: string; + export var green200: string; + export var green300: string; + export var green400: string; + export var green500: string; + export var green600: string; + export var green700: string; + export var green800: string; + export var green900: string; + export var greenA100: string; + export var greenA200: string; + export var greenA400: string; + export var greenA700: string; + + export var lightGreen50: string; + export var lightGreen100: string; + export var lightGreen200: string; + export var lightGreen300: string; + export var lightGreen400: string; + export var lightGreen500: string; + export var lightGreen600: string; + export var lightGreen700: string; + export var lightGreen800: string; + export var lightGreen900: string; + export var lightGreenA100: string; + export var lightGreenA200: string; + export var lightGreenA400: string; + export var lightGreenA700: string; + + export var lime50: string; + export var lime100: string; + export var lime200: string; + export var lime300: string; + export var lime400: string; + export var lime500: string; + export var lime600: string; + export var lime700: string; + export var lime800: string; + export var lime900: string; + export var limeA100: string; + export var limeA200: string; + export var limeA400: string; + export var limeA700: string; + + export var yellow50: string; + export var yellow100: string; + export var yellow200: string; + export var yellow300: string; + export var yellow400: string; + export var yellow500: string; + export var yellow600: string; + export var yellow700: string; + export var yellow800: string; + export var yellow900: string; + export var yellowA100: string; + export var yellowA200: string; + export var yellowA400: string; + export var yellowA700: string; + + export var amber50: string; + export var amber100: string; + export var amber200: string; + export var amber300: string; + export var amber400: string; + export var amber500: string; + export var amber600: string; + export var amber700: string; + export var amber800: string; + export var amber900: string; + export var amberA100: string; + export var amberA200: string; + export var amberA400: string; + export var amberA700: string; + + export var orange50: string; + export var orange100: string; + export var orange200: string; + export var orange300: string; + export var orange400: string; + export var orange500: string; + export var orange600: string; + export var orange700: string; + export var orange800: string; + export var orange900: string; + export var orangeA100: string; + export var orangeA200: string; + export var orangeA400: string; + export var orangeA700: string; + + export var deepOrange50: string; + export var deepOrange100: string; + export var deepOrange200: string; + export var deepOrange300: string; + export var deepOrange400: string; + export var deepOrange500: string; + export var deepOrange600: string; + export var deepOrange700: string; + export var deepOrange800: string; + export var deepOrange900: string; + export var deepOrangeA100: string; + export var deepOrangeA200: string; + export var deepOrangeA400: string; + export var deepOrangeA700: string; + + export var brown50: string; + export var brown100: string; + export var brown200: string; + export var brown300: string; + export var brown400: string; + export var brown500: string; + export var brown600: string; + export var brown700: string; + export var brown800: string; + export var brown900: string; + + export var blueGrey50: string; + export var blueGrey100: string; + export var blueGrey200: string; + export var blueGrey300: string; + export var blueGrey400: string; + export var blueGrey500: string; + export var blueGrey600: string; + export var blueGrey700: string; + export var blueGrey800: string; + export var blueGrey900: string; + + export var grey50: string; + export var grey100: string; + export var grey200: string; + export var grey300: string; + export var grey400: string; + export var grey500: string; + export var grey600: string; + export var grey700: string; + export var grey800: string; + export var grey900: string; + + export var black: string; + export var white: string; + + export var transparent: string; + export var fullBlack: string; + export var darkBlack: string; + export var lightBlack: string; + export var minBlack: string; + export var faintBlack: string; + export var fullWhite: string; + export var darkWhite: string; + export var lightWhite: string; +} \ No newline at end of file From 54704912913599ebcee49266d18e35169b546147 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Sun, 20 Sep 2015 16:44:13 -0700 Subject: [PATCH 2/7] material-ui: Export interfaces more directly through typed variables. Include Colors in main module. --- material-ui/material-ui.d.ts | 673 ++++++++++++++++++----------------- 1 file changed, 356 insertions(+), 317 deletions(-) diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 85afdb2bc..673435c24 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -24,7 +24,6 @@ declare module "material-ui" { export import ClearFix = __MaterialUI.ClearFix; // require('material-ui/lib/clearfix'); 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 DialogAction = __MaterialUI.DialogAction; // type definition 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'); @@ -83,11 +82,16 @@ declare module "material-ui" { 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 type definitions + export import TouchTapEvent = __MaterialUI.TouchTapEvent; + export import TouchTapEventHandler = __MaterialUI.TouchTapEventHandler; + export import DialogAction = __MaterialUI.DialogAction; } declare namespace __MaterialUI { import React = __React; - + // ReactLink is from "react/addons" interface ReactLink { value: T; @@ -634,12 +638,32 @@ declare namespace __MaterialUI { export class RefreshIndicator extends React.Component { } - export interface Ripples { + namespace Ripples { + interface CircleRippleProp extends React.Props { + ref?: string | ((component: CircleRipple) => any); + + } + export class CircleRipple extends React.Component { + } + + interface FocusRippleProp extends React.Props { + ref?: string | ((component: FocusRipple) => any); + + } + export class FocusRipple extends React.Component { + } + + interface TouchRippleProp extends React.Props { + ref?: string | ((component: TouchRipple) => any); + + } + export class TouchRipple extends React.Component { + } } interface SelectFieldProp extends React.Props { ref?: string | ((component: SelectField) => any); - + // passed to TextField errorStyle?: React.CSSProperties; errorText?: string; @@ -707,12 +731,14 @@ declare namespace __MaterialUI { } export namespace Styles { - interface AutoPrefixProp extends React.Props { - ref?: string | ((component: AutoPrefix) => any); + interface AutoPrefix { + all(styles: any): any; + set(style: any, key: string, value: string | number): void; + single(key: string): string; + singleHyphened(key: string): string; + } + export var AutoPrefix: AutoPrefix; - } - export class AutoPrefix extends React.Component { - } interface Spacing { iconSize?: number; @@ -887,14 +913,15 @@ declare namespace __MaterialUI { setComponentThemes(overrides: Theme): void; } - interface TransitionsProp extends React.Props { - ref?: string | ((component: Transitions) => any); - - } - export class Transitions extends React.Component { + 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; - export class Typography { + class TypographyClass { textFullBlack:string; textDarkBlack: string; textLightBlack: string; @@ -910,6 +937,7 @@ declare namespace __MaterialUI { fontStyleButtonFontSize: number; } + export var Typography: TypographyClass; } interface SnackbarProp extends React.Props { @@ -1112,6 +1140,7 @@ declare namespace __MaterialUI { contrastRatio(background: string, foreground: string): string; contrastRatioLevel(background: string, foreground: string): any; } + export var ColorManipulator: ColorManipulator; interface CssEvent { transitionEndEventName(): string; @@ -1119,6 +1148,7 @@ declare namespace __MaterialUI { onTransitionEnd(el: Element, callback: (e: Event) => any): void; onAnimationEnd(el: Element, callback: (e: Event) => any): void; } + export var CssEvent: CssEvent; interface Dom { isDescendant(parent: Element, child: Element): boolean; @@ -1131,6 +1161,7 @@ declare namespace __MaterialUI { forceRedraw(el: Element): void; withoutTransition(el: Element, callback: () => any): void; } + export var Dom: Dom; interface Events { once(el: Element, type: string, callback: (e: Event) => any): void; @@ -1138,6 +1169,7 @@ declare namespace __MaterialUI { off(el: Element, type: string, callback: (e: Event) => any): void; isKeyboard(e: Event): boolean; } + export var Events: Events; function Extend(base: T, override: S1): (T & S1); @@ -1147,6 +1179,19 @@ declare namespace __MaterialUI { push(array: T[], obj: T): T[]; shift(array: T[]): T[]; } + 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: { @@ -1158,14 +1203,17 @@ declare namespace __MaterialUI { getIncrementalDim(dim: number): number; } + export var KeyLine: KeyLine; interface UniqueId { generate(): string; } + export var UniqueId: UniqueId; interface Styles { mergeAndPrefix(base: {}, ...args: {}[]): any; } + export var Styles: Styles; } // New menus available only through requiring directly to the end file @@ -1404,8 +1452,9 @@ declare module 'material-ui/lib/refresh-indicator' { } declare module 'material-ui/lib/ripples/' { - var Ripples: __MaterialUI.Ripples; - export = Ripples; + export import CircleRipple = __MaterialUI.Ripples.CircleRipple; + export import FocusRipple = __MaterialUI.Ripples.FocusRipple; + export import TouchRipple = __MaterialUI.Ripples.TouchRipple; } declare module 'material-ui/lib/select-field' { @@ -1434,8 +1483,8 @@ declare module 'material-ui/lib/svg-icons/navigation/chevron-right' { declare module 'material-ui/lib/styles/' { export import AutoPrefix = __MaterialUI.Styles.AutoPrefix; // require('material-ui/lib/styles/auto-prefix'); - export import Colors = require('material-ui/lib/styles/colors'); - export import Spacing = __MaterialUI.Styles.Spacing; // require('material-ui/lib/styles/spacing'); + export import Colors = __MaterialUI.Styles.Colors; // require('material-ui/lib/styles/colors'); + export import Spacing = require('material-ui/lib/styles/spacing'); 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'); @@ -1459,7 +1508,7 @@ declare module 'material-ui/lib/styles/transitions' { } declare module 'material-ui/lib/styles/typography' { - export = new __MaterialUI.Styles.Typography(); + export = __MaterialUI.Styles.Typography; } declare module 'material-ui/lib/snackbar' { @@ -1545,30 +1594,26 @@ declare module 'material-ui/lib/utils/' { export import Events = __MaterialUI.Utils.Events; // require('material-ui/lib/utils/events'); export import Extend = __MaterialUI.Utils.Extend; // require('material-ui/lib/utils/extend'); export import ImmutabilityHelper = __MaterialUI.Utils.ImmutabilityHelper; // require('material-ui/lib/utils/immutability-helper'); - export import KeyCode = require('material-ui/lib/utils/key-code'); + export import KeyCode = __MaterialUI.Utils.KeyCode; // require('material-ui/lib/utils/key-code'); export import KeyLine = __MaterialUI.Utils.KeyLine; // require('material-ui/lib/utils/key-line'); export import UniqueId = __MaterialUI.Utils.UniqueId; // require('material-ui/lib/utils/unique-id'); export import Styles = __MaterialUI.Utils.Styles; // require('material-ui/lib/utils/styles'); } declare module 'material-ui/lib/utils/color-manipulator' { - let ColorManipulator: __MaterialUI.Utils.ColorManipulator; - export = ColorManipulator; + export = __MaterialUI.Utils.ColorManipulator; } declare module 'material-ui/lib/utils/css-event' { - let CssEvent: __MaterialUI.Utils.CssEvent; - export = CssEvent; + export = __MaterialUI.Utils.CssEvent; } declare module 'material-ui/lib/utils/dom' { - let Dom: __MaterialUI.Utils.Dom; - export = Dom; + export = __MaterialUI.Utils.Dom; } declare module 'material-ui/lib/utils/events' { - let Events: __MaterialUI.Utils.Events; - export = Events; + export = __MaterialUI.Utils.Events; } declare module 'material-ui/lib/utils/extend' { @@ -1576,338 +1621,332 @@ declare module 'material-ui/lib/utils/extend' { } declare module 'material-ui/lib/utils/immutability-helper' { - let ImmutabilityHelper: __MaterialUI.Utils.ImmutabilityHelper; - export = ImmutabilityHelper; + export = __MaterialUI.Utils.ImmutabilityHelper; } declare module 'material-ui/lib/utils/key-code' { - export = { - DOWN: 40, - ESC: 27, - ENTER: 13, - LEFT: 37, - RIGHT: 39, - SPACE: 32, - TAB: 9, - UP: 38, - } + export = __MaterialUI.Utils.KeyCode; } declare module 'material-ui/lib/utils/key-line' { - let KeyLine: __MaterialUI.Utils.KeyLine; - export = KeyLine; + export = __MaterialUI.Utils.KeyLine; } declare module 'material-ui/lib/utils/unique-id' { - let UniqueId: __MaterialUI.Utils.UniqueId; - export = UniqueId; + export = __MaterialUI.Utils.UniqueId; } declare module 'material-ui/lib/utils/styles' { - let Styles: __MaterialUI.Utils.Styles; - export = Styles; + export = __MaterialUI.Utils.Styles; } declare module "material-ui/lib/menus/icon-menu" { - export = __MaterialUI.Menus.IconMenu; + export = __MaterialUI.Menus.IconMenu; } declare module "material-ui/lib/menus/menu" { - export = __MaterialUI.Menus.Menu; + export = __MaterialUI.Menus.Menu; } declare module "material-ui/lib/menus/menu-item" { - export = __MaterialUI.Menus.MenuItem; + export = __MaterialUI.Menus.MenuItem; } declare module "material-ui/lib/menus/menu-divider" { - export = __MaterialUI.Menus.MenuDivider; + export = __MaterialUI.Menus.MenuDivider; } declare module "material-ui/lib/styles/colors" { - export var red50: string; - export var red100: string; - export var red200: string; - export var red300: string; - export var red400: string; - export var red500: string; - export var red600: string; - export var red700: string; - export var red800: string; - export var red900: string; - export var redA100: string; - export var redA200: string; - export var redA400: string; - export var redA700: string; + export = __MaterialUI.Styles.Colors; +} - export var pink50: string; - export var pink100: string; - export var pink200: string; - export var pink300: string; - export var pink400: string; - export var pink500: string; - export var pink600: string; - export var pink700: string; - export var pink800: string; - export var pink900: string; - export var pinkA100: string; - export var pinkA200: string; - export var pinkA400: string; - export var pinkA700: string; +declare namespace __MaterialUI.Styles { + interface Colors { + red50: string; + red100: string; + red200: string; + red300: string; + red400: string; + red500: string; + red600: string; + red700: string; + red800: string; + red900: string; + redA100: string; + redA200: string; + redA400: string; + redA700: string; - export var purple50: string; - export var purple100: string; - export var purple200: string; - export var purple300: string; - export var purple400: string; - export var purple500: string; - export var purple600: string; - export var purple700: string; - export var purple800: string; - export var purple900: string; - export var purpleA100: string; - export var purpleA200: string; - export var purpleA400: string; - export var purpleA700: string; + pink50: string; + pink100: string; + pink200: string; + pink300: string; + pink400: string; + pink500: string; + pink600: string; + pink700: string; + pink800: string; + pink900: string; + pinkA100: string; + pinkA200: string; + pinkA400: string; + pinkA700: string; - export var deepPurple50: string; - export var deepPurple100: string; - export var deepPurple200: string; - export var deepPurple300: string; - export var deepPurple400: string; - export var deepPurple500: string; - export var deepPurple600: string; - export var deepPurple700: string; - export var deepPurple800: string; - export var deepPurple900: string; - export var deepPurpleA100: string; - export var deepPurpleA200: string; - export var deepPurpleA400: string; - export var deepPurpleA700: string; + purple50: string; + purple100: string; + purple200: string; + purple300: string; + purple400: string; + purple500: string; + purple600: string; + purple700: string; + purple800: string; + purple900: string; + purpleA100: string; + purpleA200: string; + purpleA400: string; + purpleA700: string; - export var indigo50: string; - export var indigo100: string; - export var indigo200: string; - export var indigo300: string; - export var indigo400: string; - export var indigo500: string; - export var indigo600: string; - export var indigo700: string; - export var indigo800: string; - export var indigo900: string; - export var indigoA100: string; - export var indigoA200: string; - export var indigoA400: string; - export var indigoA700: string; + deepPurple50: string; + deepPurple100: string; + deepPurple200: string; + deepPurple300: string; + deepPurple400: string; + deepPurple500: string; + deepPurple600: string; + deepPurple700: string; + deepPurple800: string; + deepPurple900: string; + deepPurpleA100: string; + deepPurpleA200: string; + deepPurpleA400: string; + deepPurpleA700: string; - export var blue50: string; - export var blue100: string; - export var blue200: string; - export var blue300: string; - export var blue400: string; - export var blue500: string; - export var blue600: string; - export var blue700: string; - export var blue800: string; - export var blue900: string; - export var blueA100: string; - export var blueA200: string; - export var blueA400: string; - export var blueA700: string; + indigo50: string; + indigo100: string; + indigo200: string; + indigo300: string; + indigo400: string; + indigo500: string; + indigo600: string; + indigo700: string; + indigo800: string; + indigo900: string; + indigoA100: string; + indigoA200: string; + indigoA400: string; + indigoA700: string; - export var lightBlue50: string; - export var lightBlue100: string; - export var lightBlue200: string; - export var lightBlue300: string; - export var lightBlue400: string; - export var lightBlue500: string; - export var lightBlue600: string; - export var lightBlue700: string; - export var lightBlue800: string; - export var lightBlue900: string; - export var lightBlueA100: string; - export var lightBlueA200: string; - export var lightBlueA400: string; - export var lightBlueA700: string; + blue50: string; + blue100: string; + blue200: string; + blue300: string; + blue400: string; + blue500: string; + blue600: string; + blue700: string; + blue800: string; + blue900: string; + blueA100: string; + blueA200: string; + blueA400: string; + blueA700: string; - export var cyan50: string; - export var cyan100: string; - export var cyan200: string; - export var cyan300: string; - export var cyan400: string; - export var cyan500: string; - export var cyan600: string; - export var cyan700: string; - export var cyan800: string; - export var cyan900: string; - export var cyanA100: string; - export var cyanA200: string; - export var cyanA400: string; - export var cyanA700: string; + lightBlue50: string; + lightBlue100: string; + lightBlue200: string; + lightBlue300: string; + lightBlue400: string; + lightBlue500: string; + lightBlue600: string; + lightBlue700: string; + lightBlue800: string; + lightBlue900: string; + lightBlueA100: string; + lightBlueA200: string; + lightBlueA400: string; + lightBlueA700: string; - export var teal50: string; - export var teal100: string; - export var teal200: string; - export var teal300: string; - export var teal400: string; - export var teal500: string; - export var teal600: string; - export var teal700: string; - export var teal800: string; - export var teal900: string; - export var tealA100: string; - export var tealA200: string; - export var tealA400: string; - export var tealA700: string; + cyan50: string; + cyan100: string; + cyan200: string; + cyan300: string; + cyan400: string; + cyan500: string; + cyan600: string; + cyan700: string; + cyan800: string; + cyan900: string; + cyanA100: string; + cyanA200: string; + cyanA400: string; + cyanA700: string; - export var green50: string; - export var green100: string; - export var green200: string; - export var green300: string; - export var green400: string; - export var green500: string; - export var green600: string; - export var green700: string; - export var green800: string; - export var green900: string; - export var greenA100: string; - export var greenA200: string; - export var greenA400: string; - export var greenA700: string; + teal50: string; + teal100: string; + teal200: string; + teal300: string; + teal400: string; + teal500: string; + teal600: string; + teal700: string; + teal800: string; + teal900: string; + tealA100: string; + tealA200: string; + tealA400: string; + tealA700: string; - export var lightGreen50: string; - export var lightGreen100: string; - export var lightGreen200: string; - export var lightGreen300: string; - export var lightGreen400: string; - export var lightGreen500: string; - export var lightGreen600: string; - export var lightGreen700: string; - export var lightGreen800: string; - export var lightGreen900: string; - export var lightGreenA100: string; - export var lightGreenA200: string; - export var lightGreenA400: string; - export var lightGreenA700: string; + green50: string; + green100: string; + green200: string; + green300: string; + green400: string; + green500: string; + green600: string; + green700: string; + green800: string; + green900: string; + greenA100: string; + greenA200: string; + greenA400: string; + greenA700: string; - export var lime50: string; - export var lime100: string; - export var lime200: string; - export var lime300: string; - export var lime400: string; - export var lime500: string; - export var lime600: string; - export var lime700: string; - export var lime800: string; - export var lime900: string; - export var limeA100: string; - export var limeA200: string; - export var limeA400: string; - export var limeA700: string; + lightGreen50: string; + lightGreen100: string; + lightGreen200: string; + lightGreen300: string; + lightGreen400: string; + lightGreen500: string; + lightGreen600: string; + lightGreen700: string; + lightGreen800: string; + lightGreen900: string; + lightGreenA100: string; + lightGreenA200: string; + lightGreenA400: string; + lightGreenA700: string; - export var yellow50: string; - export var yellow100: string; - export var yellow200: string; - export var yellow300: string; - export var yellow400: string; - export var yellow500: string; - export var yellow600: string; - export var yellow700: string; - export var yellow800: string; - export var yellow900: string; - export var yellowA100: string; - export var yellowA200: string; - export var yellowA400: string; - export var yellowA700: string; + lime50: string; + lime100: string; + lime200: string; + lime300: string; + lime400: string; + lime500: string; + lime600: string; + lime700: string; + lime800: string; + lime900: string; + limeA100: string; + limeA200: string; + limeA400: string; + limeA700: string; - export var amber50: string; - export var amber100: string; - export var amber200: string; - export var amber300: string; - export var amber400: string; - export var amber500: string; - export var amber600: string; - export var amber700: string; - export var amber800: string; - export var amber900: string; - export var amberA100: string; - export var amberA200: string; - export var amberA400: string; - export var amberA700: string; + yellow50: string; + yellow100: string; + yellow200: string; + yellow300: string; + yellow400: string; + yellow500: string; + yellow600: string; + yellow700: string; + yellow800: string; + yellow900: string; + yellowA100: string; + yellowA200: string; + yellowA400: string; + yellowA700: string; - export var orange50: string; - export var orange100: string; - export var orange200: string; - export var orange300: string; - export var orange400: string; - export var orange500: string; - export var orange600: string; - export var orange700: string; - export var orange800: string; - export var orange900: string; - export var orangeA100: string; - export var orangeA200: string; - export var orangeA400: string; - export var orangeA700: string; + amber50: string; + amber100: string; + amber200: string; + amber300: string; + amber400: string; + amber500: string; + amber600: string; + amber700: string; + amber800: string; + amber900: string; + amberA100: string; + amberA200: string; + amberA400: string; + amberA700: string; - export var deepOrange50: string; - export var deepOrange100: string; - export var deepOrange200: string; - export var deepOrange300: string; - export var deepOrange400: string; - export var deepOrange500: string; - export var deepOrange600: string; - export var deepOrange700: string; - export var deepOrange800: string; - export var deepOrange900: string; - export var deepOrangeA100: string; - export var deepOrangeA200: string; - export var deepOrangeA400: string; - export var deepOrangeA700: string; + orange50: string; + orange100: string; + orange200: string; + orange300: string; + orange400: string; + orange500: string; + orange600: string; + orange700: string; + orange800: string; + orange900: string; + orangeA100: string; + orangeA200: string; + orangeA400: string; + orangeA700: string; - export var brown50: string; - export var brown100: string; - export var brown200: string; - export var brown300: string; - export var brown400: string; - export var brown500: string; - export var brown600: string; - export var brown700: string; - export var brown800: string; - export var brown900: string; + deepOrange50: string; + deepOrange100: string; + deepOrange200: string; + deepOrange300: string; + deepOrange400: string; + deepOrange500: string; + deepOrange600: string; + deepOrange700: string; + deepOrange800: string; + deepOrange900: string; + deepOrangeA100: string; + deepOrangeA200: string; + deepOrangeA400: string; + deepOrangeA700: string; - export var blueGrey50: string; - export var blueGrey100: string; - export var blueGrey200: string; - export var blueGrey300: string; - export var blueGrey400: string; - export var blueGrey500: string; - export var blueGrey600: string; - export var blueGrey700: string; - export var blueGrey800: string; - export var blueGrey900: string; + brown50: string; + brown100: string; + brown200: string; + brown300: string; + brown400: string; + brown500: string; + brown600: string; + brown700: string; + brown800: string; + brown900: string; - export var grey50: string; - export var grey100: string; - export var grey200: string; - export var grey300: string; - export var grey400: string; - export var grey500: string; - export var grey600: string; - export var grey700: string; - export var grey800: string; - export var grey900: string; + blueGrey50: string; + blueGrey100: string; + blueGrey200: string; + blueGrey300: string; + blueGrey400: string; + blueGrey500: string; + blueGrey600: string; + blueGrey700: string; + blueGrey800: string; + blueGrey900: string; - export var black: string; - export var white: string; + grey50: string; + grey100: string; + grey200: string; + grey300: string; + grey400: string; + grey500: string; + grey600: string; + grey700: string; + grey800: string; + grey900: string; - export var transparent: string; - export var fullBlack: string; - export var darkBlack: string; - export var lightBlack: string; - export var minBlack: string; - export var faintBlack: string; - export var fullWhite: string; - export var darkWhite: string; - export var lightWhite: string; -} \ No newline at end of file + black: string; + white: string; + + transparent: string; + fullBlack: string; + darkBlack: string; + lightBlack: string; + minBlack: string; + faintBlack: string; + fullWhite: string; + darkWhite: string; + lightWhite: string; + } + export var Colors: Colors; +} From cf9511a8320fdfd3e9bea65618e2cef5f559d319 Mon Sep 17 00:00:00 2001 From: use-strict Date: Tue, 22 Sep 2015 17:35:28 +0300 Subject: [PATCH 3/7] Update material-ui.d.ts --- material-ui/material-ui.d.ts | 608 +++++++++++++++++++++-------------- 1 file changed, 361 insertions(+), 247 deletions(-) diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 673435c24..b57778864 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -72,10 +72,10 @@ 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 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'); + export import Theme = __MaterialUI.Theme; // require('material-ui/lib/theme'); + export import TimePicker = __MaterialUI.TimePicker; // require('material-ui/lib/time-picker'); + export import Toggle = __MaterialUI.Toggle; // require('material-ui/lib/toggle'); export import Toolbar = __MaterialUI.Toolbar.Toolbar; // require('material-ui/lib/toolbar/toolbar'); export import ToolbarGroup = __MaterialUI.Toolbar.ToolbarGroup; // require('material-ui/lib/toolbar/toolbar-group'); export import ToolbarSeparator = __MaterialUI.Toolbar.ToolbarSeparator; // require('material-ui/lib/toolbar/toolbar-separator'); @@ -84,9 +84,9 @@ declare module "material-ui" { export import Utils = __MaterialUI.Utils; // require('material-ui/lib/utils/'); // export type definitions + export import DialogAction = __MaterialUI.DialogAction; export import TouchTapEvent = __MaterialUI.TouchTapEvent; export import TouchTapEventHandler = __MaterialUI.TouchTapEventHandler; - export import DialogAction = __MaterialUI.DialogAction; } declare namespace __MaterialUI { @@ -112,9 +112,7 @@ declare namespace __MaterialUI { // more specific than React.HTMLAttributes - interface AppBarProp extends React.Props> { - ref?: string | ((component: AppBar) => any); - + interface AppBarProp extends React.Props { iconClassNameLeft?: string; iconClassNameRight?: string; iconElementLeft?: React.ReactElement; @@ -122,25 +120,22 @@ declare namespace __MaterialUI { iconStyleRight?: string; style?: React.CSSProperties; showMenuIconButton?: boolean; - title?: any; + title?: React.ReactNode; zDepth?: number; onLeftIconButtonTouchTap?: TouchTapEventHandler; onRightIconButtonTouchTap?: TouchTapEventHandler; } - export class AppBar extends React.Component{ + export class AppBar extends React.Component{ } - interface AppCanvasProp extends React.Props { - ref?: string | ((component: AppCanvas) => any); - + interface AppCanvasProp extends React.Prop { + } - export class AppCanvas extends React.Component { + export class AppCanvas extends React.Component { } interface AvatarProp extends React.Props { - ref?: string | ((component: AvatarProp) => any); - icon?: React.ReactElement; backgroundColor?: string; color?: string; @@ -148,21 +143,23 @@ declare namespace __MaterialUI { src?: string; style?: React.CSSProperties; } - export class Avatar extends React.Component { + export class Avatar extends React.Component { } interface BeforeAfterWrapperProp extends React.Props { - ref?: string | ((component: BeforeAfterWrapper) => any); - + beforeStyle?: React.CSSProperties; + afterStyle?: React.CSSProperties; + beforeElementType?: string; + afterElementType?: string; + elementType?: string; } - export class BeforeAfterWrapper extends React.Component { + export class BeforeAfterWrapper extends React.Component { } namespace Card { interface CardProp extends React.Props { - ref?: string | ((component: Card) => any); - + expandable?: boolean; initiallyExpanded?: boolean; onExpandedChange?: (isExpanded: boolean) => void; style?: React.CSSProperties; @@ -171,26 +168,20 @@ declare namespace __MaterialUI { } interface CardActionsProp extends React.Props { - ref?: string | ((component: CardActions) => any); - expandable?: boolean; showExpandableButton?: boolean; } - export class CardActions extends React.Component { + export class CardActions extends React.Component { } interface CardExpandableProp extends React.Props { - ref?: string | ((component: CardExpandable) => any); - - onExpanding: (isExpanded: boolean) => void; - expanded: boolean; + onExpanding?: (isExpanded: boolean) => void; + expanded?: boolean; } - export class CardExpandable extends React.Component { + export class CardExpandable extends React.Component { } interface CardHeaderProp extends React.Props { - ref?: string | ((component: CardHeader) => any); - expandable?: boolean; showExpandableButton?: boolean; title?: string | React.ReactElement; @@ -203,36 +194,30 @@ declare namespace __MaterialUI { style?: React.CSSProperties; avatar: React.ReactElement | string; } - export class CardHeader extends React.Component { + export class CardHeader extends React.Component { } interface CardMediaProp extends React.Props { - ref?: string | ((component: CardMedia) => any); - expandable?: boolean; - overlay?: React.ReactElement; + overlay?: React.ReactNode; overlayStyle?: React.CSSProperties; overlayContainerStyle?: React.CSSProperties; overlayContentStyle?: React.CSSProperties; mediaStyle?: React.CSSProperties; style?: React.CSSProperties; } - export class CardMedia extends React.Component { + export class CardMedia extends React.Component { } interface CardTextProp extends React.Props { - ref?: string | ((component: CardText) => any); - expandable?: boolean; color?: string; style?: React.CSSProperties; } - export class CardText extends React.Component { + export class CardText extends React.Component { } interface CardTitleProp extends React.Props { - ref?: string | ((component: CardTitle) => any); - expandable?: boolean; showExpandableButton?: boolean; title?: string | React.ReactElement; @@ -244,7 +229,7 @@ declare namespace __MaterialUI { textStyle?: React.CSSProperties; style?: React.CSSProperties; } - export class CardTitle extends React.Component { + export class CardTitle extends React.Component { } } @@ -277,7 +262,7 @@ declare namespace __MaterialUI { onSwitch?: (e: React.MouseEvent, isInputChecked: boolean) => void; labelPosition?: string; } - export class EnhancedSwitch extends React.Component { + export class EnhancedSwitch extends React.Component { isSwitched(): boolean; setSwitched(newSwitchedValue: boolean): void; getValue(): any; @@ -286,8 +271,6 @@ declare namespace __MaterialUI { interface CheckboxProp extends CommonEnhancedSwitchProp { // is root element - ref?: string | ((component: Checkbox) => any); - checkedIcon?: React.ReactElement<{ style?: React.CSSProperties }>; // Normally an SvgIcon defaultChecked?: boolean; iconStyle?: React.CSSProperties; @@ -304,38 +287,64 @@ declare namespace __MaterialUI { onCheck?: (event: React.MouseEvent, checked: boolean) => void; } - export class Checkbox extends React.Component { + export class Checkbox extends React.Component { isChecked(): void; setChecked(newCheckedValue: boolean): void; } interface CircularProgressProp extends React.Props { - ref?: string | ((component: CircularProgress) => any); + mode?: string; + value?: number; + min?: number; + max?: number; + size?: number; + color?: string; + innerStyle?: React.CSSProperties; } - export class CircularProgress extends React.Component { + export class CircularProgress extends React.Component { } interface ClearFixProp extends React.Props { - ref?: string | ((component: ClearFix) => any); - } - export class ClearFix extends React.Component { + export class ClearFix extends React.Component { } namespace DatePicker { interface DatePickerProp extends React.Props { - ref?: string | ((component: DatePicker) => any); - + autoOk?: boolean; + defaultDate?: Date; + formatDate?: string; + hideToolbarYearChange?: boolean; + maxDate?: Date; + minDate?: Date; + mode?: string; + onDismiss?: Function; + //TODO: typeof e? + onChange?: (e: any, d: Date): void; + onFocus?: React.FocusEventHandler; + onShow?: Function; + onTouchTap?: React.TouchEventHandler; + shouldDisableDate?: (day: Date) => boolean; + showYearSelector?: boolean; + textFieldStyle?: React.CSSProperties; } - export class DatePicker extends React.Component { + export class DatePicker extends React.Component { } interface DatePickerDialogProp extends React.Props { - ref?: string | ((component: DatePickerDialog) => any); - + disableYearSelection?: boolean; + initialDate?: Date; + maxDate?: Date; + minDate?: Date; + onAccept?: (d: Date) => void; + onClickAway?: Function; + onDismiss?: Function; + onShow?: Function; + shouldDisableDate?: (day: Date) => boolean; + showYearSelector?: boolean; } - export class DatePickerDialog extends React.Component { + export class DatePickerDialog extends React.Component { } } @@ -347,42 +356,45 @@ declare namespace __MaterialUI { onClick?: React.MouseEventHandler; } interface DialogProp extends React.Props { - ref?: string | ((component: Dialog) => any); - actions?: Array>; actionFocus?: string; + autoDetectWindowHeight?: boolean; + autoScrollBodyContent?: boolean; + bodyStyle?: React.CSSProperties; contentClassName?: string; contentInnerStyle?: React.CSSProperties; contentStyle?: React.CSSProperties; modal?: boolean; openImmediately?: boolean; - title?: any; - autoDetectWindowHeight?: boolean; - autoScrollBodyContent?: boolean; + repositionOnUpdate?: boolean; + title?: React.ReactNode; - onDismiss?: () => void; - onShow?: () => void; + onClickAway?: Function; + onDismiss?: Function; + onShow?: Function; } - export class Dialog extends React.Component { + export class Dialog extends React.Component { dismiss(): void; show(): void; } interface DropDownIconProp extends React.Props { - ref?: string | ((component: DropDownIcon) => any); - + onChange?: Menu.ChangeHandler; + menuItems: Menu.MenuItemProp[]; + closeOnMenuItemTouchTap?: boolean; + iconStyle?: React.CSSProperties; + iconClassName?: string; + iconLigature?: string; } - export class DropDownIcon extends React.Component { + export class DropDownIcon extends React.Component { } interface DropDownMenuProp extends React.Props { - ref?: string | ((component: DropDownMenu) => any); - displayMember?: string; valueMember?: string; autoWidth?: boolean; - menuItems?: Array<{ text: string, payload: string } | {}>; - menuItemStyle?: React.CSSProperties[]; + menuItems: Menu.MenuItemProp[]; + menuItemStyle?: React.CSSProperties; selectedIndex?: number; underlineStyle?: React.CSSProperties; iconStyle?: React.CSSProperties; @@ -392,13 +404,14 @@ declare namespace __MaterialUI { valueLink?: ReactLink; value?: number; - onChange?: (e: TouchTapEvent, selectedIndex: number, menuItem: any) => void; + onChange?: Menu.ChangeHandler; } - export class DropDownMenu extends React.Component { + export class DropDownMenu extends React.Component { } // non generally overridden elements of EnhancedButton interface SharedEnhancedButtonProp extends React.HTMLAttributesBase { + centerRipple?: boolean; containerElement?: string | React.ReactElement; disabled?: boolean; disableFocusRipple?: boolean; @@ -413,6 +426,7 @@ declare namespace __MaterialUI { onBlur?: React.FocusEventHandler; onFocus?: React.FocusEventHandler; + onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void; onKeyDown?: React.KeyboardEventHandler; onKeyUp?: React.KeyboardEventHandler; onMouseEnter?: React.MouseEventHandler; @@ -423,19 +437,14 @@ declare namespace __MaterialUI { } interface EnhancedButtonProp extends SharedEnhancedButtonProp { - ref?: string | ((component: EnhancedButton) => any); - - onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void; touchRippleColor?: string; focusRippleColor?: string; style?: React.CSSProperties; } - export class EnhancedButton extends React.Component { + export class EnhancedButton extends React.Component { } interface FlatButtonProp extends SharedEnhancedButtonProp { - ref?: string | ((component: FlatButton) => any); - hoverColor?: string; label?: string; labelPosition?: string; @@ -448,12 +457,10 @@ declare namespace __MaterialUI { onKeyboardFocus?: (e: React.KeyboardEvent, isKeyboardFocused: boolean) => void; } - export class FlatButton extends React.Component { + export class FlatButton extends React.Component { } interface FloatingActionButtonProp extends SharedEnhancedButtonProp { - ref?: string | ((component: FloatingActionButton) => any); - backgroundColor?: string; disabled?: boolean; disabledColor?: string; @@ -463,12 +470,10 @@ declare namespace __MaterialUI { secondary?: boolean; style?: React.CSSProperties; } - export class FloatingActionButton extends React.Component { + export class FloatingActionButton extends React.Component { } interface FontIconProp extends React.Props { - ref?: string | ((component: FontIcon) => any); - color?: string; hoverColor?: string; onMouseLeave?: React.MouseEventHandler; @@ -476,12 +481,10 @@ declare namespace __MaterialUI { style?: React.CSSProperties; className?: string; } - export class FontIcon extends React.Component { + export class FontIcon extends React.Component { } interface IconButtonProp extends SharedEnhancedButtonProp { - ref?: string | ((component: IconButton) => any); - iconClassName?: string; iconStyle?: React.CSSProperties; style?: React.CSSProperties; @@ -493,66 +496,116 @@ declare namespace __MaterialUI { onBlur?: React.FocusEventHandler; onFocus?: React.FocusEventHandler; } - export class IconButton extends React.Component { + export class IconButton extends React.Component { } interface LeftNavProp extends React.Props { - ref?: string | ((component: LeftNav) => any); - + disableSwipeToOpen?: boolean; + docked?: boolean; + header?: React.ReactElement; + menuItems: Menu.MenuItemProp[]; + onChange?: Menu.ChangeHandler; + onNavOpen?: Function; + onNavClose?: Function; + openRight?: Boolean; + selectedIndex?: number; + menuItemClassName?: string; + menuItemClassNameSubheader?: string; + menuItemClassNameLink?: string; } - export class LeftNav extends React.Component { + export class LeftNav extends React.Component { } interface LinearProgressProp extends React.Props { - ref?: string | ((component: LinearProgress) => any); - + mode?: string; + value?: number; + min?: number; + max?: number; } - export class LinearProgress extends React.Component { + export class LinearProgress extends React.Component { } namespace Lists { interface ListProp extends React.Props { - ref?: string | ((component: List) => any); - + insetSubheader?: boolean; + subheader?: string; + subheaderStyle?: React.CSSProperties; + zDepth?: number; } - export class List extends React.Component { + export class List extends React.Component { } interface ListDividerProp extends React.Props { - ref?: string | ((component: ListDivider) => any); - + inset?: boolean; } - export class ListDivider extends React.Component { + export class ListDivider extends React.Component { } interface ListItemProp extends React.Props { - ref?: string | ((component: ListItem) => any); - + autoGenerateNestedIndicator?: boolean; + disableKeyboardFocus?: boolean; + initiallyOpen?: boolean; + innerDivStyle?: React.CSSProperties; + insetChildren?: boolean; + innerStyle?: React.CSSProperties; + leftAvatar?: React.ReactElement; + leftCheckbox?: React.ReactElement; + leftIcon?: React.ReactElement; + nestedLevel?: number; + nestedItems?: React.ReactElement[]; + onKeyboardFocus?: React.FocusEventHandler; + onNestedListToggle?: (item: ListItem) => void; + rightAvatar?: React.ReactElement; + rightIcon?: React.ReactElement; + rightIconButton?: React.ReactElement; + rightToggle?: React.ReactElement; + primaryText?: React.ReactNode; + secondaryText?: React.ReactNode; + secondaryTextLines?: number; } - export class ListItem extends React.Component { + export class ListItem extends React.Component { } } namespace Menu { - interface MenuProp extends React.Props { - ref?: string | ((component: Menu) => any); - + interface ChangeHandler { + (e: TouchTapEvent, key: number, payload: MenuItemProp): void; } - export class Menu extends React.Component { + interface MenuProp extends React.Props { + index: number; + text?: string; + menuItems: MenuItemProp[]; + zDepth?: number; + active?: boolean; + onItemTap?: ChangeHandler; + menuItemStyle?: React.CSSProperties; + } + export class Menu extends React.Component { } interface MenuItemProp extends React.Props { - ref?: string | ((component: MenuItem) => any); - + index: number; + iconClassName?: string; + iconRightClassName?: string; + iconStyle?: React.CSSProperties; + iconRightStyle?: React.CSSProperties; + attribute?: string; + number?: string; + data?: string; + toggle?: boolean; + onTouchTap?: (e: React.MouseEvent, key: number): void; + onToggle?: (e: React.MouseEvent, key: number, toggled: boolean): void; + selected?: boolean; + active?: boolean; } - export class MenuItem extends React.Component { + export class MenuItem extends React.Component { } } export namespace Mixins { interface ClickAwayable extends React.Mixin { } - var ClickAwayable: ClickAwayable + var ClickAwayable: ClickAwayable; interface WindowListenable extends React.Mixin { } @@ -568,23 +621,24 @@ declare namespace __MaterialUI { } interface OverlayProp extends React.Props { - ref?: string | ((component: Overlay) => any); - + autoLockScrolling?: boolean; + show?: boolean; + transitionEnabled?: boolean; } - export class Overlay extends React.Component { + export class Overlay extends React.Component { } interface PaperProp extends React.Props { - ref?: string | ((component: Paper) => any); - + circle?: boolean; + rounded?: boolean; + transitionEnabled?: boolean; + zDepth?: number; } - export class Paper extends React.Component { + export class Paper extends React.Component { } interface RadioButtonProp extends CommonEnhancedSwitchProp { // is root element - ref?: string | ((component: RadioButton) => any); - defaultChecked?: boolean; iconStyle?: React.CSSProperties; label?: string; @@ -592,13 +646,13 @@ declare namespace __MaterialUI { labelPosition?: string; style?: React.CSSProperties; value?: string; + + onChane: (e: React.FormEvent, selected: string) => void; } - export class RadioButton extends React.Component { + export class RadioButton extends React.Component { } interface RadioButtonGroupProp extends React.Props { - ref?: string | ((component: RadioButtonGroup) => any); - defaultSelected?: string; labelPosition?: string; name: string; @@ -607,15 +661,13 @@ declare namespace __MaterialUI { onChange?: (e: React.FormEvent, selected: string) => void; } - export class RadioButtonGroup extends React.Component { + export class RadioButtonGroup extends React.Component { getSelectedValue(): string; setSelectedValue(newSelectionValue: string): void; clearValue(): void; } interface RaisedButtonProp extends SharedEnhancedButtonProp { - ref?: string | ((component: RaisedButton) => any); - className?: string; disabled?: boolean; label?: string; @@ -628,42 +680,46 @@ declare namespace __MaterialUI { disabledLabelColor?: string; fullWidth?: boolean; } - export class RaisedButton extends React.Component { + export class RaisedButton extends React.Component { } interface RefreshIndicatorProp extends React.Props { - ref?: string | ((component: RefreshIndicator) => any); - + left: number; + percentage?: number; + size?: number; + status?: string; + top: number; } - export class RefreshIndicator extends React.Component { + export class RefreshIndicator extends React.Component { } namespace Ripples { interface CircleRippleProp extends React.Props { - ref?: string | ((component: CircleRipple) => any); - + color?: string; + opacity?: number; } - export class CircleRipple extends React.Component { + export class CircleRipple extends React.Component { } interface FocusRippleProp extends React.Props { - ref?: string | ((component: FocusRipple) => any); - + color?: string; + innerStyle?: React.CSSProperties; + opacity?: number; + show?: boolean; } - export class FocusRipple extends React.Component { + export class FocusRipple extends React.Component { } interface TouchRippleProp extends React.Props { - ref?: string | ((component: TouchRipple) => any); - + centerRipple?: boolean; + color?: string; + opacity?: number; } - export class TouchRipple extends React.Component { + export class TouchRipple extends React.Component { } } interface SelectFieldProp extends React.Props { - ref?: string | ((component: SelectField) => any); - // passed to TextField errorStyle?: React.CSSProperties; errorText?: string; @@ -676,8 +732,8 @@ declare namespace __MaterialUI { displayMember?: string; valueMember?: string; autoWidth?: boolean; - menuItems?: Array<{ text: string, payload: string } | {}>; - menuItemStyle?: React.CSSProperties[]; + menuItems: Array<{ text: string, payload: string } | {}>; + menuItemStyle?: React.CSSProperties; selectedIndex?: number; underlineStyle?: React.CSSProperties; iconStyle?: React.CSSProperties; @@ -688,52 +744,60 @@ declare namespace __MaterialUI { value?: number; onChange?: (e: TouchTapEvent, selectedIndex: number, menuItem: any) => void; + onEnterKeyDown?: React.KeyboardEventHandler; // own properties selectFieldRoot?: string; + multiLine?: boolean; + type?: string; + rows?: number; + inputStyle?: React.CSSProperties; + autoWidth?: boolean; } - export class SelectField extends React.Component { + export class SelectField extends React.Component { } interface SliderProp extends React.Props { - ref?: string | ((component: Slider) => any); - + name: string; + defaultValue?: number; + description?: string; + error?: string; + max?: number; + min?: number; + required?: boolean; + step?: number; + value?: number; } - export class Slider extends React.Component { + export class Slider extends React.Component { } interface SvgIconProp extends React.Props { - ref?: string | ((component: SvgIcon) => any); - + color?: string; + hoverColor?: string; + viewBox?: string; } - export class SvgIcon extends React.Component { + export class SvgIcon extends React.Component { } interface NavigationMenuProp extends React.Props { - ref?: string | ((component: NavigationMenu) => any); - } - export class NavigationMenu extends React.Component { + export class NavigationMenu extends React.Component { } interface NavigationChevronLeftProp extends React.Props { - ref?: string | ((component: NavigationChevronLeft) => any); - } - export class NavigationChevronLeft extends React.Component { + export class NavigationChevronLeft extends React.Component { } interface NavigationChevronRightProp extends React.Props { - ref?: string | ((component: NavigationChevronRight) => any); - } - export class NavigationChevronRight extends React.Component { + export class NavigationChevronRight extends React.Component { } export namespace Styles { interface AutoPrefix { - all(styles: any): any; - set(style: any, key: string, value: string | number): void; + all(styles: React.CSSProperties): React.CSSProperties; + set(style: React.CSSProperties, key: string, value: string | number): void; single(key: string): string; singleHyphened(key: string): string; } @@ -893,24 +957,31 @@ declare namespace __MaterialUI { } } interface CustomTheme { + spacing?: Spacing; + contentFontFamily?: string; getPalette(): ThemePalette; getComponentThemes(palette: ThemePalette, spacing: Spacing): Theme; } export class ThemeManager { + static: boolean; spacing: Spacing; palette: ThemePalette; - component: any; + component: Theme; + contentFontFamily: string; + template: CustomTheme; types: { LIGHT: CustomTheme; DARK: CustomTheme; }; - getCurrentTheme(): 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; } interface Transitions { @@ -921,7 +992,7 @@ declare namespace __MaterialUI { } export var Transitions: Transitions; - class TypographyClass { + interface Typography { textFullBlack:string; textDarkBlack: string; textLightBlack: string; @@ -937,107 +1008,147 @@ declare namespace __MaterialUI { fontStyleButtonFontSize: number; } - export var Typography: TypographyClass; + export var Typography: Typography; } interface SnackbarProp extends React.Props { - ref?: string | ((component: Snackbar) => any); - + message: string; + action?: string; + autoHideDuration?: number; + onActionTouchTap?: React.TouchEventHandler; + onShow?: Function; + onDismiss?: Function; + openOnMount?: boolean; } - export class Snackbar extends React.Component { + export class Snackbar extends React.Component { } namespace Tabs { interface TabProp extends React.Props { - ref?: string | ((component: Tab) => any); - label?: string; value?: string; - - onActive?: (tab: Tab) => void; + + handleTouchTap?: React.TouchEventHandler; + selected?: boolean; + width?: string; } - export class Tab extends React.Component { + export class Tab extends React.Component { } interface TabsProp extends React.Props { - ref?: string | ((component: Tabs) => any); - contentContainerStyle?: React.CSSProperties; initialSelectedIndex?: number; inkBarStyle?: React.CSSProperties; style?: React.CSSProperties; tabItemContainerStyle?: React.CSSProperties; + tabWidth?: number; value?: string | number; + onActive?: (tab: Tab) => void; onChange?: (value: string | number, e: React.FormEvent, tab: Tab) => void; } - export class Tabs extends React.Component { + export class Tabs extends React.Component { } } namespace Table { interface TableProp extends React.Props
{ - ref?: string | ((component: Table) => any); - + 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; } - export class Table extends React.Component { + export class Table extends React.Component { } interface TableBodyProp extends React.Props { - ref?: string | ((component: TableBody) => any); - + 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; } - export class TableBody extends React.Component { + export class TableBody extends React.Component { } interface TableFooterProp extends React.Props { - ref?: string | ((component: TableFooter) => any); - + adjustForCheckbox?: boolean; } - export class TableFooter extends React.Component { + export class TableFooter extends React.Component { } interface TableHeaderProp extends React.Props { - ref?: string | ((component: TableHeader) => any); - + adjustForCheckbox?: boolean; + displaySelectAll?: boolean; + enableSelectAll?: boolean; + onSelectAll?: (event: React.MouseEvent) => void;; + selectAllSelected?: boolean; } - export class TableHeader extends React.Component { + export class TableHeader extends React.Component { } interface TableHeaderColumnProp extends React.Props { - ref?: string | ((component: TableHeaderColumn) => any); - + columnNumber?: number; + onClick?: (e: React.MouseEvent, column: number): void;; + tooltip?: string; + tooltipStyle?: React.CSSProperties; } - export class TableHeaderColumn extends React.Component { + export class TableHeaderColumn extends React.Component { } interface TableRowProp extends React.Props { - ref?: string | ((component: TableRow) => any); - + 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; } - export class TableRow extends React.Component { + export class TableRow extends React.Component { } interface TableRowColumnProp extends React.Props { - ref?: string | ((component: TableRowColumn) => any); - + columnNumber?: number; + hoverable?: boolean; + onHover?: (e: React.MouseEvent, column: number): void;; + onHoverExit?: (e: React.MouseEvent, column: number): void;; } - export class TableRowColumn extends React.Component { + export class TableRowColumn extends React.Component { } } interface ThemeProp extends React.Props { - ref?: string | ((component: Theme) => any); - theme: Styles.CustomTheme; } - export class Theme extends React.Component { + export class Theme extends React.Component { static theme(customTheme: Styles.CustomTheme):

(Component: React.ComponentClass

) => React.ComponentClass

; } interface ToggleProp extends CommonEnhancedSwitchProp { // is root element - ref?: string | ((component: Toggle) => any); elementStyle?: React.CSSProperties; labelStyle?: React.CSSProperties; @@ -1045,21 +1156,22 @@ declare namespace __MaterialUI { toggled?: boolean; defaultToggled?: boolean; } - export class Toggle extends React.Component { + export class Toggle extends React.Component { isToggled(): boolean; setToggled(newToggledValue: boolean): void; } interface TimePickerProp extends React.Props { - ref?: string | ((component: TimePicker) => any); - + defaultTime?: Date; + format?: string; + pedantic?: boolean; + onShow?: Function; + onDismiss?: Function; } - export class TimePicker extends React.Component { + export class TimePicker extends React.Component { } interface TextFieldProp extends React.Props { - ref?: string | ((component: TextField) => any); - errorStyle?: React.CSSProperties; errorText?: string; floatingLabelText?: string; @@ -1069,11 +1181,12 @@ declare namespace __MaterialUI { id?: string; inputStyle?: React.CSSProperties; multiLine?: boolean; - onEnterKeyDown?: () => void; + onEnterKeyDown?: React.KeyboardEventHandler; style?: React.CSSProperties; rows?: number, underlineStyle?: React.CSSProperties; underlineFocusStyle?: React.CSSProperties; + underlineDisabledStyle?: React.CSSProperties; type?: string; disabled?: boolean; @@ -1087,7 +1200,7 @@ declare namespace __MaterialUI { onFocus?: React.FocusEventHandler; onKeyDown?: React.KeyboardEventHandler; } - export class TextField extends React.Component { + export class TextField extends React.Component { blur(): void; clearValue(): void; focus(): void; @@ -1098,75 +1211,77 @@ declare namespace __MaterialUI { namespace Toolbar { interface ToolbarProp extends React.Props { - ref?: string | ((component: Toolbar) => any); - } - export class Toolbar extends React.Component { + export class Toolbar extends React.Component { } interface ToolbarGroupProp extends React.Props { - ref?: string | ((component: ToolbarGroup) => any); - + float?: string; } - export class ToolbarGroup extends React.Component { + export class ToolbarGroup extends React.Component { } interface ToolbarSeparatorProp extends React.Props { - ref?: string | ((component: ToolbarSeparator) => any); - } - export class ToolbarSeparator extends React.Component { + export class ToolbarSeparator extends React.Component { } interface ToolbarTitleProp extends React.Props { - ref?: string | ((component: ToolbarTitle) => any); - + text?: string; } - export class ToolbarTitle extends React.Component { + export class ToolbarTitle extends React.Component { } } interface TooltipProp extends React.Props { - ref?: string | ((component: Tooltip) => any); - + label: string; + show?: boolean; + touch?: boolean; + verticalPosition?: string; + horizontalPosition?: string; } - export class Tooltip extends React.Component { + export class Tooltip extends React.Component { } export namespace Utils { + interface ContrastLevel { + range: [number, number]; + color: string; + } interface ColorManipulator { - fade(color: string, amount: number): string; - darken(color: string, amount: number): string; - contrastRatio(background: string, foreground: string): string; - contrastRatioLevel(background: string, foreground: string): any; + 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: (e: Event) => any): void; - onAnimationEnd(el: Element, callback: (e: Event) => any): void; + onTransitionEnd(el: Element, callback: () => void): void; + onAnimationEnd(el: Element, callback: () => void): void; } export var CssEvent: CssEvent; interface Dom { - isDescendant(parent: Element, child: Element): boolean; + isDescendant(parent: Node, child: Node): boolean; offset(el: Element): { top: number, left: number }; - getStyleAttributeAsNumber(el: Element, attr: string): 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: Element): void; - withoutTransition(el: Element, callback: () => any): void; + forceRedraw(el: HTMLElement): void; + withoutTransition(el: HTMLElement, callback: () => void): void; } export var Dom: Dom; interface Events { - once(el: Element, type: string, callback: (e: Event) => any): void; - on(el: Element, type: string, callback: (e: Event) => any): void; - off(el: Element, type: string, callback: (e: Event) => any): void; + 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; @@ -1174,10 +1289,10 @@ declare namespace __MaterialUI { function Extend(base: T, override: S1): (T & S1); interface ImmutabilityHelper { - merge(base: {}, ...args: {}[]): any; - mergeItem(obj: {}, key: string, newValueObject: {}): any; - push(array: T[], obj: T): T[]; - shift(array: T[]): T[]; + 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; @@ -1211,7 +1326,7 @@ declare namespace __MaterialUI { export var UniqueId: UniqueId; interface Styles { - mergeAndPrefix(base: {}, ...args: {}[]): any; + mergeAndPrefix(base: any, ...args: any[]): React.CSSProperties; } export var Styles: Styles; } @@ -1219,11 +1334,9 @@ declare namespace __MaterialUI { // New menus available only through requiring directly to the end file namespace Menus { interface IconMenuProp extends React.Props { - ref?: string | ((component: IconMenu) => any); - closeOnItemTouchTap?: boolean; desktop?: boolean; - iconButtonElement?: React.ReactElement; + iconButtonElement: React.ReactElement; openDirection?: string; menuStyle?: React.CSSProperties; multiple?: boolean; @@ -1231,10 +1344,11 @@ declare namespace __MaterialUI { width?: string | number; touchTapCloseDelay?: number; + onKeyboardFocus?: React.FocusEventHandler; onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void; onChange?: (e: React.FormEvent, value: string | Array) => void; } - export class IconMenu extends React.Component { + export class IconMenu extends React.Component { } interface MenuProp extends React.Props

{ From c3a4bd1aae40d1a1a42c4628610538b1edb033f1 Mon Sep 17 00:00:00 2001 From: "Ciuca, Alexandru" Date: Tue, 22 Sep 2015 17:39:21 +0300 Subject: [PATCH 4/7] Syntax fixes --- material-ui/material-ui.d.ts | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index b57778864..3c582d924 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -129,7 +129,7 @@ declare namespace __MaterialUI { export class AppBar extends React.Component{ } - interface AppCanvasProp extends React.Prop { + interface AppCanvasProp extends React.Props { } export class AppCanvas extends React.Component { @@ -321,7 +321,7 @@ declare namespace __MaterialUI { mode?: string; onDismiss?: Function; //TODO: typeof e? - onChange?: (e: any, d: Date): void; + onChange?: (e: any, d: Date) => void; onFocus?: React.FocusEventHandler; onShow?: Function; onTouchTap?: React.TouchEventHandler; @@ -454,8 +454,6 @@ declare namespace __MaterialUI { secondary?: boolean; rippleColor?: string; style?: React.CSSProperties; - - onKeyboardFocus?: (e: React.KeyboardEvent, isKeyboardFocused: boolean) => void; } export class FlatButton extends React.Component { } @@ -593,8 +591,8 @@ declare namespace __MaterialUI { number?: string; data?: string; toggle?: boolean; - onTouchTap?: (e: React.MouseEvent, key: number): void; - onToggle?: (e: React.MouseEvent, key: number, toggled: boolean): void; + onTouchTap?: (e: React.MouseEvent, key: number) => void; + onToggle?: (e: React.MouseEvent, key: number, toggled: boolean) => void; selected?: boolean; active?: boolean; } @@ -752,7 +750,6 @@ declare namespace __MaterialUI { type?: string; rows?: number; inputStyle?: React.CSSProperties; - autoWidth?: boolean; } export class SelectField extends React.Component { } @@ -1098,7 +1095,7 @@ declare namespace __MaterialUI { adjustForCheckbox?: boolean; displaySelectAll?: boolean; enableSelectAll?: boolean; - onSelectAll?: (event: React.MouseEvent) => void;; + onSelectAll?: (event: React.MouseEvent) => void; selectAllSelected?: boolean; } export class TableHeader extends React.Component { @@ -1106,7 +1103,7 @@ declare namespace __MaterialUI { interface TableHeaderColumnProp extends React.Props { columnNumber?: number; - onClick?: (e: React.MouseEvent, column: number): void;; + onClick?: (e: React.MouseEvent, column: number) => void; tooltip?: string; tooltipStyle?: React.CSSProperties; } @@ -1116,12 +1113,12 @@ declare namespace __MaterialUI { interface TableRowProp 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; + 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; @@ -1133,8 +1130,8 @@ declare namespace __MaterialUI { interface TableRowColumnProp extends React.Props { columnNumber?: number; hoverable?: boolean; - onHover?: (e: React.MouseEvent, column: number): void;; - onHoverExit?: (e: React.MouseEvent, column: number): void;; + onHover?: (e: React.MouseEvent, column: number) => void; + onHoverExit?: (e: React.MouseEvent, column: number) => void; } export class TableRowColumn extends React.Component { } @@ -1290,7 +1287,7 @@ declare namespace __MaterialUI { interface ImmutabilityHelper { merge(base: any, ...args: any[]): any; - mergeItem(obj: any, key: any, newValueObject: any: any; + mergeItem(obj: any, key: any, newValueObject: any): any; push(array: any[], obj: any): any; shift(array: any[]): any; } From 56b5eef102426106de4bd383ff5abedf6a93523c Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Tue, 22 Sep 2015 13:48:49 -0700 Subject: [PATCH 5/7] Clean up pull-request, keep tests passing. --- material-ui/material-ui-tests.ts | 4 +- material-ui/material-ui-tests.tsx | 2 +- material-ui/material-ui.d.ts | 117 +++++++++++++++++++----------- 3 files changed, 78 insertions(+), 45 deletions(-) diff --git a/material-ui/material-ui-tests.ts b/material-ui/material-ui-tests.ts index 3b8b34702..25a8e8bbe 100644 --- a/material-ui/material-ui-tests.ts +++ b/material-ui/material-ui-tests.ts @@ -137,7 +137,7 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta ]; element = React.createElement(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."); // "http://material-ui.com/#/components/dropdown-menu" - var menuItems = [ + var menuItems: __MaterialUI.Menu.MenuItemRequest[] = [ { payload: '1', text: 'Never' }, { payload: '2', text: 'Every Night' }, { payload: '3', text: 'Weeknights' }, @@ -192,7 +192,7 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true}); element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "defaultValue": "Disabled With Value"}); //Select Fields - var arbitraryArrayMenuItems = [ + var arbitraryArrayMenuItems: __MaterialUI.Menu.MenuItemRequest[] = [ { id: 0, name: "zero", diff --git a/material-ui/material-ui-tests.tsx b/material-ui/material-ui-tests.tsx index accae0d71..aa95efc1e 100644 --- a/material-ui/material-ui-tests.tsx +++ b/material-ui/material-ui-tests.tsx @@ -69,7 +69,7 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta let ThemeManager = new mui.Styles.ThemeManager(); ThemeManager.setTheme(ThemeManager.types.LIGHT); ThemeManager.setTheme(ThemeManager.types.DARK); - let muiTheme: __MaterialUI.Styles.CustomTheme = ThemeManager.getCurrentTheme(); + let muiTheme = ThemeManager.getCurrentTheme(); ThemeManager.setComponentThemes({ toggle: { thumbOnColor: "#00bcd4", diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 3c582d924..662b6c606 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -72,10 +72,10 @@ 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 TextField = __MaterialUI.TextField; // require('material-ui/lib/text-field'); export import Theme = __MaterialUI.Theme; // require('material-ui/lib/theme'); - export import TimePicker = __MaterialUI.TimePicker; // require('material-ui/lib/time-picker'); 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'); export import Toolbar = __MaterialUI.Toolbar.Toolbar; // require('material-ui/lib/toolbar/toolbar'); export import ToolbarGroup = __MaterialUI.Toolbar.ToolbarGroup; // require('material-ui/lib/toolbar/toolbar-group'); export import ToolbarSeparator = __MaterialUI.Toolbar.ToolbarSeparator; // require('material-ui/lib/toolbar/toolbar-separator'); @@ -84,9 +84,9 @@ declare module "material-ui" { export import Utils = __MaterialUI.Utils; // require('material-ui/lib/utils/'); // export type definitions - export import DialogAction = __MaterialUI.DialogAction; export import TouchTapEvent = __MaterialUI.TouchTapEvent; export import TouchTapEventHandler = __MaterialUI.TouchTapEventHandler; + export import DialogAction = __MaterialUI.DialogAction; } declare namespace __MaterialUI { @@ -130,7 +130,6 @@ declare namespace __MaterialUI { } interface AppCanvasProp extends React.Props { - } export class AppCanvas extends React.Component { } @@ -164,7 +163,7 @@ declare namespace __MaterialUI { onExpandedChange?: (isExpanded: boolean) => void; style?: React.CSSProperties; } - export class Card extends React.Component { + export class Card extends React.Component { } interface CardActionsProp extends React.Props { @@ -319,11 +318,13 @@ declare namespace __MaterialUI { maxDate?: Date; minDate?: Date; mode?: string; - onDismiss?: Function; - //TODO: typeof e? + onDismiss?: () => void; + + // e is always null onChange?: (e: any, d: Date) => void; + onFocus?: React.FocusEventHandler; - onShow?: Function; + onShow?: () => void; onTouchTap?: React.TouchEventHandler; shouldDisableDate?: (day: Date) => boolean; showYearSelector?: boolean; @@ -338,9 +339,9 @@ declare namespace __MaterialUI { maxDate?: Date; minDate?: Date; onAccept?: (d: Date) => void; - onClickAway?: Function; - onDismiss?: Function; - onShow?: Function; + onClickAway?: () => void; + onDismiss?: () => void; + onShow?: () => void; shouldDisableDate?: (day: Date) => boolean; showYearSelector?: boolean; } @@ -369,9 +370,9 @@ declare namespace __MaterialUI { repositionOnUpdate?: boolean; title?: React.ReactNode; - onClickAway?: Function; - onDismiss?: Function; - onShow?: Function; + onClickAway?: () => void; + onDismiss?: () => void; + onShow?: () => void; } export class Dialog extends React.Component { dismiss(): void; @@ -379,12 +380,13 @@ declare namespace __MaterialUI { } interface DropDownIconProp extends React.Props { - onChange?: Menu.ChangeHandler; - menuItems: Menu.MenuItemProp[]; + menuItems: Menu.MenuItemRequest[]; closeOnMenuItemTouchTap?: boolean; iconStyle?: React.CSSProperties; iconClassName?: string; iconLigature?: string; + + onChange?: Menu.ItemTapEventHandler; } export class DropDownIcon extends React.Component { } @@ -393,7 +395,7 @@ declare namespace __MaterialUI { displayMember?: string; valueMember?: string; autoWidth?: boolean; - menuItems: Menu.MenuItemProp[]; + menuItems: Menu.MenuItemRequest[]; menuItemStyle?: React.CSSProperties; selectedIndex?: number; underlineStyle?: React.CSSProperties; @@ -404,7 +406,7 @@ declare namespace __MaterialUI { valueLink?: ReactLink; value?: number; - onChange?: Menu.ChangeHandler; + onChange?: Menu.ItemTapEventHandler; } export class DropDownMenu extends React.Component { } @@ -501,10 +503,10 @@ declare namespace __MaterialUI { disableSwipeToOpen?: boolean; docked?: boolean; header?: React.ReactElement; - menuItems: Menu.MenuItemProp[]; - onChange?: Menu.ChangeHandler; - onNavOpen?: Function; - onNavClose?: Function; + menuItems: Menu.MenuItemRequest[]; + onChange?: Menu.ItemTapEventHandler; + onNavOpen?: () => void; + onNavClose?: () => void; openRight?: Boolean; selectedIndex?: number; menuItemClassName?: string; @@ -565,17 +567,41 @@ declare namespace __MaterialUI { } } + // Old menu implementation. Being replaced by new "menus". namespace Menu { - interface ChangeHandler { - (e: TouchTapEvent, key: number, payload: MenuItemProp): void; + interface ItemTapEventHandler { + (e: TouchTapEvent, index: number, menuItem: MenuItemRequest): void; } + + // almost extends MenuItemProp, but certain required items are generated in Menu and not passed here. + interface MenuItemRequest extends React.Props { + // use value from MenuItem.Types.* + type?: string; + + text?: string; + data?: string; + payload?: string; + icon?: React.ReactElement; + attribute?: string; + number?: string; + toggle?: boolean; + onTouchTap?: TouchTapEventHandler; + isDisabled?: boolean; + + // for MenuItems.Types.NESTED + items?: MenuItemRequest[]; + + // for custom text or payloads + [propertyName: string]: any; + } + interface MenuProp extends React.Props { index: number; text?: string; - menuItems: MenuItemProp[]; + menuItems: MenuItemRequest[]; zDepth?: number; active?: boolean; - onItemTap?: ChangeHandler; + onItemTap?: ItemTapEventHandler; menuItemStyle?: React.CSSProperties; } export class Menu extends React.Component { @@ -583,6 +609,7 @@ declare namespace __MaterialUI { interface MenuItemProp extends React.Props { index: number; + icon?: React.ReactElement; iconClassName?: string; iconRightClassName?: string; iconStyle?: React.CSSProperties; @@ -597,6 +624,7 @@ declare namespace __MaterialUI { active?: boolean; } export class MenuItem extends React.Component { + static Types: { LINK: string, SUBHEADER: string, NESTED: string, } } } @@ -645,7 +673,7 @@ declare namespace __MaterialUI { style?: React.CSSProperties; value?: string; - onChane: (e: React.FormEvent, selected: string) => void; + onCheck?: (e: React.FormEvent, selected: string) => void; } export class RadioButton extends React.Component { } @@ -730,7 +758,7 @@ declare namespace __MaterialUI { displayMember?: string; valueMember?: string; autoWidth?: boolean; - menuItems: Array<{ text: string, payload: string } | {}>; + menuItems: Menu.MenuItemRequest[]; menuItemStyle?: React.CSSProperties; selectedIndex?: number; underlineStyle?: React.CSSProperties; @@ -741,7 +769,7 @@ declare namespace __MaterialUI { valueLink?: ReactLink; value?: number; - onChange?: (e: TouchTapEvent, selectedIndex: number, menuItem: any) => void; + onChange?: Menu.ItemTapEventHandler; onEnterKeyDown?: React.KeyboardEventHandler; // own properties @@ -1013,8 +1041,8 @@ declare namespace __MaterialUI { action?: string; autoHideDuration?: number; onActionTouchTap?: React.TouchEventHandler; - onShow?: Function; - onDismiss?: Function; + onShow?: () => void; + onDismiss?: () => void; openOnMount?: boolean; } export class Snackbar extends React.Component { @@ -1024,10 +1052,13 @@ declare namespace __MaterialUI { interface TabProp extends React.Props { label?: string; value?: string; - - handleTouchTap?: React.TouchEventHandler; selected?: boolean; width?: string; + + // Called by Tabs component + onActive?: (tab: Tab) => void; + + onTouchTap?: (value: string, e: TouchTapEvent, tab: Tab) => void; } export class Tab extends React.Component { } @@ -1041,7 +1072,6 @@ declare namespace __MaterialUI { tabWidth?: number; value?: string | number; - onActive?: (tab: Tab) => void; onChange?: (value: string | number, e: React.FormEvent, tab: Tab) => void; } export class Tabs extends React.Component { @@ -1162,8 +1192,11 @@ declare namespace __MaterialUI { defaultTime?: Date; format?: string; pedantic?: boolean; - onShow?: Function; - onDismiss?: Function; + onFocus?: React.FocusEventHandler; + onTouchTap?: TouchTapEventHandler; + onChange?: (e: any, time: Date) => void; + onShow?: () => void; + onDismiss?: () => void; } export class TimePicker extends React.Component { } @@ -1288,8 +1321,8 @@ declare namespace __MaterialUI { 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; + push(array: any[], obj: any): any[]; + shift(array: any[]): any[]; } export var ImmutabilityHelper: ImmutabilityHelper; @@ -1360,7 +1393,7 @@ declare namespace __MaterialUI { width?: string | number; zDepth?: number; } - export class Menu extends React.Component{ + export class Menu extends React.Component{ } interface MenuItemProp extends React.Props { @@ -1372,21 +1405,21 @@ declare namespace __MaterialUI { leftIcon?: React.ReactElement; primaryText?: string | React.ReactElement; rightIcon?: React.ReactElement; - secondaryText?: string | React.ReactElement; + secondaryText?: React.ReactNode; value?: string; onEscKeyDown?: React.KeyboardEventHandler; onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void; onChange?: (e: React.FormEvent, value: string) => void; } - export class MenuItem extends React.Component{ + export class MenuItem extends React.Component{ } interface MenuDividerProp extends React.Props { inset?: boolean; style?: React.CSSProperties; } - export class MenuDivider extends React.Component{ + export class MenuDivider extends React.Component{ } } } // __MaterialUI From 072817135e046c9893eb9db4b89a56f8962da338 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Tue, 22 Sep 2015 14:20:53 -0700 Subject: [PATCH 6/7] Convert all *Prop to *Props. --- material-ui/material-ui-tests.ts | 6 +- material-ui/material-ui-tests.tsx | 4 +- material-ui/material-ui.d.ts | 288 +++++++++++++++--------------- 3 files changed, 149 insertions(+), 149 deletions(-) diff --git a/material-ui/material-ui-tests.ts b/material-ui/material-ui-tests.ts index 25a8e8bbe..7df5f5960 100644 --- a/material-ui/material-ui-tests.ts +++ b/material-ui/material-ui-tests.ts @@ -8,7 +8,7 @@ // a. Find "var element;" and change to "let element: React.ReactElement;". // b. Replace "this.linkState(" with "this.linkState(". // c. Add generic type help for the Component Property to the remaining errors on -// React.createElement, for example, add "<__MaterialUI.DialogProp>". +// React.createElement, for example, add "<__MaterialUI.DialogProps>". /// /// @@ -129,7 +129,7 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta { text: 'Cancel' }, { text: 'Submit', onTouchTap: this.touchTapEventHandler, ref: 'submit' } ]; - element = React.createElement<__MaterialUI.DialogProp>(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."); + element = React.createElement<__MaterialUI.DialogProps>(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."); //Custom Actions var customActions = [ React.createElement(FlatButton, {"label": "Cancel", "secondary": true, "onTouchTap": this.touchTapEventHandler}), @@ -170,7 +170,7 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta // "http://material-ui.com/#/components/switches" element = React.createElement(Checkbox, {"name": "checkboxName2", "value": "checkboxValue2", "label": "fed the dog", "defaultChecked": true}); element = React.createElement(Checkbox, {"name": "checkboxName3", "value": "checkboxValue3", "label": "built a house on the moon", "disabled": true}); - element = React.createElement<__MaterialUI.CheckboxProp>(Checkbox, {"name": "checkboxName4", "value": "checkboxValue4", "checkedIcon": React.createElement(ToggleStar, null), "unCheckedIcon": React.createElement(ToggleStarBorder, null), "label": "custom icon"}); + element = React.createElement<__MaterialUI.CheckboxProps>(Checkbox, {"name": "checkboxName4", "value": "checkboxValue4", "checkedIcon": React.createElement(ToggleStar, null), "unCheckedIcon": React.createElement(ToggleStarBorder, null), "label": "custom icon"}); element = React.createElement(RadioButtonGroup, {"name": "shipSpeed", "defaultSelected": "not_light"}, React.createElement(RadioButton, {"value": "light", "label": "prepare for light speed", "style": { marginBottom: 16 }}), ";", React.createElement(RadioButton, {"value": "not_light", "label": "light speed too slow", "style": { marginBottom: 16 }}), ";", React.createElement(RadioButton, {"value": "ludicrous", "label": "go to ludicrous speed", "style": { marginBottom: 16 }, "disabled": true})); element = React.createElement(Toggle, {"name": "toggleName1", "value": "toggleValue1", "label": "activate thrusters"}); element = React.createElement(Toggle, {"name": "toggleName2", "value": "toggleValue2", "label": "auto-pilot", "defaultToggled": true}); diff --git a/material-ui/material-ui-tests.tsx b/material-ui/material-ui-tests.tsx index aa95efc1e..fb32aac5e 100644 --- a/material-ui/material-ui-tests.tsx +++ b/material-ui/material-ui-tests.tsx @@ -8,7 +8,7 @@ // a. Find "var element;" and change to "let element: React.ReactElement;". // b. Replace "this.linkState(" with "this.linkState(". // c. Add generic type help for the Component Property to the remaining errors on -// React.createElement, for example, add "<__MaterialUI.DialogProp>". +// React.createElement, for example, add "<__MaterialUI.DialogProps>". /// /// @@ -92,7 +92,7 @@ class MaterialUiTests extends React.Component<{}, {}> implements React.LinkedSta iconStyle={{ fill: '#FF4081' }}/> - element = React.createElement<__MaterialUI.CheckboxProp>(Checkbox, { + element = React.createElement<__MaterialUI.CheckboxProps>(Checkbox, { id: "checkboxId1", name: "checkboxName1", value: "checkboxValue1", label: "went for a run today", style: { width: '50%', margin: '0 auto' diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 662b6c606..c5c37ee91 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -112,7 +112,7 @@ declare namespace __MaterialUI { // more specific than React.HTMLAttributes - interface AppBarProp extends React.Props { + interface AppBarProps extends React.Props { iconClassNameLeft?: string; iconClassNameRight?: string; iconElementLeft?: React.ReactElement; @@ -126,15 +126,15 @@ declare namespace __MaterialUI { onLeftIconButtonTouchTap?: TouchTapEventHandler; onRightIconButtonTouchTap?: TouchTapEventHandler; } - export class AppBar extends React.Component{ + export class AppBar extends React.Component{ } - interface AppCanvasProp extends React.Props { + interface AppCanvasProps extends React.Props { } - export class AppCanvas extends React.Component { + export class AppCanvas extends React.Component { } - interface AvatarProp extends React.Props { + interface AvatarProps extends React.Props { icon?: React.ReactElement; backgroundColor?: string; color?: string; @@ -142,45 +142,45 @@ declare namespace __MaterialUI { src?: string; style?: React.CSSProperties; } - export class Avatar extends React.Component { + export class Avatar extends React.Component { } - interface BeforeAfterWrapperProp extends React.Props { + interface BeforeAfterWrapperProps extends React.Props { beforeStyle?: React.CSSProperties; afterStyle?: React.CSSProperties; beforeElementType?: string; afterElementType?: string; elementType?: string; } - export class BeforeAfterWrapper extends React.Component { + export class BeforeAfterWrapper extends React.Component { } namespace Card { - interface CardProp extends React.Props { + interface CardProps extends React.Props { expandable?: boolean; initiallyExpanded?: boolean; onExpandedChange?: (isExpanded: boolean) => void; style?: React.CSSProperties; } - export class Card extends React.Component { + export class Card extends React.Component { } - interface CardActionsProp extends React.Props { + interface CardActionsProps extends React.Props { expandable?: boolean; showExpandableButton?: boolean; } - export class CardActions extends React.Component { + export class CardActions extends React.Component { } - interface CardExpandableProp extends React.Props { + interface CardExpandableProps extends React.Props { onExpanding?: (isExpanded: boolean) => void; expanded?: boolean; } - export class CardExpandable extends React.Component { + export class CardExpandable extends React.Component { } - interface CardHeaderProp extends React.Props { + interface CardHeaderProps extends React.Props { expandable?: boolean; showExpandableButton?: boolean; title?: string | React.ReactElement; @@ -193,10 +193,10 @@ declare namespace __MaterialUI { style?: React.CSSProperties; avatar: React.ReactElement | string; } - export class CardHeader extends React.Component { + export class CardHeader extends React.Component { } - interface CardMediaProp extends React.Props { + interface CardMediaProps extends React.Props { expandable?: boolean; overlay?: React.ReactNode; overlayStyle?: React.CSSProperties; @@ -205,18 +205,18 @@ declare namespace __MaterialUI { mediaStyle?: React.CSSProperties; style?: React.CSSProperties; } - export class CardMedia extends React.Component { + export class CardMedia extends React.Component { } - interface CardTextProp extends React.Props { + interface CardTextProps extends React.Props { expandable?: boolean; color?: string; style?: React.CSSProperties; } - export class CardText extends React.Component { + export class CardText extends React.Component { } - interface CardTitleProp extends React.Props { + interface CardTitleProps extends React.Props { expandable?: boolean; showExpandableButton?: boolean; title?: string | React.ReactElement; @@ -228,12 +228,12 @@ declare namespace __MaterialUI { textStyle?: React.CSSProperties; style?: React.CSSProperties; } - export class CardTitle extends React.Component { + export class CardTitle extends React.Component { } } // what's not commonly overridden by Checkbox, RadioButton, or Toggle - interface CommonEnhancedSwitchProp extends React.HTMLAttributesBase { + interface CommonEnhancedSwitchProps extends React.HTMLAttributesBase { // is root element id?: string; iconStyle?: React.CSSProperties; @@ -251,7 +251,7 @@ declare namespace __MaterialUI { disableTouchRipple?: boolean; } - interface EnhancedSwitchProp extends CommonEnhancedSwitchProp { + interface EnhancedSwitchProps extends CommonEnhancedSwitchProps { // is root element inputType: string; switchElement: React.ReactElement; @@ -261,14 +261,14 @@ declare namespace __MaterialUI { onSwitch?: (e: React.MouseEvent, isInputChecked: boolean) => void; labelPosition?: string; } - export class EnhancedSwitch extends React.Component { + export class EnhancedSwitch extends React.Component { isSwitched(): boolean; setSwitched(newSwitchedValue: boolean): void; getValue(): any; isKeyboardFocused(): boolean; } - interface CheckboxProp extends CommonEnhancedSwitchProp { + interface CheckboxProps extends CommonEnhancedSwitchProps { // is root element checkedIcon?: React.ReactElement<{ style?: React.CSSProperties }>; // Normally an SvgIcon defaultChecked?: boolean; @@ -286,12 +286,12 @@ declare namespace __MaterialUI { onCheck?: (event: React.MouseEvent, checked: boolean) => void; } - export class Checkbox extends React.Component { + export class Checkbox extends React.Component { isChecked(): void; setChecked(newCheckedValue: boolean): void; } - interface CircularProgressProp extends React.Props { + interface CircularProgressProps extends React.Props { mode?: string; value?: number; min?: number; @@ -301,16 +301,16 @@ declare namespace __MaterialUI { innerStyle?: React.CSSProperties; } - export class CircularProgress extends React.Component { + export class CircularProgress extends React.Component { } - interface ClearFixProp extends React.Props { + interface ClearFixProps extends React.Props { } - export class ClearFix extends React.Component { + export class ClearFix extends React.Component { } namespace DatePicker { - interface DatePickerProp extends React.Props { + interface DatePickerProps extends React.Props { autoOk?: boolean; defaultDate?: Date; formatDate?: string; @@ -330,10 +330,10 @@ declare namespace __MaterialUI { showYearSelector?: boolean; textFieldStyle?: React.CSSProperties; } - export class DatePicker extends React.Component { + export class DatePicker extends React.Component { } - interface DatePickerDialogProp extends React.Props { + interface DatePickerDialogProps extends React.Props { disableYearSelection?: boolean; initialDate?: Date; maxDate?: Date; @@ -345,7 +345,7 @@ declare namespace __MaterialUI { shouldDisableDate?: (day: Date) => boolean; showYearSelector?: boolean; } - export class DatePickerDialog extends React.Component { + export class DatePickerDialog extends React.Component { } } @@ -356,7 +356,7 @@ declare namespace __MaterialUI { onTouchTap?: TouchTapEventHandler; onClick?: React.MouseEventHandler; } - interface DialogProp extends React.Props { + interface DialogProps extends React.Props { actions?: Array>; actionFocus?: string; autoDetectWindowHeight?: boolean; @@ -374,12 +374,12 @@ declare namespace __MaterialUI { onDismiss?: () => void; onShow?: () => void; } - export class Dialog extends React.Component { + export class Dialog extends React.Component { dismiss(): void; show(): void; } - interface DropDownIconProp extends React.Props { + interface DropDownIconProps extends React.Props { menuItems: Menu.MenuItemRequest[]; closeOnMenuItemTouchTap?: boolean; iconStyle?: React.CSSProperties; @@ -388,10 +388,10 @@ declare namespace __MaterialUI { onChange?: Menu.ItemTapEventHandler; } - export class DropDownIcon extends React.Component { + export class DropDownIcon extends React.Component { } - interface DropDownMenuProp extends React.Props { + interface DropDownMenuProps extends React.Props { displayMember?: string; valueMember?: string; autoWidth?: boolean; @@ -408,11 +408,11 @@ declare namespace __MaterialUI { onChange?: Menu.ItemTapEventHandler; } - export class DropDownMenu extends React.Component { + export class DropDownMenu extends React.Component { } // non generally overridden elements of EnhancedButton - interface SharedEnhancedButtonProp extends React.HTMLAttributesBase { + interface SharedEnhancedButtonProps extends React.HTMLAttributesBase { centerRipple?: boolean; containerElement?: string | React.ReactElement; disabled?: boolean; @@ -438,15 +438,15 @@ declare namespace __MaterialUI { onTouchTap?: TouchTapEventHandler; } - interface EnhancedButtonProp extends SharedEnhancedButtonProp { + interface EnhancedButtonProps extends SharedEnhancedButtonProps { touchRippleColor?: string; focusRippleColor?: string; style?: React.CSSProperties; } - export class EnhancedButton extends React.Component { + export class EnhancedButton extends React.Component { } - interface FlatButtonProp extends SharedEnhancedButtonProp { + interface FlatButtonProps extends SharedEnhancedButtonProps { hoverColor?: string; label?: string; labelPosition?: string; @@ -457,10 +457,10 @@ declare namespace __MaterialUI { rippleColor?: string; style?: React.CSSProperties; } - export class FlatButton extends React.Component { + export class FlatButton extends React.Component { } - interface FloatingActionButtonProp extends SharedEnhancedButtonProp { + interface FloatingActionButtonProps extends SharedEnhancedButtonProps { backgroundColor?: string; disabled?: boolean; disabledColor?: string; @@ -470,10 +470,10 @@ declare namespace __MaterialUI { secondary?: boolean; style?: React.CSSProperties; } - export class FloatingActionButton extends React.Component { + export class FloatingActionButton extends React.Component { } - interface FontIconProp extends React.Props { + interface FontIconProps extends React.Props { color?: string; hoverColor?: string; onMouseLeave?: React.MouseEventHandler; @@ -481,10 +481,10 @@ declare namespace __MaterialUI { style?: React.CSSProperties; className?: string; } - export class FontIcon extends React.Component { + export class FontIcon extends React.Component { } - interface IconButtonProp extends SharedEnhancedButtonProp { + interface IconButtonProps extends SharedEnhancedButtonProps { iconClassName?: string; iconStyle?: React.CSSProperties; style?: React.CSSProperties; @@ -496,10 +496,10 @@ declare namespace __MaterialUI { onBlur?: React.FocusEventHandler; onFocus?: React.FocusEventHandler; } - export class IconButton extends React.Component { + export class IconButton extends React.Component { } - interface LeftNavProp extends React.Props { + interface LeftNavProps extends React.Props { disableSwipeToOpen?: boolean; docked?: boolean; header?: React.ReactElement; @@ -513,35 +513,35 @@ declare namespace __MaterialUI { menuItemClassNameSubheader?: string; menuItemClassNameLink?: string; } - export class LeftNav extends React.Component { + export class LeftNav extends React.Component { } - interface LinearProgressProp extends React.Props { + interface LinearProgressProps extends React.Props { mode?: string; value?: number; min?: number; max?: number; } - export class LinearProgress extends React.Component { + export class LinearProgress extends React.Component { } namespace Lists { - interface ListProp extends React.Props { + interface ListProps extends React.Props { insetSubheader?: boolean; subheader?: string; subheaderStyle?: React.CSSProperties; zDepth?: number; } - export class List extends React.Component { + export class List extends React.Component { } - interface ListDividerProp extends React.Props { + interface ListDividerProps extends React.Props { inset?: boolean; } - export class ListDivider extends React.Component { + export class ListDivider extends React.Component { } - interface ListItemProp extends React.Props { + interface ListItemProps extends React.Props { autoGenerateNestedIndicator?: boolean; disableKeyboardFocus?: boolean; initiallyOpen?: boolean; @@ -563,7 +563,7 @@ declare namespace __MaterialUI { secondaryText?: React.ReactNode; secondaryTextLines?: number; } - export class ListItem extends React.Component { + export class ListItem extends React.Component { } } @@ -573,7 +573,7 @@ declare namespace __MaterialUI { (e: TouchTapEvent, index: number, menuItem: MenuItemRequest): void; } - // almost extends MenuItemProp, but certain required items are generated in Menu and not passed here. + // almost extends MenuItemProps, but certain required items are generated in Menu and not passed here. interface MenuItemRequest extends React.Props { // use value from MenuItem.Types.* type?: string; @@ -595,7 +595,7 @@ declare namespace __MaterialUI { [propertyName: string]: any; } - interface MenuProp extends React.Props { + interface MenuProps extends React.Props { index: number; text?: string; menuItems: MenuItemRequest[]; @@ -604,10 +604,10 @@ declare namespace __MaterialUI { onItemTap?: ItemTapEventHandler; menuItemStyle?: React.CSSProperties; } - export class Menu extends React.Component { + export class Menu extends React.Component { } - interface MenuItemProp extends React.Props { + interface MenuItemProps extends React.Props { index: number; icon?: React.ReactElement; iconClassName?: string; @@ -623,7 +623,7 @@ declare namespace __MaterialUI { selected?: boolean; active?: boolean; } - export class MenuItem extends React.Component { + export class MenuItem extends React.Component { static Types: { LINK: string, SUBHEADER: string, NESTED: string, } } } @@ -646,24 +646,24 @@ declare namespace __MaterialUI { var StyleResizable: StyleResizable } - interface OverlayProp extends React.Props { + interface OverlayProps extends React.Props { autoLockScrolling?: boolean; show?: boolean; transitionEnabled?: boolean; } - export class Overlay extends React.Component { + export class Overlay extends React.Component { } - interface PaperProp extends React.Props { + interface PaperProps extends React.Props { circle?: boolean; rounded?: boolean; transitionEnabled?: boolean; zDepth?: number; } - export class Paper extends React.Component { + export class Paper extends React.Component { } - interface RadioButtonProp extends CommonEnhancedSwitchProp { + interface RadioButtonProps extends CommonEnhancedSwitchProps { // is root element defaultChecked?: boolean; iconStyle?: React.CSSProperties; @@ -675,10 +675,10 @@ declare namespace __MaterialUI { onCheck?: (e: React.FormEvent, selected: string) => void; } - export class RadioButton extends React.Component { + export class RadioButton extends React.Component { } - interface RadioButtonGroupProp extends React.Props { + interface RadioButtonGroupProps extends React.Props { defaultSelected?: string; labelPosition?: string; name: string; @@ -687,13 +687,13 @@ declare namespace __MaterialUI { onChange?: (e: React.FormEvent, selected: string) => void; } - export class RadioButtonGroup extends React.Component { + export class RadioButtonGroup extends React.Component { getSelectedValue(): string; setSelectedValue(newSelectionValue: string): void; clearValue(): void; } - interface RaisedButtonProp extends SharedEnhancedButtonProp { + interface RaisedButtonProps extends SharedEnhancedButtonProps { className?: string; disabled?: boolean; label?: string; @@ -706,46 +706,46 @@ declare namespace __MaterialUI { disabledLabelColor?: string; fullWidth?: boolean; } - export class RaisedButton extends React.Component { + export class RaisedButton extends React.Component { } - interface RefreshIndicatorProp extends React.Props { + interface RefreshIndicatorProps extends React.Props { left: number; percentage?: number; size?: number; status?: string; top: number; } - export class RefreshIndicator extends React.Component { + export class RefreshIndicator extends React.Component { } namespace Ripples { - interface CircleRippleProp extends React.Props { + interface CircleRippleProps extends React.Props { color?: string; opacity?: number; } - export class CircleRipple extends React.Component { + export class CircleRipple extends React.Component { } - interface FocusRippleProp extends React.Props { + interface FocusRippleProps extends React.Props { color?: string; innerStyle?: React.CSSProperties; opacity?: number; show?: boolean; } - export class FocusRipple extends React.Component { + export class FocusRipple extends React.Component { } - interface TouchRippleProp extends React.Props { + interface TouchRippleProps extends React.Props { centerRipple?: boolean; color?: string; opacity?: number; } - export class TouchRipple extends React.Component { + export class TouchRipple extends React.Component { } } - interface SelectFieldProp extends React.Props { + interface SelectFieldProps extends React.Props { // passed to TextField errorStyle?: React.CSSProperties; errorText?: string; @@ -779,10 +779,10 @@ declare namespace __MaterialUI { rows?: number; inputStyle?: React.CSSProperties; } - export class SelectField extends React.Component { + export class SelectField extends React.Component { } - interface SliderProp extends React.Props { + interface SliderProps extends React.Props { name: string; defaultValue?: number; description?: string; @@ -793,30 +793,30 @@ declare namespace __MaterialUI { step?: number; value?: number; } - export class Slider extends React.Component { + export class Slider extends React.Component { } - interface SvgIconProp extends React.Props { + interface SvgIconProps extends React.Props { color?: string; hoverColor?: string; viewBox?: string; } - export class SvgIcon extends React.Component { + export class SvgIcon extends React.Component { } - interface NavigationMenuProp extends React.Props { + interface NavigationMenuProps extends React.Props { } - export class NavigationMenu extends React.Component { + export class NavigationMenu extends React.Component { } - interface NavigationChevronLeftProp extends React.Props { + interface NavigationChevronLeftProps extends React.Props { } - export class NavigationChevronLeft extends React.Component { + export class NavigationChevronLeft extends React.Component { } - interface NavigationChevronRightProp extends React.Props { + interface NavigationChevronRightProps extends React.Props { } - export class NavigationChevronRight extends React.Component { + export class NavigationChevronRight extends React.Component { } export namespace Styles { @@ -1036,7 +1036,7 @@ declare namespace __MaterialUI { export var Typography: Typography; } - interface SnackbarProp extends React.Props { + interface SnackbarProps extends React.Props { message: string; action?: string; autoHideDuration?: number; @@ -1045,11 +1045,11 @@ declare namespace __MaterialUI { onDismiss?: () => void; openOnMount?: boolean; } - export class Snackbar extends React.Component { + export class Snackbar extends React.Component { } namespace Tabs { - interface TabProp extends React.Props { + interface TabProps extends React.Props { label?: string; value?: string; selected?: boolean; @@ -1060,10 +1060,10 @@ declare namespace __MaterialUI { onTouchTap?: (value: string, e: TouchTapEvent, tab: Tab) => void; } - export class Tab extends React.Component { + export class Tab extends React.Component { } - interface TabsProp extends React.Props { + interface TabsProps extends React.Props { contentContainerStyle?: React.CSSProperties; initialSelectedIndex?: number; inkBarStyle?: React.CSSProperties; @@ -1074,12 +1074,12 @@ declare namespace __MaterialUI { onChange?: (value: string | number, e: React.FormEvent, tab: Tab) => void; } - export class Tabs extends React.Component { + export class Tabs extends React.Component { } } namespace Table { - interface TableProp extends React.Props
{ + interface TableProps extends React.Props
{ allRowsSelected?: boolean; fixedFooter?: boolean; fixedHeader?: boolean; @@ -1093,10 +1093,10 @@ declare namespace __MaterialUI { onRowSelection?: (selectedRows: number[])=> void; selectable?: boolean; } - export class Table extends React.Component { + export class Table extends React.Component { } - interface TableBodyProp extends React.Props { + interface TableBodyProps extends React.Props { allRowsSelected?: boolean; deselectOnClickaway?: boolean; displayRowCheckbox?: boolean; @@ -1112,35 +1112,35 @@ declare namespace __MaterialUI { showRowHover?: boolean; stripedRows?: boolean; } - export class TableBody extends React.Component { + export class TableBody extends React.Component { } - interface TableFooterProp extends React.Props { + interface TableFooterProps extends React.Props { adjustForCheckbox?: boolean; } - export class TableFooter extends React.Component { + export class TableFooter extends React.Component { } - interface TableHeaderProp extends React.Props { + interface TableHeaderProps extends React.Props { adjustForCheckbox?: boolean; displaySelectAll?: boolean; enableSelectAll?: boolean; onSelectAll?: (event: React.MouseEvent) => void; selectAllSelected?: boolean; } - export class TableHeader extends React.Component { + export class TableHeader extends React.Component { } - interface TableHeaderColumnProp extends React.Props { + interface TableHeaderColumnProps extends React.Props { columnNumber?: number; onClick?: (e: React.MouseEvent, column: number) => void; tooltip?: string; tooltipStyle?: React.CSSProperties; } - export class TableHeaderColumn extends React.Component { + export class TableHeaderColumn extends React.Component { } - interface TableRowProp extends React.Props { + interface TableRowProps extends React.Props { displayBorder?: boolean; hoverable?: boolean; onCellClick?: (e: React.MouseEvent, row: number, column: number) => void; @@ -1154,27 +1154,27 @@ declare namespace __MaterialUI { selected?: boolean; striped?: boolean; } - export class TableRow extends React.Component { + export class TableRow extends React.Component { } - interface TableRowColumnProp extends React.Props { + interface TableRowColumnProps extends React.Props { columnNumber?: number; hoverable?: boolean; onHover?: (e: React.MouseEvent, column: number) => void; onHoverExit?: (e: React.MouseEvent, column: number) => void; } - export class TableRowColumn extends React.Component { + export class TableRowColumn extends React.Component { } } - interface ThemeProp extends React.Props { + interface ThemeProps extends React.Props { theme: Styles.CustomTheme; } - export class Theme extends React.Component { + export class Theme extends React.Component { static theme(customTheme: Styles.CustomTheme):

(Component: React.ComponentClass

) => React.ComponentClass

; } - interface ToggleProp extends CommonEnhancedSwitchProp { + interface ToggleProps extends CommonEnhancedSwitchProps { // is root element elementStyle?: React.CSSProperties; @@ -1183,12 +1183,12 @@ declare namespace __MaterialUI { toggled?: boolean; defaultToggled?: boolean; } - export class Toggle extends React.Component { + export class Toggle extends React.Component { isToggled(): boolean; setToggled(newToggledValue: boolean): void; } - interface TimePickerProp extends React.Props { + interface TimePickerProps extends React.Props { defaultTime?: Date; format?: string; pedantic?: boolean; @@ -1198,10 +1198,10 @@ declare namespace __MaterialUI { onShow?: () => void; onDismiss?: () => void; } - export class TimePicker extends React.Component { + export class TimePicker extends React.Component { } - interface TextFieldProp extends React.Props { + interface TextFieldProps extends React.Props { errorStyle?: React.CSSProperties; errorText?: string; floatingLabelText?: string; @@ -1230,7 +1230,7 @@ declare namespace __MaterialUI { onFocus?: React.FocusEventHandler; onKeyDown?: React.KeyboardEventHandler; } - export class TextField extends React.Component { + export class TextField extends React.Component { blur(): void; clearValue(): void; focus(): void; @@ -1240,37 +1240,37 @@ declare namespace __MaterialUI { } namespace Toolbar { - interface ToolbarProp extends React.Props { + interface ToolbarProps extends React.Props { } - export class Toolbar extends React.Component { + export class Toolbar extends React.Component { } - interface ToolbarGroupProp extends React.Props { + interface ToolbarGroupProps extends React.Props { float?: string; } - export class ToolbarGroup extends React.Component { + export class ToolbarGroup extends React.Component { } - interface ToolbarSeparatorProp extends React.Props { + interface ToolbarSeparatorProps extends React.Props { } - export class ToolbarSeparator extends React.Component { + export class ToolbarSeparator extends React.Component { } - interface ToolbarTitleProp extends React.Props { + interface ToolbarTitleProps extends React.Props { text?: string; } - export class ToolbarTitle extends React.Component { + export class ToolbarTitle extends React.Component { } } - interface TooltipProp extends React.Props { + interface TooltipProps extends React.Props { label: string; show?: boolean; touch?: boolean; verticalPosition?: string; horizontalPosition?: string; } - export class Tooltip extends React.Component { + export class Tooltip extends React.Component { } export namespace Utils { @@ -1363,10 +1363,10 @@ declare namespace __MaterialUI { // New menus available only through requiring directly to the end file namespace Menus { - interface IconMenuProp extends React.Props { + interface IconMenuProps extends React.Props { closeOnItemTouchTap?: boolean; desktop?: boolean; - iconButtonElement: React.ReactElement; + iconButtonElement: React.ReactElement; openDirection?: string; menuStyle?: React.CSSProperties; multiple?: boolean; @@ -1378,10 +1378,10 @@ declare namespace __MaterialUI { onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void; onChange?: (e: React.FormEvent, value: string | Array) => void; } - export class IconMenu extends React.Component { + export class IconMenu extends React.Component { } - interface MenuProp extends React.Props

{ + interface MenuProps extends React.Props { animated?: boolean; autoWidth?: boolean; desktop?: boolean; @@ -1393,10 +1393,10 @@ declare namespace __MaterialUI { width?: string | number; zDepth?: number; } - export class Menu extends React.Component{ + export class Menu extends React.Component{ } - interface MenuItemProp extends React.Props { + interface MenuItemProps extends React.Props { checked?: boolean; desktop?: boolean; disabled?: boolean; @@ -1412,14 +1412,14 @@ declare namespace __MaterialUI { onItemTouchTap?: (e: TouchTapEvent, item: React.ReactElement) => void; onChange?: (e: React.FormEvent, value: string) => void; } - export class MenuItem extends React.Component{ + export class MenuItem extends React.Component{ } - interface MenuDividerProp extends React.Props { + interface MenuDividerProps extends React.Props { inset?: boolean; style?: React.CSSProperties; } - export class MenuDivider extends React.Component{ + export class MenuDivider extends React.Component{ } } } // __MaterialUI From 575688ac47132a364a99d8c6ca7fed979e94ada8 Mon Sep 17 00:00:00 2001 From: Nathan Brown Date: Tue, 22 Sep 2015 15:17:41 -0700 Subject: [PATCH 7/7] Now that .TSX files are tested, remove redundant .TS file. --- material-ui/material-ui-tests.ts | 220 ------------------------------ material-ui/material-ui-tests.tsx | 12 -- 2 files changed, 232 deletions(-) delete mode 100644 material-ui/material-ui-tests.ts diff --git a/material-ui/material-ui-tests.ts b/material-ui/material-ui-tests.ts deleted file mode 100644 index 7df5f5960..000000000 --- a/material-ui/material-ui-tests.ts +++ /dev/null @@ -1,220 +0,0 @@ -// This tests React components, so it is most natural to write the test as a .TSX file, -// however the DefinitelyTyped test runner only accepts .TS files. To convert: -// 1. Save in Visual Studio or otherwise use TSC to save as a "material-ui-tests.js" file. -// 2. Copy the "material-ui-tests.tsx" file to "material-ui-tests.ts". -// 3. Copy the body of "MaterialUiTests.prototype.render = function ()" in "material-ui-tsets.js" -// and replace the body of render() in "material-ui-tests.ts". -// 4. Correct some missing information: -// a. Find "var element;" and change to "let element: React.ReactElement;". -// b. Replace "this.linkState(" with "this.linkState(". -// c. Add generic type help for the Component Property to the remaining errors on -// React.createElement, for example, add "<__MaterialUI.DialogProps>". - -/// -/// - -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: (key: string) => React.ReactLink; - 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" - var ThemeManager = new mui.Styles.ThemeManager(); - ThemeManager.setTheme(ThemeManager.types.LIGHT); - ThemeManager.setTheme(ThemeManager.types.DARK); - var muiTheme = ThemeManager.getCurrentTheme(); - ThemeManager.setComponentThemes({ - toggle: { - thumbOnColor: "#00bcd4", - trackOnColor: "LightCyan", - } - }); - // "http://material-ui.com/#/customization/inline-styles" - var Checkbox = mui.Checkbox; - let element: React.ReactElement; - element = React.createElement(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(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 = React.createElement(AppBar, {"title": "Title", "iconClassNameRight": "muidocs-icon-navigation-expand-more"}); - element = React.createElement(AppBar, {"title": "Title", "iconElementLeft": React.createElement(IconButton, null, React.createElement(NavigationClose, null)), "iconElementRight": React.createElement(FlatButton, {"label": "Save"})}); - // "http://material-ui.com/#/components/avatars" - //image avatar - element = React.createElement(Avatar, {"src": "images/uxceo-128.jpg"}); - //SvgIcon avatar - element = React.createElement(Avatar, {"icon": React.createElement(FileFolder, null)}); - //SvgIcon avatar with custom colors - element = React.createElement(Avatar, {"icon": React.createElement(FileFolder, null), "color": Colors.orange200, "backgroundColor": Colors.pink400}); - //FontIcon avatar - element = React.createElement(Avatar, {"icon": React.createElement(FontIcon, {"className": "muidocs-icon-communication-voicemail"})}); - //FontIcon avatar with custom colors - element = React.createElement(Avatar, {"icon": React.createElement(FontIcon, {"className": "muidocs-icon-communication-voicemail"}), "color": Colors.blue300, "backgroundColor": Colors.indigo900}); - //Letter avatar - element = React.createElement(Avatar, null, "A"); - //Letter avatar with custom colors - element = React.createElement(Avatar, {"color": Colors.deepOrange300, "backgroundColor": Colors.purple500}); - // "http://material-ui.com/#/components/buttons" - element = React.createElement(FlatButton, {"linkButton": true, "href": "https://github.com/callemall/material-ui", "secondary": true, "label": "GitHub"}, React.createElement(FontIcon, {"style": { color: Typography.textFullWhite }, "className": "muidocs-icon-custom-github"})); - element = React.createElement(RaisedButton, {"linkButton": true, "href": "https://github.com/callemall/material-ui", "secondary": true, "label": "GitHub"}, React.createElement(FontIcon, {"style": { color: Typography.textFullWhite }, "className": "muidocs-icon-custom-github"})); - element = React.createElement(FloatingActionButton, {"secondary": true, "mini": true, "linkButton": true, "href": "https://github.com/callemall/material-ui"}, React.createElement(ToggleStar, null)); - // "http://material-ui.com/#/components/cards" - element = React.createElement(Card, {"initiallyExpanded": true}, React.createElement(CardHeader, {"title": "Title", "subtitle": "Subtitle", "avatar": React.createElement(Avatar, {"style": { color: 'red' }}, "A"), "showExpandableButton": true}), React.createElement(CardText, {"expandable": true}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."), React.createElement(CardActions, {"expandable": true}, React.createElement(FlatButton, {"label": "Action1"}), React.createElement(FlatButton, {"label": "Action2"})), React.createElement(CardText, {"expandable": true}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")); - // "http://material-ui.com/#/components/date-picker" - // "http://material-ui.com/#/components/dialog" - var standardActions = [ - { text: 'Cancel' }, - { text: 'Submit', onTouchTap: this.touchTapEventHandler, ref: 'submit' } - ]; - element = React.createElement<__MaterialUI.DialogProps>(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."); - //Custom Actions - var customActions = [ - React.createElement(FlatButton, {"label": "Cancel", "secondary": true, "onTouchTap": this.touchTapEventHandler}), - React.createElement(FlatButton, {"label": "Submit", "primary": true, "onTouchTap": this.touchTapEventHandler}) - ]; - element = React.createElement(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."); - // "http://material-ui.com/#/components/dropdown-menu" - var menuItems: __MaterialUI.Menu.MenuItemRequest[] = [ - { payload: '1', text: 'Never' }, - { payload: '2', text: 'Every Night' }, - { payload: '3', text: 'Weeknights' }, - { payload: '4', text: 'Weekends' }, - { payload: '5', text: 'Weekly' }, - ]; - element = React.createElement(DropDownMenu, {"menuItems": menuItems}); - // "http://material-ui.com/#/components/icons" - element = React.createElement(FontIcon, {"className": "material-icons", "color": Colors.red500}, " home"); - // "http://material-ui.com/#/components/icon-buttons" - //Method 1: muidocs-icon-github is defined in a style sheet. - element = React.createElement(IconButton, {"iconClassName": "muidocs-icon-custom-github", "tooltip": "GitHub"}); - //Method 2: ActionGrade is a component created using mui.SvgIcon. - element = React.createElement(IconButton, {"tooltip": "Star", "touch": true}, React.createElement(ActionGrade, null)); - //Method 3: Manually creating a mui.FontIcon component within IconButton - element = React.createElement(IconButton, {"tooltip": "Sort", "disabled": true}, React.createElement(FontIcon, {"className": "muidocs-icon-custom-sort"})); - //Method 4: Using Google material-icons - element = React.createElement(IconButton, {"iconClassName": "material-icons", "tooltipPosition": "bottom-center", "tooltip": "Sky"}, "settings_system_daydream"); - // "http://material-ui.com/#/components/icon-menus" - element = React.createElement(IconMenu, {"iconButtonElement": React.createElement(IconButton, null)}, React.createElement(MenuItem, {"primaryText": "Refresh"}), React.createElement(MenuItem, {"primaryText": "Send feedback"}), React.createElement(MenuItem, {"primaryText": "Settings"}), React.createElement(MenuItem, {"primaryText": "Help"}), React.createElement(MenuItem, {"primaryText": "Sign out"})); - // "http://material-ui.com/#/components/left-nav" - // "http://material-ui.com/#/components/lists" - // "http://material-ui.com/#/components/menus" - element = React.createElement(Menu, null, React.createElement(MenuItem, {"primaryText": "Maps"}), React.createElement(MenuItem, {"primaryText": "Books"}), React.createElement(MenuItem, {"primaryText": "Flights"}), React.createElement(MenuItem, {"primaryText": "Apps"})); - element = React.createElement(Menu, {"desktop": true, "width": 320}, React.createElement(MenuItem, {"primaryText": "Bold", "secondaryText": "⌘B"}), React.createElement(MenuItem, {"primaryText": "Italic", "secondaryText": "⌘I"}), React.createElement(MenuItem, {"primaryText": "Underline", "secondaryText": "⌘U"}), React.createElement(MenuItem, {"primaryText": "Strikethrough", "secondaryText": "Alt+Shift+5"}), React.createElement(MenuItem, {"primaryText": "Superscript", "secondaryText": "⌘."}), React.createElement(MenuItem, {"primaryText": "Subscript", "secondaryText": "⌘,"}), React.createElement(MenuDivider, null), React.createElement(MenuItem, {"primaryText": "Paragraph styles", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "Align", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "Line spacing", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "Numbered list", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuItem, {"primaryText": "List options", "rightIcon": React.createElement(ArrowDropRight, null)}), React.createElement(MenuDivider, null), React.createElement(MenuItem, {"primaryText": "Clear formatting", "secondaryText": "⌘/"})); - // "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 = React.createElement(Checkbox, {"name": "checkboxName2", "value": "checkboxValue2", "label": "fed the dog", "defaultChecked": true}); - element = React.createElement(Checkbox, {"name": "checkboxName3", "value": "checkboxValue3", "label": "built a house on the moon", "disabled": true}); - element = React.createElement<__MaterialUI.CheckboxProps>(Checkbox, {"name": "checkboxName4", "value": "checkboxValue4", "checkedIcon": React.createElement(ToggleStar, null), "unCheckedIcon": React.createElement(ToggleStarBorder, null), "label": "custom icon"}); - element = React.createElement(RadioButtonGroup, {"name": "shipSpeed", "defaultSelected": "not_light"}, React.createElement(RadioButton, {"value": "light", "label": "prepare for light speed", "style": { marginBottom: 16 }}), ";", React.createElement(RadioButton, {"value": "not_light", "label": "light speed too slow", "style": { marginBottom: 16 }}), ";", React.createElement(RadioButton, {"value": "ludicrous", "label": "go to ludicrous speed", "style": { marginBottom: 16 }, "disabled": true})); - element = React.createElement(Toggle, {"name": "toggleName1", "value": "toggleValue1", "label": "activate thrusters"}); - element = React.createElement(Toggle, {"name": "toggleName2", "value": "toggleValue2", "label": "auto-pilot", "defaultToggled": true}); - element = React.createElement(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 = React.createElement(TextField, {"hintText": "Hint Text"}); - element = React.createElement(TextField, {"hintText": "Hint Text", "defaultValue": "Default Value"}); - element = React.createElement(TextField, {"hintText": "Hint Text", "value": "value", "underlineStyle": { borderColor: Colors.green500 }, "onChange": this.formEventHandler}); - element = React.createElement(TextField, {"hintText": "Custom Underline Focus Color", "underlineFocusStyle": { borderColor: Colors.amber900 }}); - element = React.createElement(TextField, {"hintText": "Hint Text", "valueLink": this.linkState('valueLinkValue')}); - element = React.createElement(TextField, {"hintText": "Hint Text (MultiLine)", "multiLine": true}); - element = React.createElement(TextField, {"hintText": "The hint text can be as long as you want, it will wrap.", "multiLine": true}); - element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "The error text can be as long as you want, it will wrap."}); - element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "error text", "onChange": this.formEventHandler}); - element = React.createElement(TextField, {"hintText": "Hint Text (custom error color)", "errorText": "error text", "errorStyle": { color: 'orange' }, "onChange": this.formEventHandler, "defaultValue": "Custom error color"}); - element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true}); - element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "defaultValue": "Disabled With Value"}); - //Select Fields - var arbitraryArrayMenuItems: __MaterialUI.Menu.MenuItemRequest[] = [ - { - id: 0, - name: "zero", - }, - ]; - element = React.createElement(SelectField, {"value": 0, "onChange": this.selectFieldChangeHandler, "hintText": "Hint Text", "menuItems": menuItems}); - element = React.createElement(SelectField, {"valueLink": this.linkState('selectValueLinkValue'), "floatingLabelText": "Float Label Text", "valueMember": "id", "displayMember": "name", "menuItems": arbitraryArrayMenuItems}); - element = React.createElement(SelectField, {"valueLink": this.linkState('selectValueLinkValue2'), "floatingLabelText": "Float Custom Label Text", "floatingLabelStyle": { color: "red" }, "valueMember": "id", "displayMember": "name", "menuItems": arbitraryArrayMenuItems}); - element = React.createElement(SelectField, {"value": 0, "onChange": this.selectFieldChangeHandler, "menuItems": arbitraryArrayMenuItems}); - //Floating Hint Text Labels - element = React.createElement(TextField, {"hintText": "Hint Text", "floatingLabelText": "Floating Label Text"}); - element = React.createElement(TextField, {"hintText": "Hint Text", "defaultValue": "Default Value", "floatingLabelText": "Floating Label Text"}); - element = React.createElement(TextField, {"hintText": "Hint Text", "floatingLabelText": "Floating Label Text", "value": "value", "onChange": this.formEventHandler}); - element = React.createElement(TextField, {"hintText": "Hint Text", "floatingLabelText": "Floating Label Text", "valueLink": this.linkState('floatingValueLinkValue')}); - element = React.createElement(TextField, {"hintText": "Hint Text (MultiLine)", "floatingLabelText": "Floating Label Text", "multiLine": true}); - element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "floating text", "floatingLabelText": "Floating Label Text", "onChange": this.formEventHandler}); - element = React.createElement(TextField, {"hintText": "Hint Text", "errorText": "error text", "defaultValue": "abc", "floatingLabelText": "Floating Label Text", "onChange": this.formEventHandler}); - element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "floatingLabelText": "Floating Label Text"}); - element = React.createElement(TextField, {"hintText": "Disabled Hint Text", "disabled": true, "defaultValue": "Disabled With Value", "floatingLabelText": "Floating Label Text"}); - element = React.createElement(TextField, {"hintText": "Password Field", "floatingLabelText": "Password", "type": "password"}); - // "http://material-ui.com/#/components/time-picker" - // "http://material-ui.com/#/components/toolbars" - return element; - } -} \ No newline at end of file diff --git a/material-ui/material-ui-tests.tsx b/material-ui/material-ui-tests.tsx index fb32aac5e..eed734d95 100644 --- a/material-ui/material-ui-tests.tsx +++ b/material-ui/material-ui-tests.tsx @@ -1,15 +1,3 @@ -// This tests React components, so it is most natural to write the test as a .TSX file, -// however the DefinitelyTyped test runner only accepts .TS files. To convert: -// 1. Save in Visual Studio or otherwise use TSC to save as a "material-ui-tests.js" file. -// 2. Copy the "material-ui-tests.tsx" file to "material-ui-tests.ts". -// 3. Copy the body of "MaterialUiTests.prototype.render = function ()" in "material-ui-tsets.js" -// and replace the body of render() in "material-ui-tests.ts". -// 4. Correct some missing information: -// a. Find "var element;" and change to "let element: React.ReactElement;". -// b. Replace "this.linkState(" with "this.linkState(". -// c. Add generic type help for the Component Property to the remaining errors on -// React.createElement, for example, add "<__MaterialUI.DialogProps>". - /// ///