Refactor drag selection: Replace external library with custom implementation and add auto-scroll (#12134)
Closes #12076 Closes #11764 Replaced the `@air/react-drag-to-select` library with a custom implementation to get better control over the selection behavior and add auto-scroll functionality. **What changed:** - Removed external drag selection dependency - Built custom drag selection from scratch using pointer events -- @charlesBochet - Added auto-scroll when dragging near container edges - Fixed boundary detection so selection stays within intended areas - Added proper `data-select-disable` support for checkboxes and other non-selectable elements The new implementation gives us full control over the selection logic and eliminates the external dependency while adding the auto-scroll feature that was **not** requested 😂 **Auto Scroll** https://github.com/user-attachments/assets/3509966d-5b6e-4f6c-a77a-f9a2bf26049f related to #12076 https://github.com/user-attachments/assets/2837f80e-728c-4739-a0e2-b8d7bc83a21a **Also fixed:** - Record board column height not extending to the bottom (styling issue I found while working on this) before: <img width="1512" alt="Screenshot 2025-05-19 at 23 58 54" src="https://github.com/user-attachments/assets/602b310f-7ef6-44f6-99e9-da5ff59b31d3" /> after: <img width="1512" alt="Screenshot 2025-05-19 at 23 56 40" src="https://github.com/user-attachments/assets/1d0ecb5c-49e0-4f03-be3b-154a6f16a7a4" /> --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
20
yarn.lock
20
yarn.lock
@ -24,18 +24,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@air/react-drag-to-select@npm:^5.0.8":
|
||||
version: 5.0.8
|
||||
resolution: "@air/react-drag-to-select@npm:5.0.8"
|
||||
dependencies:
|
||||
react-style-object-to-css: "npm:^1.1.2"
|
||||
peerDependencies:
|
||||
react: 16 - 18
|
||||
react-dom: 16 - 18
|
||||
checksum: 10c0/a7005e863ab0dc93ae789a8093d8284f6f4c519a8f23c54136f493e014b2a10dcab42c83521e75a83fdac5806d55a38f417b108386c684b050a4fbc4071fb419
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@algolia/autocomplete-core@npm:1.9.3":
|
||||
version: 1.9.3
|
||||
resolution: "@algolia/autocomplete-core@npm:1.9.3"
|
||||
@ -50271,13 +50259,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-style-object-to-css@npm:^1.1.2":
|
||||
version: 1.1.2
|
||||
resolution: "react-style-object-to-css@npm:1.1.2"
|
||||
checksum: 10c0/c2154dd99723dbc2c359a167401d65b8bae300b9e7ed0c7609b617340d941faa4af822d855257b6f0e36522e30665650c7263f4ed8d556217e246048fbc7bb7c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-style-singleton@npm:^2.2.1":
|
||||
version: 2.2.1
|
||||
resolution: "react-style-singleton@npm:2.2.1"
|
||||
@ -55783,7 +55764,6 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "twenty@workspace:."
|
||||
dependencies:
|
||||
"@air/react-drag-to-select": "npm:^5.0.8"
|
||||
"@apollo/client": "npm:^3.7.17"
|
||||
"@apollo/server": "npm:^4.7.3"
|
||||
"@aws-sdk/client-lambda": "npm:^3.614.0"
|
||||
|
||||
Reference in New Issue
Block a user