fix(chips): remove handleRemove method for chipsUpdate method (#282)

Author: Matt Goo

packages/chips/ChipSet.js

@@ -97,14 +97,33 @@ export default class ChipSet extends Component {
   }
 
   handleRemove = (chipId) => {
-    const {input, handleRemove} = this.props;
+    const {input} = this.props;
     if (input) {
       // this should be calling foundation_.handleChipRemoval, but we would
       // need to pass evt.detail.chipId
       // fix when MDC Web issue 3613 is fixed
       this.foundation_.deselect(chipId);
     }
-    handleRemove(chipId);
+    this.removeChip(chipId);
+  }
+
+  // this should be adapter_.removeChip, but cannot be complete until
+  // https://github.com/material-components/material-components-web/issues/3613
+  // is fixed
+  removeChip = (chipId) => {
+    const {updateChips, children} = this.props;
+    if (!children) return;
+
+    const chips = React.Children.toArray(children).slice();
+    for (let i = 0; i < chips.length; i ++) {
+      const chip = chips[i];
+      if (chip.props.id === chipId) {
+        chips.splice(i, 1);
+        break;
+      }
+    }
+    const chipsArray = chips.length ? chips.map((chip) => chip.props) : [];
+    updateChips(chipsArray);
   }
 
   setCheckmarkWidth = (checkmark) => {
@@ -148,7 +167,7 @@ ChipSet.propTypes = {
   className: PropTypes.string,
   selectedChipIds: PropTypes.array,
   handleSelect: PropTypes.func,
-  handleRemove: PropTypes.func,
+  updateChips: PropTypes.func,
   choice: PropTypes.bool,
   filter: PropTypes.bool,
   input: PropTypes.bool,
@@ -159,7 +178,7 @@ ChipSet.defaultProps = {
   className: '',
   selectedChipIds: [],
   handleSelect: () => {},
-  handleRemove: () => {},
+  updateChips: () => {},
   choice: false,
   filter: false,
   input: false,

packages/chips/README.md

@@ -98,7 +98,7 @@ class MyFilterChips extends React.Component {
 
 ### Input chips
 
-Input chips are a variant of chips which enable user input by converting text into chips. Chips may be dynamically added and removed from the chip set. To define a set of chips as input chips, add the `input` prop to the `ChipSet`. To remove a chip, pass a callback to the `Chip` through the `handleRemove` prop.
+Input chips are a variant of chips which enable user input by converting text into chips. Chips may be dynamically added and removed from the chip set. To define a set of chips as input chips, add the `input` prop to the `ChipSet`. When a chip is removed, the component will notify you through the `updateChips` prop callback. `updateChips` will pass an array of props representing the specified chip data. The example below shows you how to use this.
 
 > _NOTE_: We recommend you store an array of chip labels and their respective IDs in the `state` to manage adding/removing chips. Do _NOT_ use the chip's index as its ID or key, because its index may change due to the addition/removal of other chips.
 
@@ -118,26 +118,21 @@ class MyInputChips extends React.Component {
       const id = label.replace(/\s/g,'');
       // Create a new chips array to ensure that a re-render occurs.
       // See: https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly
-      const chips = [...this.state.chips]; 
+      const chips = [...this.state.chips];
       chips.push({label, id});
       this.setState({chips});
       e.target.value = '';
     }
   }
 
-  // Removes the chip element from the page
-  handleRemove = (id) => {
-    const chips = [...this.state.chips];
-    const index = chips.findIndex(chip => chip.id === id);
-    chips.splice(index, 1);
-    this.setState({chips});
-  }
-
   render() {
     return (
       <div>
         <input type="text" onKeyDown={this.handleKeyDown} />
-        <ChipSet input handleRemove={this.handleRemove}>
+        <ChipSet
+          input
+          updateChips={(chips) => this.setState({chips})}
+        >
           {this.state.chips.map((chip) =>
             <Chip
               key={chip.id} // The chip's key cannot be its index, because its index may change.
@@ -161,7 +156,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
-handleRemove | Function(id: string) => void | Callback for removing the chip with the given id
+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
 input | Boolean | Indicates that the chips in the set are input chips, where chips can be added or removed

test/screenshot/chips/index.js

@@ -82,17 +82,8 @@ class InputChipsTest extends React.Component {
         />
         <ChipSet
           input
-          // handleRemove removes the chip element from the page
-          handleRemove={(chipId) => {
-            const {chips} = this.state;
-            for (let i = 0; i < chips.length; i ++) {
-              if (chips[i].id === chipId) {
-                chips.splice(index, 1);
-                this.setState(chips);
-                return;
-              }
-            }
-          }}>
+          updateChips={(chips) => this.setState({chips})}
+        >
           {this.state.chips.map((chip) =>
             <Chip
               id={chip.id}

test/unit/chips/ChipSet.test.js

@@ -145,8 +145,7 @@ test('#handleSelect does not call foundation_.toggleSelect with chipId if is nei
 });
 
 test('#handleRemove calls foundation_.deselect with chipId and is input variant', () => {
-  const handleRemove = td.func();
-  const wrapper = shallow(<ChipSet input handleRemove={handleRemove}>
+  const wrapper = shallow(<ChipSet input>
     <div id='1' />
   </ChipSet>);
   wrapper.instance().foundation_.deselect = td.func();
@@ -164,11 +163,48 @@ test('#handleRemove does not call foundation_.deselect with chipId if is not inp
   td.verify(wrapper.instance().foundation_.deselect('1'), {times: 0});
 });
 
-test('#handleRemove calls props.handleRemove with chipId', () => {
-  const handleRemove = td.func();
-  const wrapper = shallow(<ChipSet handleRemove={handleRemove}></ChipSet>);
+test('#handleRemove calls removeChip', () => {
+  const wrapper = shallow(<ChipSet>
+    <div id='1' />
+  </ChipSet>);
+  wrapper.instance().removeChip = td.func();
   wrapper.instance().handleRemove('1');
-  td.verify(handleRemove('1'), {times: 1});
+  td.verify(wrapper.instance().removeChip('1'), {times: 1});
+});
+
+test('#removeChip does not call #props.updateChips if there are no chips', () => {
+  const updateChips = td.func();
+  const wrapper = shallow(<ChipSet updateChips={updateChips}/>);
+  wrapper.instance().removeChip();
+  td.verify(updateChips(td.matchers.anything()), {times: 0});
+});
+
+test('#removeChip calls #props.updateChips with array of remove chip', () => {
+  const updateChips = td.func();
+  const wrapper = shallow(<ChipSet updateChips={updateChips}>
+    <div id='1' />
+  </ChipSet>);
+  wrapper.instance().removeChip('1');
+  td.verify(updateChips([]), {times: 1});
+});
+
+test('#removeChip calls #props.updateChips with array of removed chip', () => {
+  const updateChips = td.func();
+  const wrapper = shallow(<ChipSet updateChips={updateChips}>
+    <div id='1' />
+  </ChipSet>);
+  wrapper.instance().removeChip('1');
+  td.verify(updateChips([]), {times: 1});
+});
+
+test('#removeChip calls #props.updateChips with array of remaining chips', () => {
+  const updateChips = td.func();
+  const wrapper = shallow(<ChipSet updateChips={updateChips}>
+    <div id='1' />
+    <div id='2' />
+  </ChipSet>);
+  wrapper.instance().removeChip('1');
+  td.verify(updateChips([{id: '2'}]), {times: 1});
 });
 
 test('#setCheckmarkWidth sets checkmark width', () => {
@@ -231,11 +267,13 @@ test('chip is rendered with handleSelect method', () => {
 });
 
 test('chip is rendered with handleRemove method', () => {
-  const handleRemove = td.func();
-  const wrapper = mount(<ChipSet handleRemove={handleRemove}><Chip id='1'/></ChipSet>);
+  const wrapper = mount(<ChipSet></ChipSet>);
+  wrapper.instance().handleRemove = td.func();
+  wrapper.setProps({children: <Chip id='1'/>});
+
   const chip = wrapper.children().props().children[0];
   chip.props.handleRemove('1');
-  td.verify(handleRemove('1'), {times: 1});
+  td.verify(wrapper.instance().handleRemove('1'), {times: 1});
 });
 
 test('chip is rendered ChipCheckmark if is filter variants', () => {