@luxonis/depthai-viewer-common 0.0.6 → 0.0.8

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.
Files changed (38) hide show
  1. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2 +0 -0
  2. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 +0 -0
  3. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2 +0 -0
  4. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2 +0 -0
  5. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2 +0 -0
  6. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2 +0 -0
  7. package/dist/fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2 +0 -0
  8. package/dist/fonts/inter.css +252 -0
  9. package/dist/fonts/jetbrains-mono.css +7 -0
  10. package/dist/fonts/jetbrains-mono.woff2 +0 -0
  11. package/dist/index.css +2 -0
  12. package/package.json +4 -3
  13. package/src/components/ButtonLink.tsx +0 -12
  14. package/src/components/CTASubLabel.tsx +0 -39
  15. package/src/components/DepthAIEntrypoint.tsx +0 -20
  16. package/src/components/Link.tsx +0 -10
  17. package/src/components/Pipeline.tsx +0 -35
  18. package/src/components/Resizable.tsx +0 -56
  19. package/src/components/Streams.tsx +0 -261
  20. package/src/constants/connection.ts +0 -45
  21. package/src/constants/streams.ts +0 -12
  22. package/src/constants/url.ts +0 -6
  23. package/src/dai-connection/connection.ts +0 -409
  24. package/src/dai-connection/decoder.worker.ts +0 -58
  25. package/src/hooks/connection.ts +0 -204
  26. package/src/hooks/navigation.ts +0 -25
  27. package/src/hooks/search.ts +0 -45
  28. package/src/index.ts +0 -30
  29. package/src/models/device-configuration.ts +0 -27
  30. package/src/providers/ConnectionProvider.tsx +0 -39
  31. package/src/providers/DataProvider.tsx +0 -71
  32. package/src/utils/arrays.ts +0 -10
  33. package/src/utils/dynamic-base-worker.ts +0 -21
  34. package/src/utils/functions.ts +0 -3
  35. package/src/utils/sorting.ts +0 -42
  36. package/src/utils/url.ts +0 -8
  37. package/src/window.d.ts +0 -7
  38. package/tsconfig.json +0 -37
