<img className={classes.img} alt="complex" src="/static/images/grid/complex.jpg" />
</ButtonBase>
</Grid>
<Grid item xs={12} sm container>
<Grid item xs container direction="column" spacing={16}>
<Grid item xs>
<Typography gutterBottom variant="subtitle1">
Standard license
</Typography>
<Typography gutterBottom>Full resolution 1920x1080 • JPEG</Typography>
<Typography color="textSecondary">ID: 1030114</Typography>
</Grid>
<Grid item>
<Typography style={{ cursor: 'pointer' }}>Remove</Typography>
</Grid>
</Grid>
<Grid item>
<Typography variant="subtitle1">$19.00</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
);
}
ComplexGrid.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ComplexGrid);
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'left'
},
control: {
padding: theme.spacing.unit * 2,
},
});
const Converter = ({ classes }) => (
<Grid container className={classes.root}>
<Grid item sm>
<Paper className={classes.paper}>
<SourceUnitSelector />
<DestinationUnitSelector />
</Paper>
</Grid>
<Grid item sm>
<Paper className={classes.paper}>
</Paper>
</Grid>
</Grid>
)
export default connect()(withStyles(styles)(Converter))
import { withStyles } from '@material-ui/core/styles'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
const styles = {
empty: {
textAlign: 'center',
opacity: 0.25
}
}
function EmptyRow({ classes, colSpan, message }) {
return (
<TableRow>
<TableCell className={classes.empty} colSpan={colSpan}>{message}</TableCell>
</TableRow>
)
}
EmptyRow.propTypes = {
classes: PropTypes.object.isRequired,
colSpan: PropTypes.number.isRequired,
message: PropTypes.string,
}
EmptyRow.defaultProps = {
message: 'NO DATA'
}
export default withStyles(styles)(EmptyRow)
const styles = {
main: {
flex: '1',
marginLeft: '1em',
marginTop: 20,
},
card: {
overflow: 'inherit',
textAlign: 'right',
padding: 16,
minHeight: 52,
},
};
const NbNewOrders = ({ value, translate, classes }) => (
<div className={classes.main}>
<CardIcon Icon={ShoppingCartIcon} bgColor="#ff9800" />
<Card className={classes.card}>
<Typography className={classes.title} color="textSecondary">
{translate('pos.dashboard.new_orders')}
</Typography>
<Typography variant="headline" component="h2">
{value}
</Typography>
</Card>
</div>
);
export default translate(withStyles(styles)(NbNewOrders));
defaultValues: method ? method.raw.meta.defaults : EMPTY_OBJECT,
};
};
export const mapDispatchToProps = dispatch => ({
infoClickHandler: (blockName, attributeName, subElement) => {
dispatch(
navigationActions.navigateToInfo(blockName, attributeName, subElement)
);
},
runMethod: (path, inputs) => {
dispatch(malcolmPostAction(path, inputs));
},
updateInput: (path, inputName, inputValue) => {
dispatch(malcolmUpdateMethodInput(path, inputName, inputValue));
},
methodParamClickHandler: path => {
dispatch(navigationActions.navigateToSubElement(path[0], path[1], path[2]));
},
flagInput: (path, param, flagType, flagState) => {
dispatch(malcolmFlagMethodInput(path, param, flagType, flagState));
},
initialiseLocalState: (path, selectedParam) => {
dispatch(malcolmIntialiseMethodParam(path, selectedParam));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(
withStyles(styles, { withTheme: true })(MethodDetails)
);
/>
<CircularProgress
className={classes.progress}
variant="determinate"
size={50}
value={this.state.completed}
/>
<CircularProgress
className={classes.progress}
color="secondary"
variant="determinate"
value={this.state.completed}
/>
<CircularProgress
className={classes.progress}
color="secondary"
variant="determinate"
size={50}
value={this.state.completed}
/>
</div>
);
}
}
CircularDeterminate.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CircularDeterminate);
className={classes.speedDial}
hidden={hidden}
icon={<SpeedDialIcon openIcon={<EditIcon />} />}
onBlur={this.handleClose}
onClick={this.handleClick}
onClose={this.handleClose}
onFocus={this.handleOpen}
onMouseEnter={this.handleOpen}
onMouseLeave={this.handleClose}
open={open}
>
{actions.map(action => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={this.handleClick}
/>
))}
</SpeedDial>
</div>
);
}
}
OpenIconSpeedDial.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OpenIconSpeedDial);
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
{/* <CardActions>
<Button variant="outlined" size="large" color="primary">
Add to cart
</Button>
<Button size="large" color="primary">
View More
</Button>
</CardActions> */}
</Card>
</div>
);
}
MediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MediaCard);
<Typography gutterBottom variant="subheading" component="h2">
{name}
</Typography>
<WeatherIcon className={classes.icon} name="owm" iconId={iconCode.toString()} flip="horizontal" rotate="90" />
<Typography gutterBottom variant="headline" component="h2">
{temp}°
</Typography>
<Typography component="p">
{weather.weather[0].description}
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary" component={Link} to={`/weatherdetail/${this.props.idNum}`}>
detailed weather report
</Button>
</CardActions>
</Card>
)
} else {
return <h1>loading</h1>
}
}
}
City.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(City);
{citationLink(
'https://wazimap.co.za/profiles/province-EC-eastern-cape'
)}
<br />
Census 2011: Statistics South Africa (2011) South African Population
Census 2011. Indicators derived from the full population Census{' '}
{citationLink(
'https://wazimap.co.za/profiles/province-EC-eastern-cape'
)}
<br />
Police Crime Statistics 2014: South African Police Service{' '}
{citationLink(
'https://wazimap.co.za/profiles/province-EC-eastern-cape'
)}
</Typography>
</Grid>
)}
<Grid item className={classes.releaseSelector}>
<ReleaseDropdown primaryReleases={primaryReleases} />
</Grid>
</Grid>
);
}
ProfileReleasesSection.propTypes = {
classes: PropTypes.shape().isRequired,
profile: PropTypes.shape({}).isRequired
};
export default withStyles(styles)(ProfileReleasesSection);
<Switch>
<Route
exact
path={props.to}
render={() => (
<Button color="primary" component={Link} {...props} />
)}
/>
<Route
path="/"
render={() => <Button component={Link} {...props} />}
/>
</Switch>
);
const LinkButtons = withStyles(styles)(({ classes }) => (
<Grid container direction="column" className={classes.container}>
<Grid item>
<Grid container>
<Grid item>
<NavButton to="/">Home</NavButton>
</Grid>
<Grid item>
<NavButton to="/page1">Page 1</NavButton>
</Grid>
<Grid item>
<NavButton to="/page2">Page 2</NavButton>
</Grid>
</Grid>
</Grid>
<Grid item className={classes.content}>
else
{
const diff = Math.random() * 10;
const diff2 = Math.random() * 10;
this.setState({
completed: completed + diff,
buffer : completed + diff + diff2
});
}
};
render()
{
const {classes} = this.props;
const {completed, buffer} = this.state;
return (
<div className={classes.root}>
<LinearProgress variant="buffer" value={completed} valueBuffer={buffer}/>
<br/>
<LinearProgress color="secondary" variant="buffer" value={completed} valueBuffer={buffer}/>
</div>
);
}
}
LinearBuffer.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(LinearBuffer);
</Drawer>
</Hidden>
{anchor === 'left' ? permanentDrawer : null}
<main className={classes.content}>
{mainContent}
</main>
{anchor === 'right' ? permanentDrawer : null}
<div className={classNames(classes.appBar, classes[`appBar-${anchor}`])}>
{mainHeader}
</div>
</div>
</div>
);
}
}
ResponsiveDrawer.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
anchor: PropTypes.string,
drawerContent: PropTypes.element,
mainContent: PropTypes.element,
};
export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
export {
styles,
ResponsiveDrawer
}
<Grid item xs={12}>
<Paper>
<List>
{commentList ? commentList.map((comment,index) => (
<ListItem key={index}>
<Avatar>
<ImageIcon />
</Avatar>
<ListItemText primary={comment.commentText}
secondary={ "Posted By " + comment.createdBy + " at " + comment.createdTime } />
</ListItem>))
:
<CircularProgress/>
}
</List>
</Paper>
</Grid>
</Grid>
);
}
}
Forum.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Forum);
)
.join('\n')}
`}
/>
) : null}
</AppContent>
);
}
MarkdownDocs.propTypes = {
classes: PropTypes.object.isRequired,
demos: PropTypes.object,
disableCarbon: PropTypes.bool,
markdown: PropTypes.string.isRequired,
// You can define the direction location of the markdown file.
// Otherwise, we try to determine it with an heuristic.
markdownLocation: PropTypes.string,
};
MarkdownDocs.defaultProps = {
disableCarbon: false,
};
MarkdownDocs.contextTypes = {
activePage: PropTypes.shape({
pathname: PropTypes.string.isRequired,
}).isRequired,
};
export default withStyles(styles)(MarkdownDocs);
FormRow.propTypes = {
classes: PropTypes.object.isRequired,
};
function NestedGrid(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Grid container spacing={8}>
<Grid item xs={12} container spacing={24}>
<FormRow classes={classes} />
</Grid>
<Grid item xs={12} container spacing={24}>
<FormRow classes={classes} />
</Grid>
<Grid item xs={12} container spacing={24}>
<FormRow classes={classes} />
</Grid>
</Grid>
</div>
);
}
NestedGrid.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(NestedGrid);
);
}
SimpleSpeedDial.propTypes = {
direction: PropTypes.string.isRequired,
};
function Directions({ classes }) {
const speedDialClassName = direction =>
classNames(classes.speedDial, classes[`direction${capitalize(direction)}`]);
return (
<div className={classes.root}>
{['up', 'right', 'down', 'left'].map(direction => (
<SimpleSpeedDial
key={direction}
ariaLabel={direction}
className={speedDialClassName(direction)}
direction={direction}
/>
))}
</div>
);
}
Directions.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Directions);
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar';
import PersonIcon from '@material-ui/icons/Person';
const styles = theme => ({
card: {
maxWidth: 400
}
});
const MyCardHeader = withStyles(styles)(({ classes }) => (
<Card className={classes.card}>
<CardHeader
title="Ron Swanson"
subheader="Legend"
avatar={
<Avatar>
<PersonIcon />
</Avatar>
}
/>
<CardContent>
<Typography variant="caption">Joined 2009</Typography>
<Typography>
Some filler text about the user. There doesn't have to be a
lot - just enough so that the text spans at least two lines.
color="primary"
className={buttonClassname}
onClick={this.handleButtonClick}
>
{success ? <CheckIcon /> : <SaveIcon />}
</Button>
{loading && <CircularProgress size={68} className={classes.fabProgress} />}
</div>
<div className={classes.wrapper}>
<Button
variant="contained"
color="primary"
className={buttonClassname}
disabled={loading}
onClick={this.handleButtonClick}
>
Accept terms
</Button>
{loading && <CircularProgress size={24} className={classes.buttonProgress} />}
</div>
</div>
);
}
}
CircularIntegration.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CircularIntegration);
margin="normal"
/>
<br/>
<TextField
id="energy-conservation"
label="Energy conservation"
className={classes.textField}
value={this.state.energyConservation}
onChange={this.handleChange('energyConservation')}
margin="normal"
/>
<br/>*/}
<Button
color="primary"
variant="raised"
onClick={this.handleSaveTree}
>
Add Tree
</Button>
</div>
</div>
);
}
}
Index.propTypes = {
classes: PropTypes.object.isRequired
};
export default withRoot(withStyles(styles)(Index));
</Button>
<Button size="small" color="primary">
Edit
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</div>
</main>
{/* Footer */}
<footer className={classes.footer}>
<Typography variant="title" align="center" gutterBottom>
Footer
</Typography>
<Typography variant="subheading" align="center" color="textSecondary" component="p">
Something here to give the footer a purpose!
</Typography>
</footer>
{/* End footer */}
</React.Fragment>
);
}
Album.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Album);
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
}
SimpleMediaCard.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(SimpleMediaCard);
<div className={classes.messagesContainer}>
{this.state.messages.length > 0 && this.state.messages.map((message, index) => (
<Message key={index} message={message} answer={this.messageMock(index)}/>
))}
</div>
<form className={classes.form} autoComplete="off" noValidate onSubmit={this.onSubmit.bind(this)}>
<TextField
label="message"
name="message"
value={this.state.message}
placeholder="Enter Your Message"
fullWidth
variant="outlined"
InputLabelProps={{
shrink: true,
}}
onChange={this.messageHandler.bind(this)}
/>
</form>
</Drawer>
</div>
);
}
}
Chat.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(Chat);
<div className={this.props.classes.headerColumnFixedSmall}><Typography variant="body2">{receivedAt}</Typography></div>
<div className={this.props.classes.headerColumnFixedSmall}><Typography variant="body2">{this.props.data.type}</Typography></div>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={24}>
<Grid item xs className={this.props.classes.treeStyle}>
<JSONTree data={this.props.data.payload} />
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
}
}
DeviceDataItem = withStyles(styles)(DeviceDataItem);
class DeviceData extends Component {
constructor() {
super();
this.state = {
paused: false,
connected: false,
data: [],
dialogOpen: false,
};
this.setConnected = this.setConnected.bind(this);
this.onData = this.onData.bind(this);
className={classes.input}
inputProps={{
'aria-label': 'Description',
}}
/>
<Input
value="Disabled"
className={classes.input}
disabled
inputProps={{
'aria-label': 'Description',
}}
/>
<Input
defaultValue="Error"
className={classes.input}
error
inputProps={{
'aria-label': 'Description',
}}
/>
</div>
);
}
Inputs.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Inputs);
openIcon: PropTypes.node,
/**
* Transition component.
*/
TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([
PropTypes.number,
PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
]),
/**
* Properties applied to the `Transition` element.
*/
TransitionProps: PropTypes.object,
};
SpeedDial.defaultProps = {
hidden: false,
direction: 'up',
TransitionComponent: Zoom,
transitionDuration: {
enter: duration.enteringScreen,
exit: duration.leavingScreen,
},
};
export default withStyles(styles, { name: 'MuiSpeedDial' })(SpeedDial);
id="margin-none"
defaultValue="Default Value"
className={classes.textField}
helperText="Some important text"
/>
<TextField
label="Dense"
id="margin-dense"
defaultValue="Default Value"
className={classes.textField}
helperText="Some important text"
margin="dense"
/>
<TextField
label="Normal"
id="margin-normal"
defaultValue="Default Value"
className={classes.textField}
helperText="Some important text"
margin="normal"
/>
</div>
);
};
TextFieldMargins.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(TextFieldMargins);
<option value="viewport">viewport</option>
<option value="window">window</option>
</TextField>
</div>
<FormControlLabel
control={<Switch checked={flip} onChange={this.handleChange('flip')} value="flip" />}
label={[
'Flip',
'(flip the popper’s placement when it starts to overlap its reference element)',
].join(' ')}
/>
<FormControlLabel
control={
<Switch checked={arrow} onChange={this.handleChange('arrow')} value="arrow" />
}
label="Arrow"
/>
</Grid>
</Grid>
<MarkdownElement text={code} />
</div>
);
}
}
AnchorPlayground.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(AnchorPlayground);
</AppFrame>
)}
</MarkdownDocsContents>
);
}
MarkdownDocs.propTypes = {
classes: PropTypes.object.isRequired,
disableAd: PropTypes.bool,
disableEdit: PropTypes.bool,
markdown: PropTypes.string,
// You can define the direction location of the markdown file.
// Otherwise, we try to determine it with an heuristic.
markdownLocation: PropTypes.string,
req: PropTypes.func,
reqPrefix: PropTypes.string,
reqSource: PropTypes.func,
userLanguage: PropTypes.string.isRequired,
};
MarkdownDocs.defaultProps = {
disableAd: false,
};
export default compose(
connect(state => ({
userLanguage: state.options.userLanguage,
})),
withStyles(styles),
)(MarkdownDocs);
height,
width
}
return (
<div className={ClassNames(classes.root, className)} style={style} onClick={onClick} />
)
}
Image.propTypes = {
classes: PropTypes.object.isRequired,
className: PropTypes.string,
src: PropTypes.string.isRequired,
height: PropTypes.string,
width: PropTypes.string,
size: PropTypes.oneOf(['cover', 'contain']),
align: PropTypes.oneOf(['left', 'right', 'center']),
valign: PropTypes.oneOf(['top', 'bottom', 'center']),
onClick: PropTypes.func,
}
Image.defaultProps = {
size: 'cover',
width: '100%',
height: '100%',
align: 'center',
valign: 'center',
}
export default withStyles(styles)(Image)