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

feat(useSelections): add clearAll result #2357

Merged
merged 5 commits into from
Apr 25, 2024
Merged

feat(useSelections): add clearAll result #2357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
049c935
feat(useSelections): add clearAll result
lich-yoo Nov 6, 2023
f1d67f1
docs: update docs and code style
liuyib Nov 6, 2023
5c4dcba
Merge branch 'master' into feature/useSelections-clearAll
liuyib Apr 24, 2024
28e02f8
refactor: resolve conflict
liuyib Apr 24, 2024
00586b0
docs: update
liuyib Apr 24, 2024
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
34 changes: 34 additions & 0 deletions packages/hooks/src/useSelections/__tests__/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { act, renderHook } from '@testing-library/react';
import { useState } from 'react';
import useSelections from '../index';
import type { Options } from '../index';

Expand Down Expand Up @@ -193,4 +194,37 @@ describe('useSelections', () => {
expect(result.current.selected).toEqual(_selected);
expect(result.current.isSelected(_selectedItem)).toBe(true);
});

it('clearAll should work correct', async () => {
const { result } = renderHook(() => {
const [list, setList] = useState(data);
const hook = useSelections(list);
return { setList, hook };
});
const { setSelected, unSelectAll, clearAll } = result.current.hook;

act(() => {
setSelected([1, 2, 3]);
});
expect(result.current.hook.selected).toEqual([1, 2, 3]);
expect(result.current.hook.allSelected).toBe(true);

act(() => {
result.current.setList([3, 4, 5]);
});
expect(result.current.hook.allSelected).toBe(false);

act(() => {
unSelectAll();
});
expect(result.current.hook.selected).toEqual([1, 2]);

act(() => {
clearAll();
});
expect(result.current.hook.selected).toEqual([]);
expect(result.current.hook.allSelected).toEqual(false);
expect(result.current.hook.noneSelected).toBe(true);
expect(result.current.hook.partiallySelected).toBe(false);
});
});
11 changes: 10 additions & 1 deletion packages/hooks/src/useSelections/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ const result: Result = useSelections<T>(items: T[], options?: Options<T>);
const result: Result = useSelections<T>(items: T[], defaultSelected?: T[]);
```

### Params

<!-- prettier-ignore -->
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| items | Data items | `T[]` | - |
| options | Optional configuration | `Options` | - |

### Options

<!-- prettier-ignore -->
Expand All @@ -48,7 +56,7 @@ const result: Result = useSelections<T>(items: T[], defaultSelected?: T[]);

| Property | Description | Type |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| selected | Selected Items | `T[]` |
| selected | Selected items | `T[]` |
| allSelected | Is all items selected | `boolean` |
| noneSelected | Is no item selected | `boolean` |
| partiallySelected | Is partially items selected | `boolean` |
Expand All @@ -60,3 +68,4 @@ const result: Result = useSelections<T>(items: T[], defaultSelected?: T[]);
| selectAll | Select all items | `() => void` |
| unSelectAll | UnSelect all items | `() => void` |
| toggleAll | Toggle select all items | `() => void` |
| clearAll | Clear all selected (In general, `clearAll` is equivalent to `unSelectAll`. If the items is dynamic, `clearAll` will clear "all selected data", while `unSelectAll` will only clear "the currently selected data in the items") | `() => void` |
6 changes: 6 additions & 0 deletions packages/hooks/src/useSelections/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@ export default function useSelections<T>(items: T[], options?: T[] | Options<T>)

const toggleAll = () => (allSelected ? unSelectAll() : selectAll());

const clearAll = () => {
selectedMap.clear();
setSelected([]);
};

return {
selected,
noneSelected,
Expand All @@ -106,6 +111,7 @@ export default function useSelections<T>(items: T[], options?: T[] | Options<T>)
toggle: useMemoizedFn(toggle),
selectAll: useMemoizedFn(selectAll),
unSelectAll: useMemoizedFn(unSelectAll),
clearAll: useMemoizedFn(clearAll),
toggleAll: useMemoizedFn(toggleAll),
} as const;
}
37 changes: 23 additions & 14 deletions packages/hooks/src/useSelections/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ const result: Result = useSelections<T>(items: T[], options?: Options<T>);
const result: Result = useSelections<T>(items: T[], defaultSelected?: T[]);
```

### Params

<!-- prettier-ignore -->
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| items | 元素列表 | `T[]` | - |
| options | 可选配置项 | `Options` | - |

### Options

<!-- prettier-ignore -->
Expand All @@ -46,17 +54,18 @@ const result: Result = useSelections<T>(items: T[], defaultSelected?: T[]);

### Result

| 参数 | 说明 | 类型 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| selected | 已经选择的元素 | `T[]` |
| allSelected | 是否全选 | `boolean` |
| noneSelected | 是否一个都没有选择 | `boolean` |
| partiallySelected | 是否半选 | `boolean` |
| isSelected | 是否被选择 | `(value: T) => boolean` |
| setSelected | 选择多个元素。多次执行时，后面的返回值会覆盖前面的，因此如果希望合并多次操作的结果，需要手动处理：`setSelected((oldArray) => oldArray.concat(newArray))` | `(value: T[]) => void \| (value: (prevState: T[]) => T[]) => void` |
| select | 选择单个元素 | `(value: T) => void` |
| unSelect | 取消选择单个元素 | `(value: T) => void` |
| toggle | 反选单个元素 | `(value: T) => void` |
| selectAll | 选择全部元素 | `() => void` |
| unSelectAll | 取消选择全部元素 | `() => void` |
| toggleAll | 反选全部元素 | `() => void` |
| 参数 | 说明 | 类型 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| selected | 已经选择的元素 | `T[]` |
| allSelected | 是否全选 | `boolean` |
| noneSelected | 是否一个都没有选择 | `boolean` |
| partiallySelected | 是否半选 | `boolean` |
| isSelected | 是否被选择 | `(value: T) => boolean` |
| setSelected | 选择多个元素。多次执行时，后面的返回值会覆盖前面的，因此如果希望合并多次操作的结果，需要手动处理：`setSelected((oldArray) => oldArray.concat(newArray))` | `(value: T[]) => void \| (value: (prevState: T[]) => T[]) => void` |
| select | 选择单个元素 | `(value: T) => void` |
| unSelect | 取消选择单个元素 | `(value: T) => void` |
| toggle | 反选单个元素 | `(value: T) => void` |
| selectAll | 选择全部元素 | `() => void` |
| unSelectAll | 取消选择全部元素 | `() => void` |
| toggleAll | 反选全部元素 | `() => void` |
| clearAll | 清除所有选中元素（一般情况下，`clearAll` 等价于 `unSelectAll`。如果元素列表是动态的，则 `clearAll` 会清除掉“所有选中过的元素”，而 `unSelectAll` 只会清除掉“当前元素列表里选中的元素”） | `() => void` |
Loading