Skip to content

Commit

Permalink
feat: support dragContainer、scrollContainer, deprecate getContainer (#19
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@linxianxi
linxianxi authored Jan 18, 2024
1 parent 3993fbf commit 77f4acb
Show file tree
Hide file tree
Showing 16 changed files with 124 additions and 95 deletions.
6 changes: 4 additions & 2 deletions docs/examples/basic.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Descriptions, Radio, Switch } from 'antd';
import React, { useState } from 'react';
import { useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -28,7 +28,7 @@ const Item = ({ value, rule }: { value: string; rule: 'collision' | 'inclusion'
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);
const [mode, setMode] = useState<'add' | 'remove' | 'reverse'>('add');
const [selectStartRange, setSelectStartRange] = useState<'all' | 'inside' | 'outside'>('all');
const [enable, setEnable] = useState(true);
Expand Down Expand Up @@ -94,13 +94,15 @@ export default () => {
disabled={!enable}
mode={mode}
value={value}
dragContainer={() => document.getElementById('drag-container') as HTMLElement}
selectStartRange={selectStartRange}
onEnd={(selectingValue, { added, removed }) => {
const result = value.concat(added).filter((i) => !removed.includes(i));
setValue(result);
}}
>
<div
id="drag-container"
style={{
display: 'flex',
flexWrap: 'wrap',
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/click-to-select.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -27,7 +27,7 @@ const Item = ({ value, onClick }: { value: string; onClick: (isSelected: boolean
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);

return (
<Selectable
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/item-disabled.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -28,7 +28,7 @@ const Item = ({ value }: { value: string }) => {
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);

return (
<Selectable
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/reset-at-end.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -26,7 +26,7 @@ const Item = ({ value }: { value: string }) => {
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);

return (
<Selectable
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/reset-at-start.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -26,7 +26,7 @@ const Item = ({ value }: { value: string }) => {
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);

return (
<Selectable
Expand Down
8 changes: 4 additions & 4 deletions docs/examples/scroll-container.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -26,7 +26,7 @@ const Item = ({ value }: { value: string }) => {
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);

return (
<Selectable
Expand All @@ -35,10 +35,10 @@ export default () => {
const result = value.concat(added).filter((i) => !removed.includes(i));
setValue(result);
}}
getContainer={() => document.querySelector('.scroll-container') as HTMLElement}
scrollContainer={() => document.getElementById('.scroll-container') as HTMLElement}
>
<div
className="scroll-container"
id="scroll-container"
style={{
position: 'relative',
display: 'flex',
Expand Down
4 changes: 2 additions & 2 deletions docs/examples/shift-remove.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import Selectable, { useSelectable } from 'react-selectable-box';

const list: string[] = [];
Expand Down Expand Up @@ -26,7 +26,7 @@ const Item = ({ value }: { value: string }) => {
};

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);
const [mode, setMode] = useState<'add' | 'remove'>('add');

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/virtual-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const List: React.ForwardRefExoticComponent<
});

export default () => {
const [value, setValue] = useState<React.Key[]>([]);
const [value, setValue] = useState<string[]>([]);

return (
<Selectable
Expand Down
25 changes: 13 additions & 12 deletions docs/guides/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,19 @@ nav: Get Started

### Selectable

| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- |
| defaultValue | Initial selected option | (string \| number)[] | - |
| value | Current selected option | (string \| number)[] | - |
| disabled | Whether to disable | boolean | false |
| mode | Selection mode | `add` \| `remove` \| `reverse` | `add` |
| selectStartRange | Where to start with box selection | `all` \| `inside` \| `outside` | `all` |
| getContainer | Specify the container. After setting, the container needs to set `position`, because the selection box is `absolute` | () => HTMLElement | () => document.body |
| boxStyle | Selection box style | React.CSSProperties | - |
| boxClassName | Selection box className | string | - |
| onStart | Called when selection starts | () => void | - |
| onEnd | Called when selection ends | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- |
| defaultValue | Initial selected option | (string \| number)[] | - |
| value | Current selected option | (string \| number)[] | - |
| disabled | Whether to disable | boolean | false |
| mode | Selection mode | `add` \| `remove` \| `reverse` | `add` |
| 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 | - |
| onStart | Called when selection starts | () => void | - |
| onEnd | Called when selection ends | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | - |

### useSelectable

Expand Down
25 changes: 13 additions & 12 deletions docs/guides/api.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,19 @@ nav: 快速上手

### Selectable

| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- |
| defaultValue | 默认已选择的值 | (string \| number)[] | - |
| value | 受控已选择的值 | (string \| number)[] | - |
| disabled | 是否禁用 | boolean | false |
| mode | 模式 | `add` \| `remove` \| `reverse` | `add` |
| selectStartRange | 从哪里可以开始进行框选 | `all` \| `inside` \| `outside` | `all` |
| getContainer | 指定容器，设置后，容器需要设置 `position`，因为选择框是 `absolute` 要相对于容器定位 | () => HTMLElement | () => document.body |
| boxStyle | 框选框的样式 | React.CSSProperties | - |
| boxClassName | 框选框的类名 | string | - |
| onStart | 框选开始时触发的事件 | () => void | - |
| onEnd | 框选结束时触发的事件 | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- |
| defaultValue | 默认已选择的值 | (string \| number)[] | - |
| value | 受控已选择的值 | (string \| number)[] | - |
| disabled | 是否禁用 | boolean | false |
| mode | 模式 | `add` \| `remove` \| `reverse` | `add` |
| selectStartRange | 从哪里可以开始进行框选 | `all` \| `inside` \| `outside` | `all` |
| scrollContainer | 指定滚动的容器，设置后，容器需要设置 `position`，因为选择框是 `absolute` 要相对于容器定位 | () => HTMLElement |
| dragContainer | 指定可以开始拖拽的容器， 如果设置了 `scrollContainer` 请不要设置，因为在可滚动容器中这两个应该相等 | () => HTMLElement | scrollContainer |
| boxStyle | 框选框的样式 | React.CSSProperties | - |
| boxClassName | 框选框的类名 | string | - |
| onStart | 框选开始时触发的事件 | () => void | - |
| onEnd | 框选结束时触发的事件 | (selectingValue: (string \| number)[], { added: (string \| number)[], removed: (string \| number)[] }) => void | - |

### useSelectable

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"concurrently": "^7",
"cross-env": "^7",
"dumi": "^2",
"dumi-theme-antd-style": "latest",
"dumi-theme-antd-style": "^0.29.7",
"eslint": "^8",
"father": "^4",
"husky": "^8",
Expand Down
Loading

0 comments on commit 77f4acb

Please sign in to comment.