├── tsconfig.test.json
├── .gitignore
├── .prettierrc.json
├── .babelrc
├── example
    ├── src
    │   ├── index.tsx
    │   ├── Label.tsx
    │   ├── Counters.tsx
    │   ├── List.tsx
    │   ├── sample-data.ts
    │   ├── Card.tsx
    │   └── App.tsx
    └── webpack.config.example.js
├── src
    ├── utils
    │   ├── nodeInRoot.ts
    │   ├── index.ts
    │   ├── detectMouseButton.ts
    │   ├── castTouchToMouseEvent.ts
    │   ├── getBoundsForNode.ts
    │   └── doObjectsCollide.ts
    ├── SelectableGroup.context.ts
    ├── Selectable.types.ts
    ├── index.ts
    ├── SelectAll.tsx
    ├── DeselectAll.tsx
    ├── Selectbox.tsx
    ├── CreateSelectable.tsx
    └── SelectableGroup.tsx
├── .release-it.json
├── .editorconfig
├── now.json
├── .circleci
    └── config.yml
├── changelog.hbs
├── tsconfig.json
├── webpack.config.js
├── .gitattributes
├── LICENSE
├── webpack.config.prod.js
├── website
    ├── css
    │   ├── main.css
    │   ├── normalize.css
    │   └── github-light.css
    └── index.html
├── package.json
├── .eslintrc.js
└── README.md


/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "include": ["example", "src"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | website/bundle.js
2 | lib
3 | dist
4 | build
5 | node_modules
6 | .DS_Store
7 | *.log
8 | .idea
9 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "parser": "typescript",
3 |   "singleQuote": true,
4 |   "printWidth": 100,
5 |   "semi": false,
6 |   "arrowParens": "avoid"
7 | }
8 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "@babel/preset-react",
4 |     "@babel/typescript",
5 |     ["@babel/preset-env", { "modules": false }]
6 |   ],
7 |   "plugins": ["@babel/plugin-proposal-class-properties"]
8 | }
9 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | 
4 | import App from './App'
5 | import { items } from './sample-data'
6 | 
7 | render(<App items={items} />, document.getElementById('demo-container'))
8 | 


--------------------------------------------------------------------------------
/src/utils/nodeInRoot.ts:
--------------------------------------------------------------------------------
 1 | export function isNodeInRoot(node: HTMLElement, root: HTMLElement) {
 2 |   while (node) {
 3 |     if (node === root) {
 4 |       return true
 5 |     }
 6 | 
 7 |     node = node.parentNode as any
 8 |   }
 9 | 
10 |   return false
11 | }
12 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export const noop = () => {}
2 | export type Maybe<T> = T | null
3 | 
4 | export * from './castTouchToMouseEvent'
5 | export * from './detectMouseButton'
6 | export * from './doObjectsCollide'
7 | export * from './getBoundsForNode'
8 | export * from './nodeInRoot'
9 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "git": {
 3 |     "tagName": "v${version}",
 4 |     "commitMessage": "Release v${version}",
 5 |     "changelog": "npx auto-changelog --stdout --commit-limit false -u --template ./changelog.hbs"
 6 |   },
 7 |   "github": {
 8 |     "release": true
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root                     = true
 2 | 
 3 | [*]
 4 | charset                  = utf-8
 5 | end_of_line              = lf
 6 | indent_size              = 2
 7 | indent_style             = space
 8 | insert_final_newline     = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-selectable-fast",
 3 |   "alias": "react-selectable-fast",
 4 |   "public": true,
 5 |   "version": 2,
 6 |   "builds": [
 7 |     {
 8 |       "src": "./build.sh",
 9 |       "use": "@now/static-build",
10 |       "config": { "distDir": "website" }
11 |     },
12 |     { "src": "./website/**", "use": "@now/static" }
13 |   ],
14 |   "routes": [{ "src": "/(.*)", "dest": "website/$1" }]
15 | }
16 | 


