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