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

import React from 'react';
import { View, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import PropTypes from 'prop-types';

import { ChevronDownIcon, BurgerMenuIcon } from './icons';
import { PopoverDropDown } from './PopoverDropDown';

import { SUSSOL_ORANGE, APP_FONT_FAMILY, GREY } from '../globalStyles/index';

/**
 * Layout component rendering a DropdownPopover, a SimpleLabel and an optional
 * secondary Burger menu icon with onPress gesture handler.
 *
 * Renders in a 1/9 ratio.
 *
 * Uses important props from PopoverDropdown and SimpleLabel. See the individual
 * components for more detail.
 *
 * @prop {Text}   currentOptionText Text to display for the label text prop.
 * @prop {Array}  options           The options of the drop down. See PopoverDropdown.
 * @prop {Func}   onSelection       Callback when selecting a dropdown option.
 * @prop {String} dropdownTitle     The title of the drop down menu when opened.
 * @prop {Bool}   useSecondaryMenu  Indicator whether the secondary menu should show.
 * @prop {Number} iconSize          The size of the drop down icon.
 */
export const DropdownRow = ({
  currentOptionText,
  options,
  onSelection,
  dropdownTitle,
  useSecondaryMenu,
  secondaryCallback,
  iconSize,
}) => {
  const DropDownMenuIcon = React.useCallback(() => {
    const iconColor = options.length ? SUSSOL_ORANGE : GREY;
    return <ChevronDownIcon color={iconColor} size={iconSize} />;
  }, []);

  const BurgerMenuButton = React.useCallback(
    () =>
      (
        <TouchableOpacity onPress={secondaryCallback}>
          <BurgerMenuIcon />
        </TouchableOpacity>
      )[useSecondaryMenu]
  );

  return (
    <View style={localStyles.containerStyle}>
      <View style={localStyles.flexOne}>
        <PopoverDropDown
          BaseComponent={DropDownMenuIcon}
          options={options}
          onSelection={onSelection}
          title={dropdownTitle}
        />
      </View>
      <View style={localStyles.flexNine}>
        <TextInput
          onChangeText={onSelection}
          value={currentOptionText}
          underlineColorAndroid={SUSSOL_ORANGE}
          style={{ flex: 1, fontFamily: APP_FONT_FAMILY }}
          placeholder="Usage direction"
        />
      </View>
      {useSecondaryMenu && <BurgerMenuButton />}
    </View>
  );
};

const localStyles = StyleSheet.create({
  containerStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  iconsContainerStyle: {
    flexDirection: 'row-reverse',
    justifyContent: 'space-between',
    flex: 1,
  },
  flexNine: { flex: 9 },
  flexTwo: { flex: 2 },
  flexOne: { flex: 1 },
});

DropdownRow.defaultProps = {
  useSecondaryMenu: false,
  secondaryCallback: null,
  iconSize: 20,
};

DropdownRow.propTypes = {
  currentOptionText: PropTypes.string.isRequired,
  options: PropTypes.array.isRequired,
  onSelection: PropTypes.func.isRequired,
  dropdownTitle: PropTypes.string.isRequired,
  useSecondaryMenu: PropTypes.bool,
  secondaryCallback: PropTypes.func,
  iconSize: PropTypes.number,
};<commit_msg>Add placeholder as a prop and defined style<commit_after>/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2019
 */

import React from 'react';
import { View, TouchableOpacity, StyleSheet, TextInput } from 'react-native';
import PropTypes from 'prop-types';

import { ChevronDownIcon, BurgerMenuIcon } from './icons';
import { PopoverDropDown } from './PopoverDropDown';

import { SUSSOL_ORANGE, APP_FONT_FAMILY, GREY } from '../globalStyles/index';

/**
 * Layout component rendering a DropdownPopover, a SimpleLabel and an optional
 * secondary Burger menu icon with onPress gesture handler.
 *
 * Renders in a 1/9 ratio.
 *
 * Uses important props from PopoverDropdown and SimpleLabel. See the individual
 * components for more detail.
 *
 * @prop {Text}   currentOptionText Text to display for the label text prop.
 * @prop {Array}  options           The options of the drop down. See PopoverDropdown.
 * @prop {Func}   onSelection       Callback when selecting a dropdown option.
 * @prop {String} dropdownTitle     The title of the drop down menu when opened.
 * @prop {Bool}   useSecondaryMenu  Indicator whether the secondary menu should show.
 * @prop {Number} iconSize          The size of the drop down icon.
 * @prop {String} placeholder       Placeholder string value, when no value has been chosen/entered.
 */
export const DropdownRow = ({
  currentOptionText,
  options,
  onSelection,
  dropdownTitle,
  useSecondaryMenu,
  secondaryCallback,
  iconSize,
  placeholder,
}) => {
  const DropDownMenuIcon = React.useCallback(() => {
    const iconColor = options.length ? SUSSOL_ORANGE : GREY;
    return <ChevronDownIcon color={iconColor} size={iconSize} />;
  }, []);

  const BurgerMenuButton = React.useCallback(
    () =>
      (
        <TouchableOpacity onPress={secondaryCallback}>
          <BurgerMenuIcon />
        </TouchableOpacity>
      )[useSecondaryMenu]
  );

  return (
    <View style={localStyles.containerStyle}>
      <View style={localStyles.flexOne}>
        <PopoverDropDown
          BaseComponent={DropDownMenuIcon}
          options={options}
          onSelection={onSelection}
          title={dropdownTitle}
        />
      </View>
      <View style={localStyles.flexNine}>
        <TextInput
          onChangeText={onSelection}
          value={currentOptionText}
          underlineColorAndroid={SUSSOL_ORANGE}
          style={localStyles.textInputStyle}
          placeholder={placeholder}
        />
      </View>
      {useSecondaryMenu && <BurgerMenuButton />}
    </View>
  );
};

const localStyles = StyleSheet.create({
  containerStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  iconsContainerStyle: {
    flexDirection: 'row-reverse',
    justifyContent: 'space-between',
    flex: 1,
  },
  textInputStyle: {
    flex: 1,
    fontFamily: APP_FONT_FAMILY,
  },
  flexNine: { flex: 9 },
  flexTwo: { flex: 2 },
  flexOne: { flex: 1 },
});

DropdownRow.defaultProps = {
  useSecondaryMenu: false,
  secondaryCallback: null,
  iconSize: 20,
  placeholder: '',
};

DropdownRow.propTypes = {
  currentOptionText: PropTypes.string.isRequired,
  options: PropTypes.array.isRequired,
  onSelection: PropTypes.func.isRequired,
  dropdownTitle: PropTypes.string.isRequired,
  useSecondaryMenu: PropTypes.bool,
  secondaryCallback: PropTypes.func,
  iconSize: PropTypes.number,
  placeholder: PropTypes.string,
};
{'fraction_non_alphanumeric': 0.10865341503512181, 'fraction_numerical': 0.003885816768793902, 'mean_word_length': 3.3398184176394294, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1331085', 'n_tokens_mistral': 2005, 'n_tokens_neox': 1948, 'n_words': 515}