Bootstrap Dropdown

index.jsx

// in progress :)

/**
 * Renders a boostrap dropdown that enables the user to select a "type" for a phone number
 * @param  {integer} options.id      The ID of the phone number model
 * @param  {function} options.onClick What happens when you select a value
 * @param  {integer} options.value   The value of an existing record (so we can pre-fill input) - uses the key defined in Phone model
 */
export const BoostrapDropdown = ({ id, onClick, value, items, defaultLabel}) => {
  const label = (value)
    ? items[value]
    : defaultLabel;

  return (
    <span>
      <button
          className={`btn btn-outline-secondary dropdown-toggle ${styles.dropdownItem}`}
          type="button"
          data-toggle="dropdown"
        >
          {label}
        </button>
      <div className="dropdown-menu">
        {items.map((item, index) => (
          <p key={index} onClick={onClick} className={`dropdown-item ${styles.dropdownItem}`} data-id={id} data-val={index}>{item}</p>
        ))}
      </div>
    </span>
  )
}

BoostrapDropdown.defaultProps = {
  id: '',
  value: '',
  defaultLabel: 'type',

}

BoostrapDropdown.propTypes = {
  onClick: PropTypes.func.isRequired,
  id: PropTypes.number,
  value: PropTypes.number,
  items: PropTypes.array.isRequired,
  defaultLabel: PropTypes.string,
}