Sonarr/frontend/src/Components/Form/KeyValueListInputItem.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons } from 'Helpers/Props';
import IconButton from 'Components/Link/IconButton';
import TextInput from './TextInput';
import styles from './KeyValueListInputItem.css';

class KeyValueListInputItem extends Component {

  //
  // Listeners

  onKeyChange = ({ value: keyValue }) => {
    const {
      index,
      value,
      onChange
    } = this.props;

    onChange(index, { key: keyValue, value });
  }

  onValueChange = ({ value }) => {
    // TODO: Validate here or validate at a lower level component

    const {
      index,
      keyValue,
      onChange
    } = this.props;

    onChange(index, { key: keyValue, value });
  }

  onRemovePress = () => {
    const {
      index,
      onRemove
    } = this.props;

    onRemove(index);
  }

  onFocus = () => {
    this.props.onFocus();
  }

  onBlur = () => {
    this.props.onBlur();
  }

  //
  // Render

  render() {
    const {
      keyValue,
      value,
      keyPlaceholder,
      valuePlaceholder,
      isNew
    } = this.props;

    return (
      <div className={styles.itemContainer}>
        <div className={styles.inputWrapper}>
          <TextInput
            className={styles.keyInput}
            name="key"
            value={keyValue}
            placeholder={keyPlaceholder}
            onChange={this.onKeyChange}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
        </div>

        <div className={styles.inputWrapper}>
          <TextInput
            className={styles.valueInput}
            name="value"
            value={value}
            placeholder={valuePlaceholder}
            onChange={this.onValueChange}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
          />
        </div>

        {
          !isNew &&
            <div className={styles.buttonWrapper}>
              <IconButton
                name={icons.REMOVE}
                tabIndex={-1}
                onPress={this.onRemovePress}
              />
            </div>
        }
      </div>
    );
  }
}

KeyValueListInputItem.propTypes = {
  index: PropTypes.number,
  keyValue: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  keyPlaceholder: PropTypes.string.isRequired,
  valuePlaceholder: PropTypes.string.isRequired,
  isNew: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  onRemove: PropTypes.func.isRequired,
  onFocus: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired
};

KeyValueListInputItem.defaultProps = {
  keyPlaceholder: 'Key',
  valuePlaceholder: 'Value'
};

export default KeyValueListInputItem;