render: function() {
var myTodoItems = this.state.tasks.map(task => <TodoItem key= {task._id} task={task} onToggle={this.taskToggled} onDelete={this.taskDeleted} /> );
var fridgeTodoItems = this.state.fridgeTasks.map(fridgeTask => <TodoItem key= {task._id} task={task} onToggle={this.taskToggled} onDelete={this.taskDeleted} /> );
return(
<MuiThemeProvider muiTheme={getMuiTheme({})}>
<div className="fridgeApp">
<div className="todoList">
<Subheader>My private tasks</Subheader>
<List>
{myTodoItems}
</List>
<Divider />
<Subheader>My shared tasks</Subheader>
<List>
{fridgeTodoItems}
</List>
</div>
<div className="todoEntry">
<span>
<TextField hintText="Enter your new task and hit enter..." floatingLabelText="New task"
onKeyDown={this.taskAdded} onBlur={this.taskAdded}/>
<Toggle label="Shared"/>
</span>
</div>
</div>
</MuiThemeProvider>
);
}
render() {
return (
<MuiThemeProvider muiTheme={ getMuiTheme() }>
<div id="main">
<Header />
<div className="full-container">
<LeafletMap
infoBoxState={ this.state.infoBoxState }
mapCenter={ this.state.mapCenter }
geolocation={ this.state.geolocation }
markerOnClick={ gaId => this.selectGa(gaId) }
setMapCenter={ mapCenter => this.setState({ mapCenter: mapCenter }) }
/>
<div id="map-boxes-container">
<MapInfoBox gaId={ this.state.gaSelected } boxState={ this.state.infoBoxState } setBoxState={ this.setInfoBoxState.bind(this) } />
<MapNearbyBox gaId={ this.state.gaSelected } boxState={ this.state.nearbyBoxState } setBoxState={ this.setNearbyBoxState.bind(this) } />
</div>
<div id="map-floating-buttons">
<GoToGeolocationButton geolocationOnClick={ this.goToGeolocation.bind(this) } />
<InsertBtnDialog />
</div>
</div>
</div>
</MuiThemeProvider>
);
}
let setSkin = skinName => {
let skindex = Skins.findIndex(Skin => Skin.name.toLowerCase() === skinName.toLowerCase())
let skin = Skins[skindex].skin
this.setState({ skin: getMuiTheme(skin) })
document.body.style.backgroundColor = skin.palette.backgroundColor
//TODO manipulate webkit scrollbar
}
module.exports = function(target) {
ReactDOM.render(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<App></App>
</MuiThemeProvider>,
target
);
}
getChildContext() {
return { muiTheme: getMuiTheme({
palette: {
primary1Color: purple500,
primary2Color: purple700,
primary3Color: purple100,
}}) };
}
constructor(props) {
super(props)
this.state = {
username: null,
room: null,
skin: getMuiTheme(defaultSkin),
}
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<TextField name="textField" value="prathamesh" underlineFocusStyle={{borderColor: "blue"}} style={{ marginLeft: 19, width: 40}}/>
</div>
</MuiThemeProvider>
)
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Fonts>
<NavBar />
{this.props.children}
</Fonts>
</MuiThemeProvider>
);
}
render() {
return <MuiThemeProvider muiTheme={getMuiTheme()}>
<AutoComplete
searchText ={this.state.inputValue}
floatingLabelText ={this.props.placeHolder}
filter ={AutoComplete.noFilter}
openOnFocus ={true}
dataSource ={this.state.dataSource}
onUpdateInput ={this.onUpdateInput}
onNewRequest ={this.onNewRequest} />
</MuiThemeProvider>
}
it('provides getRenderedComponent', () => {
const dom = TestUtils.renderIntoDocument(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<ReduxFormMaterialUIToggle name="myToggle" onChange={noop}/>
</MuiThemeProvider>
)
const element =
TestUtils.findRenderedComponentWithType(dom, ReduxFormMaterialUIToggle)
expect(element.getRenderedComponent).toBeA('function')
expect(element.getRenderedComponent()).toExist()
})
const html = (body) => {
return ReactDOMServer.renderToString(
<div>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div className="landing-header container">
<h3 className="landing-title">mood.ly</h3>
<div className="landing-buttons">
</div>
<br />
<br />
<br />
<br />
<MuiThemeProvider>
<Card
style={{
height: 350,
width: 300,
margin: '0 auto',
border: '4px solid #424242',
borderRadius: '25px',
boxShadow: 'none',
}}
>
<CardHeader
style={{
height: 75,
}}
>
<IconButton
disableTouchRipple={Boolean(true)}
style={{
float: 'left',
color: '#bfefff',
}}
><EditorInsertComment /></IconButton>
</CardHeader>
<CardText
style={{
textAlign: 'center',
}}
>
{body}
</CardText>
</Card>
</MuiThemeProvider>
</div>
</MuiThemeProvider>
<Footer />
</div>
);
};
const App = ({ children, location }) => (
<Provider store={store}>
<MuiThemeProvider
muiTheme={getMuiTheme(themes[location.query.theme || 'admin'])}
>
<Backdrop>
<div style={{ maxWidth: 960, margin: '0 auto', padding: '0 20px' }}>
{children}
</div>
</Backdrop>
</MuiThemeProvider>
</Provider>
)
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div className={styles.content}>
<div id="container">
<div id="container">
<NewRide />
</div>
</div>
</div>
</MuiThemeProvider>
);
}
function App({ children }) {
return (
<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
<ReactCSSTransitionGroup
component="div"
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{children}
</ReactCSSTransitionGroup>
</MuiThemeProvider>
);
}
render() {
return (
<div>
<Helmet title="作业详情" />
<MuiThemeProvider muiTheme={ getMuiTheme({userAgent: this.props.value.userAgent}) }>
<div>
{this.renderTaskDetail()}
{this.renderDialog()}
</div>
</MuiThemeProvider>
<TitleRefresh />
{this.renderLoading()}
</div>
);
}
render() {
const style = createStyle(this);
return (
MuiThemeProvider.el({muiTheme: getMuiTheme(darkBaseTheme)},
Paper.el({
style: style.container,
onMouseUp: this.onDragLeave,
onMouseMove: this.onDragMove,
},
Projects.el()
)
)
);
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={browserHistory}>
<Route path='/' component={Template}>
/*observa que definimos IndexRoute, que será la ruta por defecto*/
/*Todas las rutas siguientes están anidadas dentro de template, es decir
son hijas de la anterior y desde la template cargaremos la que corresponda*/
<IndexRoute component={Index}/>
<Route path='/cervezas' component={Cervezas}/>
<Route path='/contactar' component={Contactar}/>
</Route>
</Router>
</MuiThemeProvider>
)
}
render() {
const muiTheme = getMuiTheme({
palette: {
primary1Color:"blueGrey500"
},
position:{
}
});
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<Nav />
<Tasks task={task} />
</div>
</MuiThemeProvider>
);
}
render() {
return (
<MuiThemeProvider muiTheme={ getMuiTheme({userAgent: this.props.value.userAgent}) }>
<div style={style.container}>
{this.renderAppBar()}
<div style={style.bindForm} >
<TextField
id="studentId"
hintText="请输入学号"
floatingLabelText="学号"
value={this.state.studentId}
onChange={this.handleChange}
fullWidth={true} />
<TextField
id="password"
hintText="请输入密码"
floatingLabelText="密码"
value={this.state.password}
onChange={this.handleChange}
type="password"
fullWidth={true} />
<TextField
id="remark"
hintText="请输入备注"
floatingLabelText="备注"
value={this.state.remark}
onChange={this.handleChange}
fullWidth={true} />
<RaisedButton
id="bind"
label="绑定帐号"
onTouchTap={this.handleSubmit}
primary={true}
fullWidth={true} />
</div>
<div style={style.divider} >
<Divider />
<Link to='/register'> <FlatButton label="没有帐号？请注册" /></Link>
</div>
{this.renderDialog()}
{this.renderLoading()}
</div>
</MuiThemeProvider>
);
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<ul>
<li>
<Link to='/home'>Home</Link>
</li>
<li>
<Link to='/counter'>Counter</Link>
</li>
</ul>
<Paper>
{this.props.children}
</Paper>
</div>
</MuiThemeProvider>
)
}
describe('<Incident />', function () {
const muiTheme = getMuiTheme();
const mountWithContext = (node) => shallow(node, { context: { muiTheme } });
const incident = {
id: '23103810',
date: moment('2016-02-03'),
address: '530 S. State',
description: 'Hello world!'
};
it('should initially not be showing text', function () {
const wrapper = mountWithContext(<Incident incident={incident} />);
expect(wrapper.state().showText).to.eql(false);
});
it('should have a div with incident class', function () {
const wrapper = mountWithContext(<Incident incident={incident} />);
expect(styles.incident).to.not.be.empty;
expect(wrapper.closest(`div.${styles.incident}`)).to.have.length(1);
});
it('should change the text state on clicking the GridTile', function () {
const wrapper = mountWithContext(<Incident incident={incident} />);
wrapper.find('GridTile').simulate('click');
expect(wrapper.state().showText).to.eql(true);
});
it('should change the text state back to default on clicking the textual incident', function () {
const wrapper = mountWithContext(<Incident incident={incident} />);
wrapper.find('GridTile').simulate('click');
expect(wrapper.state().showText).to.eql(true);
wrapper.find(`.${styles.incidentInfo}`).simulate('click');
expect(wrapper.state().showText).to.eql(false);
});
it('should contain friendly date', function () {
const wrapper = mountWithContext(<Incident incident={incident} />);
wrapper.find('GridTile').simulate('click');
expect(wrapper.find(`.${styles.incidentInfo}`).text()).to.contain('Wed, Feb 3, 2016 12:00 AM');
});
});
export default function Root({ children }) {
// Merge theme with useragent
let theme = muiTheme;
let obj2 = {userAgent: navigator.useragent};
for (var attrname in obj2) {theme[attrname] = obj2[attrname]};
// Return app wrapped in muitheme
return (
<MuiThemeProvider muiTheme={getMuiTheme(theme)}>
<div >
<main role="main">
<NavBar />
{children}
<LoadingSnackBar />
<DevTools position={{ bottom: 0, right: 20 }} />
</main>
</div>
</MuiThemeProvider>
);
}
const renderTestComponentWithDialog = (
Component,
emailKey,
{ emailState = INITIAL_EMAIL_STATE, dialogVisible = false } = {}
) => {
const fullEmailState = {
currentlyActive: emailKey,
[emailKey]: emailState
}
return mount(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Component
dispatch={helper.store.dispatch}
ui={{
dialogVisibility: { [EMAIL_COMPOSITION_DIALOG]: dialogVisible }
}}
email={fullEmailState}
/>
</MuiThemeProvider>
)
}
render(){
// console.log(this.state.keyValuePairs);
var hd = this.handleDelete;
var hs = this.handleStateChange;
var pairs = this.state.keyValuePairs.map(function(pair){
// console.log(pair);
// console.log(pair);
return(
<KeyValue timeStamp = {pair.timeStamp} handleDelete = {hd} handleStateChange = {hs} keyy = { pair.key} value = {pair.value} key={pair.timeStamp} />
);
});
return(
<div>
{pairs}
<MuiThemeProvider muiTheme={getMuiTheme()}>
<RaisedButton label="Add New" primary={true} onClick = {this.addNew} style={{maxWidth:100,maxHeight:50,marginTop:10}} labelStyle={{fontSize:'70%'}} />
</MuiThemeProvider>
</div>
);
};
const renderPersonalTab = (selectedProgram = null, props = {}) => {
const { store } = helper
return mount(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Provider store={store}>
<PersonalTab
programs={PROGRAMS}
ui={{ selectedProgram: selectedProgram }}
dispatch={store.dispatch}
uneditedProfile={USER_PROFILE_RESPONSE}
profile={USER_PROFILE_RESPONSE}
{...props}
/>
</Provider>
</MuiThemeProvider>,
{
context: { router: {} },
childContextTypes: { router: PropTypes.object }
}
)
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<AppBar style={this.backgroundStyle()} title="GetRubies" />
<div style={this.container()}>
{ this.state.currentPlayer === null &&
<NewPlayer onCreate={this.setPlayer.bind(this)}/> }
{ this.state.currentPlayer !== null &&
<div><strong>Hi, {this.state.currentPlayer}</strong>
<RaisedButton style={this.buttonStyle()} onClick={this.logoutCurrentPlayer.bind(this)}>Logout</RaisedButton></div>
}
{ this.state.currentPlayer && this.state.currentGame === null &&
<NewGame onCreate={this.createGame.bind(this)}/> }
{ this.state.currentGame === null &&
<GameList games={this.state.games} currentPlayer={this.state.currentPlayer} onSelect={this.joinGame.bind(this)}/> }
{ this.state.currentGame !== null && <div>
<p>Player one: {this.state.currentGame.playerOne} |
Player two: {this.state.currentGame.playerTwo}</p>
<RaisedButton onClick={this.clearCurrentGame.bind(this)}>Back</RaisedButton>
</div>
}
{ this.state.currentGame !== null && <div>
<Canvas isPlayerOne={this.state.currentPlayer == this.state.currentGame.playerOne}
playerOne={this.state.currentGame.playerOne}
playerTwo={this.state.currentGame.playerTwo}
currentGame={this.state.currentGame}
onChange={this.onUpdate.bind(this)}
/>
</div>
}
</div>
</div>
</MuiThemeProvider>
);
}
beforeEach(() => {
profileListSpy = sinon.spy();
skillListSpy = sinon.spy();
clearSkillSpy = sinon.spy();
routerSpy = {
push: sinon.spy(),
replace: sinon.spy(),
go: sinon.spy(),
goBack: sinon.spy(),
goForward: sinon.spy(),
setRouteLeaveHook: sinon.spy(),
isActive: sinon.spy()
};
profileListBySkill = sinon.spy();
mockedActions = {
profileList: profileListSpy,
skillList: skillListSpy,
clearSkill: clearSkillSpy,
profileListBySkill: profileListBySkill,
};
const context = {
muiTheme: getMuiTheme()
};
const childContextTypes = {
muiTheme: React.PropTypes.object
};
component = mount(
<Profiles
profiles={profiles}
skills={skills}
actions={mockedActions}
router={routerSpy}
isLoading={false}
/>,
{
context,
childContextTypes
});
});
export default (themeEnabled, themeColor, themeType) => {
const themePalette = {};
let primaryColor = '#FF5722';
let textColor = darkBlack;
let alternateTextColor = white;
if (themeEnabled) {
primaryColor = themeColor;
if (themeType === 'FULL') {
textColor = white;
alternateTextColor = darkBlack;
themePalette.canvasColor = '#222326';
} else {
primaryColor = themeColor;
}
}
themePalette.primary1Color = primaryColor;
themePalette.primary2Color = darken(primaryColor, 0.2);
themePalette.textColor = textColor;
themePalette.alternateTextColor = alternateTextColor;
themePalette.disabledColor = emphasize(textColor, 0.5);
const muiTheme = getMuiTheme({ palette: themePalette });
muiTheme.dialog.backgroundColor = white;
if (themeEnabled && themeType === 'FULL') {
muiTheme.tabs.backgroundColor = '#222326';
muiTheme.tabs.textColor = white;
muiTheme.tabs.selectedTextColor = themeColor;
muiTheme.inkBar.backgroundColor = themeColor;
muiTheme.dialog.backgroundColor = '#121212';
} else {
muiTheme.inkBar.backgroundColor = white;
}
muiTheme._themeColor = themeColor;
return muiTheme;
};
render() {
const muiTheme = getMuiTheme();
const style = this._getStyle(muiTheme);
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<AppBar
title="Cisqua"
iconElementRight={this._renderRightIcon(style)}
showMenuIconButton={false}
style={style.appBar}
/>
<div style={style.root}>
<div style={style.content}>
{this.props.children}
</div>
</div>
{this._renderSnackBar()}
</div>
</MuiThemeProvider>
);
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme()}><div>
<Card style={Object.assign({}, this.styles.card, { width: 250 })}>
<CardText style={this.styles.cardText}>
<h3 style={this.styles.cardHeader}>Data controls</h3>
<button onClick={GroupEditorExample.addItem}>+ Item</button>
<button onClick={GroupEditorExample.removeItem}>- Item</button>
<br/>
<button onClick={GroupEditorExample.addAssignedItem}>+ Assigned</button>
<button onClick={GroupEditorExample.removeAssignedItem}>- Assigned</button>
<br/>
<button onClick={GroupEditorExample.stopLoading}>Stop loading</button>
<button onClick={GroupEditorExample.startLoading}>Start loading</button>
<br/>
<label>Filter: <input onChange={this.filterChange} value={this.state.filterText} /></label>
<br/>
<button onClick={this.filterChange.bind(this, { target: { value: '' }})}>Clear filter</button>
</CardText>
</Card>
<Card style={this.styles.card}>
<CardText style={this.styles.cardText}>
<h3 style={this.styles.cardHeader}>Group editor</h3>
<div className="scroll">
<GroupEditor
itemStore={itemStore}
assignedItemStore={assignedItemStore}
onAssignItems={GroupEditorExample.assignItems}
onRemoveItems={GroupEditorExample.unassignItems}
height={250}
filterText={this.state.filterText}
/>
</div>
</CardText>
</Card>
</div></MuiThemeProvider>
);
}