// Test file for react-mdl Definition file
import * as React from 'react';
import { Chip, ChipContact,
Badge,
FABButton, Button, IconButton,
Card, CardActions, CardTitle, CardText, CardMenu, CardMedia,
Checkbox,
DataTable, TableHeader, Table,
Dialog, DialogTitle, DialogContent, DialogActions,
Grid, Cell,
Icon, IconToggle,
Layout, Header, Navigation, Drawer, Content, HeaderRow, HeaderTabs, Footer, FooterDropDownSection, FooterLinkList, FooterSection,
List, ListItem, ListItemContent, ListItemAction,
Menu, MenuItem,
ProgressBar,
RadioGroup, Radio,
Slider,
Snackbar,
Spinner,
Switch,
Tabs, Tab,
Textfield,
Tooltip,
MDLComponent } from 'react-mdl';
// all tests are from the examples provided here: https://tleunen.github.io/react-mdl/
// Badge tests
class BadgeTests extends React.Component {
render() {
return (
{/* Number badge on icon */}
{/* Icon badge on icon */}
{/* Number badge on text */}
Inbox
{/* Icon badge without background on text */}
Mood
);
}
}
// Chip tests
class ChipTests extends React.Component {
render() {
return (
Basic chip
{ alert('Close icon clicked!'); }}>Deletable Chip
{ alert('Clicked!'); }}>Button Chip
{/* Contact Chip */}
A
Contact chip
{/* User Contact Chip */}
{ alert('Close icon clicked!'); }}>
);
}
}
// Button tests
class ButtonTests extends React.Component {
render() {
return (
{/* Colored FAB button */}
{/* Colored FAB button with ripple */}
{/* FAB button */}
{/* FAB button with ripple */}
{/* Disabled FAB button */}
{/* Mini FAB button */}
{/* Colored Mini FAB button */}
{/* Raised button */}
Button
{/* Raised button with ripple */}
Button
{/* Disabled Raised button */}
Button
{/* Colored Raised button */}
Button
{/* Accent-colored button without ripple */}
Button
{/* Accent-colored button with ripple */}
Button
{/* Flat button */}
Button
{/* Flat button with ripple */}
Button
{/* Disabled flat button */}
Button
{/* Primary colored flat button */}
Button
{/* Accent-colored flat button */}
Button
{/* Icon button */}
);
}
}
// Card tests
class CardTests extends React.Component {
render() {
return (
Welcome
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Get Started
Update
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
View Updates
Image.jpg
Featured event:
Add to Calendar
);
}
}
// Checkbox tests
class CheckboxTests extends React.Component {
render() {
return (
);
}
}
// DataTable tests
class DataTableTests extends React.Component {
render() {
return (
Material
Quantity
`\$${price.toFixed(2)}`} tooltip="Price pet unit">Price
Material
Quantity
`\$${price.toFixed(2)}`} tooltip="Price pet unit">Price
(isAsc ? a : b).match(/\((.*)\)/)[1].localeCompare((isAsc ? b : a).match(/\((.*)\)/)[1])}
tooltip="The amazing material name"
>
Material
Quantity
`\$${price.toFixed(2)}`}
tooltip="Price pet unit"
>
Price
);
}
}
// Dialog tests
class DialogTests extends React.Component<{}, {openDialog: boolean}> {
handleOpenDialog() { }
handleCloseDialog() { }
render() {
return (
Show Dialog
Allow data collection?
Allowing us to collect data will let us get you the information you want faster.
Agree
Disagree
Show Modal
Allow this site to collect usage data to improve your experience?
Allowing us to collect data will let us get you the information you want faster.
Agree
Disagree
Show Dialog
Allow data collection?
Allowing us to collect data will let us get you the information you want faster.
Agree
Disagree
);
}
}
// Grid tests
class GridTests extends React.Component {
render() {
return (
| 1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
| 4 |
4 |
4 |
| 6 |
4 |
2 |
| 6 (8 tablet) |
4 (6 tablet) |
2 (4 phone) |
);
}
}
// IconToggle tests
class IconToggleTests extends React.Component {
render() {
return (
);
}
}
// Layout tests
class LayoutTests extends React.Component<{}, {activeTab: number}> {
render() {
return (
{/* Uses a transparent header that draws on top of the layout's background */}
{/* No header, and the drawer stays open on larger screens (fixed drawer). */}
{/* Always shows a header, even in smaller screens. */}
{/* The drawer is always open in large screens. The header is always shown, even in small screens. */}
{/* Uses a header that scrolls with the text, rather than staying locked at the top */}
{/* Uses a header that contracts as the page scrolls down. */}
{/* Hide the top part of the header when scrolling down */}
{}}>
Tab1
Tab2
Tab3
Tab4
Tab5
Tab6
Content for the tab: {this.state.activeTab}
{/* Simple header with fixed tabs. */}
You can add logic to update the content of this container based on the "activeTab" receive in the `onChange` callback.
Bryan Cranston
Aaron Paul
Bob Odenkirk
Bryan Cranston
Aaron Paul
Bob Odenkirk
Bryan Cranston
Aaron Paul
Bob Odenkirk
Bryan Cranston
Aaron Paul
Bob Odenkirk
Bryan Cranston
Aaron Paul
Bob Odenkirk
Bryan Cranston
Aaron Paul
Bob Odenkirk
);
}
}
// Menu tests
class MenuTests extends React.Component {
render() {
return (
{/* Lower left */}
Some Action
Another Action
Disabled Action
Yet Another Action
{/* Lower right */}
Some Action
Another Action
Disabled Action
Yet Another Action
{/* Top left */}
Some Action
Another Action
Disabled Action
Yet Another Action
{/* Top right */}
Some Action
Another Action
Disabled Action
Yet Another Action
{/* Simple Progress Bar */}
{/* Progress Bar with Indeterminate Progress */}
{/* Progress Bar with Buffering */}
Ripple option
Other option
Ripple option
Other option
);
}
}
// Slider tests
class SliderTests extends React.Component {
render() {
return (
{/* Default slider */}
);
}
}
// Snackbar tests
class SnackbarTests extends React.Component {
handleClickActionSnackbar() {}
handleShowSnackbar() {}
handleTimeoutSnackbar() {}
render() {
return (
Show a Snackbar
Button color changed.
Show a Toast
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius luctus quam. Fusce quis blandit libero. Donec accumsan nunc lectus, vel blandit diam bibendum ac. Integer faucibus, lorem et convallis fermentum, diam dolor imperdiet mi, nec iaculis risus mauris id elit. Vivamus vel eros dapibus, molestie ante ut, vestibulum sem.
);
}
}
// Spinner tests
class SpinnerTests extends React.Component {
render() {
return (
{/* Simple spinner */}
);
}
}
// Switch tests
class SwitchTest extends React.Component {
render() {
return (
Ripple switch
Switch
);
}
}
// Tab tests
class TabTests extends React.Component<{}, {activeTab: number}> {
render() {
return (
this.setState({ activeTab: tabId })} ripple>
Starks
Lannisters
Targaryens
Content for the tab: {this.state.activeTab}
);
}
}
// Textfield tests
class TextfieldTests extends React.Component {
render() {
return (
{/* Simple textfield */}
{}}
label="Text..."
style={{width: '200px'}}
/>
{/* Numeric textfield */}
{}}
pattern="-?[0-9]*(\.[0-9]+)?"
error="Input is not a number!"
label="Number..."
style={{width: '200px'}}
/>
{/* Textfield with floating label */}
{}}
label="Text..."
floatingLabel
style={{width: '200px'}}
/>
{/* Numeric Textfield with floating label */}
{}}
pattern="-?[0-9]*(\.[0-9]+)?"
error="Input is not a number!"
label="Number..."
floatingLabel
/>
);
}
}
// Tooltip tests
class TooltipTests extends React.Component {
render() {
return (
{/* Simple tooltip */}
{/* Large Tooltip */}
{/* Rich Tooltip */}
Upload file.zip }>
{/* Multiline Tooltip */}
Share your content
{/* Right Tooltip */}
{/* Left Tooltip */}
{/* Top Tooltip */}
{/* Bottom Tooltip */}
);
}
}
// MDLComponent tests
class MDLComponentTests extends React.Component {
render() {
return (
)
}
}