How to use the fluxible-addons-react/connectToStores function in fluxible-addons-react

To help you get started, we’ve selected a few fluxible-addons-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github numenta / numenta-apps / unicorn / app / browser / components / ModelList.jsx View on Github external
// http://numenta.org/licenses/

import connectToStores from 'fluxible-addons-react/connectToStores';
import IconCheckbox from 'material-ui/lib/svg-icons/toggle/check-box';
import Paper from 'material-ui/lib/paper';
import React from 'react';
import ReactDOM from 'react-dom';

import Model from './Model';
import ModelStore from '../stores/ModelStore';


/**
 * List of Model Charts, React component
 */
@connectToStores([ModelStore], (context) => ({
  models: context.getStore(ModelStore).getModels(),
  visibleModelStack: context.getStore(ModelStore).getVisibleModelStack()
}))
export default class ModelList extends React.Component {

  static get contextTypes() {
    return {
      executeAction: React.PropTypes.func,
      getConfigClient: React.PropTypes.func,
      getStore: React.PropTypes.func,
      muiTheme: React.PropTypes.object
    };
  }

  static get propTypes() {
    return {
github yoonic / nicistore / src / components / pages / Admin / Products / AdminProductsEdit.js View on Github external
:
                    null
                }
            
        );
    }
}

/**
 * Flux
 */
AdminProductsEdit = connectToStores(AdminProductsEdit, [CollectionsStore, ProductDetailsStore], (context) => {
    return {
        _product: context.getStore(ProductDetailsStore).getProduct(),
        _error: context.getStore(ProductDetailsStore).getError(),
        _loading: context.getStore(ProductDetailsStore).isLoading(),
        _categories: context.getStore(CollectionsStore).getCollections(['category']),
        _collections: context.getStore(CollectionsStore).getCollections(['collection'])
    };
});

/**
 * Exports
 */
export default AdminProductsEdit;
github yoonic / nicistore / src / components / common / layout / Header / DesktopHeader.js View on Github external
<div>
                            
                        </div>
                        :
                        null
                    }
                
            
        );
    }
}

/**
 * Flux
 */
DesktopHeader = connectToStores(DesktopHeader, [AccountStore, CartStore, DrawerStore], (context) =&gt; {
    return {
        _cartTotalItems: context.getStore(CartStore).getTotalItems(),
        _user: context.getStore(AccountStore).getAccountDetails(),
        _openedDrawer: context.getStore(DrawerStore).getOpenedDrawer()
    };
});

/**
 * Exports
 */
export default DesktopHeader;
github quran / quran.com-frontend / src / scripts / components / surah / SurahInfo.js View on Github external
);
  }

  render() {
    debug('component:SurahInfo', 'Render');

    if (this.props.isExpanded) {
      return this.renderInformation();
    }
    else {
      return <div>;
    }
  }
}

SurahInfo = connectToStores(SurahInfo, [SurahsStore], (context, props) =&gt; {
  const surahsStore = context.getStore(SurahsStore);

  return {
    isExpanded: surahsStore.getIsShowingInfo(),
    currentSurah: surahsStore.getSurah(),
    wikiLinks: surahsStore.getWikiLinks()
  };
});

export default SurahInfo;
</div>
github quran / quran.com-frontend / src / scripts / routes / Surah.js View on Github external
);
  }
}

Surah.displayName = 'Surah';

Surah.contextTypes = {
  executeAction: React.PropTypes.func.isRequired,
  getStore: React.PropTypes.func.isRequired
};

Surah = connectToStores(Surah, [AyahsStore], (context, props) =&gt; {
  debug('component:Surah', 'connectToStores');
  const ayahsStore = context.getStore(AyahsStore);
  return {
    ayahs: ayahsStore.getAyahs()
  };
});

export default Surah;
github numenta / numenta-apps / unicorn / app / browser / components / CreateModelDialog.jsx View on Github external
import Dialog from 'material-ui/lib/dialog';
import path from 'path';
import RaisedButton from 'material-ui/lib/raised-button';
import React from 'react';


