From 765cc47752b0c6746bf95161774626a526090b24 Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Sat, 2 Sep 2023 23:21:43 +0800 Subject: [PATCH] fix: box should not exceed the container --- README.md | 14 ++- docs/examples/basic.tsx | 87 +++++++-------- docs/examples/click-to-select.tsx | 8 +- docs/examples/item-disabled.tsx | 56 ++++++++++ docs/examples/reset-at-end.tsx | 8 +- docs/examples/reset-at-start.tsx | 8 +- docs/examples/scroll-container.tsx | 8 +- docs/examples/shift-remove.tsx | 8 +- docs/examples/sort.tsx | 147 ++++++++++++++++++++++++++ docs/examples/virtual-list.tsx | 8 +- docs/guides/basic.md | 2 +- docs/guides/click-to-select.md | 2 +- docs/guides/item-disabled.md | 11 ++ docs/guides/item-disabled.zh-CN.md | 11 ++ docs/guides/reset-at-end.md | 4 +- docs/guides/reset-at-end.zh-CN.md | 2 +- docs/guides/reset-at-start.md | 4 +- docs/guides/reset-at-start.zh-CN.md | 2 +- docs/guides/scroll-container.md | 4 +- docs/guides/scroll-container.zh-CN.md | 2 +- docs/guides/shift-remove.md | 2 +- docs/guides/shift-remove.zh-CN.md | 2 +- docs/guides/sort.md | 11 ++ docs/guides/sort.zh-CN.md | 11 ++ docs/guides/virtual-list.md | 4 +- docs/guides/virtual-list.zh-CN.md | 4 +- package.json | 3 + pnpm-lock.yaml | 112 +++++++++++++++----- src/Selectable.tsx | 10 +- 29 files changed, 418 insertions(+), 137 deletions(-) create mode 100644 docs/examples/item-disabled.tsx create mode 100644 docs/examples/sort.tsx create mode 100644 docs/guides/item-disabled.md create mode 100644 docs/guides/item-disabled.zh-CN.md create mode 100644 docs/guides/sort.md create mode 100644 docs/guides/sort.zh-CN.md diff --git a/README.md b/README.md index 26f02a7..9b86e8a 100644 --- a/README.md +++ b/README.md @@ -46,27 +46,25 @@ A React component that allows you to select elements in the drag area using the -## 简介 +## Introduction A React component that allows you to select elements in the drag area using the mouse -## 快速上手 +## Usage -### 安装 - -推荐使用 `pnpm` 安装 +### Install ```bash pnpm i react-selectable-box ``` -### 使用 +### Docs [docs](https://linxianxi.github.io/react-selectable-box/) -## 迭代记录 +## Changelog -详情:[CHANGELOG](https://linxianxi.github.io/react-selectable-box/changelog) +[CHANGELOG](https://linxianxi.github.io/react-selectable-box/changelog)
diff --git a/docs/guides/click-to-select.md b/docs/guides/click-to-select.md
index d06f81b..a00aa96 100644
--- a/docs/guides/click-to-select.md
+++ b/docs/guides/click-to-select.md
@@ -6,6 +6,6 @@ group:
order: 5
---
-### click to select
+### You can add a click event to the item to achieve click selection
diff --git a/docs/guides/item-disabled.md b/docs/guides/item-disabled.md
new file mode 100644
index 0000000..ec04863
--- /dev/null
+++ b/docs/guides/item-disabled.md
@@ -0,0 +1,11 @@
+---
+title: item disabled
+group:
+ title: examples
+ order: 1
+order: 1
+---
+
+### Set some items to be unselectable
+
+
diff --git a/docs/guides/item-disabled.zh-CN.md b/docs/guides/item-disabled.zh-CN.md
new file mode 100644
index 0000000..5fe6207
--- /dev/null
+++ b/docs/guides/item-disabled.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: item disabled
+group:
+ title: examples
+ order: 1
+order: 1
+---
+
+### 设置某些项不可选择
+
+
diff --git a/docs/guides/reset-at-end.md b/docs/guides/reset-at-end.md
index 30a2290..9988740 100644
--- a/docs/guides/reset-at-end.md
+++ b/docs/guides/reset-at-end.md
@@ -3,9 +3,9 @@ title: reset at end
group:
title: examples
order: 1
-order: 2
+order: 3
---
-### reset at end
+### Reset previous selection when box selection ends
diff --git a/docs/guides/reset-at-end.zh-CN.md b/docs/guides/reset-at-end.zh-CN.md
index f2483c4..4851fd5 100644
--- a/docs/guides/reset-at-end.zh-CN.md
+++ b/docs/guides/reset-at-end.zh-CN.md
@@ -3,7 +3,7 @@ title: 框选结束时重置
group:
title: 示例
order: 1
-order: 2
+order: 3
---
### 框选结束时重置之前的选择
diff --git a/docs/guides/reset-at-start.md b/docs/guides/reset-at-start.md
index 0cdf54c..f48e540 100644
--- a/docs/guides/reset-at-start.md
+++ b/docs/guides/reset-at-start.md
@@ -3,9 +3,9 @@ title: reset at start
group:
title: examples
order: 1
-order: 1
+order: 2
---
-### reset at start
+### Reset previous selection when box selection starts
diff --git a/docs/guides/reset-at-start.zh-CN.md b/docs/guides/reset-at-start.zh-CN.md
index dfab8c0..83a1cde 100644
--- a/docs/guides/reset-at-start.zh-CN.md
+++ b/docs/guides/reset-at-start.zh-CN.md
@@ -3,7 +3,7 @@ title: 框选开始时重置
group:
title: 示例
order: 1
-order: 1
+order: 2
---
### 框选开始时重置之前的选择
diff --git a/docs/guides/scroll-container.md b/docs/guides/scroll-container.md
index 3c87c86..28a8ca3 100644
--- a/docs/guides/scroll-container.md
+++ b/docs/guides/scroll-container.md
@@ -3,9 +3,9 @@ title: scroll-container
group:
title: examples
order: 1
-order: 3
+order: 4
---
-### scrollContainer
+### You can set the box selection container
diff --git a/docs/guides/scroll-container.zh-CN.md b/docs/guides/scroll-container.zh-CN.md
index f3ddca2..43b8d1f 100644
--- a/docs/guides/scroll-container.zh-CN.md
+++ b/docs/guides/scroll-container.zh-CN.md
@@ -3,7 +3,7 @@ title: 设置框选滚动的容器
group:
title: 示例
order: 1
-order: 3
+order: 4
---
### 可以设置框选滚动的容器
diff --git a/docs/guides/shift-remove.md b/docs/guides/shift-remove.md
index 39ec7f7..f8269a5 100644
--- a/docs/guides/shift-remove.md
+++ b/docs/guides/shift-remove.md
@@ -3,7 +3,7 @@ title: hold shift to remove
group:
title: examples
order: 1
-order: 4
+order: 6
---
### hold shift to remove
diff --git a/docs/guides/shift-remove.zh-CN.md b/docs/guides/shift-remove.zh-CN.md
index 9104538..aea6153 100644
--- a/docs/guides/shift-remove.zh-CN.md
+++ b/docs/guides/shift-remove.zh-CN.md
@@ -3,7 +3,7 @@ title: 按住 shift 框选删除
group:
title: 示例
order: 1
-order: 4
+order: 6
---
### 按住 shift 框选进行删除
diff --git a/docs/guides/sort.md b/docs/guides/sort.md
new file mode 100644
index 0000000..5271ec3
--- /dev/null
+++ b/docs/guides/sort.md
@@ -0,0 +1,11 @@
+---
+title: sort
+group:
+ title: examples
+ order: 1
+order: 8
+---
+
+### sort
+
+
diff --git a/docs/guides/sort.zh-CN.md b/docs/guides/sort.zh-CN.md
new file mode 100644
index 0000000..83b632a
--- /dev/null
+++ b/docs/guides/sort.zh-CN.md
@@ -0,0 +1,11 @@
+---
+title: sort
+group:
+ title: examples
+ order: 1
+order: 8
+---
+
+### Use `dnd-kit` to sort after selecting some options
+
+
diff --git a/docs/guides/virtual-list.md b/docs/guides/virtual-list.md
index 76cb2f0..575fd85 100644
--- a/docs/guides/virtual-list.md
+++ b/docs/guides/virtual-list.md
@@ -3,9 +3,9 @@ title: virtual-list
group:
title: examples
order: 1
-order: 6
+order: 7
---
-### virtual list
+### Box selection in a virtual list using `react-window`
diff --git a/docs/guides/virtual-list.zh-CN.md b/docs/guides/virtual-list.zh-CN.md
index 5e80eb0..dc1b647 100644
--- a/docs/guides/virtual-list.zh-CN.md
+++ b/docs/guides/virtual-list.zh-CN.md
@@ -3,9 +3,9 @@ title: 虚拟列表
group:
title: 示例
order: 1
-order: 6
+order: 7
---
-### 配合 `react-window` 实现在虚拟列表中进行框选
+### 配合 `react-window` 在虚拟列表中进行框选
diff --git a/package.json b/package.json
index c46227c..9854ddd 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,9 @@
"devDependencies": {
"@commitlint/cli": "^17",
"@commitlint/config-conventional": "^17",
+ "@dnd-kit/core": "^6.0.8",
+ "@dnd-kit/sortable": "^7.0.2",
+ "@dnd-kit/utilities": "^3.2.1",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@testing-library/jest-dom": "^5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28715d9..e54e772 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,15 @@ devDependencies:
'@commitlint/config-conventional':
specifier: ^17
version: 17.7.0
+ '@dnd-kit/core':
+ specifier: ^6.0.8
+ version: 6.0.8(react-dom@18.2.0)(react@18.2.0)
+ '@dnd-kit/sortable':
+ specifier: ^7.0.2
+ version: 7.0.2(@dnd-kit/core@6.0.8)(react@18.2.0)
+ '@dnd-kit/utilities':
+ specifier: ^3.2.1
+ version: 3.2.1(react@18.2.0)
'@semantic-release/changelog':
specifier: ^6.0.3
version: 6.0.3(semantic-release@21.0.7)
@@ -44,7 +53,7 @@ devDependencies:
version: 4.0.75(eslint@8.47.0)(styled-components@6.0.7)(stylelint@15.10.2)(typescript@5.1.6)
'@vitest/coverage-v8':
specifier: latest
- version: 0.34.1(vitest@0.34.1)
+ version: 0.34.3(vitest@0.34.3)
antd:
specifier: ^5.8.3
version: 5.8.3(react-dom@18.2.0)(react@18.2.0)
@@ -107,7 +116,7 @@ devDependencies:
version: 5.1.6
vitest:
specifier: latest
- version: 0.34.1(jsdom@22.1.0)
+ version: 0.34.3(jsdom@22.1.0)
packages:
@@ -575,6 +584,7 @@ packages:
/@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.10):
resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
engines: {node: '>=6.9.0'}
+ deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
@@ -586,6 +596,7 @@ packages:
/@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.22.10):
resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==}
engines: {node: '>=6.9.0'}
+ deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
@@ -1951,6 +1962,49 @@ packages:
engines: {node: '>=10'}
dev: true
+ /@dnd-kit/accessibility@3.0.1(react@18.2.0):
+ resolution: {integrity: sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==}
+ peerDependencies:
+ react: '>=16.8.0'
+ dependencies:
+ react: 18.2.0
+ tslib: 2.6.1
+ dev: true
+
+ /@dnd-kit/core@6.0.8(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==}
+ peerDependencies:
+ react: '>=16.8.0'
+ react-dom: '>=16.8.0'
+ dependencies:
+ '@dnd-kit/accessibility': 3.0.1(react@18.2.0)
+ '@dnd-kit/utilities': 3.2.1(react@18.2.0)
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ tslib: 2.6.1
+ dev: true
+
+ /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.0.8)(react@18.2.0):
+ resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==}
+ peerDependencies:
+ '@dnd-kit/core': ^6.0.7
+ react: '>=16.8.0'
+ dependencies:
+ '@dnd-kit/core': 6.0.8(react-dom@18.2.0)(react@18.2.0)
+ '@dnd-kit/utilities': 3.2.1(react@18.2.0)
+ react: 18.2.0
+ tslib: 2.6.1
+ dev: true
+
+ /@dnd-kit/utilities@3.2.1(react@18.2.0):
+ resolution: {integrity: sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==}
+ peerDependencies:
+ react: '>=16.8.0'
+ dependencies:
+ react: 18.2.0
+ tslib: 2.6.1
+ dev: true
+
/@emotion/babel-plugin@11.11.0:
resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
dependencies:
@@ -3961,7 +4015,7 @@ packages:
/@types/sax@1.2.4:
resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
dependencies:
- '@types/node': 17.0.45
+ '@types/node': 20.5.0
dev: true
/@types/scheduler@0.16.3:
@@ -4661,8 +4715,8 @@ packages:
- supports-color
dev: true
- /@vitest/coverage-v8@0.34.1(vitest@0.34.1):
- resolution: {integrity: sha512-lRgUwjTMr8idXEbUPSNH4jjRZJXJCVY3BqUa+LDXyJVe3pldxYMn/r0HMqatKUGTp0Kyf1j5LfFoY6kRqRp7jw==}
+ /@vitest/coverage-v8@0.34.3(vitest@0.34.3):
+ resolution: {integrity: sha512-bNjP0RHe8UxdklCigZlk6FVCNbOiqVjWnpZJ1zKixpvb7YHSaZiN/w+mzpvXIoqyxyePzKC+L+G1oj7SB20PJw==}
peerDependencies:
vitest: '>=0.32.0 <1'
dependencies:
@@ -4677,43 +4731,43 @@ packages:
std-env: 3.3.3
test-exclude: 6.0.0
v8-to-istanbul: 9.1.0
- vitest: 0.34.1(jsdom@22.1.0)
+ vitest: 0.34.3(jsdom@22.1.0)
transitivePeerDependencies:
- supports-color
dev: true
- /@vitest/expect@0.34.1:
- resolution: {integrity: sha512-q2CD8+XIsQ+tHwypnoCk8Mnv5e6afLFvinVGCq3/BOT4kQdVQmY6rRfyKkwcg635lbliLPqbunXZr+L1ssUWiQ==}
+ /@vitest/expect@0.34.3:
+ resolution: {integrity: sha512-F8MTXZUYRBVsYL1uoIft1HHWhwDbSzwAU9Zgh8S6WFC3YgVb4AnFV2GXO3P5Em8FjEYaZtTnQYoNwwBrlOMXgg==}
dependencies:
- '@vitest/spy': 0.34.1
- '@vitest/utils': 0.34.1
+ '@vitest/spy': 0.34.3
+ '@vitest/utils': 0.34.3
chai: 4.3.7
dev: true
- /@vitest/runner@0.34.1:
- resolution: {integrity: sha512-YfQMpYzDsYB7yqgmlxZ06NI4LurHWfrH7Wy3Pvf/z/vwUSgq1zLAb1lWcItCzQG+NVox+VvzlKQrYEXb47645g==}
+ /@vitest/runner@0.34.3:
+ resolution: {integrity: sha512-lYNq7N3vR57VMKMPLVvmJoiN4bqwzZ1euTW+XXYH5kzr3W/+xQG3b41xJn9ChJ3AhYOSoweu974S1V3qDcFESA==}
dependencies:
- '@vitest/utils': 0.34.1
+ '@vitest/utils': 0.34.3
p-limit: 4.0.0
pathe: 1.1.1
dev: true
- /@vitest/snapshot@0.34.1:
- resolution: {integrity: sha512-0O9LfLU0114OqdF8lENlrLsnn024Tb1CsS9UwG0YMWY2oGTQfPtkW+B/7ieyv0X9R2Oijhi3caB1xgGgEgclSQ==}
+ /@vitest/snapshot@0.34.3:
+ resolution: {integrity: sha512-QyPaE15DQwbnIBp/yNJ8lbvXTZxS00kRly0kfFgAD5EYmCbYcA+1EEyRalc93M0gosL/xHeg3lKAClIXYpmUiQ==}
dependencies:
magic-string: 0.30.2
pathe: 1.1.1
pretty-format: 29.6.2
dev: true
- /@vitest/spy@0.34.1:
- resolution: {integrity: sha512-UT4WcI3EAPUNO8n6y9QoEqynGGEPmmRxC+cLzneFFXpmacivjHZsNbiKD88KUScv5DCHVDgdBsLD7O7s1enFcQ==}
+ /@vitest/spy@0.34.3:
+ resolution: {integrity: sha512-N1V0RFQ6AI7CPgzBq9kzjRdPIgThC340DGjdKdPSE8r86aUSmeliTUgkTqLSgtEwWWsGfBQ+UetZWhK0BgJmkQ==}
dependencies:
tinyspy: 2.1.1
dev: true
- /@vitest/utils@0.34.1:
- resolution: {integrity: sha512-/ql9dsFi4iuEbiNcjNHQWXBum7aL8pyhxvfnD9gNtbjR9fUKAjxhj4AA3yfLXg6gJpMGGecvtF8Au2G9y3q47Q==}
+ /@vitest/utils@0.34.3:
+ resolution: {integrity: sha512-kiSnzLG6m/tiT0XEl4U2H8JDBjFtwVlaE8I3QfGiMFR0QvnRDfYfdP3YvTBWM/6iJDAyaPY6yVQiCTUc7ZzTHA==}
dependencies:
diff-sequences: 29.4.3
loupe: 2.3.6
@@ -16311,8 +16365,8 @@ packages:
vfile-message: 3.1.4
dev: true
- /vite-node@0.34.1(@types/node@20.5.0):
- resolution: {integrity: sha512-odAZAL9xFMuAg8aWd7nSPT+hU8u2r9gU3LRm9QKjxBEF2rRdWpMuqkrkjvyVQEdNFiBctqr2Gg4uJYizm5Le6w==}
+ /vite-node@0.34.3(@types/node@20.5.0):
+ resolution: {integrity: sha512-+0TzJf1g0tYXj6tR2vEyiA42OPq68QkRZCu/ERSo2PtsDJfBpDyEfuKbRvLmZqi/CgC7SCBtyC+WjTGNMRIaig==}
engines: {node: '>=v14.18.0'}
hasBin: true
dependencies:
@@ -16404,8 +16458,8 @@ packages:
fsevents: 2.3.2
dev: true
- /vitest@0.34.1(jsdom@22.1.0):
- resolution: {integrity: sha512-G1PzuBEq9A75XSU88yO5G4vPT20UovbC/2osB2KEuV/FisSIIsw7m5y2xMdB7RsAGHAfg2lPmp2qKr3KWliVlQ==}
+ /vitest@0.34.3(jsdom@22.1.0):
+ resolution: {integrity: sha512-7+VA5Iw4S3USYk+qwPxHl8plCMhA5rtfwMjgoQXMT7rO5ldWcdsdo3U1QD289JgglGK4WeOzgoLTsGFu6VISyQ==}
engines: {node: '>=v14.18.0'}
hasBin: true
peerDependencies:
@@ -16438,11 +16492,11 @@ packages:
'@types/chai': 4.3.5
'@types/chai-subset': 1.3.3
'@types/node': 20.5.0
- '@vitest/expect': 0.34.1
- '@vitest/runner': 0.34.1
- '@vitest/snapshot': 0.34.1
- '@vitest/spy': 0.34.1
- '@vitest/utils': 0.34.1
+ '@vitest/expect': 0.34.3
+ '@vitest/runner': 0.34.3
+ '@vitest/snapshot': 0.34.3
+ '@vitest/spy': 0.34.3
+ '@vitest/utils': 0.34.3
acorn: 8.10.0
acorn-walk: 8.2.0
cac: 6.7.14
@@ -16458,7 +16512,7 @@ packages:
tinybench: 2.5.0
tinypool: 0.7.0
vite: 4.4.9(@types/node@20.5.0)
- vite-node: 0.34.1(@types/node@20.5.0)
+ vite-node: 0.34.3(@types/node@20.5.0)
why-is-node-running: 2.2.2
transitivePeerDependencies:
- less
diff --git a/src/Selectable.tsx b/src/Selectable.tsx
index 0f3ae3c..5c2020f 100644
--- a/src/Selectable.tsx
+++ b/src/Selectable.tsx
@@ -87,10 +87,10 @@ const Selectable = forwardRef