--------------------------------------------------------------------------------
/example/src/Label.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | type TLabelProps = {
 4 |   isSelecting: boolean
 5 |   isSelected: boolean
 6 | }
 7 | 
 8 | export function Label(props: TLabelProps) {
 9 |   const { isSelecting, isSelected } = props
10 | 
11 |   return (
12 |     <div className="card-label">
13 |       Selecting: <span>{`${isSelecting}`}</span>
14 |       <br />
15 |       Selected: <span>{`${isSelected}`}</span>
16 |     </div>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/SelectableGroup.context.ts:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { TSelectableGroupContext, TSelectableItem } from './Selectable.types'
 4 | import { noop } from './utils'
 5 | 
 6 | export const SelectableGroupContext = React.createContext<TSelectableGroupContext>({
 7 |   selectable: {
 8 |     register(_: TSelectableItem) {},
 9 |     unregister(_: TSelectableItem) {},
10 |     selectAll: noop,
11 |     clearSelection: noop,
12 |     getScrolledContainer: () => null,
13 |   },
14 | })
15 | 


--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node:lts
 6 |     working_directory: ~/repo
 7 |     steps:
 8 |       - checkout
 9 |       - restore_cache:
10 |           keys:
11 |             - v1-dependencies-{{ checksum "package.json" }}
12 |             - v1-dependencies-
13 |       - run: yarn install
14 |       - save_cache:
15 |           paths:
16 |             - node_modules
17 |           key: v1-dependencies-{{ checksum "package.json" }}
18 |       - run: yarn test
19 | 


--------------------------------------------------------------------------------
/example/webpack.config.example.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   devServer: {
 5 |     host: '0.0.0.0',
 6 |     disableHostCheck: true,
 7 |   },
 8 |   mode: 'development',
 9 |   devtool: 'eval',
10 |   entry: path.resolve(__dirname, './src/index.tsx'),
11 |   output: {
12 |     path: path.resolve(__dirname, '../website'),
13 |     publicPath: '',
14 |     filename: 'bundle.js',
15 |   },
16 |   module: {
17 |     rules: [
18 |       {
19 |         test: /\.(tsx|ts|js)$/,
20 |         loader: 'babel-loader',
21 |       },
22 |     ],
23 |   },
24 |   resolve: {
25 |     extensions: ['.ts', '.tsx', '.js'],
26 |   },
27 | }
28 | 


--------------------------------------------------------------------------------
/changelog.hbs:
--------------------------------------------------------------------------------
 1 | {{#each releases}}
 2 |   {{#if @first}}
 3 |     {{#if summary}}
 4 |       {{summary}}
 5 |     {{/if}}
 6 | 
 7 |     {{#if merges}}
 8 |       ### Merged
 9 | 
10 |       {{#each merges}}
11 |         - {{message}} {{#if href}}[`#{{id}}`]({{href}}){{/if}}
12 |       {{/each}}
13 |     {{/if}}
14 | 
15 |     {{#if fixes}}
16 |       ### Fixed
17 | 
18 |       {{#each fixes}}
19 |         - {{commit.subject}}{{#each fixes}} {{#if href}}[`#{{id}}`]({{href}}){{/if}}{{/each}}
20 |       {{/each}}
21 |     {{/if}}
22 | 
23 |     {{#commit-list commits heading='### Commits'}}
24 |       - {{#if breaking}}**Breaking change:** {{/if}}{{subject}} {{#if href}}[`{{shorthash}}`]({{href}}){{/if}}
25 |     {{/commit-list}}
26 | 
27 |   {{/if}}
28 | {{/each}}
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": false,
 4 |     "experimentalDecorators": true,
 5 |     "declaration": true,
 6 |     "jsx": "react",
 7 |     "lib": ["dom", "es2015", "esnext"],
 8 |     "module": "commonjs",
 9 |     "allowSyntheticDefaultImports": true,
10 |     "esModuleInterop": true,
11 |     "moduleResolution": "node",
12 |     "noImplicitAny": true,
13 |     "noUnusedLocals": true,
14 |     "noUnusedParameters": true,
15 |     "removeComments": true,
16 |     "downlevelIteration": true,
17 |     "sourceMap": true,
18 |     "strict": true,
19 |     "target": "es5",
20 |     "outDir": "./lib"
21 |   },
22 |   "include": ["src"],
23 |   "exclude": ["node_modules", "dist", "lib"],
24 |   "typeRoots": ["types", "node_modules/@types"]
25 | }
26 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | 
 4 | const env = process.env.NODE_ENV || 'development'
 5 | 
 6 | module.exports = {
 7 |   devtool: 'eval',
 8 |   mode: env,
 9 |   entry: path.resolve(__dirname, 'src', 'index.ts'),
10 |   output: {
11 |     path: path.resolve(__dirname, 'lib'),
12 |     filename: 'react-selectable-fast.js'
13 |   },
14 |   module: {
15 |     rules: [
16 |       {
17 |         test: /\.(js|ts|tsx)$/,
18 |         exclude: /node_modules/,
19 |         loader: 'babel-loader'
20 |       }
21 |     ]
22 |   },
23 |   resolve: {
24 |     extensions: ['.ts', '.tsx', '.js']
25 |   },
26 |   plugins: [
27 |     // new BundleAnalyzerPlugin(),
28 |     new webpack.DefinePlugin({
29 |       'process.env.NODE_ENV': JSON.stringify(env)
30 |     })
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Handle line endings automatically for files detected as text
 2 | # and leave all files detected as binary untouched.
 3 | * text=auto
 4 | 
 5 | # Never modify line endings of our bash scripts
 6 | *.sh -crlf
 7 | 
 8 | #
 9 | # The above will handle all files NOT found below
10 | #
11 | # These files are text and should be normalized (Convert crlf => lf)
12 | *.css           text
13 | *.html          text
14 | *.java          text
15 | *.js            text
16 | *.json          text
17 | *.properties    text
18 | *.txt           text
19 | *.xml           text
20 | *.scss          text
21 | 
22 | # These files are binary and should be left untouched
23 | # (binary is macro for -text -diff)
24 | *.class         binary
25 | *.jar           binary
26 | *.gif           binary
27 | *.jpg           binary
28 | *.png           binary
29 | 


--------------------------------------------------------------------------------
/example/src/Counters.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export class Counters extends Component {
 4 |   state = {
 5 |     selectedItems: [],
 6 |     selectingItems: [],
 7 |   }
 8 | 
 9 |   handleSelecting = selectingItems => {
10 |     if (selectingItems.length !== this.state.selectingItems.length) {
11 |       this.setState({ selectingItems })
12 |     }
13 |   }
14 | 
15 |   handleSelectionFinish = selectedItems => {
16 |     this.setState({
17 |       selectedItems,
18 |       selectingItems: [],
19 |     })
20 | 
21 |     console.log(`Finished selection ${selectedItems.length}`)
22 |   }
23 | 
24 |   render() {
25 |     const { selectedItems, selectingItems } = this.state
26 | 
27 |     return (
28 |       <p>
29 |         Selecting: <span className="counter">{selectingItems.length}</span>
30 |         <br />
31 |         Selected: <span className="counter">{selectedItems.length}</span>
32 |         <br />
33 |       </p>
34 |     )
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/example/src/List.tsx:
--------------------------------------------------------------------------------
 1 | import React, { memo } from 'react'
 2 | 
 3 | import { TAlbumItem } from './sample-data'
 4 | import { DeselectAll, SelectAll } from '../../src'
 5 | import { Card } from './Card'
 6 | 
 7 | type TListProps = {
 8 |   items: TAlbumItem[]
 9 | }
10 | 
11 | export const List = memo((props: TListProps) => {
12 |   const { items } = props
13 | 
14 |   return (
15 |     <div>
16 |       <p className="not-selectable">Press ESC to clear selection</p>
17 |       <div className="button-container">
18 |         <SelectAll component="button" type="button" className="btn">
19 |           Select all
20 |         </SelectAll>
21 |         <DeselectAll component="button" type="button" className="btn">
22 |           Clear selection
23 |         </DeselectAll>
24 |       </div>
25 |       <div className="albums">
26 |         {items.map(item => (
27 |           <Card key={item.year} player={item.player} year={item.year} />
28 |         ))}
29 |       </div>
30 |     </div>
31 |   )
32 | })
33 | 


--------------------------------------------------------------------------------
/example/src/sample-data.ts:
--------------------------------------------------------------------------------
 1 | const players = [
 2 |   'Michael Jordan',
 3 |   'Kobe Bryant',
 4 |   'Wilt Chamberlain',
 5 |   'Magic Johnson',
 6 |   'Kareem Abdul-Jabbar',
 7 |   'Kevin Durant',
 8 |   'Tim Duncan',
 9 |   'Larry Bird',
10 |   'Shaquille ONeal',
11 |   'Jerry West',
12 |   'Moses Malone',
13 |   'Karl Malone',
14 |   'Julius Erving',
15 |   'Kevin Garnett',
16 |   'Charles Barkley',
17 |   'Dirk Nowitzki',
18 |   'Scottie Pippen',
19 |   'Dwyane Wade',
20 |   'David Robinson',
21 |   'Stephen Curry',
22 |   'Vince Carter',
23 |   'Clyde Drexler',
24 |   'Patrick Ewing',
25 |   'Steve Nash',
26 |   'Jason Kidd',
27 |   'Allen Iverson',
28 |   'Paul Pierce',
29 |   'Gary Payton',
30 |   'Ray Allen',
31 |   'Dwight Howard',
32 |   'Chris Paul',
33 | ]
34 | 
35 | export type TAlbumItem = {
36 |   player: string
37 |   year: number
38 | }
39 | 
40 | export const items = Array.from({ length: 500 }).map((_, index) => ({
41 |   year: index + 1,
42 |   player: players[index % players.length],
43 | }))
44 | 


--------------------------------------------------------------------------------
/example/src/Card.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { createSelectable, TSelectableItemProps } from '../../src'
 4 | import { Label } from './Label'
 5 | 
 6 | type TAlbumProps = {
 7 |   player: string
 8 |   year: number
 9 | }
10 | 
11 | const DISABLED_CARD_YEARS = [10, 22, 27, 54, 82, 105, 150]
12 | 
13 | export const Card = createSelectable<TAlbumProps>((props: TSelectableItemProps & TAlbumProps) => {
14 |   const { selectableRef, isSelected, isSelecting, player, year } = props
15 | 
16 |   const classNames = [
17 |     'item',
18 |     DISABLED_CARD_YEARS.includes(year) && 'not-selectable',
19 |     isSelecting && 'selecting',
20 |     isSelected && 'selected',
21 |   ]
22 |     .filter(Boolean)
23 |     .join(' ')
24 | 
25 |   return (
26 |     <div ref={selectableRef} className={classNames}>
27 |       <div className="tick">+</div>
28 |       <h2>{player}</h2>
29 |       <small>{year}</small>
30 |       <Label isSelected={isSelected} isSelecting={isSelecting} />
31 |     </div>
32 |   )
33 | })
34 | 


--------------------------------------------------------------------------------
/src/Selectable.types.ts:
--------------------------------------------------------------------------------
 1 | import { Maybe, TComputedBounds, TGetBoundsForNodeArgs } from './utils'
 2 | 
 3 | type TSelectableContext = {
 4 |   register(selectableItem: TSelectableItem): void
 5 |   unregister(selectableItem: TSelectableItem): void
 6 |   selectAll(): void
 7 |   clearSelection(): void
 8 |   getScrolledContainer(): Maybe<HTMLElement>
 9 | }
10 | 
11 | export type TSelectableGroupContext = {
12 |   selectable: TSelectableContext
13 | }
14 | 
15 | export type TSelectableItemState = {
16 |   isSelected: boolean
17 |   isSelecting: boolean
18 | }
19 | 
20 | export type TSelectableItem = {
21 |   updateBounds(containerScroll?: TGetBoundsForNodeArgs): void
22 |   registerSelectable(containerScroll?: TGetBoundsForNodeArgs): void
23 |   setState(state: any): void
24 |   state: TSelectableItemState
25 |   deselected: boolean
26 |   node: Maybe<HTMLElement>
27 |   bounds: Maybe<TComputedBounds[]>
28 | }
29 | 
30 | export type TSelectableItemProps = TSelectableItemState & {
31 |   selectableRef(node: HTMLElement | null): void
32 | }
33 | 


--------------------------------------------------------------------------------
/src/utils/detectMouseButton.ts:
--------------------------------------------------------------------------------
 1 | import { MouseEvent } from 'react'
 2 | 
 3 | type TDetectMouseButtonOptions = {
 4 |   allowAltClick?: boolean
 5 |   allowCtrlClick?: boolean
 6 |   allowMetaClick?: boolean
 7 |   allowShiftClick?: boolean
 8 | }
 9 | 
10 | /**
11 |  * @buttonNumber
12 |  * 1: Left button
13 |  * 2: Middle/Right button
14 |  * 3: Right/Back button
15 |  */
16 | export function detectMouseButton(
17 |   evt: MouseEvent<HTMLElement>,
18 |   buttonNumber = 1,
19 |   options: TDetectMouseButtonOptions = {}
20 | ) {
21 |   if (
22 |     (evt.metaKey && !options.allowMetaClick) ||
23 |     (evt.ctrlKey && !options.allowCtrlClick) ||
24 |     (evt.altKey && !options.allowAltClick) ||
25 |     (evt.shiftKey && !options.allowShiftClick)
26 |   ) {
27 |     return false
28 |   }
29 | 
30 |   if ('buttons' in evt) {
31 |     return evt.buttons === buttonNumber
32 |   }
33 | 
34 |   if ('which' in evt) {
35 |     return (evt as KeyboardEvent).which === buttonNumber
36 |   }
37 | 
38 |   return (evt as MouseEvent).button === buttonNumber - 1
39 | }
40 | 


--------------------------------------------------------------------------------
/src/utils/castTouchToMouseEvent.ts:
--------------------------------------------------------------------------------
 1 | import { MouseEvent } from 'react'
 2 | 
 3 | const propertiesToNormalize = ['pageX', 'pageY', 'clientX', 'clientY']
 4 | 
 5 | function patchEventProperties(evt: any, touchKey: string) {
 6 |   propertiesToNormalize.forEach(key => {
 7 |     if (typeof evt[key] === 'undefined') {
 8 |       evt[key] = evt[touchKey][0][key]
 9 |     }
10 |   })
11 | }
12 | 
13 | /**
14 |  * Used to return event object with desktop (non-touch) format of event
15 |  * coordinates, regardless of whether the action is from mobile or desktop.
16 |  */
17 | export function castTouchToMouseEvent(evt: any): MouseEvent<HTMLElement> {
18 |   if (evt.type.includes('mouse')) {
19 |     return evt
20 |   }
21 | 
22 |   try {
23 |     if (evt.type === 'touchstart') {
24 |       patchEventProperties(evt, 'targetTouches')
25 |     } else if (evt.type === 'touchmove') {
26 |       patchEventProperties(evt, 'changedTouches')
27 |     }
28 |   } catch (err) {
29 |     console.error(err.message)
30 |   }
31 | 
32 |   return evt as MouseEvent<HTMLElement>
33 | }
34 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { SelectableGroup } from './SelectableGroup'
 2 | import { createSelectable } from './CreateSelectable'
 3 | import { SelectAll } from './SelectAll'
 4 | import { DeselectAll } from './DeselectAll'
 5 | import { TSelectableItemProps } from './Selectable.types'
 6 | 
 7 | // As early as possible, check for the existence of the JavaScript globals which
 8 | // package Runtime relies upon, and produce a clear message if they do not exist.
 9 | if (process.env.NODE_ENV === 'development') {
10 |   if (
11 |     typeof Map !== 'function' ||
12 |     typeof Set !== 'function' ||
13 |     typeof Array.from !== 'function' ||
14 |     typeof Array.isArray !== 'function' ||
15 |     typeof Object.assign !== 'function'
16 |   ) {
17 |     throw new Error(`
18 |       React-Selectable-Fast requires Map, Set, Array.from,
19 |       Array.isArray, and Object.assign to exist.
20 |       Use a polyfill to provide these for older browsers.
21 |     `)
22 |   }
23 | }
24 | 
25 | export { TSelectableItemProps, SelectableGroup, createSelectable, SelectAll, DeselectAll }
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2020 valerybugakov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 4 | 
 5 | const env = process.env.NODE_ENV || 'production'
 6 | 
 7 | module.exports = {
 8 |   devtool: 'source-map',
 9 |   mode: env,
10 |   entry: path.resolve(__dirname, 'src', 'index.ts'),
11 |   externals: {
12 |     react: {
13 |       root: 'React',
14 |       commonjs2: 'react',
15 |       commonjs: 'react',
16 |       amd: 'react',
17 |     },
18 |   },
19 |   output: {
20 |     path: path.resolve(__dirname, 'dist'),
21 |     publicPath: '',
22 |     filename: 'react-selectable-fast.js',
23 |     library: 'React-Selectable-Fast',
24 |     libraryTarget: 'umd',
25 |   },
26 |   module: {
27 |     rules: [
28 |       {
29 |         test: /\.(js|ts|tsx)$/,
30 |         exclude: /node_modules/,
31 |         loader: 'babel-loader',
32 |       },
33 |     ],
34 |   },
35 |   resolve: {
36 |     extensions: ['.ts', '.tsx', '.js'],
37 |   },
38 |   plugins: [
39 |     // new BundleAnalyzerPlugin(),
40 |     new webpack.DefinePlugin({
41 |       'process.env.NODE_ENV': JSON.stringify(env),
42 |     }),
43 |   ],
44 | }
45 | 


--------------------------------------------------------------------------------
/src/SelectAll.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, ReactNode, FunctionComponent } from 'react'
 2 | 
 3 | import { SelectableGroupContext } from './SelectableGroup.context'
 4 | 
 5 | type TSelectAllProps = {
 6 |   children: ReactNode
 7 |   component?: string | FunctionComponent
 8 |   className?: string
 9 |   [key: string]: any
10 | }
11 | 
12 | export class SelectAll extends Component<TSelectAllProps> {
13 |   static contextType = SelectableGroupContext
14 | 
15 |   root: HTMLDivElement | null = null
16 | 
17 |   componentDidMount() {
18 |     this.root!.addEventListener('mousedown', (evt: Event) => evt.stopPropagation())
19 |   }
20 | 
21 |   getRootRef = (ref: HTMLDivElement | null) => {
22 |     this.root = ref
23 |   }
24 | 
25 |   render() {
26 |     const { component = 'div', children, className = '', ...rest } = this.props
27 |     const ButtonComponent = component as FunctionComponent<any>
28 | 
29 |     return (
30 |       <ButtonComponent
31 |         ref={this.getRootRef}
32 |         className={`selectable-select-all ${className}`}
33 |         onClick={this.context.selectable.selectAll}
34 |         {...rest}
35 |       >
36 |         {children}
37 |       </ButtonComponent>
38 |     )
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/DeselectAll.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, FunctionComponent, ReactNode } from 'react'
 2 | 
 3 | import { SelectableGroupContext } from './SelectableGroup.context'
 4 | 
 5 | type TDeselectAllProps = {
 6 |   children: ReactNode
 7 |   component?: string | FunctionComponent
 8 |   className?: string
 9 |   [key: string]: any
10 | }
11 | 
12 | export class DeselectAll extends Component<TDeselectAllProps> {
13 |   static contextType = SelectableGroupContext
14 | 
15 |   root: HTMLDivElement | null = null
16 | 
17 |   componentDidMount() {
18 |     this.root!.addEventListener('mousedown', (evt: Event) => evt.stopPropagation())
19 |   }
20 | 
21 |   getRootRef = (ref: HTMLDivElement | null) => {
22 |     this.root = ref
23 |   }
24 | 
25 |   render() {
26 |     const { component = 'div', children, className, ...rest } = this.props
27 |     const ButtonComponent = component as FunctionComponent<any>
28 | 
29 |     return (
30 |       <ButtonComponent
31 |         ref={this.getRootRef}
32 |         className={`selectable-select-all ${className}`}
33 |         onClick={this.context.selectable.clearSelection}
34 |         {...rest}
35 |       >
36 |         {children}
37 |       </ButtonComponent>
38 |     )
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/Selectbox.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, CSSProperties } from 'react'
 2 | 
 3 | export type TSetSelectboxState = React.Dispatch<React.SetStateAction<TSelectboxState>>
 4 | 
 5 | export type TSelectboxProps = {
 6 |   fixedPosition: boolean
 7 |   className: string
 8 |   getSetState(setState: TSetSelectboxState): void
 9 | }
10 | 
11 | export type TSelectboxState = {
12 |   y: number
13 |   x: number
14 |   width: number
15 |   height: number
16 | }
17 | 
18 | const initialState: TSelectboxState = {
19 |   y: 0,
20 |   x: 0,
21 |   width: 0,
22 |   height: 0,
23 | }
24 | 
25 | export function Selectbox(props: TSelectboxProps) {
26 |   const { fixedPosition, getSetState, className } = props
27 |   const [state, setState] = useState(initialState)
28 | 
29 |   useEffect(() => {
30 |     getSetState(setState)
31 |   }, [])
32 | 
33 |   const boxStyle: CSSProperties = {
34 |     left: state.x,
35 |     top: state.y,
36 |     width: state.width,
37 |     height: state.height,
38 |     zIndex: 9000,
39 |     position: fixedPosition ? 'fixed' : 'absolute',
40 |     cursor: 'default',
41 |     willChange: 'transform',
42 |     transform: 'translateZ(0)',
43 |   }
44 | 
45 |   return <div className={className} style={boxStyle} />
46 | }
47 | 
48 | Selectbox.defaultProps = {
49 |   className: 'selectable-selectbox',
50 | }
51 | 


--------------------------------------------------------------------------------
/src/utils/getBoundsForNode.ts:
--------------------------------------------------------------------------------
 1 | export type TGetBoundsForNodeArgs = {
 2 |   scrollTop: number
 3 |   scrollLeft: number
 4 | }
 5 | 
 6 | export type TComputedBounds = {
 7 |   top: number
 8 |   left: number
 9 |   width: number
10 |   height: number
11 |   offsetWidth: number
12 |   offsetHeight: number
13 | }
14 | 
15 | export function getDocumentScroll() {
16 |   const documentScrollTop = Math.max(
17 |     window.pageYOffset,
18 |     document.documentElement.scrollTop,
19 |     document.body.scrollTop
20 |   )
21 | 
22 |   const documentScrollLeft = Math.max(
23 |     window.pageXOffset,
24 |     document.documentElement.scrollLeft,
25 |     document.body.scrollLeft
26 |   )
27 | 
28 |   return { documentScrollTop, documentScrollLeft }
29 | }
30 | 
31 | /**
32 |  * Given a node, get everything needed to calculate its boundaries
33 |  */
34 | export function getBoundsForNode(
35 |   node: HTMLElement,
36 |   containerScroll: TGetBoundsForNodeArgs = { scrollTop: 0, scrollLeft: 0 }
37 | ): TComputedBounds[] {
38 |   const { scrollTop, scrollLeft } = containerScroll
39 | 
40 |   return Array.from(node.getClientRects()).map(rect => ({
41 |     top: rect.top + scrollTop,
42 |     left: rect.left + scrollLeft,
43 |     offsetWidth: node.offsetWidth,
44 |     offsetHeight: node.offsetHeight,
45 |     width: rect.width,
46 |     height: rect.height,
47 |   }))
48 | }
49 | 


--------------------------------------------------------------------------------
/src/CreateSelectable.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Component, ComponentType } from 'react'
 2 | 
 3 | import { getBoundsForNode, TComputedBounds, TGetBoundsForNodeArgs } from './utils'
 4 | import { TSelectableItemState, TSelectableItemProps } from './Selectable.types'
 5 | import { SelectableGroupContext } from './SelectableGroup.context'
 6 | 
 7 | type TAddedProps = Partial<Pick<TSelectableItemProps, 'isSelected'>>
 8 | 
 9 | export const createSelectable = <T extends any>(
10 |   WrappedComponent: ComponentType<TSelectableItemProps & T>
11 | ): ComponentType<T & TAddedProps> =>
12 |   class SelectableItem extends Component<T & TAddedProps, TSelectableItemState> {
13 |     static contextType = SelectableGroupContext
14 | 
15 |     static defaultProps = {
16 |       isSelected: false,
17 |     }
18 | 
19 |     state = {
20 |       isSelected: this.props.isSelected,
21 |       isSelecting: false,
22 |     }
23 | 
24 |     node: HTMLElement | null = null
25 | 
26 |     bounds: TComputedBounds[] | null = null
27 | 
28 |     componentDidMount() {
29 |       this.updateBounds()
30 |       this.context.selectable.register(this)
31 |     }
32 | 
33 |     componentWillUnmount() {
34 |       this.context.selectable.unregister(this)
35 |     }
36 | 
37 |     updateBounds = (containerScroll?: TGetBoundsForNodeArgs) => {
38 |       this.bounds = getBoundsForNode(this.node!, containerScroll)
39 |     }
40 | 
41 |     getSelectableRef = (ref: HTMLElement | null) => {
42 |       this.node = ref
43 |     }
44 | 
45 |     render() {
46 |       return (
47 |         <WrappedComponent {...this.props} {...this.state} selectableRef={this.getSelectableRef} />
48 |       )
49 |     }
50 |   }
51 | 


--------------------------------------------------------------------------------
/src/utils/doObjectsCollide.ts:
--------------------------------------------------------------------------------
 1 | import { TComputedBounds } from './getBoundsForNode'
 2 | 
 3 | type TAreBoundsCollideOptions = {
 4 |   tolerance?: number
 5 |   useOffsetSize?: boolean
 6 | }
 7 | 
 8 | /**
 9 |  * Given offsets, widths, and heights of two objects, determine if they collide (overlap).
10 |  */
11 | const areBoundsCollide = (
12 |   a: TComputedBounds,
13 |   b: TComputedBounds,
14 |   { tolerance = 0, useOffsetSize = false }: TAreBoundsCollideOptions
15 | ) => {
16 |   const aHeight = useOffsetSize ? a.offsetHeight : a.height
17 |   const bHeight = useOffsetSize ? b.offsetHeight : b.height
18 | 
19 |   const aWidth = useOffsetSize ? a.offsetWidth : a.width
20 |   const bWidth = useOffsetSize ? b.offsetWidth : b.width
21 | 
22 |   return !(
23 |     a.top + aHeight - tolerance < b.top ||
24 |     // 'a' top doesn't touch 'b' bottom
25 |     a.top + tolerance > b.top + bHeight ||
26 |     // 'a' right doesn't touch 'b' left
27 |     a.left + aWidth - tolerance < b.left ||
28 |     // 'a' left doesn't touch 'b' right
29 |     a.left + tolerance > b.left + bWidth
30 |   )
31 | }
32 | 
33 | function toArray(value: any) {
34 |   if (Array.isArray(value)) {
35 |     return value
36 |   }
37 | 
38 |   return [value]
39 | }
40 | 
41 | /**
42 |  * Given two objects containing "top", "left", "offsetWidth" and "offsetHeight"
43 |  * properties, determine if they collide.
44 |  */
45 | export function doObjectsCollide(
46 |   a: TComputedBounds | TComputedBounds[],
47 |   b: TComputedBounds | TComputedBounds[],
48 |   tolerance = 0,
49 |   delta = 1
50 | ) {
51 |   const aBounds = toArray(a)
52 |   const bBounds = toArray(b)
53 | 
54 |   for (let i = 0; i < aBounds.length; i++) {
55 |     for (let j = 0; j < bBounds.length; j++) {
56 |       return areBoundsCollide(aBounds[i], bBounds[j], { tolerance, useOffsetSize: delta === 1 })
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/website/css/main.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   padding: 0 10px;
  3 |   border: 1px dotted #969896;
  4 |   border-radius: 0.3rem;
  5 |   overflow: hidden;
  6 |   height: 80vh;
  7 |   overflow: scroll;
  8 |   position: relative;
  9 | }
 10 | 
 11 | .selectable-selectbox {
 12 |   z-index: 9000;
 13 |   position: absolute;
 14 |   cursor: default;
 15 |   background: none;
 16 |   border: 1px dashed grey;
 17 | }
 18 | 
 19 | .albums {
 20 |   display: flex;
 21 |   justify-content: space-between;
 22 |   flex-wrap: wrap;
 23 |   /* extra items per row to test horizontal scroll handler */
 24 |   width: calc(150px * 10);
 25 | }
 26 | 
 27 | .card-label {
 28 |   display: block;
 29 |   margin: 5px 0;
 30 |   font-size: 12px;
 31 | }
 32 | 
 33 | .card-label > span {
 34 |   font-weight: 600;
 35 | }
 36 | 
 37 | .item {
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   justify-content: space-between;
 41 |   position: relative;
 42 |   width: 145px;
 43 |   min-height: 125px;
 44 |   margin: 2px;
 45 |   float: left;
 46 |   text-align: center;
 47 |   border: 1px solid #ccc;
 48 |   padding: 10px;
 49 |   border-radius: 0.3rem;
 50 | }
 51 | 
 52 | .item.not-selectable {
 53 |   background: #819198;
 54 |   color: white;
 55 | }
 56 | 
 57 | .item .tick {
 58 |   position: absolute;
 59 |   top: 0;
 60 |   right: 0;
 61 |   font-size: 10px;
 62 |   color: #5f6c70;
 63 |   font-weight: bold;
 64 |   cursor: pointer;
 65 |   padding: 6px;
 66 |   line-height: 7px;
 67 | }
 68 | 
 69 | .item h2 {
 70 |   font-size: 14px;
 71 |   margin-top: 0;
 72 |   margin-bottom: 0;
 73 |   color: inherit;
 74 |   font-weight: 600;
 75 | }
 76 | 
 77 | .item.selected {
 78 |   background: #177779;
 79 |   color: white;
 80 |   border-color: #206748;
 81 | }
 82 | 
 83 | .item.not-selectable .tick,
 84 | .item.selected .tick {
 85 |   color: white;
 86 | }
 87 | 
 88 | .item.selecting {
 89 |   border: 1px solid #177779;
 90 | }
 91 | 
 92 | .main p.not-selectable {
 93 |   margin: 10px 0 10px 2px;
 94 | }
 95 | 
 96 | .counter {
 97 |   color: #009688;
 98 | }
 99 | 
100 | .selectable-button {
101 |   display: inline-block;
102 |   margin: 0 3px 10px 3px;
103 | }
104 | 
105 | .in-selection-mode .item {
106 |   cursor: pointer;
107 | }
108 | 
109 | button.btn {
110 |   outline: none;
111 |   border-color: #169956;
112 |   color: #169956;
113 |   padding: 5px 10px;
114 | }
115 | 
116 | button.btn:hover {
117 |   color: #177779;
118 |   border-color: #177779;
119 | }
120 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import React, { createRef, Component } from 'react'
  2 | 
  3 | import { TAlbumItem } from './sample-data'
  4 | import { SelectableGroup } from '../../src'
  5 | import { Counters } from './Counters'
  6 | import { List } from './List'
  7 | 
  8 | type TAppProps = {
  9 |   items: TAlbumItem[]
 10 | }
 11 | 
 12 | type TAppState = {
 13 |   disableFirstRow: boolean
 14 |   reversed: boolean
 15 |   showSelectableGroup: boolean
 16 | }
 17 | 
 18 | class App extends Component<TAppProps, TAppState> {
 19 |   state = {
 20 |     disableFirstRow: false,
 21 |     reversed: false,
 22 |     showSelectableGroup: true,
 23 |   }
 24 | 
 25 |   countersRef = createRef<Counters>()
 26 | 
 27 |   getSelectableGroupRef = (ref: SelectableGroup | null) => {
 28 |     ;(window as any).selectableGroup = ref
 29 |   }
 30 | 
 31 |   toggleFirstRow = () => {
 32 |     this.setState(state => ({ disableFirstRow: !state.disableFirstRow }))
 33 |   }
 34 | 
 35 |   toggleOrder = () => {
 36 |     this.setState(state => ({ reversed: !state.reversed }))
 37 |   }
 38 | 
 39 |   toggleSelectableGroup = () => {
 40 |     this.setState(state => ({
 41 |       showSelectableGroup: !state.showSelectableGroup,
 42 |     }))
 43 |   }
 44 | 
 45 |   handleSelecting = (selectingItems: TAlbumItem) => {
 46 |     this.countersRef.current.handleSelecting(selectingItems)
 47 |   }
 48 | 
 49 |   handleSelectionFinish = selectedItems => {
 50 |     console.log('Handle selection finish', selectedItems.length)
 51 |     this.countersRef.current.handleSelectionFinish(selectedItems)
 52 |   }
 53 | 
 54 |   handleSelectedItemUnmount = (_unmountedItem, selectedItems) => {
 55 |     console.log('hadneleSelectedItemUnmount')
 56 |     this.countersRef.current.handleSelectionFinish(selectedItems)
 57 |   }
 58 | 
 59 |   handleSelectionClear() {
 60 |     console.log('Cancel selection')
 61 |   }
 62 | 
 63 |   render() {
 64 |     const { items } = this.props
 65 |     const { disableFirstRow, reversed, showSelectableGroup } = this.state
 66 | 
 67 |     const itemsToRender = disableFirstRow ? items.slice(5) : items
 68 |     const orderedItems = reversed ? itemsToRender.slice().reverse() : itemsToRender
 69 | 
 70 |     return (
 71 |       <div>
 72 |         <Counters ref={this.countersRef} />
 73 |         <button className="btn" type="button" onClick={this.toggleFirstRow}>
 74 |           Toggle first row
 75 |         </button>
 76 |         <button className="btn" type="button" onClick={this.toggleOrder}>
 77 |           Toggle order
 78 |         </button>
 79 |         <button className="btn" type="button" onClick={this.toggleSelectableGroup}>
 80 |           Toggle group
 81 |         </button>
 82 |         {showSelectableGroup && (
 83 |           <SelectableGroup
 84 |             ref={this.getSelectableGroupRef}
 85 |             className="main"
 86 |             clickClassName="tick"
 87 |             enableDeselect={true}
 88 |             tolerance={0}
 89 |             deselectOnEsc={true}
 90 |             allowClickWithoutSelected={false}
 91 |             duringSelection={this.handleSelecting}
 92 |             onSelectionClear={this.handleSelectionClear}
 93 |             onSelectionFinish={this.handleSelectionFinish}
 94 |             onSelectedItemUnmount={this.handleSelectedItemUnmount}
 95 |             ignoreList={['.not-selectable']}
 96 |           >
 97 |             <List items={orderedItems} />
 98 |           </SelectableGroup>
 99 |         )}
100 |       </div>
101 |     )
102 |   }
103 | }
104 | 
105 | export default App
106 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-selectable-fast",
  3 |   "version": "3.4.0",
  4 |   "description": "Enable other React components to be selectable by drawing a box with your mouse/touch",
  5 |   "repository": {
  6 |     "type": "git",
  7 |     "url": "git://github.com/valerybugakov/react-selectable-fast.git"
  8 |   },
  9 |   "main": "lib/index.js",
 10 |   "scripts": {
 11 |     "clean": "rimraf ./lib ./dist",
 12 |     "watch": "webpack --watch",
 13 |     "build": "webpack",
 14 |     "transpile": "tsc",
 15 |     "build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
 16 |     "prepublishOnly": "yarn lint && yarn clean && yarn build:prod && yarn transpile",
 17 |     "prettier": "prettier --write src/**/*.{ts,tsx} example/src/**/*.{ts,tsx}",
 18 |     "lint:basic": "tsc --pretty --noEmit && eslint --fix --format codeframe",
 19 |     "lint": "yarn lint:basic '{example/,}src/**/*.{ts,tsx}'",
 20 |     "format": "yarn prettier && yarn lint",
 21 |     "test": "yarn lint",
 22 |     "release": "release-it",
 23 |     "watch:example": "webpack-dev-server --config ./example/webpack.config.example.js --content-base website",
 24 |     "build:example": "webpack --config ./example/webpack.config.example.js --mode production"
 25 |   },
 26 |   "lint-staged": {
 27 |     "*.{js,ts,tsx}": [
 28 |       "prettier --write",
 29 |       "yarn lint:basic"
 30 |     ]
 31 |   },
 32 |   "husky": {
 33 |     "hooks": {
 34 |       "pre-commit": "lint-staged"
 35 |     }
 36 |   },
 37 |   "bugs": {
 38 |     "url": "https://github.com/valerybugakov/react-selectable-fast/issues"
 39 |   },
 40 |   "engines": {
 41 |     "node": ">8.0.0"
 42 |   },
 43 |   "keywords": [
 44 |     "selectable",
 45 |     "selection",
 46 |     "mouse",
 47 |     "fast",
 48 |     "scrollable",
 49 |     "performance",
 50 |     "drag",
 51 |     "touch",
 52 |     "react"
 53 |   ],
 54 |   "author": "Valery Bugakov <skymk1@gmail.com> (https://github.com/valerybugakov/)",
 55 |   "contributors": [
 56 |     "Valery Bugakov <skymk1@gmail.com> (https://github.com/valerybugakov/)"
 57 |   ],
 58 |   "license": "MIT",
 59 |   "files": [
 60 |     "lib",
 61 |     "dist"
 62 |   ],
 63 |   "homepage": "https://github.com/valerybugakov/react-selectable-fast#readme",
 64 |   "directories": {
 65 |     "example": "example"
 66 |   },
 67 |   "peerDependencies": {
 68 |     "react": ">=16.6.0",
 69 |     "react-dom": ">=16.6.0"
 70 |   },
 71 |   "devDependencies": {
 72 |     "@babel/cli": "^7.8.4",
 73 |     "@babel/core": "^7.9.0",
 74 |     "@babel/plugin-proposal-class-properties": "^7.8.3",
 75 |     "@babel/preset-env": "^7.9.5",
 76 |     "@babel/preset-react": "^7.9.4",
 77 |     "@babel/preset-typescript": "^7.9.0",
 78 |     "@types/react": "^16.9.6",
 79 |     "@types/react-dom": "^16.9.6",
 80 |     "@typescript-eslint/eslint-plugin": "^2.27.0",
 81 |     "@typescript-eslint/parser": "^2.27.0",
 82 |     "babel-loader": "^8.1.0",
 83 |     "cross-env": "^7.0.2",
 84 |     "eslint": "6.8.0",
 85 |     "eslint-config-airbnb": "18.1.0",
 86 |     "eslint-config-prettier": "^6.10.1",
 87 |     "eslint-plugin-import": "^2.20.2",
 88 |     "eslint-plugin-jsx-a11y": "^6.2.3",
 89 |     "eslint-plugin-prettier": "^3.1.1",
 90 |     "eslint-plugin-react": "^7.19.0",
 91 |     "eslint-plugin-react-hooks": "^3.0.0",
 92 |     "husky": "^4.2.5",
 93 |     "lint-staged": "^10.1.3",
 94 |     "prettier": "^2.0.4",
 95 |     "react": "^16.13.1",
 96 |     "react-dom": "^16.13.1",
 97 |     "release-it": "^13.5.2",
 98 |     "rimraf": "^3.0.2",
 99 |     "typescript": "^3.8.3",
100 |     "webpack": "^4.42.1",
101 |     "webpack-bundle-analyzer": "^3.6.1",
102 |     "webpack-cli": "^3.3.11",
103 |     "webpack-dev-server": "^3.10.3"
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | 
  3 | module.exports = {
  4 |   extends: [
  5 |     'airbnb',
  6 |     'plugin:@typescript-eslint/eslint-recommended',
  7 |     'plugin:@typescript-eslint/recommended',
  8 |     'plugin:@typescript-eslint/recommended-requiring-type-checking',
  9 |     'prettier',
 10 |     'prettier/react',
 11 |     'prettier/@typescript-eslint',
 12 |   ],
 13 |   env: {
 14 |     browser: true,
 15 |     es6: true,
 16 |   },
 17 |   parser: '@typescript-eslint/parser',
 18 |   parserOptions: {
 19 |     project: path.resolve(__dirname, './tsconfig.test.json'),
 20 |     sourceType: 'module',
 21 |   },
 22 |   settings: {
 23 |     'import/resolver': {
 24 |       node: {
 25 |         extensions: ['.js', '.jsx', '.ts', '.tsx'],
 26 |       },
 27 |     },
 28 |   },
 29 |   ignorePatterns: ['/generated.tsx', 'node_modules/'],
 30 |   plugins: ['prettier', '@typescript-eslint'],
 31 |   rules: {
 32 |     'prettier/prettier': 'off',
 33 |     '@typescript-eslint/no-explicit-any': 'off',
 34 |     '@typescript-eslint/no-use-before-define': 'off',
 35 |     '@typescript-eslint/no-non-null-assertion': 'off',
 36 |     '@typescript-eslint/explicit-function-return-type': 'off',
 37 |     '@typescript-eslint/interface-name-prefix': 'off',
 38 |     '@typescript-eslint/class-name-casing': 'error',
 39 |     '@typescript-eslint/camelcase': 'off',
 40 |     '@typescript-eslint/indent': 'off',
 41 |     '@typescript-eslint/no-param-reassign': 'off',
 42 |     '@typescript-eslint/no-this-alias': 'error',
 43 |     '@typescript-eslint/quotes': 'off',
 44 |     '@typescript-eslint/space-within-parens': ['off', 'never'],
 45 |     '@typescript-eslint/type-annotation-spacing': 'off',
 46 |     '@typescript-eslint/ban-ts-ignore': 'off',
 47 |     '@typescript-eslint/prefer-regexp-exec': 'off',
 48 |     '@typescript-eslint/no-var-requires': 'off',
 49 |     '@typescript-eslint/unbound-method': 'off',
 50 |     '@typescript-eslint/no-empty-function': 'off',
 51 |     'no-unused-vars': 'off',
 52 |     '@typescript-eslint/no-unused-vars': [
 53 |       'error',
 54 |       {
 55 |         vars: 'all',
 56 |         args: 'after-used',
 57 |         argsIgnorePattern: '^_',
 58 |         ignoreRestSiblings: false,
 59 |         ignoreRestSiblings: true,
 60 |         caughtErrorsIgnorePattern: '^ignore',
 61 |       },
 62 |     ],
 63 |     'arrow-parens': ['off', 'as-needed'],
 64 |     camelcase: 'off',
 65 |     'capitalized-comments': 'error',
 66 |     'consistent-return': 'off',
 67 |     'class-methods-use-this': 'off',
 68 |     'eol-last': 'off',
 69 |     eqeqeq: ['error', 'smart'],
 70 |     'id-blacklist': 'off',
 71 |     'id-match': 'error',
 72 |     'global-require': 'off',
 73 |     'linebreak-style': 'off',
 74 |     'new-parens': 'off',
 75 |     'newline-per-chained-call': 'off',
 76 |     'no-var': 'error',
 77 |     'no-bitwise': 'off',
 78 |     'no-eval': 'error',
 79 |     'no-empty': 'off',
 80 |     'no-plusplus': 'off',
 81 |     'no-console': 'off',
 82 |     'no-cond-assign': 'off',
 83 |     'no-new-wrappers': 'error',
 84 |     'no-param-reassign': 'off',
 85 |     'no-underscore-dangle': 'off',
 86 |     'no-restricted-syntax': 'off',
 87 |     'no-prototype-builtins': 'off',
 88 |     'no-duplicate-imports': 'error',
 89 |     'no-useless-constructor': 'off',
 90 |     'object-shorthand': 'error',
 91 |     'one-var': ['error', 'never'],
 92 |     'padding-line-between-statements': [
 93 |       'error',
 94 |       {
 95 |         blankLine: 'always',
 96 |         prev: '*',
 97 |         next: 'return',
 98 |       },
 99 |     ],
100 |     'prefer-const': 'error',
101 |     'prefer-template': 'error',
102 |     'quote-props': 'off',
103 |     radix: 'off',
104 |     'space-before-function-paren': 'off',
105 |     'spaced-comment': 'error',
106 | 
107 |     'import/order': 'error',
108 |     'import/extensions': 'off',
109 |     'import/no-unresolved': 'off',
110 |     'import/no-extraneous-dependencies': 'off',
111 |     'import/prefer-default-export': 'off',
112 |     'import/no-dynamic-require': 'off',
113 | 
114 |     'react/jsx-key': 'error',
115 |     'react/jsx-no-bind': 'error',
116 |     'react/self-closing-comp': 'error',
117 |     'react/state-in-constructor': 'off',
118 |     'react/jsx-props-no-spreading': 'off',
119 |     'react/no-did-update-set-state': 'off',
120 |     'react/prefer-stateless-function': 'off',
121 |     'react/destructuring-assignment': 'off',
122 |     'react/jsx-one-expression-per-line': 'off',
123 |     'react/jsx-boolean-value': ['error', 'always'],
124 |     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
125 |     'react/jsx-no-bind': 'off',
126 |     'react/no-unescaped-entities': 'off',
127 |     'react/static-property-placement': 'off',
128 |     'react/prop-types': 'off',
129 |     'react/sort-comp': [
130 |       'error',
131 |       {
132 |         order: [
133 |           'static-variables',
134 |           'static-methods',
135 |           'instance-variables',
136 |           'type-annotations',
137 |           'lifecycle',
138 |           'everything-else',
139 |           '/^on.+$/',
140 |           '/^handle.+$/',
141 |           'rendering',
142 |         ],
143 |         groups: {
144 |           rendering: ['/^render.+$/', 'render'],
145 |         },
146 |       },
147 |     ],
148 | 
149 |     'jsx-a11y/anchor-is-valid': 'off',
150 |     'jsx-a11y/alt-text': 'off',
151 |   },
152 | }
153 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-selectable-fast ![npm](https://img.shields.io/npm/v/react-selectable-fast.svg) ![license](https://img.shields.io/npm/l/react-selectable-fast.svg)
  2 | 
  3 | Enable a React component (or group of components) to be selectable via mouse/touch.
  4 | 
  5 | ## Demo
  6 | 
  7 | https://react-selectable-fast.now.sh
  8 | 
  9 | ## Install
 10 | 
 11 | ```sh
 12 | npm i -S react-selectable-fast
 13 | ```
 14 | 
 15 | [![react-selectable-fast](https://nodei.co/npm/react-selectable-fast.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-selectable-fast/)
 16 | 
 17 | ## Based on react-selectable
 18 | 
 19 | This project is based on [react-selectable](https://github.com/unclecheese/react-selectable) by [unclecheese](https://github.com/unclecheese).
 20 | The main idea of this fork is to eliminate render during selection caused by state updates of SelectableGroup. Only items under selectbox rerender themselves, which great for big lists of selectable items. Also, this package extends the original functionality with ability to scroll items while selecting relative to window and specified scroll container.
 21 | 
 22 | ## Usage
 23 | 
 24 | Package exports 5 entities
 25 | 
 26 | ```ts
 27 | export { TSelectableItemProps, SelectableGroup, createSelectable, SelectAll, DeselectAll }
 28 | ```
 29 | 
 30 | 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`.
 31 | 
 32 | ```ts
 33 | import React, { Component } from 'react'
 34 | import { SelectableGroup } from 'react-selectable-fast'
 35 | 
 36 | class App extends Component {
 37 |   ...
 38 | 
 39 |   render() {
 40 |     return (
 41 |       <SelectableGroup
 42 |         className="main"
 43 |         clickClassName="tick"
 44 |         enableDeselect
 45 |         tolerance={this.state.tolerance}
 46 |         globalMouse={this.state.isGlobal}
 47 |         allowClickWithoutSelected={false}
 48 |         duringSelection={this.handleSelecting}
 49 |         onSelectionClear={this.handleSelectionClear}
 50 |         onSelectionFinish={this.handleSelectionFinish}
 51 |         onSelectedItemUnmount={this.handleSelectedItemUnmount}
 52 |         ignoreList={['.not-selectable', '.item:nth-child(10)', '.item:nth-child(27)']}
 53 |       >
 54 |         <List items={this.props.items} />
 55 |       </SelectableGroup>
 56 |     )
 57 |   }
 58 | }
 59 | ```
 60 | 
 61 | ```ts
 62 | import React from 'react'
 63 | import { TSelectableItemProps, createSelectable } from 'react-selectable-fast'
 64 | 
 65 | class SomeComponent extends Component<TSelectableItemProps> {
 66 |   render() {
 67 |     const { selectableRef, isSelected, isSelecting } = this.props
 68 | 
 69 |     return <div ref={selectableRef}>...</div>
 70 |   }
 71 | }
 72 | 
 73 | export default createSelectable(SomeComponent)
 74 | ```
 75 | 
 76 | ```ts
 77 | import React from 'react'
 78 | import { SelectAll, DeselectAll } from 'react-selectable-fast'
 79 | import SelectableComponent from './SomeComponent'
 80 | 
 81 | const List = () => (
 82 |   <div>
 83 |     <SelectAll className="selectable-button">
 84 |       <button>Select all</button>
 85 |     </SelectAll>
 86 |     <DeselectAll className="selectable-button">
 87 |       <button>Clear selection</button>
 88 |     </DeselectAll>
 89 |     {this.props.items.map((item, i) => (
 90 |       <SelectableComponent key={i} player={item.player} year={item.year} />
 91 |     ))}
 92 |   </div>
 93 | )
 94 | ```
 95 | 
 96 | ## JavaScript environment requirements
 97 | 
 98 | The React-Selectable-Fast package distributed on NPM use the widely-supported ES5
 99 | version of JavaScript to support as many browser environments as possible.
100 | 
101 | However, this package expects modern JavaScript globals (`Map`, `Set`,
102 | `Array.from`, `Array.isArray` `Object.assign`) to be defined. If you support older browsers and
103 | devices which may not yet provide these natively, consider including a global
104 | polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or
105 | [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
106 | 
107 | A polyfilled environment for React-Selectable-Fast using [core-js](https://github.com/zloirock/core-js) to support older browsers
108 | might look like this:
109 | 
110 | ```ts
111 | import 'core-js/fn/object/assign'
112 | import 'core-js/fn/array/from'
113 | import 'core-js/fn/array/is-array'
114 | import 'core-js/fn/map'
115 | import 'core-js/fn/set'
116 | 
117 | import App from './myApp'
118 | ```
119 | 
120 | ## Configuration
121 | 
122 | The `<SelectableGroup />` component accepts a few optional props:
123 | 
124 | - `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.
125 | - `onSelectionFinish` (Function) Callback.
126 | - `onSelectionClear` (Function) Callback.
127 | - `onSelectedItemUnmount` (Function) Callback.
128 | - `enableDeselect` (Boolean) Enables deselect with selectbox.
129 | - `mixedDeselect` (Boolean) When enabled items can be selected and deselected with selectbox at the same time, `enableDeselect` should be set to `true`.
130 | - `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.
131 | - `ignoreList` (Array) Array of ignored selectors.
132 | - `clickableClassName` (String) On elements with specified selector click item containing this element will be selected.
133 | - `tolerance` (Number) The amount of buffer to add around your `<SelectableGroup />` container, in pixels.
134 | - `className` (String) Class of selectable group element.
135 | - `selectionModeClass` (String) Class indicating that there is more than 1 selected item. Defaults to 'in-selection-mode'.
136 | - `selectboxClassName` (String) Class of selectbox element.
137 | - `component` (String) The component to render. Defaults to `div`.
138 | - `allowClickWithoutSelected` (Boolean) When disabled items can be selected by click only if there is more than 1 already selected item.
139 | - `fixedPosition` (Boolean) Whether the `<SelectableGroup />` container is a fixed or absolutely positioned element or the grandchild of one.
140 | - `resetOnStart` (Boolean) Unselect all items when you start a new drag. Default value is `false`.
141 | - `deselectOnEsc` (Boolean) Unselect all items on ESC keydown/keyup events. Default value is `true`. Using `ref` on `SelectableGroup` gives access to `ref.clearSelection()` method to unselect all items programmatically.
142 | - `disabled` (Boolean) Enable or disable the selectable draggable, useful if you want to enable drag of sub-items. Default value is `false`.
143 | - `delta` (Number) Value of the CSS transform property scaled list, useful if your list of items in `<SelectableGroup />` is wrapped by a scale css transform property. Default value is `1`.
144 | - `selectOnClick` (Boolean) Allow selecting by clicking items. Default value is `true`
145 | - `allowAltClick` (Boolean) Perform select actions even though the `alt` key is down when clicking or dragging. Default value is `false`
146 | - `allowCtrlClick` (Boolean) Perform select actions even though the `ctrl` key is down when clicking or dragging. Default value is `false`
147 | - `allowMetaClick` (Boolean) Perform select actions even though the `meta` key is down when clicking or dragging. Default value is `false`
148 | - `allowShiftClick` (Boolean) Perform select actions even though the `shift` key is down when clicking or dragging. Default value is `false`
149 | 


--------------------------------------------------------------------------------
/website/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /* Grouping content
189 |    ========================================================================== */
190 | 
191 | /**
192 |  * Address margin not present in IE 8/9 and Safari.
193 |  */
194 | 
195 | figure {
196 |   margin: 1em 40px;
197 | }
198 | 
199 | /**
200 |  * Address differences between Firefox and other browsers.
201 |  */
202 | 
203 | hr {
204 |   box-sizing: content-box;
205 |   height: 0;
206 | }
207 | 
208 | /**
209 |  * Contain overflow in all browsers.
210 |  */
211 | 
212 | pre {
213 |   overflow: auto;
214 | }
215 | 
216 | /**
217 |  * Address odd `em`-unit font size rendering in all browsers.
218 |  */
219 | 
220 | code,
221 | kbd,
222 | pre,
223 | samp {
224 |   font-family: monospace, monospace;
225 |   font-size: 1em;
226 | }
227 | 
228 | /* Forms
229 |    ========================================================================== */
230 | 
231 | /**
232 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
233 |  * styling of `select`, unless a `border` property is set.
234 |  */
235 | 
236 | /**
237 |  * 1. Correct color not being inherited.
238 |  *    Known issue: affects color of disabled elements.
239 |  * 2. Correct font properties not being inherited.
240 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
241 |  */
242 | 
243 | button,
244 | input,
245 | optgroup,
246 | select,
247 | textarea {
248 |   color: inherit; /* 1 */
249 |   font: inherit; /* 2 */
250 |   margin: 0; /* 3 */
251 | }
252 | 
253 | /**
254 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
255 |  */
256 | 
257 | button {
258 |   overflow: visible;
259 | }
260 | 
261 | /**
262 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
263 |  * All other form control elements do not inherit `text-transform` values.
264 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
265 |  * Correct `select` style inheritance in Firefox.
266 |  */
267 | 
268 | button,
269 | select {
270 |   text-transform: none;
271 | }
272 | 
273 | /**
274 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
275 |  *    and `video` controls.
276 |  * 2. Correct inability to style clickable `input` types in iOS.
277 |  * 3. Improve usability and consistency of cursor style between image-type
278 |  *    `input` and others.
279 |  */
280 | 
281 | button,
282 | html input[type="button"], /* 1 */
283 | input[type="reset"],
284 | input[type="submit"] {
285 |   -webkit-appearance: button; /* 2 */
286 |   cursor: pointer; /* 3 */
287 | }
288 | 
289 | /**
290 |  * Re-set default cursor for disabled elements.
291 |  */
292 | 
293 | button[disabled],
294 | html input[disabled] {
295 |   cursor: default;
296 | }
297 | 
298 | /**
299 |  * Remove inner padding and border in Firefox 4+.
300 |  */
301 | 
302 | button::-moz-focus-inner,
303 | input::-moz-focus-inner {
304 |   border: 0;
305 |   padding: 0;
306 | }
307 | 
308 | /**
309 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
310 |  * the UA stylesheet.
311 |  */
312 | 
313 | input {
314 |   line-height: normal;
315 | }
316 | 
317 | /**
318 |  * It's recommended that you don't attempt to style these elements.
319 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
320 |  *
321 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
322 |  * 2. Remove excess padding in IE 8/9/10.
323 |  */
324 | 
325 | input[type='checkbox'],
326 | input[type='radio'] {
327 |   box-sizing: border-box; /* 1 */
328 |   padding: 0; /* 2 */
329 | }
330 | 
331 | /**
332 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
333 |  * `font-size` values of the `input`, it causes the cursor style of the
334 |  * decrement button to change from `default` to `text`.
335 |  */
336 | 
337 | input[type='number']::-webkit-inner-spin-button,
338 | input[type='number']::-webkit-outer-spin-button {
339 |   height: auto;
340 | }
341 | 
342 | /**
343 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
344 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
345 |  *    (include `-moz` to future-proof).
346 |  */
347 | 
348 | input[type='search'] {
349 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
350 |   box-sizing: content-box;
351 | }
352 | 
353 | /**
354 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
355 |  * Safari (but not Chrome) clips the cancel button when the search input has
356 |  * padding (and `textfield` appearance).
357 |  */
358 | 
359 | input[type='search']::-webkit-search-cancel-button,
360 | input[type='search']::-webkit-search-decoration {
361 |   -webkit-appearance: none;
362 | }
363 | 
364 | /**
365 |  * Define consistent border, margin, and padding.
366 |  */
367 | 
368 | fieldset {
369 |   border: 1px solid #c0c0c0;
370 |   margin: 0 2px;
371 |   padding: 0.35em 0.625em 0.75em;
372 | }
373 | 
374 | /**
375 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
376 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
377 |  */
378 | 
379 | legend {
380 |   border: 0; /* 1 */
381 |   padding: 0; /* 2 */
382 | }
383 | 
384 | /**
385 |  * Remove default vertical scrollbar in IE 8/9/10/11.
386 |  */
387 | 
388 | textarea {
389 |   overflow: auto;
390 | }
391 | 
392 | /**
393 |  * Don't inherit the `font-weight` (applied by a rule above).
394 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
395 |  */
396 | 
397 | optgroup {
398 |   font-weight: bold;
399 | }
400 | 
401 | /* Tables
402 |    ========================================================================== */
403 | 
404 | /**
405 |  * Remove most spacing between table cells.
406 |  */
407 | 
408 | table {
409 |   border-collapse: collapse;
410 |   border-spacing: 0;
411 | }
412 | 
413 | td,
414 | th {
415 |   padding: 0;
416 | }
417 | 


--------------------------------------------------------------------------------
/website/css/github-light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |    Copyright 2014 GitHub Inc.
  3 | 
  4 |    Licensed under the Apache License, Version 2.0 (the "License");
  5 |    you may not use this file except in compliance with the License.
  6 |    You may obtain a copy of the License at
  7 | 
  8 |        http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 |    Unless required by applicable law or agreed to in writing, software
 11 |    distributed under the License is distributed on an "AS IS" BASIS,
 12 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |    See the License for the specific language governing permissions and
 14 |    limitations under the License.
 15 | 
 16 | */
 17 | 
 18 | .pl-c /* comment */ {
 19 |   color: #969896;
 20 | }
 21 | 
 22 | .pl-c1      /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
 23 | .pl-s .pl-v /* string variable */ {
 24 |   color: #0086b3;
 25 | }
 26 | 
 27 | .pl-e  /* entity */,
 28 | .pl-en /* entity.name */ {
 29 |   color: #795da3;
 30 | }
 31 | 
 32 | .pl-s .pl-s1 /* string source */,
 33 | .pl-smi      /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
 34 |   color: #333;
 35 | }
 36 | 
 37 | .pl-ent /* entity.name.tag */ {
 38 |   color: #63a35c;
 39 | }
 40 | 
 41 | .pl-k /* keyword, storage, storage.type */ {
 42 |   color: #a71d5d;
 43 | }
 44 | 
 45 | .pl-pds              /* punctuation.definition.string, string.regexp.character-class */,
 46 | .pl-s                /* string */,
 47 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
 48 | .pl-sr               /* string.regexp */,
 49 | .pl-sr .pl-cce       /* string.regexp constant.character.escape */,
 50 | .pl-sr .pl-sra       /* string.regexp string.regexp.arbitrary-repitition */,
 51 | .pl-sr .pl-sre       /* string.regexp source.ruby.embedded */ {
 52 |   color: #183691;
 53 | }
 54 | 
 55 | .pl-v /* variable */ {
 56 |   color: #ed6a43;
 57 | }
 58 | 
 59 | .pl-id /* invalid.deprecated */ {
 60 |   color: #b52a1d;
 61 | }
 62 | 
 63 | .pl-ii /* invalid.illegal */ {
 64 |   background-color: #b52a1d;
 65 |   color: #f8f8f8;
 66 | }
 67 | 
 68 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
 69 |   color: #63a35c;
 70 |   font-weight: bold;
 71 | }
 72 | 
 73 | .pl-ml /* markup.list */ {
 74 |   color: #693a17;
 75 | }
 76 | 
 77 | .pl-mh        /* markup.heading */,
 78 | .pl-mh .pl-en /* markup.heading entity.name */,
 79 | .pl-ms        /* meta.separator */ {
 80 |   color: #1d3e81;
 81 |   font-weight: bold;
 82 | }
 83 | 
 84 | .pl-mq /* markup.quote */ {
 85 |   color: #008080;
 86 | }
 87 | 
 88 | .pl-mi /* markup.italic */ {
 89 |   color: #333;
 90 |   font-style: italic;
 91 | }
 92 | 
 93 | .pl-mb /* markup.bold */ {
 94 |   color: #333;
 95 |   font-weight: bold;
 96 | }
 97 | 
 98 | .pl-md /* markup.deleted, meta.diff.header.from-file */ {
 99 |   background-color: #ffecec;
100 |   color: #bd2c00;
101 | }
102 | 
103 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
104 |   background-color: #eaffea;
105 |   color: #55a532;
106 | }
107 | 
108 | .pl-mdr /* meta.diff.range */ {
109 |   color: #795da3;
110 |   font-weight: bold;
111 | }
112 | 
113 | .pl-mo /* meta.output */ {
114 |   color: #1d3e81;
115 | }
116 | 
117 | /*  —————————————————— Custom GitHub styles —————————————————— */
118 | 
119 | * {
120 |   box-sizing: border-box;
121 | }
122 | 
123 | body {
124 |   padding: 0;
125 |   margin: 0;
126 |   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
127 |   font-size: 16px;
128 |   line-height: 1.5;
129 |   color: #606c71;
130 | }
131 | 
132 | a {
133 |   color: #1e6bb8;
134 |   text-decoration: none;
135 | }
136 | 
137 | a:hover {
138 |   text-decoration: underline;
139 | }
140 | 
141 | .anchor {
142 |   float: left;
143 |   padding-right: 4px;
144 |   margin-left: -22px;
145 | }
146 | 
147 | .octicon {
148 |   display: inline-block;
149 |   visibility: hidden;
150 | }
151 | 
152 | h3:hover .octicon,
153 | h2:hover .octicon {
154 |   visibility: visible;
155 | }
156 | 
157 | .octicon.octicon-link {
158 |   -webkit-mask-size: cover;
159 |   background-color: #159957;
160 |   width: 18px;
161 |   height: 18px;
162 |   -webkit-mask: url(https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/link.svg) no-repeat
163 |     50% 50%;
164 |   mask: url(https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/link.svg) no-repeat 50% 50%;
165 |   -webkit-mask-size: cover;
166 |   mask-size: cover;
167 | }
168 | 
169 | .github-fork-ribbon:before {
170 |   background-color: #09a;
171 |   transition: background-color 100ms ease-in;
172 | }
173 | 
174 | .github-fork-ribbon:hover:before {
175 |   background-color: #00b9ce;
176 | }
177 | 
178 | .button-container {
179 |   margin-left: 2px;
180 | }
181 | 
182 | .btn {
183 |   display: inline-block;
184 |   margin-bottom: 1rem;
185 |   color: rgba(255, 255, 255, 0.7);
186 |   background-color: rgba(255, 255, 255, 0.08);
187 |   border-color: rgba(255, 255, 255, 0.2);
188 |   border-style: solid;
189 |   border-width: 1px;
190 |   border-radius: 0.3rem;
191 |   transition: color 0.2s, background-color 0.2s, border-color 0.2s;
192 | }
193 | 
194 | .btn + .btn {
195 |   margin-left: 1rem;
196 | }
197 | 
198 | .btn:hover {
199 |   color: rgba(255, 255, 255, 0.8);
200 |   text-decoration: none;
201 |   background-color: rgba(255, 255, 255, 0.2);
202 |   border-color: rgba(255, 255, 255, 0.3);
203 | }
204 | 
205 | @media screen and (min-width: 64em) {
206 |   .btn {
207 |     padding: 0.75rem 1rem;
208 |   }
209 | }
210 | 
211 | @media screen and (min-width: 42em) and (max-width: 64em) {
212 |   .btn {
213 |     padding: 0.6rem 0.9rem;
214 |     font-size: 0.9rem;
215 |   }
216 | }
217 | 
218 | @media screen and (max-width: 42em) {
219 |   .btn {
220 |     display: block;
221 |     width: 100%;
222 |     padding: 0.75rem;
223 |     font-size: 0.9rem;
224 |   }
225 |   .btn + .btn {
226 |     margin-top: 1rem;
227 |     margin-left: 0;
228 |   }
229 | }
230 | 
231 | .page-header {
232 |   color: #fff;
233 |   text-align: center;
234 |   background-color: #159957;
235 |   background-image: linear-gradient(120deg, #155799, #159957);
236 | }
237 | 
238 | @media screen and (min-width: 64em) {
239 |   .page-header {
240 |     padding: 5rem 6rem;
241 |   }
242 | }
243 | 
244 | @media screen and (min-width: 42em) and (max-width: 64em) {
245 |   .page-header {
246 |     padding: 3rem 4rem;
247 |   }
248 | }
249 | 
250 | @media screen and (max-width: 42em) {
251 |   .page-header {
252 |     padding: 2rem 1rem;
253 |   }
254 | }
255 | 
256 | .project-name {
257 |   margin-top: 0;
258 |   margin-bottom: 0.1rem;
259 | }
260 | 
261 | @media screen and (min-width: 64em) {
262 |   .project-name {
263 |     font-size: 3.25rem;
264 |   }
265 | }
266 | 
267 | @media screen and (min-width: 42em) and (max-width: 64em) {
268 |   .project-name {
269 |     font-size: 2.25rem;
270 |   }
271 | }
272 | 
273 | @media screen and (max-width: 42em) {
274 |   .project-name {
275 |     font-size: 1.75rem;
276 |   }
277 | }
278 | 
279 | .project-tagline {
280 |   margin-bottom: 2rem;
281 |   font-weight: normal;
282 |   opacity: 0.7;
283 | }
284 | 
285 | @media screen and (min-width: 64em) {
286 |   .project-tagline {
287 |     font-size: 1.25rem;
288 |   }
289 | }
290 | 
291 | @media screen and (min-width: 42em) and (max-width: 64em) {
292 |   .project-tagline {
293 |     font-size: 1.15rem;
294 |   }
295 | }
296 | 
297 | @media screen and (max-width: 42em) {
298 |   .project-tagline {
299 |     font-size: 1rem;
300 |   }
301 | }
302 | 
303 | .main-content :first-child {
304 |   margin-top: 0;
305 | }
306 | .main-content img {
307 |   max-width: 100%;
308 | }
309 | .main-content h1,
310 | .main-content h2,
311 | .main-content h3,
312 | .main-content h4,
313 | .main-content h5,
314 | .main-content h6 {
315 |   margin-top: 2rem;
316 |   margin-bottom: 1rem;
317 |   font-weight: normal;
318 |   color: #159957;
319 | }
320 | .main-content p {
321 |   margin-bottom: 1em;
322 | }
323 | .main-content code {
324 |   padding: 2px 4px;
325 |   font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
326 |   font-size: 0.9rem;
327 |   color: #383e41;
328 |   background-color: #f3f6fa;
329 |   border-radius: 0.3rem;
330 | }
331 | .main-content pre {
332 |   padding: 0.8rem;
333 |   margin-top: 0;
334 |   margin-bottom: 1rem;
335 |   font: 1rem Consolas, 'Liberation Mono', Menlo, Courier, monospace;
336 |   color: #567482;
337 |   word-wrap: normal;
338 |   background-color: #f3f6fa;
339 |   border: solid 1px #dce6f0;
340 |   border-radius: 0.3rem;
341 | }
342 | .main-content pre > code {
343 |   padding: 0;
344 |   margin: 0;
345 |   font-size: 0.9rem;
346 |   color: #567482;
347 |   word-break: normal;
348 |   white-space: pre;
349 |   background: transparent;
350 |   border: 0;
351 | }
352 | .main-content .highlight {
353 |   margin-bottom: 1rem;
354 | }
355 | .main-content .highlight pre {
356 |   margin-bottom: 0;
357 |   word-break: normal;
358 | }
359 | .main-content .highlight pre,
360 | .main-content pre {
361 |   padding: 0.8rem;
362 |   overflow: auto;
363 |   font-size: 0.9rem;
364 |   line-height: 1.45;
365 |   border-radius: 0.3rem;
366 | }
367 | .main-content pre code,
368 | .main-content pre tt {
369 |   display: inline;
370 |   max-width: initial;
371 |   padding: 0;
372 |   margin: 0;
373 |   overflow: initial;
374 |   line-height: inherit;
375 |   word-wrap: normal;
376 |   background-color: transparent;
377 |   border: 0;
378 | }
379 | .main-content pre code:before,
380 | .main-content pre code:after,
381 | .main-content pre tt:before,
382 | .main-content pre tt:after {
383 |   content: normal;
384 | }
385 | .main-content ul,
386 | .main-content ol {
387 |   margin-top: 0;
388 | }
389 | .main-content blockquote {
390 |   padding: 0 1rem;
391 |   margin-left: 0;
392 |   color: #819198;
393 |   border-left: 0.3rem solid #dce6f0;
394 | }
395 | .main-content blockquote > :first-child {
396 |   margin-top: 0;
397 | }
398 | .main-content blockquote > :last-child {
399 |   margin-bottom: 0;
400 | }
401 | .main-content table {
402 |   display: block;
403 |   width: 100%;
404 |   overflow: auto;
405 |   word-break: normal;
406 |   word-break: keep-all;
407 | }
408 | .main-content table th {
409 |   font-weight: bold;
410 | }
411 | .main-content table th,
412 | .main-content table td {
413 |   padding: 0.5rem 1rem;
414 |   border: 1px solid #e9ebec;
415 | }
416 | .main-content dl {
417 |   padding: 0;
418 | }
419 | .main-content dl dt {
420 |   padding: 0;
421 |   margin-top: 1rem;
422 |   font-size: 1rem;
423 |   font-weight: bold;
424 | }
425 | .main-content dl dd {
426 |   padding: 0;
427 |   margin-bottom: 1rem;
428 | }
429 | .main-content hr {
430 |   height: 2px;
431 |   padding: 0;
432 |   margin: 1rem 0;
433 |   background-color: #eff0f1;
434 |   border: 0;
435 | }
436 | 
437 | @media screen and (min-width: 64em) {
438 |   .main-content {
439 |     max-width: 64rem;
440 |     padding: 2rem 6rem;
441 |     margin: 0 auto;
442 |     font-size: 1.1rem;
443 |   }
444 | }
445 | 
446 | @media screen and (min-width: 42em) and (max-width: 64em) {
447 |   .main-content {
448 |     padding: 2rem 4rem;
449 |     font-size: 1.1rem;
450 |   }
451 | }
452 | 
453 | @media screen and (max-width: 42em) {
454 |   .main-content {
455 |     padding: 2rem 1rem;
456 |     font-size: 1rem;
457 |   }
458 | }
459 | 
460 | .site-footer {
461 |   padding-top: 2rem;
462 |   margin-top: 2rem;
463 |   border-top: solid 1px #eff0f1;
464 | }
465 | 
466 | .site-footer-owner {
467 |   display: block;
468 |   font-weight: bold;
469 | }
470 | 
471 | .site-footer-credits {
472 |   color: #819198;
473 | }
474 | 
475 | @media screen and (min-width: 64em) {
476 |   .site-footer {
477 |     font-size: 1rem;
478 |   }
479 | }
480 | 
481 | @media screen and (min-width: 42em) and (max-width: 64em) {
482 |   .site-footer {
483 |     font-size: 1rem;
484 |   }
485 | }
486 | 
487 | @media screen and (max-width: 42em) {
488 |   .site-footer {
489 |     font-size: 0.9rem;
490 |   }
491 | }
492 | 


--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <title>React-Selectable-Fast Demo</title>
  6 |     <meta content="width=device-width, initial-scale=1" name="viewport" />
  7 |     <link href="css/normalize.css" media="screen" rel="stylesheet" type="text/css" />
  8 |     <link
  9 |       href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700"
 10 |       rel="stylesheet"
 11 |       type="text/css"
 12 |     />
 13 |     <link
 14 |       rel="stylesheet"
 15 |       href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css"
 16 |     />
 17 |     <link href="css/github-light.css" media="screen" rel="stylesheet" type="text/css" />
 18 |     <link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />
 19 |   </head>
 20 | 
 21 |   <body>
 22 |     <a
 23 |       title="Fork me on GitHub"
 24 |       class="github-fork-ribbon"
 25 |       href="https://github.com/valerybugakov/react-selectable-fast"
 26 |     >
 27 |       Fork me on GitHub
 28 |     </a>
 29 | 
 30 |     <section class="page-header">
 31 |       <h1 class="project-name">React-selectable-fast</h1>
 32 |       <h2 class="project-tagline">
 33 |         Enable a React component (or group of components) to be selectable.
 34 |       </h2>
 35 |       <a class="btn" href="https://github.com/valerybugakov/react-selectable-fast"
 36 |         >View on GitHub</a
 37 |       >
 38 |       <a class="btn" href="https://github.com/valerybugakov/react-selectable-fast/zipball/master"
 39 |         >Download .zip</a
 40 |       >
 41 |       <a class="btn" href="https://github.com/valerybugakov/react-selectable-fast/tarball/master"
 42 |         >Download .tar.gz</a
 43 |       >
 44 |     </section>
 45 | 
 46 |     <section class="main-content">
 47 |       <h1>
 48 |         react-selectable-fast
 49 |         <img alt="npm" src="https://img.shields.io/npm/v/react-selectable-fast.svg" />
 50 |         <img alt="license" src="https://img.shields.io/npm/l/react-selectable-fast.svg" />
 51 |         <img
 52 |           alt="github-issues"
 53 |           src="https://img.shields.io/github/issues/valerybugakov/react-selectable-fast.svg"
 54 |         />
 55 |       </h1>
 56 | 
 57 |       <h2>
 58 |         <a class="anchor" href="#install" id="install">
 59 |           <span class="octicon octicon-link"></span>
 60 |         </a>
 61 |         Install
 62 |       </h2>
 63 |       <div class="highlight highlight-sh">
 64 |         <pre>npm i -S react-selectable-fast</pre>
 65 |       </div>
 66 |       <p>
 67 |         <a href="https://nodei.co/npm/react-selectable-fast">
 68 |           <img
 69 |             alt="react-selectable-fast"
 70 |             src="https://nodei.co/npm/react-selectable-fast.png?downloads=true&amp;downloadRank=true&amp;stars=true"
 71 |           />
 72 |         </a>
 73 |       </p>
 74 | 
 75 |       <h2>
 76 |         <a class="anchor" href="#demo" id="demo"><span class="octicon octicon-link"></span></a>
 77 |         Demo
 78 |       </h2>
 79 |       <p>
 80 |         Draw a box with your mouse/touch to select items. Click on + icon of an individual item to
 81 |         select it.
 82 |       </p>
 83 |       <div id="demo-container"></div>
 84 | 
 85 |       <h2>
 86 |         <a
 87 |           id="user-content-javascript-environment-requirements"
 88 |           class="anchor"
 89 |           href="#javascript-environment-requirements"
 90 |         ></a
 91 |         >JavaScript environment requirements
 92 |       </h2>
 93 |       <p>
 94 |         The React-Selectable-Fast package distributed on NPM use the widely-supported ES5 version of
 95 |         JavaScript to support as many browser environments as possible.
 96 |       </p>
 97 |       <p>
 98 |         However, this package expects modern JavaScript globals (<code>Map</code>, <code>Set</code>,
 99 |         <code>Array.from</code>, <code>Array.isArray</code> <code>Object.assign</code>) to be
100 |         defined. If you support older browsers and devices which may not yet provide these natively,
101 |         consider including a global polyfill in your bundled application, such as
102 |         <a href="https://github.com/zloirock/core-js">core-js</a> or
103 |         <a href="https://babeljs.io/docs/usage/polyfill/">babel-polyfill</a>.
104 |       </p>
105 |       <p>
106 |         A polyfilled environment for React-Selectable-Fast using
107 |         <a href="https://github.com/zloirock/core-js">core-js</a> to support older browsers might
108 |         look like this:
109 |       </p>
110 | 
111 |       <div class="highlight highlight-source-js">
112 |         <pre><span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">'</span>core-js/fn/object/assign<span class="pl-pds">'</span></span>
113 | <span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">'</span>core-js/fn/array/from<span class="pl-pds">'</span></span>
114 | <span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">'</span>core-js/fn/array/is-array<span class="pl-pds">'</span></span>
115 | <span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">'</span>core-js/fn/map<span class="pl-pds">'</span></span>
116 | <span class="pl-k">import</span> <span class="pl-s"><span class="pl-pds">'</span>core-js/fn/set<span class="pl-pds">'</span></span>
117 | 
118 | <span class="pl-k">import</span> <span class="pl-smi">App</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./myApp<span class="pl-pds">'</span></span>;</pre>
119 |       </div>
120 | 
121 |       <h2>
122 |         <a class="anchor" href="#usage" id="usage"><span class="octicon octicon-link"></span></a
123 |         >Usage
124 |       </h2>
125 |       <h3>
126 |         <a class="anchor" href="#exemple" id="exemple"><span class="octicon octicon-link"></span></a
127 |         >Example
128 |       </h3>
129 |       <p>
130 |         Package exports 4 entities
131 |         <code>{ SelectableGroup, createSelectable, SelectAll, DeselectAll }</code>. To make other
132 |         components selectable wrap them using HoC <code>createSelectable</code>, add passed
133 |         <code>selectableRef</code> prop to the target node and put a list of seletable items under
134 |         <code>SelectableGroup</code>.
135 |       </p>
136 |       <div class="highlight highlight-source-js">
137 |         <pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">Component</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>
138 | <span class="pl-k">import</span> { <span class="pl-smi">SelectableGroup</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-selectable-fast<span class="pl-pds">'</span></span>
139 | 
140 | <span class="pl-k">class</span> <span class="pl-en">App</span> <span class="pl-k">extends</span> <span class="pl-e">Component</span> {
141 |   <span class="pl-k">...</span>
142 | 
143 |   <span class="pl-en">render</span>() {
144 |     <span class="pl-k">return</span> (
145 |       <span class="pl-k">&lt;</span>SelectableGroup
146 |         className<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>main<span class="pl-pds">"</span></span>
147 |         clickClassName<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>tick<span class="pl-pds">"</span></span>
148 |         enableDeselect
149 |         tolerance<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">tolerance</span>}
150 |         globalMouse<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">state</span>.<span class="pl-smi">isGlobal</span>}
151 |         allowClickWithoutSelected<span class="pl-k">=</span>{<span class="pl-c1">false</span>}
152 |         duringSelection<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">handleSelecting</span>}
153 |         onSelectionClear<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">handleSelectionClear</span>}
154 |         onSelectionFinish<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">handleSelectionFinish</span>}
155 |         ignoreList<span class="pl-k">=</span>{[<span class="pl-s"><span class="pl-pds">'</span>.not-selectable<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>.item:nth-child(10)<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>.item:nth-child(27)<span class="pl-pds">'</span></span>]}
156 |       <span class="pl-k">&gt;</span>
157 |         <span class="pl-k">&lt;</span>List items<span class="pl-k">=</span>{<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">items</span>} <span class="pl-k">/</span><span class="pl-k">&gt;</span>
158 |       <span class="pl-k">&lt;</span><span class="pl-k">/</span>SelectableGroup<span class="pl-k">&gt;</span>
159 |     )
160 |   }
161 | }</pre>
162 |       </div>
163 |       <div class="highlight highlight-source-js">
164 |         <pre><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>
165 | <span class="pl-k">import</span> { <span class="pl-smi">createSelectable</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-selectable-fast<span class="pl-pds">'</span></span>
166 | 
167 | <span class="pl-k">const</span> <span class="pl-c1">SomeComponent</span> <span class="pl-k">=</span> ({ selectableRef, isSelected, isSelecting }) <span class="pl-k">=&gt;</span> (
168 |   <span class="pl-k">&lt;</span>div ref<span class="pl-k">=</span>{selectableRef}<span class="pl-k">&gt;</span><span class="pl-k">...</span><span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
169 | )
170 | 
171 | <span class="pl-k">export</span> <span class="pl-c1">default</span> <span class="pl-smi">createSelectable</span>(SomeComponent)</pre>
172 |       </div>
173 | 
174 |       <div class="highlight highlight-source-js">
175 |         <pre><span class="pl-k">import</span> <span class="pl-smi">React</span>, { <span class="pl-smi">Component</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>
176 | <span class="pl-k">import</span> { <span class="pl-smi">createSelectable</span>, <span class="pl-smi">SelectAll</span>, <span class="pl-smi">DeselectAll</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-selectable-fast<span class="pl-pds">'</span></span>
177 | <span class="pl-k">import</span> <span class="pl-smi">SomeComponent</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>./SomeComponent<span class="pl-pds">'</span></span>
178 | 
179 | <span class="pl-k">const</span> <span class="pl-c1">SelectableComponent</span> <span class="pl-k">=</span> <span class="pl-en">createSelectable</span>(SomeComponent)
180 | 
181 | <span class="pl-k">class</span> <span class="pl-en">List</span> <span class="pl-k">extends</span> <span class="pl-e">Component</span> {
182 |   <span class="pl-k">...</span>
183 | 
184 |   <span class="pl-en">render</span>() {
185 |     <span class="pl-k">return</span> (
186 |       <span class="pl-k">&lt;</span>div<span class="pl-k">&gt;</span>
187 |         <span class="pl-k">&lt;</span>SelectAll className<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>selectable-button<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
188 |           <span class="pl-k">&lt;</span>button<span class="pl-k">&gt;</span><span class="pl-c1">Select</span> all<span class="pl-k">&lt;</span><span class="pl-k">/</span>button<span class="pl-k">&gt;</span>
189 |         <span class="pl-k">&lt;</span><span class="pl-k">/</span>SelectAll<span class="pl-k">&gt;</span>
190 |         <span class="pl-k">&lt;</span>DeselectAll className<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>selectable-button<span class="pl-pds">"</span></span><span class="pl-k">&gt;</span>
191 |           <span class="pl-k">&lt;</span>button<span class="pl-k">&gt;</span>Clear selection<span class="pl-k">&lt;</span><span class="pl-k">/</span>button<span class="pl-k">&gt;</span>
192 |         <span class="pl-k">&lt;</span><span class="pl-k">/</span>DeselectAll<span class="pl-k">&gt;</span>
193 |         {<span class="pl-v">this</span>.<span class="pl-smi">props</span>.<span class="pl-smi">items</span>.<span class="pl-en">map</span>((<span class="pl-smi">item</span>, <span class="pl-smi">i</span>) <span class="pl-k">=&gt;</span> (
194 |           <span class="pl-k">&lt;</span>SelectableComponent
195 |             key<span class="pl-k">=</span>{i}
196 |             player<span class="pl-k">=</span>{<span class="pl-smi">item</span>.<span class="pl-c1">player</span>}
197 |             year<span class="pl-k">=</span>{<span class="pl-smi">item</span>.<span class="pl-smi">year</span>}
198 |           <span class="pl-k">/</span><span class="pl-k">&gt;</span>
199 |         ))}
200 |       <span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
201 |     )
202 |   }
203 | }</pre>
204 |       </div>
205 |       <h3>
206 |         <a class="anchor" href="#props" id="props"><span class="octicon octicon-link"></span></a
207 |         >Configuration
208 |       </h3>
209 |       <ul>
210 |         <li>
211 |           <code>duringSelection</code> (Function) Callback fired rapidly during selection (while the
212 |           selector is being dragged). Passes an array containing selectable items currently under
213 |           the selector to the callback function.
214 |         </li>
215 |         <li><code>onSelectionFinish</code> (Function) Callback.</li>
216 |         <li><code>onSelectionClear</code> (Function) Callback.</li>
217 |         <li><code>enableDeselect</code> (Boolean) Enables deselect with selectbox.</li>
218 |         <li>
219 |           <code>mixedDeselect</code> (Boolean) When enabled items can be selected and deselected
220 |           with selectbox at the same time, <code>enableDeselect</code> should be set to
221 |           <code>true</code>.
222 |         </li>
223 |         <li>
224 |           <code>scrollContainer</code> (String) Selector of scroll container which will be used to
225 |           calculate selectbox position. If not specified SelectableGroup element will be used as
226 |           scroll container.
227 |         </li>
228 |         <li><code>ignoreList</code> (Array) Array of ignored selectors.</li>
229 |         <li>
230 |           <code>clickableClassName</code> (String) On element with specified selector click item
231 |           cotaining this element will be selected.
232 |         </li>
233 |         <li>
234 |           <code>tolerance</code> (Number) The amount of buffer to add around your
235 |           <code>&lt;SelectableGroup /&gt;</code> container, in pixels.
236 |         </li>
237 |         <li><code>className</code> (String) Class of selectable group element.</li>
238 |         <li>
239 |           <code>selectionModeClass</code> (String) Class indicating that there are more than 1
240 |           selected item. Defaults to 'in-selection-mode'.
241 |         </li>
242 |         <li>
243 |           <code>component</code> (String) The component to render. Defaults to <code>div</code>.
244 |         </li>
245 |         <li>
246 |           <code>allowClickWithoutSelected</code> (Boolean) When disabled items can be selected by
247 |           click only if there are more than 1 already selected item.
248 |         </li>
249 |         <li>
250 |           <code>fixedPosition</code> (Boolean) Whether the
251 |           <code>&lt;SelectableGroup /&gt;</code> container is a fixed/absolute position element or
252 |           the grandchild of one.
253 |         </li>
254 |         <li>
255 |           <code>resetOnStart</code> (Boolean) Unselect all items when you start a new drag. Default
256 |           value is <code>false</code>.
257 |         </li>
258 |         <li>
259 |           <code>disabled</code> (Boolean) Enable or disable the selectable draggable, useful if you
260 |           want to enable drag of sub-items. Default value is <code>false</code>.
261 |         </li>
262 |         <li>
263 |           <code>delta</code> (Number) Value of the CSS transform property scaled list, useful if
264 |           your list of items in <code>&lt;SelectableGroup /&gt;</code> is wrapped by a scale css
265 |           transform property. Default value is <code>1</code>.
266 |         </li>
267 |         <li>
268 |           <code>selectOnClick</code> (Boolean) Allow selecting by clicking items. Default value is
269 |           <code>true</code>
270 |         </li>
271 |         <li>
272 |           <code>allowAltClick</code> (Boolean) Perform select actions even though the
273 |           <code>alt</code> key is down when clicking or dragging. Default value is
274 |           <code>false</code>
275 |         </li>
276 |         <li>
277 |           <code>allowCtrlClick</code> (Boolean) Perform select actions even though the
278 |           <code>ctrl</code> key is down when clicking or dragging. Default value is
279 |           <code>false</code>
280 |         </li>
281 |         <li>
282 |           <code>allowMetaClick</code> (Boolean) Perform select actions even though the
283 |           <code>meta</code> key is down when clicking or dragging. Default value is
284 |           <code>false</code>
285 |         </li>
286 |         <li>
287 |           <code>allowShiftClick</code> (Boolean) Perform select actions even though the
288 |           <code>shift</code> key is down when clicking or dragging. Default value is
289 |           <code>false</code>
290 |         </li>
291 |       </ul>
292 |       <h2>
293 |         <a class="anchor" href="#development" id="development"
294 |           ><span class="octicon octicon-link"></span></a
295 |         >Development
296 |       </h2>
297 |       <h3>
298 |         <a class="anchor" href="#clean-lib-folder" id="clean-lib-folder"
299 |           ><span class="octicon octicon-link"></span></a
300 |         >Clean <code>lib and dist</code> folders
301 |       </h3>
302 |       <div class="highlight highlight-js">
303 |         <pre>npm run clean</pre>
304 |       </div>
305 |       <h3>
306 |         <a class="anchor" href="#watch-src-folder" id="watch-src-folder"
307 |           ><span class="octicon octicon-link"></span></a
308 |         >Watch <code>src</code> folder
309 |       </h3>
310 |       <div class="highlight highlight-js">
311 |         <pre>npm run watch</pre>
312 |       </div>
313 |       <h3>
314 |         <a class="anchor" href="#watch-src-folder" id="watch-src-folder"
315 |           ><span class="octicon octicon-link"></span></a
316 |         >Start <code>example</code> dev-server
317 |       </h3>
318 |       <div class="highlight highlight-js">
319 |         <pre>npm run watch:example</pre>
320 |       </div>
321 |       <h3>
322 |         <a class="anchor" href="#lint-src-folder" id="lint-src-folder"
323 |           ><span class="octicon octicon-link"></span></a
324 |         >Lint <code>src</code> folder
325 |       </h3>
326 |       <div class="highlight highlight-js">
327 |         <pre>npm run lint</pre>
328 |       </div>
329 |       <h2>
330 |         <a class="anchor" href="#license" id="license"><span class="octicon octicon-link"></span></a
331 |         >License
332 |       </h2>
333 |       <p>See <a href="./LICENSE">MIT</a></p>
334 |       <footer class="site-footer">
335 |         <span class="site-footer-owner"
336 |           ><a href="https://github.com/valerybugakov/react-selectable-fast"
337 |             >React-selectable-fast</a
338 |           ></span
339 |         >
340 |       </footer>
341 |       <span class="site-footer-owner"></span>
342 |     </section>
343 |     <script src="./bundle.js"></script>
344 |   </body>
345 | </html>
346 | 


--------------------------------------------------------------------------------
/src/SelectableGroup.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Component, MouseEvent, ComponentType, CSSProperties } from 'react'
  2 | 
  3 | import {
  4 |   castTouchToMouseEvent,
  5 |   detectMouseButton,
  6 |   doObjectsCollide,
  7 |   getBoundsForNode,
  8 |   isNodeInRoot,
  9 |   noop,
 10 |   Maybe,
 11 |   TComputedBounds,
 12 |   getDocumentScroll,
 13 | } from './utils'
 14 | import { TSelectableItem } from './Selectable.types'
 15 | import { SelectableGroupContext } from './SelectableGroup.context'
 16 | import { Selectbox, TSetSelectboxState } from './Selectbox'
 17 | 
 18 | type TSelectItemsOptions = {
 19 |   isFromClick?: boolean
 20 | }
 21 | 
 22 | type TMouseDownData = {
 23 |   selectboxY: number
 24 |   selectboxX: number
 25 |   target: HTMLElement | null
 26 | }
 27 | 
 28 | type TProcessItemOptions = TSelectItemsOptions & {
 29 |   item: TSelectableItem
 30 |   tolerance: number
 31 |   selectboxBounds: TComputedBounds
 32 |   enableDeselect: boolean
 33 |   mixedDeselect: boolean
 34 | }
 35 | 
 36 | export type TSelectableGroupProps = {
 37 |   globalMouse?: boolean
 38 |   ignoreList?: string[]
 39 |   scrollSpeed?: number
 40 |   minimumSpeedFactor?: number
 41 |   allowClickWithoutSelected?: boolean
 42 |   className?: string
 43 |   clickClassName?: string
 44 |   selectboxClassName?: string
 45 |   style?: CSSProperties
 46 |   selectionModeClass?: string
 47 |   // Event that will fire when items are selected. Passes an array of keys.
 48 |   onSelectionFinish?: Function
 49 |   onSelectionClear?: Function
 50 |   onSelectedItemUnmount?: Function
 51 |   enableDeselect?: boolean
 52 |   mixedDeselect?: boolean
 53 |   deselectOnEsc?: boolean
 54 |   resetOnStart?: boolean
 55 |   disabled?: boolean
 56 |   delta?: number
 57 |   allowAltClick?: boolean
 58 |   allowCtrlClick?: boolean
 59 |   allowMetaClick?: boolean
 60 |   allowShiftClick?: boolean
 61 |   selectOnClick?: boolean
 62 |   // Scroll container selector
 63 |   scrollContainer?: string
 64 | 
 65 |   /**
 66 |    * Event that will fire rapidly during selection (while the selector is
 67 |    * being dragged). Passes an array of keys.
 68 |    */
 69 |   duringSelection?: Function
 70 | 
 71 |   // The component that will represent the Selectable DOM node
 72 |   component?: ComponentType
 73 | 
 74 |   /**
 75 |    * Amount of forgiveness an item will offer to the selectbox before registering
 76 |    * a selection, i.e. if only 1px of the item is in the selection, it shouldn't be
 77 |    * included.
 78 |    */
 79 |   tolerance?: number
 80 | 
 81 |   /**
 82 |    * In some cases, it the bounding box may need fixed positioning, if your layout
 83 |    * is relying on fixed positioned elements, for instance.
 84 |    * @type boolean
 85 |    */
 86 |   fixedPosition?: boolean
 87 | }
 88 | 
 89 | export class SelectableGroup extends Component<TSelectableGroupProps> {
 90 |   static defaultProps = {
 91 |     clickClassName: '',
 92 |     tolerance: 0,
 93 |     globalMouse: false,
 94 |     ignoreList: [],
 95 |     scrollSpeed: 0.25,
 96 |     minimumSpeedFactor: 60,
 97 |     duringSelection: noop,
 98 |     onSelectionFinish: noop,
 99 |     onSelectionClear: noop,
100 |     onSelectedItemUnmount: noop,
101 |     allowClickWithoutSelected: true,
102 |     selectionModeClass: 'in-selection-mode',
103 |     resetOnStart: false,
104 |     disabled: false,
105 |     deselectOnEsc: true,
106 |     fixedPosition: false,
107 |     delta: 1,
108 |     allowAltClick: false,
109 |     allowCtrlClick: false,
110 |     allowMetaClick: false,
111 |     allowShiftClick: false,
112 |     selectOnClick: true,
113 |   }
114 | 
115 |   state = { selectionMode: false }
116 | 
117 |   mouseDownStarted = false
118 | 
119 |   mouseMoveStarted = false
120 | 
121 |   mouseMoved = false
122 | 
123 |   mouseUpStarted = false
124 | 
125 |   selectionStarted = false
126 | 
127 |   deselectionStarted = false
128 | 
129 |   clickedItem?: TSelectableItem
130 | 
131 |   mouseDownData: TMouseDownData = {
132 |     selectboxY: 0,
133 |     selectboxX: 0,
134 |     target: null,
135 |   }
136 | 
137 |   registry = new Set<TSelectableItem>()
138 | 
139 |   selectedItems = new Set<TSelectableItem>()
140 | 
141 |   selectingItems = new Set<TSelectableItem>()
142 | 
143 |   ignoreCheckCache = new Map<HTMLElement, boolean>()
144 | 
145 |   ignoreList = this.props.ignoreList!.concat(['.selectable-select-all', '.selectable-deselect-all'])
146 | 
147 |   ignoreListNodes: HTMLElement[] = []
148 | 
149 |   setSelectboxState: Maybe<TSetSelectboxState> = null
150 | 
151 |   selectableGroup: Maybe<HTMLElement> = null
152 | 
153 |   scrollContainer: Maybe<HTMLElement> = null
154 | 
155 |   maxScrollTop = 0
156 | 
157 |   maxScrollLeft = 0
158 | 
159 |   scrollBounds: Maybe<DOMRect | ClientRect> = null
160 | 
161 |   containerScroll = {
162 |     scrollTop: 0,
163 |     scrollLeft: 0,
164 |   }
165 | 
166 |   documentScroll = {
167 |     scrollTop: 0,
168 |     scrollLeft: 0,
169 |   }
170 | 
171 |   componentDidMount() {
172 |     if (this.props.scrollContainer) {
173 |       this.scrollContainer = document.querySelector(this.props.scrollContainer)
174 |     } else {
175 |       this.scrollContainer = this.selectableGroup
176 |     }
177 | 
178 |     this.scrollContainer!.addEventListener('scroll', this.saveContainerScroll)
179 |     document.addEventListener('scroll', this.saveDocumentScroll)
180 | 
181 |     this.selectableGroup!.addEventListener('mousedown', this.mouseDown)
182 |     this.selectableGroup!.addEventListener('touchstart', this.mouseDown)
183 | 
184 |     if (this.props.deselectOnEsc) {
185 |       document.addEventListener('keydown', this.keyListener)
186 |       document.addEventListener('keyup', this.keyListener)
187 |     }
188 | 
189 |     this.removeIgnoredItemsFromRegistry()
190 |   }
191 | 
192 |   componentWillUnmount() {
193 |     this.scrollContainer!.removeEventListener('scroll', this.saveContainerScroll)
194 |     document.removeEventListener('scroll', this.saveDocumentScroll)
195 | 
196 |     this.selectableGroup!.removeEventListener('mousedown', this.mouseDown)
197 |     this.selectableGroup!.removeEventListener('touchstart', this.mouseDown)
198 | 
199 |     if (this.props.deselectOnEsc) {
200 |       document.removeEventListener('keydown', this.keyListener)
201 |       document.removeEventListener('keyup', this.keyListener)
202 |     }
203 | 
204 |     this.removeTempEventListeners()
205 | 
206 |     // Prevent onSelectedItemUnmount calls
207 |     this.selectedItems.clear()
208 |     this.selectingItems.clear()
209 |   }
210 | 
211 |   saveContainerScroll = () => {
212 |     const { scrollTop, scrollLeft } = this.scrollContainer!
213 | 
214 |     this.containerScroll = {
215 |       scrollTop,
216 |       scrollLeft,
217 |     }
218 |   }
219 | 
220 |   saveDocumentScroll = () => {
221 |     const { documentScrollLeft, documentScrollTop } = getDocumentScroll()
222 | 
223 |     this.documentScroll = {
224 |       scrollTop: documentScrollTop,
225 |       scrollLeft: documentScrollLeft,
226 |     }
227 |   }
228 | 
229 |   get containerDocumentScroll() {
230 |     return {
231 |       scrollTop: this.containerScroll.scrollTop + this.documentScroll.scrollTop,
232 |       scrollLeft: this.containerScroll.scrollLeft + this.documentScroll.scrollLeft,
233 |     }
234 |   }
235 | 
236 |   removeTempEventListeners() {
237 |     document.removeEventListener('mousemove', this.updateSelectBox)
238 |     document.removeEventListener('touchmove', this.updateSelectBox)
239 |     document.removeEventListener('mouseup', this.mouseUp)
240 |     document.removeEventListener('touchend', this.mouseUp)
241 |   }
242 | 
243 |   updateRootBounds() {
244 |     this.scrollBounds = this.scrollContainer!.getBoundingClientRect()
245 |     this.maxScrollTop = this.scrollContainer!.scrollHeight - this.scrollContainer!.clientHeight
246 |     this.maxScrollLeft = this.scrollContainer!.scrollWidth - this.scrollContainer!.clientWidth
247 |   }
248 | 
249 |   updateRegistry = () => {
250 |     for (const selectableItem of this.registry.values()) {
251 |       selectableItem.updateBounds(this.containerDocumentScroll)
252 |     }
253 |   }
254 | 
255 |   registerSelectable = (selectableItem: TSelectableItem) => {
256 |     this.registry.add(selectableItem)
257 | 
258 |     if (selectableItem.state.isSelected) {
259 |       this.selectedItems.add(selectableItem)
260 |     }
261 |   }
262 | 
263 |   unregisterSelectable = (selectableItem: TSelectableItem) => {
264 |     this.registry.delete(selectableItem)
265 | 
266 |     const isRemoved =
267 |       this.selectedItems.has(selectableItem) || this.selectingItems.has(selectableItem)
268 | 
269 |     this.selectedItems.delete(selectableItem)
270 |     this.selectingItems.delete(selectableItem)
271 | 
272 |     if (isRemoved) {
273 |       // Notify third-party that component did unmount and handled item probably should be deleted
274 |       this.props.onSelectedItemUnmount!(selectableItem, [...this.selectedItems])
275 |     }
276 |   }
277 | 
278 |   toggleSelectionMode() {
279 |     const {
280 |       selectedItems,
281 |       state: { selectionMode },
282 |     } = this
283 | 
284 |     if (selectedItems.size && !selectionMode) {
285 |       this.setState({ selectionMode: true })
286 |     }
287 |     if (!selectedItems.size && selectionMode) {
288 |       this.setState({ selectionMode: false })
289 |     }
290 |   }
291 | 
292 |   private updateContainerScroll = (evt: MouseEvent<HTMLElement>) => {
293 |     const { scrollTop, scrollLeft } = this.containerScroll
294 | 
295 |     this.checkScrollTop(evt.clientY, scrollTop)
296 |     this.checkScrollBottom(evt.clientY, scrollTop)
297 |     this.checkScrollLeft(evt.clientX, scrollLeft)
298 |     this.checkScrollRight(evt.clientX, scrollLeft)
299 |   }
300 | 
301 |   getScrollStep = (offset: number) => {
302 |     const { minimumSpeedFactor, scrollSpeed } = this.props
303 | 
304 |     return Math.max(offset, minimumSpeedFactor!) * scrollSpeed!
305 |   }
306 | 
307 |   checkScrollTop = (clientY: number, currentTop: number) => {
308 |     const offset = this.scrollBounds!.top - clientY
309 | 
310 |     if (offset > 0 || clientY < 0) {
311 |       this.scrollContainer!.scrollTop = currentTop - this.getScrollStep(offset)
312 |     }
313 |   }
314 | 
315 |   checkScrollBottom = (clientY: number, currentTop: number) => {
316 |     const offset = clientY - this.scrollBounds!.bottom
317 | 
318 |     if (offset > 0 || clientY > window.innerHeight) {
319 |       const newTop = currentTop + this.getScrollStep(offset)
320 |       this.scrollContainer!.scrollTop = Math.min(newTop, this.maxScrollTop)
321 |     }
322 |   }
323 | 
324 |   checkScrollLeft = (clientX: number, currentLeft: number) => {
325 |     const offset = this.scrollBounds!.left - clientX
326 | 
327 |     if (offset > 0 || clientX < 0) {
328 |       const newLeft = currentLeft - this.getScrollStep(offset)
329 |       this.scrollContainer!.scrollLeft = newLeft
330 |     }
331 |   }
332 | 
333 |   checkScrollRight = (clientX: number, currentLeft: number) => {
334 |     const offset = clientX - this.scrollBounds!.right
335 | 
336 |     if (offset > 0 || clientX > window.innerWidth) {
337 |       const newLeft = currentLeft + this.getScrollStep(offset)
338 |       this.scrollContainer!.scrollLeft = Math.min(newLeft, this.maxScrollLeft)
339 |     }
340 |   }
341 | 
342 |   updateSelectBox = (event: Event) => {
343 |     const evt = castTouchToMouseEvent(event)
344 |     this.updateContainerScroll(evt)
345 | 
346 |     if (this.mouseMoveStarted) {
347 |       return
348 |     }
349 |     this.mouseMoveStarted = true
350 |     this.mouseMoved = true
351 | 
352 |     const { mouseDownData } = this
353 |     const { clientX, clientY } = evt
354 | 
355 |     const pointY = clientY - this.scrollBounds!.top + this.containerScroll.scrollTop
356 |     const selectboxY = Math.min(pointY, mouseDownData.selectboxY)
357 | 
358 |     const pointX = clientX - this.scrollBounds!.left + this.containerScroll.scrollLeft
359 |     const selectboxX = Math.min(pointX, mouseDownData.selectboxX)
360 | 
361 |     const selectboxState = {
362 |       x: selectboxX,
363 |       y: selectboxY,
364 |       width: Math.abs(pointX - mouseDownData.selectboxX),
365 |       height: Math.abs(pointY - mouseDownData.selectboxY),
366 |     }
367 | 
368 |     this.setSelectboxState!(selectboxState)
369 | 
370 |     const selectboxBounds = {
371 |       top: selectboxState.y + this.scrollBounds!.top + this.documentScroll.scrollTop,
372 |       left: selectboxState.x + this.scrollBounds!.left + this.documentScroll.scrollLeft,
373 |       width: selectboxState.width,
374 |       height: selectboxState.height,
375 |       offsetWidth: selectboxState.width || 1,
376 |       offsetHeight: selectboxState.height || 1,
377 |     }
378 | 
379 |     this.selectItems(selectboxBounds)
380 |     this.props.duringSelection!([...this.selectingItems])
381 |     this.mouseMoveStarted = false
382 |   }
383 | 
384 |   selectItems = (selectboxBounds: TComputedBounds, options: TSelectItemsOptions = {}) => {
385 |     const { tolerance, enableDeselect, mixedDeselect } = this.props
386 | 
387 |     for (const item of this.registry.values()) {
388 |       this.processItem({
389 |         item,
390 |         selectboxBounds,
391 |         tolerance: tolerance!,
392 |         mixedDeselect: mixedDeselect!,
393 |         enableDeselect: enableDeselect!,
394 |         isFromClick: options && options.isFromClick,
395 |       })
396 |     }
397 |   }
398 | 
399 |   processItem(options: TProcessItemOptions) {
400 |     const { item, tolerance, selectboxBounds, enableDeselect, mixedDeselect, isFromClick } = options
401 | 
402 |     const { delta } = this.props
403 |     const isCollided = doObjectsCollide(selectboxBounds, item.bounds!, tolerance, delta)
404 |     const { isSelecting, isSelected } = item.state
405 | 
406 |     if (isFromClick && isCollided) {
407 |       if (isSelected) {
408 |         this.selectedItems.delete(item)
409 |       } else {
410 |         this.selectedItems.add(item)
411 |       }
412 | 
413 |       item.setState({ isSelected: !isSelected })
414 |       this.clickedItem = item
415 | 
416 |       return item
417 |     }
418 | 
419 |     if (!isFromClick && isCollided) {
420 |       if (isSelected && enableDeselect && (!this.selectionStarted || mixedDeselect)) {
421 |         item.setState({ isSelected: false })
422 |         item.deselected = true
423 | 
424 |         this.deselectionStarted = true
425 | 
426 |         return this.selectedItems.delete(item)
427 |       }
428 | 
429 |       const canSelect = mixedDeselect ? !item.deselected : !this.deselectionStarted
430 | 
431 |       if (!isSelecting && !isSelected && canSelect) {
432 |         item.setState({ isSelecting: true })
433 | 
434 |         this.selectionStarted = true
435 |         this.selectingItems.add(item)
436 | 
437 |         return { updateSelecting: true }
438 |       }
439 |     }
440 | 
441 |     if (!isFromClick && !isCollided && isSelecting) {
442 |       if (this.selectingItems.has(item)) {
443 |         item.setState({ isSelecting: false })
444 | 
445 |         this.selectingItems.delete(item)
446 | 
447 |         return { updateSelecting: true }
448 |       }
449 |     }
450 | 
451 |     return null
452 |   }
453 | 
454 |   clearSelection = () => {
455 |     for (const item of this.selectedItems.values()) {
456 |       item.setState({ isSelected: false })
457 |       this.selectedItems.delete(item)
458 |     }
459 | 
460 |     this.setState({ selectionMode: false })
461 |     this.props.onSelectionFinish!([...this.selectedItems])
462 |     this.props.onSelectionClear!()
463 |   }
464 | 
465 |   selectAll = () => {
466 |     this.removeIgnoredItemsFromRegistry()
467 | 
468 |     for (const item of this.registry.values()) {
469 |       if (!item.state.isSelected) {
470 |         item.setState({ isSelected: true })
471 |         this.selectedItems.add(item)
472 |       }
473 |     }
474 | 
475 |     this.setState({ selectionMode: true })
476 |     this.props.onSelectionFinish!([...this.selectedItems])
477 |   }
478 | 
479 |   isInIgnoreList(target: HTMLElement | null) {
480 |     if (!target) {
481 |       return
482 |     }
483 | 
484 |     if (this.ignoreCheckCache.get(target) !== undefined) {
485 |       return this.ignoreCheckCache.get(target)
486 |     }
487 | 
488 |     const shouldBeIgnored = this.ignoreListNodes.some(
489 |       ignoredNode => target === ignoredNode || ignoredNode.contains(target)
490 |     )
491 | 
492 |     this.ignoreCheckCache.set(target, shouldBeIgnored)
493 | 
494 |     return shouldBeIgnored
495 |   }
496 | 
497 |   removeIgnoredItemsFromRegistry() {
498 |     this.ignoreListNodes = Array.from(document.querySelectorAll(this.ignoreList.join(', ')))
499 | 
500 |     this.registry = new Set([...this.registry].filter(item => !this.isInIgnoreList(item.node)))
501 |     this.selectedItems = new Set(
502 |       [...this.selectedItems].filter(item => !this.isInIgnoreList(item.node))
503 |     )
504 |   }
505 | 
506 |   mouseDown = (e: Event) => {
507 |     const isNotLeftButtonClick =
508 |       !e.type.includes('touch') &&
509 |       !detectMouseButton(e as any, 1, {
510 |         allowAltClick: this.props.allowAltClick,
511 |         allowCtrlClick: this.props.allowCtrlClick,
512 |         allowMetaClick: this.props.allowMetaClick,
513 |         allowShiftClick: this.props.allowShiftClick,
514 |       })
515 |     if (this.mouseDownStarted || this.props.disabled || isNotLeftButtonClick) {
516 |       return
517 |     }
518 | 
519 |     this.removeIgnoredItemsFromRegistry()
520 | 
521 |     if (this.isInIgnoreList(e.target as HTMLElement)) {
522 |       this.mouseDownStarted = false
523 | 
524 |       return
525 |     }
526 | 
527 |     if (this.props.resetOnStart) {
528 |       this.clearSelection()
529 |     }
530 |     this.mouseDownStarted = true
531 |     this.mouseUpStarted = false
532 |     const evt = castTouchToMouseEvent(e)
533 | 
534 |     if (!this.props.globalMouse && !isNodeInRoot(evt.target as any, this.selectableGroup!)) {
535 |       const [bounds] = getBoundsForNode(this.selectableGroup!, this.documentScroll)
536 |       const collides = doObjectsCollide(
537 |         {
538 |           top: bounds.top,
539 |           left: bounds.left,
540 |           width: 0,
541 |           height: 0,
542 |           offsetHeight: bounds.offsetHeight,
543 |           offsetWidth: bounds.offsetWidth,
544 |         },
545 |         {
546 |           top: evt.pageY,
547 |           left: evt.pageX,
548 |           width: 0,
549 |           height: 0,
550 |           offsetWidth: 0,
551 |           offsetHeight: 0,
552 |         }
553 |       )
554 | 
555 |       if (!collides) {
556 |         return
557 |       }
558 |     }
559 | 
560 |     this.updateRootBounds()
561 |     this.updateRegistry()
562 | 
563 |     this.mouseDownData = {
564 |       target: evt.target as HTMLElement,
565 |       selectboxY: evt.clientY - this.scrollBounds!.top + this.containerScroll.scrollTop,
566 |       selectboxX: evt.clientX - this.scrollBounds!.left + this.containerScroll.scrollLeft,
567 |     }
568 | 
569 |     evt.preventDefault()
570 | 
571 |     document.addEventListener('mousemove', this.updateSelectBox)
572 |     document.addEventListener('touchmove', this.updateSelectBox)
573 |     document.addEventListener('mouseup', this.mouseUp)
574 |     document.addEventListener('touchend', this.mouseUp)
575 |   }
576 | 
577 |   preventEvent(target: HTMLElement, type: string) {
578 |     const preventHandler = (evt: Event) => {
579 |       target.removeEventListener(type, preventHandler, true)
580 |       evt.preventDefault()
581 |       evt.stopPropagation()
582 |     }
583 |     target.addEventListener(type, preventHandler, true)
584 |   }
585 | 
586 |   private mouseUp = (event: Event) => {
587 |     if (this.mouseUpStarted) {
588 |       return
589 |     }
590 | 
591 |     this.mouseUpStarted = true
592 |     this.mouseDownStarted = false
593 |     this.removeTempEventListeners()
594 | 
595 |     if (!this.mouseDownData) {
596 |       return
597 |     }
598 | 
599 |     const evt: any = castTouchToMouseEvent(event)
600 |     const { pageX, pageY } = evt
601 | 
602 |     if (!this.mouseMoved && isNodeInRoot(evt.target as HTMLElement, this.selectableGroup!)) {
603 |       this.handleClick(evt, pageY, pageX)
604 |     } else {
605 |       for (const item of this.selectingItems.values()) {
606 |         item.setState({ isSelected: true, isSelecting: false })
607 |       }
608 |       this.selectedItems = new Set([...this.selectedItems, ...this.selectingItems])
609 |       this.selectingItems.clear()
610 | 
611 |       if (evt.which === 1 && this.mouseDownData.target === evt.target) {
612 |         this.preventEvent(evt.target, 'click')
613 |       }
614 | 
615 |       this.setSelectboxState!({
616 |         x: 0,
617 |         y: 0,
618 |         width: 0,
619 |         height: 0,
620 |       })
621 |       this.props.onSelectionFinish!([...this.selectedItems])
622 |     }
623 | 
624 |     this.toggleSelectionMode()
625 |     this.cleanUp()
626 |     this.mouseMoved = false
627 |   }
628 | 
629 |   keyListener = (evt: KeyboardEvent) => {
630 |     if (evt.keyCode === 27) {
631 |       // escape
632 |       this.clearSelection()
633 |     }
634 |   }
635 | 
636 |   cleanUp() {
637 |     this.deselectionStarted = false
638 |     this.selectionStarted = false
639 | 
640 |     if (this.props.mixedDeselect) {
641 |       for (const item of this.registry.values()) {
642 |         item.deselected = false
643 |       }
644 |     }
645 |   }
646 | 
647 |   getGroupRef = (ref: HTMLElement | null) => {
648 |     this.selectableGroup = ref
649 |   }
650 | 
651 |   getSelectboxSetState = (setState: TSetSelectboxState) => {
652 |     this.setSelectboxState = setState
653 |   }
654 | 
655 |   // eslint-disable-next-line react/sort-comp
656 |   defaultContainerStyle: CSSProperties = {
657 |     position: 'relative',
658 |   }
659 | 
660 |   contextValue = {
661 |     selectable: {
662 |       register: this.registerSelectable,
663 |       unregister: this.unregisterSelectable,
664 |       selectAll: this.selectAll,
665 |       clearSelection: this.clearSelection,
666 |       getScrolledContainer: () => this.scrollContainer,
667 |     },
668 |   }
669 | 
670 |   handleClick(evt: any, top: number, left: number) {
671 |     if (!this.props.selectOnClick) {
672 |       return
673 |     }
674 | 
675 |     const { clickClassName, allowClickWithoutSelected, onSelectionFinish } = this.props
676 |     const classNames = (evt.target as HTMLElement).classList || []
677 |     const isMouseUpOnClickElement = Array.from(classNames).includes(clickClassName!)
678 | 
679 |     if (
680 |       allowClickWithoutSelected ||
681 |       this.selectedItems.size ||
682 |       isMouseUpOnClickElement ||
683 |       evt.ctrlKey
684 |     ) {
685 |       this.selectItems(
686 |         {
687 |           top,
688 |           left,
689 |           width: 0,
690 |           height: 0,
691 |           offsetWidth: 0,
692 |           offsetHeight: 0,
693 |         },
694 |         { isFromClick: true }
695 |       )
696 | 
697 |       onSelectionFinish!([...this.selectedItems], this.clickedItem)
698 | 
699 |       if (evt.which === 1) {
700 |         this.preventEvent(evt.target, 'click')
701 |       }
702 |       if (evt.which === 2 || evt.which === 3) {
703 |         this.preventEvent(evt.target, 'contextmenu')
704 |       }
705 |     }
706 |   }
707 | 
708 |   render() {
709 |     const { selectionMode } = this.state
710 |     const {
711 |       component: GroupComponent = 'div',
712 |       className,
713 |       style,
714 |       selectionModeClass,
715 |       fixedPosition,
716 |       selectboxClassName,
717 |       children,
718 |     } = this.props
719 | 
720 |     return (
721 |       <SelectableGroupContext.Provider value={this.contextValue}>
722 |         <GroupComponent
723 |           ref={this.getGroupRef}
724 |           style={{ ...this.defaultContainerStyle, ...style }}
725 |           className={`${className} ${selectionMode ? selectionModeClass : ''}`}
726 |         >
727 |           {children}
728 |           <Selectbox
729 |             getSetState={this.getSelectboxSetState}
730 |             className={selectboxClassName}
731 |             fixedPosition={fixedPosition!}
732 |           />
733 |         </GroupComponent>
734 |       </SelectableGroupContext.Provider>
735 |     )
736 |   }
737 | }
738 | 


--------------------------------------------------------------------------------