Merge pull request #76 from valerybugakov/vb/fix/onSelectionFinish

Added `onSelectedItemUnmount` callback to fix `onSelectionFinish `

Author: valerybugakov

README.md

@@ -48,6 +48,7 @@ class App extends Component {
         duringSelection={this.handleSelecting}
         onSelectionClear={this.handleSelectionClear}
         onSelectionFinish={this.handleSelectionFinish}
+        onSelectedItemUnmount={this.handleSelectedItemUnmount}
         ignoreList={['.not-selectable', '.item:nth-child(10)', '.item:nth-child(27)']}
       >
         <List items={this.props.items} />
@@ -123,6 +124,7 @@ The `<SelectableGroup />` component accepts a few optional props:
 - `duringSelection` (Function) Callback fired rapidly during selection (while the selector is being dragged). Passes an array containing selectable items currently under the selector to the callback function.
 - `onSelectionFinish` (Function) Callback.
 - `onSelectionClear` (Function) Callback.
+- `onSelectedItemUnmount` (Function) Callback.
 - `enableDeselect` (Boolean) Enables deselect with selectbox.
 - `mixedDeselect` (Boolean) When enabled items can be selected and deselected with selectbox at the same time, `enableDeselect` should be set to `true`.
 - `scrollContainer` (String) Selector of scroll container which will be used to calculate selectbox position. If not specified SelectableGroup element will be used as scroll container.

example/src/App.tsx

@@ -12,12 +12,14 @@ type TAppProps = {
 type TAppState = {
   disableFirstRow: boolean
   reversed: boolean
+  showSelectableGroup: boolean
 }
 
 class App extends Component<TAppProps, TAppState> {
   state = {
     disableFirstRow: false,
-    reversed: false
+    reversed: false,
+    showSelectableGroup: true
   }
 
   countersRef = createRef<Counters>()
@@ -34,6 +36,12 @@ class App extends Component<TAppProps, TAppState> {
     this.setState(state => ({ reversed: !state.reversed }))
   }
 
+  toggleSelectableGroup = () => {
+    this.setState(state => ({
+      showSelectableGroup: !state.showSelectableGroup
+    }))
+  }
+
   handleSelecting = (selectingItems: TAlbumItem) => {
     this.countersRef.current.handleSelecting(selectingItems)
   }
@@ -42,13 +50,18 @@ class App extends Component<TAppProps, TAppState> {
     this.countersRef.current.handleSelectionFinish(selectedItems)
   }
 
+  handleSelectedItemUnmount = (unmountedItem, selectedItems) => {
+    console.log('hadneleSelectedItemUnmount')
+    this.countersRef.current.handleSelectionFinish(selectedItems)
+  }
+
   handleSelectionClear() {
     console.log('Cancel selection')
   }
 
   render() {
     const { items } = this.props
-    const { disableFirstRow, reversed } = this.state
+    const { disableFirstRow, reversed, showSelectableGroup } = this.state
 
     const itemsToRender = disableFirstRow ? items.slice(5) : items
     const orderedItems = reversed ? itemsToRender.slice().reverse() : itemsToRender
@@ -62,21 +75,27 @@ class App extends Component<TAppProps, TAppState> {
         <button className="btn" type="button" onClick={this.toggleOrder}>
           Toggle order
         </button>
-        <SelectableGroup
-          ref={this.getSelectableGroupRef}
-          className="main"
-          clickClassName="tick"
-          enableDeselect={true}
-          tolerance={0}
-          deselectOnEsc={true}
-          allowClickWithoutSelected={false}
-          duringSelection={this.handleSelecting}
-          onSelectionClear={this.handleSelectionClear}
-          onSelectionFinish={this.handleSelectionFinish}
-          ignoreList={['.not-selectable']}
-        >
-          <List items={orderedItems} />
-        </SelectableGroup>
+        <button className="btn" type="button" onClick={this.toggleSelectableGroup}>
+          Toggle group
+        </button>
+        {showSelectableGroup && (
+          <SelectableGroup
+            ref={this.getSelectableGroupRef}
+            className="main"
+            clickClassName="tick"
+            enableDeselect={true}
+            tolerance={0}
+            deselectOnEsc={true}
+            allowClickWithoutSelected={false}
+            duringSelection={this.handleSelecting}
+            onSelectionClear={this.handleSelectionClear}
+            onSelectionFinish={this.handleSelectionFinish}
+            onSelectedItemUnmount={this.handleSelectedItemUnmount}
+            ignoreList={['.not-selectable']}
+          >
+            <List items={orderedItems} />
+          </SelectableGroup>
+        )}
       </div>
     )
   }

src/SelectableGroup.tsx

@@ -44,7 +44,10 @@ export type TSelectableGroupProps = {
   selectboxClassName?: string
   style?: object
   selectionModeClass?: string
+  // Event that will fire when items are selected. Passes an array of keys.
+  onSelectionFinish?: Function
   onSelectionClear?: Function
+  onSelectedItemUnmount?: Function
   enableDeselect?: boolean
   mixedDeselect?: boolean
   deselectOnEsc?: boolean
@@ -56,9 +59,7 @@ export type TSelectableGroupProps = {
   allowMetaClick?: boolean
   allowShiftClick?: boolean
   selectOnClick?: boolean
-  /**
-   * Scroll container selector
-   */
+  // Scroll container selector
   scrollContainer?: string
 
   /**
@@ -67,14 +68,7 @@ export type TSelectableGroupProps = {
    */
   duringSelection?: Function
 
-  /**
-   * Event that will fire when items are selected. Passes an array of keys.
-   */
-  onSelectionFinish?: Function
-
-  /**
-   * The component that will represent the Selectable DOM node
-   */
+  // The component that will represent the Selectable DOM node
   component?: ReactComponentLike
 
   /**
@@ -103,6 +97,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     duringSelection: noop,
     onSelectionFinish: noop,
     onSelectionClear: noop,
+    onSelectedItemUnmount: noop,
     allowClickWithoutSelected: true,
     selectionModeClass: 'in-selection-mode',
     resetOnStart: false,
@@ -189,6 +184,10 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     }
 
     this.removeTempEventListeners()
+
+    // Prevent onSelectedItemUnmount calls
+    this.selectedItems.clear()
+    this.selectingItems.clear()
   }
 
   removeTempEventListeners() {
@@ -225,15 +224,15 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
   unregisterSelectable = (selectableItem: TSelectableItem) => {
     this.registry.delete(selectableItem)
 
-    const isHandled =
+    const isRemoved =
       this.selectedItems.has(selectableItem) || this.selectingItems.has(selectableItem)
 
     this.selectedItems.delete(selectableItem)
     this.selectingItems.delete(selectableItem)
 
-    if (isHandled) {
+    if (isRemoved) {
       // Notify third-party dev that component did unmount and handled item probably should be deleted
-      this.props.onSelectionFinish!([...this.selectedItems])
+      this.props.onSelectedItemUnmount!(selectableItem, [...this.selectedItems])
     }
   }