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; |