app/addons/documents/index-results/components/queryoptions/AdditionalParams.js

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

import React from 'react';
import FauxtonAPI from '../../../../../core/api';

export default class AdditionalParams extends React.Component {
  updateSkip (e) {
    e.preventDefault();
    let val = e.target.value;

    //check skip is only numbers
    if (!/^\d*$/.test(val)) {
      FauxtonAPI.addNotification({
        msg: 'Skip can only be a number',
        type: 'error'
      });
      val = this.props.skip;
    }

    this.props.updateSkip(val);
  }

  updateLimit (e) {
    e.preventDefault();
    this.props.updateLimit(e.target.value);
  }

  toggleDescending () {
    this.props.toggleDescending(this.props.descending);
  }

  render () {
    return (
      <div className="query-group" id="query-options-additional-params">
        <div className="add-on additionalParams">Additional Parameters</div>
        <div className="row-fluid fieldsets">
          <div className="dropdown inline">
            <label className="drop-down">
              Limit
              <select id="qoLimit" onChange={this.updateLimit.bind(this)} name="limit" value={this.props.limit} className="input-small">
                <option value="none">None</option>
                <option value={5}>5</option>
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={30}>30</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
                <option value={500}>500</option>
              </select>
            </label>
          </div>
        </div>
        <div className="row-fluid fieldsets">
          <div className="checkbox inline">
            <input id="qoDescending" type="checkbox" onChange={this.toggleDescending.bind(this)} checked={this.props.descending} />
            <label htmlFor="qoDescending">Descending</label>
          </div>
          <div className="dropdown inline">
            <label htmlFor="qoSkip" className="drop-down">
              Skip
              <input value={this.props.skip} onChange={this.updateSkip.bind(this)} className="input-small" type="number" id="qoSkip" placeholder="# of rows" />
            </label>
          </div>
        </div>
      </div>
    );
  }
}