All files / publisher/builds/components datalistSelect.js

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;