diff --git a/README.md b/README.md index c71a2d6..6cd91c5 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,7 @@ The `` 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. +- `onUnselectedFinish` (Function) Callback. Called at the same time as `onSelectionFinish`, this returns all the unselected values. - `onSelectionClear` (Function) Callback. - `onSelectedItemUnmount` (Function) Callback. - `enableDeselect` (Boolean) Enables deselect with selectbox. diff --git a/src/SelectableGroup.tsx b/src/SelectableGroup.tsx index de4dabe..1090d8d 100644 --- a/src/SelectableGroup.tsx +++ b/src/SelectableGroup.tsx @@ -46,6 +46,7 @@ export type TSelectableGroupProps = { selectionModeClass?: string // Event that will fire when items are selected. Passes an array of keys. onSelectionFinish?: Function + onUnselectedFinish?: (items: TSelectableItem[]) => void onSelectionClear?: Function onSelectedItemUnmount?: Function enableDeselect?: boolean @@ -168,6 +169,15 @@ export class SelectableGroup extends Component { scrollLeft: 0, } + onUnselectedFinish() { + if (!this.props.onUnselectedFinish) return + const a = this.registry + const b = this.selectedItems + const unselected = new Set( + [...a].filter(x => !b.has(x))); + this.props.onUnselectedFinish([...unselected]) + } + componentDidMount() { if (this.props.scrollContainer) { this.scrollContainer = document.querySelector(this.props.scrollContainer) @@ -459,6 +469,7 @@ export class SelectableGroup extends Component { this.setState({ selectionMode: false }) this.props.onSelectionFinish!([...this.selectedItems]) + this.onUnselectedFinish() this.props.onSelectionClear!() } @@ -474,6 +485,7 @@ export class SelectableGroup extends Component { this.setState({ selectionMode: true }) this.props.onSelectionFinish!([...this.selectedItems]) + this.onUnselectedFinish() } isInIgnoreList(target: HTMLElement | null) { @@ -619,6 +631,7 @@ export class SelectableGroup extends Component { height: 0, }) this.props.onSelectionFinish!([...this.selectedItems]) + this.onUnselectedFinish() } this.toggleSelectionMode() @@ -695,6 +708,7 @@ export class SelectableGroup extends Component { ) onSelectionFinish!([...this.selectedItems], this.clickedItem) + this.onUnselectedFinish() if (evt.which === 1) { this.preventEvent(evt.target, 'click')