Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-bootstrap' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
var React = require('react');
var ReactIntl = require('react-intl');
var ReactBootstrap = require('react-bootstrap');
var Icon = require('./Icon');
var Button = ReactBootstrap.Button;
var SVGDownloadButton = React.createClass({
mixins: [
ReactIntl.IntlMixin,
],
getDefaultProps: function() {
return {
className: 'btn btn-primary',
onClick: (e) => null,
};
},
onClick: function(e) {
// IE workaround for not supporting the download anchor attribute
/**
* @jsx React.DOM
*/
var React = require('react');
var $ = require('jquery');
var numeral = require('numeral');
var Router = require('react-router');
var Moment = require('moment');
var Mt = window.Mousetrap;
var _ = require('lodash');
require('../libs/bootstrap-datepicker');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
var ReactBootStrap = require('react-bootstrap');
var Modal = ReactBootStrap.Modal;
var ModalTrigger = ReactBootStrap.ModalTrigger;
var ButtonToolbar = ReactBootStrap.ButtonToolbar;
var Button = ReactBootStrap.Button;
var Link = Router.Link;
/* Components */
var LogEditor = require('../components/editor/LogEditor');
var SearchBox = require('../components/SearchBox');
var Notify = require('../components/Notify');
var Progress = require('../components/Progress');
var DataAPI = require('../utils/DataAPI');
var BindStore = require('../mixins/BindStore');
var LogClassPie = require('../components/LogClassPie');
var OneDayGoal = require('../components/OneDayGoal');
var IScroll = require('../libs/iscroll');
var Swiper = require('../components/Swiper');
var React = require('react')
var db = require('level-browserify')('./mydb')
var url = require('../lib/url-checks')
var Accordion = require('react-bootstrap').Accordion
var Panel = require('react-bootstrap').Panel
var _ = require('lodash')
var $c = require('../utilities/classNames.js')
var nodemailer = require('nodemailer')
// This is your API key that you retrieve from www.mailgun.com/cp (free up to 10K monthly emails)
var mg = require('nodemailer-mailgun-transport')({
auth: {
api_key: 'key-7e56f671872d1e829021dd4dd39ae156',
domain: 'sandboxc5e90e5fb9e84a9eb572c4e8c6720c67.mailgun.org'
}
})
var nodemailerMailgun = nodemailer.createTransport(mg)
var ContactForm = React.createClass({
getDefaultProps: function () {
return {
'use strict';
var React = require('react');
var Panel = require('react-bootstrap').Panel;
var async = require('async');
var GranularityToggle = require('../components/granularityToggle')
var RuleSelector = require('../components/ruleSelector')
var TimeseriesChart = require('../components/timeseriesChart')
var getCurrentMetric = require('../utils/getCurrentMetric')
var clearChartTimeout;
var chartInterval;
// setChart is a helper function to asynchronously update a chart, called whenever
// new data should be pushed from the server.
// graphPanel is the GraphPanel instance to update, and unload is a boolean that
// determines whether the chart should be cleared beforehand (e.g. if datasets change)
function setChart(graphPanel, unload) {
/** @jsx React.DOM */
var _ = require('underscore'),
$ = require('jquery'),
moment = require('moment'),
React = require('react'),
RB = require('react-bootstrap'),
Jumbotron = RB.Jumbotron,
Button = RB.Button,
Panel = RB.Panel,
Well = RB.Well,
Navbar = RB.Navbar,
Nav = RB.Nav,
Grid = RB.Grid,
Row = RB.Row,
Col = RB.Col,
Table = RB.Table;
// for server side rendering only
// enable this for server side rendering
// this somehow affects browserify
// if(typeof window === 'undefined'){
// var Firebase = require('firebase');
// var FirebaseSimpleLogin = function(){};
// }
var AppView = React.createClass({
getInitialState: function() {
this.firebaseRef = new Firebase("//reactjsx.firebaseio.com");
this.peopleRef = this.firebaseRef.child("people");
var React = require('react');
var BS = require('react-bootstrap');
var actions = require('../actions/actions');
var Router = require('react-router');
var Reflux = require('reflux');
var userStore = require('../stores/userStore');
var loginStore = require('../stores/loginStore');
var Input = BS.Input;
var Button = BS.Button;
var Grid = BS.Grid;
var Row = BS.Row;
var Col = BS.Col;
var Panel = BS.Panel;
var Alert = BS.Alert;
var Spinner = require('../components/spinner.jsx');
var Login = React.createClass({
mixins: [
Router.Navigation,
// Reflux.listenTo(userStore, 'loginSucc'),
Reflux.listenTo(loginStore, 'loginErr'),
],
// loginSucc: function(user){
// this.transitionTo("home");
// },
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');
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 {
/**
* 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') {
"use strict";
var moment = require('moment');
var React = require('react');
// var Grid = require('react-bootstrap').Grid;
var Col = require('react-bootstrap').Col;
var Row = require('react-bootstrap').Row;
var Modal = require('react-bootstrap').Modal;
var Button = require('react-bootstrap').Button;
var Form = require('react-bootstrap').Form;
var FormControl = require('react-bootstrap').FormControl;
var FormGroup = require('react-bootstrap').FormGroup;
var ControlLabel = require('react-bootstrap').ControlLabel;
var Radio = require('react-bootstrap').Radio;
var Switch = require('react-bootstrap-switch');
var Blink1SerialOption = require('./blink1SerialOption');
var TimeForm = React.createClass({
propTypes: {
rule: React.PropTypes.object.isRequired,
allowMultiBlink1: React.PropTypes.bool,
patterns: React.PropTypes.array,
onSave: React.PropTypes.func,
onCancel: React.PropTypes.func,
onDelete: React.PropTypes.func,