app/addons/documents/index-editor/components/ReduceEditor.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 PropTypes from 'prop-types';
import React, { Component } from 'react';
import app from '../../../../app';
import ReactComponents from '../../../components/react-components';
import Form from 'react-bootstrap/Form';

const getDocUrl = app.helpers.getDocUrl;
const {CodeEditorPanel} = ReactComponents;

export default class ReduceEditor extends Component {

  constructor(props) {
    super(props);
  }

  getOptionsList() {
    return this.props.reduceOptions.map((reduce, i) => {
      return <option key={i} value={reduce}>{reduce}</option>;
    });
  }

  getReduceValue() {
    if (!this.props.hasReduce) {
      return null;
    }

    if (!this.props.hasCustomReduce) {
      return this.props.reduce;
    }

    return this.reduceEditor.getValue();
  }

  getEditor() {
    return this.reduceEditor.getEditor();
  }

  updateReduceCode(code) {
    this.props.updateReduceCode(code);
  }

  selectChange(event) {
    this.props.selectReduceChanged(event.target.value);
  }

  render() {
    const reduceOptions = this.getOptionsList();
    let customReduceSection;

    if (this.props.hasCustomReduce && this.props.customReducerSupported) {
      customReduceSection = <CodeEditorPanel
        ref={node => this.reduceEditor = node}
        id='reduce-function'
        title={'Custom Reduce function'}
        defaultCode={this.props.reduce}
        allowZenMode={false}
        blur={this.updateReduceCode.bind(this)}
      />;
    } else if (!this.props.customReducerSupported) {
      customReduceSection = (
        <div className="reduce-editor-warning">
          <label>Partitioned views do not support custom reduce functions.</label>
        </div>
      );
    }

    return (
      <div className="row">
        <div className="mb-3 col-12 col-lg-6 col-xxl-4">
          <label htmlFor="reduce-function-selector">
            <span>Reduce (optional)</span>
            <a
              className="help-link"
              data-bypass="true"
              href={getDocUrl('REDUCE_FUNCS')}
              target="_blank"
              rel="noopener noreferrer"
            >
              <i className="fonticon-help-circled"></i>
            </a>
          </label>
          <Form.Select
            onChange={this.selectChange.bind(this)}
            id="reduce-function-selector"
            value={this.props.reduceSelectedOption}
          >
            {reduceOptions}
          </Form.Select>
        </div>
        {customReduceSection}
      </div>
    );
  }
}

ReduceEditor.defaultProps = {
  customReducerSupported: true
};

ReduceEditor.propTypes = {
  reduceOptions: PropTypes.array.isRequired,
  hasReduce: PropTypes.bool.isRequired,
  hasCustomReduce: PropTypes.bool.isRequired,
  customReducerSupported: PropTypes.bool,
  reduce: PropTypes.string,
  reduceSelectedOption: PropTypes.string.isRequired,
  updateReduceCode: PropTypes.func.isRequired,
  selectReduceChanged: PropTypes.func.isRequired
};