diff --git a/material-ui/material-ui-tests.tsx b/material-ui/material-ui-tests.tsx index 989cf3472..7d2a0f139 100644 --- a/material-ui/material-ui-tests.tsx +++ b/material-ui/material-ui-tests.tsx @@ -5,47 +5,108 @@ import * as React from "react"; import * as LinkedStateMixin from "react-addons-linked-state-mixin"; import * as MaterialUi from "material-ui"; -import Checkbox from "material-ui/lib/checkbox"; -import Colors from "material-ui/lib/styles/colors"; -import Spacing from "material-ui/lib/styles/spacing"; +import ActionGrade from "material-ui/lib/svg-icons/action/grade"; import AppBar from "material-ui/lib/app-bar"; -import Badge from "material-ui/lib/badge"; -import IconButton from "material-ui/lib/icon-button"; -import FlatButton from "material-ui/lib/flat-button"; +import ArrowDropRight from "material-ui/lib/svg-icons/navigation-arrow-drop-right"; +import AutoComplete from 'material-ui/lib/auto-complete'; import Avatar from "material-ui/lib/avatar"; -import FontIcon from "material-ui/lib/font-icon"; -import Typography from "material-ui/lib/styles/typography"; -import RaisedButton from "material-ui/lib/raised-button"; -import FloatingActionButton from "material-ui/lib/floating-action-button"; +import Badge from "material-ui/lib/badge"; import Card from "material-ui/lib/card/card"; -import CardHeader from "material-ui/lib/card/card-header"; -import CardText from "material-ui/lib/card/card-text"; import CardActions from "material-ui/lib/card/card-actions"; +import CardHeader from "material-ui/lib/card/card-header"; +import CardMedia from 'material-ui/lib/card/card-media'; +import CardText from "material-ui/lib/card/card-text"; +import CardTitle from 'material-ui/lib/card/card-title'; +import Checkbox from "material-ui/lib/checkbox"; +import CircularProgress from 'material-ui/lib/circular-progress'; +import ColorManipulator from 'material-ui/lib/utils/color-manipulator'; +import Colors from "material-ui/lib/styles/colors"; import DatePicker from "material-ui/lib/date-picker/date-picker"; -import TimePicker from "material-ui/lib/time-picker"; import Dialog from "material-ui/lib/dialog"; -import DropDownMenu from "material-ui/lib/drop-down-menu"; -import RadioButtonGroup from "material-ui/lib/radio-button-group"; -import RadioButton from "material-ui/lib/radio-button"; -import Toggle from "material-ui/lib/toggle"; -import TextField from "material-ui/lib/text-field"; -import SelectField from "material-ui/lib/select-field"; -import IconMenu from "material-ui/lib/menus/icon-menu"; -import Menu from 'material-ui/lib/menus/menu'; -import MenuItem from 'material-ui/lib/menus/menu-item'; import Divider from 'material-ui/lib/divider'; -import ThemeDecorator from 'material-ui/lib/styles/theme-decorator'; -import ThemeManager from 'material-ui/lib/styles/theme-manager'; +import DropDownMenu from "material-ui/lib/drop-down-menu"; +import FileFolder from "material-ui/lib/svg-icons/file/folder"; +import FlatButton from "material-ui/lib/flat-button"; +import FloatingActionButton from "material-ui/lib/floating-action-button"; +import FontIcon from "material-ui/lib/font-icon"; import GridList from 'material-ui/lib/grid-list/grid-list'; import GridTile from 'material-ui/lib/grid-list/grid-tile'; +import IconButton from "material-ui/lib/icon-button"; +import IconMenu from "material-ui/lib/menus/icon-menu"; +import LeftNav from 'material-ui/lib/left-nav'; +import LinearProgress from 'material-ui/lib/linear-progress'; +import List from 'material-ui/lib/lists/list'; +import ListItem from 'material-ui/lib/lists/list-item'; +import Menu from 'material-ui/lib/menus/menu'; +import MenuItem from 'material-ui/lib/menus/menu-item'; +import Paper from 'material-ui/lib/paper'; +import Popover from 'material-ui/lib/popover/popover'; +import PopoverAnimationFromTop from 'material-ui/lib/popover/popover-animation-from-top'; +import RadioButton from "material-ui/lib/radio-button"; +import RadioButtonGroup from "material-ui/lib/radio-button-group"; +import RaisedButton from "material-ui/lib/raised-button"; +import RefreshIndicator from 'material-ui/lib/refresh-indicator'; +import SelectField from "material-ui/lib/select-field"; +import Slider from 'material-ui/lib/slider'; +import Snackbar from 'material-ui/lib/snackbar'; +import Spacing from "material-ui/lib/styles/spacing"; +import Styles from 'material-ui/lib/styles'; +import SvgIcon from 'material-ui/lib/svg-icon'; +import Tab from 'material-ui/lib/tabs/tab'; +import Table from 'material-ui/lib/table/table'; +import TableBody from 'material-ui/lib/table/table-body'; +import TableFooter from 'material-ui/lib/table/table-footer'; +import TableHeader from 'material-ui/lib/table/table-header'; +import TableHeaderColumn from 'material-ui/lib/table/table-header-column'; +import TableRow from 'material-ui/lib/table/table-row'; +import TableRowColumn from 'material-ui/lib/table/table-row-column'; +import Tabs from 'material-ui/lib/tabs/tabs'; +import TextField from "material-ui/lib/text-field"; +import ThemeDecorator from 'material-ui/lib/styles/theme-decorator'; +import ThemeManager from 'material-ui/lib/styles/theme-manager'; +import TimePicker from "material-ui/lib/time-picker"; +import Toggle from "material-ui/lib/toggle"; +import ToggleStar from "material-ui/lib/svg-icons/toggle/star"; +import ToggleStarBorder from "material-ui/lib/svg-icons/toggle/star-border"; +import Toolbar from 'material-ui/lib/toolbar/toolbar'; +import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group'; +import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator'; +import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title'; +import Typography from "material-ui/lib/styles/typography"; +import zIndex from 'material-ui/lib/styles/zIndex'; + +import {SelectableContainerEnhance} from 'material-ui/lib/hoc/selectable-enhance'; import * as Icons from "material-ui/lib/svg-icons"; +import ActionAndroid from 'material-ui/lib/svg-icons/action/android'; +import ActionFavorite from 'material-ui/lib/svg-icons/action/favorite'; +import ActionFavoriteBorder from 'material-ui/lib/svg-icons/action/favorite-border'; +import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff'; +import ActionHome from 'material-ui/lib/svg-icons/action/home'; +import ActionInfo from 'material-ui/lib/svg-icons/action/info'; +import CommunicationChatBubble from 'material-ui/lib/svg-icons/communication/chat-bubble'; +import ContentAdd from 'material-ui/lib/svg-icons/content/add'; +import ContentCopy from 'material-ui/lib/svg-icons/content/content-copy'; +import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts'; +import ContentFilter from 'material-ui/lib/svg-icons/content/filter-list'; +import ContentInbox from 'material-ui/lib/svg-icons/content/inbox'; +import ContentLink from 'material-ui/lib/svg-icons/content/link'; +import ContentSend from 'material-ui/lib/svg-icons/content/send'; +import Delete from 'material-ui/lib/svg-icons/action/delete'; +import Download from 'material-ui/lib/svg-icons/file/file-download'; +import FileCloudDownload from 'material-ui/lib/svg-icons/file/cloud-download'; +import FolderIcon from 'material-ui/lib/svg-icons/file/folder-open'; +import HardwareVideogameAsset from 'material-ui/lib/svg-icons/hardware/videogame-asset'; +import MapsPlace from 'material-ui/lib/svg-icons/maps/place'; +import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert'; import NavigationClose from "material-ui/lib/svg-icons/navigation/close"; -import FileFolder from "material-ui/lib/svg-icons/file/folder"; -import ToggleStar from "material-ui/lib/svg-icons/toggle/star"; -import ActionGrade from "material-ui/lib/svg-icons/action/grade"; -import ToggleStarBorder from "material-ui/lib/svg-icons/toggle/star-border"; -import ArrowDropRight from "material-ui/lib/svg-icons/navigation-arrow-drop-right"; +import NavigationExpandMoreIcon from 'material-ui/lib/svg-icons/navigation/expand-more'; +import NotificationsIcon from 'material-ui/lib/svg-icons/social/notifications'; +import PersonAdd from 'material-ui/lib/svg-icons/social/person-add'; +import RemoveRedEye from 'material-ui/lib/svg-icons/image/remove-red-eye'; +import StarBorder from 'material-ui/lib/svg-icons/toggle/star-border'; +import UploadIcon from 'material-ui/lib/svg-icons/file/cloud-upload'; + type CheckboxProps = __MaterialUI.CheckboxProps; type MuiTheme = __MaterialUI.Styles.MuiTheme; @@ -56,27 +117,63 @@ interface MaterialUiTestsState { showDialogCustomActions: boolean; showDialogScrollable: boolean; value: number; + dataSource: [string]; + minDate: Date; + maxDate: Date; + autoOk: boolean; + disableYearSelection: boolean; + open: boolean; + valueSingle: string; + valueMultiple: string[]; + anchorEl: Element; + completed: number; + message: string; + autoHideDuration: number; + fixedHeader: boolean; + fixedFooter: boolean; + stripedRows: boolean; + showRowHover: boolean; + selectable: boolean; + multiSelectable: boolean; + enableSelectAll: boolean; + deselectOnClickaway: boolean; + height: string; } -// "http://material-ui.com/#/customization/themes" +// "http://www.material-ui.com/#/customization/themes" let muiTheme: MuiTheme = ThemeManager.getMuiTheme({ + spacing: Spacing, + zIndex: zIndex, + fontFamily: 'Roboto, sans-serif', palette: { - accent1Color: Colors.cyan100 - }, - spacing: { - + primary1Color: Colors.cyan500, + primary2Color: Colors.cyan700, + primary3Color: Colors.lightBlack, + accent1Color: Colors.pinkA200, + accent2Color: Colors.grey100, + accent3Color: Colors.grey500, + textColor: Colors.darkBlack, + alternateTextColor: Colors.white, + canvasColor: Colors.white, + borderColor: Colors.grey300, + disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), + pickerHeaderColor: Colors.cyan500, } }); +let SelectableList = SelectableContainerEnhance(List); + @ThemeDecorator(muiTheme) class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> implements React.LinkedStateMixin { // injected with mixin linkState: (key: string) => React.ReactLink; - dialog: Dialog; + + private picker12hr: TimePicker; + private picker24hr: TimePicker; private touchTapEventHandler(e: TouchTapEvent) { - this.dialog.show(); + console.info("Received touch tap", e); } private formEventHandler(e: React.FormEvent) { } @@ -84,10 +181,160 @@ class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> implemen } private handleRequestClose(buttonClicked: boolean) { } + private handleRequestCloseReason(reason: string) { + } + private handleToggle() { + this.setState(Object.assign({}, this.state, { open: !this.state.open })); + } + private handleClose() { + this.setState(Object.assign({}, this.state, { open: false })); + } + private handleChangeSingle(event: React.MouseEvent, value: string){ + } + private handleChangeMultiple(event: React.MouseEvent, value: string[]) { + } + + private handleChange = (e: TouchTapEvent, index: number, value: number) => this.setState(Object.assign({}, this.state, { value })); + + private handleUpdateInput(t: string) { + this.setState(Object.assign({}, this.state, { + dataSource: [t, t + t, t + t + t], + })); + } + private handleTouchTap(e: TouchTapEvent) { + alert('onTouchTap triggered on the title component'); + } + private handleActionTouchTap() { + this.setState(Object.assign({}, this.state, {open: false,})); + alert('Event removed from your calendar.'); + } + private handleChangeDuration = (event: React.FormEvent) => { + const value = event.target["value"]; + this.setState(Object.assign({}, this.state, { + autoHideDuration: value.length > 0 ? parseInt(value) : 0, + })); + } + private onRowSelection(selectedRows: number[] | string) { + } + private handleActive(tab: Tab) { + alert(`A tab with this route property ${tab.props.value} was activated.`); + } + private handleChangeTabs(value: any, e: React.FormEvent, tab: Tab) { + } + private handleChangeTimePicker12(err, time) { + this.picker12hr.setTime(time); + }; + + private handleChangeTimePicker24(err, time) { + this.picker24hr.setTime(time); + }; render() { - // "http://material-ui.com/#/customization/inline-styles" + const styles = { + title: { + cursor: 'pointer', + }, + exampleImageInput: { + cursor: 'pointer', + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + left: 0, + width: '100%', + opacity: 0, + }, + button: { + margin: 12, + }, + floatingButton: { + marginRight: 20, + }, + textField: { + marginLeft: 20, + }, + floatLeft: { + float: 'left', + }, + root: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + }, + gridList: { + width: 500, + height: 400, + overflowY: 'auto', + marginBottom: 24, + }, + icons: { + marginRight: 24, + }, + menu: { + marginRight: 32, + marginBottom: 32, + float: 'left', + position: 'relative', + zIndex: 0, + }, + rightIcon: { + textAlign: 'center', + lineHeight: '24px', + }, + paper: { + height: 100, + width: 100, + margin: 20, + textAlign: 'center', + display: 'inline-block', + }, + popover: { + padding: 20, + }, + container: { + position: 'relative', + }, + refresh: { + display: 'inline-block', + position: 'relative', + }, + block: { + maxWidth: 250, + }, + checkbox: { + marginBottom: 16, + }, + radioButton: { + marginBottom: 16, + }, + toggle: { + marginBottom: 16, + }, + propContainerStyle: { + width: 200, + overflow: 'hidden', + margin: '20px auto 0', + }, + propToggleHeader: { + margin: '20px auto 10px', + }, + headline: { + fontSize: 24, + paddingTop: 16, + marginBottom: 12, + fontWeight: 400, + }, + errorStyle: { + color: Colors.orange500, + }, + underlineStyle: { + borderColor: Colors.orange500, + }, + }; + const colors = Styles.Colors; + + // "http://www.material-ui.com/#/customization/inline-styles" let element: React.ReactElement; element = implemen } }); - // "http://material-ui.com/#/components/appbar" - element = - element = } - iconElementRight={} />; + // "http://www.material-ui.com/#/components/app-bar" + const AppBarExampleIcon = () => ( + + ); + + const AppBarExampleIconButton = () => ( + Title} + onTitleTouchTap={this.handleTouchTap} + iconElementLeft={} + iconElementRight={} + /> + ); + const AppBarExampleIconMenu = () => ( + } + iconElementRight={ + + } + targetOrigin={{ horizontal: 'right', vertical: 'top' }} + anchorOrigin={{ horizontal: 'right', vertical: 'top' }} + > + + + + + } + /> + ); + + // "http://www.material-ui.com/#/components/auto-complete" + element = + + const dataSource1 = [ + { + text: 'text-value1', + value: ( + + ), + }, + { + text: 'text-value2', + value: ( + + ), + }, + ]; + + const dataSource2 = ['12345', '23456', '34567']; + + const AutoCompleteExampleNoFilter = () => ( +
+
+ +
+ ); + + const AutoCompleteExampleFilters = () => ( +
+ +
+ +
+ ); + + // "http://www.material-ui.com/#/components/avatar" + const AvatarExampleSimple = () => ( + + + } + > + Image Avatar + + } /> + } + > + FontIcon Avatar + + } + color={colors.blue300} + backgroundColor={colors.indigo900} + /> + } + > + FontIcon Avatar with custom colors + + } /> + } + > + SvgIcon Avatar + + } + color={colors.orange200} + backgroundColor={colors.pink400} + /> + } + > + SvgIcon Avatar with custom colors + + A} + > + Letter Avatar + + + A + + } + > + Letter Avatar with custom colors + + + ); - // "http://material-ui.com/#/components/avatars" //image avatar element = ; //SvgIcon avatar @@ -147,60 +555,307 @@ class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> implemen backgroundColor={Colors.purple500}> - // "http://material-ui.com/#/components/badge" - element = Hello}> - - ; - element = Hello} - badgeStyle={{height: '24px', width: '24px'}} - > - This text has a badge! - ; + // "http://www.material-ui.com/#/components/badge" + const BadgeExampleSimple = () => ( +
+ + + + + + + + +
+ ); + const BadgeExampleContent = () => ( +
+ } + > + + + + Company Name + +
+ ); - // "http://material-ui.com/#/components/buttons" - element = - - ; - element = - - ; - element = - - ; + // "http://www.material-ui.com/#/components/flat-button" + const FlatButtonExampleSimple = () => ( +
+ + + + +
+ ); + const FlatButtonExampleComplex = () => ( +
+ + + - // "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://www.material-ui.com/#/components/raised-button" + const RaisedButtonExampleSimple = () => ( +
+ + + + +
+ ); + const RaisedButtonExampleComplex = () => ( +
+ + + + } + style={styles.button} + /> + } + /> +
+ ); + + // "http://www.material-ui.com/#/components/floating-action-button" + const FloatingActionButtonExampleSimple = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ ); + + // "http://www.material-ui.com/#/components/icon-button" + const IconButtonExampleSimple = () => ( +
+ + +
+ ); + const IconButtonExampleComplex = () => ( +
+ + + + + + + + + + home + +
+ ); + const IconButtonExampleTooltip = () => ( +
+ + + + + + +
+ ); + const IconButtonExampleTouch = () => ( +
+ + + + + + + + + + + + + + + + + + +
+ ); + //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://www.material-ui.com/#/components/card" + const CardExampleWithAvatar = () => ( + + + } + > + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec mattis pretium massa.Aliquam erat volutpat.Nulla facilisi. + Donec vulputate interdum sollicitudin.Nunc lacinia auctor quam sed pellentesque. + Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. + + + + + + + ); + const CardExampleWithoutAvatar = () => ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec mattis pretium massa.Aliquam erat volutpat.Nulla facilisi. + Donec vulputate interdum sollicitudin.Nunc lacinia auctor quam sed pellentesque. + Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. + + + + + + + ); + + // "http://www.material-ui.com/#/components/date-picker" + const DatePickerExampleSimple = () => ( +
+ + + +
+ ); + const DatePickerExampleInline = () => ( +
+ + +
+ ); + element = ( +
+ +
+ ); element = ; element = ; element = ; - // "http://material-ui.com/#/components/time-picker" - element = - // "http://material-ui.com/#/components/dialog" let standardActions = [ { text: 'Cancel' }, @@ -248,281 +903,96 @@ class MaterialUiTests extends React.Component<{}, MaterialUiTestsState> implemen ; - - // "http://material-ui.com/#/components/dropdown-menu" - element = this.touchTapEventHandler(e)}> - - - - - - ; - - // "http://material-ui.com/#/components/icons" - element = ; - element = ; - - 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://www.material-ui.com/#/components/divider" + const DividerExampleForm = () => ( + + + + + + + + + + + ); + const DividerExampleList = () => ( +
+ + + + + + + + + +
+ ); + const DividerExampleMenu = () => ( + - + + - ; - - // "http://material-ui.com/#/components/left-nav" + + ); - // "http://material-ui.com/#/components/lists" + // "http://www.material-ui.com/#/components/grid-list" + const tilesData = [ + { + img: 'images/grid-list/00-52-29-429_640.jpg', + title: 'Breakfast', + author: 'jill111', + featured: false, + }]; + const GridListExampleSimple = () => ( +
+ + {tilesData.map(tile => ( + by {tile.author}} + actionIcon={} + > + + + )) } + +
+ ); + const GridListExampleComplex = () => ( +
+ + {tilesData.map(tile => ( + } + actionPosition="left" + titlePosition="top" + titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)" + cols={tile.featured ? 2 : 1} + rows={tile.featured ? 2 : 1} + > + + + )) } + +
+ ); - // "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 = ; - - // "http://www.material-ui.com/#/components/select-field" - let arbitraryArrayMenuItems = [ - , - ]; - element = - arbitraryArrayMenuItems - ; - element = - arbitraryArrayMenuItems - ; - element = - arbitraryArrayMenuItems - ; - element = - arbitraryArrayMenuItems - ; - - //Floating Hint Text Labels - element = ; - element = ; - element = ; - element = ; - element = ('floatingValueLinkValue') } />; - element = ; - element = ; - element = ; - element = ; - element = ; - element = ; - - - // "http://material-ui.com/#/components/time-picker" - - - // "http://material-ui.com/#/components/toolbars" - - // "http://material-ui.com/#/components/grid-list" element = implemen

Children are Required!

; + + // "http://www.material-ui.com/#/components/font-icon" + const FontIconExampleSimple = () => ( +
+ + + + + +
+ ); + + const FontIconExampleIcons = () => ( +
+ home + flight_takeoff + cloud_download + videogame_asset +
+ ); + + + // "http://www.material-ui.com/#/components/svg-icon" + const HomeIcon = (props) => ( + + + + ); + + const SvgIconExampleSimple = () => ( +
+ + + +
+ ); + const SvgIconExampleIcons = () => ( +
+ + + + +
+ ); + element = ; + element = ; + element = home; + + + // "http://www.material-ui.com/#/components/left-nav" + element = ( +
+ + + Menu Item + Menu Item 2 + +
+ ); + element = ( +
+ + this.setState(Object.assign({}, this.state, { open })) } + > + Menu Item + Menu Item 2 + +
+ ); + element = ( +
+ + + + +
+ ); + + + // "http://material-ui.com/#/components/lists" + const ListExampleSimple = () => ( +
+ + } /> + } /> + } /> + } /> + } /> + + + + } /> + } /> + } /> + } /> + +
+ ); + const ListExampleChat = () => ( +
+ + } + rightIcon={} + /> + } + rightIcon={} + /> + } + rightIcon={} + /> + } + rightIcon={} + /> + } + rightIcon={} + /> + + + + } + /> + } + /> + +
+ ); + const ListExampleNested = () => ( +
+ + } /> + } /> + } + initiallyOpen={true} + primaryTogglesNestedList={true} + nestedItems={[ + } + />, + } + disabled={true} + nestedItems={[ + } />, + ]} + />, + ]} + /> + +
+ ); + const iconButtonElement = ( + + + + ); + const rightIconMenu = ( + + Reply + Forward + Delete + + ); + const ListExampleMessages = () => ( +
+ + } + rightIconButton={rightIconMenu} + primaryText="Brendan Lim" + secondaryText={ +

+ Brunch this weekend?
+ I' ll be in your neighborhood doing errands this weekend.Do you want to grab brunch? +

+ } + secondaryTextLines={2} + /> + +
+ ); + const ListExampleSelectable = () => ( +
+ + } + nestedItems={[ + } + />, + ]} + /> + } + /> + } + /> + } + /> + +
+ ); + + + // "http://www.material-ui.com/#/components/menu" + const MenuExampleSimple = () => ( +
+ + + + + + + + + + + + +
+ ); + const MenuExampleDisable = () => ( +
+ + + + + + + + + + + + + + + + +
+ ); + const MenuExampleIcons = () => ( +
+ + } /> + } /> + } /> + + } /> + } /> + + } /> + + + + } /> + settings}/> + settings + } + /> + ¶} /> + §} /> + +
+ ); + const MenuExampleSecondary = () => ( +
+ + + + + + + + + } /> + } /> + } /> + } /> + } /> + + + + + + + + + + + + + +
+ ); + const MenuExampleNested = () => ( +
+ + + + + } + menuItems={[ + } + menuItems={[ + , + , + , + , + ]} + />, + , + , + , + ]} + /> + + + + + + +
+ ); + + + // "http://www.material-ui.com/#/components/icon-menu" + const IconMenuExampleSimple = () => ( +
+ } + anchorOrigin={{ horizontal: 'left', vertical: 'top' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + > + + + + + + + } + anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'left', vertical: 'bottom' }} + > + + + + + + + } + anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'right', vertical: 'bottom' }} + > + + + + + + + } + anchorOrigin={{ horizontal: 'right', vertical: 'top' }} + targetOrigin={{ horizontal: 'right', vertical: 'top' }} + > + + + + + + +
+ ); + element = ( +
+ } + onChange={this.handleChangeSingle} + value={this.state.valueSingle} + > + + + + + + + } + onChange={this.handleChangeMultiple} + value={this.state.valueMultiple} + multiple={true} + > + + + + + + + +
+ ); + const IconMenuExampleScrollable = () => ( + } + anchorOrigin={{ horizontal: 'left', vertical: 'top' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + maxHeight={272} + > + + + + ); + + + // "http://www.material-ui.com/#/components/dropdown-menu" + element = + + + + + + ; + const menuItems = []; + element = ( + + {menuItems} + + ); + element = ( + + + + + + + ); + + // "http://material-ui.com/#/components/paper" + const PaperExampleSimple = () => ( +
+ + + + + +
+ ); + const PaperExampleRounded = () => ( +
+ + + + + +
+ ); + const PaperExampleCircle = () => ( +
+ + + + + +
+ ); + + + // "http://www.material-ui.com/#/components/popover" + element = ( +
+ + +
+ +
+ +
+ ); + element = ( +
+ + +
+ +
+ +
+ ); + + + // "http://www.material-ui.com/#/components/circular-progress" + const CircularProgressExampleSimple = () => ( +
+ + + +
+ ); + element = ( +
+ + + +
+ ); + + + // "http://www.material-ui.com/#/components/linear-progress" + const LinearProgressExampleSimple = () => ( + + ); + element = ( + + ); + + + // "http://www.material-ui.com/#/components/refresh-indicator" + const RefreshIndicatorExampleSimple = () => ( +
+ + + + +
+ ); + const RefreshIndicatorExampleLoading = () => ( +
+ + +
+ ); + + + // "http://www.material-ui.com/#/components/select-field" + element = ( +
+ + + + + + + +
+ + + + +
+ ); + element = ( + + {menuItems} + + ); + element = ( + + + + + + + ); + element = ( +
+ + {menuItems} + +
+ + {menuItems} + +
+ ); + const {value} = this.state; + const night = value === 2 || value === 3; + element = ( +
+ + {menuItems} + +
+ + {menuItems} + +
+ ); + + + // "http://www.material-ui.com/#/components/slider" + const SliderExampleSimple = () => ( +
+ + + +
+ ); + const SliderExampleDisabled = () => ( +
+ + + +
+ ); + const SliderExampleStep = () => ( + + ); + + + // "http://www.material-ui.com/#/components/checkbox" + const CheckboxExampleSimple = () => ( +
+ + + + } + unCheckedIcon={} + label="Custom icon" + style={styles.checkbox} + /> + +
+ ); + + + // "http://www.material-ui.com/#/components/radio-button" + const RadioButtonExampleSimple = () => ( +
+ + + + + + + + + +
+ ); + + + // "http://www.material-ui.com/#/components/toggle" + const ToggleExampleSimple = () => ( +
+ + + + +
+ ); + + + // "http://material-ui.com/#/components/snackbar" + element = ( +
+ + +
+ ); + element = ( +
+ +
+ + +
+ ); + + // "http://www.material-ui.com/#/components/table" + element = ( + + + + ID + Name + Status + + + + + 1 + John Smith + Employed + + + 2 + Randal White + Unemployed + + + 3 + Stephanie Sanders + Employed + + + 4 + Steve Brown + Employed + + +
+ ); + const tableData = [ + { + name: 'John Smith', + status: 'Employed', + selected: true, + }, + ]; + element = ( +
+ + + + + Super Header + + + + ID + Name + Status + + + + {tableData.map( (row, index) => ( + + {index} + {row.name} + {row.status} + + ))} + + + + ID + Name + Status + + + + Super Footer + + + +
+ +
+

Table Properties

+ + + + + + +

TableBody Properties

+ + + +
+
+ ); + + // "http://www.material-ui.com/#/components/tabs" + const TabsExampleSimple = () => ( + + +
+

