+
+ );
+ }
+}
+
+const dataSource1 = [
+ {
+ text: 'text-value1',
+ value: (
+
+ ),
+ },
+ {
+ text: 'text-value2',
+ value: (
+
+ ),
+ },
+];
+
+const dataSource2 = ['12345', '23456', '34567'];
+
+const dataSource3 = [
+ {text: 'Some Text', value: 'someFirstValue'},
+ {text: 'Some Text', value: 'someSecondValue'},
+];
+
+const AutoCompleteExampleNoFilter = () => (
+
+
+
+
+);
+
+const colors = [
+ 'Red',
+ 'Orange',
+ 'Yellow',
+ 'Green',
+ 'Blue',
+ 'Purple',
+ 'Black',
+ 'White',
+];
+
+const fruit = [
+ 'Apple', 'Apricot', 'Avocado',
+ 'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
+ 'Boysenberry', 'Blood Orange',
+ 'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya', 'Cloudberry',
+ 'Coconut', 'Cranberry', 'Clementine',
+ 'Damson', 'Date', 'Dragonfruit', 'Durian',
+ 'Elderberry',
+ 'Feijoa', 'Fig',
+ 'Goji berry', 'Gooseberry', 'Grape', 'Grapefruit', 'Guava',
+ 'Honeydew', 'Huckleberry',
+ 'Jabouticaba', 'Jackfruit', 'Jambul', 'Jujube', 'Juniper berry',
+ 'Kiwi fruit', 'Kumquat',
+ 'Lemon', 'Lime', 'Loquat', 'Lychee',
+ 'Nectarine',
+ 'Mango', 'Marion berry', 'Melon', 'Miracle fruit', 'Mulberry', 'Mandarine',
+ 'Olive', 'Orange',
+ 'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Physalis', 'Plum', 'Pineapple',
+ 'Pumpkin', 'Pomegranate', 'Pomelo', 'Purple Mangosteen',
+ 'Quince',
+ 'Raspberry', 'Raisin', 'Rambutan', 'Redcurrant',
+ 'Salal berry', 'Satsuma', 'Star fruit', 'Strawberry', 'Squash', 'Salmonberry',
+ 'Tamarillo', 'Tamarind', 'Tomato', 'Tangerine',
+ 'Ugli fruit',
+ 'Watermelon',
+];
+
+const AutoCompleteExampleFilters = () => (
+ +
+
+
+
+);
+
+// "http://www.material-ui.com/#/components/avatar"
+const AvatarExampleSimple = () => (
+ +
-
+
+
+
+
+
+
+
+
+);
+
+const BadgeExampleContent = () => (
+
+
+ Company Name
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/flat-button"
+const FlatButtonExampleSimple = () => (
+
+
+);
+
+const FlatButtonExampleComplex = () => (
+
+
+
+
+
+
+);
+
+const FlatButtonExampleIcon = () => (
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/raised-button"
+const RaisedButtonExampleSimple = () => (
+
+
+);
+
+const RaisedButtonExampleComplex = () => (
+
+
+
+
+
+);
+
+const RaisedButtonExampleIcon = () => (
+
+
+);
+
+
+// "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 IconButtonExampleSize = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const IconButtonExampleTooltip = () => (
+
+
+);
+
+const IconButtonExampleTouch = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/card"
+const CardExampleWithAvatar = () => (
+
+
+);
+
+const DatePickerExampleInline = () => (
+
+
+);
+
+const optionsStyle = {
+ maxWidth: 255,
+ marginRight: 'auto',
+};
+
+interface DatePickerExampleToggleState {
+ minDate?: Date;
+ maxDate?: Date;
+ autoOk?: boolean;
+ disableYearSelection?: boolean;
+}
+
+class DatePickerExampleToggle extends React.Component<{}, DatePickerExampleToggleState> {
+ constructor(props) {
+ super(props);
+
+ const minDate = new Date();
+ const maxDate = new Date();
+ minDate.setFullYear(minDate.getFullYear() - 1);
+ minDate.setHours(0, 0, 0, 0);
+ maxDate.setFullYear(maxDate.getFullYear() + 1);
+ maxDate.setHours(0, 0, 0, 0);
+
+ this.state = {
+ minDate: minDate,
+ maxDate: maxDate,
+ autoOk: false,
+ disableYearSelection: false,
+ };
+ }
+
+ handleChangeMinDate = (event, date) => {
+ this.setState({
+ minDate: date,
+ });
+ };
+
+ handleChangeMaxDate = (event, date) => {
+ this.setState({
+ maxDate: date,
+ });
+ };
+
+ handleToggle = (event, toggled) => {
+ this.setState({
+ [event.target.name]: toggled,
+ });
+ };
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+class DatePickerExampleControlled extends React.Component<{}, {controlledDate?: Date}> {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ controlledDate: null,
+ };
+ }
+
+ handleChange = (event, date) => {
+ this.setState({
+ controlledDate: date,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+);
+
+let DateTimeFormat = new Intl.DateTimeFormat('fr');
+const DatePickerExampleInternational = () => (
+
+
+);
+
+
+
+// "http://material-ui.com/#/components/dialog"
+class DialogExampleSimple extends React.Component<{}, {open?: boolean}> {
+ state = {
+ open: false,
+ };
+
+ handleOpen = () => {
+ this.setState({open: true});
+ };
+
+ handleClose = () => {
+ this.setState({open: false});
+ };
+
+ render() {
+ const actions = [
+
+
+ );
+ }
+}
+
+class DialogExampleModal extends React.Component<{}, {open?: boolean}> {
+ state = {
+ open: false,
+ };
+
+ handleOpen = () => {
+ this.setState({open: true});
+ };
+
+ handleClose = () => {
+ this.setState({open: false});
+ };
+
+ render() {
+ const actions = [
+
+
+ );
+ }
+}
+
+class DialogExampleCustomWidth extends React.Component<{}, {open?: boolean}> {
+ state = {
+ open: false,
+ };
+
+ handleOpen = () => {
+ this.setState({open: true});
+ };
+
+ handleClose = () => {
+ this.setState({open: false});
+ };
+
+ render() {
+ const actions = [
+
+
+ );
+ }
+}
+
+class DialogExampleDialogDatePicker extends React.Component<{}, {open?: boolean}> {
+ state = {
+ open: false,
+ };
+
+ handleOpen = () => {
+ this.setState({open: true});
+ };
+
+ handleClose = () => {
+ this.setState({open: false});
+ };
+
+ render() {
+ const actions = [
+
+
+ );
+ }
+}
+
+class DialogExampleScrollable extends React.Component<{}, {open?: boolean}> {
+ state = {
+ open: false,
+ };
+
+ handleOpen = () => {
+ this.setState({open: true});
+ };
+
+ handleClose = () => {
+ this.setState({open: false});
+ };
+
+ render() {
+ const actions = [
+
+
+ );
+ }
+}
+
+class DialogExampleAlert extends React.Component<{}, {open?: boolean}> {
+ state = {
+ open: false,
+ };
+
+ handleOpen = () => {
+ this.setState({open: true});
+ };
+
+ handleClose = () => {
+ this.setState({open: false});
+ };
+
+ render() {
+ const actions = [
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/divider"
+const DividerExampleForm = () => (
+ -
+
-
+
+
+
+
+
+
+ );
+ }
+}
+
+class DrawerUndockedExample extends React.Component<{}, {open?: boolean}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {open: false};
+ }
+
+ handleToggle = () => this.setState({open: !this.state.open});
+
+ handleClose = () => this.setState({open: false});
+
+ render() {
+ return (
+
+ this.setState({open})}
+ >
+
+
+
+
+ );
+ }
+}
+
+class DrawerOpenRightExample extends React.Component<{}, {open?: boolean}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {open: false};
+ }
+
+ handleToggle = () => this.setState({open: !this.state.open});
+
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/grid-list"
+const tilesData: {img: string, title: string, author: string, featured?: boolean}[] = [
+ {
+ img: 'images/grid-list/00-52-29-429_640.jpg',
+ title: 'Breakfast',
+ author: 'jill111',
+ featured: true,
+ },
+ {
+ img: 'images/grid-list/burger-827309_640.jpg',
+ title: 'Tasty burger',
+ author: 'pashminu',
+ },
+ {
+ img: 'images/grid-list/camera-813814_640.jpg',
+ title: 'Camera',
+ author: 'Danson67',
+ },
+ {
+ img: 'images/grid-list/morning-819362_640.jpg',
+ title: 'Morning',
+ author: 'fancycrave1',
+ },
+ {
+ img: 'images/grid-list/hats-829509_640.jpg',
+ title: 'Hats',
+ author: 'Hans',
+ },
+ {
+ img: 'images/grid-list/honey-823614_640.jpg',
+ title: 'Honey',
+ author: 'fancycravel',
+ },
+ {
+ img: 'images/grid-list/vegetables-790022_640.jpg',
+ title: 'Vegetables',
+ author: 'jill111',
+ },
+ {
+ img: 'images/grid-list/water-plant-821293_640.jpg',
+ title: 'Water plant',
+ author: 'BkrmadtyaKarki',
+ },
+];
+
+const GridListExampleSimple = () => (
+
+
+ December
+ {tilesData.map((tile) => (
+ by {tile.author}}
+ actionIcon={
+
+ ))}
+
+
+);
+
+const GridListExampleComplex = () => (
+
+
+ {tilesData.map((tile) => (
+
+
+);
+
+
+// "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 SvgIconExampleIcons = () => (
+
+
+);
+
+
+// "http://material-ui.com/#/components/lists"
+const ListExampleSimple = () => (
+ -
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+);
+
+const ListExamplePhone = () => (
+ -
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+);
+
+function wrapState(ComposedComponent: React.ComponentClass<__MaterialUI.List.SelectableProps>) {
+ return class SelectableList extends Component<{defaultValue: number}, {selectedIndex: number}> {
+ static propTypes = {
+ children: PropTypes.node.isRequired,
+ defaultValue: PropTypes.number.isRequired,
+ };
+
+ componentWillMount() {
+ this.setState({
+ selectedIndex: this.props.defaultValue,
+ });
+ }
+
+ handleRequestChange = (event, index) => {
+ this.setState({
+ selectedIndex: index,
+ });
+ };
+
+ render() {
+ return (
+ -
+
+ Brendan Lim -- + I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch? +
+ } + secondaryTextLines={2} + /> +Summer BBQ 4
+ } + secondaryText={ ++ to me, Scott, Jennifer -- + Wish I could come, but I'm out of town this weekend. +
+ } + secondaryTextLines={2} + /> ++ Grace Ng -- + Do you have Paris recommendations? Have you ever been? +
+ } + secondaryTextLines={2} + /> ++ Kerem Suer -- + Do you have any ideas what we can get Heidi for her birthday? How about a pony? +
+ } + secondaryTextLines={2} + /> ++ Raquel Parrado -- + We should eat this: grated squash. Corn and tomatillo tacos. +
+ } + secondaryTextLines={2} + /> +-
+
+ Brunch this weekend?
+ I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
+
+ Summer BBQ
+ Wish I could come, but I'm out of town this weekend.
+
+ Oui oui
+ Do you have any Paris recs? Have you ever been?
+
+ Birthday gift
+ Do you have any ideas what we can get Heidi for her birthday? How about a pony?
+
+ Recipe to try
+ We should eat this: grated squash. Corn and tomatillo tacos.
+
+
+
+
+
+
+
+
+);
+
+const MenuExampleDisable = () => (
+
+
+
+
+
+
+
+
+);
+
+const MenuExampleIcons = () => (
+
+
+
+
+
+
+
+
+);
+
+const MenuExampleSecondary = () => (
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const MenuExampleNested = () => (
+
+
+
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/icon-menu"
+const IconMenuExampleSimple = () => (
+
+
+);
+
+interface IconMenuExampleControlledState {
+ valueSingle?: string;
+ valueMultiple?: string[];
+ openMenu?: boolean;
+}
+
+class IconMenuExampleControlled extends React.Component<{}, IconMenuExampleControlledState> {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ valueSingle: '3',
+ valueMultiple: ['3', '5'],
+ };
+ }
+
+ handleChangeSingle = (event, value) => {
+ this.setState({
+ valueSingle: value,
+ });
+ };
+
+ handleChangeMultiple = (event, value) => {
+ this.setState({
+ valueMultiple: value,
+ });
+ };
+
+ handleOpenMenu = () => {
+ this.setState({
+ openMenu: true,
+ });
+ }
+
+ handleOnRequestChange = (value) => {
+ this.setState({
+ openMenu: value,
+ });
+ }
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+const IconMenuExampleScrollable = () => (
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/dropdown-menu"
+class DropDownMenuSimpleExample extends React.Component<{}, {value?: number}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {value: 1};
+ }
+
+ handleChange = (event, index, value) => this.setState({value});
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+class DropDownMenuOpenImmediateExample extends React.Component<{}, {value?: number}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {value: 2};
+ }
+
+ handleChange = (event, index, value) => this.setState({value});
+
+ render() {
+ return (
+ +
+
+);
+
+const PaperExampleRounded = () => (
+
+
+);
+
+const PaperExampleCircle = () => (
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/popover"
+class PopoverExampleSimple extends React.Component<{}, {open?: boolean, anchorEl?: React.ReactInstance}> {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ open: false,
+ };
+ }
+
+ handleTouchTap = (event) => {
+ // This prevents ghost click.
+ event.preventDefault();
+
+ this.setState({
+ open: true,
+ anchorEl: event.currentTarget,
+ });
+ };
+
+ handleRequestClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+class PopoverExampleAnimation extends React.Component<{}, {open?: boolean, anchorEl?: React.ReactInstance}> {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ open: false,
+ };
+ }
+
+ handleTouchTap = (event) => {
+ // This prevents ghost click.
+ event.preventDefault();
+ this.setState({
+ open: true,
+ anchorEl: event.currentTarget,
+ });
+ };
+
+ handleRequestClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+interface PopoverExampleConfigurableState {
+ open?: boolean;
+ anchorOrigin?: __MaterialUI.propTypes.origin;
+ targetOrigin?: __MaterialUI.propTypes.origin;
+ anchorEl?: React.ReactInstance;
+}
+
+class PopoverExampleConfigurable extends React.Component<{}, PopoverExampleConfigurableState> {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ open: false,
+ anchorOrigin: {
+ horizontal: 'left',
+ vertical: 'bottom',
+ },
+ targetOrigin: {
+ horizontal: 'left',
+ vertical: 'top',
+ },
+ };
+ }
+
+ handleTouchTap = (event) => {
+ // This prevents ghost click.
+ event.preventDefault();
+ this.setState({
+ open: true,
+ anchorEl: event.currentTarget,
+ });
+ };
+
+ handleRequestClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ setAnchor = (positionElement, position) => {
+ const {anchorOrigin} = this.state;
+ anchorOrigin[positionElement] = position;
+
+ this.setState({
+ anchorOrigin: anchorOrigin,
+ });
+ };
+
+ setTarget = (positionElement, position) => {
+ const {targetOrigin} = this.state;
+ targetOrigin[positionElement] = position;
+
+ this.setState({
+ targetOrigin: targetOrigin,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/circular-progress"
+const CircularProgressExampleSimple = () => (
+ Current Settings
+
+ anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
+
+ targetOrigin: {JSON.stringify(this.state.targetOrigin)}
+
+ Position Options
+Use the settings below to toggle the positioning of the popovers above
+Anchor Origin
+
+
+
+ Vertical
+
+
+ Horizontal
+
+ Target Origin
+
+
+
+ Vertical
+
+
+ Horizontal
+
+
+
+);
+
+class CircularProgressExampleDeterminate extends React.Component<{}, {completed?: number}> {
+ private timer: number;
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ completed: 0,
+ };
+ }
+
+ componentDidMount() {
+ this.timer = setTimeout(() => this.progress(5), 1000);
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ progress(completed) {
+ if (completed > 100) {
+ this.setState({completed: 100});
+ } else {
+ this.setState({completed});
+ const diff = Math.random() * 10;
+ this.timer = setTimeout(() => this.progress(completed + diff), 1000);
+ }
+ }
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/linear-progress"
+const LinearProgressExampleSimple = () => (
+
+
+);
+
+const RefreshIndicatorExampleLoading = () => (
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/select-field"
+class SelectFieldExampleSimple extends React.Component<{}, {value?: number}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {value: 1};
+ }
+
+ handleChange = (event, index, value) => this.setState({value});
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+class SelectFieldLongMenuExample extends React.Component<{}, {value?: number}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {value: 10};
+ }
+
+ handleChange = (event, index, value) => this.setState({value});
+
+ render() {
+ return (
+ +
+
+
+
+ {itemsPeriod}
+
+
+
+ {itemsPeriod}
+
+
+ );
+ }
+}
+
+class SelectFieldExampleError extends React.Component<{}, {value?: number}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {value: null};
+ }
+
+ handleChange = (event, index, value) => this.setState({value});
+
+ render() {
+ const {value} = this.state;
+
+ const night = value === 2 || value === 3;
+
+ return (
+ +
+
+ {itemsPeriod}
+
+
+
+ {itemsPeriod}
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/slider"
+const SliderExampleSimple = () => (
+ +
+
+);
+
+const SliderExampleDisabled = () => (
+
+
+);
+
+const SliderExampleStep = () => (
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/checkbox"
+const CheckboxExampleSimple = () => (
+ + {'The value of this slider is: '} + {this.state.firstSlider} + {' from a range of 0 to 1 inclusive'} +
++ {'The value of this slider is: '} + {this.state.secondSlider} + {' from a range of 0 to 100 inclusive'} +
+
+
+);
+
+
+// "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"
+class SnackbarExampleSimple extends React.Component<{}, {open?: boolean}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ open: false,
+ };
+ }
+
+ handleTouchTap = () => {
+ this.setState({
+ open: true,
+ });
+ };
+
+ handleRequestClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+class SnackbarExampleAction extends React.Component<{}, {open?: boolean, autoHideDuration?: number, message?: string}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ autoHideDuration: 4000,
+ message: 'Event added to your calendar',
+ open: false,
+ };
+ }
+
+ handleTouchTap = () => {
+ this.setState({
+ open: true,
+ });
+ };
+
+ handleActionTouchTap = () => {
+ this.setState({
+ open: false,
+ });
+ alert('Event removed from your calendar.');
+ };
+
+ handleChangeDuration = (event) => {
+ const value = event.target.value;
+ this.setState({
+ autoHideDuration: value.length > 0 ? parseInt(value) : 0,
+ });
+ };
+
+ handleRequestClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+class SnackbarExampleTwice extends React.Component<{}, {open?: boolean, message?: string}> {
+
+ private timer: number;
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ message: 'Event 1 added to your calendar',
+ open: false,
+ };
+ this.timer = undefined;
+ }
+
+ componentWillUnMount() {
+ clearTimeout(this.timer);
+ }
+
+ handleTouchTap = () => {
+ this.setState({
+ open: true,
+ });
+
+ this.timer = setTimeout(() => {
+ this.setState({
+ message: `Event ${Math.round(Math.random() * 100)} added to your calendar`,
+ });
+ }, 1500);
+ };
+
+ handleRequestClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ render() {
+ return (
+ +
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/stepper"
+class HorizontalLinearStepper extends React.Component<{}, {stepIndex?: number, finished?: boolean}> {
+
+ state = {
+ finished: false,
+ stepIndex: 0,
+ };
+
+ handleNext = () => {
+ const {stepIndex} = this.state;
+ this.setState({
+ stepIndex: stepIndex + 1,
+ finished: stepIndex >= 2,
+ });
+ };
+
+ handlePrev = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex > 0) {
+ this.setState({stepIndex: stepIndex - 1});
+ }
+ };
+
+ getStepContent(stepIndex) {
+ switch (stepIndex) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'You\'re a long way from home sonny jim!';
+ }
+ }
+
+ render() {
+ const {finished, stepIndex} = this.state;
+ const contentStyle = {margin: '0 16px'};
+
+ return (
+
+
+
+ Select campaign settings
+
+
+ Create an ad group
+
+
+ Create an ad
+
+
+
+ );
+ }
+}
+
+class VerticalLinearStepper extends React.Component<{}, {stepIndex?: number, finished?: boolean}> {
+
+ state = {
+ finished: false,
+ stepIndex: 0,
+ };
+
+ handleNext = () => {
+ const {stepIndex} = this.state;
+ this.setState({
+ stepIndex: stepIndex + 1,
+ finished: stepIndex >= 2,
+ });
+ };
+
+ handlePrev = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex > 0) {
+ this.setState({stepIndex: stepIndex - 1});
+ }
+ };
+
+ renderStepActions(step) {
+ const {stepIndex} = this.state;
+
+ return (
+
+ {finished ? (
+
+ + { + event.preventDefault(); + this.setState({stepIndex: 0, finished: false}); + }} + > + Click here + to reset the example. +
+ ) : ( +
+
+ )}
+ {this.getStepContent(stepIndex)}
+
+
+
+
+ );
+ }
+
+ render() {
+ const {finished, stepIndex} = this.state;
+
+ return (
+
+
+
+ Select campaign settings
+
+
+
+
+ Create an ad group
+
+
+
+
+ Create an ad
+
+
+
+
+ {finished && (
+
+ );
+ }
+}
+
+class HorizontalNonLinearStepper extends React.Component<{}, {stepIndex?: number}> {
+
+ state = {
+ stepIndex: 0,
+ };
+
+ handleNext = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex < 2) {
+ this.setState({stepIndex: stepIndex + 1});
+ }
+ };
+
+ handlePrev = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex > 0) {
+ this.setState({stepIndex: stepIndex - 1});
+ }
+ };
+
+ getStepContent(stepIndex) {
+ switch (stepIndex) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'You\'re a long way from home sonny jim!';
+ }
+ }
+
+ render() {
+ const {stepIndex} = this.state;
+ const contentStyle = {margin: '0 16px'};
+
+ return (
+ + For each ad campaign that you create, you can control how much + you're willing to spend on clicks and conversions, which networks + and geographical locations you want your ads to show on, and more. +
+ {this.renderStepActions(0)} +An ad group contains one or more ads which target a shared set of keywords.
+ {this.renderStepActions(1)} ++ Try out different ad text to see what brings in the most customers, + and learn how to enhance your ads using features like ad extensions. + If you run into any problems with your ads, find out how to tell if + they're running and how to resolve approval issues. +
+ {this.renderStepActions(2)} ++ { + event.preventDefault(); + this.setState({stepIndex: 0, finished: false}); + }} + > + Click here + to reset the example. +
+ )} +
+
+
+ this.setState({stepIndex: 0})}>
+ Select campaign settings
+
+
+
+ this.setState({stepIndex: 1})}>
+ Create an ad group
+
+
+
+ this.setState({stepIndex: 2})}>
+ Create an ad
+
+
+
+
+ );
+ }
+}
+
+class VerticalNonLinear extends React.Component<{}, {stepIndex?: number}> {
+
+ state = {
+ stepIndex: 0,
+ };
+
+ handleNext = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex < 2) {
+ this.setState({stepIndex: stepIndex + 1});
+ }
+ };
+
+ handlePrev = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex > 0) {
+ this.setState({stepIndex: stepIndex - 1});
+ }
+ };
+
+ renderStepActions(step) {
+ return (
+
+
+ {this.getStepContent(stepIndex)}
+
+
+
+
+ );
+ }
+
+ render() {
+ const {stepIndex} = this.state;
+
+ return (
+
+
+
+ this.setState({stepIndex: 0})}>
+ Select campaign settings
+
+
+
+
+
+ this.setState({stepIndex: 1})}>
+ Create an ad group
+
+
+
+
+
+ this.setState({stepIndex: 2})}>
+ Create an ad
+
+
+
+
+
+
+ );
+ }
+}
+
+const getStyles = () => {
+ return {
+ root: {
+ width: '100%',
+ maxWidth: 700,
+ margin: 'auto',
+ },
+ content: {
+ margin: '0 16px',
+ },
+ actions: {
+ marginTop: 12,
+ },
+ backButton: {
+ marginRight: 12,
+ },
+ };
+};
+
+class GranularControlStepper extends React.Component<{}, {stepIndex?: number, visited?: number[]}> {
+
+ state = {
+ stepIndex: null,
+ visited: [],
+ };
+
+ componentWillMount() {
+ const {stepIndex, visited} = this.state;
+ this.setState({visited: visited.concat(stepIndex)});
+ }
+
+ componentWillUpdate(nextProps, nextState) {
+ const {stepIndex, visited} = nextState;
+ if (visited.indexOf(stepIndex) === -1) {
+ this.setState({visited: visited.concat(stepIndex)});
+ }
+ }
+
+ handleNext = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex < 2) {
+ this.setState({stepIndex: stepIndex + 1});
+ }
+ };
+
+ handlePrev = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex > 0) {
+ this.setState({stepIndex: stepIndex - 1});
+ }
+ };
+
+ getStepContent(stepIndex) {
+ switch (stepIndex) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'Click a step to get started.';
+ }
+ }
+
+ render() {
+ const {stepIndex, visited} = this.state;
+ const styles = getStyles();
+
+ return (
+ + For each ad campaign that you create, you can control how much + you're willing to spend on clicks and conversions, which networks + and geographical locations you want your ads to show on, and more. +
+ {this.renderStepActions(0)} +An ad group contains one or more ads which target a shared set of keywords.
+ {this.renderStepActions(1)} ++ Try out different ad text to see what brings in the most customers, + and learn how to enhance your ads using features like ad extensions. + If you run into any problems with your ads, find out how to tell if + they're running and how to resolve approval issues. +
+ {this.renderStepActions(2)} +
+
+
+ this.setState({stepIndex: 0})}>
+ Select campaign settings
+
+
+
+ this.setState({stepIndex: 1})}>
+ Create an ad group
+
+
+
+ this.setState({stepIndex: 2})}>
+ Create an ad
+
+
+
+
+ );
+ }
+}
+
+class CustomIcon extends React.Component<{}, {stepIndex?: number}> {
+
+ state = {
+ stepIndex: 0,
+ };
+
+ handleNext = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex < 2) {
+ this.setState({stepIndex: stepIndex + 1});
+ }
+ };
+
+ handlePrev = () => {
+ const {stepIndex} = this.state;
+ if (stepIndex > 0) {
+ this.setState({stepIndex: stepIndex - 1});
+ }
+ };
+
+ getStepContent(stepIndex) {
+ switch (stepIndex) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'You\'re a long way from home sonny jim!';
+ }
+ }
+
+ render() {
+ return (
+ + { + event.preventDefault(); + this.setState({stepIndex: null, visited: []}); + }} + > + Click here + to reset the example. +
+
+
+ {this.getStepContent(stepIndex)}
+ {stepIndex !== null && ( +
+
+ )}
+
+
+
+
+ Select campaign settings
+
+
+
+
+
+
+ Create an ad
+
+
+
+
+ );
+ }
+}
+
+
+// "http://www.material-ui.com/#/components/subheader"
+// Included in ListExampleChat and ListExampleFolder
+
+// "http://www.material-ui.com/#/components/table"
+const TableExampleSimple = () => (
+
+
+
+
+
+ );
+ }
+}
+
+// "http://www.material-ui.com/#/components/tabs"
+function handleActive(tab) {
+ alert(`A tab with this value property ${tab.props.value} was activated.`);
+}
+
+const TabsExampleSimple = () => (
+
+
+ Table Properties
+TableBody Properties
+Multiple Properties
+
+
+ Tab One
++ This is an example tab. +
++ You can put any sort of HTML or react component in here. It even keeps the component state! +
+
+
+ Tab Two
++ This is another example tab. +
+
+
+ Tab Three
++ This is a third example tab. +
+
+
+ Controllable Tab A
++ Tabs are also controllable if you want to programmatically pass them their values. + This allows for more functionality in Tabs such as not + having any Tab selected or assigning them different values. +
+
+
+ Controllable Tab B
++ This is another example of a controllable tab. Remember, if you + use controllable Tabs, you need to give all of your tabs values or else + you wont be able to select them. +
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const TextFieldExampleError = () => (
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const TextFieldExampleCustomize = () => (
+ +
+
+
+
+
+
+
+
+
+);
+
+const TextFieldExampleDisabled = () => (
+ +
+
+
+
+
+
+
+
+);
+
+class TextFieldExampleControlled extends React.Component<{}, {value?: string}> {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ value: 'Property Value',
+ };
+ }
+
+ handleChange = (event) => {
+ this.setState({
+ value: event.target.value,
+ });
+ };
+
+ render() {
+ return (
+ +
+
+
+
+ );
+ }
+}
+
+// "http://www.material-ui.com/#/components/time-picker"
+const TimePickerExampleSimple = () => (
+
+
+);
+
+class TimePickerExampleComplex extends React.Component<{}, {value24?: Date, value12?: Date}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {value24: null, value12: null};
+ }
+
+ handleChangeTimePicker24 = (event, date) => {
+ this.setState({value24: date});
+ };
+
+ handleChangeTimePicker12 = (event, date) => {
+ this.setState({value12: date});
+ };
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+const TimePickerInternational = () => (
+
+
+);
+
+
+// "http://www.material-ui.com/#/components/toolbar"
+class ToolbarExamplesSimple extends React.Component<{}, {value?: number}> {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: 3,
+ };
+ }
+
+ handleChange = (event, index, value) => this.setState({value});
+
+ render() {
+ return (
+