Avoid reflow on selectbox updates

.babelrc

@@ -4,17 +4,5 @@
     "@babel/typescript",
     ["@babel/preset-env", { "modules": false }]
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties"],
-  "env": {
-    "production": {
-      "plugins": [
-        [
-          "transform-react-remove-prop-types",
-          {
-            "removeImport": true
-          }
-        ]
-      ]
-    }
-  }
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }

.prettierrc.json

@@ -2,5 +2,6 @@
   "parser": "typescript",
   "singleQuote": true,
   "printWidth": 100,
-  "semi": false
+  "semi": false,
+  "arrowParens": "avoid"
 }

example/src/App.tsx

@@ -2,8 +2,8 @@ import React, { createRef, Component } from 'react'
 
 import { TAlbumItem } from './sample-data'
 import { SelectableGroup } from '../../src'
-import Counters from './Counters'
-import List from './List'
+import { Counters } from './Counters'
+import { List } from './List'
 
 type TAppProps = {
   items: TAlbumItem[]
@@ -19,7 +19,7 @@ class App extends Component<TAppProps, TAppState> {
   state = {
     disableFirstRow: false,
     reversed: false,
-    showSelectableGroup: true
+    showSelectableGroup: true,
   }
 
   countersRef = createRef<Counters>()
@@ -38,7 +38,7 @@ class App extends Component<TAppProps, TAppState> {
 
   toggleSelectableGroup = () => {
     this.setState(state => ({
-      showSelectableGroup: !state.showSelectableGroup
+      showSelectableGroup: !state.showSelectableGroup,
     }))
   }
 
@@ -47,10 +47,11 @@ class App extends Component<TAppProps, TAppState> {
   }
 
   handleSelectionFinish = selectedItems => {
+    console.log('Handle selection finish', selectedItems.length)
     this.countersRef.current.handleSelectionFinish(selectedItems)
   }
 
-  handleSelectedItemUnmount = (unmountedItem, selectedItems) => {
+  handleSelectedItemUnmount = (_unmountedItem, selectedItems) => {
     console.log('hadneleSelectedItemUnmount')
     this.countersRef.current.handleSelectionFinish(selectedItems)
   }

example/src/Card.tsx

@@ -1,37 +1,33 @@
-import React, { Component } from 'react'
+import React from 'react'
 
 import { createSelectable, TSelectableItemProps } from '../../src'
-import Label from './Label'
+import { Label } from './Label'
 
-type TAlbumProps = TSelectableItemProps & {
+type TAlbumProps = {
   player: string
   year: number
 }
 
 const DISABLED_CARD_YEARS = [10, 22, 27, 54, 82, 105, 150]
 
-class Card extends Component<TAlbumProps> {
-  render() {
-    const { selectableRef, isSelected, isSelecting, player, year } = this.props
+export const Card = createSelectable<TAlbumProps>((props: TSelectableItemProps & TAlbumProps) => {
+  const { selectableRef, isSelected, isSelecting, player, year } = props
 
-    const classNames = [
-      'item',
-      DISABLED_CARD_YEARS.includes(year) && 'not-selectable',
-      isSelecting && 'selecting',
-      isSelected && 'selected'
-    ]
-      .filter(Boolean)
-      .join(' ')
+  const classNames = [
+    'item',
+    DISABLED_CARD_YEARS.includes(year) && 'not-selectable',
+    isSelecting && 'selecting',
+    isSelected && 'selected',
+  ]
+    .filter(Boolean)
+    .join(' ')
 
-    return (
-      <div ref={selectableRef} className={classNames}>
-        <div className="tick">+</div>
-        <h2>{player}</h2>
-        <small>{year}</small>
-        <Label isSelected={isSelected} isSelecting={isSelecting} />
-      </div>
-    )
-  }
-}
-
-export default createSelectable(Card)
+  return (
+    <div ref={selectableRef} className={classNames}>
+      <div className="tick">+</div>
+      <h2>{player}</h2>
+      <small>{year}</small>
+      <Label isSelected={isSelected} isSelecting={isSelecting} />
+    </div>
+  )
+})

example/src/Counters.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 
-class Counters extends Component {
+export class Counters extends Component {
   state = {
     selectedItems: [],
-    selectingItems: []
+    selectingItems: [],
   }
 
   handleSelecting = selectingItems => {
@@ -15,7 +15,7 @@ class Counters extends Component {
   handleSelectionFinish = selectedItems => {
     this.setState({
       selectedItems,
-      selectingItems: []
+      selectingItems: [],
     })
 
     console.log(`Finished selection ${selectedItems.length}`)
@@ -34,5 +34,3 @@ class Counters extends Component {
     )
   }
 }
-
-export default Counters

example/src/Label.tsx

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

example/src/List.tsx

@@ -1,40 +1,32 @@
-import React, { Component } from 'react'
+import React, { memo } from 'react'
 
 import { TAlbumItem } from './sample-data'
 import { DeselectAll, SelectAll } from '../../src'
-import SelectableCard from './Card'
+import { Card } from './Card'
 
 type TListProps = {
   items: TAlbumItem[]
 }
 
-class List extends Component<TListProps> {
-  shouldComponentUpdate(nextProps: TListProps) {
-    return nextProps.items !== this.props.items
-  }
+export const List = memo((props: TListProps) => {
+  const { items } = props
 
-  render() {
-    const { items } = this.props
-
-    return (
-      <div>
-        <p className="not-selectable">Press ESC to clear selection</p>
-        <div className="button-container">
-          <SelectAll component="button" type="button" className="btn">
-            Select all
-          </SelectAll>
-          <DeselectAll component="button" type="button" className="btn">
-            Clear selection
-          </DeselectAll>
-        </div>
-        <div className="albums">
-          {items.map(item => (
-            <SelectableCard key={item.year} player={item.player} year={item.year} />
-          ))}
-        </div>
+  return (
+    <div>
+      <p className="not-selectable">Press ESC to clear selection</p>
+      <div className="button-container">
+        <SelectAll component="button" type="button" className="btn">
+          Select all
+        </SelectAll>
+        <DeselectAll component="button" type="button" className="btn">
+          Clear selection
+        </DeselectAll>
       </div>
-    )
-  }
-}
-
-export default List
+      <div className="albums">
+        {items.map(item => (
+          <Card key={item.year} player={item.player} year={item.year} />
+        ))}
+      </div>
+    </div>
+  )
+})

example/src/sample-data.ts

@@ -29,7 +29,7 @@ const players = [
   'Gary Payton',
   'Ray Allen',
   'Dwight Howard',
-  'Chris Paul'
+  'Chris Paul',
 ]
 
 export type TAlbumItem = {
@@ -39,5 +39,5 @@ export type TAlbumItem = {
 
 export const items = Array.from({ length: 500 }).map((_, index) => ({
   year: index + 1,
-  player: players[index % players.length]
+  player: players[index % players.length],
 }))

package.json

@@ -14,7 +14,7 @@
     "transpile": "tsc",
     "build:prod": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
     "prepublishOnly": "yarn lint && yarn clean && yarn build:prod && yarn transpile",
-    "prettier": "prettier --write src/**/*.{js,ts,tsx} example/src/**/*.{js,ts,tsx} .js",
+    "prettier": "prettier --write src/**/*.{ts,tsx} example/src/**/*.{ts,tsx}",
     "lint:basic": "tsc --pretty --noEmit && eslint --fix --format codeframe",
     "lint": "yarn lint:basic '{example/,}src/**/*.{ts,tsx}'",
     "format": "yarn prettier && yarn lint",
@@ -70,37 +70,35 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
-    "@types/react": "^16.9.22",
-    "@types/react-dom": "^16.9.5",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "cross-env": "^7.0.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@types/react": "^16.9.6",
+    "@types/react-dom": "^16.9.6",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
+    "babel-loader": "^8.1.0",
+    "cross-env": "^7.0.2",
     "eslint": "6.8.0",
-    "eslint-config-airbnb": "18.0.1",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-react-hooks": "^2.2.0",
-    "husky": "^4.2.3",
-    "lint-staged": "^10.0.7",
-    "prettier": "^1.18.2",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "release-it": "^12.6.1",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.1.3",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "release-it": "^13.5.2",
     "rimraf": "^3.0.2",
-    "typescript": "^3.8.2",
-    "webpack": "^4.41.6",
-    "webpack-bundle-analyzer": "^3.3.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.1",
+    "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
   }