Example #1
0
if (process.env.NODE_ENV !== 'production') {
    require('../dev-jquery-auth.js');
}

// Third party
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import log from 'loglevel';

import appStoreStore from './stores/appStore.store';
import installedAppStore from './stores/installedApp.store';

import actions from './actions';

import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin();

// D2 / D2-UI
import D2Library from 'd2/lib/d2';
import LoadingMask from 'd2-ui/lib/loading-mask/LoadingMask.component';

// Components
import App from './components/App.component';

require('../scss/style.scss');

log.setLevel(process.env.NODE_ENV === 'production' ? log.levels.WARN : log.levels.TRACE);

D2Library.getManifest(process.env.NODE_ENV === 'production' ? 'manifest.webapp' : 'dev_manifest.webapp')
    .then(manifest => {
        D2Library.config.baseUrl = `${manifest.getBaseUrl()}/api`;
 constructor(props) {
     super(props);
     injectTapEventPlugin();
     this.state = {}
 }
Example #3
0
import PropTypes      from 'prop-types';
import getMuiTheme    from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import tapEventPlugin from 'react-tap-event-plugin';

import randomIds from 'uniforms/randomIds';

import createSchema from './_createSchema';

tapEventPlugin();

const randomId = randomIds();

const createContext = (schema, context) => ({
    context: {
        muiTheme: getMuiTheme(lightBaseTheme, {userAgent: false}),
        uniforms: {
            error: null,
            model: {},
            name:  [],
            onChange () {},

            ...context,

            randomId,
            schema: createSchema(schema),
            state: {
                changedMap: {},

                changed:         false,
                disabled:        false,
Example #4
0
// //     compare: compareReducer
// //     // routing: routeReducer
// // });

// const reducer = combineReducers(_.merge(reducers, appReducers));

// // console.log(reducer);
// // const reduxRouterMiddleware = syncHistory(history);
// const createStoreWithMiddleware = applyMiddleware(sagaMiddleware(sagas))(createStore);
// const store = createStoreWithMiddleware(reducer, window.__INITIAL_STATE__);

const store = getStore(window.__INITIAL_STATE__);

// console.log(store);


if (!window.env || window.env === 'development') {
    // store.dispatch(bootstrapAction());
}


ReactTapEventPlugin();


render(
    <Provider store={ store }>
        <Router routes={ routes } history={ history } />
    </Provider>,
    document.getElementById('react-root')
);
defonce(module, () => {
  const injectTapEventPlugin = require('react-tap-event-plugin');
  injectTapEventPlugin();
});
Example #6
0
import React from 'react';
import { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); // For Material-ui touch events

export default class App extends Component {
  render() {
    return (
      <div className="container">
        {this.props.children}
      </div>
    );
  }
}
Example #7
0
    componentDidMount: function() {
        injectTapEventPlugin();

    },
Example #8
0
File: main.js Project: wrick17/syko
window.init = function() {

  var token = localStorage.getItem('token');

  setInterval(function() {
    token = localStorage.getItem('token');
  } , 1000);

  var React = require('react'),
      superagent = require('superagent'),
      AppHeader = require('./AppHeader.jsx'),
      AppFooter = require('./AppFooter.jsx'),
      AppBody = require('./AppBody.jsx'),
      injectTapEventPlugin = require("react-tap-event-plugin");

  injectTapEventPlugin();

  function getSongData(callback) {
    superagent
      .get('/api/musicList')
      .query({token : token})
      .end(function(err, res) {

        if (err) throw new Error(err);

        var sykoFolder = JSON.parse(res.text).folder;
        var songList = JSON.parse(res.text).songs;

        var playlist = {}, songCount;
        for (songCount = 0; songCount < songList.length; songCount++) {
          playlist[songList[songCount].id] = songList[songCount].src;
        }

        callback(songList, playlist, songCount, sykoFolder);
      });
  }

  var Syko = React.createClass({

    getInitialState: function() {
      return {
        currentSong: null,
        currentSongId: null,
        data: [],
        playlist: [],
        shuffle: false,
        folder: null,
        repeat: 'continuous',
        resetPlayer: false,
        songPosition: 0,
        uploadProgress: 0,
        repeatSong: false,
        songCount: 0
      };
    },

    componentDidMount: function() {
      var that = this;
      getSongData(function(data, playlist, songCount, sykoFolder) {
        that.setState({
          data: data,
          playlist: playlist,
          songCount: songCount,
          folder: JSON.stringify(sykoFolder)
        });
      });
    },

    resetPlayerComplete: function() {
      this.setState({
        resetPlayer: false
      });
    },

    pollPosition: function(currentTime) {
      this.currentTime = currentTime;
    },

    toggleShuffle: function() {
      this.setState({shuffle: !this.state.shuffle});
    },

    shufflePlay: function() {
      function shuffle(min, max) {
        return Math.floor((Math.random() * max) + min);
      }

      var nextSongId = shuffle(0, this.state.songCount);

      if(this.state.currentSongId == nextSongId)
        return this.shufflePlay();

      this.playSong(nextSongId);
    },

    changeRepeatMode: function() {
      if(this.state.repeat === 'continuous')
        return this.setState({repeat: 'single'});

      if(this.state.repeat === 'single')
        return this.setState({repeat: 'none'});

      return this.setState({repeat: 'continuous'});
    },

    playSong: function(songId) {
      if (songId == this.state.currentSongId) {
        this.setState({currentSong: this.state.playlist[songId], repeatSong: true});
        this.setState({repeatSong: false});
      }

      this.setState({currentSong: this.state.playlist[songId], currentSongId: songId});
    },

    playNextSong: function() {
      if(this.state.repeat === 'single')
        return this.playSong(this.state.currentSongId);

      if (this.state.shuffle)
        return this.shufflePlay();

      if(this.state.currentSongId < (this.state.songCount-1))
        return this.playSong(parseInt(this.state.currentSongId)+1);

      if(this.state.repeat === 'none')
        return this.setState({currentSongId: null, resetPlayer: true});

      this.playSong(0);
    },

    playPrevSong: function() {
      if(this.currentTime > 10 || this.state.repeat === 'single')
        return this.playSong(this.state.currentSongId);

      if (this.state.shuffle)
        return this.shufflePlay();

      if(this.state.currentSongId > 0)
        return this.playSong(parseInt(this.state.currentSongId)-1);

      if(this.state.repeat === 'none')
        return this.playSong(0);

      this.playSong(this.state.songCount-1);
    },

    handleUpload: function(uploadEl) {
      var that = this;
      superagent
        .post('/api/audio')
        .field('token', token)
        .field('filename', uploadEl.files[0].name)
        .field('folder', this.state.folder)
        .attach('file', uploadEl.files[0], uploadEl.files[0].name)
        .on('progress', function(e) {
          that.setState({uploadProgress: Math.floor(e.percent)});
        })
        .end(function(err, res){
          if (err) throw new Error(err);
          that.setState({uploadProgress: 'done'});
          getSongData(function(data, playlist) {
            that.setState({data: data, playlist: playlist});
          });
        });
    },

    handleDelete: function(fileId) {
      var that = this;
      superagent
        .post('/api/delete')
        .query({token : token})
        .query({deleteId: fileId})
        .end(function(err, res) {
          if (err) throw new Error(err);
          getSongData(function(data, playlist) {
            that.setState({data: data, playlist: playlist});
          });
        });
    },

    render: function() {
      return (
        <div>
          <AppHeader title="Syko"
            handleTouch={this.handleTouch}
            handleUpload={this.handleUpload}
            uploadProgress={this.state.uploadProgress} />
          <AppBody
            data={this.state.data}
            playSong={this.playSong}
            currentSongId={this.state.currentSongId}
            resetPlayer={this.state.resetPlayer}
            resetPlayerComplete={this.resetPlayerComplete}
            handleDelete={this.handleDelete} />
          <AppFooter
            musicUrl={this.state.currentSong}
            playNextSong={this.playNextSong}
            playPrevSong={this.playPrevSong}
            repeatSong={this.state.repeatSong}
            pollPosition={this.pollPosition}
            songPosition={this.state.songPosition}
            repeat={this.state.repeat}
            changeRepeatMode={this.changeRepeatMode}
            shuffle={this.state.shuffle}
            toggleShuffle={this.toggleShuffle}
            resetPlayer={this.state.resetPlayer}
            resetPlayerComplete={this.resetPlayerComplete} />
        </div>
      );
    }

  });

  React.render( <Syko />, document.getElementById('content') );

}
Example #9
0
function start(app, ms) {

  var GroceryList = React.createClass({

    getInitialState: function() {
      return {
        app: app,
        status: 'online',
      }
    },

    componentDidMount: function () {
      var self = this;
      var yielding = setInterval(function () {
            self.state.app.client.yield();
            self.setState({
              app: self.state.app,
            });
            //console.log('yielding..');
        }, ms);
      stop = function () { clearInterval(yielding); };
    },

    addGrocery: function(item, quantity){
      this.state.app.toBuy(item, parseInt(quantity));
      this.setState({
        app: this.state.app,
      });
    },

    changeConnection: function(e, toggled) {
      if (toggled) {
          var self = this
          app.client.connect('http://localhost:8080', function(state) {
              self.state.app.state = state;
              self.setState({
                app: self.state.app,
                status: 'online'
              });
          });
      } else {
          app.client.disconnect();
          this.setState({
            status: 'offline'
          });
      }
    },
 
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

    getChildContext: function() {
        return {
            muiTheme: ThemeManager.getCurrentTheme()
        };
    },

    render: function(){
      return (
        <div>
              <span id='toggle'>
                <mui.Toggle name="connectivity" label={this.state.status} onToggle={this.changeConnection} labelPosition="right" defaultToggled={true} />
              </span>
              <h1>CloudTypes Example: Grocery list</h1> 
              <p>This is a shared grocery list. Add new groceries using the form at the bottom and mark the amount you bought of an item by using negative numbers. </p>
              <GroceryItems app={this.state.app}/>
              <AddGrocery addNew={this.addGrocery}/>
        </div>
      )
    }
  });

  var GroceryItems = React.createClass({

    render: function() {

      var groceries = [];

      for (var key in this.props.app.state.fields) {
        if (key.indexOf('groceries') == 0) {
          var name = key.substring(key.indexOf("<")+1,key.indexOf(">"));
          var value = this.props.app.get(name);
          if (value != 0) {
            groceries.push(<Grocery name={name} value={value}/>);
          }
        }
      }

      return (
          <div>
            <h2> Groceries </h2>
            <mui.List>
              {groceries}
            </mui.List>
          </div>
      )
    }
  });

  var Grocery = React.createClass({
    render: function(){
      return (
          <mui.ListItem primaryText={this.props.value + ' ' + this.props.name} />
      )
    }
  });


  var AddGrocery = React.createClass({
    getInitialState: function(){
      return {
        newGrocery: '',
        quantity: ''
      }
    },
    updateNewGrocery: function(e){
      this.setState({
        newGrocery: e.target.value
      });
    },
    updateNewQuantity: function(e){
      this.setState({
        quantity: e.target.value
      });
    },
    handleAddNew: function(){
      if (this.state.newGrocery == '' || this.state.quantity == '') {
        //
      } else {
        this.props.addNew(this.state.newGrocery, this.state.quantity);
        this.setState({
          newGrocery: '',
          quantity: ''
        });
      }
    },
    render: function(){
      return (
          <form id="form">
            <mui.TextField id='quantity' value={this.state.quantity} hintText='quantity' onChange={this.updateNewQuantity}/>
            <mui.TextField ref='grocery' value={this.state.newGrocery} hintText='grocery' onChange={this.updateNewGrocery}/>
            <mui.FlatButton label="Primary" secondary={true} onClick={this.handleAddNew} label="add"/>
          </form>
      );
    }
  });

  injectTapEventPlugin();
  React.render(<GroceryList/>, document.getElementById('app'));

}
Example #10
0
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import {Provider} from 'react-redux';
import configureStore from './store/configureStore';
import routes from './routes';
import './index.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';


injectTapEventPlugin(); // temporary. will go away once the official React version is released
const store = configureStore();

ReactDOM.render(
    <MuiThemeProvider>
        <Provider store={store}>
            <Router history={browserHistory} routes={routes} />
        </Provider>
    </MuiThemeProvider>,
    document.getElementById('root')
);
Example #11
0
 const router = Router.run(routes, Router.HashLocation, function (Handler) {
   injectTapEventPlugin();
   React.render(<Handler/>, document.getElementById('actor-web-app'));
 });
Example #12
0
import $ from "jquery";
import _ from "underscore";
import Backbone from "backbone";
import React from "react";
import ReactDOM from "react-dom";

// Needed for MUI's onTouchTap
// http://stackoverflow.com/a/34015469/988941
import injectTapEvent from "react-tap-event-plugin";
injectTapEvent();

import SplashScreen from "components/SplashScreen";
import LoginMaster from "components/login/LoginMaster";
// Fixes aberrant lint violation found by TravisCI
//import MaintenanceScreen from "components/MaintenanceScreen";
import FunctionalCollection from "collections/FunctionalCollection";
import browserBondo from "utilities/browserBondo";

// Important:
//   Disconnect all Backbone Events from Models and Collections
Object.keys(Backbone.Events).forEach(function(functionName) {
    Backbone.Model.prototype[functionName] = function() {};
    Backbone.Collection.prototype[functionName] = function() {};
});

Backbone.Collection.prototype.get = function(obj) {
    if (obj == null) return void 0;
    return _.find(this.models, function(model) {
        return model.id == obj || model.id === obj.id || model.cid === obj.cid;
    });
};
Example #13
0
(function () {

    var React = require('react');
    var Firebase = require('firebase');
    var constant = require('./config');
    var injectTapEventPlugin = require("react-tap-event-plugin");
    var MD = require('material-ui');
    var SelectField = MD.SelectField;
    var MenuItem = MD.MenuItem;

    injectTapEventPlugin();

    var BasicList = React.createClass({
        onChange: function (e, index, value) {
            if (this.props.onChange) {
                this.props.onChange(value);
            }
        },
        getInitialState: function () {
            return {
                items: []
            }
        },
        componentWillMount: function () {
            var dataList = this.props.dataList;
            this.firebaseRef = new Firebase(constant.host + '/' + dataList);
            this.firebaseRef.once('value', function (snap) {
                var value = snap.val();
                if (value) {
                    var items = [];
                    for (var i in value) {
                        items.push(value[i]);
                    }
                    this.setState({
                        items: items
                    });
                }
            }.bind(this));
        },
        componentWillUnmount: function () {
            this.firebaseRef.off();
        },
        render: function () {
            function renderItem(item) {
                return <MenuItem key={item.id} value={item.id} primaryText={item.name}/>;
            }

            return (
                <SelectField value={this.props.value} onChange={this.onChange}
                             floatingLabelText={this.props.floatingLabelText}>
                    {this.state.items.map(renderItem)}
                </SelectField>
            )
        }
    });

    var ProjectList = React.createClass({
        onChange: function (data) {
            this.props.onChange(data);
        },
        render: function () {
            this.props.value = parseInt(this.props.value);
            return (
                <BasicList dataList="project" value={parseInt(this.props.value)} onChange={this.onChange}
                           floatingLabelText={this.props.floatingLabelText}></BasicList>
            )
        }
    });

    var ReleaseSelect = React.createClass({
        onChange: function (data) {
            this.props.onChange(data);
        },
        render: function () {
            return (
                <BasicList dataList="release" value={parseInt(this.props.value)} onChange={this.onChange}
                           floatingLabelText={this.props.floatingLabelText}></BasicList>
            )
        }
    });

    var MemberList = React.createClass({
        onChange: function (data) {
            this.props.onChange(data);
        },
        render: function () {
            this.props.value = parseInt(this.props.value);
            return (
                <BasicList dataList="member" value={parseInt(this.props.value)} onChange={this.onChange}
                           floatingLabelText={this.props.floatingLabelText}></BasicList>
            )
        }
    });

    var BugList = React.createClass({
        onChange: function (data) {
            this.props.onChange(data);
        },
        render: function () {
            this.props.value = parseInt(this.props.value);
            return (
                <BasicList dataList="bug" value={parseInt(this.props.value)} onChange={this.onChange}
                           floatingLabelText={this.props.floatingLabelText}></BasicList>
            )
        }
    });

    module.exports = {
        ProjectList: ProjectList,
        ReleaseSelect: ReleaseSelect,
        MemberList: MemberList,
        BasicList: BasicList,
        BugList: BugList
    };
})();
describe('TextInputGroup', () => {
  injectTapEventPlugin();
  let ThemedTextInputGroup;

  beforeEach(() => {
    ThemedTextInputGroup = injectTheme(TextInputGroup);
  });

  it('should display button label when label props is passed', () => {
    const render = TestUtils.renderIntoDocument(<ThemedTextInputGroup label="Click me" />);
    const button = TestUtils.findRenderedDOMComponentWithTag(render, 'button');
    expect(button.textContent).to.equal('Click me');
  });

  it('should verify if the input is disabled', () => {
    const render = TestUtils.renderIntoDocument(<ThemedTextInputGroup inputDisabled/>);
    const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input');
    expect(input.disabled).to.equal(true);
  });

  it('should verify if the button is disabled', () => {
    const render = TestUtils.renderIntoDocument(<ThemedTextInputGroup buttonDisabled/>);
    const button = TestUtils.findRenderedDOMComponentWithTag(render, 'button');
    expect(button.disabled).to.equal(true);
  });

  it('should triggered Callback when input is blurred', () => {
    const mockBlur = spy();
    const render = TestUtils.renderIntoDocument(<ThemedTextInputGroup onBlur={mockBlur}/>);
    const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input');
    TestUtils.Simulate.blur(input);
    expect(mockBlur.called).to.equal(true);
  });

  it('should trigger the onTouchTap event on button press', () => {
    const onTouchTapSpy = spy();
    const render = TestUtils.renderIntoDocument(
      <ThemedTextInputGroup
        onTouchTap={onTouchTapSpy}
        label="Click me"
      />
    );
    const button = TestUtils.findRenderedDOMComponentWithTag(render, 'button');
    TestUtils.Simulate.click(button);
    expect(onTouchTapSpy.called).to.equal(true);
  });

  it('input field text color and button color should be darker when it is not disabled', () => {
    const render = TestUtils.renderIntoDocument(
      <ThemedTextInputGroup label="Click me"/>
    );
    const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input');
    expect(input.style.color).to.equal('rgba(0, 0, 0, 0.867188)');
  });

  it('input field text color should be faint when it is disabled', () => {
    const render = TestUtils.renderIntoDocument(
      <ThemedTextInputGroup label="Click me" inputDisabled/>
    );
    const input = TestUtils.findRenderedDOMComponentWithTag(render, 'input');
    expect(input.style.color).to.equal('rgba(0, 0, 0, 0.296875)');
  });
});
Example #15
0
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import { Router, Route, Redirect, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

// Route components
import SignIn from './containers/SignIn.jsx';
import SignedIn from './containers/SignedIn.jsx';
import appRoutes from './appRoutes.js';

import injectTouchTapEvent from 'react-tap-event-plugin';
injectTouchTapEvent();

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

render(
    <Provider store={store}>
      <Router history={history}>
        <Route path="/sign-in" component={SignIn} />
        <Route path="/signed-in" component={SignedIn} />
        {appRoutes}
        <Redirect from="*" to="/dashboard" />
      </Router>
    </Provider>,
document.getElementById('root'));
import React                from 'react';
import ReactDOM             from 'react-dom';
import injectTpEventPlugin  from 'react-tap-event-plugin';
import { Routes }           from './routes/Routes.jsx';

import 'babel-polyfill';
import 'animate.css';
import 'jquery';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './style/index.style.scss';

const ELEMENT_TO_BOOTSTRAP  = 'root';
const BootstrapedElement    = document.getElementById(ELEMENT_TO_BOOTSTRAP);

injectTpEventPlugin();

ReactDOM.render(<Routes />, BootstrapedElement);
Example #17
0
Meteor.startup(() => {
  // Required by Material UI http://material-ui.com/#/get-started
  injectTapEventPlugin();
  render(renderRoutes(), document.getElementById('app'));
});
Example #18
0
 init: () => {
     injectTapEventPlugin();
     routes();
 },
Example #19
0
 constructor(props) {
   super(props);
   injectTapEventPlugin();
 }
Example #20
0
File: main.js Project: chen4w/ckid
Meteor.startup(() => {
  //c4w 8.6
  injectTapEventPlugin();
  render(renderRoutes(), document.getElementById('app'));
});
Example #21
0
	componentWillMount() {
		injectTapEventPlugin();
	}
Example #22
0
import React from "react"
import ReactDom from "react-dom"
import {Router, Route, IndexRoute, Redirect, hashHistory} from "react-router" //router stuff and dev history
import createBrowserHistory from 'history/lib/createBrowserHistory' //use this for actual history
import { Provider } from "react-redux"
import injectTapEventPlugin from "react-tap-event-plugin" //fixes touch event for material ui
injectTapEventPlugin(); //click fix

import Layout from "./containers/layout.js"
import store from "./store.js"

import Home from "./components/home/main.js"
import Tiger from "./components/tiger/main.js"
import Signin from "./components/admin/main.js"
import Reset from "./components/reset/main.js"
import Login from "./components/login/login.js"

import SockHolder from "./actions/websocket.js"
import mainReducer from "./reducers/reducer.js"

//creates the render point for react
const app = document.getElementById('app');

ReactDom.render(
	<Provider store={store}>
		<SockHolder>
		<Router history={hashHistory}>
			<Route component={Layout} path="/">
				<IndexRoute component={Home} />
				<Route path="/signin" component={Signin} />
				<Route path="/admin" component={Tiger} />
Example #23
0
import React from 'react';
import {render} from 'react-dom';
import App from './App';

//Material ui
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();


const RENDER = () => (
  <MuiThemeProvider >
    <App />
  </MuiThemeProvider>
);

render(
  <RENDER />,
  document.getElementById('root')
);
Example #24
0
 constructor(props) {
   super(props);
   this.state = {employees: []};
   injectTapEventPlugin();
 }