* requires the material-ui fonts in vendor
* http://www.material-ui.com/#/components/font-icon
* Choose your icons here
* https://design.google.com/icons/
*/
class ToggleButton extends React.Component {
static propTypes = {
action: PropTypes.func.isRequired,
isActive: PropTypes.bool.isRequired,
muiTheme: PropTypes.object.isRequired,
iconActive: PropTypes.string.isRequired,
iconInactive: PropTypes.string.isRequired
};
render() {
const palette = this.props.muiTheme.palette;
return h(IconButton, { onClick: this.props.action }, [
h(
FontIcon,
{
className: 'material-icons',
color: this.props.isActive ? palette.primary1Color : palette.disabledColor
},
this.props.isActive ? this.props.iconActive : this.props.iconInactive
)
]);
}
}
export default muiThemeable()(ToggleButton);
);
};
const themed = formatter.themed();
const songTitle = formatter.title();
if (typeof link === 'undefined' || !link) {
return null;
}
return (
<Flexbox margin="8px" marginRight='auto' marginLeft='auto'>
<Paper style={this.cardStyle}>
<SubmissionHeader
style={{ position: 'absolute' }}
title={songTitle}
subtitle={this.props.author}
imageSrc={getHostIconUrl(link)}
link={formatter.link()}
onExpand={() => this.setState({ isExpanded: !this.state.isExpanded })}
canExpand={!isEmptyOrSpaces(description)}
/>
{this.state.isExpanded ? descriptionSection() : undefined}
{chipSection()}
</Paper>
</Flexbox>
)
};
}
export default muiThemeable()(Submission);
{React.cloneElement(children, { onMenuTap: this.handleClose })}
</Drawer>
}
medium={
<Paper style={open ? styles.sidebarOpen : styles.sidebarClosed}>
{children}
</Paper>
}
/>
);
}
}
Sidebar.propTypes = {
children: PropTypes.node.isRequired,
muiTheme: PropTypes.object.isRequired,
open: PropTypes.bool.isRequired,
setSidebarVisibility: PropTypes.func.isRequired,
};
const mapStateToProps = (state, props) => ({
open: state.admin.ui.sidebarOpen,
locale: state.locale, // force redraw on locale change
theme: props.theme, // force redraw on theme changes
});
export default compose(
muiThemeable(),
connect(mapStateToProps, { setSidebarVisibility: setSidebarVisibilityAction }),
)(Sidebar);
style={{
backgroundColor: muiTheme.list.itemsBackgroundColor,
}}
>
<TableRowColumn style={styles.handleColumn}>
{/* <DragHandle /> Reordering polygons is not supported for now */}
</TableRowColumn>
{isConvex && (
<TableRowColumn>
{verticesCount === 3 && `Triangle`}
{verticesCount === 4 && `Quadrilateral`}
{verticesCount >= 5 && `Polygon with ${verticesCount} vertices`}
</TableRowColumn>
)}
{!isConvex && <TableRowColumn>Polygon is not convex!</TableRowColumn>}
<TableRowColumn style={styles.coordinateColumn} />
<TableRowColumn style={styles.coordinateColumn} />
<TableRowColumn style={styles.toolColumn}>
{!!onRemove && (
<IconButton onClick={onRemove}>
<Delete />
</IconButton>
)}
</TableRowColumn>
</TableRow>
);
};
const PointRow = muiThemeable()(ThemablePolygonRow);
export default PointRow;
style={toolbarTitleStyle}
/>
</ToolbarGroup>
<ToolbarGroup lastChild>
<IconButton
style={toolbarButtonStyle}
iconStyle={toolbarButtonIconStyle}
>
<ArrowDropUp color={white} />
</IconButton>
</ToolbarGroup>
</Toolbar>
<ChatSelector
chats={this.props.displayOrderChats}
currentChat={this.props.currentChat}
setTwitchChat={this.props.setTwitchChat}
open={this.state.chatSelectorOpen}
onRequestClose={() => this.onRequestCloseChatSelector()}
/>
</div>
)
} else {
content = (<div />)
}
return content
}
}
export default muiThemeable()(ChatSidebar)
primary2Color: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="prim2Col"></TextField>, <br/>
primary3Color: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="prim3Col"></TextField>, <br/>
accent1Color: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="acc1Col"></TextField>, <br/>
accent2Color: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="acc2Col"></TextField>, <br/>
accent3Color: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="acc3Col"></TextField>, <br/>
textColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="txtCol"></TextField>, <br/>
alternateTextColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="altTxtCol"></TextField>, <br/>
canvasColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="canvCol"></TextField>, <br/>
borderColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="borCol"></TextField>, <br/>
disabledColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="disCol"></TextField>, <br/>
pickerHeaderColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="pickCol"></TextField>, <br/>
clockCircleColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="clkCircCol"></TextField>, <br/>
shadowColor: <TextField hintStyle={styles.dir3} hintText="#XXXXXX" id="shadCol"></TextField>, <br/>
}, <br/>
}) <br/>
<div style={styles.containerCentered}>
<RaisedButton label="Preview!" primary={true} onClick={this.handleCustomThemes}/>
</div>
</div>
</div>
<div style={styles.bottomBorderWrapper}>
<MarkdownElement id="md" text={themesText} />
</div>
{this.getAlignmentGroup()}
</div>
);
}
}
export default muiThemeable()(withWidth()(ThemesPage));
import React from 'react'
import muiThemeable from 'material-ui/styles/muiThemeable'
const isInIframe = () => window !== window.top
const BackdropView = ({ muiTheme, children, ...rest }) => {
let fixed = {
height: '100%',
backgroundColor: muiTheme.palette.backdropColor
}
if (isInIframe()) {
fixed.borderRadius = '4px'
} else {
fixed.minHeight = '100vh'
}
return (
<div style={fixed} {...rest}>
{children}
</div>
)
}
export default muiThemeable()(BackdropView)
};
render() {
const { title } = this.props;
return (
<MuiAppBar
style={style.bar}
titleStyle={style.title}
iconStyleLeft={style.icon}
title={title}
onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
/>
);
}
}
AppBarMobile.propTypes = {
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
.isRequired,
toggleSidebar: PropTypes.func.isRequired,
};
const enhance = compose(
muiThemeable(), // force redraw on theme change
connect(null, {
toggleSidebar: toggleSidebarAction,
})
);
export default enhance(AppBarMobile);
const sp = h(ScatterPlot, {
points,
m: box.m,
n: box.n,
xName,
yName,
xOffset: box.x,
yOffset: box.y,
sideLength: sideLength - margin,
muiTheme
});
children.push(sp);
});
}
return h(
'g',
{
width: this.props.width,
height: this.props.height,
className: 'scatterplots'
},
children
);
}
}
export default muiThemeable()(ScatterPlots);
style={itemStyle}
>
<IconButton style={removeButtonStyle} onClick={onRemove}>
<RemoveCircle
style={styles.removeIcon}
color={muiTheme.palette.accent1Color}
/>
</IconButton>
{children}
</div>
);
}
}
FileInputPreview.propTypes = {
children: PropTypes.element.isRequired,
file: PropTypes.object,
onRemove: PropTypes.func.isRequired,
itemStyle: PropTypes.object,
removeStyle: PropTypes.object,
muiTheme: PropTypes.object.isRequired,
};
FileInputPreview.defaultProps = {
file: undefined,
itemStyle: {},
removeStyle: { display: 'inline-block' },
};
export default muiThemeable()(FileInputPreview);
paddingBottom: 0,
backgroundColor: highlight.set ? highlight.color : 'transparent'
}}
value={text}
/>
</div>
);
}
}
LineText.propTypes = {
text: React.PropTypes.string.isRequired,
highlight: React.PropTypes.shape({
set: React.PropTypes.bool.isRequired,
color: React.PropTypes.any.isRequired,
value: React.PropTypes.any
}).isRequired,
muiTheme: React.PropTypes.shape({
fontFamily: React.PropTypes.string
}),
onChangeDo: React.PropTypes.func.isRequired,
onKeyDownDo: React.PropTypes.func.isRequired,
onFocusDo: React.PropTypes.func,
canGetFocus: React.PropTypes.bool,
cursorPosition: React.PropTypes.number,
updateCursorPosition: React.PropTypes.func,
onChangeOfHeightDo: React.PropTypes.func
};
export default muiThemeable()(LineText);
borderColor: selected
? muiTheme.imageThumbnail.selectedBorderColor
: undefined,
...style,
}}
onContextMenu={e => {
e.stopPropagation();
if (onContextMenu) onContextMenu(e.clientX, e.clientY);
}}
>
<img
style={styles.spriteThumbnailImage}
alt={resourceName}
src={resourcesLoader.getResourceFullUrl(project, resourceName)}
crossOrigin="anonymous"
/>
{selectable && (
<div style={styles.checkboxContainer}>
<Checkbox
checked={selected}
onCheck={(e, check) => onSelect(check)}
/>
</div>
)}
</div>
);
};
const ImageThumbnail = muiThemeable()(ThemableImageThumbnail);
export default ImageThumbnail;
);
}
}
Datagrid.propTypes = {
basePath: PropTypes.string,
bodyOptions: PropTypes.object,
currentSort: PropTypes.shape({
sort: PropTypes.string,
order: PropTypes.string,
}),
data: PropTypes.object.isRequired,
headerOptions: PropTypes.object,
ids: PropTypes.arrayOf(PropTypes.any).isRequired,
isLoading: PropTypes.bool,
muiTheme: PropTypes.object,
options: PropTypes.object,
resource: PropTypes.string,
rowOptions: PropTypes.object,
rowStyle: PropTypes.func,
setSort: PropTypes.func,
styles: PropTypes.object,
};
Datagrid.defaultProps = {
data: {},
ids: [],
};
export default muiThemeable()(Datagrid);
</div>
);
}
}
const getNodeKey = ({ treeIndex }) => treeIndex;
const ThemableSortableTree = ({ muiTheme, className, ...otherProps }) => (
<SortableTreeWithoutDndContext
className={`${eventsTree} ${
muiTheme.eventsSheetRootClassName
} ${className}`}
{...otherProps}
/>
);
const SortableTree = muiThemeable()(ThemableSortableTree);
const noop = () => {};
type EventsTreeProps = {|
events: gdEventsList,
project: gdProject,
layout?: ?gdLayout,
globalObjectsContainer: gdObjectsContainer,
objectsContainer: gdObjectsContainer,
selection: SelectionState,
onAddNewInstruction: Function,
onMoveToInstruction: (destinationContext: InstructionContext) => void,
onMoveToInstructionsList: (
destinationContext: InstructionsListContext
) => void,
video={media ? media.sourceID : null}
width="100%"
height="100%"
autoplay
start={Math.round(seek)}
volume={volume / 100}
sharing={false}
uiShowStartScreenInfo={false}
uiShowLogo={false}
showEndScreen={false}
uiHighlightColor={muiTheme.palette.primary1Color}
controls={mode === 'preview'}
/>}
</div>
</span>
);
};
DailymotionPlayer.propTypes = {
muiTheme: React.PropTypes.object.isRequired,
className: React.PropTypes.string,
mode: React.PropTypes.oneOf(['small', 'large', 'preview']),
active: React.PropTypes.bool.isRequired,
enabled: React.PropTypes.bool,
media: React.PropTypes.object,
seek: React.PropTypes.number,
volume: React.PropTypes.number,
};
export default muiThemeable()(DailymotionPlayer);
style={{ ...itemStyle, ...style }}
onContextMenu={this._onContextMenu}
primaryText={label}
leftIcon={
<ListIcon
iconSize={32}
src={this.props.getThumbnail(project, object)}
/>
}
rightIconButton={this._renderObjectMenu(object)}
onClick={() => {
if (!this.props.onObjectSelected) return;
if (this.props.editingName) return;
this.props.onObjectSelected(selected ? '' : objectName);
}}
onDoubleClick={event => {
if (event.button !== LEFT_MOUSE_BUTTON) return;
if (!this.props.onEdit) return;
if (this.props.editingName) return;
this.props.onObjectSelected('');
this.props.onEdit(object);
}}
/>
);
}
}
const ObjectRow = muiThemeable()(ThemableObjectRow);
export default ObjectRow;
return (
<div style={styles.footer}>
<p style={styles.p}>
{' Hand crafted by the engineers at '}
<a style={styles.a} href="http://superleap.xyz">
Super Leap
</a>
{' and our awesome '}
<a
style={styles.a}
href="https://github.com/superleap/react-material-boilerplate/graphs/contributors"
>
contributors
</a>.
</p>
<IconButton
tooltip="Visit github repo"
iconStyle={styles.iconButton}
href="https://github.com/superleap/react-material-boilerplate"
linkButton={true}
>
<GithubCircleIcon/>
</IconButton>
</div>
)
}
}
export default muiThemeable()(Footer);
style={{
backgroundColor: muiTheme.list.itemsBackgroundColor,
...style,
}}
>
<SearchBar
onChange={text =>
this.setState({
search: text,
searchResults: this._computeSearchResults(text),
})
}
onRequestSearch={this._onSubmitSearch}
style={styles.searchBar}
ref={searchBar => (this._searchBar = searchBar)}
/>
<SelectableList value={selectedType}>
{this.state.search
? this._renderSearchResults()
: this._renderTree(instructionsInfoTree)}
</SelectableList>
</div>
);
}
}
const InstructionOrExpressionSelector = muiThemeable()(
ThemableInstructionOrExpressionSelector
);
export default InstructionOrExpressionSelector;
};
},
endDrag(props, monitor, uiComponent) {
if(!monitor.didDrop()) { return; }
const { component, onComponentMove } = props;
const { delta } = monitor.getDropResult();
const location = {
x: component.designer.location.x + Math.round(delta.x),
y: component.designer.location.y + Math.round(delta.y)
};
snapToGrid(location, true);
onComponentMove(location);
uiComponent.handleMeasureChange();
}
};
function collect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
};
}
export default muiThemeable()(dnd.DragSource(dragTypes.VPANEL_COMPONENT, componentSource, collect)(CanvasComponent));
h2: {
fontSize: '0.9em',
lineHeight: '1.2em',
marginTop: 0,
marginBottom: 15,
},
};
const Note = ({ note, muiTheme: { palette } }) =>
<Paper style={style.paper} zDepth={2}>
<h1 style={{ ...style.h1, color: palette.accent3Color }}>
Created by: {note.author.firstName} {note.author.lastName}
</h1>
<h2 style={{ ...style.h2, color: palette.accent1Color }}>
{moment(note.dateCreated).format('dddd, D MMMM YYYY')}
</h2>
<div>{note.text}</div>
</Paper>;
const NoteData = PropTypes.shape({
text: PropTypes.string,
});
Note.propTypes = {
note: NoteData,
muiTheme: PropTypes.object,
};
export default muiThemeable()(Note);
position: 'absolute',
lineHeight: '50px',
overflowY: 'auto',
width: '100%',
wordWrap: 'break-word',
}
};
const DetailsContainer = ({ muiTheme, children, ...props }) => {
const additionalStyle = {
fontFamily: muiTheme.fontFamily,
color: muiTheme.palette.primaryColor,
};
return (
<div style={Object.assign({}, styles.text, additionalStyle)} {...props}>
{children}
</div>
);
};
DetailsContainer.propTypes = {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.node),
React.PropTypes.node
])
};
export default muiThemeable()(DetailsContainer);
<Paper zDepth={2}>
{ (this.state.items.length) < 1 ? <div> <img style={{height: 150, width: 150, padding: 20, paddingBottom: 0, filter: 'grayscale(100%)'}} src={giftImage} alt='none'/>
<h4 style={{padding: 0, color: 'grey'}}>No Items Here</h4>
</div> : <Items
items={this.state.items}
refresh={this.props.refresh}
userData={this.state.userData}
isOwner={this.state.isOwner}
/>
}
</Paper>
<br/>
<br/>
</div>
{this.state.isOwner ?
<div>
<AddItem {...this.props} currentUser={this.state.userData} refresh={this.props.refresh}/>
<Share
list={this.state.list_id}
open={this.state.shareOpen}
onRequestClose={this.closeShare.bind(this)}
handleClose={this.closeShare.bind(this)} />
</div> : <Chat list_id={this.state.list_id} name={name}/> }
<br/>
</div>
);
}
}
export default muiThemeable()(WishList);
const PropertiesTitle = ({ muiTheme, icon, text, onDelete }) => {
const styles = getStyles(muiTheme);
return (
<div style={styles.titleContainer}>
<div style={Object.assign({}, styles.titleItem, styles.titleLeft)}>
{icon}
</div>
{(() => {
if(!onDelete) { return; }
return (
<mui.IconButton onClick={onDelete} style={Object.assign({}, styles.titleItem, styles.titleRight)}>
<icons.actions.Close/>
</mui.IconButton>);
})()}
<div style={Object.assign({}, styles.titleItem, styles.titleMain)}>
{text}
</div>
</div>
);
};
PropertiesTitle.propTypes = {
icon : React.PropTypes.node.isRequired,
text : React.PropTypes.string.isRequired,
onDelete : React.PropTypes.func,
};
export default muiThemeable()(PropertiesTitle);