How to use react-widgets - 10 common examples

var React = require('react');
var ReactDOM = require('react-dom');

var ReactBootstrap = require('react-bootstrap');
var Modal = ReactBootstrap.Modal;
var Form = ReactBootstrap.Form;
var FormGroup = ReactBootstrap.FormGroup;
var FormControl = ReactBootstrap.FormControl;
var ControlLabel = ReactBootstrap.ControlLabel;
var Col = ReactBootstrap.Col;
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;

var Combobox = require('react-widgets').Combobox;

var models = require('../models');
var User = models.User;

class NewUserModal extends React.Component {
	constructor() {
		super();
		this.state = {
			error: "",
			name: "",
			username: "",
			email: "",
			defaultCurrency: '840', // ISO4217 code for USD
			password: "",
			confirm_password: "",
			passwordChanged: false,

render() {

        // setting date localizer
        reactWidgetsMomentLocalizer(moment);
        momentLocalizer(moment);

        // setting number localizer
        numbroLocalizer(numbro);

        let {
            reduxFormActions,
            preset,
            metaForm,
            formOptions,
            formOptionsActions
        } = this.props;

        preset = preset || 'default';
        let presetObject = _.find(presets, p => p.name == preset);
        if (!presetObject) throw Error(`Could not find preset. Preset name: ${preset}`);

import React from 'react';
import { render } from 'react-dom';
import moment from 'moment';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import momentLocalizer from 'react-widgets/lib/localizers/moment';

import 'react-widgets/lib/less/react-widgets.less';
import 'react-select/dist/react-select.css';

import './style.css';
import './style.devtools.css';

import Main from './components/Main';

momentLocalizer(moment);
injectTapEventPlugin();

const App = () => (
  
    <main>
  
);

render(
  ,
  document.querySelector('#app') // eslint-disable-line
);
</main>

var React = require('react');
var outletStore = require('../../stores/outletStore');
var moment = require('moment');
var DateTimePicker = require('react-widgets').DateTimePicker;
var Alert = require('react-bootstrap').Alert;
var Link = require('react-router').Link;

// Handle user scroll and reservation choice and submit validation.

var DateTime = React.createClass({
  getInitialState: function(){
   return {
      message: null,
      alert: false,
      success: false,
      error: false
    }
  },

  show: function(e){

/*
 * Copyright 2018, GeoSolutions Sas.
 * 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.
 */

const PropTypes = require('prop-types');
const React = require('react');
const { ControlLabel, FormGroup, Row, Col, Grid, Alert, Checkbox} = require('react-bootstrap');
const { isObject, isEqual} = require('lodash');
const Combobox = require('react-widgets').Combobox;
const assign = require('object-assign');
const Message = require('../../../I18N/Message');
const SwitchPanel = require('../../../misc/switch/SwitchPanel');
const ColorRangeSelector = require('../../../style/ColorRangeSelector');

const {Controlled: Codemirror} = require('react-codemirror2');
const {NumberPicker} = require('react-widgets');
require('codemirror/lib/codemirror.css');

require('codemirror/mode/javascript/javascript');

const { getMessageById } = require('../../../../utils/LocaleUtils');
const tinycolor = require('tinycolor2');
const ColorPicker = require('../../../style/ColorPicker');
const LoadingView = require('../../../misc/LoadingView');
const ThemaClassesEditor = require('../../../style/ThemaClassesEditor');

const PropTypes = require('prop-types');
/**
 * Copyright 2016, GeoSolutions Sas.
 * 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.
 */

const React = require('react');
const {connect} = require('react-redux');

const {Grid, Row, Col, Panel, PanelGroup, Button, Glyphicon} = require('react-bootstrap');

const Combobox = require('react-widgets').Combobox;

const {getWindowSize} = require('../utils/AgentUtils');
const {setRasterStyleParameter, setRasterLayer} = require('../actions/rasterstyler');
const {changeLayerProperties} = require('../actions/layers');

const {
    RedBandSelector,
    BlueBandSelector,
    GreenBandSelector,
    GrayBandSelector,
    PseudoBandSelector,
    RasterStyleTypePicker,
    EqualInterval,
    PseudoColor,
    OpacityPicker
} = require('./rasterstyler/index');

const PropTypes = require('prop-types');

const React = require('react');
const {connect} = require('react-redux');

const {Grid, Row, Glyphicon, Alert, Button} = require('react-bootstrap');
const Spinner = require('react-spinkit');
const Dialog = require('../components/misc/Dialog');

const Combobox = require('react-widgets').Combobox;
const {head} = require('lodash');

const {getWindowSize} = require('../utils/AgentUtils');
const {setVectorLayer} = require('../actions/vectorstyler');
const {setRasterLayer} = require('../actions/rasterstyler');
const {toggleControl} = require('../actions/controls');
const {changeLayerProperties} = require('../actions/layers');
const {getDescribeLayer, getLayerCapabilities} = require('../actions/layerCapabilities');
const {saveLayerDefaultStyle, reset} = require('../actions/styler');

const {layersSelector} = require('../selectors/layers');

const {zoomToExtent} = require('../actions/map');

const Vector = require("./VectorStyler").VectorStylerPlugin;
const Raster = require("./RasterStyler").RasterStylerPlugin;

var React = require('react');

var ReactDOM = require('react-dom');

var ReactBootstrap = require('react-bootstrap');
var Modal = ReactBootstrap.Modal;
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;
var Form = ReactBootstrap.Form;
var FormGroup = ReactBootstrap.FormGroup;
var FormControl = ReactBootstrap.FormControl;
var ControlLabel = ReactBootstrap.ControlLabel;
var Col = ReactBootstrap.Col;

var Combobox = require('react-widgets').Combobox;

var models = require('../models');
var User = models.User;

class AccountSettingsModal extends React.Component {
	_getInitialState(props) {
		return {
			error: "",
			name: props ? props.user.Name: "",
			username: props ? props.user.Username : "",
			email: props ? props.user.Email : "",
			defaultCurrency: props ? props.user.DefaultCurrency : "",
			password: models.BogusPassword,
			confirm_password: models.BogusPassword,
			passwordChanged: false,
			initial_password: models.BogusPassword

var ReactBootstrap = require('react-bootstrap');

var Col = ReactBootstrap.Col;
var Form = ReactBootstrap.Form;
var FormGroup = ReactBootstrap.FormGroup;
var FormControl = ReactBootstrap.FormControl;
var ControlLabel = ReactBootstrap.ControlLabel;
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Glyphicon = ReactBootstrap.Glyphicon;
var Panel = ReactBootstrap.Panel;
var Modal = ReactBootstrap.Modal;
var ProgressBar = ReactBootstrap.ProgressBar;

var Combobox = require('react-widgets').Combobox;

var CodeMirror = require('react-codemirror');
require('codemirror/mode/lua/lua');

var StackedBarChart = require('../components/StackedBarChart');
var PieChart = require('../components/PieChart');

var models = require('../models')
var Report = models.Report;
var Tabulation = models.Tabulation;

class AddEditReportModal extends React.Component {
	getInitialState(props) {
		var s = {
			reportid: -1,
			name: "",

const React = require('react');
const PropTypes = require('prop-types');
const colorsSchema = require("./EqualIntervalComponents/ColorRamp");
const ColorRampItem = require('./EqualIntervalComponents/ColorRampItem');
const colors = require("./EqualIntervalComponents/ExtendColorBrewer");
const Combobox = require('react-widgets').Combobox;

class ColorRampSelector extends React.Component {

    static propTypes = {
        colorsSchema: PropTypes.array,
        colors: PropTypes.object,
        classes: PropTypes.number,
        ramp: PropTypes.string
    };

    static defaultProps = {
        colorsSchema,
        colors,
        classes: 5,
        ramp: 'Blues'
    };