@stoker-platform/web-app 0.5.51 → 0.5.52
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/CHANGELOG.md +9 -0
- package/package.json +4 -4
- package/src/Images.tsx +62 -25
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stoker-platform/web-app",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.52",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"scripts": {
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
52
52
|
"@react-google-maps/api": "^2.20.8",
|
|
53
53
|
"@sentry/react": "^10.43.0",
|
|
54
|
-
"@stoker-platform/node-client": "0.5.
|
|
55
|
-
"@stoker-platform/utils": "0.5.
|
|
56
|
-
"@stoker-platform/web-client": "0.5.
|
|
54
|
+
"@stoker-platform/node-client": "0.5.34",
|
|
55
|
+
"@stoker-platform/utils": "0.5.28",
|
|
56
|
+
"@stoker-platform/web-client": "0.5.30",
|
|
57
57
|
"@tanstack/react-table": "^8.21.3",
|
|
58
58
|
"@types/react": "18.3.13",
|
|
59
59
|
"@types/react-dom": "18.3.1",
|
package/src/Images.tsx
CHANGED
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
onStokerPermissionsChange,
|
|
18
18
|
subscribeOne,
|
|
19
19
|
} from "@stoker-platform/web-client"
|
|
20
|
-
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
20
|
+
import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
21
21
|
import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
|
|
22
22
|
import { useGoToRecord } from "./utils/goToRecord"
|
|
23
23
|
import { LoadingSpinner } from "./components/ui/loading-spinner"
|
|
@@ -228,30 +228,57 @@ const Row = ({ index, style, data }: RowProps) => {
|
|
|
228
228
|
</button>
|
|
229
229
|
</CardHeader>
|
|
230
230
|
<CardContent className="pb-3 md:pb-4">
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
231
|
+
{imagesConfig.customComponent &&
|
|
232
|
+
(!imagesConfig.customComponent.condition ||
|
|
233
|
+
imagesConfig.customComponent.condition(
|
|
234
|
+
relationCollection,
|
|
235
|
+
relationParent,
|
|
236
|
+
isAssigning,
|
|
237
|
+
)) && (
|
|
238
|
+
<div
|
|
239
|
+
className={cn(
|
|
240
|
+
`h-[${imagesConfig.customComponent.height}px]`,
|
|
241
|
+
"overflow-hidden",
|
|
242
|
+
)}
|
|
243
|
+
>
|
|
244
|
+
{createElement(imagesConfig.customComponent.component, {
|
|
245
|
+
record,
|
|
246
|
+
parentRecord: relationParent,
|
|
247
|
+
collection,
|
|
248
|
+
parentCollection: relationCollection,
|
|
249
|
+
isAssigning,
|
|
250
|
+
components: import.meta.glob("./components/ui/*.tsx", {
|
|
251
|
+
eager: true,
|
|
252
|
+
}),
|
|
253
|
+
hooks: import.meta.glob("./hooks/*.{ts,tsx}", { eager: true }),
|
|
254
|
+
utils: import.meta.glob("./lib/*.{ts,tsx}", { eager: true }),
|
|
255
|
+
})}
|
|
246
256
|
</div>
|
|
247
257
|
)}
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
258
|
+
{isAssigning && assignable && (assignable.isAvailable(record) || checked) && (
|
|
259
|
+
<div className="pb-4">
|
|
260
|
+
<div className="flex items-center justify-center space-x-3 min-h-8">
|
|
261
|
+
<Switch
|
|
262
|
+
id={`${record.id}-assigned`}
|
|
263
|
+
className="data-[state=checked]:bg-blue-500"
|
|
264
|
+
checked={checked}
|
|
265
|
+
disabled={checkedDisabled}
|
|
266
|
+
onCheckedChange={(checked) => handleCheckedChange(checked, record)}
|
|
267
|
+
/>
|
|
268
|
+
{imagesConfig.size !== "sm" && (
|
|
269
|
+
<Label htmlFor={`${record.id}-assigned`}>Assigned</Label>
|
|
270
|
+
)}
|
|
253
271
|
</div>
|
|
254
|
-
|
|
272
|
+
</div>
|
|
273
|
+
)}
|
|
274
|
+
{isAssigning && assignable && !assignable.isAvailable(record) && !checked && (
|
|
275
|
+
<div className="pb-4">
|
|
276
|
+
<div className="flex items-center justify-center space-x-3 min-h-8">
|
|
277
|
+
{unavailable}
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
)}
|
|
281
|
+
<div className={cn("grid", "gap-4", size)}>
|
|
255
282
|
<button
|
|
256
283
|
className="relative w-full h-full flex items-center justify-center overflow-hidden"
|
|
257
284
|
onClick={() => goToRecord(collection, record)}
|
|
@@ -560,6 +587,10 @@ export const Images = memo(
|
|
|
560
587
|
cols: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
|
|
561
588
|
},
|
|
562
589
|
lg: {
|
|
590
|
+
size: "h-[275px] md:h-[200px] lg:h-[250px] xl:h-[300px]",
|
|
591
|
+
cols: "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3",
|
|
592
|
+
},
|
|
593
|
+
xl: {
|
|
563
594
|
size: "h-[275px] md:h-[300px] lg:h-[400px] xl:h-[450px]",
|
|
564
595
|
cols: "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2",
|
|
565
596
|
},
|
|
@@ -722,7 +753,13 @@ export const Images = memo(
|
|
|
722
753
|
|
|
723
754
|
const lineClamp = imagesConfig.maxHeaderLines === 2 ? "line-clamp-2" : "line-clamp-1"
|
|
724
755
|
const headerSize = imagesConfig.maxHeaderLines === 2 ? 116 : 82
|
|
725
|
-
const assignedHeight = isAssigning ?
|
|
756
|
+
const assignedHeight = isAssigning ? 56 : 0
|
|
757
|
+
const customComponentHeight =
|
|
758
|
+
imagesConfig.customComponent &&
|
|
759
|
+
(!imagesConfig.customComponent.condition ||
|
|
760
|
+
imagesConfig.customComponent.condition(relationCollection, relationParent, isAssigning))
|
|
761
|
+
? imagesConfig.customComponent.height
|
|
762
|
+
: 0
|
|
726
763
|
|
|
727
764
|
const itemData = {
|
|
728
765
|
collection,
|
|
@@ -768,7 +805,7 @@ export const Images = memo(
|
|
|
768
805
|
<List
|
|
769
806
|
height={height}
|
|
770
807
|
width="100%"
|
|
771
|
-
itemSize={itemSize + headerSize + assignedHeight}
|
|
808
|
+
itemSize={itemSize + headerSize + assignedHeight + customComponentHeight}
|
|
772
809
|
itemCount={itemCount}
|
|
773
810
|
overscanCount={5}
|
|
774
811
|
itemKey={itemKey}
|
|
@@ -793,7 +830,7 @@ export const Images = memo(
|
|
|
793
830
|
<List
|
|
794
831
|
height={height}
|
|
795
832
|
width="100%"
|
|
796
|
-
itemSize={itemSize + headerSize + assignedHeight}
|
|
833
|
+
itemSize={itemSize + headerSize + assignedHeight + customComponentHeight}
|
|
797
834
|
itemCount={itemCount}
|
|
798
835
|
overscanCount={5}
|
|
799
836
|
itemKey={itemKey}
|