([]);
36 | const [mode, setMode] = useState<'add' | 'remove'>('add');
37 |
38 | useEffect(() => {
39 | const onKeyDown = (e: KeyboardEvent) => {
40 | if (e.key === 'Shift') {
41 | setMode('remove');
42 | }
43 | };
44 |
45 | const onKeyUp = () => {
46 | setMode('add');
47 | };
48 |
49 | document.addEventListener('keydown', onKeyDown);
50 | document.addEventListener('keyup', onKeyUp);
51 |
52 | return () => {
53 | document.removeEventListener('keydown', onKeyDown);
54 | document.removeEventListener('keyup', onKeyUp);
55 | };
56 | }, []);
57 |
58 | return (
59 | {
63 | const result = value.concat(added).filter((i) => !removed.includes(i));
64 | setValue(result);
65 | }}
66 | >
67 |
76 | {list.map((i) => (
77 |
80 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/docs/examples/sort.tsx:
--------------------------------------------------------------------------------
1 | // should use these versions https://github.com/clauderic/dnd-kit/issues/901#issuecomment-1340687113
2 | import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
3 | import { SortableContext, useSortable } from '@dnd-kit/sortable';
4 | import { CSS } from '@dnd-kit/utilities';
5 | import { useState } from 'react';
6 | import Selectable, { useSelectable } from 'react-selectable-box';
7 |
8 | const list: string[] = [];
9 | for (let i = 0; i < 200; i++) {
10 | list.push(String(i));
11 | }
12 |
13 | const Item = ({
14 | value,
15 | disabled,
16 | onClick,
17 | }: {
18 | value: string;
19 | disabled?: boolean;
20 | onClick: (isSelected: boolean) => void;
21 | }) => {
22 | const {
23 | setNodeRef: setSelectNodeRef,
24 | isSelected,
25 | isAdding,
26 | } = useSelectable({
27 | value,
28 | });
29 |
30 | const {
31 | attributes,
32 | listeners,
33 | setNodeRef: setSortNodeRef,
34 | transform,
35 | transition,
36 | isDragging,
37 | } = useSortable({
38 | id: value,
39 | disabled,
40 | });
41 |
42 | return (
43 | {
47 | setSelectNodeRef(ref);
48 | setSortNodeRef(ref);
49 | }}
50 | style={{
51 | display: 'flex',
52 | justifyContent: 'center',
53 | alignItems: 'center',
54 | position: 'relative',
55 | color: 'white',
56 | width: 50,
57 | height: 50,
58 | borderRadius: 4,
59 | transform: CSS.Transform.toString(transform),
60 | transition,
61 | cursor: isSelected ? 'move' : undefined,
62 | border: isAdding ? '1px solid #1677ff' : undefined,
63 | opacity: isDragging ? 0.5 : undefined,
64 | background: isSelected ? '#1677ff' : '#ccc',
65 | }}
66 | onClick={() => onClick(isSelected)}
67 | >
68 | {value}
69 |
70 | );
71 | };
72 |
73 | export default () => {
74 | const [value, setValue] = useState([]);
75 | const [items, setItems] = useState(list);
76 | const [beforeSortItems, setBeforeSortItems] = useState([]);
77 | const [activeId, setActiveId] = useState(null);
78 |
79 | const sensors = useSensors(
80 | useSensor(PointerSensor, {
81 | activationConstraint: {
82 | // make item click event available
83 | distance: 1,
84 | },
85 | }),
86 | );
87 |
88 | return (
89 | {
92 | const index = event.active.data.current?.sortable.index as number;
93 | setActiveId(items[index]);
94 | let unSelectItems: string[] = items.filter((item) => !value.includes(item));
95 | unSelectItems.splice(index, 0, items[index]);
96 | setBeforeSortItems(items);
97 | setItems(unSelectItems);
98 | }}
99 | onDragEnd={(event) => {
100 | setActiveId(null);
101 | if (event.over) {
102 | const index = event.over?.data.current?.sortable.index;
103 | const newItems = items.filter((item) => !value.includes(item));
104 | const sortValue = beforeSortItems.filter((item) => value.includes(item));
105 | newItems.splice(index, 0, ...sortValue);
106 | setItems(newItems);
107 | } else {
108 | setItems(beforeSortItems);
109 | }
110 | setValue([]);
111 | }}
112 | >
113 |
114 | {
118 | const result = value.concat(added).filter((i) => !removed.includes(i));
119 | setValue(result);
120 | }}
121 | >
122 |
132 | {items.map((i) => (
133 |
- {
138 | if (isSelected) {
139 | setValue(value.filter((val) => val !== i));
140 | } else {
141 | setValue(value.concat(i));
142 | }
143 | }}
144 | />
145 | ))}
146 |
147 |
148 | {activeId ? (
149 |
160 | {activeId}
161 |
175 | {value.length}
176 |
177 |
32 | {value}
33 |
34 | );
35 | };
36 |
37 | export default () => {
38 | const [value, setValue] = useState([]);
39 |
40 | const parentRef = React.useRef(null);
41 |
42 | const rowVirtualizer = useVirtualizer({
43 | count: Math.ceil(list.length / columnCount),
44 | getScrollElement: () => parentRef.current,
45 | estimateSize: () => 50,
46 | gap: 20,
47 | });
48 |
49 | return (
50 | document.querySelector('.container') as HTMLElement}
54 | onEnd={(selectingValue, { added, removed }) => {
55 | const result = value.concat(added).filter((i) => !removed.includes(i));
56 | setValue(result);
57 | }}
58 | >
59 |
67 |
74 | {rowVirtualizer.getVirtualItems().map((virtualItem) => (
75 |
88 | {list
89 | .slice(virtualItem.index * columnCount, (virtualItem.index + 1) * columnCount)
90 | .map((item) => (
91 |
94 | ))}
95 |
96 |
43 | {list.map((i) => (
44 |
47 | ,
48 | );
49 | expect(container.querySelector('#wrapper')).toBeInTheDocument();
50 | unmount();
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/tests/test-setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
3 | /* eslint-disable global-require */
4 | if (typeof window !== 'undefined') {
5 | /**
6 | * ref: https://github.com/vitest-dev/vitest/issues/821#issuecomment-1046954558
7 | * ref: https://github.com/ant-design/ant-design/issues/18774
8 | */
9 | if (!window.matchMedia) {
10 | Object.defineProperty(global.window, 'matchMedia', {
11 | value: vi.fn((query) => ({
12 | matches: query.includes('max-width'),
13 | addListener: () => {},
14 | addEventListener: () => {},
15 | removeListener: () => {},
16 | removeEventListener: () => {},
17 | })),
18 | });
19 | }
20 | // ref: https://github.com/NickColley/jest-axe/issues/147#issuecomment-758804533
21 | const { getComputedStyle } = window;
22 | window.getComputedStyle = (elt) => getComputedStyle(elt);
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig-check.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "noEmit": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src", "tests", ".dumi/**/*", ".dumirc.ts", "*.ts", "docs"],
3 | "compilerOptions": {
4 | "strict": true,
5 | "declaration": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "target": "ES2015",
9 | "moduleResolution": "Node",
10 | "resolveJsonModule": true,
11 | "jsx": "react-jsx",
12 | "baseUrl": ".",
13 | "types": ["vitest/globals"],
14 | "paths": {
15 | "@@/*": [".dumi/tmp/*"],
16 | "@/*": ["src"],
17 | "react-selectable-box": ["src"],
18 | "react-selectable-box/*": ["src/*", "*"]
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 | import { name } from './package.json';
3 |
4 | export default defineConfig({
5 | test: {
6 | setupFiles: './tests/test-setup.ts',
7 | environment: 'jsdom',
8 | globals: true,
9 | alias: {
10 | '@': './src',
11 | [name]: './src',
12 | },
13 | coverage: {
14 | reporter: ['text', 'text-summary', 'json', 'lcov'],
15 | include: ['src/**/*'],
16 | },
17 | },
18 | });
19 |
--------------------------------------------------------------------------------