Tab One

+

+ This is an example tab. +

+

+ You can put any sort of HTML or react component in here. It even keeps the component state! +

+ +
+ + +
+

Tab Two

+

+ This is another example tab. +

+
+ + +
+

Tab Three

+

+ This is a third example tab. +

+
+ + + ); + element = ( + + +
+

Controllable Tab A

+

+ Tabs are also controllable if you want to programmatically pass them their values. + This allows for more functionality in Tabs such as not + having any Tab selected or assigning them different values. +

+
+ + +
+

Controllable Tab B

+

+ This is another example of a controllable tab. Remember, if you + use controllable Tabs, you need to give all of your tabs values or else + you wont be able to select them. +

+
+ + + ); + const TabsExampleIcon = () => ( + + } /> + } /> + favorite} /> + + ); + + // "http://www.material-ui.com/#/components/text-field" + const TextFieldExampleSimple = () => ( +
+
+
+
+
+
+
+
+ +
+ ); + const TextFieldExampleError = () => ( +
+
+
+
+
+
+ ); + const TextFieldExampleCustomize = () => ( +
+
+
+
+ +
+ ); + const TextFieldExampleDisabled = () => ( +
+
+
+
+ +
+ ); + element = ; + + + // "http://www.material-ui.com/#/components/time-picker" + const TimePickerExampleSimple = () => ( +
+ + +
+ ); + element = ( +
+ this.picker12hr = t} + format="ampm" + hintText="12hr Format" + onChange={this.handleChangeTimePicker12} + /> + this.picker24hr = t} + format="24hr" + hintText="24hr Format" + onChange={this.handleChangeTimePicker24} + /> +
+ ); + + // "http://www.material-ui.com/#/components/toolbar" + const ToolbarExamplesSimple = () => ( + + + + + + + + + + + + + + + + + + + } + > + + + + + + + + ); + return element; } } diff --git a/material-ui/material-ui.d.ts b/material-ui/material-ui.d.ts index 375c23f8f..d9f3a08d7 100644 --- a/material-ui/material-ui.d.ts +++ b/material-ui/material-ui.d.ts @@ -1,4 +1,4 @@ -// Type definitions for material-ui v0.14.0 +// Type definitions for material-ui v0.14.4 // Project: https://github.com/callemall/material-ui // Definitions by: Nathan Brown , Oliver Herrmann // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -41,20 +41,23 @@ declare module "material-ui" { export import ListItem = __MaterialUI.Lists.ListItem; // require('material-ui/lib/lists/list-item'); export import Menu = __MaterialUI.Menus.Menu; // require('material-ui/lib/menus/menu'); export import MenuItem = __MaterialUI.Menus.MenuItem; // require('material-ui/lib/menus/menu-item'); - export import Mixins = __MaterialUI.Mixins; // require('material-ui/lib/mixins/'); + export import Mixins = __MaterialUI.Mixins; // require('material-ui/lib/mixins'); export import Overlay = __MaterialUI.Overlay; // require('material-ui/lib/overlay'); export import Paper = __MaterialUI.Paper; // require('material-ui/lib/paper'); + export import Popover = __MaterialUI.Popover.Popover; // require('material-ui/lib/popover/popover'); export import RadioButton = __MaterialUI.RadioButton; // require('material-ui/lib/radio-button'); export import RadioButtonGroup = __MaterialUI.RadioButtonGroup; // require('material-ui/lib/radio-button-group'); export import RaisedButton = __MaterialUI.RaisedButton; // require('material-ui/lib/raised-button'); export import RefreshIndicator = __MaterialUI.RefreshIndicator; // require('material-ui/lib/refresh-indicator'); - export import Ripples = __MaterialUI.Ripples; // require('material-ui/lib/ripples/'); + export import Ripples = __MaterialUI.Ripples; // require('material-ui/lib/ripples'); export import SelectField = __MaterialUI.SelectField; // require('material-ui/lib/select-field'); + export import SelectableContainerEnhance = __MaterialUI.Hoc.SelectableContainerEnhance; // require('material-ui/lib/hoc/selectable-enhance'); export import Slider = __MaterialUI.Slider; // require('material-ui/lib/slider'); - export import Snackbar = __MaterialUI.Snackbar; // require('material-ui/lib/snackbar'); - export import Styles = __MaterialUI.Styles; // require('material-ui/lib/styles/'); export import SvgIcon = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon'); + 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'); @@ -62,17 +65,16 @@ 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 Tabs = __MaterialUI.Tabs.Tabs; // require('material-ui/lib/tabs/tabs'); - export import TextField = __MaterialUI.TextField; // require('material-ui/lib/text-field'); + export import Toggle = __MaterialUI.Toggle; // require('material-ui/lib/toggle'); export import ThemeWrapper = __MaterialUI.ThemeWrapper; // require('material-ui/lib/theme-wrapper'); export import TimePicker = __MaterialUI.TimePicker; // require('material-ui/lib/time-picker'); - export import Toggle = __MaterialUI.Toggle; // require('material-ui/lib/toggle'); + 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/'); + export import Utils = __MaterialUI.Utils; // require('material-ui/lib/utils'); // svg icons import NavigationMenu = __MaterialUI.SvgIcon; // require('material-ui/lib/svg-icon/navigation/menu'); @@ -151,26 +153,43 @@ declare namespace __MaterialUI { accent2Color?: string; accent3Color?: string; textColor?: string; + alternateTextColor?: string; canvasColor?: string; borderColor?: string; disabledColor?: string; - alternateTextColor?: string; + pickerHeaderColor?: string; + clockCircleColor?: string; + shadowColor?: string; } interface MuiTheme { - rawTheme: RawTheme; - static: boolean; + isRtl?: boolean; + userAgent?: any; + zIndex?: zIndex; + baseTheme?: RawTheme; + rawTheme?: RawTheme; appBar?: { color?: string, textColor?: string, - height?: number - }, + height?: number, + }; avatar?: { - borderColor?: string; + borderColor?: string, } + badge?: { + color?: string, + textColor?: string, + primaryColor?: string, + primaryTextColor?: string, + secondaryColor?: string, + secondaryTextColor?: string, + }, button?: { height?: number, minWidth?: number, - iconButtonSize?: number + iconButtonSize?: number, + }, + cardText?: { + textColor?: string, }, checkbox?: { boxColor?: string, @@ -178,7 +197,7 @@ declare namespace __MaterialUI { requiredColor?: string, disabledColor?: string, labelColor?: string, - labelDisabledColor?: string + labelDisabledColor?: string, }, datePicker?: { color?: string, @@ -192,10 +211,11 @@ declare namespace __MaterialUI { }, flatButton?: { color?: string, + buttonFilterColor?: string, + disabledColor?: string, textColor?: string, primaryTextColor?: string, secondaryTextColor?: string, - disabledColor?: string }, floatingActionButton?: { buttonSize?: number, @@ -205,17 +225,20 @@ declare namespace __MaterialUI { secondaryColor?: string, secondaryIconColor?: string, disabledColor?: string, - disabledTextColor?: string + disabledTextColor?: string, + }, + gridTile?: { + textColor?: string, }, inkBar?: { - backgroundColor?: string; + backgroundColor?: string, }, leftNav?: { width?: number, color?: string, }, listItem?: { - nestedLevelDepth?: number; + nestedLevelDepth?: number, }, menu?: { backgroundColor?: string, @@ -235,6 +258,7 @@ declare namespace __MaterialUI { }, paper?: { backgroundColor?: string, + zDepthShadows?: string[], }, radioButton?: { borderColor?: string, @@ -244,7 +268,7 @@ declare namespace __MaterialUI { disabledColor?: string, size?: number, labelColor?: string, - labelDisabledColor?: string + labelDisabledColor?: string, }, raisedButton?: { color?: string, @@ -254,19 +278,19 @@ declare namespace __MaterialUI { secondaryColor?: string, secondaryTextColor?: string, disabledColor?: string, - disabledTextColor?: string + disabledTextColor?: string, }, refreshIndicator?: { - strokeColor?: string; - loadingStrokeColor?: string; + strokeColor?: string, + loadingStrokeColor?: string, }; slider?: { trackSize?: number, trackColor?: string, trackColorSelected?: string, handleSize?: number, - handleSizeActive?: number, handleSizeDisabled?: number, + handleSizeActive?: number, handleColorZero?: string, handleFillColor?: string, selectionColor?: string, @@ -285,6 +309,8 @@ declare namespace __MaterialUI { }; tableHeaderColumn?: { textColor?: string; + height?: number; + spacing?: number; }; tableFooter?: { borderColor?: string; @@ -296,6 +322,7 @@ declare namespace __MaterialUI { selectedColor?: string; textColor?: string; borderColor?: string; + height?: number; }; tableRowColumn?: { height?: number; @@ -306,6 +333,8 @@ declare namespace __MaterialUI { textColor?: string; accentColor?: string; clockColor?: string; + clockCircleColor?: string; + headerColor?: string; selectColor?: string; selectTextColor?: string; }; @@ -317,9 +346,9 @@ declare namespace __MaterialUI { trackOnColor?: string, trackOffColor?: string, trackDisabledColor?: string, - trackRequiredColor?: string, labelColor?: string, labelDisabledColor?: string + trackRequiredColor?: string, }, toolbar?: { backgroundColor?: string, @@ -330,7 +359,9 @@ declare namespace __MaterialUI { menuHoverColor?: string, }; tabs?: { - backgroundColor?: string; + backgroundColor?: string, + textColor?: string, + selectedTextColor?: string, }; textField?: { textColor?: string; @@ -342,19 +373,37 @@ declare namespace __MaterialUI { backgroundColor?: string; borderColor?: string; }; - isRtl: boolean; } - interface RawTheme { - spacing: Spacing; - fontFamily?: string; - palette: ThemePalette; + interface zIndex { + menu: number; + appBar: number; + leftNavOverlay: number; + leftNav: number; + dialogOverlay: number; + dialog: number; + layer: number; + popover: number; + snackbar: number; + tooltip: number; } + export var zIndex: zIndex; + + interface RawTheme { + spacing?: Spacing; + fontFamily?: string; + palette?: ThemePalette; + zIndex?: zIndex; + } + var lightBaseTheme: RawTheme; + var darkBaseTheme: RawTheme; export function ThemeDecorator(muiTheme: Styles.MuiTheme): (Component: TFunction) => TFunction; + export function getMuiTheme(baseTheme: RawTheme, muiTheme ?: MuiTheme): MuiTheme; + interface ThemeManager { - getMuiTheme(rawTheme: RawTheme): MuiTheme; + getMuiTheme(baseTheme: RawTheme, muiTheme?: MuiTheme): MuiTheme; modifyRawThemeSpacing(muiTheme: MuiTheme, newSpacing: Spacing): MuiTheme; modifyRawThemePalette(muiTheme: MuiTheme, newPaletteKeys: ThemePalette): MuiTheme; modifyRawThemeFontFamily(muiTheme: MuiTheme, newFontFamily: string): MuiTheme; @@ -392,6 +441,7 @@ declare namespace __MaterialUI { } interface AppBarProps extends React.Props { + className?: string; iconClassNameLeft?: string; iconClassNameRight?: string; iconElementLeft?: React.ReactElement; @@ -399,9 +449,11 @@ declare namespace __MaterialUI { iconStyleRight?: string; onLeftIconButtonTouchTap?: TouchTapEventHandler; onRightIconButtonTouchTap?: TouchTapEventHandler; + onTitleTouchTap?: TouchTapEventHandler; showMenuIconButton?: boolean; style?: React.CSSProperties; title?: React.ReactNode; + titleStyle?: React.CSSProperties; zDepth?: number; } export class AppBar extends React.Component{ @@ -412,36 +464,55 @@ declare namespace __MaterialUI { export class AppCanvas extends React.Component { } + interface Origin { + horizontal: string; // oneOf(['left', 'middle', 'right']) + vertical: string; // oneOf(['top', 'center', 'bottom']) + } + + type AutoCompleteDataItem = { text: string, value: React.ReactNode } | string; + type AutoCompleteDataSource = { text: string, value: React.ReactNode }[] | string[]; interface AutoCompleteProps extends React.Props { - anchorOrigin?: string; + anchorOrigin?: Origin; animated?: boolean; - dataSource?: any; + dataSource?: AutoCompleteDataSource; disableFocusRipple?: boolean; - errorStyle?: any; + errorStyle?: React.CSSProperties; errorText?: string; - filter?: (i: any) => boolean; + filter?: (searchText: string, key: string, item: AutoCompleteDataItem) => boolean; floatingLabelText?: string; fullWidth?: boolean; hintText?: string; - listStyle?: any; + listStyle?: React.CSSProperties; menuCloseDelay?: number; menuProps?: any; - menuStyle?: any; - onNewRequest?: (text: string) => void; - onUpdateInput?: (text: string) => void; + menuStyle?: React.CSSProperties; + onNewRequest?: (chosenRequest: string, index: number) => void; + onUpdateInput?: (searchText: string, dataSource: AutoCompleteDataSource) => void; open?: boolean; searchText?: string; + /** @deprecated use noFilter instead */ showAllItems?: boolean; - style?: any; - targetOrigin?: string; + style?: React.CSSProperties; + targetOrigin?: Origin; touchTapCloseDelay?: number; + triggerUpdateOnFocus?: boolean; + /** @deprecated updateWhenFocused has been renamed to triggerUpdateOnFocus */ updateWhenFocused?: boolean; } export class AutoComplete extends React.Component { + static noFilter: () => boolean; + static defaultFilter: (searchText: string, key: string) => boolean; + static caseSensitiveFilter: (searchText: string, key: string) => boolean; + static caseInsensitiveFilter: (searchText: string, key: string) => boolean; + static levenshteinDistanceFilter(distanceLessThan: number): (searchText: string, key: string) => boolean; + static fuzzyFilter: (searchText: string, key: string) => boolean; + static Item: Menus.MenuItem; + static Divider: Divider; } interface AvatarProps extends React.Props { backgroundColor?: string; + className?: string; color?: string; icon?: React.ReactElement; size?: number; @@ -452,8 +523,9 @@ declare namespace __MaterialUI { } interface BadgeProps extends React.Props { - badgeContent: React.ReactElement | string | number; + badgeContent: React.ReactNode; badgeStyle?: React.CSSProperties; + className?: string; primary?: boolean; secondary?: boolean; style?: React.CSSProperties; @@ -467,15 +539,14 @@ declare namespace __MaterialUI { beforeElementType?: string; beforeStyle?: React.CSSProperties; elementType?: string; + style?: React.CSSProperties; } export class BeforeAfterWrapper extends React.Component { } // non generally overridden elements of EnhancedButton - interface SharedEnhancedButtonProps extends React.HTMLAttributes, React.Props { + interface SharedEnhancedButtonProps extends React.Props { centerRipple?: boolean; - containerElement?: string | React.ReactElement; - disabled?: boolean; disableFocusRipple?: boolean; disableKeyboardFocus?: boolean; disableTouchRipple?: boolean; @@ -488,29 +559,37 @@ declare namespace __MaterialUI { onKeyboardFocus?: (e: React.FocusEvent, isKeyboardFocused: boolean) => void; onKeyDown?: React.KeyboardEventHandler; onKeyUp?: React.KeyboardEventHandler; - onMouseEnter?: React.MouseEventHandler; - onMouseLeave?: React.MouseEventHandler; - onTouchEnd?: React.TouchEventHandler; - onTouchStart?: React.TouchEventHandler; onTouchTap?: TouchTapEventHandler; + style?: React.CSSProperties; tabIndex?: number; + touchRippleColor?: string; touchRippleOpacity?: number; + type?: string; } - interface EnhancedButtonProps extends SharedEnhancedButtonProps { - focusRippleColor?: string; - style?: React.CSSProperties; - touchRippleColor?: string; + interface EnhancedButtonProps extends React.HTMLAttributes, SharedEnhancedButtonProps { + // container element,