Updated selectableItem props

Author: valerybugakov

README.md

@@ -21,10 +21,15 @@ The main idea of this fork is to eliminate render during selection caused by sta
 
 ## Usage
 
-Package exports 5 entities `{ TSelectableItemProps, SelectableGroup, createSelectable, SelectAll, DeselectAll }`.
+Package exports 5 entities
+
+```ts
+export { TSelectableItemProps, SelectableGroup, createSelectable, SelectAll, DeselectAll }
+```
+
 To make other components selectable wrap them using HoC `createSelectable`, add passed `selectableRef` prop to the target node and put a list of seletable items under `SelectableGroup`.
 
-```js
+```ts
 import React, { Component } from 'react'
 import { SelectableGroup } from 'react-selectable-fast'
 
@@ -52,16 +57,22 @@ class App extends Component {
 }
 ```
 
-```js
+```ts
 import React from 'react'
-import { createSelectable } from 'react-selectable-fast'
+import { TSelectableItemProps, createSelectable } from 'react-selectable-fast'
 
-const SomeComponent = ({ selectableRef, selected, selecting }) => <div ref={selectableRef}>...</div>
+class SomeComponent extends Component<TSelectableItemProps> {
+  render() {
+    const { selectableRef, isSelected, isSelecting } = this.props
+
+    return <div ref={selectableRef}>...</div>
+  }
+}
 
 export default createSelectable(SomeComponent)
 ```
 
-```js
+```ts
 import React from 'react'
 import { SelectAll, DeselectAll } from 'react-selectable-fast'
 import SelectableComponent from './SomeComponent'
