Skip to content

Commit

Permalink
feat: value support any、add compareFn
Browse files Browse the repository at this point in the history
  • Loading branch information
@linxianxi
linxianxi committed Jan 30, 2024
1 parent dc2e920 commit 64baea7
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 52 deletions.
39 changes: 20 additions & 19 deletions docs/guides/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@ nav: Get Started

### Selectable

| Property | Description | Type | Default |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- |
| 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` |
| items | The collection value of all items, only the virtual list needs to be passed | (string \| number)[] | - |
| 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 | - |
| 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 | - |
| onStart | Called when selection starts | () => void | - |
| onEnd | Called when selection ends | (selectingValue: any[], { added: any[], removed: any[] }) => void | - |

### useSelectable

Expand All @@ -34,11 +34,12 @@ const { setNodeRef, isSelected, isAdding, isRemoving, isSelecting, isDragging }
});
```

| Property | Description | Type | Default |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| value | The value of the current selectable element | string \| number | - |
| disabled | Whether to disable | boolean | false |
| rule | Selection rule, collision, inclusion or customization. When customizing, the `boxPosition` is relative to the position of `scrollContainer` | `collision` \| `inclusion` \| ( boxElement: HTMLDivElement, boxPosition: { left: number; top: number; width: number; height: number }) => boolean | `collision` |
| Property | Description | Type | Default |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| value | The value of the current selectable element | any | - |
| disabled | Whether to disable | boolean | false |
| rule | Selection rule, collision, inclusion or customization. When customizing, the `boxPosition` is relative to the position of `scrollContainer` | `collision` \| `inclusion` \| ( boxElement: HTMLDivElement, boxPosition: { left: number; top: number; width: number; height: number }) => boolean | `collision` |
| compareFn | Because value supports any type, you may need to define a custom function for comparison. The default is `===` | (item: any, value: any) => boolean |

| Property | 说明 | 类型 |
| ----------- | -------------------------------------- | -------------------------------------- |
Expand Down
Loading

0 comments on commit 64baea7

Please sign in to comment.