How to use the react-tabs.TabList function in react-tabs

To help you get started, we’ve selected a few react-tabs 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 PAK90 / mtg-hunter / src / CardHitsListItem.js View on Github external
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as _ from "lodash";
import "searchkit/theming/theme.scss";
import "./styles/customisations.scss";
import {TagFilter, TagFilterConfig, TagFilterList} from 'searchkit';
var ent = require('ent');
const nl2br = require('react-nl2br');
var ReactTabs = require('react-tabs');
var Tab = ReactTabs.Tab;
var Tabs = require("./Tabs");
var TabList = ReactTabs.TabList;
var TabPanel = ReactTabs.TabPanel;
var Rating = require('react-rating');
import ReactStars from './modReactStars.js';
var ReactDisqusThread = require('react-disqus-thread');
var Firebase = require('firebase');
/*var Disqus = require('disqus');

var disqus = new Disqus({
    api_secret : 'var',
    api_key : 'var',
    access_token : 'var'
});*/
//var cards = require('./multiIdName.json');
//var modCards = cards;
// Turn cards object keys into the format returned by the python script.
// Just go in and create a new key, and replace each object's key with the new key.
github PAK90 / mtg-hunter / src / CardHitsGridItem.js View on Github external
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as _ from "lodash";
import "searchkit/theming/theme.scss";
import "./styles/customisations.scss";
import {TagFilter, TagFilterConfig, TagFilterList} from 'searchkit';
var ent = require('ent');
const nl2br = require('react-nl2br');
var ReactTabs = require('react-tabs');
var Tab = ReactTabs.Tab;
var Tabs = ReactTabs.Tabs;
var TabList = ReactTabs.TabList;
var TabPanel = ReactTabs.TabPanel;
import ReactStars from './modReactStars.js';
var Firebase = require('firebase');

