form.js

import { Button, ButtonRow, Code, Input, Label } from 'optimizely-oui';
import Immutable from 'optly/immutable';
import PropTypes from 'prop-types';
import React from 'react';
import regexUtils from 'optly/utils/regex';
import { toImmutable } from 'nuclear-js';

import { Form } from 'react_components/form';
import CodeSamplePicker from 'bundles/p13n/components/code_sample_picker';

export default class EventKeyFormInput extends React.Component {
  static propTypes = {
    // TODO(jordan): use form proptypes
    field: PropTypes.object.isRequired,
    currentProjectEvents: PropTypes.instanceOf(Immutable.List).isRequired,
  };

  constructor(props) {
    super(props);

    const {
      field,
    } = this.props;

    field.arrayValidator({
      // run on each entry in the List
      regex: (apiName) => {
        if (!regexUtils.eventAPIName.test(apiName)) {
          return 'Key must be no longer than 64 characters and consist of only alphanumeric characters, hyphens, underscores, spaces, and periods.'
        }
      },
    });

    field.validators({
      regex: (apiName) => {
        if (!regexUtils.eventAPIName.test(apiName)) {
          return 'Key must be no longer than 64 characters and consist of only alphanumeric characters, hyphens, underscores, spaces, and periods.'
        }
      },

      unique: (apiName, editingEvent) => {
        const result = this.props.currentProjectEvents.some(event => (
          event.get('api_name') === apiName &&
          event.get('id') !== editingEvent.get('id')
        ))

        if (result) {
          return `Key ${apiName} is already in use by another event in this project. Please choose a unique key.`
        }
      },

      required: (apiName) => {
        if (!apiName || !apiName.trim()) {
          return 'Please provide a key.';
        }
      },
    });
  }

  renderRow(item, ind) {
    const { hasError, message, details } = field.getArrayFieldErrors(ind);

    return (
      <Input
        type="text"
        testSection="oasis-config-event-key"
        value={ field.getValue() }
        onChange={ (e) => field.setValue(e.target.value) }
        label='Event Key'
        displayError={ hasError }
        note={ message }
      />
    );
  }

  render() {
    const { field } = this.props;
    const { hasError, message, details } = field.getErrors();

    return field.getValue().map((item, ind) => this.renderRow(item, ind));
  }
}