import React from 'react';
import css from './ListDropdown.css';
import List from '@folio/stripes-components/lib/List';
import TextField from '@folio/stripes-components/lib/TextField';
import Button from '@folio/stripes-components/lib/Button';
import Icon from '@folio/stripes-components/lib/Icon';

function ListDropdown(props){
  
  const handleItemClick = (item) => props.onClickItem(item);
  const handleSearchChange = (e) => props.onChangeSearch(e);  

  const permissionDDFormatter = (item) => (
    <li key={item.permissionName} >
      <button type="button" className={css.itemControl} onClick={() => {handleItemClick(item)}}>
        {!item.displayName?item.permissionName:item.displayName}
      </button>
    </li>
  );
    
  return(
    <div>
      <TextField 
        noBorder 
        placeholder="Search" 
        startControl={<Icon icon="search"/>}
        onChange={handleSearchChange}
      />
      <List 
        itemFormatter={permissionDDFormatter}
        items={props.items}
        listClass={css.ListDropdown}
      />
    </div>
  );
}

export default ListDropdown;


@@ -1,38 +1,140 @@
-import React from 'react';
+// We have to remove node_modules/react to avoid having multiple copies loaded.%0A// eslint-disable-next-line import/no-unresolved
 %0Aimport 
 css 
@@ -133,36 +133,25 @@
 ort 
-css
+React
  from '
-./ListDropdown.css
+react
 ';%0Ai
@@ -276,20 +276,18 @@
 %0Aimport 
-Butt
+Ic
 on from 
@@ -321,12 +321,10 @@
 lib/
-Butt
+Ic
 on';
@@ -335,53 +335,36 @@
 ort 
-Icon
+css
  from '
-@folio/stripes-components/lib/Icon
+./ListDropdown.css
 ';%0A%0A
@@ -395,12 +395,10 @@
 ops)
-%7B%0A 
  
+%7B
 %0A  c
@@ -420,22 +420,20 @@
 Click = 
-(
 item
-)
  =%3E prop
@@ -482,19 +482,17 @@
 hange = 
-(e)
+e
  =%3E prop
@@ -511,18 +511,16 @@
 arch(e);
-  
 %0A%0A  cons
@@ -545,22 +545,20 @@
 atter = 
-(
 item
-)
  =%3E (%0A  
@@ -663,16 +663,17 @@
 %7B() =%3E %7B
+ 
 handleIt
@@ -685,16 +685,18 @@
 ck(item)
+; 
 %7D%7D%3E%0A    
@@ -721,9 +721,11 @@
 Name
-?
+ ? 
 item
@@ -743,9 +743,11 @@
 Name
-:
+ : 
 item
@@ -791,20 +791,16 @@
 i%3E%0A  );%0A
-    
 %0A  retur
@@ -800,16 +800,17 @@
   return
+ 
 (%0A    %3Cd
@@ -829,17 +829,16 @@
 extField
- 
 %0A       
@@ -846,17 +846,16 @@
 noBorder
- 
 %0A       
@@ -875,17 +875,16 @@
 %22Search%22
- 
 %0A       
@@ -917,16 +917,17 @@
 %22search%22
+ 
 /%3E%7D%0A    
@@ -980,17 +980,16 @@
    %3CList
- 
 %0A       
@@ -1120,16 +1120,167 @@
   );%0A%7D%0A%0A
+ListDropdown.propTypes = %7B%0A  onChangeSearch: React.PropTypes.func.isRequired,%0A  items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,%0A%7D;%0A%0A
 export d
@@ -1300,9 +1300,8 @@
 opdown;%0A
-%0A

Fix many ESLint errors (STRIPES-100)