How to use the react-bootstrap.OverlayTrigger function in react-bootstrap

To help you get started, we’ve selected a few react-bootstrap 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 walkdoer / Life-Time-Tracker / app.js View on Github external
var React = require('react');
var $ = require('jquery');window.$ = window.Jquery = $;
var addons = require('react/addons').addons;
var cx = addons.classSet;
var numeral = require('numeral');
var Ltt = global.Ltt;
var Router = require('react-router');
var Link = Router.Link;
var State = Router.State;
var RouteHandler = Router.RouteHandler;
var Moment = require('moment');
var _ = require('lodash');
var path = require('path');
var ReactBootStrap = require('react-bootstrap');
var OverlayTrigger = ReactBootStrap.OverlayTrigger;
var Popover = ReactBootStrap.Popover;
var Button = ReactBootStrap.Button;
var Badge = ReactBootStrap.Badge;
var Q = require('q');
var config = require('./conf/config');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;

/** Components */
var Header = require('./components/Header');
var Nav = require('./components/Nav');
var EnergyBar = require('./components/EnergyBar');
var Tag = require('./components/Tag');

/* Const */
var NAV_OPEN = 'ltt__navOpen';
var EVENT = require('./constants/EventConstant');
github opentripplanner / otp-react-redux / build / components / narrative / realtime-annotation.js View on Github external
className: "small"
      }, "Your trip results have been adjusted based on real-time information. Under normal conditions, this trip would take", ' ', _react.default.createElement("b", null, (0, _time.formatDuration)(realtimeEffects.normalDuration), " "), "using the following routes:", ' ', filteredRoutes.map(function (route, idx) {
        return _react.default.createElement("span", {
          key: idx
        }, _react.default.createElement("b", null, route), filteredRoutes.length - 1 > idx && ', ');
      }), ".") : _react.default.createElement("span", {
        className: "small"
      }, "Your trip results are currently being affected by service delays. These delays do not factor into travel times shown below.")), _react.default.createElement("div", null, _react.default.createElement(_reactBootstrap.Button, {
        block: componentClass === 'popover' // display as block in popover
        ,
        className: "toggle-realtime",
        onClick: toggleRealtime
      }, useRealtime ? "Ignore" : "Apply", " service delays"))));

      if (componentClass === 'popover') {
        return _react.default.createElement(_reactBootstrap.OverlayTrigger, {
          trigger: "click",
          placement: "bottom" // container={this}
          // containerPadding={40}
          ,
          overlay: _react.default.createElement(_reactBootstrap.Popover, {
            style: {
              maxWidth: '300px'
            },
            id: "popover-positioned-bottom"
          }, innerContent)
        }, _react.default.createElement(_reactBootstrap.Button, {
          bsStyle: "link"
        }, _react.default.createElement("i", {
          className: "fa fa-2x fa-exclamation-circle"
        })));
      } else {
github poooi / poi / views / polyfills / react-bootstrap.es View on Github external
/**
 * FIXME: remove this polyfill when react-bootstrap is no longer used
 */
/* eslint-disable import/namespace */

import React, { cloneElement, useContext } from 'react'
import ReactDOM from 'react-dom'
import * as ReactBootstrap from 'react-bootstrap'
import contains from 'dom-helpers/query/contains'
import { WindowEnv } from '../components/etc/window-env'
import { includes } from 'lodash'

ReactBootstrap.OrigOverlayTrigger = ReactBootstrap.OverlayTrigger
ReactBootstrap.OriginModal = ReactBootstrap.Modal

const { OriginModal, Overlay } = ReactBootstrap

function isOneOf(one, of) {
  if (Array.isArray(of)) {
    return of.indexOf(one) >= 0
  }
  return one === of
}

function createChainedFunction(...funcs) {
  return funcs
    .filter(f => f != null)
    .reduce((acc, f) => {
      if (typeof f !== 'function') {
github walkdoer / Life-Time-Tracker / components / OneDayGoal.js View on Github external
/**
 * @jsx React.DOM
 */
'use strict';

var React = require('react');
var $ = require('jquery');
var _ = require('lodash');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
var ReactBootStrap = require('react-bootstrap');
var Q = require('q');
var Moment = require('moment');
var EasyPieChart = require('easyPieChart');
var RB =require('react-bootstrap');
var OverlayTrigger = RB.OverlayTrigger;
var Tooltip = RB.Tooltip;

/** Utils */
var Util = require('../utils/Util');
var DataAPI = require('../utils/DataAPI');

/** Actions */
var GoalAction = require('../actions/GoalAction');

/** Store */
var GoalStore = require('../stores/GoalStore');



var OneDayGoal = React.createClass({
github Tschaul / twister-react / build-buffer / common / Post.js View on Github external
var ReactBootstrap = require('react-bootstrap')
  , Grid = ReactBootstrap.Grid
  , Col = ReactBootstrap.Col
  , Row = ReactBootstrap.Row
  , ListGroupItem = ReactBootstrap.ListGroupItem
  , Glyphicon = ReactBootstrap.Glyphicon
  , OverlayTrigger = ReactBootstrap.OverlayTrigger
  , Tooltip = ReactBootstrap.Tooltip

var React = require('react');

var SetIntervalMixin = require("../common/SetIntervalMixin.js");
var SafeStateChangeMixin = require('../common/SafeStateChangeMixin.js');

module.exports = Post = React.createClass({displayName: "Post",
  mixins: [SetIntervalMixin,SafeStateChangeMixin],
  getInitialState: function() {
    
    return {
      avatar: "img/genericPerson.png", 
      fullname: "",
      timeAgo: "",
      retwistingUser: this.props.post.username
github lapanoid / reactjs-hammerjs / src / scripts / components / overlayadjustwindowtrigger.jsx View on Github external
/** @jsx React.DOM */
'use strict';

var React = require('react/addons');
var $ = require('jquery');

var ReactBoostrap = require('react-bootstrap');
var OverlayTrigger = ReactBoostrap.OverlayTrigger;
var Button = ReactBoostrap.Button;
var ButtonToolbar = ReactBoostrap.ButtonToolbar;
var Popover = ReactBoostrap.Popover;

var OverlayAdjustWindowTrigger = React.createClass({
    getXY : function (event) {
        var res = event.gesture.touches[0];
        return {x: res.pageX, y: res.pageY}
    },
    receiveHammerEvent: function (ev) {
        var that = this;
        if (ev) {
            var value = ev.type;
            switch (value) {
                case 'tap':
                    this.showInPoint(this.getXY(ev));
github promethe42 / cocorico / app / src / script / component / BallotSearch.jsx View on Github external
ProofOfVoteStore = require('../store/ProofOfVoteStore');

var Grid = ReactBootstrap.Grid,
  Col = ReactBootstrap.Col,
  Row = ReactBootstrap.Row,
  Button = ReactBootstrap.Button,
  Pagination = ReactBootstrap.Pagination,
  FormGroup = ReactBootstrap.FormGroup,
  InputGroup = ReactBootstrap.InputGroup,
  FormControl = ReactBootstrap.FormControl,
  DropdownButton = ReactBootstrap.DropdownButton,
  MenuItem = ReactBootstrap.MenuItem,
  ButtonToolbar = ReactBootstrap.ButtonToolbar,
  Modal = ReactBootstrap.Modal,
  Button = ReactBootstrap.Button,
  OverlayTrigger = ReactBootstrap.OverlayTrigger,
  Tooltip = ReactBootstrap.Tooltip;

module.exports = React.createClass({
  mixins: [
    ReactIntl.IntlMixin,
    Reflux.connect(TransactionStore, 'transactions'),
    Reflux.connect(ProofOfVoteStore, 'proofsOfVote'),
    Reflux.listenTo(TransactionStore, 'transactionStoreChangedHandler'),
    Reflux.listenTo(ProofOfVoteStore, 'proofOfVoteStoreChangedHandler'),
  ],

  getInitialState: function() {
    return {
      page: 0,
      searchQuery: '',
      searchMode: 'voter',
github Gitualize / Gitualize / client / js / views / landing.react.jsx View on Github external
var $ = require('jquery');
var jqueryUI = require('jquery-ui');
var React = require('react/addons');
var Navigation = require('react-router').Navigation;
var ReactBootstrap = require('react-bootstrap');
var Input = ReactBootstrap.Input;
var Button = ReactBootstrap.Button;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var ButtonInput = ReactBootstrap.ButtonInput;
var Grid = ReactBootstrap.Grid;
var Row = ReactBootstrap.Row;
var Col = ReactBootstrap.Col;
var Tooltip = ReactBootstrap.Tooltip;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;

var Landing = React.createClass({
  mixins : [Navigation],
  errorMessages: {badRepo: "Unable to fetch the requested repository. You may only gitualize public repositories. Please try again in a little while if you believe this is a mistake, we're doing our best :)"},
  styles: {
    containerStyle: {
      width: '980',
      marginTop: 25,
      marginLeft: 'auto',
      marginRight: 'auto'
    },
    formStyle: {
      width: 980
    },
    stepStyle: {
      width: 225,
github appbaseio / dejavu / live / src / js / features / ShareLink.jsx View on Github external
var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Popover = ReactBootstrap.Popover;

var ShareLink = React.createClass({
  getInitialState: function() {
    return {
      url: '',
      copied: ''
    };
  },
  selectText: function() {
    var url = convertToUrl('gh-pages');
    this.setState({url: url, copied: ''});
    setTimeout(function() {
      var ele = document.getElementById('for-share');
      var succeed = this.copyToClipboard(ele);
      if(succeed) {