All files / components/Dropdown index.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
 
 
 
1x
 
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'proptypes';
 
const Dropdown = (props) => {
  const {
    products, keywordMapping, inFocus, showThumbPreview,
  } = props;
  Iif (products && products.length > 0) {
    return (
      <ul className="ub-suggest-list">
        { products.map((product, i) => (
          <li tabIndex={-1} className={`${(i + 1 === inFocus) ? 'focused ' : ''}ub-suggest-item`} key={product[keywordMapping.id]}>
            { showThumbPreview ?
              <a href={product[keywordMapping.url]} className="ub-suggest-link">
                <img className="ub-suggest-thumb" src={product[keywordMapping.image][0]} alt={product[keywordMapping.name]} /> {product[keywordMapping.name]}
              </a>
              :
              (<a href={product[keywordMapping.url]} className="ub-suggest-link">{product[keywordMapping.name]})</a>)
            }
          </li>
          ))
        }
      </ul>
    );
  }
  return null;
};
 
Dropdown.propTypes = {
  products: PropTypes.array.isRequired, // eslint-disable-line
  keywordMapping: PropTypes.shape({
    name: PropTypes.string,
    image: PropTypes.string,
    price: PropTypes.string,
    url: PropTypes.string,
    id: PropTypes.string,
  }).isRequired,
  showThumbPreview: PropTypes.bool.isRequired,
  inFocus: PropTypes.number.isRequired,
};
 
export default Dropdown;