flexitablesort 1.1.12 → 1.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +248 -72
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +247 -185
- package/package.json +89 -89
package/README.md
CHANGED
|
@@ -1,72 +1,248 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
- **
|
|
41
|
-
- **
|
|
42
|
-
- **
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
1
|
+
> ⚠️ **This package has been renamed to [react-table-dnd](https://www.npmjs.com/package/react-table-dnd).**
|
|
2
|
+
> Please migrate: `npm uninstall flexitablesort && npm install react-table-dnd`
|
|
3
|
+
> This package will no longer receive updates.
|
|
4
|
+
|
|
5
|
+
<div align="center">
|
|
6
|
+
|
|
7
|
+
# flexitablesort
|
|
8
|
+
|
|
9
|
+
<p>
|
|
10
|
+
<img src="./docs/desktop.gif" alt="flexitablesort — drag rows and columns" width="680" />
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<p><strong>Drag-and-drop row & column reordering for React tables.</strong></p>
|
|
14
|
+
|
|
15
|
+
<p>60fps animations · Auto-scroll · Mobile long-press · Virtual scrolling · Zero UI deps</p>
|
|
16
|
+
|
|
17
|
+
<p>
|
|
18
|
+
<a href="https://www.npmjs.com/package/flexitablesort"><img src="https://img.shields.io/npm/v/flexitablesort?color=6366f1&label=npm" alt="npm" /></a>
|
|
19
|
+
<a href="https://bundlephobia.com/package/flexitablesort"><img src="https://img.shields.io/bundlephobia/minzip/flexitablesort?color=6366f1&label=size" alt="bundle size" /></a>
|
|
20
|
+
<a href="https://www.npmjs.com/package/flexitablesort"><img src="https://img.shields.io/npm/dm/flexitablesort?color=6366f1" alt="downloads" /></a>
|
|
21
|
+
<a href="https://github.com/samiodeh1337/sortable-table/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/flexitablesort?color=6366f1" alt="license" /></a>
|
|
22
|
+
</p>
|
|
23
|
+
|
|
24
|
+
<p>
|
|
25
|
+
<a href="https://samiodeh1337.github.io/sortable-table/"><strong>Live Demos & Docs</strong></a>
|
|
26
|
+
·
|
|
27
|
+
<a href="#quick-start">Quick Start</a>
|
|
28
|
+
·
|
|
29
|
+
<a href="#api">API</a>
|
|
30
|
+
·
|
|
31
|
+
<a href="https://github.com/samiodeh1337/sortable-table">GitHub</a>
|
|
32
|
+
</p>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Why flexitablesort?
|
|
39
|
+
|
|
40
|
+
- **Rows & columns** — reorder both independently, automatic direction detection
|
|
41
|
+
- **60fps** — direct DOM transforms during drag, no React re-renders until drop
|
|
42
|
+
- **Mobile** — long-press to drag on touch devices, optimized for Chrome Android & Safari iOS
|
|
43
|
+
- **Auto-scroll** — accelerates when dragging near container edges
|
|
44
|
+
- **100k+ rows** — works with `@tanstack/react-virtual`
|
|
45
|
+
- **Drag handles** — restrict drag to a grip icon with `<DragHandle>`
|
|
46
|
+
- **Constraints** — lock specific rows or columns via drag range options
|
|
47
|
+
- **Drop animation** — clone smoothly flies to the drop target
|
|
48
|
+
- **Fully styleable** — `className` + `style` on every component — Tailwind, styled-components, CSS modules
|
|
49
|
+
- **TypeScript** — full type definitions out of the box
|
|
50
|
+
- **Tiny** — only peer dependency is React
|
|
51
|
+
|
|
52
|
+
## Install
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm install flexitablesort
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
> Requires `react` and `react-dom` >= 17.0.0
|
|
59
|
+
|
|
60
|
+
## Quick Start
|
|
61
|
+
|
|
62
|
+
```jsx
|
|
63
|
+
import {
|
|
64
|
+
TableContainer, TableHeader, ColumnCell,
|
|
65
|
+
TableBody, BodyRow, RowCell,
|
|
66
|
+
} from "flexitablesort";
|
|
67
|
+
|
|
68
|
+
function arrayMove(arr, from, to) {
|
|
69
|
+
const next = [...arr];
|
|
70
|
+
const [item] = next.splice(from, 1);
|
|
71
|
+
next.splice(to, 0, item);
|
|
72
|
+
return next;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export default function App() {
|
|
76
|
+
const [cols, setCols] = useState([
|
|
77
|
+
{ id: "name", label: "Name", width: 150 },
|
|
78
|
+
{ id: "age", label: "Age", width: 100 },
|
|
79
|
+
{ id: "city", label: "City", width: 160 },
|
|
80
|
+
]);
|
|
81
|
+
const [rows, setRows] = useState([
|
|
82
|
+
{ id: "1", name: "Alice", age: 28, city: "NYC" },
|
|
83
|
+
{ id: "2", name: "Bob", age: 34, city: "LA" },
|
|
84
|
+
{ id: "3", name: "Carol", age: 22, city: "SF" },
|
|
85
|
+
]);
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<TableContainer
|
|
89
|
+
onDragEnd={({ sourceIndex, targetIndex, dragType }) => {
|
|
90
|
+
if (dragType === "column") setCols(arrayMove(cols, sourceIndex, targetIndex));
|
|
91
|
+
else setRows(arrayMove(rows, sourceIndex, targetIndex));
|
|
92
|
+
}}
|
|
93
|
+
>
|
|
94
|
+
<TableHeader>
|
|
95
|
+
{cols.map((col, i) => (
|
|
96
|
+
<ColumnCell key={col.id} id={col.id} index={i} width={col.width}>
|
|
97
|
+
{col.label}
|
|
98
|
+
</ColumnCell>
|
|
99
|
+
))}
|
|
100
|
+
</TableHeader>
|
|
101
|
+
<TableBody>
|
|
102
|
+
{rows.map((row, ri) => (
|
|
103
|
+
<BodyRow key={row.id} id={row.id} index={ri}>
|
|
104
|
+
{cols.map((col, ci) => (
|
|
105
|
+
<RowCell key={col.id} index={ci} width={col.width}>
|
|
106
|
+
{row[col.id]}
|
|
107
|
+
</RowCell>
|
|
108
|
+
))}
|
|
109
|
+
</BodyRow>
|
|
110
|
+
))}
|
|
111
|
+
</TableBody>
|
|
112
|
+
</TableContainer>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## API
|
|
118
|
+
|
|
119
|
+
### Components
|
|
120
|
+
|
|
121
|
+
| Component | Props | Description |
|
|
122
|
+
|---|---|---|
|
|
123
|
+
| **`TableContainer`** | `onDragEnd`, `options`, `renderPlaceholder`, `className`, `style` | Root wrapper — provides drag context |
|
|
124
|
+
| **`TableHeader`** | `className`, `style` | Header row container |
|
|
125
|
+
| **`ColumnCell`** | **`id`**, **`index`**, `width`, `className`, `style` | Draggable column header cell |
|
|
126
|
+
| **`TableBody`** | `className`, `style` | Scrollable body — pass `ref` for virtual scrolling |
|
|
127
|
+
| **`BodyRow`** | **`id`**, **`index`**, `className`, `style` | Draggable row |
|
|
128
|
+
| **`RowCell`** | **`index`**, `width`, `className`, `style` | Cell within a row |
|
|
129
|
+
| **`DragHandle`** | `className`, `style` | Wrap inside BodyRow/ColumnCell to restrict drag to this element |
|
|
130
|
+
|
|
131
|
+
Bold props are required.
|
|
132
|
+
|
|
133
|
+
### Types
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
interface DragEndResult {
|
|
137
|
+
sourceIndex: number;
|
|
138
|
+
targetIndex: number;
|
|
139
|
+
dragType: "row" | "column";
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
interface DragRange {
|
|
143
|
+
start?: number; // first draggable index
|
|
144
|
+
end?: number; // last draggable index (exclusive)
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Options
|
|
149
|
+
|
|
150
|
+
```jsx
|
|
151
|
+
<TableContainer
|
|
152
|
+
options={{
|
|
153
|
+
rowDragRange: { start: 1 }, // lock first row
|
|
154
|
+
columnDragRange: { start: 1, end: 5 }, // lock first col, only 1-4 draggable
|
|
155
|
+
}}
|
|
156
|
+
/>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Drag Handle
|
|
160
|
+
|
|
161
|
+
```jsx
|
|
162
|
+
import { DragHandle } from "flexitablesort";
|
|
163
|
+
|
|
164
|
+
<BodyRow id="1" index={0}>
|
|
165
|
+
<RowCell index={0}>
|
|
166
|
+
<DragHandle><GripIcon /></DragHandle>
|
|
167
|
+
Content here
|
|
168
|
+
</RowCell>
|
|
169
|
+
</BodyRow>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Custom Placeholder
|
|
173
|
+
|
|
174
|
+
```jsx
|
|
175
|
+
<TableContainer
|
|
176
|
+
renderPlaceholder={() => (
|
|
177
|
+
<div style={{
|
|
178
|
+
background: "#6366f122",
|
|
179
|
+
border: "2px dashed #6366f1",
|
|
180
|
+
height: "100%",
|
|
181
|
+
}} />
|
|
182
|
+
)}
|
|
183
|
+
/>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Styling
|
|
187
|
+
|
|
188
|
+
Every component accepts `className` and `style`. No opinionated styles on cells.
|
|
189
|
+
|
|
190
|
+
<table>
|
|
191
|
+
<tr>
|
|
192
|
+
<td><strong>Inline</strong></td>
|
|
193
|
+
<td><strong>Tailwind</strong></td>
|
|
194
|
+
<td><strong>styled-components</strong></td>
|
|
195
|
+
</tr>
|
|
196
|
+
<tr>
|
|
197
|
+
<td>
|
|
198
|
+
|
|
199
|
+
```jsx
|
|
200
|
+
<ColumnCell style={{
|
|
201
|
+
padding: "0 16px",
|
|
202
|
+
fontWeight: 700,
|
|
203
|
+
}} />
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
</td>
|
|
207
|
+
<td>
|
|
208
|
+
|
|
209
|
+
```jsx
|
|
210
|
+
<ColumnCell className="px-4
|
|
211
|
+
font-bold text-sm" />
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
</td>
|
|
215
|
+
<td>
|
|
216
|
+
|
|
217
|
+
```jsx
|
|
218
|
+
const Col = styled(ColumnCell)`
|
|
219
|
+
padding: 0 16px;
|
|
220
|
+
font-weight: 700;
|
|
221
|
+
`;
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
</table>
|
|
227
|
+
|
|
228
|
+
## Browser Support
|
|
229
|
+
|
|
230
|
+
| | Chrome | Firefox | Safari | Edge |
|
|
231
|
+
|---|---|---|---|---|
|
|
232
|
+
| **Desktop** | ✅ | ✅ | ✅ | ✅ |
|
|
233
|
+
| **Mobile** | ✅ | ✅ | ✅ | ✅ |
|
|
234
|
+
|
|
235
|
+
Mobile uses long-press to initiate drag.
|
|
236
|
+
|
|
237
|
+
## Contributing
|
|
238
|
+
|
|
239
|
+
```bash
|
|
240
|
+
git clone https://github.com/samiodeh1337/sortable-table.git
|
|
241
|
+
cd sortable-table
|
|
242
|
+
npm install
|
|
243
|
+
npm run dev # docs site at localhost:5173
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
## License
|
|
247
|
+
|
|
248
|
+
[MIT](LICENSE) © [Sami Odeh](https://github.com/samiodeh1337)
|
package/dist/index.cjs.js
CHANGED
|
@@ -39,4 +39,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
|
|
|
39
39
|
cursor: -webkit-grab;
|
|
40
40
|
cursor: grab;
|
|
41
41
|
}
|
|
42
|
-
`,m=(0,c.createContext)(void 0),h=()=>{let e=(0,c.useContext)(m);if(e===void 0)throw Error(`useTable must be used within a TableProvider`);return e},g=30,_=e=>{let{headerRef:t,bodyRef:n}=e,r=(0,c.useRef)(null),i=(0,c.useRef)(!1),a=(0,c.useRef)(!1),o=(0,c.useRef)(0),s=(0,c.useRef)(null),l=(0,c.useRef)({x:0,y:0}),u=(0,c.useRef)(null),d=(0,c.useCallback)(e=>{u.current=e},[]),f=(0,c.useCallback)(()=>{a.current=!1,i.current=!1,s.current!==null&&(cancelAnimationFrame(s.current),s.current=null)},[]),p=(0,c.useCallback)((e,t,n)=>{let c=n===`vertical`,d=c?a:i;if(!d.current)return;let f=u.current;if(f){let e=l.current;if(c){let t=e.y<f.top+g,n=e.y>f.bottom-g;if(!t&&!n){d.current=!1;return}}else{let t=e.x<f.left+g,n=e.x>f.right-g;if(!t&&!n){d.current=!1;return}}}let p=c?t.scrollHeight-t.clientHeight:t.scrollWidth-t.clientWidth;c?t.scrollTop+=e:t.scrollLeft+=e;let m=c?t.scrollTop:t.scrollLeft;if(m>=p||m<=0){d.current=!1;return}o.current+=e/1e3,s.current=requestAnimationFrame(()=>r.current?.(e+o.current,t,n))},[]);return(0,c.useEffect)(()=>{r.current=p},[p]),{startAutoScroll:(0,c.useCallback)((e,t,n)=>{let r=n===`vertical`?a:i;r.current||(r.current=!0,o.current=0,s.current=requestAnimationFrame(()=>p(e,t,n)))},[p]),stopAutoScroll:f,setContainerRect:d,isAutoScrollingVertical:a,isAutoScrollingHorizontal:i,pointerRef:l,BodyScrollHandle:(0,c.useCallback)(e=>{t?.current&&e.currentTarget&&(t.current.scrollLeft=e.currentTarget.scrollLeft)},[t]),HeaderScrollHandle:(0,c.useCallback)(e=>{n?.current&&e.currentTarget&&(n.current.scrollLeft=e.currentTarget.scrollLeft)},[n])}},v=300,y=8;function b(e,t,n,r){let i=(0,c.useRef)(null),a=(0,c.useRef)({x:0,y:0}),o=(0,c.useRef)(null),s=(0,c.useRef)(!1),l=(0,c.useRef)(null),u=(0,c.useCallback)(()=>{i.current&&=(clearTimeout(i.current),null),o.current=null,l.current&&=(l.current(),null)},[]);return{touchStart:(0,c.useCallback)(c=>{if(c.target===c.currentTarget)return;let d=c.target,f=!1;for(;d&&!(d.dataset?.contextid||d.dataset?.disabled===`true`);){if(d.dataset?.id){f=!0;break}d=d.parentNode}if(!f)return;u(),s.current=!0,window.getSelection()?.removeAllRanges();let p=c.touches[0];a.current={x:p.clientX,y:p.clientY},o.current=c;let m=e.tableRef?.current;if(!m)return;let h=!1,g=!1,_=p.clientY,b=p.clientX,x=e=>e.preventDefault();document.addEventListener(`selectstart`,x);let S=t=>{t.preventDefault();let n=t.touches[0];if(g){let t=e.bodyRef?.current;t&&(t.scrollTop-=n.clientY-_,t.scrollLeft-=n.clientX-b),_=n.clientY,b=n.clientX}else if(h)r(n.clientX,n.clientY);else{let e=n.clientX-a.current.x,t=n.clientY-a.current.y;(Math.abs(e)>y||Math.abs(t)>y)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,g=!0,_=n.clientY,b=n.clientX)}},C=()=>{h?(w(),n()):(u(),setTimeout(()=>{s.current=!1},400))},w=()=>{m.removeEventListener(`touchmove`,S),m.removeEventListener(`touchend`,C),m.removeEventListener(`touchcancel`,C),document.removeEventListener(`selectstart`,x),l.current=null};m.addEventListener(`touchmove`,S,{passive:!1}),m.addEventListener(`touchend`,C,!1),m.addEventListener(`touchcancel`,C,!1),l.current=w,i.current=setTimeout(()=>{i.current=null,h=!0;let e=o.current;o.current=null,e&&t(e,p.clientX,p.clientY)},v)},[t,n,r,u,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:u,isTouchActiveRef:s}}var x=(e,t)=>{let n=e,r=0,i=t.length-1;for(;r<i;){let e=Math.floor((r+i)/2),a=t[e];if(a.itemTop<=n&&n<=a.itemBottom)return n<a.itemTop+a.height/2?+a.index:+a.index+1;n<a.itemTop?i=e-1:r=e+1}return+t[r].index},S=(e,t)=>{let n=e,r=0,i=t.length-1;for(;r<i;){let e=Math.floor((r+i)/2),a=t[e];if(a.itemLeft<=n&&n<=a.itemRight)return n<a.itemLeft+a.width/2?+a.index:+a.index+1;n<a.itemLeft?i=e-1:r=e+1}return+t[r].index},C=(e,t,n)=>{let r=Number(e);return t!==void 0&&r<t||n!==void 0&&r>n},w=`transform 450ms cubic-bezier(0.2, 0, 0, 1)`,T=200,E=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:l,pointerRef:d}=_(e),f=(0,c.useRef)(null),p=(0,c.useRef)(null),m=(0,c.useRef)(null),h=(0,c.useRef)({x:0,y:0}),g=(0,c.useRef)(null),v=(0,c.useRef)(null),y=(0,c.useRef)({width:0,height:0}),C=(0,c.useRef)({x:0,y:0}),E=(0,c.useRef)(!1),D=(0,c.useCallback)(()=>{let t=e.bodyRef?.current;if(!t)return null;let n=t.scrollTop,r=t.getBoundingClientRect().top,a=t.querySelectorAll(`.draggable[data-type="row"]`),o=[];for(let e=0;e<a.length;e++){let t=a[e];if(t.dataset.index===void 0)continue;let i=t.getBoundingClientRect(),s=i.top-r+n;o.push({height:i.height,itemTop:s,itemBottom:s+i.height,index:t.dataset.index})}let{start:s,end:c}=i.rowDragRange;return(s||c)&&(o=o.filter(e=>(!s||+e.index>=s)&&(!c||+e.index<c))),o},[e.bodyRef,i.rowDragRange]),O=(0,c.useCallback)(()=>{let t=e.headerRef?.current;if(!t||!t.children[0])return null;let n=Array.from(t.children[0].children).map(e=>{let t=e.getBoundingClientRect();return{left:t.left,width:t.width,itemLeft:t.left,itemRight:t.left+t.width,index:e.dataset.index}}).filter(e=>e.index!==void 0),{start:r,end:a}=i.columnDragRange??{};return(r!==void 0||a!==void 0)&&(n=n.filter(e=>{let t=+e.index;return(r===void 0||t>=r)&&(a===void 0||t<a)})),n},[e.headerRef,i.columnDragRange]),k=(0,c.useCallback)((t,n,r,i)=>{let a=e.placeholderRef?.current;if(!a||!t){a&&(a.style.display=`none`);return}let o=y.current,s=t.getBoundingClientRect(),c=e.tableRef?.current?.getBoundingClientRect(),l=(n??0)<(r??0);a.style.display=`block`,i===`row`?(a.style.top=`${l?s.top+s.height-o.height:s.top}px`,a.style.left=`${c?.left??s.left}px`,a.style.width=`${c?.width??s.width}px`,a.style.height=`${o.height}px`):(a.style.top=`${c?.top??s.top}px`,a.style.left=`${l?s.left+s.width-o.width:s.left}px`,a.style.width=`${o.width}px`,a.style.height=`${c?.height??s.height}px`)},[e.placeholderRef,e.tableRef]),A=(0,c.useCallback)((t,n,r)=>{if(t===null||n===null)return;let i=y.current,a=null,o=(e,r,i,o)=>{if(!e)return;let s=e.querySelectorAll(r);for(let e=0;e<s.length;e++){let r=s[e],c=+r.dataset.index,l=r.firstElementChild;if(!l)continue;let u=``;c>t&&c<=n?u=`translate${i}(-${o}px)`:c<t&&c>=n&&(u=`translate${i}(${o}px)`),l.style.transform=u,l.style.transition=c===t?`none`:w,c===n?(r.setAttribute(`data-drop-target`,`true`),a=r):r.removeAttribute(`data-drop-target`)}};if(r===`row`)o(e.bodyRef?.current??null,`.draggable[data-type="row"]`,`Y`,i.height);else if(r===`column`){o(e.headerRef?.current??null,`.draggable[data-type="column"]`,`X`,i.width);let r=e.bodyRef?.current;if(r){let e=r.querySelectorAll(`.td[data-col-index]`);for(let r=0;r<e.length;r++){let a=e[r],o=+a.dataset.colIndex,s=``;o>t&&o<=n?s=`translateX(-${i.width}px)`:o<t&&o>=n&&(s=`translateX(${i.width}px)`),a.style.transform=s,a.style.transition=w}}}k(a,t,n,r)},[e.bodyRef,e.headerRef,k]),j=(0,c.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);for(let t of[e.bodyRef?.current,e.headerRef?.current]){if(!t)continue;let e=t.querySelectorAll(`.draggable`);for(let t=0;t<e.length;t++){e[t].removeAttribute(`data-drop-target`);let n=e[t].firstElementChild;n&&(n.style.transition=`none`,n.style.transform=``)}}let n=e.bodyRef?.current;if(n){let e=n.querySelectorAll(`.td[data-col-index]`);for(let t=0;t<e.length;t++)e[t].style.transition=`none`,e[t].style.transform=``}},[e.bodyRef,e.headerRef,e.placeholderRef]),M=e=>{let t=e,n=!1;for(;t;){if(t.dataset?.dragHandle===`true`&&(n=!0),t.dataset?.contextid||t.dataset?.disabled===`true`)return null;if(t.dataset?.id)return{element:t,foundHandle:n};t=t.parentNode}return null},N=(0,c.useCallback)((t,r,i)=>{let a=M(t.target);if(!a)return;let{element:o,foundHandle:s}=a;if(!s&&o.querySelector(`[data-drag-handle]`))return;let c=o.dataset.id,u=+o.dataset.index,_=o.dataset.type,b=t.type===`touchstart`;m.current=_??null,g.current=u,v.current=null,E.current=!1,b&&o.dispatchEvent(new PointerEvent(`pointerdown`,{bubbles:!0,pointerType:`mouse`}));let x=_===`row`?e.bodyRef?.current?.scrollLeft??0:0,S=o.getBoundingClientRect();y.current={width:S.width,height:S.height};let w={x:r-S.left-x,y:i-S.top};h.current=w,C.current={x:r,y:i},d.current={x:r,y:i};let T={x:S.left+x,y:S.top};f.current=_===`row`?D():O();let k=e.bodyRef?.current;if(k){let e=k.getBoundingClientRect();p.current=e,l(e)}let A=e.tableRef?.current;A&&(A.style.touchAction=`none`);let j=e.cloneRef?.current;j&&(j.style.transform=`translate(${T.x}px, ${T.y}px)`);let N=e.tableRef?.current;N&&n({type:`setTableDimensions`,value:{height:N.offsetHeight,width:N.offsetWidth}}),n({type:`dragStart`,value:{rect:{draggedItemHeight:S.height,draggedItemWidth:S.width},dragged:{initial:w,translate:T,draggedID:c??null,isDragging:!0,sourceIndex:u},dragType:_??null}});let P=()=>{let t=e.cloneRef?.current,n=e.bodyRef?.current;if(!(!t||!n))if(_===`row`)t.scrollLeft=n.scrollLeft;else{let e=t.querySelector(`.clone-body`);e&&(e.scrollTop=n.scrollTop)}};P(),requestAnimationFrame(()=>{P(),requestAnimationFrame(P)})},[n,e,D,O,d,l]),P=(0,c.useCallback)((t,r,i,o,s)=>{let c=e.cloneRef?.current;c&&(c.style.visibility=`hidden`);let l=e.tableRef?.current;l&&(l.style.touchAction=``),(0,u.flushSync)(()=>{a&&t!==null&&r!==null&&(i===`row`||i===`column`)&&a({sourceIndex:t,targetIndex:r,dragType:i}),n({type:`dragEnd`,value:{targetIndex:r,sourceIndex:t}})}),j();let d=e.bodyRef?.current;d&&(d.scrollTop=o,d.scrollLeft=s,requestAnimationFrame(()=>{d.scrollTop=o,d.scrollLeft=s}))},[n,e.bodyRef,e.cloneRef,e.tableRef,j,a]),F=(0,c.useCallback)(()=>{if(E.current)return;E.current=!0,R(),setTimeout(()=>{z.current=!1},400);let t=v.current,n=g.current,r=m.current,i=e.bodyRef?.current,a=i?.scrollTop??0,o=i?.scrollLeft??0;f.current=null,p.current=null,s(),m.current=null,g.current=null,v.current=null;let c=e.cloneRef?.current,l=e.placeholderRef?.current;if(c&&l&&l.style.display!==`none`){let e=parseFloat(l.style.left)||0,i=parseFloat(l.style.top)||0;c.style.transition=`transform ${T}ms cubic-bezier(0.2, 0, 0, 1)`,c.style.transform=`translate(${e}px, ${i}px)`,setTimeout(()=>P(n,t,r,a,o),T)}else P(n,t,r,a,o)},[s,e.bodyRef,e.placeholderRef,e.cloneRef,P]),I=(0,c.useRef)(()=>{}),{touchStart:L,cancelLongPress:R,isTouchActiveRef:z}=b(e,N,F,(e,t)=>I.current(e,t)),B=(0,c.useCallback)(e=>{e.target!==e.currentTarget&&(z.current||N(e,e.clientX,e.clientY))},[N,z]),V=(0,c.useCallback)((t,n)=>{if(E.current)return;let i=h.current;C.current={x:t,y:n},d.current={x:t,y:n};let a=e.cloneRef?.current;if(a){a.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`;let r=e.bodyRef?.current;if(r)if(m.current===`row`)a.scrollLeft=r.scrollLeft;else{let e=a.querySelector(`.clone-body`);e&&(e.scrollTop=r.scrollTop)}}let c=e.bodyRef?.current;if(!c)return;let l=p.current;l||(l=c.getBoundingClientRect(),p.current=l);let u=0,_=m.current||r;_===`row`?n<l.top+30?(o(-5,c,`vertical`),f.current=null):n>l.bottom-30?(o(5,c,`vertical`),f.current=null):s():t<l.left+30?(o(-5,c,`horizontal`),f.current=null):t>l.right-30?(o(5,c,`horizontal`),f.current=null):s();let y;_===`row`?(y=D(),f.current=y,y&&y.length>0&&(u=x(n-l.top+c.scrollTop,y))):(y=O(),f.current=y,y&&y.length>0&&(u=S(t,y))),u!==v.current&&(v.current=u,requestAnimationFrame(()=>A(g.current,u,_)))},[r,e.bodyRef,e.cloneRef,D,O,o,s,A,d]);I.current=V;let H=(0,c.useCallback)(()=>{R(),f.current=null,p.current=null;let t=e.cloneRef?.current;t&&(t.style.visibility=`hidden`);let r=e.tableRef?.current;r&&(r.style.touchAction=``),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),m.current=null,g.current=null,v.current=null},[n,s,e.cloneRef,e.tableRef,R]),U=(0,c.useCallback)(e=>{e.key===`Escape`&&H()},[H]);return(0,c.useLayoutEffect)(()=>{if(!t.isDragging){j();let t=e.cloneRef?.current;t&&(t.style.transition=``,t.style.transform=`translate(0px, 0px)`,t.style.visibility=``,t.scrollLeft=0)}},[t.isDragging,j,e.cloneRef]),(0,c.useEffect)(()=>{let t=e.bodyRef?.current;return t&&(t.style.touchAction=`none`),()=>{t&&(t.style.touchAction=``)}},[e.bodyRef]),(0,c.useEffect)(()=>{if(!t.isDragging)return;let e=e=>{V(e.clientX,e.clientY)},n=()=>{F()};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,n),window.addEventListener(`pointercancel`,n),window.addEventListener(`keydown`,U),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,n),window.removeEventListener(`pointercancel`,n),window.removeEventListener(`keydown`,U)}},[t.isDragging,V,F,U]),{dragStart:B,touchStart:L}},D={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function O(e,t){switch(t.type){case`setClone`:return{...e,clone:t.value};case`setDragged`:return{...e,dragged:{...e.dragged,...t.value}};case`setDragType`:return{...e,dragType:t.value};case`setTableDimensions`:return{...e,tableDimensions:t.value};case`setRef`:return{...e,refs:{...e.refs,[t.refName]:t.value}};case`setBodyScrollBarWidth`:return{...e,bodyScrollBarWidth:t.value};case`setWidths`:return{...e,widths:t.value};case`setColumnIds`:return{...e,columnIds:t.value};case`setOptions`:return{...e,options:{...e.options,...t.value}};case`dragStart`:return{...e,rect:t.value.rect,dragged:{...e.dragged,...t.value.dragged},dragType:t.value.dragType};case`dragEnd`:return{...e,clone:null,dragged:{initial:{x:0,y:0},translate:{x:0,y:0},isDragging:!1,draggedID:null,targetIndex:t.value?.targetIndex??null,sourceIndex:t.value?.sourceIndex??null},dragType:null,rect:{draggedItemWidth:0,draggedItemHeight:0}};default:throw Error(`Unhandled action`)}}var k={clone:null,dragged:{initial:{x:0,y:0},translate:{x:0,y:0},isDragging:!1,draggedID:null,targetIndex:null,sourceIndex:null},dragType:null,rect:{draggedItemWidth:0,draggedItemHeight:0},tableDimensions:{height:0,width:0},refs:{tableRef:{current:null},bodyRef:{current:null},headerRef:{current:null},cloneRef:{current:null},placeholderRef:{current:null}},bodyScrollBarWidth:0,options:D,widths:[],columnIds:[]},A={position:`relative`,display:`flex`,flexFlow:`column`},j={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},M=(0,c.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,c.useRef)(null),l=(0,c.useRef)(null),u=(0,c.useRef)(null);(0,c.useImperativeHandle)(o,()=>s.current,[]);let[f,h]=(0,c.useReducer)(O,k),g=(0,c.useMemo)(()=>({state:f,dispatch:h}),[f]);(0,c.useEffect)(()=>{h({type:`setRef`,refName:`tableRef`,value:s}),h({type:`setRef`,refName:`cloneRef`,value:l}),h({type:`setRef`,refName:`placeholderRef`,value:u})},[s]),(0,c.useEffect)(()=>{let e=()=>{s.current&&h({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s]),(0,c.useEffect)(()=>{r&&h({type:`setOptions`,value:r})},[r]);let{dragStart:_,touchStart:v}=E(f.refs,f.dragged,h,f.dragType,f.options,i),y=(0,c.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:f.dragType===`row`?f.rect.draggedItemHeight:`${f.tableDimensions.height}px`,width:f.dragType===`column`?`${f.rect.draggedItemWidth}px`:`${f.tableDimensions.width}px`,overflow:`hidden`,boxShadow:f.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[f.dragType,f.dragged.isDragging,f.rect.draggedItemHeight,f.rect.draggedItemWidth,f.tableDimensions.height,f.tableDimensions.width]);return(0,d.jsx)(m.Provider,{value:g,children:(0,d.jsxs)(p,{className:f.dragged.isDragging?`is-dragging`:``,children:[(0,d.jsx)(`div`,{id:`portalroot`,style:{...y,visibility:f.dragged.isDragging?`visible`:`hidden`},ref:l,children:(0,d.jsx)(`div`,{style:{flexShrink:0,order:-1},children:f.clone})}),(0,d.jsx)(`div`,{ref:u,style:j,children:a?a():(0,d.jsx)(`div`,{style:{width:`100%`,height:`100%`}})}),(0,d.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:_,onTouchStart:v,style:{...A,...n},className:`table ${t??``}`,children:e})]})})});M.displayName=`TableProvider`;var N=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null),a=r||i,{state:o,dispatch:s}=h(),l=(0,c.useCallback)(e=>`current`in e?e.current:null,[]);(0,c.useEffect)(()=>{i.current&&s({type:`setRef`,refName:`headerRef`,value:i})},[s]);let{HeaderScrollHandle:u}=_(o.refs),f={display:`flex`,flex:`1 0 auto`},p=(0,c.useMemo)(()=>({overflow:`hidden`,display:`flex`,paddingRight:`${o.bodyScrollBarWidth}px`,userSelect:o.dragged.isDragging?`none`:`auto`,...t}),[o.bodyScrollBarWidth,o.dragged.isDragging,t]);return(0,c.useLayoutEffect)(()=>{let e=l(a);e&&s({type:`setWidths`,value:Array.from(e.querySelectorAll(`.th`)).map(e=>{let t=e.getAttribute(`data-width`);return t?parseInt(t,10):0})})},[e,s,l,a]),(0,c.useLayoutEffect)(()=>{let e=l(a);e&&s({type:`setColumnIds`,value:Array.from(e.querySelectorAll(`.draggable`)).map(e=>e.getAttribute(`data-id`)||``)})},[e,s,l,a]),(0,d.jsx)(`div`,{className:`header ${n??``}`,children:(0,d.jsx)(`div`,{className:`thead`,style:p,"data-droppableid":`header`,onScroll:u,ref:a,children:(0,d.jsx)(`div`,{style:f,className:`tr`,children:e})})})});N.displayName=`TableHeader`;var P=(0,c.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let{state:a,dispatch:o}=h(),s=(0,c.useMemo)(()=>String(t)===String(a.dragged.draggedID)&&a.dragged.isDragging,[t,a.dragged.draggedID,a.dragged.isDragging]),l=(0,c.useMemo)(()=>r===`row`?C(n,a.options.rowDragRange.start,a.options.rowDragRange.end):C(n,a.options.columnDragRange.start,a.options.columnDragRange.end),[n,a.options.columnDragRange.end,a.options.columnDragRange.start,a.options.rowDragRange.end,a.options.rowDragRange.start,r]),u=(0,c.useRef)(null),f=(0,c.useRef)(!1);(0,c.useEffect)(()=>{f.current=!!u.current?.querySelector(`[data-drag-handle]`)},[e]);let p=(0,c.useMemo)(()=>({cursor:s?`-webkit-grabbing`:l?`auto`:`-webkit-grab`,zIndex:s?2:1,opacity:s?0:1,pointerEvents:s?`none`:`auto`,display:`flex`}),[l,s]);(0,c.useEffect)(()=>{u.current&&u.current.querySelector(`[data-drag-handle]`)&&(u.current.style.cursor=`auto`)},[e,l,s]);let m=t=>{if(t.pointerType===`touch`||l)return;let n=!t.isTrusted;f.current&&!n&&!t.target.closest(`[data-drag-handle]`)||requestAnimationFrame(()=>{o({type:`setClone`,value:c.default.cloneElement(e)})})};return(0,d.jsx)(`div`,{className:`draggable`,"data-id":t,"data-index":n,"data-type":r,onPointerDown:m,"data-disabled":l?`true`:`false`,style:i,children:(0,d.jsx)(`div`,{ref:u,style:p,children:e})})});P.displayName=`Draggable`;var F=(0,c.memo)(({children:e,width:t,style:n,className:r,...i})=>{let{state:a}=h(),o=(0,c.useMemo)(()=>t??a.options.defaultSizing,[t,a.options.defaultSizing]),s=(0,c.useMemo)(()=>({width:`${o}px`,flex:`${o} 0 auto`}),[o]);return(0,d.jsx)(P,{...i,styles:s,type:`column`,children:(0,d.jsx)(`div`,{className:`th ${r??``}`,"data-width":t,style:{width:`100%`,...n},children:e})})});F.displayName=`ColumnCell`;var I={display:`flex`,overflow:`hidden`,flex:1},L=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let[i,a]=(0,c.useState)(0),o=(0,c.useRef)(null);(0,c.useImperativeHandle)(r,()=>o.current,[]);let{state:s,dispatch:l}=h(),f=(0,c.useMemo)(()=>{if(s.dragged.sourceIndex===null)return null;let t=e=>{let n=[];return c.default.Children.forEach(e,e=>{c.default.isValidElement(e)&&(e.props.id!==void 0&&e.props.index!==void 0&&e.props.children?n.push(e):e.props.children&&n.push(...t(e.props.children)))}),n};return t(e).map(e=>{let t=c.default.Children.toArray(e.props.children).filter(e=>c.default.isValidElement(e)&&String(e.props.index)===String(s.dragged.sourceIndex)).map(e=>c.default.cloneElement(e,{key:e.props.index,isClone:!0}));return c.default.cloneElement(e,{key:e.props.id,...e.props,children:t})})},[e,s.dragged.sourceIndex]);(0,c.useEffect)(()=>{l({type:`setRef`,refName:`bodyRef`,value:o})},[l,o]);let{BodyScrollHandle:p}=_(s.refs),m=(0,c.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:s.dragged.isDragging?`none`:`auto`,...t}),[s.dragged.isDragging,t]);return(0,c.useEffect)(()=>{if(o.current){let e=o.current.clientWidth;l({type:`setBodyScrollBarWidth`,value:o.current.offsetWidth-e})}},[l,o]),(0,c.useLayoutEffect)(()=>{o.current&&a(o.current.scrollHeight)},[o,e]),(0,d.jsxs)(c.default.Fragment,{children:[s.dragType===`column`&&s.refs.cloneRef?.current&&(0,u.createPortal)((0,d.jsx)(`div`,{className:`body clone-body`,"data-droppableid":`body`,style:{overflow:`hidden`,flex:1},children:(0,d.jsx)(`div`,{className:`rbody`,style:{height:i,position:`relative`},children:f&&c.default.Children.toArray(f)})}),s.refs.cloneRef.current),(0,d.jsx)(`div`,{className:`body ${n??``}`,style:I,children:(0,d.jsx)(`div`,{className:`ibody`,style:m,"data-droppableid":`body`,onScroll:p,ref:o,children:e})})]})}),R={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},z=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...R,...t}:R,[t]),a=(0,f.default)(`tr`,n);return(0,d.jsx)(P,{...r,type:`row`,children:(0,d.jsx)(`div`,{className:a,style:i,children:e})})});z.displayName=`BodyRow`;var B=(0,c.memo)(({children:e,style:t,className:n,isClone:r,...i})=>{let{index:a}=i,{state:o}=h(),s=(0,c.useMemo)(()=>o.columnIds[a]??``,[o.columnIds,a]),l=(0,c.useMemo)(()=>o.widths[a]??o.options.defaultSizing,[o.widths,a,o.options.defaultSizing]),u=(0,c.useMemo)(()=>r?!1:s===o.dragged.draggedID,[r,s,o.dragged.draggedID]),f=(0,c.useMemo)(()=>({display:`inline-flex`,opacity:u?0:1,width:`${l}px`,flex:`${l} 0 auto`,...t}),[u,l,t]);return(0,d.jsx)(`div`,{className:`td ${n??``}`,style:f,"data-col-index":a,children:e})});B.displayName=`RowCell`;var V=(0,c.memo)(({children:e,className:t,style:n})=>(0,d.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,display:`inline-flex`,alignItems:`center`,...n},children:e}));V.displayName=`DragHandle`,exports.BodyRow=z,exports.ColumnCell=F,exports.DragHandle=V,exports.RowCell=B,exports.TableBody=L,exports.TableContainer=M,exports.TableHeader=N,exports.useTable=h;
|
|
42
|
+
`,m=(0,c.createContext)(void 0),h=()=>{let e=(0,c.useContext)(m);if(e===void 0)throw Error(`useTable must be used within a TableProvider`);return e},g=30,_=e=>{let{headerRef:t,bodyRef:n}=e,r=(0,c.useRef)(null),i=(0,c.useRef)(!1),a=(0,c.useRef)(!1),o=(0,c.useRef)(0),s=(0,c.useRef)(null),l=(0,c.useRef)({x:0,y:0}),u=(0,c.useRef)(null),d=(0,c.useCallback)(e=>{u.current=e},[]),f=(0,c.useCallback)(()=>{a.current=!1,i.current=!1,s.current!==null&&(cancelAnimationFrame(s.current),s.current=null)},[]),p=(0,c.useCallback)((e,t,n)=>{let c=n===`vertical`,d=c?a:i;if(!d.current)return;let f=u.current;if(f){let e=l.current;if(c){let t=e.y<f.top+g,n=e.y>f.bottom-g;if(!t&&!n){d.current=!1;return}}else{let t=e.x<f.left+g,n=e.x>f.right-g;if(!t&&!n){d.current=!1;return}}}let p=c?t.scrollHeight-t.clientHeight:t.scrollWidth-t.clientWidth;c?t.scrollTop+=e:t.scrollLeft+=e;let m=c?t.scrollTop:t.scrollLeft;if(m>=p||m<=0){d.current=!1;return}o.current+=e/1e3,s.current=requestAnimationFrame(()=>r.current?.(e+o.current,t,n))},[]);return(0,c.useEffect)(()=>{r.current=p},[p]),{startAutoScroll:(0,c.useCallback)((e,t,n)=>{let r=n===`vertical`?a:i;r.current||(r.current=!0,o.current=0,s.current=requestAnimationFrame(()=>p(e,t,n)))},[p]),stopAutoScroll:f,setContainerRect:d,isAutoScrollingVertical:a,isAutoScrollingHorizontal:i,pointerRef:l,BodyScrollHandle:(0,c.useCallback)(e=>{t?.current&&e.currentTarget&&(t.current.scrollLeft=e.currentTarget.scrollLeft)},[t]),HeaderScrollHandle:(0,c.useCallback)(e=>{n?.current&&e.currentTarget&&(n.current.scrollLeft=e.currentTarget.scrollLeft)},[n])}},v=300,y=8;function b(e,t,n,r){let i=(0,c.useRef)(null),a=(0,c.useRef)({x:0,y:0}),o=(0,c.useRef)(null),s=(0,c.useRef)(!1),l=(0,c.useRef)(null),u=(0,c.useCallback)(()=>{i.current&&=(clearTimeout(i.current),null),o.current=null,l.current&&=(l.current(),null)},[]);return{touchStart:(0,c.useCallback)(c=>{if(c.target===c.currentTarget)return;let d=c.target,f=!1;for(;d&&!(d.dataset?.contextid||d.dataset?.disabled===`true`);){if(d.dataset?.id){f=!0;break}d=d.parentNode}if(!f)return;u(),s.current=!0,window.getSelection()?.removeAllRanges();let p=c.touches[0];a.current={x:p.clientX,y:p.clientY},o.current=c;let m=e.tableRef?.current;if(!m)return;let h=!1,g=!1,_=p.clientY,b=p.clientX,x=e=>e.preventDefault();document.addEventListener(`selectstart`,x);let S=t=>{t.preventDefault();let n=t.touches[0];if(g){let t=e.bodyRef?.current;t&&(t.scrollTop-=n.clientY-_,t.scrollLeft-=n.clientX-b),_=n.clientY,b=n.clientX}else if(h)r(n.clientX,n.clientY);else{let e=n.clientX-a.current.x,t=n.clientY-a.current.y;(Math.abs(e)>y||Math.abs(t)>y)&&(i.current&&=(clearTimeout(i.current),null),o.current=null,g=!0,_=n.clientY,b=n.clientX)}},C=()=>{h?(w(),n()):(u(),setTimeout(()=>{s.current=!1},400))},w=()=>{m.removeEventListener(`touchmove`,S),m.removeEventListener(`touchend`,C),m.removeEventListener(`touchcancel`,C),document.removeEventListener(`selectstart`,x),l.current=null};m.addEventListener(`touchmove`,S,{passive:!1}),m.addEventListener(`touchend`,C,!1),m.addEventListener(`touchcancel`,C,!1),l.current=w,i.current=setTimeout(()=>{i.current=null,h=!0;let e=o.current;o.current=null,e&&t(e,p.clientX,p.clientY)},v)},[t,n,r,u,e.tableRef?.current,e.bodyRef?.current]),cancelLongPress:u,isTouchActiveRef:s}}var x=(e,t)=>{let n=e,r=0,i=t.length-1;for(;r<i;){let e=Math.floor((r+i)/2),a=t[e];if(a.itemTop<=n&&n<=a.itemBottom)return n<a.itemTop+a.height/2?+a.index:+a.index+1;n<a.itemTop?i=e-1:r=e+1}return+t[r].index},S=(e,t)=>{let n=e,r=0,i=t.length-1;for(;r<i;){let e=Math.floor((r+i)/2),a=t[e];if(a.itemLeft<=n&&n<=a.itemRight)return n<a.itemLeft+a.width/2?+a.index:+a.index+1;n<a.itemLeft?i=e-1:r=e+1}return+t[r].index},C=(e,t,n)=>{let r=Number(e);return t!==void 0&&r<t||n!==void 0&&r>n},w=`transform 450ms cubic-bezier(0.2, 0, 0, 1)`,T=200,E=(e,t,n,r,i,a)=>{let{startAutoScroll:o,stopAutoScroll:s,setContainerRect:l,pointerRef:d}=_(e),f=(0,c.useRef)(null),p=(0,c.useRef)(null),m=(0,c.useRef)(null),h=(0,c.useRef)({x:0,y:0}),g=(0,c.useRef)(null),v=(0,c.useRef)(null),y=(0,c.useRef)(null),C=(0,c.useRef)({width:0,height:0}),E=(0,c.useRef)(!1),D=(0,c.useRef)(null),O=(0,c.useRef)(!1),k=(0,c.useRef)(new Set),A=(0,c.useRef)(new Set),j=(0,c.useRef)(new Map),M=(0,c.useRef)(new Map),N=(0,c.useRef)(new Map),P=(0,c.useRef)(new Map),F=(0,c.useCallback)(()=>{let t=e.bodyRef?.current;if(!t)return null;let n=t.scrollTop,r=t.getBoundingClientRect().top,a=t.querySelectorAll(`.draggable[data-type="row"]`),o=[];for(let e=0;e<a.length;e++){let t=a[e];if(t.dataset.index===void 0)continue;let i=t.getBoundingClientRect(),s=i.top-r+n;o.push({height:i.height,itemTop:s,itemBottom:s+i.height,index:t.dataset.index})}let{start:s,end:c}=i.rowDragRange;return(s||c)&&(o=o.filter(e=>(!s||+e.index>=s)&&(!c||+e.index<c))),o},[e.bodyRef,i.rowDragRange]),I=(0,c.useCallback)(()=>{let t=e.headerRef?.current;if(!t||!t.children[0])return null;let n=Array.from(t.children[0].children).map(e=>{let t=e.getBoundingClientRect();return{left:t.left,width:t.width,itemLeft:t.left,itemRight:t.left+t.width,index:e.dataset.index}}).filter(e=>e.index!==void 0),{start:r,end:a}=i.columnDragRange??{};return(r!==void 0||a!==void 0)&&(n=n.filter(e=>{let t=+e.index;return(r===void 0||t>=r)&&(a===void 0||t<a)})),n},[e.headerRef,i.columnDragRange]),L=(0,c.useCallback)((t,n,r,i)=>{let a=e.placeholderRef?.current;if(!a||!t){a&&(a.style.display=`none`);return}let o=C.current,s=t.getBoundingClientRect(),c=e.tableRef?.current?.getBoundingClientRect(),l=(n??0)<(r??0);a.style.display=`block`,i===`row`?(a.style.top=`${l?s.top+s.height-o.height:s.top}px`,a.style.left=`${c?.left??s.left}px`,a.style.width=`${c?.width??s.width}px`,a.style.height=`${o.height}px`):(a.style.top=`${c?.top??s.top}px`,a.style.left=`${l?s.left+s.width-o.width:s.left}px`,a.style.width=`${o.width}px`,a.style.height=`${c?.height??s.height}px`)},[e.placeholderRef,e.tableRef]),R=(0,c.useCallback)((e,t,n)=>{if(e===null||t===null)return;let r=C.current,i=y.current,a=i===null,o=a?-1/0:Math.min(i,t,e)-1,s=a?1/0:Math.max(i,t,e)+1,c=null,l=(n===`row`?M.current:N.current).get(t);l&&(c=l.outer),L(c,e,t,n);let u=(n,r,i)=>{let c=(n,a,o)=>{let s=``;n>e&&n<=t?s=`translate${r}(-${i}px)`:n<e&&n>=t&&(s=`translate${r}(${i}px)`),o.style.transform=s,o.style.transition=n===e?`none`:w,s&&k.current.add(o),n===t?a.setAttribute(`data-drop-target`,`true`):a.removeAttribute(`data-drop-target`)};if(a)for(let[e,{outer:t,inner:r}]of n)c(e,t,r);else for(let e=o;e<=s;e++){let t=n.get(e);t&&c(e,t.outer,t.inner)}};if(n===`row`)u(M.current,`Y`,r.height);else if(n===`column`){u(N.current,`X`,r.width);let n=P.current,i=j.current,c=(n,a,o)=>{let s=``;n>e&&n<=t?s=`translateX(-${r.width}px)`:n<e&&n>=t&&(s=`translateX(${r.width}px)`);for(let e of a)i.get(e)!==s&&(e.style.transform=s,o&&(e.style.transition=w),i.set(e,s),s&&A.current.add(e))};if(a)for(let[e,t]of n)c(e,t,!0);else for(let e=o;e<=s;e++){let t=n.get(e);t&&c(e,t,!1)}}y.current=t},[L]),z=(0,c.useCallback)(()=>{let t=e.placeholderRef?.current;t&&(t.style.display=`none`);for(let e of k.current){e.style.transition=`none`,e.style.transform=``;let t=e.parentElement;t&&t.removeAttribute(`data-drop-target`)}k.current.clear();for(let e of A.current)e.style.transition=`none`,e.style.transform=``;A.current.clear(),j.current.clear(),y.current=null},[e.placeholderRef]),B=e=>{let t=e,n=!1;for(;t;){if(t.dataset?.dragHandle===`true`&&(n=!0),t.dataset?.contextid||t.dataset?.disabled===`true`)return null;if(t.dataset?.id)return{element:t,foundHandle:n};t=t.parentNode}return null},V=(0,c.useCallback)((t,r,i)=>{let a=B(t.target);if(!a)return;let{element:o,foundHandle:s}=a;if(!s&&o.querySelector(`[data-drag-handle]`))return;let c=o.dataset.id,u=+o.dataset.index,_=o.dataset.type,b=t.type===`touchstart`;m.current=_??null,g.current=u,v.current=null,D.current=null,y.current=null,E.current=!1,b&&o.dispatchEvent(new PointerEvent(`pointerdown`,{bubbles:!0,pointerType:`mouse`}));let x=_===`row`?e.bodyRef?.current?.scrollLeft??0:0,S=o.getBoundingClientRect();C.current={width:S.width,height:S.height};let w={x:r-S.left-x,y:i-S.top};h.current=w,d.current={x:r,y:i};let T={x:S.left+x,y:S.top};f.current=_===`row`?F():I(),M.current.clear(),N.current.clear(),P.current.clear();let O=e.bodyRef?.current;if(O){let e=O.getBoundingClientRect();if(p.current=e,l(e),_===`row`){let e=O.querySelectorAll(`.draggable[data-type="row"]`);for(let t=0;t<e.length;t++){let n=e[t],r=n.dataset.index;if(r===void 0)continue;let i=n.firstElementChild;i&&M.current.set(+r,{outer:n,inner:i})}}}if(_===`column`){let t=e.headerRef?.current;if(t){let e=t.querySelectorAll(`.draggable[data-type="column"]`);for(let t=0;t<e.length;t++){let n=e[t],r=n.dataset.index;if(r===void 0)continue;let i=n.firstElementChild;i&&N.current.set(+r,{outer:n,inner:i})}}if(O){let e=O.querySelectorAll(`.td[data-col-index]`);for(let t=0;t<e.length;t++){let n=e[t],r=+n.dataset.colIndex;P.current.has(r)||P.current.set(r,[]),P.current.get(r).push(n)}}}let k=e.tableRef?.current;k&&(k.style.touchAction=`none`);let A=e.cloneRef?.current;A&&(A.style.transform=`translate(${T.x}px, ${T.y}px)`);let j=e.tableRef?.current;j&&n({type:`setTableDimensions`,value:{height:j.offsetHeight,width:j.offsetWidth}}),n({type:`dragStart`,value:{rect:{draggedItemHeight:S.height,draggedItemWidth:S.width},dragged:{initial:w,translate:T,draggedID:c??null,isDragging:!0,sourceIndex:u},dragType:_??null}});let L=O?.scrollLeft??0,R=O?.scrollTop??0;requestAnimationFrame(()=>{let t=e.cloneRef?.current;if(t)if(_===`row`)t.scrollLeft=L;else{let e=t.querySelector(`.clone-body`);e&&(e.scrollTop=R)}})},[n,e,F,I,d,l]),H=(0,c.useCallback)((t,r,i,o,s)=>{let c=e.cloneRef?.current;c&&(c.style.visibility=`hidden`);let l=e.tableRef?.current;l&&(l.style.touchAction=``),(0,u.flushSync)(()=>{a&&t!==null&&r!==null&&(i===`row`||i===`column`)&&a({sourceIndex:t,targetIndex:r,dragType:i}),n({type:`dragEnd`,value:{targetIndex:r,sourceIndex:t}})}),z();let d=e.bodyRef?.current;d&&(d.scrollTop=o,d.scrollLeft=s,requestAnimationFrame(()=>{d.scrollTop=o,d.scrollLeft=s}))},[n,e.bodyRef,e.cloneRef,e.tableRef,z,a]),U=(0,c.useCallback)(()=>{if(E.current)return;E.current=!0,K(),setTimeout(()=>{q.current=!1},400);let t=v.current,n=g.current,r=m.current,i=e.bodyRef?.current,a=i?.scrollTop??0,o=i?.scrollLeft??0;f.current=null,p.current=null,s(),m.current=null,g.current=null,v.current=null;let c=e.cloneRef?.current,l=e.placeholderRef?.current;if(c&&l&&l.style.display!==`none`){let e=parseFloat(l.style.left)||0,i=parseFloat(l.style.top)||0;c.style.transition=`transform ${T}ms cubic-bezier(0.2, 0, 0, 1)`,c.style.transform=`translate(${e}px, ${i}px)`,setTimeout(()=>H(n,t,r,a,o),T)}else H(n,t,r,a,o)},[s,e.bodyRef,e.placeholderRef,e.cloneRef,H]),W=(0,c.useRef)(()=>{}),{touchStart:G,cancelLongPress:K,isTouchActiveRef:q}=b(e,V,U,(e,t)=>W.current(e,t)),J=(0,c.useCallback)(e=>{e.target!==e.currentTarget&&(q.current||V(e,e.clientX,e.clientY))},[V,q]),Y=(0,c.useCallback)((t,n)=>{if(E.current)return;let i=h.current;d.current.x=t,d.current.y=n;let a=e.bodyRef?.current;if(!a)return;let c=p.current;(!c||O.current)&&(c=a.getBoundingClientRect(),p.current=c);let l=a.scrollLeft,u=a.scrollTop,_=0,b=e.cloneRef?.current;b&&m.current===`column`&&(D.current||=b.querySelector(`.clone-body`),D.current&&(_=a.scrollTop)),b&&(b.style.transform=`translate(${t-i.x}px, ${n-i.y}px)`,m.current===`row`?b.scrollLeft=l:D.current&&(D.current.scrollTop=_));let C=0,w=m.current||r;if(!O.current&&M.current.size>0){let e=M.current.values().next().value;e&&!e.outer.isConnected&&(O.current=!0)}if(!O.current&&N.current.size>0){let e=N.current.values().next().value;e&&!e.outer.isConnected&&(O.current=!0)}if(w===`row`){if(n<c.top+30)o(-5,a,`vertical`),O.current=!0;else if(n>c.bottom-30)o(5,a,`vertical`),O.current=!0;else if(s(),O.current){O.current=!1,f.current=null,y.current=null,v.current=null,M.current.clear();let e=a.querySelectorAll(`.draggable[data-type="row"]`);for(let t=0;t<e.length;t++){let n=e[t],r=n.dataset.index;if(r===void 0)continue;let i=n.firstElementChild;i&&M.current.set(+r,{outer:n,inner:i})}}}else if(t<c.left+30)o(-5,a,`horizontal`),O.current=!0;else if(t>c.right-30)o(5,a,`horizontal`),O.current=!0;else if(s(),O.current){O.current=!1,f.current=null,y.current=null,v.current=null,N.current.clear(),P.current.clear();let t=e.headerRef?.current;if(t){let e=t.querySelectorAll(`.draggable[data-type="column"]`);for(let t=0;t<e.length;t++){let n=e[t],r=n.dataset.index;if(r===void 0)continue;let i=n.firstElementChild;i&&N.current.set(+r,{outer:n,inner:i})}}let n=a.querySelectorAll(`.td[data-col-index]`);for(let e=0;e<n.length;e++){let t=n[e],r=+t.dataset.colIndex;P.current.has(r)||P.current.set(r,[]),P.current.get(r).push(t)}}let T;w===`row`?(T=f.current,T||(T=F(),f.current=T),T&&T.length>0&&(C=x(n-c.top+u,T))):(T=f.current,T||(T=I(),f.current=T),T&&T.length>0&&(C=S(t,T))),C!==v.current&&(v.current=C,requestAnimationFrame(()=>R(g.current,C,w)))},[d,e.bodyRef,e.cloneRef,e.headerRef,r,o,s,F,I,R]);W.current=Y;let X=(0,c.useCallback)(()=>{K(),f.current=null,p.current=null;let t=e.cloneRef?.current;t&&(t.style.visibility=`hidden`);let r=e.tableRef?.current;r&&(r.style.touchAction=``),n({type:`dragEnd`,value:{targetIndex:null,sourceIndex:null}}),s(),z(),m.current=null,g.current=null,v.current=null},[n,s,z,e.cloneRef,e.tableRef,K]),Z=(0,c.useCallback)(e=>{e.key===`Escape`&&X()},[X]);return(0,c.useLayoutEffect)(()=>{if(!t.isDragging){z();let t=e.cloneRef?.current;t&&(t.style.transition=``,t.style.transform=`translate(0px, 0px)`,t.style.visibility=``,t.scrollLeft=0)}},[t.isDragging,z,e.cloneRef]),(0,c.useEffect)(()=>{let t=e.bodyRef?.current;return t&&(t.style.touchAction=`none`),()=>{t&&(t.style.touchAction=``)}},[e.bodyRef]),(0,c.useEffect)(()=>{if(!t.isDragging)return;let e=0,n=0,r=!1,i=t=>{e=t.clientX,n=t.clientY,r||(r=!0,requestAnimationFrame(()=>{r=!1,Y(e,n)}))},a=()=>{U()};return window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,a),window.addEventListener(`pointercancel`,a),window.addEventListener(`keydown`,Z),()=>{window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,a),window.removeEventListener(`pointercancel`,a),window.removeEventListener(`keydown`,Z)}},[t.isDragging,Y,U,Z]),{dragStart:J,touchStart:G}},D={columnDragRange:{start:void 0,end:void 0},rowDragRange:{start:void 0,end:void 0},defaultSizing:50};function O(e,t){switch(t.type){case`setClone`:return{...e,clone:t.value};case`setDragged`:return{...e,dragged:{...e.dragged,...t.value}};case`setDragType`:return{...e,dragType:t.value};case`setTableDimensions`:return{...e,tableDimensions:t.value};case`setRef`:return{...e,refs:{...e.refs,[t.refName]:t.value}};case`setBodyScrollBarWidth`:return{...e,bodyScrollBarWidth:t.value};case`setWidths`:return{...e,widths:t.value};case`setColumnIds`:return{...e,columnIds:t.value};case`setOptions`:return{...e,options:{...e.options,...t.value}};case`dragStart`:return{...e,rect:t.value.rect,dragged:{...e.dragged,...t.value.dragged},dragType:t.value.dragType};case`dragEnd`:return{...e,clone:null,dragged:{initial:{x:0,y:0},translate:{x:0,y:0},isDragging:!1,draggedID:null,targetIndex:t.value?.targetIndex??null,sourceIndex:t.value?.sourceIndex??null},dragType:null,rect:{draggedItemWidth:0,draggedItemHeight:0}};default:throw Error(`Unhandled action`)}}var k={clone:null,dragged:{initial:{x:0,y:0},translate:{x:0,y:0},isDragging:!1,draggedID:null,targetIndex:null,sourceIndex:null},dragType:null,rect:{draggedItemWidth:0,draggedItemHeight:0},tableDimensions:{height:0,width:0},refs:{tableRef:{current:null},bodyRef:{current:null},headerRef:{current:null},cloneRef:{current:null},placeholderRef:{current:null}},bodyScrollBarWidth:0,options:D,widths:[],columnIds:[]},A={position:`relative`,display:`flex`,flexFlow:`column`},j={position:`fixed`,pointerEvents:`none`,zIndex:3,top:0,left:0,display:`none`},M=(0,c.forwardRef)(({children:e,className:t,style:n,options:r,onDragEnd:i,renderPlaceholder:a},o)=>{let s=(0,c.useRef)(null),l=(0,c.useRef)(null),u=(0,c.useRef)(null);(0,c.useImperativeHandle)(o,()=>s.current,[]);let[f,h]=(0,c.useReducer)(O,k),g=(0,c.useMemo)(()=>({state:f,dispatch:h}),[f]);(0,c.useEffect)(()=>{h({type:`setRef`,refName:`tableRef`,value:s}),h({type:`setRef`,refName:`cloneRef`,value:l}),h({type:`setRef`,refName:`placeholderRef`,value:u})},[s]),(0,c.useEffect)(()=>{let e=()=>{s.current&&h({type:`setTableDimensions`,value:{height:s.current.offsetHeight,width:s.current.offsetWidth}})};return e(),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[s]),(0,c.useEffect)(()=>{r&&h({type:`setOptions`,value:r})},[r]);let{dragStart:_,touchStart:v}=E(f.refs,f.dragged,h,f.dragType,f.options,i);(0,c.useLayoutEffect)(()=>{if(f.clone&&f.dragType===`row`){let e=l.current,t=f.refs.bodyRef?.current;e&&t&&(e.scrollLeft=t.scrollLeft)}},[f.clone,f.dragType,f.refs.bodyRef]);let y=(0,c.useMemo)(()=>({position:`fixed`,zIndex:`5`,pointerEvents:`none`,top:0,left:0,display:`flex`,flexDirection:`column`,height:f.dragType===`row`?f.rect.draggedItemHeight:`${f.tableDimensions.height}px`,width:f.dragType===`column`?`${f.rect.draggedItemWidth}px`:`${f.tableDimensions.width}px`,overflow:`scroll`,scrollbarWidth:`none`,boxShadow:f.dragged.isDragging?`0 0 10px 0 rgba(0, 0, 0, 0.1)`:`none`}),[f.dragType,f.dragged.isDragging,f.rect.draggedItemHeight,f.rect.draggedItemWidth,f.tableDimensions.height,f.tableDimensions.width]);return(0,d.jsx)(m.Provider,{value:g,children:(0,d.jsxs)(p,{className:f.dragged.isDragging?`is-dragging`:``,children:[(0,d.jsx)(`div`,{id:`portalroot`,style:{...y,visibility:f.dragged.isDragging?`visible`:`hidden`},ref:l,children:(0,d.jsx)(`div`,{style:{flexShrink:0,order:-1},children:f.clone})}),(0,d.jsx)(`div`,{ref:u,style:j,children:a?a():(0,d.jsx)(`div`,{style:{width:`100%`,height:`100%`}})}),(0,d.jsx)(`div`,{"data-contextid":`context`,ref:s,onMouseDown:_,onTouchStart:v,style:{...A,...n},className:`table ${t??``}`,children:e})]})})});M.displayName=`TableProvider`;var N=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let i=(0,c.useRef)(null),a=r||i,{state:o,dispatch:s}=h(),l=(0,c.useCallback)(e=>`current`in e?e.current:null,[]);(0,c.useEffect)(()=>{i.current&&s({type:`setRef`,refName:`headerRef`,value:i})},[s]);let{HeaderScrollHandle:u}=_(o.refs),f={display:`flex`,flex:`1 0 auto`},p=(0,c.useMemo)(()=>({overflow:`hidden`,display:`flex`,paddingRight:`${o.bodyScrollBarWidth}px`,userSelect:o.dragged.isDragging?`none`:`auto`,...t}),[o.bodyScrollBarWidth,o.dragged.isDragging,t]);return(0,c.useLayoutEffect)(()=>{let e=l(a);e&&s({type:`setWidths`,value:Array.from(e.querySelectorAll(`.th`)).map(e=>{let t=e.getAttribute(`data-width`);return t?parseInt(t,10):0})})},[e,s,l,a]),(0,c.useLayoutEffect)(()=>{let e=l(a);e&&s({type:`setColumnIds`,value:Array.from(e.querySelectorAll(`.draggable`)).map(e=>e.getAttribute(`data-id`)||``)})},[e,s,l,a]),(0,d.jsx)(`div`,{className:`header ${n??``}`,children:(0,d.jsx)(`div`,{className:`thead`,style:p,"data-droppableid":`header`,onScroll:u,ref:a,children:(0,d.jsx)(`div`,{style:f,className:`tr`,children:e})})})});N.displayName=`TableHeader`;var P=(0,c.memo)(({children:e,id:t,index:n,type:r,styles:i={}})=>{let{state:a,dispatch:o}=h(),s=(0,c.useMemo)(()=>String(t)===String(a.dragged.draggedID)&&a.dragged.isDragging,[t,a.dragged.draggedID,a.dragged.isDragging]),l=(0,c.useMemo)(()=>r===`row`?C(n,a.options.rowDragRange.start,a.options.rowDragRange.end):C(n,a.options.columnDragRange.start,a.options.columnDragRange.end),[n,a.options.columnDragRange.end,a.options.columnDragRange.start,a.options.rowDragRange.end,a.options.rowDragRange.start,r]),u=(0,c.useRef)(null),f=(0,c.useRef)(!1);(0,c.useEffect)(()=>{f.current=!!u.current?.querySelector(`[data-drag-handle]`)},[e]);let p=(0,c.useMemo)(()=>({cursor:s?`-webkit-grabbing`:l?`auto`:`-webkit-grab`,zIndex:s?2:1,opacity:s?0:1,pointerEvents:s?`none`:`auto`,display:`flex`}),[l,s]);(0,c.useEffect)(()=>{u.current&&u.current.querySelector(`[data-drag-handle]`)&&(u.current.style.cursor=`auto`)},[e,l,s]);let m=t=>{if(t.pointerType===`touch`||l)return;let n=!t.isTrusted;f.current&&!n&&!t.target.closest(`[data-drag-handle]`)||o({type:`setClone`,value:c.default.cloneElement(e)})};return(0,d.jsx)(`div`,{className:`draggable`,"data-id":t,"data-index":n,"data-type":r,onPointerDown:m,"data-disabled":l?`true`:`false`,style:i,children:(0,d.jsx)(`div`,{ref:u,style:p,children:e})})});P.displayName=`Draggable`;var F=(0,c.memo)(({children:e,width:t,style:n,className:r,...i})=>{let{state:a}=h(),o=(0,c.useMemo)(()=>t??a.options.defaultSizing,[t,a.options.defaultSizing]),s=(0,c.useMemo)(()=>({width:`${o}px`,flex:`${o} 0 auto`}),[o]);return(0,d.jsx)(P,{...i,styles:s,type:`column`,children:(0,d.jsx)(`div`,{className:`th ${r??``}`,"data-width":t,style:{width:`100%`,...n},children:e})})});F.displayName=`ColumnCell`;var I={display:`flex`,overflow:`hidden`,flex:1},L=(0,c.forwardRef)(({children:e,style:t,className:n},r)=>{let[i,a]=(0,c.useState)(0),o=(0,c.useRef)(null);(0,c.useImperativeHandle)(r,()=>o.current,[]);let{state:s,dispatch:l}=h(),f=(0,c.useMemo)(()=>{if(s.dragged.sourceIndex===null)return null;let t=e=>{let n=[];return c.default.Children.forEach(e,e=>{c.default.isValidElement(e)&&(e.props.id!==void 0&&e.props.index!==void 0&&e.props.children?n.push(e):e.props.children&&n.push(...t(e.props.children)))}),n};return t(e).map(e=>{let t=c.default.Children.toArray(e.props.children).filter(e=>c.default.isValidElement(e)&&String(e.props.index)===String(s.dragged.sourceIndex)).map(e=>c.default.cloneElement(e,{key:e.props.index,isClone:!0}));return c.default.cloneElement(e,{key:e.props.id,...e.props,children:t})})},[e,s.dragged.sourceIndex]);(0,c.useEffect)(()=>{l({type:`setRef`,refName:`bodyRef`,value:o})},[l,o]);let{BodyScrollHandle:p}=_(s.refs),m=(0,c.useMemo)(()=>({overflowX:`auto`,overflowY:`auto`,flex:1,userSelect:s.dragged.isDragging?`none`:`auto`,...t}),[s.dragged.isDragging,t]);return(0,c.useEffect)(()=>{if(o.current){let e=o.current.clientWidth;l({type:`setBodyScrollBarWidth`,value:o.current.offsetWidth-e})}},[l,o]),(0,c.useLayoutEffect)(()=>{o.current&&a(o.current.scrollHeight)},[o,e]),(0,d.jsxs)(c.default.Fragment,{children:[s.dragType===`column`&&s.refs.cloneRef?.current&&(0,u.createPortal)((0,d.jsx)(`div`,{className:`body clone-body`,"data-droppableid":`body`,style:{overflow:`hidden`,flex:1},children:(0,d.jsx)(`div`,{className:`rbody`,style:{height:i,position:`relative`},children:f&&c.default.Children.toArray(f)})}),s.refs.cloneRef.current),(0,d.jsx)(`div`,{className:`body ${n??``}`,style:I,children:(0,d.jsx)(`div`,{className:`ibody`,style:m,"data-droppableid":`body`,onScroll:p,ref:o,children:e})})]})}),R={display:`flex`,flex:`1 0 auto`,minHeight:`24px`},z=(0,c.memo)(({children:e,style:t,className:n,...r})=>{let i=(0,c.useMemo)(()=>t?{...R,...t}:R,[t]),a=(0,f.default)(`tr`,n);return(0,d.jsx)(P,{...r,type:`row`,children:(0,d.jsx)(`div`,{className:a,style:i,children:e})})});z.displayName=`BodyRow`;var B=(0,c.memo)(({children:e,style:t,className:n,isClone:r,...i})=>{let{index:a}=i,{state:o}=h(),s=(0,c.useMemo)(()=>o.columnIds[a]??``,[o.columnIds,a]),l=(0,c.useMemo)(()=>o.widths[a]??o.options.defaultSizing,[o.widths,a,o.options.defaultSizing]),u=(0,c.useMemo)(()=>r?!1:s===o.dragged.draggedID,[r,s,o.dragged.draggedID]),f=(0,c.useMemo)(()=>({display:`inline-flex`,opacity:u?0:1,width:`${l}px`,flex:`${l} 0 auto`,...t}),[u,l,t]);return(0,d.jsx)(`div`,{className:`td ${n??``}`,style:f,"data-col-index":a,children:e})});B.displayName=`RowCell`;var V=(0,c.memo)(({children:e,className:t,style:n})=>(0,d.jsx)(`div`,{"data-drag-handle":`true`,className:t,style:{cursor:`-webkit-grab`,display:`inline-flex`,alignItems:`center`,...n},children:e}));V.displayName=`DragHandle`,exports.BodyRow=z,exports.ColumnCell=F,exports.DragHandle=V,exports.RowCell=B,exports.TableBody=L,exports.TableContainer=M,exports.TableHeader=N,exports.useTable=h;
|
package/dist/index.es.js
CHANGED
|
@@ -195,13 +195,10 @@ var D = (e, t) => {
|
|
|
195
195
|
let { startAutoScroll: l, stopAutoScroll: u, setContainerRect: f, pointerRef: p } = C(e), m = d(null), g = d(null), _ = d(null), v = d({
|
|
196
196
|
x: 0,
|
|
197
197
|
y: 0
|
|
198
|
-
}), y = d(null), b = d(null), x = d({
|
|
198
|
+
}), y = d(null), b = d(null), x = d(null), S = d({
|
|
199
199
|
width: 0,
|
|
200
200
|
height: 0
|
|
201
|
-
}),
|
|
202
|
-
x: 0,
|
|
203
|
-
y: 0
|
|
204
|
-
}), w = d(!1), T = i(() => {
|
|
201
|
+
}), w = d(!1), T = d(null), k = d(!1), M = d(/* @__PURE__ */ new Set()), N = d(/* @__PURE__ */ new Set()), P = d(/* @__PURE__ */ new Map()), F = d(/* @__PURE__ */ new Map()), I = d(/* @__PURE__ */ new Map()), L = d(/* @__PURE__ */ new Map()), R = i(() => {
|
|
205
202
|
let t = e.bodyRef?.current;
|
|
206
203
|
if (!t) return null;
|
|
207
204
|
let n = t.scrollTop, r = t.getBoundingClientRect().top, i = t.querySelectorAll(".draggable[data-type=\"row\"]"), o = [];
|
|
@@ -218,7 +215,7 @@ var D = (e, t) => {
|
|
|
218
215
|
}
|
|
219
216
|
let { start: s, end: c } = a.rowDragRange;
|
|
220
217
|
return (s || c) && (o = o.filter((e) => (!s || +e.index >= s) && (!c || +e.index < c))), o;
|
|
221
|
-
}, [e.bodyRef, a.rowDragRange]),
|
|
218
|
+
}, [e.bodyRef, a.rowDragRange]), z = i(() => {
|
|
222
219
|
let t = e.headerRef?.current;
|
|
223
220
|
if (!t || !t.children[0]) return null;
|
|
224
221
|
let n = Array.from(t.children[0].children).map((e) => {
|
|
@@ -235,65 +232,56 @@ var D = (e, t) => {
|
|
|
235
232
|
let t = +e.index;
|
|
236
233
|
return (r === void 0 || t >= r) && (i === void 0 || t < i);
|
|
237
234
|
})), n;
|
|
238
|
-
}, [e.headerRef, a.columnDragRange]),
|
|
235
|
+
}, [e.headerRef, a.columnDragRange]), B = i((t, n, r, i) => {
|
|
239
236
|
let a = e.placeholderRef?.current;
|
|
240
237
|
if (!a || !t) {
|
|
241
238
|
a && (a.style.display = "none");
|
|
242
239
|
return;
|
|
243
240
|
}
|
|
244
|
-
let o =
|
|
241
|
+
let o = S.current, s = t.getBoundingClientRect(), c = e.tableRef?.current?.getBoundingClientRect(), l = (n ?? 0) < (r ?? 0);
|
|
245
242
|
a.style.display = "block", i === "row" ? (a.style.top = `${l ? s.top + s.height - o.height : s.top}px`, a.style.left = `${c?.left ?? s.left}px`, a.style.width = `${c?.width ?? s.width}px`, a.style.height = `${o.height}px`) : (a.style.top = `${c?.top ?? s.top}px`, a.style.left = `${l ? s.left + s.width - o.width : s.left}px`, a.style.width = `${o.width}px`, a.style.height = `${c?.height ?? s.height}px`);
|
|
246
|
-
}, [e.placeholderRef, e.tableRef]),
|
|
247
|
-
if (
|
|
248
|
-
let i = x.current, a = null, o = (
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
let
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
243
|
+
}, [e.placeholderRef, e.tableRef]), V = i((e, t, n) => {
|
|
244
|
+
if (e === null || t === null) return;
|
|
245
|
+
let r = S.current, i = x.current, a = i === null, o = a ? -Infinity : Math.min(i, t, e) - 1, s = a ? Infinity : Math.max(i, t, e) + 1, c = null, l = (n === "row" ? F.current : I.current).get(t);
|
|
246
|
+
l && (c = l.outer), B(c, e, t, n);
|
|
247
|
+
let u = (n, r, i) => {
|
|
248
|
+
let c = (n, a, o) => {
|
|
249
|
+
let s = "";
|
|
250
|
+
n > e && n <= t ? s = `translate${r}(-${i}px)` : n < e && n >= t && (s = `translate${r}(${i}px)`), o.style.transform = s, o.style.transition = n === e ? "none" : A, s && M.current.add(o), n === t ? a.setAttribute("data-drop-target", "true") : a.removeAttribute("data-drop-target");
|
|
251
|
+
};
|
|
252
|
+
if (a) for (let [e, { outer: t, inner: r }] of n) c(e, t, r);
|
|
253
|
+
else for (let e = o; e <= s; e++) {
|
|
254
|
+
let t = n.get(e);
|
|
255
|
+
t && c(e, t.outer, t.inner);
|
|
256
256
|
}
|
|
257
257
|
};
|
|
258
|
-
if (
|
|
259
|
-
else if (
|
|
260
|
-
|
|
261
|
-
let
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
for (let
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
258
|
+
if (n === "row") u(F.current, "Y", r.height);
|
|
259
|
+
else if (n === "column") {
|
|
260
|
+
u(I.current, "X", r.width);
|
|
261
|
+
let n = L.current, i = P.current, c = (n, a, o) => {
|
|
262
|
+
let s = "";
|
|
263
|
+
n > e && n <= t ? s = `translateX(-${r.width}px)` : n < e && n >= t && (s = `translateX(${r.width}px)`);
|
|
264
|
+
for (let e of a) i.get(e) !== s && (e.style.transform = s, o && (e.style.transition = A), i.set(e, s), s && N.current.add(e));
|
|
265
|
+
};
|
|
266
|
+
if (a) for (let [e, t] of n) c(e, t, !0);
|
|
267
|
+
else for (let e = o; e <= s; e++) {
|
|
268
|
+
let t = n.get(e);
|
|
269
|
+
t && c(e, t, !1);
|
|
268
270
|
}
|
|
269
271
|
}
|
|
270
|
-
|
|
271
|
-
}, [
|
|
272
|
-
e.bodyRef,
|
|
273
|
-
e.headerRef,
|
|
274
|
-
M
|
|
275
|
-
]), P = i(() => {
|
|
272
|
+
x.current = t;
|
|
273
|
+
}, [B]), H = i(() => {
|
|
276
274
|
let t = e.placeholderRef?.current;
|
|
277
275
|
t && (t.style.display = "none");
|
|
278
|
-
for (let
|
|
279
|
-
|
|
280
|
-
let
|
|
281
|
-
|
|
282
|
-
e[t].removeAttribute("data-drop-target");
|
|
283
|
-
let n = e[t].firstElementChild;
|
|
284
|
-
n && (n.style.transition = "none", n.style.transform = "");
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
let n = e.bodyRef?.current;
|
|
288
|
-
if (n) {
|
|
289
|
-
let e = n.querySelectorAll(".td[data-col-index]");
|
|
290
|
-
for (let t = 0; t < e.length; t++) e[t].style.transition = "none", e[t].style.transform = "";
|
|
276
|
+
for (let e of M.current) {
|
|
277
|
+
e.style.transition = "none", e.style.transform = "";
|
|
278
|
+
let t = e.parentElement;
|
|
279
|
+
t && t.removeAttribute("data-drop-target");
|
|
291
280
|
}
|
|
292
|
-
|
|
293
|
-
e.
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
]), F = (e) => {
|
|
281
|
+
M.current.clear();
|
|
282
|
+
for (let e of N.current) e.style.transition = "none", e.style.transform = "";
|
|
283
|
+
N.current.clear(), P.current.clear(), x.current = null;
|
|
284
|
+
}, [e.placeholderRef]), U = (e) => {
|
|
297
285
|
let t = e, n = !1;
|
|
298
286
|
for (; t;) {
|
|
299
287
|
if (t.dataset?.dragHandle === "true" && (n = !0), t.dataset?.contextid || t.dataset?.disabled === "true") return null;
|
|
@@ -304,18 +292,18 @@ var D = (e, t) => {
|
|
|
304
292
|
t = t.parentNode;
|
|
305
293
|
}
|
|
306
294
|
return null;
|
|
307
|
-
},
|
|
308
|
-
let a =
|
|
295
|
+
}, W = i((t, r, i) => {
|
|
296
|
+
let a = U(t.target);
|
|
309
297
|
if (!a) return;
|
|
310
298
|
let { element: o, foundHandle: s } = a;
|
|
311
299
|
if (!s && o.querySelector("[data-drag-handle]")) return;
|
|
312
300
|
let c = o.dataset.id, l = +o.dataset.index, u = o.dataset.type, d = t.type === "touchstart";
|
|
313
|
-
_.current = u ?? null, y.current = l, b.current = null, w.current = !1, d && o.dispatchEvent(new PointerEvent("pointerdown", {
|
|
301
|
+
_.current = u ?? null, y.current = l, b.current = null, T.current = null, x.current = null, w.current = !1, d && o.dispatchEvent(new PointerEvent("pointerdown", {
|
|
314
302
|
bubbles: !0,
|
|
315
303
|
pointerType: "mouse"
|
|
316
304
|
}));
|
|
317
305
|
let h = u === "row" ? e.bodyRef?.current?.scrollLeft ?? 0 : 0, C = o.getBoundingClientRect();
|
|
318
|
-
|
|
306
|
+
S.current = {
|
|
319
307
|
width: C.width,
|
|
320
308
|
height: C.height
|
|
321
309
|
};
|
|
@@ -323,10 +311,7 @@ var D = (e, t) => {
|
|
|
323
311
|
x: r - C.left - h,
|
|
324
312
|
y: i - C.top
|
|
325
313
|
};
|
|
326
|
-
v.current = E,
|
|
327
|
-
x: r,
|
|
328
|
-
y: i
|
|
329
|
-
}, p.current = {
|
|
314
|
+
v.current = E, p.current = {
|
|
330
315
|
x: r,
|
|
331
316
|
y: i
|
|
332
317
|
};
|
|
@@ -334,22 +319,55 @@ var D = (e, t) => {
|
|
|
334
319
|
x: C.left + h,
|
|
335
320
|
y: C.top
|
|
336
321
|
};
|
|
337
|
-
m.current = u === "row" ?
|
|
322
|
+
m.current = u === "row" ? R() : z(), F.current.clear(), I.current.clear(), L.current.clear();
|
|
338
323
|
let O = e.bodyRef?.current;
|
|
339
324
|
if (O) {
|
|
340
325
|
let e = O.getBoundingClientRect();
|
|
341
|
-
g.current = e, f(e)
|
|
326
|
+
if (g.current = e, f(e), u === "row") {
|
|
327
|
+
let e = O.querySelectorAll(".draggable[data-type=\"row\"]");
|
|
328
|
+
for (let t = 0; t < e.length; t++) {
|
|
329
|
+
let n = e[t], r = n.dataset.index;
|
|
330
|
+
if (r === void 0) continue;
|
|
331
|
+
let i = n.firstElementChild;
|
|
332
|
+
i && F.current.set(+r, {
|
|
333
|
+
outer: n,
|
|
334
|
+
inner: i
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
if (u === "column") {
|
|
340
|
+
let t = e.headerRef?.current;
|
|
341
|
+
if (t) {
|
|
342
|
+
let e = t.querySelectorAll(".draggable[data-type=\"column\"]");
|
|
343
|
+
for (let t = 0; t < e.length; t++) {
|
|
344
|
+
let n = e[t], r = n.dataset.index;
|
|
345
|
+
if (r === void 0) continue;
|
|
346
|
+
let i = n.firstElementChild;
|
|
347
|
+
i && I.current.set(+r, {
|
|
348
|
+
outer: n,
|
|
349
|
+
inner: i
|
|
350
|
+
});
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
if (O) {
|
|
354
|
+
let e = O.querySelectorAll(".td[data-col-index]");
|
|
355
|
+
for (let t = 0; t < e.length; t++) {
|
|
356
|
+
let n = e[t], r = +n.dataset.colIndex;
|
|
357
|
+
L.current.has(r) || L.current.set(r, []), L.current.get(r).push(n);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
342
360
|
}
|
|
343
|
-
let
|
|
344
|
-
|
|
345
|
-
let
|
|
346
|
-
|
|
347
|
-
let
|
|
348
|
-
|
|
361
|
+
let k = e.tableRef?.current;
|
|
362
|
+
k && (k.style.touchAction = "none");
|
|
363
|
+
let A = e.cloneRef?.current;
|
|
364
|
+
A && (A.style.transform = `translate(${D.x}px, ${D.y}px)`);
|
|
365
|
+
let j = e.tableRef?.current;
|
|
366
|
+
j && n({
|
|
349
367
|
type: "setTableDimensions",
|
|
350
368
|
value: {
|
|
351
|
-
height:
|
|
352
|
-
width:
|
|
369
|
+
height: j.offsetHeight,
|
|
370
|
+
width: j.offsetWidth
|
|
353
371
|
}
|
|
354
372
|
}), n({
|
|
355
373
|
type: "dragStart",
|
|
@@ -368,25 +386,23 @@ var D = (e, t) => {
|
|
|
368
386
|
dragType: u ?? null
|
|
369
387
|
}
|
|
370
388
|
});
|
|
371
|
-
let N =
|
|
372
|
-
|
|
373
|
-
|
|
389
|
+
let M = O?.scrollLeft ?? 0, N = O?.scrollTop ?? 0;
|
|
390
|
+
requestAnimationFrame(() => {
|
|
391
|
+
let t = e.cloneRef?.current;
|
|
392
|
+
if (t) if (u === "row") t.scrollLeft = M;
|
|
374
393
|
else {
|
|
375
394
|
let e = t.querySelector(".clone-body");
|
|
376
|
-
e && (e.scrollTop =
|
|
395
|
+
e && (e.scrollTop = N);
|
|
377
396
|
}
|
|
378
|
-
};
|
|
379
|
-
N(), requestAnimationFrame(() => {
|
|
380
|
-
N(), requestAnimationFrame(N);
|
|
381
397
|
});
|
|
382
398
|
}, [
|
|
383
399
|
n,
|
|
384
400
|
e,
|
|
385
|
-
|
|
386
|
-
|
|
401
|
+
R,
|
|
402
|
+
z,
|
|
387
403
|
p,
|
|
388
404
|
f
|
|
389
|
-
]),
|
|
405
|
+
]), G = i((t, r, i, a, o) => {
|
|
390
406
|
let c = e.cloneRef?.current;
|
|
391
407
|
c && (c.style.visibility = "hidden");
|
|
392
408
|
let l = e.tableRef?.current;
|
|
@@ -402,7 +418,7 @@ var D = (e, t) => {
|
|
|
402
418
|
sourceIndex: t
|
|
403
419
|
}
|
|
404
420
|
});
|
|
405
|
-
}),
|
|
421
|
+
}), H();
|
|
406
422
|
let u = e.bodyRef?.current;
|
|
407
423
|
u && (u.scrollTop = a, u.scrollLeft = o, requestAnimationFrame(() => {
|
|
408
424
|
u.scrollTop = a, u.scrollLeft = o;
|
|
@@ -412,70 +428,103 @@ var D = (e, t) => {
|
|
|
412
428
|
e.bodyRef,
|
|
413
429
|
e.cloneRef,
|
|
414
430
|
e.tableRef,
|
|
415
|
-
|
|
431
|
+
H,
|
|
416
432
|
s
|
|
417
|
-
]),
|
|
433
|
+
]), K = i(() => {
|
|
418
434
|
if (w.current) return;
|
|
419
|
-
w.current = !0,
|
|
420
|
-
|
|
435
|
+
w.current = !0, Y(), setTimeout(() => {
|
|
436
|
+
X.current = !1;
|
|
421
437
|
}, 400);
|
|
422
438
|
let t = b.current, n = y.current, r = _.current, i = e.bodyRef?.current, a = i?.scrollTop ?? 0, o = i?.scrollLeft ?? 0;
|
|
423
439
|
m.current = null, g.current = null, u(), _.current = null, y.current = null, b.current = null;
|
|
424
440
|
let s = e.cloneRef?.current, c = e.placeholderRef?.current;
|
|
425
441
|
if (s && c && c.style.display !== "none") {
|
|
426
442
|
let e = parseFloat(c.style.left) || 0, i = parseFloat(c.style.top) || 0;
|
|
427
|
-
s.style.transition = `transform ${j}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() =>
|
|
428
|
-
} else
|
|
443
|
+
s.style.transition = `transform ${j}ms cubic-bezier(0.2, 0, 0, 1)`, s.style.transform = `translate(${e}px, ${i}px)`, setTimeout(() => G(n, t, r, a, o), j);
|
|
444
|
+
} else G(n, t, r, a, o);
|
|
429
445
|
}, [
|
|
430
446
|
u,
|
|
431
447
|
e.bodyRef,
|
|
432
448
|
e.placeholderRef,
|
|
433
449
|
e.cloneRef,
|
|
434
|
-
|
|
435
|
-
]),
|
|
436
|
-
e.target !== e.currentTarget && (
|
|
437
|
-
}, [
|
|
450
|
+
G
|
|
451
|
+
]), q = d(() => {}), { touchStart: J, cancelLongPress: Y, isTouchActiveRef: X } = E(e, W, K, (e, t) => q.current(e, t)), ee = i((e) => {
|
|
452
|
+
e.target !== e.currentTarget && (X.current || W(e, e.clientX, e.clientY));
|
|
453
|
+
}, [W, X]), Z = i((t, n) => {
|
|
438
454
|
if (w.current) return;
|
|
439
455
|
let i = v.current;
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
};
|
|
447
|
-
let
|
|
448
|
-
if (
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
456
|
+
p.current.x = t, p.current.y = n;
|
|
457
|
+
let a = e.bodyRef?.current;
|
|
458
|
+
if (!a) return;
|
|
459
|
+
let o = g.current;
|
|
460
|
+
(!o || k.current) && (o = a.getBoundingClientRect(), g.current = o);
|
|
461
|
+
let s = a.scrollLeft, c = a.scrollTop, d = 0, f = e.cloneRef?.current;
|
|
462
|
+
f && _.current === "column" && (T.current ||= f.querySelector(".clone-body"), T.current && (d = a.scrollTop)), f && (f.style.transform = `translate(${t - i.x}px, ${n - i.y}px)`, _.current === "row" ? f.scrollLeft = s : T.current && (T.current.scrollTop = d));
|
|
463
|
+
let h = 0, S = _.current || r;
|
|
464
|
+
if (!k.current && F.current.size > 0) {
|
|
465
|
+
let e = F.current.values().next().value;
|
|
466
|
+
e && !e.outer.isConnected && (k.current = !0);
|
|
467
|
+
}
|
|
468
|
+
if (!k.current && I.current.size > 0) {
|
|
469
|
+
let e = I.current.values().next().value;
|
|
470
|
+
e && !e.outer.isConnected && (k.current = !0);
|
|
471
|
+
}
|
|
472
|
+
if (S === "row") {
|
|
473
|
+
if (n < o.top + 30) l(-5, a, "vertical"), k.current = !0;
|
|
474
|
+
else if (n > o.bottom - 30) l(5, a, "vertical"), k.current = !0;
|
|
475
|
+
else if (u(), k.current) {
|
|
476
|
+
k.current = !1, m.current = null, x.current = null, b.current = null, F.current.clear();
|
|
477
|
+
let e = a.querySelectorAll(".draggable[data-type=\"row\"]");
|
|
478
|
+
for (let t = 0; t < e.length; t++) {
|
|
479
|
+
let n = e[t], r = n.dataset.index;
|
|
480
|
+
if (r === void 0) continue;
|
|
481
|
+
let i = n.firstElementChild;
|
|
482
|
+
i && F.current.set(+r, {
|
|
483
|
+
outer: n,
|
|
484
|
+
inner: i
|
|
485
|
+
});
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
} else if (t < o.left + 30) l(-5, a, "horizontal"), k.current = !0;
|
|
489
|
+
else if (t > o.right - 30) l(5, a, "horizontal"), k.current = !0;
|
|
490
|
+
else if (u(), k.current) {
|
|
491
|
+
k.current = !1, m.current = null, x.current = null, b.current = null, I.current.clear(), L.current.clear();
|
|
492
|
+
let t = e.headerRef?.current;
|
|
493
|
+
if (t) {
|
|
494
|
+
let e = t.querySelectorAll(".draggable[data-type=\"column\"]");
|
|
495
|
+
for (let t = 0; t < e.length; t++) {
|
|
496
|
+
let n = e[t], r = n.dataset.index;
|
|
497
|
+
if (r === void 0) continue;
|
|
498
|
+
let i = n.firstElementChild;
|
|
499
|
+
i && I.current.set(+r, {
|
|
500
|
+
outer: n,
|
|
501
|
+
inner: i
|
|
502
|
+
});
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
let n = a.querySelectorAll(".td[data-col-index]");
|
|
506
|
+
for (let e = 0; e < n.length; e++) {
|
|
507
|
+
let t = n[e], r = +t.dataset.colIndex;
|
|
508
|
+
L.current.has(r) || L.current.set(r, []), L.current.get(r).push(t);
|
|
455
509
|
}
|
|
456
510
|
}
|
|
457
|
-
let
|
|
458
|
-
|
|
459
|
-
let s = g.current;
|
|
460
|
-
s || (s = o.getBoundingClientRect(), g.current = s);
|
|
461
|
-
let c = 0, d = _.current || r;
|
|
462
|
-
d === "row" ? n < s.top + 30 ? (l(-5, o, "vertical"), m.current = null) : n > s.bottom - 30 ? (l(5, o, "vertical"), m.current = null) : u() : t < s.left + 30 ? (l(-5, o, "horizontal"), m.current = null) : t > s.right - 30 ? (l(5, o, "horizontal"), m.current = null) : u();
|
|
463
|
-
let f;
|
|
464
|
-
d === "row" ? (f = T(), m.current = f, f && f.length > 0 && (c = D(n - s.top + o.scrollTop, f))) : (f = k(), m.current = f, f && f.length > 0 && (c = O(t, f))), c !== b.current && (b.current = c, requestAnimationFrame(() => N(y.current, c, d)));
|
|
511
|
+
let C;
|
|
512
|
+
S === "row" ? (C = m.current, C || (C = R(), m.current = C), C && C.length > 0 && (h = D(n - o.top + c, C))) : (C = m.current, C || (C = z(), m.current = C), C && C.length > 0 && (h = O(t, C))), h !== b.current && (b.current = h, requestAnimationFrame(() => V(y.current, h, S)));
|
|
465
513
|
}, [
|
|
466
|
-
|
|
514
|
+
p,
|
|
467
515
|
e.bodyRef,
|
|
468
516
|
e.cloneRef,
|
|
469
|
-
|
|
470
|
-
|
|
517
|
+
e.headerRef,
|
|
518
|
+
r,
|
|
471
519
|
l,
|
|
472
520
|
u,
|
|
473
|
-
|
|
474
|
-
|
|
521
|
+
R,
|
|
522
|
+
z,
|
|
523
|
+
V
|
|
475
524
|
]);
|
|
476
|
-
|
|
477
|
-
let
|
|
478
|
-
|
|
525
|
+
q.current = Z;
|
|
526
|
+
let Q = i(() => {
|
|
527
|
+
Y(), m.current = null, g.current = null;
|
|
479
528
|
let t = e.cloneRef?.current;
|
|
480
529
|
t && (t.style.visibility = "hidden");
|
|
481
530
|
let r = e.tableRef?.current;
|
|
@@ -485,25 +534,26 @@ var D = (e, t) => {
|
|
|
485
534
|
targetIndex: null,
|
|
486
535
|
sourceIndex: null
|
|
487
536
|
}
|
|
488
|
-
}), u(), _.current = null, y.current = null, b.current = null;
|
|
537
|
+
}), u(), H(), _.current = null, y.current = null, b.current = null;
|
|
489
538
|
}, [
|
|
490
539
|
n,
|
|
491
540
|
u,
|
|
541
|
+
H,
|
|
492
542
|
e.cloneRef,
|
|
493
543
|
e.tableRef,
|
|
494
|
-
|
|
495
|
-
]),
|
|
496
|
-
e.key === "Escape" &&
|
|
497
|
-
}, [
|
|
544
|
+
Y
|
|
545
|
+
]), $ = i((e) => {
|
|
546
|
+
e.key === "Escape" && Q();
|
|
547
|
+
}, [Q]);
|
|
498
548
|
return c(() => {
|
|
499
549
|
if (!t.isDragging) {
|
|
500
|
-
|
|
550
|
+
H();
|
|
501
551
|
let t = e.cloneRef?.current;
|
|
502
552
|
t && (t.style.transition = "", t.style.transform = "translate(0px, 0px)", t.style.visibility = "", t.scrollLeft = 0);
|
|
503
553
|
}
|
|
504
554
|
}, [
|
|
505
555
|
t.isDragging,
|
|
506
|
-
|
|
556
|
+
H,
|
|
507
557
|
e.cloneRef
|
|
508
558
|
]), o(() => {
|
|
509
559
|
let t = e.bodyRef?.current;
|
|
@@ -512,22 +562,24 @@ var D = (e, t) => {
|
|
|
512
562
|
};
|
|
513
563
|
}, [e.bodyRef]), o(() => {
|
|
514
564
|
if (!t.isDragging) return;
|
|
515
|
-
let e = (
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
565
|
+
let e = 0, n = 0, r = !1, i = (t) => {
|
|
566
|
+
e = t.clientX, n = t.clientY, r || (r = !0, requestAnimationFrame(() => {
|
|
567
|
+
r = !1, Z(e, n);
|
|
568
|
+
}));
|
|
569
|
+
}, a = () => {
|
|
570
|
+
K();
|
|
519
571
|
};
|
|
520
|
-
return window.addEventListener("pointermove",
|
|
521
|
-
window.removeEventListener("pointermove",
|
|
572
|
+
return window.addEventListener("pointermove", i), window.addEventListener("pointerup", a), window.addEventListener("pointercancel", a), window.addEventListener("keydown", $), () => {
|
|
573
|
+
window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", a), window.removeEventListener("pointercancel", a), window.removeEventListener("keydown", $);
|
|
522
574
|
};
|
|
523
575
|
}, [
|
|
524
576
|
t.isDragging,
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
577
|
+
Z,
|
|
578
|
+
K,
|
|
579
|
+
$
|
|
528
580
|
]), {
|
|
529
|
-
dragStart:
|
|
530
|
-
touchStart:
|
|
581
|
+
dragStart: ee,
|
|
582
|
+
touchStart: J
|
|
531
583
|
};
|
|
532
584
|
}, N = {
|
|
533
585
|
columnDragRange: {
|
|
@@ -669,47 +721,58 @@ var F = {
|
|
|
669
721
|
top: 0,
|
|
670
722
|
left: 0,
|
|
671
723
|
display: "none"
|
|
672
|
-
}, R = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a },
|
|
673
|
-
let
|
|
674
|
-
s(
|
|
675
|
-
let [
|
|
676
|
-
state:
|
|
677
|
-
dispatch:
|
|
678
|
-
}), [
|
|
724
|
+
}, R = n(({ children: e, className: t, style: n, options: r, onDragEnd: i, renderPlaceholder: a }, f) => {
|
|
725
|
+
let p = d(null), m = d(null), h = d(null);
|
|
726
|
+
s(f, () => p.current, []);
|
|
727
|
+
let [v, x] = u(P, F), S = l(() => ({
|
|
728
|
+
state: v,
|
|
729
|
+
dispatch: x
|
|
730
|
+
}), [v]);
|
|
679
731
|
o(() => {
|
|
680
|
-
|
|
732
|
+
x({
|
|
681
733
|
type: "setRef",
|
|
682
734
|
refName: "tableRef",
|
|
683
|
-
value:
|
|
684
|
-
}),
|
|
735
|
+
value: p
|
|
736
|
+
}), x({
|
|
685
737
|
type: "setRef",
|
|
686
738
|
refName: "cloneRef",
|
|
687
|
-
value:
|
|
688
|
-
}),
|
|
739
|
+
value: m
|
|
740
|
+
}), x({
|
|
689
741
|
type: "setRef",
|
|
690
742
|
refName: "placeholderRef",
|
|
691
|
-
value:
|
|
743
|
+
value: h
|
|
692
744
|
});
|
|
693
|
-
}, [
|
|
745
|
+
}, [p]), o(() => {
|
|
694
746
|
let e = () => {
|
|
695
|
-
|
|
747
|
+
p.current && x({
|
|
696
748
|
type: "setTableDimensions",
|
|
697
749
|
value: {
|
|
698
|
-
height:
|
|
699
|
-
width:
|
|
750
|
+
height: p.current.offsetHeight,
|
|
751
|
+
width: p.current.offsetWidth
|
|
700
752
|
}
|
|
701
753
|
});
|
|
702
754
|
};
|
|
703
755
|
return e(), window.addEventListener("resize", e), () => {
|
|
704
756
|
window.removeEventListener("resize", e);
|
|
705
757
|
};
|
|
706
|
-
}, [
|
|
707
|
-
r &&
|
|
758
|
+
}, [p]), o(() => {
|
|
759
|
+
r && x({
|
|
708
760
|
type: "setOptions",
|
|
709
761
|
value: r
|
|
710
762
|
});
|
|
711
763
|
}, [r]);
|
|
712
|
-
let { dragStart:
|
|
764
|
+
let { dragStart: C, touchStart: w } = M(v.refs, v.dragged, x, v.dragType, v.options, i);
|
|
765
|
+
c(() => {
|
|
766
|
+
if (v.clone && v.dragType === "row") {
|
|
767
|
+
let e = m.current, t = v.refs.bodyRef?.current;
|
|
768
|
+
e && t && (e.scrollLeft = t.scrollLeft);
|
|
769
|
+
}
|
|
770
|
+
}, [
|
|
771
|
+
v.clone,
|
|
772
|
+
v.dragType,
|
|
773
|
+
v.refs.bodyRef
|
|
774
|
+
]);
|
|
775
|
+
let T = l(() => ({
|
|
713
776
|
position: "fixed",
|
|
714
777
|
zIndex: "5",
|
|
715
778
|
pointerEvents: "none",
|
|
@@ -717,40 +780,41 @@ var F = {
|
|
|
717
780
|
left: 0,
|
|
718
781
|
display: "flex",
|
|
719
782
|
flexDirection: "column",
|
|
720
|
-
height:
|
|
721
|
-
width:
|
|
722
|
-
overflow: "
|
|
723
|
-
|
|
783
|
+
height: v.dragType === "row" ? v.rect.draggedItemHeight : `${v.tableDimensions.height}px`,
|
|
784
|
+
width: v.dragType === "column" ? `${v.rect.draggedItemWidth}px` : `${v.tableDimensions.width}px`,
|
|
785
|
+
overflow: "scroll",
|
|
786
|
+
scrollbarWidth: "none",
|
|
787
|
+
boxShadow: v.dragged.isDragging ? "0 0 10px 0 rgba(0, 0, 0, 0.1)" : "none"
|
|
724
788
|
}), [
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
789
|
+
v.dragType,
|
|
790
|
+
v.dragged.isDragging,
|
|
791
|
+
v.rect.draggedItemHeight,
|
|
792
|
+
v.rect.draggedItemWidth,
|
|
793
|
+
v.tableDimensions.height,
|
|
794
|
+
v.tableDimensions.width
|
|
731
795
|
]);
|
|
732
796
|
return /* @__PURE__ */ g(b.Provider, {
|
|
733
|
-
value:
|
|
797
|
+
value: S,
|
|
734
798
|
children: /* @__PURE__ */ _(y, {
|
|
735
|
-
className:
|
|
799
|
+
className: v.dragged.isDragging ? "is-dragging" : "",
|
|
736
800
|
children: [
|
|
737
801
|
/* @__PURE__ */ g("div", {
|
|
738
802
|
id: "portalroot",
|
|
739
803
|
style: {
|
|
740
|
-
...
|
|
741
|
-
visibility:
|
|
804
|
+
...T,
|
|
805
|
+
visibility: v.dragged.isDragging ? "visible" : "hidden"
|
|
742
806
|
},
|
|
743
|
-
ref:
|
|
807
|
+
ref: m,
|
|
744
808
|
children: /* @__PURE__ */ g("div", {
|
|
745
809
|
style: {
|
|
746
810
|
flexShrink: 0,
|
|
747
811
|
order: -1
|
|
748
812
|
},
|
|
749
|
-
children:
|
|
813
|
+
children: v.clone
|
|
750
814
|
})
|
|
751
815
|
}),
|
|
752
816
|
/* @__PURE__ */ g("div", {
|
|
753
|
-
ref:
|
|
817
|
+
ref: h,
|
|
754
818
|
style: L,
|
|
755
819
|
children: a ? a() : /* @__PURE__ */ g("div", { style: {
|
|
756
820
|
width: "100%",
|
|
@@ -759,9 +823,9 @@ var F = {
|
|
|
759
823
|
}),
|
|
760
824
|
/* @__PURE__ */ g("div", {
|
|
761
825
|
"data-contextid": "context",
|
|
762
|
-
ref:
|
|
763
|
-
onMouseDown:
|
|
764
|
-
onTouchStart:
|
|
826
|
+
ref: p,
|
|
827
|
+
onMouseDown: C,
|
|
828
|
+
onTouchStart: w,
|
|
765
829
|
style: {
|
|
766
830
|
...I,
|
|
767
831
|
...n
|
|
@@ -876,11 +940,9 @@ var B = r(({ children: t, id: n, index: r, type: i, styles: a = {} }) => {
|
|
|
876
940
|
let _ = (n) => {
|
|
877
941
|
if (n.pointerType === "touch" || f) return;
|
|
878
942
|
let r = !n.isTrusted;
|
|
879
|
-
m.current && !r && !n.target.closest("[data-drag-handle]") ||
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
value: e.cloneElement(t)
|
|
883
|
-
});
|
|
943
|
+
m.current && !r && !n.target.closest("[data-drag-handle]") || c({
|
|
944
|
+
type: "setClone",
|
|
945
|
+
value: e.cloneElement(t)
|
|
884
946
|
});
|
|
885
947
|
};
|
|
886
948
|
return /* @__PURE__ */ g("div", {
|
package/package.json
CHANGED
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "flexitablesort",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"description": "Sortable table with draggable rows and columns",
|
|
6
|
-
"main": "dist/index.cjs.js",
|
|
7
|
-
"module": "dist/index.es.js",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"import": "./dist/index.es.js",
|
|
12
|
-
"require": "./dist/index.cjs.js",
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"sideEffects": false,
|
|
17
|
-
"files": [
|
|
18
|
-
"dist"
|
|
19
|
-
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"build": "tsc -b && vite build",
|
|
22
|
-
"dev": "vite --config vite.config.docs.ts",
|
|
23
|
-
"build:docs": "vite build --config vite.config.docs.ts",
|
|
24
|
-
"lint": "eslint .",
|
|
25
|
-
"format": "prettier --write .",
|
|
26
|
-
"format:check": "prettier --check .",
|
|
27
|
-
"prepare": "husky"
|
|
28
|
-
},
|
|
29
|
-
"keywords": [
|
|
30
|
-
"react",
|
|
31
|
-
"table",
|
|
32
|
-
"sortable",
|
|
33
|
-
"draggable",
|
|
34
|
-
"draggable table",
|
|
35
|
-
"draggable rows",
|
|
36
|
-
"draggable columns",
|
|
37
|
-
"react table",
|
|
38
|
-
"data grid",
|
|
39
|
-
"row reordering",
|
|
40
|
-
"column reordering"
|
|
41
|
-
],
|
|
42
|
-
"author": "Sami Odeh",
|
|
43
|
-
"license": "MIT",
|
|
44
|
-
"repository": {
|
|
45
|
-
"type": "git",
|
|
46
|
-
"url": "git+https://github.com/samiodeh1337/sortable-table.git"
|
|
47
|
-
},
|
|
48
|
-
"homepage": "https://samiodeh1337.github.io/sortable-table/",
|
|
49
|
-
"peerDependencies": {
|
|
50
|
-
"react": ">=17.0.0",
|
|
51
|
-
"react-dom": ">=17.0.0"
|
|
52
|
-
},
|
|
53
|
-
"dependencies": {
|
|
54
|
-
"classnames": "^2.5.1",
|
|
55
|
-
"styled-components": "^6.3.11"
|
|
56
|
-
},
|
|
57
|
-
"devDependencies": {
|
|
58
|
-
"@eslint/js": "^9.39.4",
|
|
59
|
-
"@tanstack/react-virtual": "^3.13.22",
|
|
60
|
-
"@types/node": "^24.12.0",
|
|
61
|
-
"@types/react": "^19.2.14",
|
|
62
|
-
"@types/react-dom": "^19.2.3",
|
|
63
|
-
"@vitejs/plugin-react": "^6.0.0",
|
|
64
|
-
"eslint": "^9.39.4",
|
|
65
|
-
"eslint-config-prettier": "^10.1.8",
|
|
66
|
-
"eslint-plugin-react-hooks": "^7.0.1",
|
|
67
|
-
"eslint-plugin-react-refresh": "^0.5.2",
|
|
68
|
-
"globals": "^17.4.0",
|
|
69
|
-
"highlight.js": "^11.11.1",
|
|
70
|
-
"husky": "^9.1.7",
|
|
71
|
-
"lint-staged": "^16.4.0",
|
|
72
|
-
"prettier": "^3.8.1",
|
|
73
|
-
"react": "^19.2.4",
|
|
74
|
-
"react-dom": "^19.2.4",
|
|
75
|
-
"typescript": "~5.9.3",
|
|
76
|
-
"typescript-eslint": "^8.56.1",
|
|
77
|
-
"vite": "^8.0.0",
|
|
78
|
-
"vite-plugin-dts": "^4.5.4"
|
|
79
|
-
},
|
|
80
|
-
"lint-staged": {
|
|
81
|
-
"*.{ts,tsx}": [
|
|
82
|
-
"prettier --write",
|
|
83
|
-
"eslint --fix"
|
|
84
|
-
],
|
|
85
|
-
"*.{json,css,html}": [
|
|
86
|
-
"prettier --write"
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "flexitablesort",
|
|
3
|
+
"version": "1.1.14",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Sortable table with draggable rows and columns",
|
|
6
|
+
"main": "dist/index.cjs.js",
|
|
7
|
+
"module": "dist/index.es.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./dist/index.es.js",
|
|
12
|
+
"require": "./dist/index.cjs.js",
|
|
13
|
+
"types": "./dist/index.d.ts"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsc -b && vite build",
|
|
22
|
+
"dev": "vite --config vite.config.docs.ts",
|
|
23
|
+
"build:docs": "vite build --config vite.config.docs.ts",
|
|
24
|
+
"lint": "eslint .",
|
|
25
|
+
"format": "prettier --write .",
|
|
26
|
+
"format:check": "prettier --check .",
|
|
27
|
+
"prepare": "husky"
|
|
28
|
+
},
|
|
29
|
+
"keywords": [
|
|
30
|
+
"react",
|
|
31
|
+
"table",
|
|
32
|
+
"sortable",
|
|
33
|
+
"draggable",
|
|
34
|
+
"draggable table",
|
|
35
|
+
"draggable rows",
|
|
36
|
+
"draggable columns",
|
|
37
|
+
"react table",
|
|
38
|
+
"data grid",
|
|
39
|
+
"row reordering",
|
|
40
|
+
"column reordering"
|
|
41
|
+
],
|
|
42
|
+
"author": "Sami Odeh",
|
|
43
|
+
"license": "MIT",
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "git+https://github.com/samiodeh1337/sortable-table.git"
|
|
47
|
+
},
|
|
48
|
+
"homepage": "https://samiodeh1337.github.io/sortable-table/",
|
|
49
|
+
"peerDependencies": {
|
|
50
|
+
"react": ">=17.0.0",
|
|
51
|
+
"react-dom": ">=17.0.0"
|
|
52
|
+
},
|
|
53
|
+
"dependencies": {
|
|
54
|
+
"classnames": "^2.5.1",
|
|
55
|
+
"styled-components": "^6.3.11"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@eslint/js": "^9.39.4",
|
|
59
|
+
"@tanstack/react-virtual": "^3.13.22",
|
|
60
|
+
"@types/node": "^24.12.0",
|
|
61
|
+
"@types/react": "^19.2.14",
|
|
62
|
+
"@types/react-dom": "^19.2.3",
|
|
63
|
+
"@vitejs/plugin-react": "^6.0.0",
|
|
64
|
+
"eslint": "^9.39.4",
|
|
65
|
+
"eslint-config-prettier": "^10.1.8",
|
|
66
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
67
|
+
"eslint-plugin-react-refresh": "^0.5.2",
|
|
68
|
+
"globals": "^17.4.0",
|
|
69
|
+
"highlight.js": "^11.11.1",
|
|
70
|
+
"husky": "^9.1.7",
|
|
71
|
+
"lint-staged": "^16.4.0",
|
|
72
|
+
"prettier": "^3.8.1",
|
|
73
|
+
"react": "^19.2.4",
|
|
74
|
+
"react-dom": "^19.2.4",
|
|
75
|
+
"typescript": "~5.9.3",
|
|
76
|
+
"typescript-eslint": "^8.56.1",
|
|
77
|
+
"vite": "^8.0.0",
|
|
78
|
+
"vite-plugin-dts": "^4.5.4"
|
|
79
|
+
},
|
|
80
|
+
"lint-staged": {
|
|
81
|
+
"*.{ts,tsx}": [
|
|
82
|
+
"prettier --write",
|
|
83
|
+
"eslint --fix"
|
|
84
|
+
],
|
|
85
|
+
"*.{json,css,html}": [
|
|
86
|
+
"prettier --write"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
}
|