fix(chips): ChipSet no longer overwrites handle[Interaction|Select|Re… (#651)

Author: mgr34

packages/chips/ChipSet.tsx

@@ -163,14 +163,24 @@ export default class ChipSet extends React.Component<ChipSetProps, ChipSetState>
     const {filter} = this.props;
     const {selectedChipIds} = this.state;
     const selected = selectedChipIds.indexOf(chip.props.id) > -1;
+    const {handleInteraction, handleSelect, handleRemove, ...chipProps} = chip.props;
     const props = Object.assign(
       {},
-      ...chip.props,
+      ...chipProps,
       {
         selected,
-        handleSelect: this.handleSelect,
-        handleInteraction: this.handleInteraction,
-        handleRemove: this.handleRemove,
+        handleSelect: (id: string, selected: boolean): void => {
+          handleSelect!(id, selected);
+          this.handleSelect(id, selected);
+        },
+        handleInteraction: (id: string): void => {
+          handleInteraction!(id);
+          this.handleInteraction(id);
+        },
+        handleRemove: (id: string): void => {
+          handleRemove!(id);
+          this.handleRemove(id);
+        },
         chipCheckmark: filter ? (
           <ChipCheckmark ref={this.setCheckmarkWidth} />
         ) : null,

packages/chips/README.md

@@ -155,7 +155,7 @@ Prop Name | Type | Description
 --- | --- | ---
 className | String | Classes to be applied to the chip set element
 selectedChipIds | Array | Array of ids of chips that are selected
-handleSelect | Function(id: string) => void | Callback for selecting the chip with the given id
+handleSelect | Function(selectedChipIds: string[]) => void | Callback when Chips are Selected
 updateChips | Function(chips: Array{chipProps}) => void | Callback when the ChipSet updates its chips
 choice | Boolean | Indicates that the chips in the set are choice chips, which allow single selection from a set of options
 filter | Boolean | Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options
@@ -172,8 +172,10 @@ label | String | Text to be shown on the chip
 leadingIcon | Element | An icon element that appears as the leading icon.
 removeIcon | Element | An icon element that appears as the remove icon. Clicking on it should remove the chip.
 selected | Boolean | Indicates whether the chip is selected
-handleSelect | Function(id: string) => void | Callback for selecting the chip with the given id
+handleSelect | Function(id: string, selected: boolean) => void | Callback for selecting the chip with the given id
 handleRemove | Function(id: string) => void | Callback for removing the chip with the given id
+handleInteraction | Function(id: string) => void | Callback for interaction of chip (`onClick` | `onKeyDown`)
+
 
 ## Sass Mixins
 

test/unit/chips/ChipSet.test.tsx

@@ -88,6 +88,17 @@ test('#adapter.setSelected adds selectedChipId to state', () => {
   td.verify(getSelectedChipIds(), {times: 1});
 });
 
+test('#chip.props.setSelected calls both #chip.props.handleSelect and #chipSet.props.handleSelect', () => {
+  const chipHandleSelect = coerceForTesting<(id: string, selected: boolean) => void>(td.func());
+  const wrapper = mount<ChipSet>(<ChipSet><Chip /></ChipSet>);
+  wrapper.setProps({children: <Chip id='1' handleSelect={chipHandleSelect} />});
+  wrapper.instance().handleSelect = coerceForTesting<(chipIds: string, selected: boolean) => void>(td.func());
+  const chip = wrapper.children().props().children[0];
+  chip.props.handleSelect('1', true);
+  td.verify(wrapper.instance().handleSelect('1', true), {times: 1});
+  td.verify(chipHandleSelect('1', true), {times: 1});
+});
+
 // this is bad
 test('#adapter.setSelected removes selectedChipId from state', () => {
   const wrapper = shallow<ChipSet>(
@@ -187,6 +198,16 @@ test('#handleSelect calls updates parent component with selectedChipIds correctl
   td.verify(handleChipSelection(['chip1'], ['chip1', 'chip2']), {times: 1});
 });
 
+test('#chip.props.handleInteraction calls both #chip.handleInteraction calls #foundation.handleChipInteraction', () => {
+  const handleChipInteraction = coerceForTesting<(id: string) => void>(td.func());
+  const wrapper = mount<ChipSet>(<ChipSet><Chip /></ChipSet>);
+  wrapper.instance().handleInteraction = coerceForTesting<(chipId: string) => void>(td.func());
+  wrapper.setProps({children: <Chip id='1' handleInteraction={handleChipInteraction} />});
+  const chip = wrapper.children().props().children[0];
+  chip.props.handleInteraction('1');
+  td.verify(wrapper.instance().handleInteraction('1'), {times: 1});
+  td.verify(handleChipInteraction('1'), {times: 1});
+});
 
 test('#handleInteraction calls #foundation.handleChipInteraction', () => {
   const handleChipInteraction = td.func();
@@ -336,6 +357,17 @@ test('chip is rendered with handleRemove method', () => {
   td.verify(wrapper.instance().handleRemove('1'), {times: 1});
 });
 
+test('#chip.props.handleRemove calls both #chipSet.handleRemove and #chip.props.handleRemove', () => {
+  const handleChipRemove = coerceForTesting<(id: string) => void>(td.func());
+  const wrapper = mount<ChipSet>(<ChipSet><Chip /></ChipSet>);
+  wrapper.instance().handleRemove = coerceForTesting<(chipId: string) => void>(td.func());
+  wrapper.setProps({children: <Chip id='1' handleRemove={handleChipRemove} />});
+  const chip = wrapper.children().props().children[0];
+  chip.props.handleRemove('1');
+  td.verify(wrapper.instance().handleRemove('1'), {times: 1});
+  td.verify(handleChipRemove('1'), {times: 1});
+});
+
 test('chip is rendered ChipCheckmark if is filter variants', () => {
   const wrapper = mount(
     <ChipSet filter>