/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2019
 */

import React from 'react';

import PropTypes from 'prop-types';

import { DropDown } from '../DropDown';
import { FormLabel } from './FormLabel';
import { FlexColumn } from '../FlexColumn';

export const FormDropdown = ({ label, onValueChange, options, optionKey, value }) => {
  const valueStrings = options.map(({ [optionKey]: valueString }) => valueString);
  const onValueChangeCallback = (_, index) => onValueChange(options[index]);

  return (
    <FlexColumn flex={1}>
      <FormLabel value={label} />
      <DropDown
        style={{ width: null, flex: 1 }}
        values={valueStrings}
        selectedValue={value}
        onValueChange={onValueChangeCallback}
      />
    </FlexColumn>
  );
};

FormDropdown.propTypes = {
  onValueChange: PropTypes.func.isRequired,
  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
  optionKey: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
};

@@ -326,16 +326,28 @@
 own = (%7B
+ isRequired,
  label, 
@@ -623,16 +623,40 @@
 =%7Blabel%7D
+ isRequired=%7BisRequired%7D
  /%3E%0A    
@@ -1119,11 +1119,52 @@
 quired,%0A
+  isRequired: PropTypes.bool.isRequired,%0A
 %7D;%0A

Add isRequired to FormDropDown