var CardHitsGridItem = React.createClass({
	getInitialState: function() {  	
	    var {bemBlocks, result} = this.props;
	    var source = result._source;
	    // At some point, have all multiverse-specific stuff (id, flavour text, original text) as states.
	    // Then, when you click the symbol, all we have to do is load that multi's data into the states which are already in the renderer.
        return {
            clickedCard: '',
            currentMultiId: source.multiverseids[result._source.multiverseids.length - 1].multiverseid,
            currentImageMultiId: source.multiverseids[result._source.multiverseids.length - 1].multiverseid,
            currentArtist: source.multiverseids[result._source.multiverseids.length - 1].artist,
            currentFlavor: source.multiverseids[result._source.multiverseids.length - 1].flavor,
github AugurProject / augur / app / components / SendModal.jsx View on Github external
let _ = require("lodash");
let abi = require("augur-abi");
let React = require("react");
let FluxMixin = require("fluxxor/lib/flux_mixin")(React);
let StoreWatchMixin = require("fluxxor/lib/store_watch_mixin");
let Button = require('react-bootstrap/lib/Button');
let Input = require('react-bootstrap/lib/Input');
let Modal = require('react-bootstrap/lib/Modal');
let ReactTabs = require('react-tabs');
let Tab = ReactTabs.Tab;
let Tabs = ReactTabs.Tabs;
let TabList = ReactTabs.TabList;
let TabPanel = ReactTabs.TabPanel;
let utilities = require("../libs/utilities");

let SendCashModal = React.createClass({

  assetType: 'cash',

  mixins: [FluxMixin, StoreWatchMixin('asset')],

  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.show === true;
  },

  getInitialState: function () {
    return {
      amount: '',
github AugurProject / augur / app / components / Register.jsx View on Github external
let React = require("react");
let abi = require("augur-abi");
let keys = require("keythereum");
let uuid = require("node-uuid");
let Firebase = require("firebase");
let FluxMixin = require("fluxxor/lib/flux_mixin")(React);
let Button = require('react-bootstrap/lib/Button');
let Input = require('react-bootstrap/lib/Input');
let Modal = require('react-bootstrap/lib/Modal');
let utilities = require("../libs/utilities");
let ProgressModal = require("./ProgressModal");
let ReactTabs = require('react-tabs');
let Tab = ReactTabs.Tab;
let Tabs = ReactTabs.Tabs;
let TabList = ReactTabs.TabList;
let TabPanel = ReactTabs.TabPanel;
let constants = require("../libs/constants");

let RegisterModal = React.createClass({

  mixins: [FluxMixin],

  getInitialState: function () {
    return {
      handle: '',
      password: '',
      persist: false,
      mailingList: false,
      verifyPassword: '',
      handleHelp: null,
      passwordHelp: null,
github ubyssey / dispatch / dispatch / static / src / js / components / PageAdmin.jsx View on Github external
require('babel/polyfill');

var React = require('react');
var Textarea = require('react-textarea-autosize');
var ReactTabs = require('react-tabs');
var Tab = ReactTabs.Tab;
var Tabs = ReactTabs.Tabs;
var TabList = ReactTabs.TabList;
var TabPanel = ReactTabs.TabPanel;

var QuillEditor = require('./QuillEditor.jsx');
var QuillToolbar = require('./QuillEditorToolbar.jsx');

var FeaturedImage = require('./ArticleFeaturedImage.jsx');
var SEO = require('./ArticleSEO.jsx');
var SlugField = require('./fields/SlugField.jsx');
var SelectField = require('./fields/SelectField.jsx');

var DateTimeField = require('./fields/DateTimeField.jsx');
var ModelDropdown = require('./fields/ModelDropdown.jsx');
var ManyModelDropdown = require('./fields/ManyModelDropdown.jsx');
var ItemStore = require('./stores/ItemStore.js');
var DropdownButton = require('./buttons/DropdownButton.jsx');
var TemplateEditor = require('./TemplateEditor.jsx');
github cvdlab / react-planner / lib / components / sidebar / panel-guides.js View on Github external
var state = this.props.state;
      var _context = this.context,
          projectActions = _context.projectActions,
          translator = _context.translator;
      var guides = state.scene.guides;


      return _react2.default.createElement(
        _panel2.default,
        { name: translator.t('Guides') },
        _react2.default.createElement(
          _reactTabs.Tabs,
          { id: 'guidesTabs', style: tabStyle },
          _react2.default.createElement(
            _reactTabs.TabList,
            null,
            _react2.default.createElement(
              _reactTabs.Tab,
              null,
              translator.t('Horizontal')
            ),
            _react2.default.createElement(
              _reactTabs.Tab,
              null,
              translator.t('Vertical')
            )
          ),
          _react2.default.createElement(
            _reactTabs.TabPanel,
            null,
            _react2.default.createElement(
github ubyssey / dispatch / dispatch / static / src / js / components / ArticleAdmin.jsx View on Github external
require('babel/polyfill');

var React = require('react');
var Textarea = require('react-textarea-autosize');
var ReactTabs = require('react-tabs');
var Tab = ReactTabs.Tab;
var Tabs = ReactTabs.Tabs;
var TabList = ReactTabs.TabList;
var TabPanel = ReactTabs.TabPanel;

var QuillEditor = require('./QuillEditor.jsx');

var FeaturedImage = require('./ArticleFeaturedImage.jsx');
var SEO = require('./ArticleSEO.jsx');
var SlugField = require('./fields/SlugField.jsx');
var SelectField = require('./fields/SelectField.jsx');

var ModelDropdown = require('./fields/ModelDropdown.jsx');
var ManyModelDropdown = require('./fields/ManyModelDropdown.jsx');
var ItemStore = require('./stores/ItemStore.js');
var DropdownButton = require('./buttons/DropdownButton.jsx');
var TemplateEditor = require('./TemplateEditor.jsx');

var PublishableAdmin = require('./PublishableAdmin.jsx');
github ubyssey / dispatch / static / manager / js / src / components / ArticleSidebar.jsx View on Github external
var React = require('react');
var ReactTabs = require('react-tabs');
var Tab = ReactTabs.Tab;
var Tabs = ReactTabs.Tabs;
var TabList = ReactTabs.TabList;
var TabPanel = ReactTabs.TabPanel;

var FeaturedImage = require('./ArticleFeaturedImage.jsx');

var ArticleSidebar = React.createClass({
    handleSelected: function(){
    },
    render: function(){
        return (
            
                
                    Basic Fields
                    Featured Image
github ghosh / cssFilters / source / js / components / layout / sidebar.jsx View on Github external
var React = require('react');
var $ = require('jquery');
var nanoScroller = require('nanoScroller');
var RangeSlider = require('../range.jsx');
var CodeBlock = require('../codeblock.jsx');
var BlendModes = require('../blendmode.jsx');
var Background = require('../background.jsx');
var ReactTabs = require('react-tabs');
var Tab = ReactTabs.Tab;
var Tabs = ReactTabs.Tabs;
var TabList = ReactTabs.TabList;
var TabPanel = ReactTabs.TabPanel;

var Sidebar = React.createClass({

  getInitialState: function() {
    return {
      selectedIndex: 0
    }
  },

  handleSelected: function (index, last) {
    this.setState({
      selectedIndex: index
    });
  },