Merge #1 into 'master' with new component 'CheckboxListMenuItem' to properly...

Merge #1 into 'master' with  new component 'CheckboxListMenuItem' to properly handle the item toggle action

Closes #1

MR !1

src/MultipleSelectField/CheckboxListMenuItem.tsx

+import * as React from 'react'
+import { MultipleSelectFieldItem } from './MultipleSelectField'
+import { CheckboxListItem } from '../CheckboxListItem'
+
+export interface CheckboxListMenuItemProps {
+  item: MultipleSelectFieldItem,
+  checked: boolean,
+  onToggleCheck (checked: boolean, item: MultipleSelectFieldItem): void
+}
+
+export class CheckboxListMenuItem extends React.PureComponent<CheckboxListMenuItemProps> {
+
+  constructor (props: CheckboxListMenuItemProps) {
+    super(props)
+    this.onToggleCheck = this.onToggleCheck.bind(this)
+  }
+
+  render () {
+    const { item, checked } = this.props
+    return <CheckboxListItem
+      id={item.id}
+      key={item.id}
+      label={item.label}
+      checked={checked}
+      onToggleCheck={this.onToggleCheck}
+    />
+  }
+
+  private onToggleCheck (checked: boolean, event: Event) {
+    if (this.props.onToggleCheck) this.props.onToggleCheck(checked, this.props.item)
+  }
+}

src/MultipleSelectField/MultipleSelectField.tsx

@@ -5,6 +5,7 @@ import { CheckboxListItem } from '../CheckboxListItem'
 import DropdownMenu, { DropdownMenuProps } from 'react-md/lib/Menus/DropdownMenu'
 import TextField, { TextFieldProps, TextFieldLineDirections, TextFieldTypes } from 'react-md/lib/TextFields/TextField'
 import { HorizontalAnchors, VerticalAnchors, LayoverPositions, LayoverAnchor } from 'react-md/lib/Helpers/Layover'
+import { CheckboxListMenuItem } from './CheckboxListMenuItem'
 
 export interface MultipleSelectFieldItem {
   id: string
@@ -232,11 +233,10 @@ export class MultipleSelectField extends React.PureComponent<MultipleSelectField
       filter
     } = this.props
     const { checked, inputValue } = this.state
-    const items = this._filter(menuItems, inputValue).map((item, index) => <CheckboxListItem
-      id={String(index)}
+    const items = this._filter(menuItems, inputValue).map((item, index) => <CheckboxListMenuItem
+      item={item}
       key={item.id}
-      label={item.label}
-      checked={item.checked || checked[index]}
+      checked={item.checked || checked[item.id]}
       onToggleCheck={this._handleToggleCheck}
     />)
     return <DropdownMenu
@@ -267,13 +267,12 @@ export class MultipleSelectField extends React.PureComponent<MultipleSelectField
     this.setState({ inputValue })
     if (this.props.onInputChange) this.props.onInputChange(inputValue, e)
   }
-  private _handleToggleCheck (checked: boolean, event: Event) {
-    const element = event.currentTarget as HTMLInputElement
-    if (this.props.menuItems[element.id].checked === undefined) {
+  private _handleToggleCheck (checked: boolean, item: MultipleSelectFieldItem) {
+    if (item.checked === undefined) {
       this.setState(state => ({
-        checked: { ...state.checked, [element.id]: checked }
+        checked: { ...state.checked, [item.id]: checked }
       }))
     }
-    this.props.onToggleCheck(checked, this.props.menuItems[element.id].id)
+    this.props.onToggleCheck(checked, item.id)
   }
 }

src/MultipleSelectField/index.ts

 export * from './MultipleSelectField'
+export * from './CheckboxListMenuItem'
 export { MultipleSelectField as default } from './MultipleSelectField'

stories/multipleSelectField.stories.tsx

@@ -37,3 +37,14 @@ storiesOf('MultipleSelectField', module)
     }}
     menuPosition={MultipleSelectField.Positions.BELOW}
   />)
+  .add('with filter', () => <DefaultMultipleSelectField
+    className='md-cell--2'
+    menuDefaultVisible
+    inputDefaultValue='item 2'
+    filter={(items, text) => text ? items.filter(item => item.label.includes(text.toString())) : items}
+    menuAnchor={{
+      x: MultipleSelectField.HorizontalAnchors.INNER_LEFT,
+      y: MultipleSelectField.VerticalAnchors.BOTTOM
+    }}
+    menuPosition={MultipleSelectField.Positions.BELOW}
+  />)