<div className="ui column">
{this.state.pivotConstraint ?
<WaitAMoment />
:
<div className="ui segment">
<h2>List of available datasets to browse</h2>
<div className="ui big divided animated list">
No Dataset is selected to browse!
</div>
</div>
}
</div>
</div>
</div>
);
}
}
}
FacetedBrowser.contextTypes = {
executeAction: PropTypes.func.isRequired,
getUser: PropTypes.func
};
FacetedBrowser = connectToStores(FacetedBrowser, [FacetedBrowserStore], function (context, props) {
return {
FacetedBrowserStore: context.getStore(FacetedBrowserStore).getState()
};
});
export default FacetedBrowser;
});
return uris;
}
componentDidUpdate(prevProps) {
let newProps = this.props;
let uris = this.prepareURIs(newProps.spec.instances);
if (prevProps.spec.instances.length !== newProps.spec.instances.length) {
this.context.executeAction(getCoordinates, {uris: uris});
}
}
render () {
return (
<div ref="DBpediaGoogleMapView">
{this.props.DBpediaGMapStore.coordinates.length? <GoogleMapView key={this.props.DBpediaGMapStore.coordinates.length} markers={this.props.DBpediaGMapStore.coordinates} zoomLevel={3} center={{lat: 48.2000, lng: 16.3500}}/> :''}
<BasicAggregateView spec={this.props.spec} config={this.props.config} />
</div>
);
}
}
DBpediaGoogleMapView.contextTypes = {
executeAction: React.PropTypes.func.isRequired
};
DBpediaGoogleMapView = connectToStores(DBpediaGoogleMapView, [DBpediaGMapStore], function (context, props) {
return {
DBpediaGMapStore: context.getStore(DBpediaGMapStore).getState()
};
});
export default DBpediaGoogleMapView;
content = <Handler {...params} />;
}
return (
<Page>
{ content }
<div className="pixel loader"></div>
<div className="pixel uiux_btns"></div>
<div className="pixel uiux_icons"></div>
<div className="pixel uiux_footix"></div>
<div className="pixel uiux_emojis"></div>
</Page>
);
}
}
Application = connectToStores(Application, ["LoginStore"], (context) => {
return {
credentials: context.getStore("LoginStore").getCredentials()
};
}, {getStore: PropTypes.func});
// Wrap with fluxible-router's history handler (required for routing)
// It also pass `currentRoute` as prop to the component
Application = handleHistory(Application);
// Wrap Application with the fluxible context (required)
Application = provideContext(Application);
export default Application;
var cat = _.find(categories, {id: catId});
if(cat) return (<li>{cat.name}</li>);
}
, this)}
</ul>
</Layout>
);
}
save = () => {
const { categories, businessId } = this.props;
const values = {
addedCategories: _.compact(_.map(categories, function(categorie) {
if (this.refs[categorie.name].isChecked())
return categorie.id;
}.bind(this)))
};
this.context.executeAction(BusinessActions.updateInfos, { businessId, values });
}
}
BusinessCategoriesPage = connectToStores(BusinessCategoriesPage, [
'CategoryStore'
], (context, props) => ({
categories: context.getStore('CategoryStore').getAll(),
business : context.getStore('BusinessStore').getById(props.businessId)
}));
export default BusinessCategoriesPage;
</NavLink> <TopNav selected={routeName} currentRoute={this.props.currentRoute} />
</div>
</div>
{Handler}
</div>
<div id="footer" className="P(20px) Bdt(1)" role="footer">
<div className="innerwrapper spaceBetween Mx(a)--sm W(90%)--sm W(a)--sm">
<small>All code on this site is licensed under the <I13nAnchor i13nModel={{category: 'license'}} href="https://github.com/yahoo/fluxible.io/blob/master/LICENSE.md">Yahoo BSD License</I13nAnchor>, unless otherwise stated.</small> <small>© 2015 Yahoo! Inc. All rights reserved.</small>
</div>
</div>
</div>
);
}
}
Application = provideContext(
handleHistory(
connectToStores(Application, ['DocStore'], (context) => ({
currentTitle: context.getStore('DocStore').getCurrentTitle() || '',
currentDoc: context.getStore('DocStore').getCurrent()
}))
)
);
// setup i13n
var reactI13nGoogleAnalytics = new ReactI13nGoogleAnalytics('UA-58912168-1');
Application = setupI13n(Application, {}, [reactI13nGoogleAnalytics.getPlugin()]);
export default Application;
render() {
var Handler = this.props.currentRoute.handler;
return (
<div>
<Nav currentRoute={this.props.currentRoute} links={pages} />
<Handler/>
</div>
);
}
componentDidUpdate(prevProps, prevState) {
const newProps = this.props;
if (newProps.pageTitle === prevProps.pageTitle) {
return;
}
document.title = newProps.pageTitle;
}
}
export default provideContext(handleHistory(connectToStores(
Application,
[ApplicationStore],
function (context, props) {
var appStore = context.getStore(ApplicationStore);
return {
pageTitle: appStore.getPageTitle()
};
}
)));
return (
<div>
<Nav selected={ this.props.currentPageName } links={this.props.pages} />
<Handler context={ this.props.context } />
</div>
);
}
componentDidUpdate(prevProps, prevState) {
const newProps = this.props;
if (newProps.pageTitle === prevProps.pageTitle) {
return;
}
document.title = newProps.pageTitle;
}
}
export default handleHistory(provideContext(connectToStores(
Application,
[ApplicationStore],
function (context, props) {
var appStore = context.getStore(ApplicationStore);
return {
currentPageName: appStore.getCurrentPageName(),
pageTitle: appStore.getPageTitle(),
pages: appStore.getPages()
};
}
)));
/*globals document*/
import React from 'react';
import TodosStore from '../stores/TodosStore';
import { connectToStores, provideContext } from 'fluxible-addons-react';
import TodosActions from '../actions/todosActions';
class Todos extends React.Component {
render() {
console.log(this.props.tasks);
return (
<div>
TODOS
</div>
);
}
}
export default connectToStores(
Todos,
[TodosStore],
function (context, props) {
//var todosStore =
return {
tasks: context.getStore(TodosStore).getTasks()
};
}
);
<TextField ref="email" type="email" floatingLabelText="Adresse email" fullWidth={true} />
<TextField ref="password" type="password" floatingLabelText="Mot de passe" fullWidth={true} />
<RaisedButton onClick={this.login.bind(this)} disabled={this.props.loading} fullWidth={true} label="Se connecter" />
<br />
<br />
<hr />
<FacebookLoginButton fullWidth={true} />
</div>
);
}
return (
<Layout {...this.props}>
{content}
</Layout>
);
}
login() {
this.context.executeAction(AuthActions.login, {
email: this.refs.email.getValue(),
password: this.refs.password.getValue()
});
}
}
LoginPage = connectToStores(LoginPage, ['AuthStore'], (context, props) => ({
loading: context.getStore('AuthStore').isLoading()
}));
export default LoginPage;
<ul className="col-md-4">
{this.renderColumn(this.props.surahs.slice(0, 38))}
</ul>
<ul className="col-md-4">
{this.renderColumn(this.props.surahs.slice(38, 76))}
</ul>
<ul className="col-md-4">
{this.renderColumn(this.props.surahs.slice(76, 114))}
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
}
Index = connectToStores(Index, [SurahsStore, UserStore], (context, props) => {
const surahsStore = context.getStore(SurahsStore);
const userStore = context.getStore(UserStore);
return {
surahs: surahsStore.getSurahs(),
lastVisit: userStore.getLastVisit(),
isFirstTime: userStore.getIsFirstTime()
};
});
export default Index;
render() {
return (
<div className="LoginPage ScrollPage NoPadding RegisterPage">
<div className="Login Register">
<div className="Box">
<form>
<Zabivaka
eyesPos={0}
armsPos={false} />
<div className="title">
{labels.inactiveTitle}
</div>
<div className="text">
{labels.inactiveText}
</div>
</form>
</div>
</div>
</div>
);
}
}
InactivePage = connectToStores(InactivePage, ["LoginStore"], (context) => {
return {
credentials: context.getStore("LoginStore").getCredentials()
};
}, {getStore: PropTypes.func});
export default InactivePage;
{(!(_.isEmpty(reorderImage))) ? <Reordering /> : ''}
{_.map(businessPictures, picture => <Picture key={picture.id} {...{business, picture}} />)}
{_.map(uploadIds, id => <Uploading key={id} />)}
<FlatButton label="Ajouter une photo" onClick={this.addPicture} />
<input ref="file" type="file" style={{ display: 'none' }} accept="image/jpeg" multiple={true} onChange={this.upload} />
</Layout>
);
}
addPicture = (e) => {
e.preventDefault();
React.findDOMNode(this.refs.file).click();
}
upload = (e) => {
e.preventDefault();
const { business } = this.props;
Array.prototype.map.call(e.target.files, file => {
this.context.executeAction(BusinessActions.addPicture, { businessId: business.id, file })
});
}
}
BusinessPicturesPage = connectToStores(BusinessPicturesPage, [
'BusinessStore'
], (context, props) => ({
business : context.getStore('BusinessStore').getById(props.businessId),
uploadIds: context.getStore('BusinessStore').getPictureUploadIds(props.businessId),
reorderImage: context.getStore('BusinessStore').getPictureReorderIds(props.businessId)
}));
export default BusinessPicturesPage;
executeAction: PropTypes.func.isRequired,
getStore: PropTypes.func.isRequired
}
render() {
const { credentials, data } = this.props;
return (
<div className="ScrollPage">
{!data && <div className="FootixLoader" />}
{data &&
<div className="RankingPageContainer">
<UsersTab
credentials={credentials}
data={data} />
</div>
}
</div>
);
}
}
RankingPage = connectToStores(RankingPage, ["LoginStore", "UsersTabStore"], (context) => {
return {
credentials: context.getStore("LoginStore").getCredentials(),
data: context.getStore("UsersTabStore").getData()
};
}, {getStore: PropTypes.func});
export default RankingPage;
list=<div className="ui warning message"><div className="header"> Sorry! No user found!</div></div>
}
return (
<div className="ui page grid">
<div className="row">
<div className="column">
<h1 className="ui header"><a target="_blank" href={'/export/NTriples/' + encodeURIComponent(currentComponent.props.UserStore.graphName)}><span className="ui big black circular label">{i}</span></a> Registered Users</h1>
<div className="ui segment">
<div className="ui huge divided animated list">
{list}
</div>
{emailHint ? <div>* A notification email will be sent to the user after activation.</div> : ''}
</div>
</div>
</div>
</div>
);
}
}
UsersList.contextTypes = {
executeAction: React.PropTypes.func.isRequired,
getUser: React.PropTypes.func
};
UsersList = connectToStores(UsersList, [UserStore], function (context, props) {
return {
UserStore: context.getStore(UserStore).getState()
};
});
export default UsersList;
render() {
const { business } = this.props;
if (!this.props.businessId) return <span/>;
else if (this.props.businessId.length < 36 || !this.props.business)
return (
<Paper style={{padding: 10}}>
ID de salon invalide
</Paper>
);
return (
<Paper style={{padding: 10}}>
<div>{`Salon: ${business.name}`}</div>
<div>{`Adresse: ${business.address.street}, ${business.address.zipCode}, ${business.address.city}`}</div>
</Paper>
);
}
}
BusinessInfos = connectToStores(BusinessInfos, [
'BusinessStore'
], (context, props) => {
const business = props.businessId && props.businessId.length == 36 ? context.getStore('BusinessStore').getById(props.businessId) : null;
return {
business: business
};
});
export default BusinessInfos;
})
})
},
render() {
let context = this.context
let asyncDemoComponent
if (this.state.AsyncDemoComponent) {
let AsyncDemoComponent = this.state.AsyncDemoComponent
asyncDemoComponent = <AsyncDemoComponent />
}
return (
<div>
<h1>Route aware component.</h1>
<p>Route: {context.location.pathname}</p>
<button onClick={this._onClick}>Update title</button>: {this.props.title}
{asyncDemoComponent}
</div>
)
}
})
TestComponent = connectToStores(TestComponent, [ApplicationStore], (context) => {
const title = context.getStore(ApplicationStore).getPageTitle()
return { title }
})
export default TestComponent
var NavLink = require('fluxible-router').NavLink;
var connectToStores = require("fluxible-addons-react").connectToStores;
var UserStore = require('../stores/UserStore');
var Nav = React.createClass({
render() {
var loggedInMessage = "";
if (this.props && this.props.username) {
loggedInMessage = (<span> - Welcome <strong>{this.props.username}</strong></span>);
}
return (
<p>
<NavLink href="/">Home</NavLink>
<span> - </span>
<NavLink href="/feed">Your Feed</NavLink>
{loggedInMessage}
</p>
);
}
});
module.exports = connectToStores(
Nav,
[UserStore],
function (context, props) {
return {
username: context.getStore(UserStore).getUsername()
}
}
);
list = this.props.spec.instances.map(function(node, index) {
if (!node) {
return undefined; // stop processing this iteration
}
//check access level for details
readOnly = self.props.readOnly;
return (<IndividualObject key={index} inEditMode={self.props.inEditMode} readOnly={readOnly} isNewValue={false} spec={node} datasetURI={self.props.datasetURI} resource={self.props.resource} property={self.props.spec.propertyURI} isOnlyChild={isOnlyChild} onCreate={self.props.onCreateIndividualObject.bind(self)} onDelete={self.props.onDeleteIndividualObject.bind(self)} onUpdate={self.props.onUpdateIndividualObject.bind(self)} onDetailCreate={self.props.onDetailCreateIndividualObject.bind(self)} onDetailUpdate={self.props.onDetailUpdateIndividualObject.bind(self)} onShowDetail={self.handleShowDetails.bind(self)} config={self.configMinus(self.props.config, ['objectReactor'])} objectTypes={self.props.ObjectReactor
? self.props.ObjectReactor.objectTypes
: {}} objectProperties={self.props.ObjectReactor
? self.props.ObjectReactor.objectProperties
: {}}/>);
});
}
}
}
return (
<div ref="objectReactor">
{list}
</div>
);
}
}
ObjectReactor.contextTypes = {
executeAction: PropTypes.func.isRequired,
getUser: PropTypes.func
};
ObjectReactor = connectToStores(ObjectReactor, [IndividualObjectStore], function(context, props) {
return {ObjectReactor: context.getStore(IndividualObjectStore).getState()};
});
export default ObjectReactor;
currency: 'EUR'
};
}
if(this.props.hairfie && this.props.hairfie.id) {
this.context.executeAction(HairfieActions.updateHairfie, {
id: this.props.hairfie.id,
hairfie: hairfie,
businessId: this.props.business.id
});
} else {
this.context.executeAction(HairfieActions.createHairfie, {
hairfie: hairfie,
businessId: this.props.business.id
});
}
}
}
HairfiePage = connectToStores(HairfiePage, [
'BusinessStore',
'HairfieStore',
'TagStore'
], (context, props) => ({
business: context.getStore('BusinessStore').getById(props.businessId),
hairfie: props.hairfieId && context.getStore('HairfieStore').getById(props.hairfieId),
tags: context.getStore('TagStore').getAll(),
tagCategories: context.getStore('TagStore').getTagCategories()
}));
export default HairfiePage;
placeHolder = ' Search and choose from Wikipedia';
}
let suggestions = this.props.DBpediaStore.suggestions.map(function(node, index) {
return (
<a className="result" key={'suggestion_' + index} onClick={self.addSuggestion.bind(self, node.uri)}>
<div className="content">
<div className="title">{node.title}</div>
<div className="description">{node.description}</div>
</div>
</a>
);
});
return (
<div className="ui fluid search left icon input" ref="dbpediaLookup">
<input ref="basicIndividualInput" type="text" placeholder={placeHolder} value={this.state.value} onChange={this.handleChange.bind(this)} onKeyDown={this.handleKeyDown.bind(this)}/>
<i className="search icon"></i>
<div className="transition results"> {suggestions} </div>
</div>
);
}
}
DBpediaInput.contextTypes = {
executeAction: PropTypes.func.isRequired
};
DBpediaInput = connectToStores(DBpediaInput, [DBpediaStore], function (context, props) {
return {
DBpediaStore: context.getStore(DBpediaStore).getState()
};
});
export default DBpediaInput;
const { children, title } = this.props;
return (
<AppCanvas>
<AppBar
title={title}
onLeftIconButtonTouchTap={this._onLeftIconButtonTouchTap.bind(this)}
zDepth={0}
className="appbar" />
<AppLeftNav ref="myLeftNav" {...this.props} />
<div className="page-with-nav">
{children}
</div>
</AppCanvas>
);
}
_onLeftIconButtonTouchTap() {
this.refs.myLeftNav.toggle();
}
}
Layout = connectToStores(Layout, [
'HtmlHeadStore'
], (context, props) => ({
title : context.getStore('HtmlHeadStore').getTitle()
}));
export default Layout;
//render content
return (
<div>
<Nav />
<Handler />
<HelpModal />
</div>
);
}
}
Application.contextTypes = {
getStore: React.PropTypes.func,
executeAction: React.PropTypes.func,
getUser: React.PropTypes.func
};
Application = connectToStores(Application, [ApplicationStore], function (context, props) {
return {
ApplicationStore: context.getStore(ApplicationStore).getState()
};
});
Application = handleHistory(Application, {enableScroll: false});
Application = provideContext(Application, { //jshint ignore:line
getUser: React.PropTypes.func
});
export default Application;
}
render() {
if (this.props.isAuthenticated) {
return (
<div className="container">
<div>{this.props.statusText}</div>
<p>You are currently logged in as {this.props.user}. You need to <a href="#" onClick={this.logout}>logout</a> before registering again.</p>
</div>
);
} else {
return (
<div class="container">
<div>{this.props.statusText}</div>
<SubmitCredentials submitAction={registerAction} buttonText="Sign Up" />
</div>
);
}
}
}
Register = connectToStores(Register, ["AuthStore"], (context, props) => {
return {
isAuthenticated: context.getStore("AuthStore").isAuthenticated(),
user: context.getStore("AuthStore").getUser(),
statusText: context.getStore("AuthStore").getStatusText(),
};
});
export default Register;
firstName : this.refs.firstName.getValue(),
lastName : this.refs.lastName.getValue(),
email : this.refs.email.getValue(),
phoneNumber : this.refs.phoneNumber.getValue()
};
}
save = () => {
let values = this.getBookingInfo();
if (this.props.booking) {
const bookingId = this.props.booking.id;
this.context.executeAction(BookingActions.updateBooking,{ bookingId, values});
} else {
values.status = 'REQUEST';
this.context.executeAction(BookingActions.createBooking, {values});
}
}
}
BookingFormPage = connectToStores(BookingFormPage, [
'BookingStore', 'RouteStore'
], (context, props) => {
const route = context.getStore('RouteStore').getCurrentRoute().toJS();
const businessId = route.query.businessId ? route.query.businessId : null;
const booking = props.bookingId && context.getStore('BookingStore').getById(props.bookingId);
return {
booking: booking,
businessId: businessId
};
});
export default BookingFormPage;
{this.renderSelectedBamboos()}
{this.renderSelectedHonors()}
</div>
<div className="Row">
{this.renderCharacters()}
</div>
<div className="Row">
{this.renderDots()}
</div>
<div className="Row">
{this.renderBamboos()}
</div>
<div className="Row">
{this.renderHonors()}
</div>
</div>
);
}
}
IndexPage = connectToStores(IndexPage, [MahjongStore], context => {
return {
characters : context.getStore(MahjongStore).getCharacters().characters,
dots : context.getStore(MahjongStore).getDots().dots,
bamboos : context.getStore(MahjongStore).getBamboos().bamboos,
honors : context.getStore(MahjongStore).getHonors().honors
};
});
export default IndexPage;
<RaisedButton label={'Load More'} onClick={this.loadMore.bind(this)}/>
</Center>
</Layout>
);
}
loadMore() {
const currentPage = Math.floor(_.size(this.state.bookings)/10);
this.context.executeAction(BookingActions.getBookings, {page: currentPage + 1, statusFilters: this.state.statusFilters});
}
toggleItemInArray(arr, item) {
return _.indexOf(arr,item) == -1 ? _.union(arr,[item]) : _.without(arr,item);
}
_handleStatusFilterChange(status) {
this.setState({statusFilters: this.toggleItemInArray(this.state.statusFilters, status)}, () => {
this.setState({bookings: this.bookingsFromState()});
});
}
}
BookingsPage = connectToStores(BookingsPage, [
'BookingStore'
], (context, props) => ({
bookings : context.getStore('BookingStore').getBookings(),
currentPage: context.getStore('BookingStore').getCurrentPage()
}));
export default BookingsPage;
filter={filter}
subfilter={subfilter}/>
<GamesTab
days={days}
predictions={predictions} />
{filter === 'group' &&
<GroupRanking
data={groupRanking} />
}
</div>
}
</div>
);
}
}
GamesPage = connectToStores(GamesPage, ["LoginStore", "GamesTabStore"], (context) => {
return {
userId: context.getStore('LoginStore').getCredentials()._id,
filter: context.getStore("GamesTabStore").getFilter(),
subfilter: context.getStore("GamesTabStore").getSubfilter(),
days: context.getStore("GamesTabStore").getDays(),
predictions: context.getStore("GamesTabStore").getPredictions(),
groupRanking: context.getStore("GamesTabStore").getGroupRanking(),
};
}, {getStore: PropTypes.func});
export default GamesPage;
break;
case 'ResourceAppVisit':
resourceReactor = <ResourceAppVisit enableAuthentication={enableAuthentication} graphName={graphName} properties={properties} resource={resourceURI} resourceType={resourceType} title={title} currentCategory={currentCategory} propertyPath={propertyPath} isComplete={isComplete} config={this.configMinus(config, ['resourceReactor'])}/>;
break;
case 'ResourceAppAccess':
resourceReactor = <ResourceAppAccess enableAuthentication={enableAuthentication} graphName={graphName} properties={properties} resource={resourceURI} resourceType={resourceType} title={title} currentCategory={currentCategory} propertyPath={propertyPath} isComplete={isComplete} config={this.configMinus(config, ['resourceReactor'])}/>;
break;
case 'ResourceUser':
resourceReactor = <ResourceUser enableAuthentication={enableAuthentication} graphName={graphName} properties={properties} resource={resourceURI} resourceType={resourceType} title={title} currentCategory={currentCategory} propertyPath={propertyPath} isComplete={isComplete} config={this.configMinus(config, ['resourceReactor'])}/>;
break;
default:
resourceReactor = <Resource enableAuthentication={enableAuthentication} graphName={graphName} properties={properties} resource={resourceURI} resourceType={resourceType} title={title} currentCategory={currentCategory} propertyPath={propertyPath} isComplete={isComplete} config={this.configMinus(config, ['resourceReactor'])}/>;
}
}
return (
<div ref="resourceReactor">
{resourceReactor}
</div>
);
}
}
ResourceReactor.contextTypes = {
getUser: React.PropTypes.func
};
ResourceReactor = connectToStores(ResourceReactor, [ResourceStore], function (context, props) {
return {
ResourceStore: context.getStore(ResourceStore).getState()
};
});
export default ResourceReactor;
if (newProps.ApplicationStore.pageTitle === prevProps.ApplicationStore.pageTitle) {
return;
}
document.title = newProps.ApplicationStore.pageTitle;
}
render() {
var Handler = this.props.currentRoute.handler;
//render content
return (
<div>
<Nav />
<Handler />
<Timestamp />
</div>
);
}
}
Application = (
provideContext(
handleHistory(
connectToStores(Application, [ApplicationStore], (context) => ({
ApplicationStore: context.getStore(ApplicationStore).getState()
})),
{enableScroll: false}
)
)
);
export default Application;