All files / publisher/builds/components datalistSelect.js

100% Statements 5/5
100% Branches 2/2
100% Functions 3/3
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50      2x                 7x       1x                             10x           2x                        
import React, { Fragment } from "react";
import PropTypes from "prop-types";
 
const DatalistSelect = ({
  placeholder,
  options,
  updateSelection,
  disabled,
  selectedOption,
  listId,
  isLoading,
}) => (
  <Fragment>
    <input
      type="text"
      list={listId}
      onChange={(e) => updateSelection(e.target.value)}
      placeholder={placeholder}
      disabled={disabled}
      value={selectedOption}
      className="p-form-validation__input"
    />
    {isLoading ? (
      <span className="p-icon-container">
        <i className="p-icon--spinner u-animation--spin" />
      </span>
    ) : (
      ""
    )}
    <datalist id={listId}>
      {options.map((item, i) => (
        <option value={item.value} key={i} />
      ))}
    </datalist>
  </Fragment>
);
 
DatalistSelect.propTypes = {
  options: PropTypes.array.isRequired,
  selectedOption: PropTypes.string,
  updateSelection: PropTypes.func,
  placeholder: PropTypes.string,
  disabled: PropTypes.bool,
  isLoading: PropTypes.bool,
  listId: PropTypes.string,
  className: PropTypes.string,
};
 
export default DatalistSelect;