Compare commits
47 Commits
8ddca02e54
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
6c9d6fa9e6 | ||
|
|
a0c18ff4e7 | ||
|
|
5d7911e644 | ||
|
|
3dac143f1a | ||
|
|
62d000728c | ||
|
|
93d80019c2 | ||
|
|
aeb9456204 | ||
|
|
5d5c18635d | ||
|
|
cd3a888a65 | ||
|
|
b96eb762ae | ||
|
|
c7b6af0b43 | ||
|
|
1f25cf2dc6 | ||
|
|
2757629128 | ||
|
|
d34e955021 | ||
|
|
775e1d9959 | ||
|
|
c735ba9c65 | ||
|
|
f49dd4b00f | ||
|
|
c3fd05b424 | ||
|
|
1277e355eb | ||
|
|
37461e539b | ||
|
|
3e90ec7f67 | ||
|
|
90141a539a | ||
|
|
64cfc56ccd | ||
|
|
1976cfb617 | ||
|
|
c34f86f762 | ||
|
|
8325402bc6 | ||
|
|
266f5212aa | ||
|
|
023a8889cd | ||
|
|
ed290c127b | ||
|
|
bc49139b1e | ||
|
|
6e23c34bd3 | ||
|
|
a7cb541e9d | ||
|
|
b0290852cc | ||
|
|
91ef0c2567 | ||
|
|
41079f3057 | ||
|
|
f997a954ee | ||
|
|
649239a930 | ||
|
|
eda3b193c6 | ||
|
|
14770f27ce | ||
|
|
9f8b46aa49 | ||
|
|
db5a64a69a | ||
|
|
744907aedc | ||
|
|
84a3611b4f | ||
|
|
21a30b95c3 | ||
|
|
2eafed8034 | ||
|
|
70789f9030 | ||
|
|
b89ae90645 |
@@ -16,7 +16,7 @@ This package is source-only: consumers import directly from `src/` via the
|
||||
| `dashgui/tiles` | `src/tiles/` | `Tile`, `TILE_SIZE`, `tileBaseSx` |
|
||||
| `dashgui/ElevatedPill` | `src/ElevatedPill.jsx` | `ElevatedPill`, `ToggleElevatedPill`, `ActionElevatedPill` |
|
||||
| `dashgui/SingleLineTextEdit` | `src/SingleLineTextEdit.jsx` | Centralized single-line text field |
|
||||
| `dashgui/FillSpace` | `src/FillSpace.jsx` | `FillSpace` — viewport-height spacer between header/footer refs; optional repeating `measureElement` |
|
||||
| `dashgui/FillSpace` | `src/FillSpace.jsx` | `FillSpace` — paginates `items` via `renderItem`, filling the viewport space between `aboveRef`/`belowRef`; wheel flips pages |
|
||||
|
||||
## Design rules
|
||||
|
||||
|
||||
199
package-lock.json
generated
199
package-lock.json
generated
@@ -16,7 +16,8 @@
|
||||
"@vitejs/plugin-react": "6.1.1",
|
||||
"react": "^19.3.0",
|
||||
"react-dom": "^19.3.0",
|
||||
"vite": "^8.3.0"
|
||||
"vite": "^8.3.2",
|
||||
"vite-plugin-qrcode": "^0.4.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
@@ -617,9 +618,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@oxc-project/types": {
|
||||
"version": "0.149.0",
|
||||
"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.149.0.tgz",
|
||||
"integrity": "sha512-Efcc+iF0j3Bf67YjEqIqWXbX5XddXoK/Mw4K1/JuXwRCZ8N16VR7iT23nlCc9XrveFVh/E5Rqs2StT0V8v9LdA==",
|
||||
"version": "0.154.0",
|
||||
"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.154.0.tgz",
|
||||
"integrity": "sha512-KYOUGQFlLWR+s4QMV2Q9ko38TZm7EdO87Qm7rvZLqk/webse/cDjtyxKhg/47l0byCbs/k46LT8qc4PKjAikzA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
@@ -654,9 +655,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm-eabi": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.8.tgz",
|
||||
"integrity": "sha512-tN5aztYkKCte4i5SIrrz5yK/HMjEuCqCSCJa418jOV8tZ1cBY3YF2otxB1ktPxzsLA1BeTqwapK0bfjxNvHJVw==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.14.tgz",
|
||||
"integrity": "sha512-aWR+XKH9+rW7m5fWq/5360J3mHycrx/o6xZM2DQFdJnTMdyP7/WzxPjhtLbVWdKo2y612/4U1bWqb3HQhiF7vg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -671,9 +672,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.8.tgz",
|
||||
"integrity": "sha512-dIYTWl9XprMUiQFoc55KUyk/oS8SKYH3zFl0LTR7RT0Xj4hgSVyuJcroH8JUu8RcpF8fTB6E0aOwCkZoYPcDSQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.14.tgz",
|
||||
"integrity": "sha512-QiVxHofl6A8lQU7WAtOUY4QMVZXohxwz7WJJoeh8NBEUyKfIkMRKhYyq8az/1RypNiIXzNTtiS6KwHz0erxYRQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -688,9 +689,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-darwin-arm64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.8.tgz",
|
||||
"integrity": "sha512-PCSDQGXD2IyTEFrcgPyBM8jJuGmrbCMuoIOXdbEGVemruKACXoLQJrb+A45Z0L5t1RQkdfJprAYPkikbh7dzdA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.14.tgz",
|
||||
"integrity": "sha512-lTQOzHuBIooh3jIr5XINQkjPGEuGy+Dsy0meXDr6Sjty0b99kYgGh4uBC/8mJX1T0kC8d6S0aPP1Y+bHkh6aBw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -705,9 +706,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-darwin-x64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.8.tgz",
|
||||
"integrity": "sha512-Uk7lRsGhPFHVX/sAUC6D5H9Ol30dFHd6iquokll2th3LpdJ3F5CzQB+7DHn0Ri2mG+U7k2zXiPHDrwZenXhwSA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.14.tgz",
|
||||
"integrity": "sha512-hyMKEGatjmBYCs/Q4sbIcL/GqpFEqsX3wc+HYVQ/85A4rxc1o7rPm4DUI4GV4k/h0ITddwFSGpqQunI14GXjTA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -722,9 +723,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-freebsd-x64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.8.tgz",
|
||||
"integrity": "sha512-DjszaTEVogPqA5bYzsEeqDCQxbcp2fexQwKcRspYji2yzR68fCf+e4fx6kBSRDwX5/brZaHw/hWS9+A/+/w9sQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.14.tgz",
|
||||
"integrity": "sha512-u371GbXoVXrEgP20PwzoGNOdAOqAMhzo19JzzY+V4YmmnC+DTOoqdbMu+O+54emM59Mik/UdrtWgcuEDKWRPKA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -739,9 +740,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm-gnueabihf": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.8.tgz",
|
||||
"integrity": "sha512-zmwa7FTmdzB6aaEEuuls18H6Ap5JmJPSoPTuXixeJZV6tG40SyLkApQtz1g8ptZtiEKqj9OM0oNLPh1AgvE31Q==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.14.tgz",
|
||||
"integrity": "sha512-BqwKsdZQf6EqVWr8fv2MrDYzAvOZ7+NYFSJESRGs87fkseEhs0TU9TXgRJTkZoRRkxTizyEg1LKUXfU3/78uqg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -756,9 +757,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm64-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-KdYQDPHwJVnbFwdTGMgxsI9SqblBlz6STGM+w1We/d5B8OWWidYH0MwkU/uA1wM5fIpO2MkOVxXrNzzuZhw9ew==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-SD9kY8M009x/7s57Z1dgUVlP5+uYBgKQK0Tkr1WIWngrtUJmRCW1RJFMY7QDla2khXhmg2i5Io7MUjcmZNZ/KQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -776,9 +777,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm64-musl": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.8.tgz",
|
||||
"integrity": "sha512-jFJTifHnNPY+yzOoNZQfSIysrVyXzEQPhPnOUjmD1bcQGHH6s7c8cViKWar8YplQImE5N9JRqMCLrM2CdxOrZA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.14.tgz",
|
||||
"integrity": "sha512-BJ2CL19M6uuWesMgnqJzgxoI+N+eV7b0A9O9vLV42y+gitC41fNa8KElau1tHVzuLWX5GzEuxMPhAO0tQXQMkg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -796,9 +797,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-ppc64-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-FhiOziBDWPBjbcmRzfLyIJnaP7AVMFXT7YCXPjXxj7wKU3vx24RjrCNN/zjvVa+N2vVoHJwCoUBvsrN/DG3zIA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-4+Kl8daPV8NDHaD7mfCcc1pRM+Qg7ab8DyMm5FG5WoZgv4h2i3KFN1CybYBNbQqmuYm7ftJLvmMI1eHYJ22S/Q==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@@ -816,9 +817,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-s390x-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-WnHfADMzOV2Y55wlx1hzzQnar/wDt/VdvWSD99r18Mz9ylNieIGOkRx3UV21h7m/eJvjySYJkO26VvGNFkwsIQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-V/h8ePq1fKDrmtFMz6xcCN3DKvuvMRrwwD1q0PkBeeo4DpK64biaKvqWGVxqCeYKqeRk7gE7/iKPxLCn08O97A==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@@ -836,9 +837,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-x64-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-H9tRr5ibfXFVLxbPOseVewewFpl28zcEdjRDt2FTUZU7odxP0gEv1ki4/kGmcGOh78oRwZuuQllGLZ9zTJp84g==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-WxalXzgrLVpKC93xfpaJ3gCXUWzeCr+FRCbDVD2mUAy4L6Vo3lNVz0epUEUpxPWJkLNYUwM4OSIikv36OJ9mLg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -856,9 +857,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-x64-musl": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.8.tgz",
|
||||
"integrity": "sha512-UefiqfM3D6IVNlZ8tSGs9+Ejjud2T+oxO0IHADU45Y+lyEjD2dVFyZHbkfX0LUb5Zugo/oIv1eCO/KVYhgYJYA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.14.tgz",
|
||||
"integrity": "sha512-3G3tnAmTpdk9jO3GQtyHXqeFD2SlecfTws/Y3M2mmj9nMBwwuLT4kur8sZKeu7ENUHSpVO3cIsm5A52LEWWwlg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -876,9 +877,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-openharmony-arm64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.8.tgz",
|
||||
"integrity": "sha512-637Ke4kWSy6rp9cxQ9gMOXlxPgIw/c1beASV4M//3+9I4uwBVOOl74G+e3zyU3u19U7RkRl/HuewixZ/Z6+Rjg==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.14.tgz",
|
||||
"integrity": "sha512-qyr5XiNGxm2ytx17vvtcJ9nXn6v1gENETi503bJx3OGwZ1tSonj7BosxbMa/xeAfSl5iS9X6KjEWYXLu6v1L7Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -893,9 +894,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-win32-arm64-msvc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.8.tgz",
|
||||
"integrity": "sha512-xWBkPOF1Q9k/Gv1nQXnVdLxKu74jXppuOM4Z3mnypVUJJJwLsMl7hNJGRAUJoG8A5MgOI1ACKM+wBFxSJzKy4A==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.14.tgz",
|
||||
"integrity": "sha512-oA4o5o0S2yB199YyYXDzKUv1Z56Rc+mgOjwm7Z/vJ9Z8igiDPYvoOuDyo6g7AK/ZaF09nPhDKVnGBcYHO11GXA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -910,9 +911,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-win32-x64-msvc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.8.tgz",
|
||||
"integrity": "sha512-uz2ZvfgXbxqNwijjjbxrnvALwpyODDcgc1T1N8N3rf/DXKQmaFwmB4LX4yyjggpwN2obdQLb2rgirX5ffCWYng==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.14.tgz",
|
||||
"integrity": "sha512-9mE94bf2GZUaR/fUSXCMpBoWkctu421Mi0ORpm4zqfbkjKep7RxzPFa5etcGs5h+2KApoWBOA/hAJa/7saGgEQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -1595,9 +1596,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.19",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
|
||||
"integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
|
||||
"version": "3.3.20",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
|
||||
"integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -1722,9 +1723,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.28",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
|
||||
"integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
|
||||
"version": "8.5.30",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.30.tgz",
|
||||
"integrity": "sha512-zkd+e9S1AQHhmaBKye9zlFHWjOwVgqXl1q3ECYy8561K7qxR2cREf/STLskulBFd78k6AOFeA+ff1TtEzk9bAA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -1742,9 +1743,9 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.18",
|
||||
"nanoid": "^3.3.20",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
"source-map-js": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
@@ -1849,13 +1850,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rolldown": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.8.tgz",
|
||||
"integrity": "sha512-Z67nTmhZe7anqnM/EjI392w5i/ANUinjip7QYsOyN37oayduxt3ksdX0hf5OOamkAd53BiIHfbfSzfUmzKFQqQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.14.tgz",
|
||||
"integrity": "sha512-eTBTTqMR6uHKLgcUqpJP8ntzDI6V4LYA8negAMBEI7gkgVvOdrx6VsvS2Ym+83KhOPdLCHWJu0w7UQFJZhHKNw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@oxc-project/types": "=0.149.0",
|
||||
"@oxc-project/types": "=0.154.0",
|
||||
"@rolldown/pluginutils": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
@@ -1865,21 +1866,21 @@
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rolldown/binding-android-arm-eabi": "1.2.8",
|
||||
"@rolldown/binding-android-arm64": "1.2.8",
|
||||
"@rolldown/binding-darwin-arm64": "1.2.8",
|
||||
"@rolldown/binding-darwin-x64": "1.2.8",
|
||||
"@rolldown/binding-freebsd-x64": "1.2.8",
|
||||
"@rolldown/binding-linux-arm-gnueabihf": "1.2.8",
|
||||
"@rolldown/binding-linux-arm64-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-arm64-musl": "1.2.8",
|
||||
"@rolldown/binding-linux-ppc64-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-s390x-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-x64-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-x64-musl": "1.2.8",
|
||||
"@rolldown/binding-openharmony-arm64": "1.2.8",
|
||||
"@rolldown/binding-win32-arm64-msvc": "1.2.8",
|
||||
"@rolldown/binding-win32-x64-msvc": "1.2.8"
|
||||
"@rolldown/binding-android-arm-eabi": "1.2.14",
|
||||
"@rolldown/binding-android-arm64": "1.2.14",
|
||||
"@rolldown/binding-darwin-arm64": "1.2.14",
|
||||
"@rolldown/binding-darwin-x64": "1.2.14",
|
||||
"@rolldown/binding-freebsd-x64": "1.2.14",
|
||||
"@rolldown/binding-linux-arm-gnueabihf": "1.2.14",
|
||||
"@rolldown/binding-linux-arm64-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-arm64-musl": "1.2.14",
|
||||
"@rolldown/binding-linux-ppc64-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-s390x-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-x64-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-x64-musl": "1.2.14",
|
||||
"@rolldown/binding-openharmony-arm64": "1.2.14",
|
||||
"@rolldown/binding-win32-arm64-msvc": "1.2.14",
|
||||
"@rolldown/binding-win32-x64-msvc": "1.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
@@ -1900,9 +1901,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
|
||||
"integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
@@ -1946,17 +1947,24 @@
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/uqr": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
|
||||
"integrity": "sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz",
|
||||
"integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==",
|
||||
"version": "8.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.4.tgz",
|
||||
"integrity": "sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lightningcss": "^1.33.0",
|
||||
"picomatch": "^4.0.7",
|
||||
"postcss": "^8.5.28",
|
||||
"rolldown": "~1.2.6",
|
||||
"postcss": "^8.5.29",
|
||||
"rolldown": "~1.2.12",
|
||||
"tinyglobby": "^0.2.17"
|
||||
},
|
||||
"bin": {
|
||||
@@ -2024,20 +2032,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "2.9.1",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.1.tgz",
|
||||
"integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==",
|
||||
"extraneous": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
"node_modules/vite-plugin-qrcode": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-qrcode/-/vite-plugin-qrcode-0.4.1.tgz",
|
||||
"integrity": "sha512-t3gdCbn/a2HHLK3M8bUrQ+4c+I0YQGJ/STxAL9eI6TBnfdeM/CJr3HctvOb7UYhEtWxHs5xZWpz7kYnRd5w+rA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"uqr": "^0.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/eemeli"
|
||||
"peerDependencies": {
|
||||
"vite": ">=3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
15
package.json
15
package.json
@@ -38,12 +38,13 @@
|
||||
"devDependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/icons-material": "^9.4.0",
|
||||
"@mui/material": "^9.4.0",
|
||||
"@playwright/test": "^1.63.0",
|
||||
"@vitejs/plugin-react": "6.1.1",
|
||||
"react": "^19.3.0",
|
||||
"react-dom": "^19.3.0",
|
||||
"vite": "^8.3.0"
|
||||
"@mui/icons-material": "^9.5.0",
|
||||
"@mui/material": "^9.5.0",
|
||||
"@playwright/test": "^1.64.1",
|
||||
"@vitejs/plugin-react": "6.1.2",
|
||||
"react": "^19.3.1",
|
||||
"react-dom": "^19.3.1",
|
||||
"vite": "^8.3.4",
|
||||
"vite-plugin-qrcode": "^0.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,75 +1,194 @@
|
||||
import { Component } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import List from '@mui/material/List';
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
|
||||
/**
|
||||
* Vertical spacer that fills the remaining viewport height between the content
|
||||
* above it and (optionally) a footer below it — useful for creating scrollable
|
||||
* middle sections in apps with fixed headers/footers.
|
||||
* FillSpace — paginates `items`.
|
||||
*
|
||||
* @component FillSpace
|
||||
* @import dashgui/FillSpace
|
||||
* @defaultExport
|
||||
*
|
||||
* @prop {React.Ref} [aboveRef] - Ref to the element immediately above the spacer. It is observed (not strictly required) so the spacer re-measures when that element's height changes.
|
||||
* @prop {React.Ref} [belowRef] - Ref to the footer element below. Its height (plus top margin) is reserved so the footer stays visible without page scrolling.
|
||||
* @prop {ReactNode} [measureElement] - When given, this element is used as the measurement unit of the spacer: its height is read from a hidden copy and it is repeated top-to-bottom to fill only the leftover space below `children` (like a repeating ruler/row pattern). When omitted, only `children` are rendered.
|
||||
* @prop {number} [measureGap=0] - Vertical gap (px) between repeated `measureElement` units.
|
||||
* @prop {(count: number) => void} [onMeasurement] - Called whenever the number of `measureElement` units that would fit in the whole spacer height changes, as if there were no `children` (i.e. the total row count the space could hold). Fires once after mount with the initial count.
|
||||
* @prop {number} [minHeight=0] - Minimum spacer height in px.
|
||||
* @prop {number} [maxHeight] - Optional maximum spacer height in px.
|
||||
* @prop {boolean} [debug=false] - When true, draws a dashed outline around the spacer and a translucent overlay over the whole viewport so the measured bounds are visible.
|
||||
* @prop {ReactNode} [children] - Real content rendered at the top of the spacer. The repeated `measureElement` units (if any) fill the remaining space below it.
|
||||
* @prop {object} [sx] - Extra styles merged into the Box.
|
||||
*
|
||||
* @behaviour Fills to the bottom of the initial viewport: height = viewport height − spacer's distance from the document top − reserved below height.
|
||||
* @behaviour The distance-from-top is read from the spacer's own position (document-relative), so every element above (including their margins and the parent's padding) is accounted for, and scrolling the page does not change the computed height.
|
||||
* @behaviour When `measureElement` is set, `children` are rendered on top and the units fill only `height − contentHeight`, so no units are shown once the content already fills the space.
|
||||
* @behaviour `onMeasurement` fires with the count of units that would fit in the whole spacer height (as if `children` were absent) — not the number actually rendered below the content — whenever that count changes.
|
||||
* @behaviour Re-measures on window resize and whenever the observed refs or the content change size (ResizeObserver), throttled with requestAnimationFrame.
|
||||
* @behaviour `debug` draws a dashed primary outline around the spacer plus a translucent full-viewport overlay.
|
||||
* @prop {Array} items - Wheel flips pages.
|
||||
* @prop {React.ComponentType|Function} renderItem - Row renderer (component or callback).
|
||||
* @prop {React.ReactNode} [header] - Rendered below pagination controls and above the list items.
|
||||
* @prop {any} [headerItem] - Optional dummy/sample item passed to probe element for layout measurement.
|
||||
* @prop {number} [minPageSize=10] - Rows per page.
|
||||
* @prop {number} [maxPageSize] - Maximum rows per page.
|
||||
* @prop {number} [totalCount] - Total items in current dataset (or filtered dataset when paginating).
|
||||
* @prop {number} [unfilteredTotal] - Total items in unfiltered dataset. When unfilteredTotal > pageSize, pagination space is reserved even if current filtered count <= pageSize, preventing layout shift.
|
||||
* @prop {number} [unfilteredCount] - Alias for unfilteredTotal.
|
||||
* @prop {(page: number) => void} [onPageChange] - Called on page change.
|
||||
* @prop {boolean} [disableWheel=false] - When true, disables mouse wheel page flipping and lets the outer page scroll.
|
||||
* @prop {boolean} [virtualScrollbar=false] - Shows a synchronized scrollbar alongside pagination controls.
|
||||
* @prop {boolean} [reserveScrollbar] - Reserves raceway space even when items do not overflow (defaults to true when virtualScrollbar is true).
|
||||
* @prop {boolean} [debug=false] - Dashed outline for layout debugging.
|
||||
* @prop {object} [sx] - Extra styles.
|
||||
*/
|
||||
|
||||
/** True for class components (e.g. `renderItem={ArtikelMarke}`). Rendered as element, not called. */
|
||||
function isRowComponent(renderItem) {
|
||||
return (
|
||||
typeof renderItem === 'function' &&
|
||||
(renderItem.prototype?.isReactComponent || renderItem.isFillRowComponent === true)
|
||||
);
|
||||
}
|
||||
|
||||
/** Renders one row: component types become `<Row brand item index />`, callbacks are called. */
|
||||
function renderRowElement(renderItem, item, index) {
|
||||
if (isRowComponent(renderItem)) {
|
||||
const Row = renderItem;
|
||||
return <Row brand={item} item={item} index={index} />;
|
||||
}
|
||||
return renderItem(item, index);
|
||||
}
|
||||
|
||||
/**
|
||||
* Probe of the row height, rendered hidden. Class components
|
||||
* (e.g. `renderItem={ArtikelMarke}`) tolerate empty props
|
||||
* (`brand`/`item` undefined) and keep a fixed height (40px thumb /
|
||||
* text field). When `headerItem` is supplied, it is passed to the row
|
||||
* for precise measurement of data-driven layouts.
|
||||
*/
|
||||
function renderProbeElement(renderItem, headerItem) {
|
||||
if (!isRowComponent(renderItem)) return null;
|
||||
const Row = renderItem;
|
||||
return <Row brand={headerItem} item={headerItem} index={0} disabled />;
|
||||
}
|
||||
|
||||
const MIN_THUMB_HEIGHT = 48;
|
||||
const RACEWAY_WIDTH = 16;
|
||||
const RACEWAY_BOTTOM_MARGIN = 16;
|
||||
|
||||
class FillSpace extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const minSize = Math.max(1, Number(props.minPageSize) || 10);
|
||||
const maxSize = Number(props.maxPageSize) > 0 ? Number(props.maxPageSize) : Infinity;
|
||||
this.state = {
|
||||
height: 0,
|
||||
unitHeight: 0,
|
||||
contentHeight: 0,
|
||||
totalCount: 0,
|
||||
fillCount: 0,
|
||||
viewportHeight: null,
|
||||
pageSize: Math.min(maxSize, minSize),
|
||||
currentPage: 1,
|
||||
isDragging: false,
|
||||
dragThumbTop: 0,
|
||||
};
|
||||
this.lastTotalCount = null;
|
||||
this.ref = null;
|
||||
this.contentRef = null;
|
||||
this.unitRef = null;
|
||||
this.trackRef = null;
|
||||
this.thumbRef = null;
|
||||
this.probeRef = null;
|
||||
this.wheelAcc = 0;
|
||||
this.observer = null;
|
||||
this.raf = null;
|
||||
this.dragStartY = 0;
|
||||
this.dragStartThumbTop = 0;
|
||||
const rawUnfiltered = props.unfilteredTotal ?? props.unfilteredCount;
|
||||
const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
|
||||
const total =
|
||||
props.totalCount != null
|
||||
? Number(props.totalCount)
|
||||
: Array.isArray(props.items)
|
||||
? props.items.length
|
||||
: 0;
|
||||
this.maxSeenCount = unfilteredTotal != null ? unfilteredTotal : total;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
requestAnimationFrame(() => {
|
||||
this._measure();
|
||||
this._observe();
|
||||
});
|
||||
this._probeMeasure();
|
||||
this._viewportMeasure();
|
||||
this._observe();
|
||||
window.addEventListener('resize', this._onViewportChange);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
prevProps.renderItem !== this.props.renderItem ||
|
||||
prevProps.headerItem !== this.props.headerItem
|
||||
) {
|
||||
this._probeMeasure();
|
||||
}
|
||||
if (
|
||||
prevProps.minPageSize !== this.props.minPageSize ||
|
||||
prevProps.maxPageSize !== this.props.maxPageSize
|
||||
) {
|
||||
const minSize = Math.max(1, Number(this.props.minPageSize) || 10);
|
||||
const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
|
||||
this.setState({ pageSize: Math.min(maxSize, minSize) });
|
||||
}
|
||||
if (
|
||||
prevProps.aboveRef !== this.props.aboveRef ||
|
||||
prevProps.belowRef !== this.props.belowRef ||
|
||||
prevProps.minHeight !== this.props.minHeight ||
|
||||
prevProps.maxHeight !== this.props.maxHeight ||
|
||||
prevProps.measureElement !== this.props.measureElement ||
|
||||
prevProps.measureGap !== this.props.measureGap
|
||||
prevProps.containerRef !== this.props.containerRef ||
|
||||
prevProps.reserveBottom !== this.props.reserveBottom ||
|
||||
prevProps.items !== this.props.items ||
|
||||
prevProps.header !== this.props.header
|
||||
) {
|
||||
this._observe();
|
||||
this._measure();
|
||||
this._viewportMeasure();
|
||||
}
|
||||
const rawUnfiltered = this.props.unfilteredTotal ?? this.props.unfilteredCount;
|
||||
const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
|
||||
const total =
|
||||
this.props.totalCount != null
|
||||
? Number(this.props.totalCount)
|
||||
: Array.isArray(this.props.items)
|
||||
? this.props.items.length
|
||||
: 0;
|
||||
if (unfilteredTotal != null) {
|
||||
this.maxSeenCount = unfilteredTotal;
|
||||
} else {
|
||||
this.maxSeenCount = Math.max(this.maxSeenCount || 0, total);
|
||||
}
|
||||
if (this.props.resetKey !== undefined && this.props.resetKey !== prevProps.resetKey) {
|
||||
if (this.state.currentPage !== 1) {
|
||||
this._goToPage(1);
|
||||
} else {
|
||||
this.props.onPageChange?.(1, {
|
||||
pageCount: Math.max(1, Math.ceil(total / Math.max(1, this.state.pageSize))),
|
||||
pageSize: this.state.pageSize,
|
||||
total,
|
||||
});
|
||||
}
|
||||
}
|
||||
// Clamp current page when the item list shrinks (e.g. brand deleted) or trigger load for current page if items are missing.
|
||||
if (
|
||||
Array.isArray(this.props.items) &&
|
||||
this.props.items !== prevProps.items
|
||||
) {
|
||||
const pageCount = Math.max(
|
||||
1,
|
||||
Math.ceil(total / Math.max(1, this.state.pageSize)),
|
||||
);
|
||||
if (this.state.currentPage > pageCount) {
|
||||
this.setState({ currentPage: pageCount });
|
||||
this.props.onPageChange?.(pageCount, {
|
||||
pageCount,
|
||||
pageSize: this.state.pageSize,
|
||||
total,
|
||||
});
|
||||
} else if (this.state.currentPage > 1) {
|
||||
const offset = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
if (this.props.items.length > offset && this.props.items[offset] == null) {
|
||||
this.props.onPageChange?.(this.state.currentPage, {
|
||||
pageCount,
|
||||
pageSize: this.state.pageSize,
|
||||
total,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.isDragging) {
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.cursor = '';
|
||||
window.removeEventListener('mousemove', this._onThumbDragMove);
|
||||
window.removeEventListener('mouseup', this._onThumbDragEnd);
|
||||
}
|
||||
window.removeEventListener('resize', this._onViewportChange);
|
||||
if (this.raf) {
|
||||
cancelAnimationFrame(this.raf);
|
||||
@@ -81,11 +200,98 @@ class FillSpace extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
_onThumbMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const { totalCount, items } = this.props;
|
||||
const { viewportHeight, pageSize, currentPage } = this.state;
|
||||
const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
const currentThumbTop = pageCount > 1 && maxThumbTravel > 0 ? ((currentPage - 1) / (pageCount - 1)) * maxThumbTravel : 0;
|
||||
|
||||
this.dragStartY = e.clientY;
|
||||
this.dragStartThumbTop = currentThumbTop;
|
||||
this.setState({ isDragging: true, dragThumbTop: currentThumbTop });
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.cursor = 'grabbing';
|
||||
window.addEventListener('mousemove', this._onThumbDragMove);
|
||||
window.addEventListener('mouseup', this._onThumbDragEnd);
|
||||
};
|
||||
|
||||
_onThumbDragMove = (e) => {
|
||||
if (!this.state.isDragging) return;
|
||||
const { totalCount, items } = this.props;
|
||||
const { viewportHeight, pageSize } = this.state;
|
||||
const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
if (pageCount <= 1) return;
|
||||
|
||||
const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
if (maxThumbTravel <= 0) return;
|
||||
|
||||
const deltaY = e.clientY - this.dragStartY;
|
||||
const nextThumbTop = Math.max(0, Math.min(maxThumbTravel, this.dragStartThumbTop + deltaY));
|
||||
const targetPage = Math.min(pageCount, Math.max(1, Math.round(1 + (nextThumbTop / maxThumbTravel) * (pageCount - 1))));
|
||||
|
||||
this.setState({ dragThumbTop: nextThumbTop });
|
||||
if (targetPage !== this.state.currentPage) {
|
||||
this._goToPage(targetPage);
|
||||
}
|
||||
};
|
||||
|
||||
_onThumbDragEnd = () => {
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.cursor = '';
|
||||
window.removeEventListener('mousemove', this._onThumbDragMove);
|
||||
window.removeEventListener('mouseup', this._onThumbDragEnd);
|
||||
this.setState({ isDragging: false });
|
||||
};
|
||||
|
||||
_handleTrackMouseDown = (e) => {
|
||||
if (e.target === this.thumbRef || this.thumbRef?.contains(e.target)) return;
|
||||
if (!this.trackRef) return;
|
||||
const trackRect = this.trackRef.getBoundingClientRect();
|
||||
const clickY = e.clientY - trackRect.top;
|
||||
const { viewportHeight, pageSize } = this.state;
|
||||
const { items, totalCount } = this.props;
|
||||
const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
if (pageCount <= 1) return;
|
||||
|
||||
const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
if (trackHeight <= 0) return;
|
||||
const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
const targetThumbTop = Math.max(0, Math.min(maxThumbTravel, clickY - thumbHeight / 2));
|
||||
const targetPage = maxThumbTravel > 0 ? Math.min(pageCount, Math.max(1, Math.round(1 + (targetThumbTop / maxThumbTravel) * (pageCount - 1)))) : 1;
|
||||
this._goToPage(targetPage);
|
||||
};
|
||||
|
||||
scrollToTop = () => {
|
||||
this._goToPage(1);
|
||||
};
|
||||
|
||||
scrollToIndex = (index) => {
|
||||
const { pageSize } = this.state;
|
||||
if (pageSize > 0) {
|
||||
const targetPage = Math.floor(index / pageSize) + 1;
|
||||
this._goToPage(targetPage);
|
||||
}
|
||||
};
|
||||
|
||||
_onViewportChange = () => {
|
||||
if (this.raf) return;
|
||||
this.raf = requestAnimationFrame(() => {
|
||||
this.raf = null;
|
||||
this._measure();
|
||||
this._viewportMeasure();
|
||||
});
|
||||
};
|
||||
|
||||
@@ -93,163 +299,294 @@ class FillSpace extends Component {
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
this.observer = new ResizeObserver(() => this._measure());
|
||||
|
||||
// Only observe the referenced elements + the rendered content — never the
|
||||
// spacer's own parent, since resizing the spacer would resize the parent
|
||||
// and create a loop.
|
||||
const { aboveRef, belowRef } = this.props;
|
||||
const targets = [aboveRef?.current, belowRef?.current, this.contentRef];
|
||||
this.observer = new ResizeObserver(() => this._onViewportChange());
|
||||
const { aboveRef, belowRef, containerRef } = this.props;
|
||||
const aboveList = Array.isArray(aboveRef) ? aboveRef : [aboveRef];
|
||||
const belowList = Array.isArray(belowRef) ? belowRef : [belowRef];
|
||||
const containerTarget =
|
||||
containerRef && 'current' in containerRef ? containerRef.current : containerRef;
|
||||
const targets = [
|
||||
...aboveList.map((r) => (r && 'current' in r ? r.current : r)),
|
||||
...belowList.map((r) => (r && 'current' in r ? r.current : r)),
|
||||
containerTarget,
|
||||
];
|
||||
for (const el of targets) {
|
||||
if (el && el.offsetParent !== null) {
|
||||
if (el && typeof Element !== 'undefined' && el instanceof Element && el.offsetParent !== null) {
|
||||
this.observer.observe(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_measure() {
|
||||
if (!this.ref) return;
|
||||
probeMeasure = () => {
|
||||
this._probeMeasure();
|
||||
};
|
||||
|
||||
const {
|
||||
belowRef,
|
||||
measureElement,
|
||||
measureGap = 0,
|
||||
minHeight = 0,
|
||||
maxHeight,
|
||||
onMeasurement,
|
||||
} = this.props;
|
||||
viewportMeasure = () => {
|
||||
this._viewportMeasure();
|
||||
};
|
||||
|
||||
// Distance from the document top to the spacer top — includes every
|
||||
// element above the spacer plus their margins and the parent's padding.
|
||||
// Document-relative (rect.top + scrollY), so scrolling the page does not
|
||||
// change the computed height (fixes "grows with scrolling").
|
||||
const rect = this.ref.getBoundingClientRect();
|
||||
const abovePx = rect.top + window.scrollY;
|
||||
measure = () => {
|
||||
this._probeMeasure();
|
||||
this._viewportMeasure();
|
||||
};
|
||||
|
||||
// Height to reserve for the footer below (its box + top margin).
|
||||
const belowEl = belowRef?.current;
|
||||
let belowPx = 0;
|
||||
if (belowEl && belowEl.offsetParent !== null) {
|
||||
belowPx = belowEl.offsetHeight;
|
||||
const marginTop = parseFloat(window.getComputedStyle(belowEl).marginTop);
|
||||
belowPx += Number.isFinite(marginTop) ? marginTop : 0;
|
||||
}
|
||||
|
||||
const available = Math.max(0, window.innerHeight - abovePx - belowPx);
|
||||
const clamped = Math.min(
|
||||
Math.max(available, minHeight),
|
||||
maxHeight ?? Infinity,
|
||||
);
|
||||
|
||||
// Height of the real rendered children (the top part of the spacer).
|
||||
let contentHeight = 0;
|
||||
if (this.contentRef) {
|
||||
contentHeight = this.contentRef.offsetHeight;
|
||||
}
|
||||
|
||||
// Measure the height of one measurement unit from the hidden copy so the
|
||||
// repeats match the real rendered size.
|
||||
let unitHeight = this.state.unitHeight;
|
||||
if (measureElement != null && this.unitRef) {
|
||||
const h = this.unitRef.offsetHeight;
|
||||
if (h > 0) unitHeight = h;
|
||||
}
|
||||
|
||||
// How many units would fit in the WHOLE spacer height, as if there were
|
||||
// no children — this is what onMeasurement reports.
|
||||
let totalCount = 0;
|
||||
// How many units actually fit in the leftover space below the children —
|
||||
// this is what gets rendered. Starts at 0: if the content already fills
|
||||
// the space, none fit.
|
||||
let fillCount = 0;
|
||||
if (measureElement != null && unitHeight > 0) {
|
||||
totalCount = Math.floor((clamped + measureGap) / (unitHeight + measureGap));
|
||||
const fillHeight = Math.max(0, clamped - contentHeight);
|
||||
fillCount = Math.floor((fillHeight + measureGap) / (unitHeight + measureGap));
|
||||
}
|
||||
|
||||
// Fire onMeasurement with the TOTAL count whenever it changes — including
|
||||
// the first measurement. lastTotalCount starts as null so the initial
|
||||
// value (even 0) is always reported once.
|
||||
if (
|
||||
measureElement != null &&
|
||||
typeof onMeasurement === 'function' &&
|
||||
totalCount !== this.lastTotalCount
|
||||
) {
|
||||
this.lastTotalCount = totalCount;
|
||||
onMeasurement(totalCount);
|
||||
}
|
||||
|
||||
if (
|
||||
Math.abs(clamped - this.state.height) > 0.5 ||
|
||||
Math.abs(unitHeight - this.state.unitHeight) > 0.5 ||
|
||||
Math.abs(contentHeight - this.state.contentHeight) > 0.5 ||
|
||||
totalCount !== this.state.totalCount ||
|
||||
fillCount !== this.state.fillCount
|
||||
) {
|
||||
this.setState({ height: clamped, unitHeight, contentHeight, totalCount, fillCount });
|
||||
/** Only measures the height of the `renderItem` probe. Nothing else. */
|
||||
_probeMeasure() {
|
||||
const firstRow = this.ref?.querySelector('[data-fill-row]');
|
||||
const h = this.probeRef?.offsetHeight || firstRow?.offsetHeight;
|
||||
if (h > 0 && h !== this.state.unitHeight) {
|
||||
this.setState({ unitHeight: h }, () => this._viewportMeasure());
|
||||
}
|
||||
}
|
||||
|
||||
/** Viewport height minus above/below refs: free space for the list. */
|
||||
_viewportMeasure() {
|
||||
if (!this.ref) return;
|
||||
const { belowRef, containerRef, reserveBottom = 0, minPageSize } = this.props;
|
||||
const rect = this.ref.getBoundingClientRect();
|
||||
let belowPx = Number(reserveBottom) || 0;
|
||||
const belowList = Array.isArray(belowRef) ? belowRef : [belowRef];
|
||||
for (const ref of belowList) {
|
||||
const el = ref && 'current' in ref ? ref.current : ref;
|
||||
if (el && el.offsetParent !== null) {
|
||||
belowPx += el.offsetHeight;
|
||||
const mt = parseFloat(window.getComputedStyle(el).marginTop);
|
||||
if (Number.isFinite(mt)) belowPx += mt;
|
||||
}
|
||||
}
|
||||
const containerEl =
|
||||
containerRef && 'current' in containerRef ? containerRef.current : containerRef;
|
||||
let available;
|
||||
if (containerEl && typeof containerEl.getBoundingClientRect === 'function') {
|
||||
const cRect = containerEl.getBoundingClientRect();
|
||||
const paddingBottom = parseFloat(window.getComputedStyle(containerEl).paddingBottom) || 0;
|
||||
available = Math.max(0, cRect.bottom - rect.top - belowPx - paddingBottom);
|
||||
} else {
|
||||
available = Math.max(0, window.innerHeight - rect.top - belowPx);
|
||||
}
|
||||
const minSize = Math.max(1, Number(minPageSize) || 10);
|
||||
const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
|
||||
const { unitHeight } = this.state;
|
||||
const calculated =
|
||||
unitHeight > 0 ? Math.max(minSize, Math.floor(available / unitHeight)) : minSize;
|
||||
const nextPageSize = Math.min(maxSize, calculated);
|
||||
const nextViewportHeight =
|
||||
Number.isFinite(maxSize) && unitHeight > 0
|
||||
? Math.min(available, nextPageSize * unitHeight)
|
||||
: available;
|
||||
if (
|
||||
nextViewportHeight !== this.state.viewportHeight ||
|
||||
nextPageSize !== this.state.pageSize
|
||||
) {
|
||||
this.setState({ viewportHeight: nextViewportHeight, pageSize: nextPageSize });
|
||||
}
|
||||
}
|
||||
|
||||
_handleWheel = (event) => {
|
||||
if (this.props.disableWheel) return;
|
||||
const { items, totalCount } = this.props;
|
||||
if (!Array.isArray(items)) return;
|
||||
if (this.ref && event.target && !this.ref.contains(event.target)) return;
|
||||
const { pageSize, currentPage } = this.state;
|
||||
const total = totalCount != null ? Number(totalCount) : items.length;
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
const delta = event.deltaY || 0;
|
||||
if (pageCount <= 1) return;
|
||||
if (delta === 0) return;
|
||||
if (Math.sign(delta) !== Math.sign(this.wheelAcc || 0)) this.wheelAcc = 0;
|
||||
this.wheelAcc = (this.wheelAcc || 0) + delta;
|
||||
const threshold = Math.max(50, 800 / pageCount);
|
||||
if (Math.abs(this.wheelAcc) < threshold) return;
|
||||
const dir = this.wheelAcc > 0 ? 1 : -1;
|
||||
this.wheelAcc = 0;
|
||||
const next = dir > 0
|
||||
? Math.min(pageCount, currentPage + 1)
|
||||
: Math.max(1, currentPage - 1);
|
||||
if (next === currentPage) return;
|
||||
this._goToPage(next);
|
||||
};
|
||||
|
||||
_goToPage = (page) => {
|
||||
const { items, onPageChange, totalCount } = this.props;
|
||||
const total =
|
||||
totalCount != null
|
||||
? Number(totalCount)
|
||||
: Array.isArray(items)
|
||||
? items.length
|
||||
: 0;
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, this.state.pageSize)));
|
||||
const next = Math.min(Math.max(1, Number(page) || 1), pageCount);
|
||||
if (next === this.state.currentPage) return;
|
||||
this.setState({ currentPage: next });
|
||||
onPageChange?.(next, { pageCount, pageSize: this.state.pageSize, total });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
// Discarded legacy layout props (kept here so they don't leak to the DOM).
|
||||
aboveRef,
|
||||
belowRef,
|
||||
onMeasurement,
|
||||
minHeight = 0,
|
||||
containerRef,
|
||||
reserveBottom,
|
||||
minHeight,
|
||||
maxHeight,
|
||||
minPageSize,
|
||||
maxPageSize,
|
||||
totalCount,
|
||||
unfilteredCount,
|
||||
unfilteredTotal: propUnfilteredTotal,
|
||||
resetKey,
|
||||
listRef,
|
||||
onPageChange,
|
||||
onWheel,
|
||||
disableWheel = false,
|
||||
virtualScrollbar = false,
|
||||
reserveScrollbar,
|
||||
racewayMarginBottom,
|
||||
racewayRight,
|
||||
debug = false,
|
||||
children,
|
||||
measureElement,
|
||||
measureGap = 0,
|
||||
items,
|
||||
renderItem,
|
||||
header,
|
||||
headerItem,
|
||||
sx,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
const { height, fillCount } = this.state;
|
||||
// FillSpace owns current page, wheel-pagination and the pagination header.
|
||||
// Caller feeds `items` plus one row element via `renderItem` (component
|
||||
// type or callback). `items` may be undefined while data is loading.
|
||||
const { pageSize, currentPage, viewportHeight } = this.state;
|
||||
const list = Array.isArray(items) ? items : [];
|
||||
const total = totalCount != null ? Number(totalCount) : list.length;
|
||||
const rawUnfiltered = propUnfilteredTotal ?? unfilteredCount;
|
||||
const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
|
||||
const fullTotal = unfilteredTotal != null ? Math.max(unfilteredTotal, total) : Math.max(this.maxSeenCount || 0, total);
|
||||
const needsPaginationContainer = fullTotal > pageSize;
|
||||
const showPaginationControls = total > pageSize;
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
const safePage = Math.min(Math.max(1, currentPage), pageCount);
|
||||
const offset = (safePage - 1) * pageSize;
|
||||
const pageItems = list.slice(offset, offset + pageSize);
|
||||
|
||||
// Repeated measurement units fill only the leftover space below the real
|
||||
// children. fillCount (computed in _measure) starts at 0: if the content
|
||||
// already fills the space, no units are rendered.
|
||||
let fill = null;
|
||||
if (measureElement != null) {
|
||||
const items = [];
|
||||
for (let i = 0; i < fillCount; i++) {
|
||||
items.push(
|
||||
<Box key={i} sx={{ width: '100%' }}>
|
||||
{measureElement}
|
||||
</Box>,
|
||||
);
|
||||
}
|
||||
fill = (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: measureGap,
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{items}
|
||||
</Box>
|
||||
);
|
||||
const canScroll =
|
||||
virtualScrollbar &&
|
||||
total > pageSize &&
|
||||
(viewportHeight || 0) > 0;
|
||||
|
||||
const racewayBottom = Math.max(0, Number(racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const racewayRightOffset = racewayRight != null ? racewayRight : 0;
|
||||
const scrollbarReserved = reserveScrollbar ?? Boolean(virtualScrollbar);
|
||||
const scrollbarPadding = scrollbarReserved
|
||||
? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px`
|
||||
: 0;
|
||||
|
||||
let thumbHeight = 0;
|
||||
let thumbTop = 0;
|
||||
|
||||
if (canScroll) {
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
thumbTop = this.state.isDragging
|
||||
? this.state.dragThumbTop
|
||||
: (pageCount > 1 && maxThumbTravel > 0 ? ((safePage - 1) / (pageCount - 1)) * maxThumbTravel : 0);
|
||||
}
|
||||
|
||||
// Hidden probe: measures `renderItem` (passes headerItem when provided).
|
||||
const probe = renderProbeElement(renderItem, this.props.headerItem);
|
||||
|
||||
return (
|
||||
<>
|
||||
{needsPaginationContainer ? (
|
||||
<Box
|
||||
// Fixed single-line bar: the header height must not depend on the
|
||||
// filtered count so the content never shifts when filtering.
|
||||
sx={{ mb: 1, height: 44, overflow: 'hidden' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
height: 44,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
noWrap
|
||||
sx={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
|
||||
>
|
||||
{total === 0
|
||||
? (unfilteredTotal != null && unfilteredTotal > 0
|
||||
? `0 von ${total} (${unfilteredTotal} gesamt)`
|
||||
: '0')
|
||||
: `${offset + 1}–${Math.min(offset + pageSize, total)} von ${total}${
|
||||
unfilteredTotal != null && unfilteredTotal > total
|
||||
? ` (${unfilteredTotal} gesamt)`
|
||||
: ''
|
||||
}`}
|
||||
</Typography>
|
||||
<Pagination
|
||||
count={pageCount}
|
||||
page={safePage}
|
||||
onChange={(_e, page) => this._goToPage(page)}
|
||||
color="primary"
|
||||
size="large"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
sx={{
|
||||
flexShrink: 0,
|
||||
maxWidth: '100%',
|
||||
overflowX: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
'& .MuiPagination-ul': { flexWrap: 'nowrap' },
|
||||
'& .MuiPaginationItem-root': {
|
||||
minWidth: 44,
|
||||
height: 44,
|
||||
fontSize: '1rem',
|
||||
},
|
||||
visibility: showPaginationControls ? 'visible' : 'hidden',
|
||||
pointerEvents: showPaginationControls ? 'auto' : 'none',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : null}
|
||||
{header != null ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
pr: scrollbarPadding,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
) : null}
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.ref = el;
|
||||
}}
|
||||
onWheel={(e) => {
|
||||
if (!disableWheel) {
|
||||
this._handleWheel(e);
|
||||
}
|
||||
onWheel?.(e);
|
||||
}}
|
||||
{...rest}
|
||||
sx={[
|
||||
{
|
||||
position: 'relative',
|
||||
height,
|
||||
minHeight,
|
||||
...(maxHeight != null ? { maxHeight } : {}),
|
||||
height: viewportHeight ?? 'auto',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
// Keep wheel ticks from scrolling the page behind the list unless disableWheel is true.
|
||||
overscrollBehavior: disableWheel ? 'auto' : 'contain',
|
||||
},
|
||||
debug
|
||||
? (theme) => ({
|
||||
@@ -259,21 +596,25 @@ class FillSpace extends Component {
|
||||
sx,
|
||||
]}
|
||||
>
|
||||
{children != null ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
pr: scrollbarPadding,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<List ref={listRef} dense disablePadding sx={{ width: '100%' }}>
|
||||
{pageItems.map((item, i) => (
|
||||
<Box key={item?.id ?? item?.sku ?? offset + i} data-fill-row sx={{ width: '100%' }}>
|
||||
{renderRowElement(renderItem, item, offset + i)}
|
||||
</Box>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
{probe != null ? (
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.contentRef = el;
|
||||
}}
|
||||
sx={{ width: '100%' }}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
) : null}
|
||||
{fill}
|
||||
{measureElement != null ? (
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.unitRef = el;
|
||||
this.probeRef = el;
|
||||
}}
|
||||
aria-hidden
|
||||
sx={{
|
||||
@@ -285,7 +626,62 @@ class FillSpace extends Component {
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{measureElement}
|
||||
<List dense disablePadding sx={{ width: '100%' }}>
|
||||
<Box data-fill-row sx={{ width: '100%' }}>
|
||||
{probe}
|
||||
</Box>
|
||||
</List>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
{canScroll ? (
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.trackRef = el;
|
||||
}}
|
||||
onMouseDown={this._handleTrackMouseDown}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: racewayRightOffset,
|
||||
bottom: `${racewayBottom}px`,
|
||||
width: RACEWAY_WIDTH,
|
||||
zIndex: 5,
|
||||
cursor: 'pointer',
|
||||
borderRadius: 8,
|
||||
bgcolor: (theme) => alpha(theme.palette.text.primary, 0.04),
|
||||
transition: 'background-color 0.15s ease',
|
||||
'&:hover': {
|
||||
bgcolor: (theme) => alpha(theme.palette.text.primary, 0.09),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.thumbRef = el;
|
||||
}}
|
||||
onMouseDown={this._onThumbMouseDown}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: thumbTop,
|
||||
height: thumbHeight,
|
||||
left: 2,
|
||||
right: 2,
|
||||
borderRadius: 6,
|
||||
bgcolor: (theme) =>
|
||||
this.state.isDragging
|
||||
? alpha(theme.palette.primary.main, 0.7)
|
||||
: alpha(theme.palette.text.primary, 0.3),
|
||||
cursor: this.state.isDragging ? 'grabbing' : 'grab',
|
||||
transition: this.state.isDragging ? 'none' : 'background-color 0.15s ease',
|
||||
'&:hover': {
|
||||
bgcolor: (theme) =>
|
||||
this.state.isDragging
|
||||
? alpha(theme.palette.primary.main, 0.7)
|
||||
: alpha(theme.palette.text.primary, 0.55),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { Component } from 'react';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
|
||||
/**
|
||||
* Centralized single-line text field with the same outlined look everywhere.
|
||||
@@ -13,7 +17,7 @@ import TextField from '@mui/material/TextField';
|
||||
* @prop {string} value - Controlled field value.
|
||||
* @prop {(nextValue: string) => void} onChange - Called with the new string value (not an event). Not called while `readOnly`.
|
||||
* @prop {React.Ref} [inputRef] - Ref forwarded to the inner input (used by EditablePanelTile to focus on edit).
|
||||
* @prop {ReactNode} [label=Name] - Outlined field label.
|
||||
* @prop {ReactNode} [label] - Outlined field label.
|
||||
* @prop {boolean} [readOnly=false] - When true, the input is read-only: non-editable, not tabbable, spellcheck off, and onChange is suppressed.
|
||||
* @prop {boolean} [disabled=false] - Passed to TextField — disables the field.
|
||||
* @prop {boolean} [required=false] - Passed to TextField — marks the field required.
|
||||
@@ -21,6 +25,8 @@ import TextField from '@mui/material/TextField';
|
||||
* @prop {boolean} [autoFocus=false] - TextField autoFocus prop.
|
||||
* @prop {string} [autoComplete=off] - TextField autoComplete prop.
|
||||
* @prop {'small' | 'medium'} [size] - TextField size prop.
|
||||
* @prop {boolean} [search=false] - When true, displays a search icon start adornment.
|
||||
* @prop {boolean} [clear=false] - When true and value is non-empty, displays a clear button end adornment.
|
||||
* @prop {object} [slotProps] - MUI slotProps, merged (input/htmlInput are augmented for readOnly/spellCheck/tabIndex).
|
||||
* @prop {object} [sx] - Extra styles passed to TextField.
|
||||
* @prop {any} [otherProps] - Any remaining TextField props (helperText, etc.) are spread onto TextField.
|
||||
@@ -35,7 +41,7 @@ class SingleLineTextEdit extends Component {
|
||||
value,
|
||||
onChange,
|
||||
inputRef,
|
||||
label = 'Name',
|
||||
label,
|
||||
disabled = false,
|
||||
readOnly = false,
|
||||
autoFocus = false,
|
||||
@@ -43,11 +49,38 @@ class SingleLineTextEdit extends Component {
|
||||
size,
|
||||
fullWidth = true,
|
||||
required = false,
|
||||
search = false,
|
||||
clear = false,
|
||||
sx,
|
||||
slotProps,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
let startAdornment = slotProps?.input?.startAdornment;
|
||||
if (search && startAdornment === undefined) {
|
||||
startAdornment = (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon color="action" />
|
||||
</InputAdornment>
|
||||
);
|
||||
}
|
||||
|
||||
let endAdornment = slotProps?.input?.endAdornment;
|
||||
if (clear && endAdornment === undefined) {
|
||||
endAdornment = (value && !readOnly && !disabled) ? (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => onChange?.('')}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
aria-label="Eingabe Löschen"
|
||||
>
|
||||
<ClearIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
) : null;
|
||||
}
|
||||
|
||||
return (
|
||||
<TextField
|
||||
inputRef={inputRef}
|
||||
@@ -59,7 +92,7 @@ class SingleLineTextEdit extends Component {
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(event) => {
|
||||
if (!readOnly) onChange(event.target.value);
|
||||
if (!readOnly) onChange?.(event.target.value);
|
||||
}}
|
||||
autoFocus={autoFocus}
|
||||
autoComplete={autoComplete}
|
||||
@@ -67,6 +100,8 @@ class SingleLineTextEdit extends Component {
|
||||
...slotProps,
|
||||
input: {
|
||||
readOnly,
|
||||
...(startAdornment !== undefined ? { startAdornment } : {}),
|
||||
...(endAdornment !== undefined ? { endAdornment } : {}),
|
||||
...slotProps?.input,
|
||||
},
|
||||
htmlInput: {
|
||||
|
||||
@@ -1,14 +1,32 @@
|
||||
import { Component, createRef } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import FillSpace from '../../FillSpace';
|
||||
import { ComponentDocs } from '../ComponentDocs';
|
||||
|
||||
/** Row renderer: component types are rendered as elements by FillSpace. */
|
||||
class Row extends Component {
|
||||
render() {
|
||||
const { item } = this.props;
|
||||
return (
|
||||
<ListItemButton divider disabled={!item}>
|
||||
<ListItemText primary={item ? item.name : '\u00A0'} />
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SAMPLE_ITEMS = Array.from({ length: 40 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `Eintrag ${i + 1}`,
|
||||
}));
|
||||
|
||||
/**
|
||||
* Mock page exercising FillSpace: real content on top, and a repeating
|
||||
* `measureElement` filling only the leftover space down to the end of the
|
||||
* viewport.
|
||||
* Mock page exercising FillSpace: header/footer refs, `items` + `renderItem`,
|
||||
* wheel pagination and the built-in pagination header.
|
||||
*/
|
||||
class FillSpaceMockPage extends Component {
|
||||
constructor(props) {
|
||||
@@ -16,27 +34,27 @@ class FillSpaceMockPage extends Component {
|
||||
this.ex1 = { header: createRef(), footer: createRef() };
|
||||
this.ex2 = { header: createRef(), footer: createRef() };
|
||||
this.ex3 = { header: createRef(), footer: createRef() };
|
||||
this.state = { fitCount: null };
|
||||
this.exVirtual = { header: createRef(), footer: createRef() };
|
||||
}
|
||||
|
||||
render() {
|
||||
const { fitCount } = this.state;
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
FillSpace renders real content on top and repeats the measurement
|
||||
element until the end of the page.
|
||||
FillSpace paginates <code>items</code> via a <code>renderItem</code>{' '}
|
||||
row, measures the row height, fills the leftover viewport space and
|
||||
flips pages on wheel scroll.
|
||||
</Typography>
|
||||
|
||||
{/* Main example: content + repeating fill to end of page */}
|
||||
{/* Main example: items + renderItem to end of page */}
|
||||
<Paper variant="outlined" sx={{ p: 2 }}>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Content + repeating element to end of page
|
||||
Items + renderItem, filled to end of page
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.ex1.header}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header (measured)</Typography>
|
||||
</Box>
|
||||
@@ -44,65 +62,17 @@ class FillSpaceMockPage extends Component {
|
||||
<FillSpace
|
||||
aboveRef={this.ex1.header}
|
||||
belowRef={this.ex1.footer}
|
||||
measureElement={
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#dbeafe',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">Einheit</Typography>
|
||||
</Box>
|
||||
}
|
||||
onMeasurement={(count) => this.setState({ fitCount: count })}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#fef3c7',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" fontWeight={600}>
|
||||
Echte Inhalte (children)
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Diese Zeilen stehen oben, darunter wiederholt sich die
|
||||
Einheit bis zum Seitenende.
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
mt: 1,
|
||||
px: 1.5,
|
||||
py: 0.75,
|
||||
borderRadius: 1,
|
||||
bgcolor: 'background.paper',
|
||||
border: '1px dashed',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" component="span">
|
||||
📏 onMeasurement (würden ohne Inhalt passen):
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
component="span"
|
||||
fontWeight={700}
|
||||
color="primary"
|
||||
>
|
||||
{fitCount != null ? `${fitCount} Einheiten` : '…'}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</FillSpace>
|
||||
items={SAMPLE_ITEMS}
|
||||
renderItem={Row}
|
||||
reserveBottom={32}
|
||||
minPageSize={5}
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.ex1.footer}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer (measured)</Typography>
|
||||
<Typography variant="caption">Footer (reserved)</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
@@ -115,7 +85,7 @@ class FillSpaceMockPage extends Component {
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.ex2.header}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header</Typography>
|
||||
</Box>
|
||||
@@ -123,24 +93,15 @@ class FillSpaceMockPage extends Component {
|
||||
<FillSpace
|
||||
aboveRef={this.ex2.header}
|
||||
belowRef={this.ex2.footer}
|
||||
items={SAMPLE_ITEMS.slice(0, 6)}
|
||||
renderItem={Row}
|
||||
minPageSize={4}
|
||||
minHeight={200}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#fef3c7',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">
|
||||
Minimum height of 200px enforced.
|
||||
</Typography>
|
||||
</Box>
|
||||
</FillSpace>
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.ex2.footer}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer</Typography>
|
||||
</Box>
|
||||
@@ -155,7 +116,7 @@ class FillSpaceMockPage extends Component {
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.ex3.header}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header</Typography>
|
||||
</Box>
|
||||
@@ -163,25 +124,46 @@ class FillSpaceMockPage extends Component {
|
||||
<FillSpace
|
||||
aboveRef={this.ex3.header}
|
||||
belowRef={this.ex3.footer}
|
||||
items={SAMPLE_ITEMS}
|
||||
renderItem={Row}
|
||||
minPageSize={5}
|
||||
debug
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#dcfce7',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">
|
||||
Green background shows actual spacer bounds; purple overlay
|
||||
shows full viewport coverage.
|
||||
</Typography>
|
||||
</Box>
|
||||
</FillSpace>
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.ex3.footer}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Example 4: Virtual Scrollbar */}
|
||||
<Paper variant="outlined" sx={{ p: 2 }}>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Virtual Scrollbar (scrollbar synchronized with pagination)
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.exVirtual.header}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header</Typography>
|
||||
</Box>
|
||||
|
||||
<FillSpace
|
||||
aboveRef={this.exVirtual.header}
|
||||
belowRef={this.exVirtual.footer}
|
||||
items={SAMPLE_ITEMS}
|
||||
renderItem={Row}
|
||||
minPageSize={5}
|
||||
virtualScrollbar
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.exVirtual.footer}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Component, createRef } from 'react';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import Box from '@mui/material/Box';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import FolderIcon from '@mui/icons-material/FolderOutlined';
|
||||
@@ -307,8 +309,8 @@ class ScreenshotHarness extends Component {
|
||||
}
|
||||
|
||||
/**
|
||||
* Deterministic FillSpace example for the screenshot harness. Bound with a
|
||||
* `maxHeight` so the reference is stable regardless of the viewport height.
|
||||
* Deterministic FillSpace example for the screenshot harness:
|
||||
* `items` + a component `renderItem`, bounded by above/below refs.
|
||||
*/
|
||||
class FillSpaceExample extends Component {
|
||||
constructor(props) {
|
||||
@@ -322,7 +324,7 @@ class FillSpaceExample extends Component {
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.headerRef}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header (gemessen)</Typography>
|
||||
</Box>
|
||||
@@ -330,26 +332,15 @@ class FillSpaceExample extends Component {
|
||||
<FillSpace
|
||||
aboveRef={this.headerRef}
|
||||
belowRef={this.footerRef}
|
||||
items={FILL_SAMPLE_ITEMS}
|
||||
renderItem={FillRow}
|
||||
minPageSize={4}
|
||||
minHeight={80}
|
||||
maxHeight={220}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#dbeafe',
|
||||
p: 2,
|
||||
borderRadius: 1,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">
|
||||
FillSpace füllt den Platz zwischen Header und Footer.
|
||||
</Typography>
|
||||
</Box>
|
||||
</FillSpace>
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.footerRef}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer (gemessen)</Typography>
|
||||
</Box>
|
||||
@@ -358,9 +349,36 @@ class FillSpaceExample extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/** Row renderer used by the FillSpace harness examples. */
|
||||
class FillRow extends Component {
|
||||
render() {
|
||||
const { item } = this.props;
|
||||
return (
|
||||
<ListItemButton divider disabled={!item}>
|
||||
<ListItemText
|
||||
primary={
|
||||
item ? (
|
||||
`${item.name}`
|
||||
) : (
|
||||
<Typography variant="body2" sx={{ visibility: 'hidden' }}>
|
||||
Platzhalter
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const FILL_SAMPLE_ITEMS = Array.from({ length: 24 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
name: `Eintrag ${i + 1}`,
|
||||
}));
|
||||
|
||||
/**
|
||||
* FillSpace with a repeating measurement element plus real children on top,
|
||||
* for the screenshot harness. Bound with maxHeight so the reference is stable.
|
||||
* FillSpace with `items` + a component `renderItem`, for the screenshot
|
||||
* harness. Bounded by above/below refs so the reference is stable.
|
||||
*/
|
||||
class FillSpaceMeasureExample extends Component {
|
||||
constructor(props) {
|
||||
@@ -374,7 +392,7 @@ class FillSpaceMeasureExample extends Component {
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.headerRef}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header</Typography>
|
||||
</Box>
|
||||
@@ -382,36 +400,15 @@ class FillSpaceMeasureExample extends Component {
|
||||
<FillSpace
|
||||
aboveRef={this.headerRef}
|
||||
belowRef={this.footerRef}
|
||||
measureElement={
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#c7d2fe',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption">Einheit</Typography>
|
||||
</Box>
|
||||
}
|
||||
measureGap={8}
|
||||
items={FILL_SAMPLE_ITEMS}
|
||||
renderItem={FillRow}
|
||||
minPageSize={4}
|
||||
minHeight={60}
|
||||
maxHeight={260}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: '#fef3c7',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2">Echte Inhalte</Typography>
|
||||
</Box>
|
||||
</FillSpace>
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.footerRef}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1 }}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -158,15 +158,14 @@ class RecordList extends Component {
|
||||
sx={{ cursor: onEdit ? 'pointer' : undefined }}
|
||||
onClick={() => this.handleRowClick(row)}
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
align={col.align}
|
||||
padding={col.padding}
|
||||
sx={col.mono || col.key === 'number' || col.key === 'sku' ? { fontFamily: 'monospace' } : undefined}
|
||||
>
|
||||
{col.render ? col.render(row) : row[col.key]}
|
||||
</TableCell>
|
||||
))}
|
||||
{hasActions ? (
|
||||
<TableCell
|
||||
padding="checkbox"
|
||||
|
||||
@@ -25,6 +25,7 @@ function valuesEqual(a, b) {
|
||||
*
|
||||
* @prop {any} [value] - The saved value shown in read mode and used as the baseline for dirty detection.
|
||||
* @prop {ReactNode} [title] - Overline label shown above the body.
|
||||
* @prop {function} [titleContent] - Optional title render function receiving `{ editing, draft, onChange }`.
|
||||
* @prop {ReactNode} [display] - Node rendered while not editing.
|
||||
* @prop {ReactNode | function} [edit] - Node rendered while editing, or a render function receiving `{ draft, onChange, inputRef }`.
|
||||
* @prop {(draft) => Promise<void>} [onSave] - Async save handler. The tile exits edit mode only after this resolves; if it rejects, the error is surfaced via `onError` and shown inline.
|
||||
@@ -142,15 +143,24 @@ class EditablePanelTileBase extends Component {
|
||||
};
|
||||
|
||||
renderTitle() {
|
||||
const { title, onSave } = this.props;
|
||||
if (!title) return null;
|
||||
const { title, titleContent, onSave } = this.props;
|
||||
const { editing, draft } = this.state;
|
||||
const content =
|
||||
typeof titleContent === 'function'
|
||||
? titleContent({
|
||||
editing,
|
||||
draft,
|
||||
onChange: this.handleDraftChange,
|
||||
})
|
||||
: title;
|
||||
if (!content) return null;
|
||||
return (
|
||||
<Typography
|
||||
variant="overline"
|
||||
variant="h6"
|
||||
color="text.secondary"
|
||||
sx={{ display: 'block', mb: 1, pr: onSave ? 9 : 0 }}
|
||||
sx={{ mt: -0.5, display: 'block', pr: onSave ? 9 : 0 }}
|
||||
>
|
||||
{title}
|
||||
{content}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
@@ -278,7 +288,7 @@ class EditablePanelTileBase extends Component {
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
pr: actionPadding,
|
||||
...(actionPadding ? { pr: actionPadding } : {}),
|
||||
display: 'flex',
|
||||
alignItems: contentAlignItems,
|
||||
}}
|
||||
|
||||
@@ -8,6 +8,10 @@ import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
||||
import { injectMuiTheme } from './injectMuiTheme';
|
||||
import {
|
||||
GRID_COLUMNS,
|
||||
PANEL_TILE_GRADIENT_DARK,
|
||||
PANEL_TILE_GRADIENT_DARK_TINTED,
|
||||
PANEL_TILE_GRADIENT_LIGHT,
|
||||
PANEL_TILE_GRADIENT_TINTED,
|
||||
TILE_ACTION_PADDING,
|
||||
panelTilePaperSx,
|
||||
tileActionIconSx,
|
||||
@@ -16,7 +20,8 @@ import {
|
||||
|
||||
/**
|
||||
* Read-only content panel with a title and an optional corner action (icon
|
||||
* button with busy spinner). It is a styled MUI Paper; children fill the body.
|
||||
* button with busy spinner). It is a styled MUI Paper with a modern minimal
|
||||
* diagonal gradient surface; children fill the body.
|
||||
*
|
||||
* @component PanelTile
|
||||
* @import dashgui/panels
|
||||
@@ -113,7 +118,7 @@ class PanelTileBase extends Component {
|
||||
>
|
||||
{this.renderAction()}
|
||||
{this.renderTitle()}
|
||||
<Box sx={{ flex: 1, minWidth: 0, pr: actionPadding }}>{children}</Box>
|
||||
<Box sx={{ flex: 1, minWidth: 0, ...(actionPadding ? { pr: actionPadding } : {}) }}>{children}</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -134,7 +139,7 @@ export const PanelTile = injectMuiTheme(PanelTileBase);
|
||||
* @behaviour Uses a CSS grid with `gap: 2` (theme spacing).
|
||||
* @behaviour Children position themselves via the `wide` prop of each tile.
|
||||
*/
|
||||
export function PanelTileGrid({ children, sx }) {
|
||||
export function PanelTileGrid({ children, sx, icon, text, label, badge, ...rest }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -147,10 +152,17 @@ export function PanelTileGrid({ children, sx }) {
|
||||
gap: 2,
|
||||
...sx,
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export { GRID_COLUMNS };
|
||||
export {
|
||||
GRID_COLUMNS,
|
||||
PANEL_TILE_GRADIENT_LIGHT,
|
||||
PANEL_TILE_GRADIENT_TINTED,
|
||||
PANEL_TILE_GRADIENT_DARK,
|
||||
PANEL_TILE_GRADIENT_DARK_TINTED,
|
||||
};
|
||||
|
||||
191
src/panels/TabbedPanelTileGrid.jsx
Normal file
191
src/panels/TabbedPanelTileGrid.jsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import React, { Component } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
|
||||
/**
|
||||
* Tabbed wrapper for multiple `PanelTileGrid` layouts.
|
||||
*
|
||||
* Each child `PanelTileGrid` defines its tab metadata via props:
|
||||
* - `text` (or `label`): Tab label string
|
||||
* - `icon`: Optional icon ReactNode
|
||||
* - `value`: Optional unique tab value (defaults to child index)
|
||||
* - `disabled`: Optional boolean
|
||||
* - `badge`: Optional string/number shown as a pill chip next to the label
|
||||
*
|
||||
* Example:
|
||||
* ```jsx
|
||||
* <TabbedPanelTileGrid>
|
||||
* <PanelTileGrid icon={<StyleIcon />} text="Auswahl-Merkmale">
|
||||
* <PanelTile wide={2}>...</PanelTile>
|
||||
* <PanelTile wide={2}>...</PanelTile>
|
||||
* </PanelTileGrid>
|
||||
* <PanelTileGrid icon={<TuneIcon />} text="Text-Merkmale">
|
||||
* <PanelTile wide={2}>...</PanelTile>
|
||||
* </PanelTileGrid>
|
||||
* </TabbedPanelTileGrid>
|
||||
* ```
|
||||
*
|
||||
* @component TabbedPanelTileGrid
|
||||
* @import dashgui/panels
|
||||
*
|
||||
* @prop {ReactNode} children - One or more PanelTileGrid elements.
|
||||
* @prop {any} [value] - Controlled active tab value/index.
|
||||
* @prop {any} [defaultValue] - Initial active tab value/index for uncontrolled mode.
|
||||
* @prop {any} [defaultTab] - Alias for defaultValue.
|
||||
* @prop {(nextValue: any, event: React.SyntheticEvent) => void} [onChange] - Called on tab switch.
|
||||
* @prop {object} [sx] - Extra styles merged into root container Box.
|
||||
* @prop {object} [tabsWrapperSx] - Extra styles for the container around Tabs.
|
||||
* @prop {object} [tabsSx] - Extra styles merged into MUI Tabs.
|
||||
* @prop {object} [tabSx] - Extra styles merged into MUI Tab.
|
||||
*/
|
||||
export class TabbedPanelTileGrid extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
internalTab: props.defaultValue ?? props.defaultTab ?? 0,
|
||||
};
|
||||
this.handleTabChange = this.handleTabChange.bind(this);
|
||||
}
|
||||
|
||||
getTabs() {
|
||||
const children = React.Children.toArray(this.props.children).filter(Boolean);
|
||||
return children.map((child, index) => {
|
||||
const value = child.props.value !== undefined ? child.props.value : index;
|
||||
const text = child.props.text ?? child.props.label ?? child.props.title ?? `Tab ${index + 1}`;
|
||||
const icon = child.props.icon ?? null;
|
||||
const disabled = Boolean(child.props.disabled);
|
||||
const badge = child.props.badge;
|
||||
const color = child.props.color;
|
||||
return {
|
||||
value,
|
||||
text,
|
||||
icon,
|
||||
disabled,
|
||||
badge,
|
||||
color,
|
||||
child,
|
||||
index,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
getActiveValue(tabs) {
|
||||
if (this.props.value !== undefined) {
|
||||
return this.props.value;
|
||||
}
|
||||
const { internalTab } = this.state;
|
||||
if (tabs.some((t) => t.value === internalTab)) {
|
||||
return internalTab;
|
||||
}
|
||||
const firstEnabled = tabs.find((t) => !t.disabled) ?? tabs[0];
|
||||
return firstEnabled ? firstEnabled.value : 0;
|
||||
}
|
||||
|
||||
handleTabChange(event, nextValue) {
|
||||
if (this.props.value === undefined) {
|
||||
this.setState({ internalTab: nextValue }, () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
});
|
||||
} else if (typeof window !== 'undefined') {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
this.props.onChange?.(nextValue, event);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
sx,
|
||||
tabsWrapperSx,
|
||||
tabsSx,
|
||||
tabSx,
|
||||
} = this.props;
|
||||
|
||||
const tabs = this.getTabs();
|
||||
if (tabs.length === 0) return null;
|
||||
|
||||
const activeValue = this.getActiveValue(tabs);
|
||||
const activeTab = tabs.find((t) => t.value === activeValue) ?? tabs[0];
|
||||
|
||||
return (
|
||||
<Box sx={sx}>
|
||||
<Box
|
||||
sx={{
|
||||
mb: 2,
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider',
|
||||
...tabsWrapperSx,
|
||||
}}
|
||||
>
|
||||
<Tabs
|
||||
value={activeValue}
|
||||
onChange={this.handleTabChange}
|
||||
textColor="primary"
|
||||
indicatorColor="primary"
|
||||
sx={{
|
||||
minHeight: 44,
|
||||
'& .MuiTabs-flexContainer': {
|
||||
gap: 1,
|
||||
},
|
||||
'& .MuiTab-root': {
|
||||
minHeight: 44,
|
||||
textTransform: 'none',
|
||||
fontSize: '0.9375rem',
|
||||
fontWeight: 600,
|
||||
gap: 1,
|
||||
px: 2,
|
||||
py: 1,
|
||||
borderRadius: '8px 8px 0 0',
|
||||
color: 'text.secondary',
|
||||
'&:hover': {
|
||||
bgcolor: 'action.hover',
|
||||
color: 'text.primary',
|
||||
},
|
||||
'&.Mui-selected': {
|
||||
color: 'text.primary',
|
||||
fontWeight: 700,
|
||||
},
|
||||
'& .MuiSvgIcon-root': {
|
||||
fontSize: 20,
|
||||
},
|
||||
...tabSx,
|
||||
},
|
||||
...tabsSx,
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={String(tab.value)}
|
||||
value={tab.value}
|
||||
disabled={tab.disabled}
|
||||
icon={tab.icon}
|
||||
iconPosition="start"
|
||||
label={
|
||||
tab.badge != null ? (
|
||||
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
|
||||
<span>{tab.text}</span>
|
||||
<Chip
|
||||
size="small"
|
||||
label={tab.badge}
|
||||
sx={{ height: 20, fontSize: '0.75rem', fontWeight: 600 }}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
tab.text
|
||||
)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{activeTab ? React.cloneElement(activeTab.child, { key: String(activeTab.value) }) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TabbedPanelTileGrid;
|
||||
@@ -1,4 +1,12 @@
|
||||
export { PanelTile, PanelTileGrid, GRID_COLUMNS } from './PanelTile';
|
||||
export { TabbedPanelTileGrid } from './TabbedPanelTileGrid';
|
||||
export { EditablePanelTile } from './EditablePanelTile';
|
||||
export { injectMuiTheme } from './injectMuiTheme';
|
||||
export { PENDING_EDIT_BORDER } from './panelTileLayout';
|
||||
export {
|
||||
PENDING_EDIT_BORDER,
|
||||
PANEL_TILE_BORDER_RADIUS,
|
||||
PANEL_TILE_GRADIENT_LIGHT,
|
||||
PANEL_TILE_GRADIENT_TINTED,
|
||||
PANEL_TILE_GRADIENT_DARK,
|
||||
PANEL_TILE_GRADIENT_DARK_TINTED,
|
||||
} from './panelTileLayout';
|
||||
|
||||
@@ -17,7 +17,7 @@ export function responsiveColumnSpan(wide) {
|
||||
}
|
||||
|
||||
export const PENDING_EDIT_RING_PX = 4;
|
||||
export const TILE_ACTION_PADDING = 12;
|
||||
export const TILE_ACTION_PADDING = 0;
|
||||
|
||||
export const tileActionSx = {
|
||||
position: 'absolute',
|
||||
@@ -31,6 +31,15 @@ export const tileActionIconSx = {
|
||||
|
||||
export const PANEL_TILE_BORDER_RADIUS = 4;
|
||||
|
||||
export const PANEL_TILE_GRADIENT_LIGHT =
|
||||
'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)';
|
||||
export const PANEL_TILE_GRADIENT_TINTED =
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.04) 100%)';
|
||||
export const PANEL_TILE_GRADIENT_DARK =
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
|
||||
export const PANEL_TILE_GRADIENT_DARK_TINTED =
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
|
||||
|
||||
function tileRingBoxShadow(ringColor, elevationShadow) {
|
||||
const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
|
||||
return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
|
||||
@@ -52,6 +61,14 @@ export function panelTilePaperSx({
|
||||
? EDITING_TILE_BORDER
|
||||
: null;
|
||||
|
||||
const isDark = theme?.palette?.mode === 'dark';
|
||||
const defaultGradient = isDark
|
||||
? PANEL_TILE_GRADIENT_DARK
|
||||
: PANEL_TILE_GRADIENT_LIGHT;
|
||||
const coloredGradient = isDark
|
||||
? PANEL_TILE_GRADIENT_DARK_TINTED
|
||||
: PANEL_TILE_GRADIENT_TINTED;
|
||||
|
||||
return {
|
||||
gridColumn: responsiveColumnSpan(wide),
|
||||
position: 'relative',
|
||||
@@ -61,7 +78,14 @@ export function panelTilePaperSx({
|
||||
flexDirection: 'column',
|
||||
border: 'none',
|
||||
borderRadius: PANEL_TILE_BORDER_RADIUS,
|
||||
...(color ? { bgcolor: color } : {}),
|
||||
...(color
|
||||
? {
|
||||
bgcolor: color,
|
||||
backgroundImage: coloredGradient,
|
||||
}
|
||||
: {
|
||||
backgroundImage: defaultGradient,
|
||||
}),
|
||||
...(ringColor
|
||||
? {
|
||||
boxShadow: tileRingBoxShadow(ringColor, elevationShadow),
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { qrcode } from 'vite-plugin-qrcode';
|
||||
import { componentDocsPlugin } from './vite-plugin-component-docs.js';
|
||||
|
||||
// Library dev server — renders the mock pages under /dev so components can be
|
||||
// inspected in isolation, and doubles as a Vite config for consumers that want
|
||||
// to preview this package standalone.
|
||||
export default defineConfig({
|
||||
plugins: [react(), componentDocsPlugin()],
|
||||
plugins: [react(), componentDocsPlugin(), qrcode()],
|
||||
server: {
|
||||
host: true,
|
||||
port: 5199,
|
||||
},
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user