package/dist/fonts/inter.css ADDED
@@ -0,0 +1,252 @@
1
+ /* cyrillic-ext */
2
+ @font-face {
3
+ font-family: 'Inter';
4
+ font-style: normal;
5
+ font-weight: 400;
6
+ font-display: swap;
7
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
8
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
9
+ }
10
+ /* cyrillic */
11
+ @font-face {
12
+ font-family: 'Inter';
13
+ font-style: normal;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
17
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
18
+ }
19
+ /* greek-ext */
20
+ @font-face {
21
+ font-family: 'Inter';
22
+ font-style: normal;
23
+ font-weight: 400;
24
+ font-display: swap;
25
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
26
+ unicode-range: U+1F00-1FFF;
27
+ }
28
+ /* greek */
29
+ @font-face {
30
+ font-family: 'Inter';
31
+ font-style: normal;
32
+ font-weight: 400;
33
+ font-display: swap;
34
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
35
+ unicode-range: U+0370-03FF;
36
+ }
37
+ /* vietnamese */
38
+ @font-face {
39
+ font-family: 'Inter';
40
+ font-style: normal;
41
+ font-weight: 400;
42
+ font-display: swap;
43
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
44
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
45
+ }
46
+ /* latin-ext */
47
+ @font-face {
48
+ font-family: 'Inter';
49
+ font-style: normal;
50
+ font-weight: 400;
51
+ font-display: swap;
52
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
53
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
54
+ }
55
+ /* latin */
56
+ @font-face {
57
+ font-family: 'Inter';
58
+ font-style: normal;
59
+ font-weight: 400;
60
+ font-display: swap;
61
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
62
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
63
+ }
64
+ /* cyrillic-ext */
65
+ @font-face {
66
+ font-family: 'Inter';
67
+ font-style: normal;
68
+ font-weight: 500;
69
+ font-display: swap;
70
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
71
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
72
+ }
73
+ /* cyrillic */
74
+ @font-face {
75
+ font-family: 'Inter';
76
+ font-style: normal;
77
+ font-weight: 500;
78
+ font-display: swap;
79
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
80
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
81
+ }
82
+ /* greek-ext */
83
+ @font-face {
84
+ font-family: 'Inter';
85
+ font-style: normal;
86
+ font-weight: 500;
87
+ font-display: swap;
88
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
89
+ unicode-range: U+1F00-1FFF;
90
+ }
91
+ /* greek */
92
+ @font-face {
93
+ font-family: 'Inter';
94
+ font-style: normal;
95
+ font-weight: 500;
96
+ font-display: swap;
97
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
98
+ unicode-range: U+0370-03FF;
99
+ }
100
+ /* vietnamese */
101
+ @font-face {
102
+ font-family: 'Inter';
103
+ font-style: normal;
104
+ font-weight: 500;
105
+ font-display: swap;
106
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
107
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
108
+ }
109
+ /* latin-ext */
110
+ @font-face {
111
+ font-family: 'Inter';
112
+ font-style: normal;
113
+ font-weight: 500;
114
+ font-display: swap;
115
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
116
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
117
+ }
118
+ /* latin */
119
+ @font-face {
120
+ font-family: 'Inter';
121
+ font-style: normal;
122
+ font-weight: 500;
123
+ font-display: swap;
124
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
125
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
126
+ }
127
+ /* cyrillic-ext */
128
+ @font-face {
129
+ font-family: 'Inter';
130
+ font-style: normal;
131
+ font-weight: 600;
132
+ font-display: swap;
133
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
134
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
135
+ }
136
+ /* cyrillic */
137
+ @font-face {
138
+ font-family: 'Inter';
139
+ font-style: normal;
140
+ font-weight: 600;
141
+ font-display: swap;
142
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
143
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
144
+ }
145
+ /* greek-ext */
146
+ @font-face {
147
+ font-family: 'Inter';
148
+ font-style: normal;
149
+ font-weight: 600;
150
+ font-display: swap;
151
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
152
+ unicode-range: U+1F00-1FFF;
153
+ }
154
+ /* greek */
155
+ @font-face {
156
+ font-family: 'Inter';
157
+ font-style: normal;
158
+ font-weight: 600;
159
+ font-display: swap;
160
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
161
+ unicode-range: U+0370-03FF;
162
+ }
163
+ /* vietnamese */
164
+ @font-face {
165
+ font-family: 'Inter';
166
+ font-style: normal;
167
+ font-weight: 600;
168
+ font-display: swap;
169
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
170
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
171
+ }
172
+ /* latin-ext */
173
+ @font-face {
174
+ font-family: 'Inter';
175
+ font-style: normal;
176
+ font-weight: 600;
177
+ font-display: swap;
178
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
179
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
180
+ }
181
+ /* latin */
182
+ @font-face {
183
+ font-family: 'Inter';
184
+ font-style: normal;
185
+ font-weight: 600;
186
+ font-display: swap;
187
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
188
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
189
+ }
190
+ /* cyrillic-ext */
191
+ @font-face {
192
+ font-family: 'Inter';
193
+ font-style: normal;
194
+ font-weight: 700;
195
+ font-display: swap;
196
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
197
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
198
+ }
199
+ /* cyrillic */
200
+ @font-face {
201
+ font-family: 'Inter';
202
+ font-style: normal;
203
+ font-weight: 700;
204
+ font-display: swap;
205
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
206
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
207
+ }
208
+ /* greek-ext */
209
+ @font-face {
210
+ font-family: 'Inter';
211
+ font-style: normal;
212
+ font-weight: 700;
213
+ font-display: swap;
214
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
215
+ unicode-range: U+1F00-1FFF;
216
+ }
217
+ /* greek */
218
+ @font-face {
219
+ font-family: 'Inter';
220
+ font-style: normal;
221
+ font-weight: 700;
222
+ font-display: swap;
223
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
224
+ unicode-range: U+0370-03FF;
225
+ }
226
+ /* vietnamese */
227
+ @font-face {
228
+ font-family: 'Inter';
229
+ font-style: normal;
230
+ font-weight: 700;
231
+ font-display: swap;
232
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
233
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
234
+ }
235
+ /* latin-ext */
236
+ @font-face {
237
+ font-family: 'Inter';
238
+ font-style: normal;
239
+ font-weight: 700;
240
+ font-display: swap;
241
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
242
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
243
+ }
244
+ /* latin */
245
+ @font-face {
246
+ font-family: 'Inter';
247
+ font-style: normal;
248
+ font-weight: 700;
249
+ font-display: swap;
250
+ src: url(./inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
251
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
252
+ }
package/dist/fonts/jetbrains-mono.css ADDED
@@ -0,0 +1,7 @@
1
+ @font-face {
2
+ font-family: 'JetBrainsMono';
3
+ font-style: normal;
4
+ font-weight: 400;
5
+ font-display: swap;
6
+ src: url(./jetbrains-mono.woff2) format('woff2');
7
+ }
package/dist/fonts/jetbrains-mono.woff2 ADDED
Binary file
package/dist/index.css ADDED
@@ -0,0 +1,2 @@
1
+ @import url(./fonts/inter.css);
2
+ @import url(./fonts/jetbrains-mono.css);
package/package.json CHANGED
@@ -1,16 +1,17 @@
1
1
  {
2
2
  "name": "@luxonis/depthai-viewer-common",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "Common utilities and components for building a frontend application for DepthAI projects",
5
5
  "license": "ISC",
6
6
  "author": "Luxonis Holding Corporation",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "exports": {
10
- ".": "./dist/index.js"
10
+ ".": "./dist/index.js",
11
+ "./dist/index.css": "./dist/index.css"
11
12
  },
12
13
  "scripts": {
13
- "build": "tsc --build",
14
+ "build": "tsc --build && cp src/index.css ./dist/ && cp -r ./src/fonts ./dist/fonts",
14
15
  "build:clean": "rm -fr ../../node_modules/.tmp/tsconfig-common.tsbuildinfo dist && npm run build",
15
16
  "prepublishOnly": "cd ../../ && npm run deps:check && cd packages/common && npm run build:clean"
16
17
  },
package/src/components/ButtonLink.tsx DELETED
@@ -1,12 +0,0 @@
1
- import type React from 'react';
2
- import { Button, type ButtonProps } from '@luxonis/common-fe-components';
3
- import { Link, type LinkProps } from './Link.js';
4
-
5
- export type ButtonLinkProps = ButtonProps & {
6
- linkProps: LinkProps;
7
- };
8
-
9
- export const ButtonLink: React.FC<ButtonLinkProps> = ({ linkProps, ...buttonProps }) => {
10
- const button = <Button {...buttonProps} />;
11
- return !buttonProps.disabled ? <Link {...linkProps}>{button}</Link> : button;
12
- };
package/src/components/CTASubLabel.tsx DELETED
@@ -1,39 +0,0 @@
1
- import { ExternalLink, Flex, SubLabel } from '@luxonis/common-fe-components';
2
- import { useConnection } from '../providers/ConnectionProvider.js';
3
- import React from 'react';
4
-
5
- const DISPLAY_LABEL_TIMEOUT = 30_000 as const;
6
-
7
- export const CTASubLabel = () => {
8
- const { connected, topics } = useConnection();
9
- const [shouldDisplayLabel, setShouldDisplayLabel] = React.useState(false);
10
- React.useEffect(() => {
11
- if (connected && topics.length === 0 && !shouldDisplayLabel) {
12
- const timeout = setTimeout(() => setShouldDisplayLabel(true), DISPLAY_LABEL_TIMEOUT);
13
- return () => clearTimeout(timeout);
14
- }
15
- }, [connected, topics, shouldDisplayLabel]);
16
-
17
- return (
18
- shouldDisplayLabel && (
19
- <Flex textAlign="center">
20
- <SubLabel
21
- text={
22
- <p>
23
- You can purchase an OAK camera from the{' '}
24
- <ExternalLink raw to="https://shop.luxonis.com" color="light.active">
25
- <SubLabel color="link" text="Luxonis Store" />
26
- </ExternalLink>
27
- . After your purchase,
28
- <br /> explore the{' '}
29
- <ExternalLink raw to="https://rvc4.docs.luxonis.com/hardware" color="light.active">
30
- <SubLabel color="link" text="Luxonis Documentation" />
31
- </ExternalLink>{' '}
32
- for comprehensive setup tutorials to get started.
33
- </p>
34
- }
35
- />
36
- </Flex>
37
- )
38
- );
39
- };
package/src/components/DepthAIEntrypoint.tsx DELETED
@@ -1,20 +0,0 @@
1
- import { DataProvider } from '../providers/DataProvider.js';
2
- import { ConnectionProvider } from '../providers/ConnectionProvider.js';
3
- import { Streams } from './Streams.js';
4
- import type { DAIService } from '../dai-connection/connection.js';
5
-
6
- type DepthAIEntrypointProps = {
7
- activeServices: DAIService[];
8
- };
9
-
10
- export function DepthAIEntrypoint(props: Readonly<DepthAIEntrypointProps>) {
11
- const { activeServices } = props;
12
-
13
- return (
14
- <DataProvider>
15
- <ConnectionProvider activeServices={activeServices}>
16
- <Streams />
17
- </ConnectionProvider>
18
- </DataProvider>
19
- );
20
- }
package/src/components/Link.tsx DELETED
@@ -1,10 +0,0 @@
1
- import { Link as _Link } from 'react-router-dom';
2
- import { useNavigation } from '../hooks/navigation.js';
3
-
4
- export type LinkProps = { to: 'pipeline' | 'streams' };
5
-
6
- export const Link: React.FC<React.PropsWithChildren<LinkProps>> = ({ to, children }) => {
7
- const { makePath } = useNavigation();
8
-
9
- return <_Link to={makePath(to)}>{children}</_Link>;
10
- };
package/src/components/Pipeline.tsx DELETED
@@ -1,35 +0,0 @@
1
- import { Flex, Header } from '@luxonis/common-fe-components';
2
- import { PipelineCanvas } from '@luxonis/depthai-pipeline-lib';
3
- import { useConnection } from '../providers/ConnectionProvider.js';
4
- import React from 'react';
5
-
6
- const PIPELINE_LOADING_TIMEOUT = 60_000;
7
-
8
- export const Pipeline: React.FC = () => {
9
- const { pipeline, isPipelineLoading, setIsPipelineLoading } = useConnection();
10
-
11
- React.useEffect(() => {
12
- if (isPipelineLoading && pipeline === undefined) {
13
- const timeout = setTimeout(() => {
14
- setIsPipelineLoading(false);
15
- }, PIPELINE_LOADING_TIMEOUT);
16
- return () => clearTimeout(timeout);
17
- }
18
- }, [isPipelineLoading, pipeline, setIsPipelineLoading]);
19
-
20
- if (isPipelineLoading) {
21
- return (
22
- <Flex align="center" justify="center" full>
23
- <Header text="Loading pipeline..." />
24
- </Flex>
25
- );
26
- }
27
-
28
- return pipeline === undefined ? (
29
- <Flex align="center" justify="center" full>
30
- <Header text="Pipeline is not available" />
31
- </Flex>
32
- ) : (
33
- <PipelineCanvas pipeline={pipeline} height="full" />
34
- );
35
- };
package/src/components/Resizable.tsx DELETED
@@ -1,56 +0,0 @@
1
- import React from 'react';
2
- import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
3
-
4
- export type ResizableItem = {
5
- component: React.ReactNode;
6
- };
7
-
8
- export type ResizableLayoutProps = {
9
- id?: string | null;
10
- items: ResizableItem[][];
11
- };
12
-
13
- export const ResizableLayout: React.FC<ResizableLayoutProps> = ({
14
- items,
15
- id = 'resizable-layout',
16
- }) => {
17
- const groupStyles: React.CSSProperties = React.useMemo(
18
- () => ({
19
- display: 'flex',
20
- gap: '5px',
21
- }),
22
- [],
23
- );
24
-
25
- const panels = React.useMemo(
26
- () =>
27
- items.map((row, rowIndex) => (
28
- <React.Fragment key={`resizable-row-${rowIndex}`}>
29
- <Panel order={rowIndex}>
30
- <PanelGroup
31
- autoSaveId={id && `${id}-${rowIndex}`}
32
- direction="horizontal"
33
- style={groupStyles}
34
- >
35
- {row.map((item, itemIndex) => (
36
- <React.Fragment key={`resizable-row-${rowIndex}-item-${itemIndex}`}>
37
- <Panel order={itemIndex} style={{ display: 'flex' }}>
38
- {item.component}
39
- </Panel>
40
- {itemIndex !== row.length - 1 && <PanelResizeHandle />}
41
- </React.Fragment>
42
- ))}
43
- </PanelGroup>
44
- </Panel>
45
- {rowIndex !== items.length - 1 && <PanelResizeHandle />}
46
- </React.Fragment>
47
- )),
48
- [groupStyles, id, items],
49
- );
50
-
51
- return (
52
- <PanelGroup autoSaveId={id} direction="vertical" style={groupStyles}>
53
- {panels}
54
- </PanelGroup>
55
- );
56
- };