How to use the react-bootstrap.Input 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 bigbinary / reactjs-by-example / chapter12 / js / components / MainSection.react.js View on Github external
/**
 * Copyright (c) 2014-2015, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

var React = require('react');
var assign = require('object-assign');
var SocialActions = require('../actions/SocialActions');
var SocialStore = require('../stores/SocialStore');
var ReactBootstrap = require('react-bootstrap');
var Col = ReactBootstrap.Col, Row = ReactBootstrap.Row, Button = ReactBootstrap.Button,
    Input = ReactBootstrap.Input, Table = ReactBootstrap.Table;

var MainSection = React.createClass({

  getInitialState: function () {
    return assign({twitter: 'twitter', reddit: 'twitter'}, SocialStore.getState());
  },

  componentDidMount: function () {
    SocialStore.addChangeListener(this._onChange);
    this.syncFeed();
  },

  componentWillUnmount: function () {
    SocialStore.removeChangeListener(this._onChange);
  },
github cdaniel / wardleymapstool / client-v2-jsx / dialogs / NodeEditDialog.js View on Github external
/** @jsx React.DOM */
var React = require('react');
var Input = require('react-bootstrap').Input;
var Modal = require('react-bootstrap').Modal;
var Button = require('react-bootstrap').Button;
var Glyphicon = require('react-bootstrap').Glyphicon;
var MapConstants = require('./../constants/mapconstants');
var MapActions = require('./../actions/mapactions.js');
var $ = require('jquery');
var EditableShortText = require('./../editableshorttext');

var NodeEditDialog = React.createClass({
  getInitialState : function(){
     return {newName : null, newType : null};
  },
  componentDidMount: function() {
    this.props.store.addChangeListener(this._onChange);
  },
  componentWillUnmount: function() {
github bookbrainz / bookbrainz-site / src / client / components / input / uuid.jsx View on Github external
* it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */

const React = require('react');
const Input = require('react-bootstrap').Input;

const uuidRegex =
	/[a-f0-9]{8}-?[a-f0-9]{4}-?[a-f0-9]{4}-?[a-f0-9]{4}-?[a-f0-9]{12}/;

const UUIDInput = React.createClass({
	displayName: 'uuidInput',
	propTypes: {
		defaultValue: React.PropTypes.string,
		disabled: React.PropTypes.bool,
		groupClassName: React.PropTypes.string,
		help: React.PropTypes.string,
		label: React.PropTypes.string,
		labelClassName: React.PropTypes.string,
		placeholder: React.PropTypes.string,
		standalone: React.PropTypes.bool,
		wrapperClassName: React.PropTypes.string,
github Tschaul / twister-react / jsx / profile / EditProfileModalButton.js View on Github external
var ReactBootstrap = require('react-bootstrap')
  , Button = ReactBootstrap.Button
  , ButtonGroup = ReactBootstrap.ButtonGroup
  , Glyphicon = ReactBootstrap.Glyphicon
  , Modal = ReactBootstrap.Modal
  , Input = ReactBootstrap.Input

var React = require('react');

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

module.exports = EditProfileModalButton = React.createClass({
  getInitialState: function () {
    return {
      isModalOpen: false,
      fullname: this.props.fullname,
      location: this.props.location,
      bio: this.props.bio,
      url: this.props.url
    };
  },
github hankfanchiu / chime / frontend / components / playlist_modal / playlist_form.jsx View on Github external
var React = require("react");
var Modal = require("react-bootstrap").Modal;
var Row = require("react-bootstrap").Row;
var Col = require("react-bootstrap").Col;
var Input = require("react-bootstrap").Input;
var Button = require("react-bootstrap").Button;
var PlaylistModalsStore = require("../../stores/playlist_modals_store");
var PlaylistActions = require("../../actions/playlist_actions");
var AddedTrack = require("./added_track");
var LinkedStateMixin = require("react-addons-linked-state-mixin");
var History = require("react-router").History;

module.exports = React.createClass({
  mixins: [LinkedStateMixin, History],

  getInitialState: function () {
    return { title: "" };
  },

  componentDidMount: function () {
    this.listenerToken = PlaylistModalsStore.addListener(this._onChange);
github rsamec / react-designer-core / example / src / components / WidgetFactory.js View on Github external
bsSize: 'medium', bsStyle: 'default', content: 'Type content'
		},
		settings:extendBootstrapFields({content: {type:'htmlEditor'}})
	}
});

_.extend(Widgets['react-bootstrap.Well'], {
	metaData: {
		props: {
			bsSize: 'medium', bsStyle: 'default', content: 'Type content'
		},
		settings:extendBootstrapFields({content: {type:'htmlEditor'}})
	}
});

_.extend(Widgets['react-bootstrap.Input'], {
	metaData: {
		props: {
			type: 'text',placeholder:'type your text', label:'label', help:'',value:''
		},
		settings:extendBootstrapFields({type: {type:'string'},placeholder: {type:'string'},label: {type:'string'},help: {type:'string'}})
	}
});
//var bootstrapSettings = {
//	metaData: {
//		settings: {
//			fields: {
//				//content:{type:'string'},
//				bsSize: {
//					type: 'select', settings: {
//						options: _.map(['large', 'medium', 'small', 'xsmall'], function (key, value) {
//							return {value: key, label: key};
github hankfanchiu / chime / frontend / components / track_page / edit_track_modal.jsx View on Github external
var React = require("react");
var History = require("react-router").History;
var Modal = require("react-bootstrap").Modal;
var Row = require("react-bootstrap").Row;
var Col = require("react-bootstrap").Col;
var Input = require("react-bootstrap").Input;
var Button = require("react-bootstrap").Button;
var Thumbnail = require("react-bootstrap").Thumbnail;
var TrackModalsStore = require("../../stores/track_modals_store");
var TrackActions = require("../../actions/track_actions");
var UpdateTrackImage = require("../utility/update_track_image");
var Errors = require("../utility/errors");

module.exports = React.createClass({
  mixins: [History],

  getInitialState: function () {
    return {
      disabled: true,
      errors: TrackModalsStore.getErrors(),
      isUpdating: TrackModalsStore.isUpdating(),
      pathname: TrackModalsStore.getUpdatedTrackPathname(),
github lynndylanhurley / j-toker / demo / src / scripts / components / update-account.jsx View on Github external
var React              = require('react'),
    BS                 = require('react-bootstrap'),
    Input              = BS.Input,
    Button             = BS.Button,
    Panel              = BS.Panel,
    ResponseModalMixin = require('../mixins/response-modal.jsx'),
    FormStateMixin     = require('../mixins/form-state.jsx'),
    Auth               = require('../../../../src/j-toker.js'),
    _                  = require('lodash'),
    Highlight          = require('react-highlight'),
    PubSub             = require('pubsub-js');

module.exports = React.createClass({
  mixins: [
    ResponseModalMixin,
    FormStateMixin
  ],

  componentWillMount: function() {
github cdaniel / wardleymapstool / client-v2-jsx / dialogs / SharingDialog.js View on Github external
/** @jsx React.DOM */
var React = require('react');
var Input = require('react-bootstrap').Input;
var Modal = require('react-bootstrap').Modal;
var Button = require('react-bootstrap').Button;
var Glyphicon = require('react-bootstrap').Glyphicon;
var MapConstants = require('./../constants/mapconstants');
var MapActions = require('./../actions/mapactions.js');
var $ = require('jquery');

var MapSharingDialog = React.createClass({

  getInitialState : function(){
    return {
      sharingDialog:false,
      anonymousShare:false,
      anonymousShareLink:''
    };
  },