* 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);