Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: automatically add position to scrollContainer during frame sele… #27

Merged
merged 1 commit into from
Feb 1, 2024
Merged

feat: automatically add position to scrollContainer during frame sele… #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions docs/guides/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ nav: Get Started

### Selectable

| Property | Description | Type | Default |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------- |
| defaultValue | Initial selected option | any[] | - |
| value | Current selected option | any[] | - |
| disabled | Whether to disable | boolean | false |
| mode | Selection mode | `add` \| `remove` \| `reverse` | `add` |
| items | The collection value of all items, only the virtual list needs to be passed | any[] | - |
| selectStartRange | Where to start with box selection | `all` \| `inside` \| `outside` | `all` |
| scrollContainer | Specify the scrolling container. After setting, the container needs to set `position` because the selection box is `absolute` and needs to be positioned relative to the container. | () => HTMLElement |
| dragContainer | Specify the container that can start dragging. If `scrollContainer` is set, please do not set it because the two should be equal in a scrollable container. | () => HTMLElement | scrollContainer |
| boxStyle | Selection box style | React.CSSProperties | - |
| boxClassName | Selection box className | string | - |
| compareFn | Because value supports any type, you may need to define a custom function for comparison. The default is `===` | (item: any, value: any) => boolean |
| onStart | Called when selection starts | () => void | - |
| onEnd | Called when selection ends | (selectingValue: any[], { added: any[], removed: any[] }) => void | - |
| Property | Description | Type | Default |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------- |
| defaultValue | Initial selected option | any[] | - |
| value | Current selected option | any[] | - |
| disabled | Whether to disable | boolean | false |
| mode | Selection mode | `add` \| `remove` \| `reverse` | `add` |
| items | The collection value of all items, only the virtual list needs to be passed | any[] | - |
| selectStartRange | Where to start with box selection | `all` \| `inside` \| `outside` | `all` |
| scrollContainer | Specify the scrolling container | () => HTMLElement |
| dragContainer | Specify the container that can start dragging. If `scrollContainer` is set, please do not set it because the two should be equal in a scrollable container. | () => HTMLElement | scrollContainer |
| boxStyle | Selection box style | React.CSSProperties | - |
| boxClassName | Selection box className | string | - |
| compareFn | Because value supports any type, you may need to define a custom function for comparison. The default is `===` | (item: any, value: any) => boolean |
| onStart | Called when selection starts | () => void | - |
| onEnd | Called when selection ends | (selectingValue: any[], { added: any[], removed: any[] }) => void | - |

### useSelectable

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/api.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ nav: 快速上手
| mode | 模式 | `add` \| `remove` \| `reverse` | `add` |
| items | 全部 item 的集合值，只有虚拟列表时要传 | any[] | - |
| selectStartRange | 从哪里可以开始进行框选 | `all` \| `inside` \| `outside` | `all` |
| scrollContainer | 指定滚动的容器，设置后，容器需要设置 `position`，因为选择框是 `absolute` 要相对于容器定位 | () => HTMLElement |
| scrollContainer | 指定滚动的容器 | () => HTMLElement |
| dragContainer | 指定可以开始拖拽的容器， 如果设置了 `scrollContainer` 请不要设置，因为在可滚动容器中这两个应该相等 | () => HTMLElement | scrollContainer |
| boxStyle | 框选框的样式 | React.CSSProperties | - |
| boxClassName | 框选框的类名 | string | - |
Expand Down
7 changes: 7 additions & 0 deletions src/Selectable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ function Selectable<T>(

useEffect(() => {
let isMouseDowning = false;
let scrollContainerOriginPosition = '';

const reset = () => {
setIsDragging(false);
Expand Down Expand Up @@ -197,6 +198,10 @@ function Selectable<T>(
// https://github.com/linxianxi/react-selectable-box/issues/5
if (shouldDraggingStart && (boxWidth > 1 || boxHeight > 1)) {
setIsDragging(true);
scrollContainerOriginPosition = scrollContainer.style.position;
if (scrollContainer !== document.body && !scrollContainerOriginPosition) {
scrollContainer.style.position = 'relative';
}
handleStart();
}
}
Expand Down Expand Up @@ -234,6 +239,7 @@ function Selectable<T>(
scrollListenerElement.removeEventListener('scroll', onScroll);

if (isDraggingRef.current) {
scrollContainer.style.position = scrollContainerOriginPosition;
cancelScroll();
setValue(selectingValue.current);
handleEnd();
Expand Down Expand Up @@ -266,6 +272,7 @@ function Selectable<T>(
dragContainer.addEventListener('touchstart', onMouseDown);

return () => {
scrollContainer.style.position = scrollContainerOriginPosition;
cancelScroll();
dragContainer.removeEventListener('mousedown', onMouseDown);
dragContainer.removeEventListener('touchstart', onMouseDown);
Expand Down
Loading