import ChartUpdateViewpoint from '../actions/ChartUpdateViewpoint';
import CreateModelStore from '../stores/CreateModelStore';
import StartModelAction from '../actions/StartModel';
import {trims} from '../../common/common-utils';


/**
 * "Create Model" Dialog
 */
@connectToStores([CreateModelStore], (context) => ({
  fileName: context.getStore(CreateModelStore).fileName,
  inputOpts: context.getStore(CreateModelStore).inputOpts,
  metricId: context.getStore(CreateModelStore).metricId,
  metricName: context.getStore(CreateModelStore).metricName,
  modelRunnerParams: context.getStore(CreateModelStore).modelRunnerParams(),
  recommendAgg: context.getStore(CreateModelStore).recommendAggregation(),
  aggregateData: context.getStore(CreateModelStore).aggregateData,
  paramFinderError: context.getStore(CreateModelStore).paramFinderError
}))
export default class CreateModelDialog extends React.Component {

  static contextTypes = {
    executeAction: React.PropTypes.func,
    getConfigClient: React.PropTypes.func,
    getStore: React.PropTypes.func,
    muiTheme: React.PropTypes.object
github yahoo / fluxible / site / components / Search.js View on Github external
ref="q"
                        type="text"
                        name="q"
                        onKeyDown={this._onKeyDown.bind(this)}
                        className="Px(4px) Py(1px) Bdrs(2px) Bd(2) C(#fff) Fw(b)"
                        role="search"
                        id="q"
                    /&gt;
                
                <i></i>
            
        );
    }
}

Search = connectToStores(Search, [ SearchStore ], (context) =&gt; ({
    search: context.getStore(SearchStore).getState()
}));

export default Search;
github numenta / numenta-apps / imbu / gui / browser / components / search-results.jsx View on Github external
import SearchStore from '../stores/search';
import ServerStatusStore from '../stores/server-status';

const {
  Styles, Paper,
  Table, TableHeader, TableRow, TableHeaderColumn, TableBody, TableRowColumn
} = Material;

const {
  Spacing, Colors
} = Styles;

/**
 * Display Search Results on a Material UI Table
 */
@connectToStores([SearchStore, ServerStatusStore], (context, props) => ({
  ready: context.getStore(ServerStatusStore).isReady(),
  query: context.getStore(SearchStore).getQuery()
}))
export default class SearchResultsComponent extends React.Component {

  static contextTypes = {
    getStore: React.PropTypes.func,
    executeAction: React.PropTypes.func
  };

  static propTypes = {
    model: React.PropTypes.string.isRequired
  };

  constructor(props, context) {
    super(props);
github numenta / numenta-apps / unicorn / app / browser / components / ModelData.jsx View on Github external
let delta = next - curr;
      if (delta > gapThreshold) {
        let gapItem = [curr + delta / 2].concat(vals);
        newData.push(gapItem);
      }
    }
  });

  return newData;
}

/**
 * React Component for sending Model Data from Model component to
 *  Chart component.
 */
@connectToStores([MetricStore, MetricDataStore, ModelStore, ModelDataStore],
  (context, props) => {
    let modelId = props.modelId;
    let metric = context.getStore(MetricStore).getMetric(modelId);
    let metricData = context.getStore(MetricDataStore).getData(modelId);
    let model = context.getStore(ModelStore).getModel(modelId);
    let modelData = context.getStore(ModelDataStore).getData(modelId);
    return {metric, metricData, model, modelData, modelId};
  }
)
export default class ModelData extends React.Component {

  static get contextTypes() {
    return {
      getConfigClient: React.PropTypes.func,
      getStore: React.PropTypes.func,
      muiTheme: React.PropTypes.object

fluxible-addons-react

Fluxible addons for use with React

BSD-3-Clause
Latest version published 2 years ago

Package Health Score

68 / 100
Full package analysis