@@ -95,7 +106,7 @@ polyfill in your bundled application, such as [core-js](https://github.com/zloir
 A polyfilled environment for React-Selectable-Fast using [core-js](https://github.com/zloirock/core-js) to support older browsers
 might look like:
 
-```js
+```ts
 import 'core-js/fn/object/assign'
 import 'core-js/fn/array/from'
 import 'core-js/fn/array/is-array'

example/src/Album.tsx

@@ -12,13 +12,13 @@ const DISABLED_CARD_YEARS = [10, 22, 27, 54, 82, 105, 150]
 
 class Album extends Component<TAlbumProps> {
   render() {
-    const { selectableRef, selected, selecting, title, year } = this.props
+    const { selectableRef, isSelected, isSelecting, title, year } = this.props
 
     const classNames = [
       'item',
       DISABLED_CARD_YEARS.includes(year) && 'not-selectable',
-      selecting && 'selecting',
-      selected && 'selected'
+      isSelecting && 'selecting',
+      isSelected && 'selected'
     ]
       .filter(Boolean)
       .join(' ')
@@ -28,7 +28,7 @@ class Album extends Component<TAlbumProps> {
         <div className="tick">+</div>
         <h2>{title}</h2>
         <small>{year}</small>
-        <Label selected={selected} selecting={selecting} />
+        <Label isSelected={isSelected} isSelecting={isSelecting} />
       </div>
     )
   }

example/src/Label.tsx

@@ -1,19 +1,19 @@
 import React, { Component } from 'react'
 
 type TLabelProps = {
-  selecting: boolean
-  selected: boolean
+  isSelecting: boolean
+  isSelected: boolean
 }
 
 class Label extends Component<TLabelProps> {
   render() {
-    const { selecting, selected } = this.props
+    const { isSelecting, isSelected } = this.props
 
     return (
       <div className="album-label">
-        Selecting: <span>{`${selecting}`}</span>
+        Selecting: <span>{`${isSelecting}`}</span>
         <br />
-        Selected: <span>{`${selected}`}</span>
+        Selected: <span>{`${isSelected}`}</span>
       </div>
     )
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-selectable-fast",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "Enable other React components to be selectable by drawing a box with your mouse/touch",
   "repository": {
     "type": "git",

src/CreateSelectable.tsx

@@ -10,16 +10,16 @@ const createSelectable = (WrappedComponent: ComponentType<any>) =>
     static contextType = SelectableGroupContext
 
     static propTypes = {
-      selected: bool
+      isSelected: bool
     }
 
     static defaultProps = {
-      selected: false
+      isSelected: false
     }
 
     state = {
-      selected: this.props.selected,
-      selecting: false
+      isSelected: this.props.isSelected,
+      isSelecting: false
     }
 
     node: HTMLElement | null = null
@@ -44,12 +44,7 @@ const createSelectable = (WrappedComponent: ComponentType<any>) =>
 
     render() {
       return (
-        <WrappedComponent
-          {...this.props}
-          selected={this.state.selected}
-          selecting={this.state.selecting}
-          selectableRef={this.getSelectableRef}
-        />
+        <WrappedComponent {...this.props} {...this.state} selectableRef={this.getSelectableRef} />
       )
     }
   }

src/Selectable.types.ts

@@ -15,8 +15,8 @@ export type TSelectableGroupContext = {
 }
 
 export type TSelectableItemState = {
-  selected: boolean
-  selecting: boolean
+  isSelected: boolean
+  isSelecting: boolean
 }
 
 export type TSelectableItem = Component & {
@@ -27,8 +27,6 @@ export type TSelectableItem = Component & {
   bounds: Maybe<TComputedBounds>
 }
 
-export type TSelectableItemProps = {
-  selected: boolean
-  selecting: boolean
+export type TSelectableItemProps = TSelectableItemState & {
   selectableRef(node: HTMLElement | null): void
 }

src/SelectableGroup.tsx

@@ -191,7 +191,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
 
   registerSelectable = (selectableItem: TSelectableItem) => {
     this.registry.add(selectableItem)
-    if (selectableItem.state.selected) {
+    if (selectableItem.state.isSelected) {
       this.selectedItems.add(selectableItem)
     }
   }
@@ -200,6 +200,8 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     this.registry.delete(selectableItem)
     this.selectedItems.delete(selectableItem)
     this.selectingItems.delete(selectableItem)
+
+    this.props.onSelectionFinish!([...this.selectedItems])
   }
 
   toggleSelectionMode() {
@@ -343,23 +345,23 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     }
 
     const isCollided = doObjectsCollide(selectboxBounds, item.bounds!, tolerance, this.props.delta)
-    const { selecting, selected } = item.state
+    const { isSelecting, isSelected } = item.state
 
     if (isFromClick && isCollided) {
-      if (selected) {
+      if (isSelected) {
         this.selectedItems.delete(item)
       } else {
         this.selectedItems.add(item)
       }
 
-      item.setState({ selected: !selected })
+      item.setState({ isSelected: !isSelected })
 
       return (this.clickedItem = item)
     }
 
     if (!isFromClick && isCollided) {
-      if (selected && enableDeselect && (!this.selectionStarted || mixedDeselect)) {
-        item.setState({ selected: false })
+      if (isSelected && enableDeselect && (!this.selectionStarted || mixedDeselect)) {
+        item.setState({ isSelected: false })
         item.deselected = true
 
         this.deselectionStarted = true
@@ -369,8 +371,8 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
 
       const canSelect = mixedDeselect ? !item.deselected : !this.deselectionStarted
 
-      if (!selecting && !selected && canSelect) {
-        item.setState({ selecting: true })
+      if (!isSelecting && !isSelected && canSelect) {
+        item.setState({ isSelecting: true })
 
         this.selectionStarted = true
         this.selectingItems.add(item)
@@ -379,9 +381,9 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
       }
     }
 
-    if (!isFromClick && !isCollided && selecting) {
+    if (!isFromClick && !isCollided && isSelecting) {
       if (this.selectingItems.has(item)) {
-        item.setState({ selecting: false })
+        item.setState({ isSelecting: false })
 
         this.selectingItems.delete(item)
 
@@ -394,7 +396,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
 
   clearSelection = () => {
     for (const item of this.selectedItems.values()) {
-      item.setState({ selected: false })
+      item.setState({ isSelected: false })
       this.selectedItems.delete(item)
     }
 
@@ -407,8 +409,8 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     this.updateWhiteListNodes()
 
     for (const item of this.registry.values()) {
-      if (!this.isInIgnoreList(item.node) && !item.state.selected) {
-        item.setState({ selected: true })
+      if (!this.isInIgnoreList(item.node) && !item.state.isSelected) {
+        item.setState({ isSelected: true })
         this.selectedItems.add(item)
       }
     }
@@ -532,7 +534,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
       this.handleClick(evt, pageY, pageX)
     } else {
       for (const item of this.selectingItems.values()) {
-        item.setState({ selected: true, selecting: false })
+        item.setState({ isSelected: true, isSelecting: false })
       }
       this.selectedItems = new Set([...this.selectedItems, ...this.selectingItems])
       this.selectingItems.clear()