All files / src/lib EasyDatalist.jsx

100% Statements 8/8
100% Branches 4/4
100% Functions 2/2
100% Lines 8/8
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        2x 1x 1x 1x 2x     1x                                   2x                 2x          
import React from 'react';
import PropTypes from 'prop-types';
import './EasyEdit.css';
 
const EasyDatalist = (props) => {
  const {options, value, onChange, attributes, placeholder} = props;
  const ref = React.createRef();
  let datalistOptions = options.map(dl => (
      <option value={dl.label}/>
  ));
 
  return (
      <div className="easy-edit-component-wrapper">
        <input
            autoFocus={attributes["autoFocus"] || true}
            value={value}
            onChange={onChange}
            placeholder={placeholder}
            autoComplete={attributes["autoComplete"] || "off"}
            {...attributes}
            list={ref}
        />
        <datalist id={ref}>
          {datalistOptions}
        </datalist>
      </div>
  );
};
 
EasyDatalist.propTypes = {
  onChange: PropTypes.func,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  attributes: PropTypes.object
};
 
EasyDatalist.defaultProps = {
  attributes: {}
};
 
export default EasyDatalist;