@uniformdev/mesh-sdk-react 17.7.1-alpha.34 → 18.0.1-alpha.3
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/LICENSE.txt +1 -1
- package/dist/index.d.ts +29 -29
- package/dist/index.esm.js +3550 -153
- package/dist/index.js +3649 -153
- package/dist/index.mjs +3550 -153
- package/package.json +9 -9
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,294 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __export = (target, all) => {
|
|
3
|
+
for (var name in all)
|
|
4
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
// ../../scripts/emotion-jsx-shim.js
|
|
8
|
+
import { jsx } from "@emotion/react";
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
|
|
11
|
+
// src/assets/icons/index.ts
|
|
12
|
+
var icons_exports = {};
|
|
13
|
+
__export(icons_exports, {
|
|
14
|
+
Caution: () => Caution_default,
|
|
15
|
+
Checkmark: () => Checkmark_default,
|
|
16
|
+
ChevronDown: () => ChevronDown_default,
|
|
17
|
+
Close: () => Close_default,
|
|
18
|
+
Danger: () => Danger_default,
|
|
19
|
+
ExclamationPoint: () => ExclamationPoint_default,
|
|
20
|
+
Info: () => Info_default,
|
|
21
|
+
Lightbulb: () => Lightbulb_default,
|
|
22
|
+
MagnifyingGlass: () => MagnifyingGlass_default,
|
|
23
|
+
MaximizeAlt: () => MaximizeAlt_default,
|
|
24
|
+
Minus: () => Minus_default,
|
|
25
|
+
MoreVerticalAlt: () => MoreVerticalAlt_default,
|
|
26
|
+
Plus: () => Plus_default
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// src/assets/icons/Caution.tsx
|
|
30
|
+
import { jsx as jsx2 } from "@emotion/react/jsx-runtime";
|
|
31
|
+
var SvgCaution = (props) => /* @__PURE__ */ jsx2(
|
|
32
|
+
"svg",
|
|
33
|
+
{
|
|
34
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
35
|
+
width: "1em",
|
|
36
|
+
height: "1em",
|
|
37
|
+
viewBox: "0 0 16 16",
|
|
38
|
+
fill: "currentColor",
|
|
39
|
+
...props,
|
|
40
|
+
children: /* @__PURE__ */ jsx2(
|
|
41
|
+
"path",
|
|
42
|
+
{
|
|
43
|
+
fillRule: "evenodd",
|
|
44
|
+
d: "M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
var Caution_default = SvgCaution;
|
|
50
|
+
|
|
51
|
+
// src/assets/icons/Checkmark.tsx
|
|
52
|
+
import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
|
|
53
|
+
var SvgCheckmark = (props) => /* @__PURE__ */ jsx3(
|
|
54
|
+
"svg",
|
|
55
|
+
{
|
|
56
|
+
width: "1em",
|
|
57
|
+
height: "1em",
|
|
58
|
+
viewBox: "0 0 40 40",
|
|
59
|
+
fill: "currentColor",
|
|
60
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
61
|
+
...props,
|
|
62
|
+
children: /* @__PURE__ */ jsx3(
|
|
63
|
+
"path",
|
|
64
|
+
{
|
|
65
|
+
fillRule: "evenodd",
|
|
66
|
+
clipRule: "evenodd",
|
|
67
|
+
d: "M20 39.2A19.2 19.2 0 1 0 20 .8a19.2 19.2 0 0 0 0 38.4Zm8.897-22.303a2.4 2.4 0 0 0-3.394-3.394L17.6 21.407l-3.103-3.104a2.4 2.4 0 0 0-3.394 3.394l4.8 4.8a2.4 2.4 0 0 0 3.394 0l9.6-9.6Z"
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
var Checkmark_default = SvgCheckmark;
|
|
73
|
+
|
|
74
|
+
// src/assets/icons/ChevronDown.tsx
|
|
75
|
+
import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
|
|
76
|
+
var SvgChevronDown = (props) => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: /* @__PURE__ */ jsx4("path", { d: "M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z" }) });
|
|
77
|
+
var ChevronDown_default = SvgChevronDown;
|
|
78
|
+
|
|
79
|
+
// src/assets/icons/Close.tsx
|
|
80
|
+
import { jsx as jsx5, jsxs } from "@emotion/react/jsx-runtime";
|
|
81
|
+
var SvgClose = (props) => /* @__PURE__ */ jsx5(
|
|
82
|
+
"svg",
|
|
83
|
+
{
|
|
84
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
85
|
+
width: "1em",
|
|
86
|
+
height: "1em",
|
|
87
|
+
viewBox: "0 0 19 19",
|
|
88
|
+
fill: "currentColor",
|
|
89
|
+
...props,
|
|
90
|
+
children: /* @__PURE__ */ jsxs("g", { fillRule: "evenodd", children: [
|
|
91
|
+
/* @__PURE__ */ jsx5("path", { d: "M16.578 1.636a1.174 1.174 0 0 1 0 1.66L3.296 16.578a1.174 1.174 0 1 1-1.66-1.66L14.918 1.636a1.174 1.174 0 0 1 1.66 0Z" }),
|
|
92
|
+
/* @__PURE__ */ jsx5("path", { d: "M1.636 1.636a1.174 1.174 0 0 1 1.66 0l13.282 13.282a1.174 1.174 0 1 1-1.66 1.66L1.636 3.296a1.174 1.174 0 0 1 0-1.66Z" })
|
|
93
|
+
] })
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
var Close_default = SvgClose;
|
|
97
|
+
|
|
98
|
+
// src/assets/icons/Danger.tsx
|
|
99
|
+
import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
|
|
100
|
+
var SvgDanger = (props) => /* @__PURE__ */ jsx6(
|
|
101
|
+
"svg",
|
|
102
|
+
{
|
|
103
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
104
|
+
width: "1em",
|
|
105
|
+
height: "1em",
|
|
106
|
+
viewBox: "0 0 12 16",
|
|
107
|
+
fill: "currentColor",
|
|
108
|
+
...props,
|
|
109
|
+
children: /* @__PURE__ */ jsx6(
|
|
110
|
+
"path",
|
|
111
|
+
{
|
|
112
|
+
fillRule: "evenodd",
|
|
113
|
+
d: "M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
var Danger_default = SvgDanger;
|
|
119
|
+
|
|
120
|
+
// src/assets/icons/ExclamationPoint.tsx
|
|
121
|
+
import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
|
|
122
|
+
var SvgExclamationPoint = (props) => /* @__PURE__ */ jsx7(
|
|
123
|
+
"svg",
|
|
124
|
+
{
|
|
125
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
126
|
+
width: "1em",
|
|
127
|
+
height: "1em",
|
|
128
|
+
viewBox: "0 0 14 16",
|
|
129
|
+
fill: "currentColor",
|
|
130
|
+
...props,
|
|
131
|
+
children: /* @__PURE__ */ jsx7(
|
|
132
|
+
"path",
|
|
133
|
+
{
|
|
134
|
+
fillRule: "evenodd",
|
|
135
|
+
d: "M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"
|
|
136
|
+
}
|
|
137
|
+
)
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
var ExclamationPoint_default = SvgExclamationPoint;
|
|
141
|
+
|
|
142
|
+
// src/assets/icons/Info.tsx
|
|
143
|
+
import { jsx as jsx8, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
|
|
144
|
+
var SvgInfo = (props) => /* @__PURE__ */ jsxs2("svg", { width: "1em", height: "1em", fill: "currentColor", ...props, children: [
|
|
145
|
+
/* @__PURE__ */ jsx8(
|
|
146
|
+
"path",
|
|
147
|
+
{
|
|
148
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
149
|
+
d: "M11 10.98a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0v-6zm1-4.929a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
/* @__PURE__ */ jsx8(
|
|
153
|
+
"path",
|
|
154
|
+
{
|
|
155
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
156
|
+
fillRule: "evenodd",
|
|
157
|
+
clipRule: "evenodd",
|
|
158
|
+
d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM4 12a8 8 0 1 0 16 0 8 8 0 0 0-16 0z"
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
] });
|
|
162
|
+
var Info_default = SvgInfo;
|
|
163
|
+
|
|
164
|
+
// src/assets/icons/Lightbulb.tsx
|
|
165
|
+
import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
|
|
166
|
+
var SvgLightbulb = (props) => /* @__PURE__ */ jsx9(
|
|
167
|
+
"svg",
|
|
168
|
+
{
|
|
169
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
170
|
+
width: "1em",
|
|
171
|
+
height: "1em",
|
|
172
|
+
viewBox: "0 0 12 16",
|
|
173
|
+
fill: "currentColor",
|
|
174
|
+
...props,
|
|
175
|
+
children: /* @__PURE__ */ jsx9(
|
|
176
|
+
"path",
|
|
177
|
+
{
|
|
178
|
+
fillRule: "evenodd",
|
|
179
|
+
d: "M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
}
|
|
183
|
+
);
|
|
184
|
+
var Lightbulb_default = SvgLightbulb;
|
|
185
|
+
|
|
186
|
+
// src/assets/icons/MagnifyingGlass.tsx
|
|
187
|
+
import { jsx as jsx10, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
|
|
188
|
+
var SvgMagnifyingGlass = (props) => /* @__PURE__ */ jsxs3(
|
|
189
|
+
"svg",
|
|
190
|
+
{
|
|
191
|
+
width: "1em",
|
|
192
|
+
height: "1em",
|
|
193
|
+
viewBox: "0 0 26 24",
|
|
194
|
+
fill: "currentColor",
|
|
195
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
196
|
+
...props,
|
|
197
|
+
children: [
|
|
198
|
+
/* @__PURE__ */ jsxs3("g", { clipPath: "url(#magnifying-glass_svg__a)", children: [
|
|
199
|
+
/* @__PURE__ */ jsx10("path", { d: "M11.539 0C5.484 0 .559 4.741.559 10.57c0 5.827 4.925 10.568 10.98 10.568 6.055 0 10.98-4.74 10.98-10.569C22.52 4.741 17.595 0 11.54 0Zm0 19.187c-4.937 0-8.954-3.866-8.954-8.618 0-4.752 4.017-8.618 8.954-8.618s8.954 3.866 8.954 8.618c0 4.752-4.017 8.618-8.954 8.618Z" }),
|
|
200
|
+
/* @__PURE__ */ jsx10("path", { d: "m25.196 22.334-5.811-5.593a1.041 1.041 0 0 0-1.434 0 .95.95 0 0 0 0 1.38l5.812 5.593c.198.19.457.286.716.286.26 0 .519-.096.717-.286a.95.95 0 0 0 0-1.38Z" })
|
|
201
|
+
] }),
|
|
202
|
+
/* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsx10("clipPath", { id: "magnifying-glass_svg__a", children: /* @__PURE__ */ jsx10("path", { fill: "#fff", transform: "translate(.558)", d: "M0 0h24.935v24H0z" }) }) })
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
);
|
|
206
|
+
var MagnifyingGlass_default = SvgMagnifyingGlass;
|
|
207
|
+
|
|
208
|
+
// src/assets/icons/MaximizeAlt.tsx
|
|
209
|
+
import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
|
|
210
|
+
var SvgMaximizeAlt = (props) => /* @__PURE__ */ jsx11("svg", { width: "1em", height: "1em", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx11(
|
|
211
|
+
"path",
|
|
212
|
+
{
|
|
213
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
214
|
+
d: "M3 3h6v2H6.462l4.843 4.843-1.415 1.414L5 6.367V9H3V3zm0 18h6v-2H6.376l4.929-4.928-1.415-1.414L5 17.548V15H3v6zm12 0h6v-6h-2v2.524l-4.867-4.866-1.414 1.414L17.647 19H15v2zm6-18h-6v2h2.562l-4.843 4.843 1.414 1.414L19 6.39V9h2V3z"
|
|
215
|
+
}
|
|
216
|
+
) });
|
|
217
|
+
var MaximizeAlt_default = SvgMaximizeAlt;
|
|
218
|
+
|
|
219
|
+
// src/assets/icons/Minus.tsx
|
|
220
|
+
import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
|
|
221
|
+
var SvgMinus = (props) => /* @__PURE__ */ jsx12("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx12("path", { d: "M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z", fill: "currentColor" }) });
|
|
222
|
+
var Minus_default = SvgMinus;
|
|
223
|
+
|
|
224
|
+
// src/assets/icons/MoreVerticalAlt.tsx
|
|
225
|
+
import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
|
|
226
|
+
var SvgMoreVerticalAlt = (props) => /* @__PURE__ */ jsx13("svg", { width: "1em", height: "1em", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx13(
|
|
227
|
+
"path",
|
|
228
|
+
{
|
|
229
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
230
|
+
d: "M14 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm0 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
|
|
231
|
+
}
|
|
232
|
+
) });
|
|
233
|
+
var MoreVerticalAlt_default = SvgMoreVerticalAlt;
|
|
234
|
+
|
|
235
|
+
// src/assets/icons/Plus.tsx
|
|
236
|
+
import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
|
|
237
|
+
var SvgPlus = (props) => /* @__PURE__ */ jsx14(
|
|
238
|
+
"svg",
|
|
239
|
+
{
|
|
240
|
+
width: "1em",
|
|
241
|
+
height: "1em",
|
|
242
|
+
viewBox: "0 0 46 46",
|
|
243
|
+
fill: "currentColor",
|
|
244
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
245
|
+
...props,
|
|
246
|
+
children: /* @__PURE__ */ jsx14("path", { d: "M44.203 21.203H24.797V1.797a1.797 1.797 0 1 0-3.594 0v19.406H1.797a1.797 1.797 0 1 0 0 3.594h19.406v19.406a1.797 1.797 0 0 0 3.594 0V24.797h19.406a1.797 1.797 0 0 0 0-3.594Z" })
|
|
247
|
+
}
|
|
248
|
+
);
|
|
249
|
+
var Plus_default = SvgPlus;
|
|
250
|
+
|
|
251
|
+
// src/components/commerce/ProductPreviewList.tsx
|
|
252
|
+
import { css as css5 } from "@emotion/react";
|
|
253
|
+
import { scrollbarStyles } from "@uniformdev/design-system";
|
|
254
|
+
|
|
255
|
+
// src/components/Image/Image.tsx
|
|
256
|
+
import { jsx as jsx15 } from "@emotion/react/jsx-runtime";
|
|
257
|
+
function Image({ src, alt, className }) {
|
|
258
|
+
const CompImage = src && typeof src !== "string" ? src : null;
|
|
259
|
+
return CompImage ? /* @__PURE__ */ jsx15(CompImage, { className }) : /* @__PURE__ */ jsx15("img", { src, alt, className });
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// src/components/commerce/ProductQuery.tsx
|
|
263
|
+
import { css as css3 } from "@emotion/react";
|
|
264
|
+
import { Input, InputSelect as InputSelect2, mq } from "@uniformdev/design-system";
|
|
265
|
+
import React2, { useContext, useMemo } from "react";
|
|
266
|
+
import { useAsyncFn, useDebounce } from "react-use";
|
|
267
|
+
|
|
268
|
+
// src/components/commerce/SelectionField.tsx
|
|
269
|
+
import { css as css2 } from "@emotion/react";
|
|
270
|
+
import { Icon, InputSelect } from "@uniformdev/design-system";
|
|
271
|
+
import { CgClose } from "react-icons/cg";
|
|
272
|
+
|
|
273
|
+
// src/components/commerce/ResolvableLoadingValue.tsx
|
|
274
|
+
import { Fragment, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
|
|
275
|
+
var ResolvableLoadingValue = ({
|
|
276
|
+
value,
|
|
277
|
+
text,
|
|
278
|
+
loading
|
|
279
|
+
}) => {
|
|
280
|
+
return /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
281
|
+
!!text && text,
|
|
282
|
+
!text && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
283
|
+
loading && `${value} (Loading...)`,
|
|
284
|
+
!loading && `${value} (Unresolvable)`
|
|
285
|
+
] })
|
|
286
|
+
] });
|
|
287
|
+
};
|
|
288
|
+
|
|
289
|
+
// src/components/commerce/styles/SelectField.styles.ts
|
|
290
|
+
import { css } from "@emotion/react";
|
|
291
|
+
var selectionFieldBtnContainer = css`
|
|
2
292
|
align-items: center;
|
|
3
293
|
background: var(--gray-100);
|
|
4
294
|
border: 1px solid var(--gray-300);
|
|
@@ -7,66 +297,459 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
7
297
|
justify-content: space-between;
|
|
8
298
|
margin-bottom: var(--spacing-sm);
|
|
9
299
|
margin-right: var(--spacing-sm);
|
|
10
|
-
|
|
300
|
+
`;
|
|
301
|
+
var selectionFieldBtnLabel = css`
|
|
11
302
|
color: var(--gray-800);
|
|
12
303
|
padding: var(--spacing-3);
|
|
13
|
-
|
|
304
|
+
`;
|
|
305
|
+
var selectionFieldBtn = css`
|
|
14
306
|
border: none;
|
|
15
307
|
border-left: 1px solid var(--gray-300);
|
|
16
308
|
background: var(--gray-100);
|
|
17
309
|
padding: var(--spacing-3);
|
|
18
|
-
`;
|
|
310
|
+
`;
|
|
311
|
+
|
|
312
|
+
// src/components/commerce/SelectionField.tsx
|
|
313
|
+
import { jsx as jsx16, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
|
|
314
|
+
var SelectionField = ({
|
|
315
|
+
id,
|
|
316
|
+
label,
|
|
317
|
+
loading,
|
|
318
|
+
selectedValues,
|
|
319
|
+
values,
|
|
320
|
+
onAdd,
|
|
321
|
+
onRemove
|
|
322
|
+
}) => {
|
|
323
|
+
var _a;
|
|
324
|
+
const availableValues = (_a = values == null ? void 0 : values.filter((brand) => !(selectedValues == null ? void 0 : selectedValues.includes(brand.id.toString())))) != null ? _a : [];
|
|
325
|
+
const handleRemoveClick = (e, value) => {
|
|
326
|
+
e.preventDefault();
|
|
327
|
+
onRemove(value);
|
|
328
|
+
};
|
|
329
|
+
return /* @__PURE__ */ jsxs5("div", { children: [
|
|
330
|
+
/* @__PURE__ */ jsx16(
|
|
331
|
+
InputSelect,
|
|
332
|
+
{
|
|
333
|
+
id,
|
|
334
|
+
name: id,
|
|
335
|
+
label,
|
|
336
|
+
onChange: (e) => onAdd(e.target.value),
|
|
337
|
+
disabled: loading,
|
|
338
|
+
options: [
|
|
339
|
+
{ value: "", label: "Add..." },
|
|
340
|
+
...availableValues.map((option) => {
|
|
341
|
+
return {
|
|
342
|
+
value: option.id,
|
|
343
|
+
label: option.name || option.id
|
|
344
|
+
};
|
|
345
|
+
})
|
|
346
|
+
],
|
|
347
|
+
value: "",
|
|
348
|
+
css: Array.isArray(selectedValues) && selectedValues.length > 0 ? css2`
|
|
19
349
|
margin-bottom: var(--spacing-base);
|
|
20
|
-
|
|
350
|
+
` : ""
|
|
351
|
+
}
|
|
352
|
+
),
|
|
353
|
+
selectedValues == null ? void 0 : selectedValues.map((selectedValue) => {
|
|
354
|
+
var _a2;
|
|
355
|
+
return /* @__PURE__ */ jsxs5("div", { css: selectionFieldBtnContainer, children: [
|
|
356
|
+
/* @__PURE__ */ jsx16("span", { css: selectionFieldBtnLabel, children: /* @__PURE__ */ jsx16(
|
|
357
|
+
ResolvableLoadingValue,
|
|
358
|
+
{
|
|
359
|
+
value: selectedValue,
|
|
360
|
+
loading,
|
|
361
|
+
text: (_a2 = values.find((v) => v.id === selectedValue)) == null ? void 0 : _a2.name
|
|
362
|
+
}
|
|
363
|
+
) }),
|
|
364
|
+
/* @__PURE__ */ jsx16(
|
|
365
|
+
"button",
|
|
366
|
+
{
|
|
367
|
+
css: selectionFieldBtn,
|
|
368
|
+
title: "remove",
|
|
369
|
+
onClick: (e) => handleRemoveClick(e, selectedValue),
|
|
370
|
+
children: /* @__PURE__ */ jsx16(Icon, { icon: CgClose, iconColor: "currentColor", size: 20 })
|
|
371
|
+
}
|
|
372
|
+
)
|
|
373
|
+
] }, selectedValue);
|
|
374
|
+
})
|
|
375
|
+
] });
|
|
376
|
+
};
|
|
377
|
+
|
|
378
|
+
// src/components/commerce/ProductQuery.tsx
|
|
379
|
+
import { jsx as jsx17, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
|
|
380
|
+
var initialState = {
|
|
381
|
+
count: 1,
|
|
382
|
+
categories: [],
|
|
383
|
+
brand: "",
|
|
384
|
+
keyword: "",
|
|
385
|
+
sort: "date_modified",
|
|
386
|
+
sortOrder: "desc"
|
|
387
|
+
};
|
|
388
|
+
var ProductQuery = ({
|
|
389
|
+
value,
|
|
390
|
+
setValue,
|
|
391
|
+
brands,
|
|
392
|
+
categories,
|
|
393
|
+
loading,
|
|
394
|
+
categoriesLoading,
|
|
395
|
+
brandsLoading,
|
|
396
|
+
logoIcon,
|
|
397
|
+
onGetProducts,
|
|
398
|
+
sortOptions,
|
|
399
|
+
sortOrderOptions,
|
|
400
|
+
categoryLabel = "Product Category",
|
|
401
|
+
brandLabel = "Brand",
|
|
402
|
+
disableBrands,
|
|
403
|
+
restrictToSingleCategory = false
|
|
404
|
+
}) => {
|
|
405
|
+
var _a, _b, _c;
|
|
406
|
+
const setFormState = async (state) => {
|
|
407
|
+
setValue({
|
|
408
|
+
...initialState,
|
|
409
|
+
...value || {},
|
|
410
|
+
...state
|
|
411
|
+
});
|
|
412
|
+
};
|
|
413
|
+
const formState = useMemo(() => {
|
|
414
|
+
return {
|
|
415
|
+
...initialState,
|
|
416
|
+
...value || {}
|
|
417
|
+
};
|
|
418
|
+
}, [value]);
|
|
419
|
+
const [getProductsState, getProductsFn] = useAsyncFn(
|
|
420
|
+
async (options) => {
|
|
421
|
+
return await onGetProducts(options);
|
|
422
|
+
},
|
|
423
|
+
[onGetProducts]
|
|
424
|
+
);
|
|
425
|
+
useDebounce(
|
|
426
|
+
async () => {
|
|
427
|
+
await getProductsFn({
|
|
428
|
+
brand: formState.brand,
|
|
429
|
+
categories: formState.categories,
|
|
430
|
+
keyword: formState.keyword,
|
|
431
|
+
sort: formState.sort,
|
|
432
|
+
sortOrder: formState.sortOrder,
|
|
433
|
+
count: formState.count
|
|
434
|
+
});
|
|
435
|
+
},
|
|
436
|
+
250,
|
|
437
|
+
[formState]
|
|
438
|
+
);
|
|
439
|
+
const categoryOptions = useMemo(() => {
|
|
440
|
+
const options = [];
|
|
441
|
+
categories == null ? void 0 : categories.forEach((category) => {
|
|
442
|
+
const categoryOptions2 = traverseCategory(category, void 0);
|
|
443
|
+
options.push(...categoryOptions2);
|
|
444
|
+
});
|
|
445
|
+
return options;
|
|
446
|
+
}, [categories]);
|
|
447
|
+
const singleChoiceCategoryOptions = useMemo(() => {
|
|
448
|
+
return [
|
|
449
|
+
{
|
|
450
|
+
value: "",
|
|
451
|
+
label: "All categories"
|
|
452
|
+
},
|
|
453
|
+
...categoryOptions.map((option) => ({
|
|
454
|
+
label: option.name,
|
|
455
|
+
value: option.id
|
|
456
|
+
}))
|
|
457
|
+
];
|
|
458
|
+
}, [categoryOptions]);
|
|
459
|
+
const brandOptions = useMemo(() => {
|
|
460
|
+
return (brands == null ? void 0 : brands.map((b) => ({
|
|
461
|
+
id: b.id.toString(),
|
|
462
|
+
name: b.name
|
|
463
|
+
}))) || [];
|
|
464
|
+
}, [brands]);
|
|
465
|
+
const handleAddProductCategory = (category) => {
|
|
466
|
+
if (!category) {
|
|
467
|
+
return;
|
|
468
|
+
}
|
|
469
|
+
const categories2 = (value == null ? void 0 : value.categories) || [];
|
|
470
|
+
setFormState({
|
|
471
|
+
categories: [...categories2, category]
|
|
472
|
+
});
|
|
473
|
+
};
|
|
474
|
+
const handleRemoveProductCategory = (category) => {
|
|
475
|
+
var _a2;
|
|
476
|
+
setFormState({
|
|
477
|
+
categories: (_a2 = value == null ? void 0 : value.categories) == null ? void 0 : _a2.filter((c) => c !== category)
|
|
478
|
+
});
|
|
479
|
+
};
|
|
480
|
+
const handleBrandChange = (e) => {
|
|
481
|
+
setFormState({
|
|
482
|
+
brand: e.target.value
|
|
483
|
+
});
|
|
484
|
+
};
|
|
485
|
+
const handleCountChange = (value2) => {
|
|
486
|
+
const localValue = value2 || 1;
|
|
487
|
+
setFormState({ count: localValue });
|
|
488
|
+
};
|
|
489
|
+
if (loading) {
|
|
490
|
+
return /* @__PURE__ */ jsx17("div", { children: "Loading..." });
|
|
491
|
+
}
|
|
492
|
+
return /* @__PURE__ */ jsx17(ProductQueryContext.Provider, { value: { categories, logoIcon }, children: /* @__PURE__ */ jsxs6(
|
|
493
|
+
"div",
|
|
494
|
+
{
|
|
495
|
+
css: css3`
|
|
21
496
|
> :not(:last-child) {
|
|
22
497
|
margin-bottom: var(--spacing-md);
|
|
23
498
|
}
|
|
24
|
-
`,
|
|
499
|
+
`,
|
|
500
|
+
children: [
|
|
501
|
+
restrictToSingleCategory ? /* @__PURE__ */ jsx17(
|
|
502
|
+
InputSelect2,
|
|
503
|
+
{
|
|
504
|
+
id: "selection-field-product-category",
|
|
505
|
+
label: categoryLabel,
|
|
506
|
+
disabled: loading,
|
|
507
|
+
value: (_b = (_a = formState.categories) == null ? void 0 : _a[0]) != null ? _b : "",
|
|
508
|
+
options: singleChoiceCategoryOptions,
|
|
509
|
+
onChange: (e) => {
|
|
510
|
+
setFormState({
|
|
511
|
+
categories: e.target.value === "" ? [] : [e.target.value]
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
) : /* @__PURE__ */ jsx17(
|
|
516
|
+
SelectionField,
|
|
517
|
+
{
|
|
518
|
+
loading: categoriesLoading || false,
|
|
519
|
+
id: "selection-field-product-category",
|
|
520
|
+
label: categoryLabel,
|
|
521
|
+
onAdd: handleAddProductCategory,
|
|
522
|
+
onRemove: handleRemoveProductCategory,
|
|
523
|
+
selectedValues: formState.categories,
|
|
524
|
+
values: categoryOptions
|
|
525
|
+
}
|
|
526
|
+
),
|
|
527
|
+
/* @__PURE__ */ jsxs6(
|
|
528
|
+
"div",
|
|
529
|
+
{
|
|
530
|
+
css: css3`
|
|
25
531
|
display: flex;
|
|
26
532
|
flex-wrap: wrap;
|
|
27
533
|
column-gap: var(--spacing-lg);
|
|
28
534
|
row-gap: var(--spacing-md);
|
|
29
|
-
${
|
|
535
|
+
${mq("md")} {
|
|
30
536
|
flex-wrap: nowrap;
|
|
31
537
|
}
|
|
32
|
-
`,
|
|
538
|
+
`,
|
|
539
|
+
children: [
|
|
540
|
+
disableBrands ? null : /* @__PURE__ */ jsx17(
|
|
541
|
+
"div",
|
|
542
|
+
{
|
|
543
|
+
css: css3`
|
|
33
544
|
width: 50%;
|
|
34
|
-
`,
|
|
545
|
+
`,
|
|
546
|
+
children: /* @__PURE__ */ jsx17(
|
|
547
|
+
InputSelect2,
|
|
548
|
+
{
|
|
549
|
+
id: "brand",
|
|
550
|
+
name: "brand",
|
|
551
|
+
label: brandLabel,
|
|
552
|
+
disabled: brandsLoading,
|
|
553
|
+
value: formState.brand,
|
|
554
|
+
onChange: handleBrandChange,
|
|
555
|
+
options: [
|
|
556
|
+
{ value: "", label: "Choose..." },
|
|
557
|
+
...brandOptions.map((brand) => {
|
|
558
|
+
return { value: brand.id, label: brand.name };
|
|
559
|
+
})
|
|
560
|
+
]
|
|
561
|
+
}
|
|
562
|
+
)
|
|
563
|
+
}
|
|
564
|
+
),
|
|
565
|
+
/* @__PURE__ */ jsx17(
|
|
566
|
+
"div",
|
|
567
|
+
{
|
|
568
|
+
css: css3`
|
|
35
569
|
flex-grow: 1;
|
|
36
570
|
position: relative;
|
|
37
|
-
`,
|
|
571
|
+
`,
|
|
572
|
+
children: /* @__PURE__ */ jsx17(
|
|
573
|
+
Input,
|
|
574
|
+
{
|
|
575
|
+
id: "keyword-search",
|
|
576
|
+
name: "keyword-search",
|
|
577
|
+
label: "Keyword",
|
|
578
|
+
value: formState.keyword,
|
|
579
|
+
placeholder: "Enter keyword",
|
|
580
|
+
onChange: (e) => setFormState({ keyword: e.target.value })
|
|
581
|
+
}
|
|
582
|
+
)
|
|
583
|
+
}
|
|
584
|
+
)
|
|
585
|
+
]
|
|
586
|
+
}
|
|
587
|
+
),
|
|
588
|
+
/* @__PURE__ */ jsxs6(
|
|
589
|
+
"div",
|
|
590
|
+
{
|
|
591
|
+
css: css3`
|
|
38
592
|
display: flex;
|
|
39
593
|
flex-wrap: wrap;
|
|
40
594
|
column-gap: var(--spacing-lg);
|
|
41
595
|
row-gap: var(--spacing-md);
|
|
42
|
-
${
|
|
596
|
+
${mq("md")} {
|
|
43
597
|
flex-wrap: nowrap;
|
|
44
598
|
}
|
|
45
|
-
`,
|
|
599
|
+
`,
|
|
600
|
+
children: [
|
|
601
|
+
/* @__PURE__ */ jsxs6(
|
|
602
|
+
"div",
|
|
603
|
+
{
|
|
604
|
+
css: css3`
|
|
46
605
|
width: 100%;
|
|
47
|
-
${
|
|
606
|
+
${mq("md")} {
|
|
48
607
|
width: 33.333333%;
|
|
49
608
|
}
|
|
50
609
|
position: relative;
|
|
51
|
-
`,
|
|
610
|
+
`,
|
|
611
|
+
children: [
|
|
612
|
+
/* @__PURE__ */ jsx17(
|
|
613
|
+
Input,
|
|
614
|
+
{
|
|
615
|
+
id: "count",
|
|
616
|
+
name: "count",
|
|
617
|
+
type: "number",
|
|
618
|
+
min: 1,
|
|
619
|
+
step: 1,
|
|
620
|
+
value: formState.count,
|
|
621
|
+
onChange: (e) => handleCountChange(e.target.valueAsNumber),
|
|
622
|
+
label: "Count"
|
|
623
|
+
}
|
|
624
|
+
),
|
|
625
|
+
/* @__PURE__ */ jsxs6(
|
|
626
|
+
"div",
|
|
627
|
+
{
|
|
628
|
+
css: css3`
|
|
52
629
|
position: absolute;
|
|
53
630
|
bottom: var(--spacing-sm);
|
|
54
631
|
right: var(--spacing-sm);
|
|
55
632
|
display: flex;
|
|
56
633
|
gap: var(--spacing-sm);
|
|
57
|
-
`,
|
|
634
|
+
`,
|
|
635
|
+
children: [
|
|
636
|
+
/* @__PURE__ */ jsx17(
|
|
637
|
+
CountButton,
|
|
638
|
+
{
|
|
639
|
+
onCountChange: () => handleCountChange(formState.count - 1),
|
|
640
|
+
countIcon: "decrement",
|
|
641
|
+
disabled: formState.count === 1
|
|
642
|
+
}
|
|
643
|
+
),
|
|
644
|
+
/* @__PURE__ */ jsx17(
|
|
645
|
+
CountButton,
|
|
646
|
+
{
|
|
647
|
+
onCountChange: () => handleCountChange(formState.count + 1),
|
|
648
|
+
countIcon: "increment"
|
|
649
|
+
}
|
|
650
|
+
)
|
|
651
|
+
]
|
|
652
|
+
}
|
|
653
|
+
)
|
|
654
|
+
]
|
|
655
|
+
}
|
|
656
|
+
),
|
|
657
|
+
Array.isArray(sortOptions) && sortOptions.length > 0 ? /* @__PURE__ */ jsx17(
|
|
658
|
+
"div",
|
|
659
|
+
{
|
|
660
|
+
css: css3`
|
|
58
661
|
flex-grow: 1;
|
|
59
|
-
${
|
|
662
|
+
${mq("md")} {
|
|
60
663
|
width: 33.333333%;
|
|
61
664
|
}
|
|
62
|
-
`,
|
|
665
|
+
`,
|
|
666
|
+
children: /* @__PURE__ */ jsx17(
|
|
667
|
+
InputSelect2,
|
|
668
|
+
{
|
|
669
|
+
id: "sort",
|
|
670
|
+
name: "sort",
|
|
671
|
+
label: "Sort",
|
|
672
|
+
value: formState.sort,
|
|
673
|
+
onChange: (e) => setFormState({ sort: e.target.value }),
|
|
674
|
+
options: [
|
|
675
|
+
{ value: "", label: "Select a sort" },
|
|
676
|
+
...sortOptions.map((option) => {
|
|
677
|
+
return {
|
|
678
|
+
value: option.sortKey,
|
|
679
|
+
label: option.name
|
|
680
|
+
};
|
|
681
|
+
})
|
|
682
|
+
]
|
|
683
|
+
}
|
|
684
|
+
)
|
|
685
|
+
}
|
|
686
|
+
) : null,
|
|
687
|
+
Array.isArray(sortOrderOptions) && sortOrderOptions.length > 0 ? /* @__PURE__ */ jsx17(
|
|
688
|
+
"div",
|
|
689
|
+
{
|
|
690
|
+
css: css3`
|
|
63
691
|
flex-grow: 1;
|
|
64
|
-
`,
|
|
692
|
+
`,
|
|
693
|
+
children: /* @__PURE__ */ jsx17(
|
|
694
|
+
InputSelect2,
|
|
695
|
+
{
|
|
696
|
+
id: "sort-order",
|
|
697
|
+
name: "sort-order",
|
|
698
|
+
label: "Sort Order",
|
|
699
|
+
value: formState.sortOrder,
|
|
700
|
+
onChange: (e) => setFormState({ sortOrder: e.target.value }),
|
|
701
|
+
options: sortOrderOptions.map((option) => {
|
|
702
|
+
return {
|
|
703
|
+
value: option.sortOrderKey,
|
|
704
|
+
label: option.name
|
|
705
|
+
};
|
|
706
|
+
})
|
|
707
|
+
}
|
|
708
|
+
)
|
|
709
|
+
}
|
|
710
|
+
) : null
|
|
711
|
+
]
|
|
712
|
+
}
|
|
713
|
+
),
|
|
714
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
|
715
|
+
/* @__PURE__ */ jsx17(
|
|
716
|
+
"h3",
|
|
717
|
+
{
|
|
718
|
+
css: css3`
|
|
65
719
|
font-size: var(--fs-md);
|
|
66
720
|
line-height: var(--spacing-md);
|
|
67
721
|
font-weight: var(--fw-bold);
|
|
68
722
|
margin-bottom: var(--spacing-xs);
|
|
69
|
-
`,
|
|
723
|
+
`,
|
|
724
|
+
children: "Result Preview"
|
|
725
|
+
}
|
|
726
|
+
),
|
|
727
|
+
/* @__PURE__ */ jsx17(ProductPreviewList, { products: (_c = getProductsState.value) == null ? void 0 : _c.products })
|
|
728
|
+
] })
|
|
729
|
+
]
|
|
730
|
+
}
|
|
731
|
+
) });
|
|
732
|
+
};
|
|
733
|
+
function traverseCategory(result, parent) {
|
|
734
|
+
var _a;
|
|
735
|
+
const results = [];
|
|
736
|
+
const namePrefix = parent ? `${parent.name} > ` : "";
|
|
737
|
+
const value = {
|
|
738
|
+
id: result.id.toString(),
|
|
739
|
+
name: `${namePrefix}${result.name}`
|
|
740
|
+
};
|
|
741
|
+
results.push(value);
|
|
742
|
+
(_a = result.children) == null ? void 0 : _a.forEach((child) => {
|
|
743
|
+
const childValues = traverseCategory(child, value);
|
|
744
|
+
results.push(...childValues);
|
|
745
|
+
});
|
|
746
|
+
return results;
|
|
747
|
+
}
|
|
748
|
+
function CountButton({ onCountChange, countIcon, disabled }) {
|
|
749
|
+
return /* @__PURE__ */ jsx17(
|
|
750
|
+
"button",
|
|
751
|
+
{
|
|
752
|
+
css: css3`
|
|
70
753
|
width: 2.25rem;
|
|
71
754
|
height: 2.25rem;
|
|
72
755
|
border: 1px solid var(--gray-300);
|
|
@@ -78,17 +761,45 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
78
761
|
&:hover {
|
|
79
762
|
background-color: var(--gray-200);
|
|
80
763
|
}
|
|
81
|
-
${
|
|
764
|
+
${disabled ? css3`
|
|
82
765
|
cursor: not-allowed;
|
|
83
766
|
opacity: 0.3;
|
|
84
|
-
|
|
85
|
-
`,
|
|
767
|
+
` : ""}
|
|
768
|
+
`,
|
|
769
|
+
onClick: onCountChange,
|
|
770
|
+
disabled,
|
|
771
|
+
children: countIcon === "increment" ? /* @__PURE__ */ jsx17(
|
|
772
|
+
Plus_default,
|
|
773
|
+
{
|
|
774
|
+
css: css3`
|
|
86
775
|
width: 1rem;
|
|
87
776
|
height: 1rem;
|
|
88
|
-
`
|
|
777
|
+
`
|
|
778
|
+
}
|
|
779
|
+
) : /* @__PURE__ */ jsx17(
|
|
780
|
+
Minus_default,
|
|
781
|
+
{
|
|
782
|
+
css: css3`
|
|
89
783
|
width: 1rem;
|
|
90
784
|
height: 1rem;
|
|
91
|
-
`
|
|
785
|
+
`
|
|
786
|
+
}
|
|
787
|
+
)
|
|
788
|
+
}
|
|
789
|
+
);
|
|
790
|
+
}
|
|
791
|
+
var ProductQueryContext = React2.createContext(void 0);
|
|
792
|
+
var useProductQueryContext = () => {
|
|
793
|
+
const context = useContext(ProductQueryContext);
|
|
794
|
+
if (!context) {
|
|
795
|
+
throw new Error("useProductQueryContext must be used within a <ProductQueryContext> provider");
|
|
796
|
+
}
|
|
797
|
+
return context;
|
|
798
|
+
};
|
|
799
|
+
|
|
800
|
+
// src/components/commerce/styles/ProductPreviewList.styles.ts
|
|
801
|
+
import { css as css4 } from "@emotion/react";
|
|
802
|
+
var productPreviewListLinkBtn = css4`
|
|
92
803
|
align-items: center;
|
|
93
804
|
background: var(--white);
|
|
94
805
|
border-radius: var(--rounded-base);
|
|
@@ -103,65 +814,175 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
103
814
|
&:hover {
|
|
104
815
|
background: var(--gray-50);
|
|
105
816
|
}
|
|
106
|
-
|
|
817
|
+
`;
|
|
818
|
+
var productPreviewListSmallText = css4`
|
|
107
819
|
font-size: var(--fs-sm);
|
|
108
|
-
|
|
820
|
+
`;
|
|
821
|
+
var productPreviewListIcon = css4`
|
|
109
822
|
width: 1rem;
|
|
110
823
|
height: 1rem;
|
|
111
|
-
|
|
824
|
+
`;
|
|
825
|
+
var productPreviewListDetailsText = css4`
|
|
112
826
|
margin-right: var(--spacing-lg);
|
|
113
827
|
font-size: var(--fs-sm);
|
|
114
|
-
|
|
828
|
+
`;
|
|
829
|
+
var productPreviewListItem = css4`
|
|
115
830
|
border: 1px solid var(--gray-200);
|
|
116
831
|
border-radius: var(--rounded-md);
|
|
117
832
|
background: var(--gray-50);
|
|
118
833
|
margin: var(--spacing-base) 0;
|
|
119
|
-
|
|
834
|
+
`;
|
|
835
|
+
var productPreviewListItemDetailsContainer = css4`
|
|
120
836
|
align-items: center;
|
|
121
837
|
display: flex;
|
|
122
838
|
flex-grow: 1;
|
|
123
839
|
gap: var(--spacing-base);
|
|
124
840
|
padding: var(--spacing-sm);
|
|
125
841
|
margin-right: var(--spacing-sm);
|
|
126
|
-
|
|
842
|
+
`;
|
|
843
|
+
var productPreviewListImage = css4`
|
|
127
844
|
background: var(--gray-200);
|
|
128
845
|
width: 3.5rem;
|
|
129
846
|
height: 3.5rem;
|
|
130
847
|
object-fit: cover;
|
|
131
|
-
|
|
848
|
+
`;
|
|
849
|
+
var productPreviewListImageDefault = css4`
|
|
132
850
|
background: var(--gray-100);
|
|
133
851
|
height: 3.5rem;
|
|
134
852
|
width: 3.5rem;
|
|
135
|
-
|
|
853
|
+
`;
|
|
854
|
+
var productPreviewListTitle = css4`
|
|
136
855
|
margin-top: 0;
|
|
137
856
|
font-weight: var(--fw-bold);
|
|
138
857
|
font-size: var(--fs-sm);
|
|
139
858
|
width: calc(100% / 3);
|
|
140
|
-
|
|
859
|
+
`;
|
|
860
|
+
var productPreviewListCategoryText = css4`
|
|
141
861
|
display: block;
|
|
142
862
|
font-weight: var(--fw-regular);
|
|
143
|
-
`;
|
|
863
|
+
`;
|
|
864
|
+
|
|
865
|
+
// src/components/commerce/ProductPreviewList.tsx
|
|
866
|
+
import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
|
|
867
|
+
var ProductPreviewList = ({
|
|
868
|
+
products
|
|
869
|
+
}) => {
|
|
870
|
+
const { categories, logoIcon } = useProductQueryContext();
|
|
871
|
+
return /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
872
|
+
/* @__PURE__ */ jsxs7(
|
|
873
|
+
"p",
|
|
874
|
+
{
|
|
875
|
+
css: css5`
|
|
144
876
|
margin-bottom: var(--spacing-base);
|
|
145
|
-
`,
|
|
877
|
+
`,
|
|
878
|
+
children: [
|
|
879
|
+
"Matching ",
|
|
880
|
+
(products == null ? void 0 : products.length) || 0,
|
|
881
|
+
" products"
|
|
882
|
+
]
|
|
883
|
+
}
|
|
884
|
+
),
|
|
885
|
+
/* @__PURE__ */ jsx18(
|
|
886
|
+
"ul",
|
|
887
|
+
{
|
|
888
|
+
css: [
|
|
889
|
+
css5`
|
|
146
890
|
max-height: 24rem;
|
|
147
891
|
overflow-x: auto;
|
|
148
|
-
`,
|
|
892
|
+
`,
|
|
893
|
+
scrollbarStyles
|
|
894
|
+
],
|
|
895
|
+
children: products == null ? void 0 : products.map((product, index) => {
|
|
896
|
+
var _a, _b;
|
|
897
|
+
const [category] = (product == null ? void 0 : product.categories) || [];
|
|
898
|
+
const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
|
|
899
|
+
return /* @__PURE__ */ jsx18("li", { css: productPreviewListItem, children: /* @__PURE__ */ jsxs7(
|
|
900
|
+
"div",
|
|
901
|
+
{
|
|
902
|
+
css: productPreviewListItemDetailsContainer,
|
|
903
|
+
"data-test-id": `product-item-${product.sku || product.id}`,
|
|
904
|
+
children: [
|
|
905
|
+
product.thumbnailUrl ? /* @__PURE__ */ jsx18(
|
|
906
|
+
"img",
|
|
907
|
+
{
|
|
908
|
+
src: product.thumbnailUrl,
|
|
909
|
+
alt: typeof product.title === "string" ? product.title : product.name || `Product ${index}`,
|
|
910
|
+
css: productPreviewListImage,
|
|
911
|
+
"data-test-id": "product-image"
|
|
912
|
+
}
|
|
913
|
+
) : /* @__PURE__ */ jsx18("div", { css: productPreviewListImageDefault }),
|
|
914
|
+
/* @__PURE__ */ jsxs7("h4", { css: productPreviewListTitle, "data-test-id": "product-name", children: [
|
|
915
|
+
product.title || product.name,
|
|
916
|
+
categoryName && /* @__PURE__ */ jsx18("span", { css: productPreviewListCategoryText, children: categoryName })
|
|
917
|
+
] }),
|
|
918
|
+
product && /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
919
|
+
/* @__PURE__ */ jsxs7("p", { css: productPreviewListDetailsText, "data-test-id": "product-sku", children: [
|
|
920
|
+
"SKU: ",
|
|
921
|
+
product.sku || product.id,
|
|
922
|
+
/* @__PURE__ */ jsx18("br", {})
|
|
923
|
+
] }),
|
|
924
|
+
product.price !== void 0 ? /* @__PURE__ */ jsxs7("p", { css: productPreviewListDetailsText, "data-test-id": "product-price", children: [
|
|
925
|
+
"Price: ",
|
|
926
|
+
product.price
|
|
927
|
+
] }) : null,
|
|
928
|
+
product.editLink || product.url ? /* @__PURE__ */ jsxs7(
|
|
929
|
+
"a",
|
|
930
|
+
{
|
|
931
|
+
css: productPreviewListLinkBtn,
|
|
932
|
+
href: (_b = product.editLink) != null ? _b : product.url,
|
|
933
|
+
title: `Go to ${product.title || product.name}`,
|
|
934
|
+
target: "_blank",
|
|
935
|
+
rel: "noopener noreferrer",
|
|
936
|
+
"data-test-id": "edit-product-button",
|
|
937
|
+
children: [
|
|
938
|
+
/* @__PURE__ */ jsx18("span", { css: productPreviewListSmallText, children: "Edit" }),
|
|
939
|
+
logoIcon ? /* @__PURE__ */ jsx18(Image, { src: logoIcon, alt: "Logo", css: productPreviewListIcon }) : null
|
|
940
|
+
]
|
|
941
|
+
}
|
|
942
|
+
) : null
|
|
943
|
+
] })
|
|
944
|
+
]
|
|
945
|
+
}
|
|
946
|
+
) }, `product-${product.id}`);
|
|
947
|
+
})
|
|
948
|
+
}
|
|
949
|
+
)
|
|
950
|
+
] });
|
|
951
|
+
};
|
|
952
|
+
|
|
953
|
+
// src/components/commerce/ProductSearch.tsx
|
|
954
|
+
import { Callout as Callout2 } from "@uniformdev/design-system";
|
|
955
|
+
import React6, { useContext as useContext2, useMemo as useMemo2, useRef as useRef5 } from "react";
|
|
956
|
+
import { useAsync, useAsyncFn as useAsyncFn2 } from "react-use";
|
|
957
|
+
|
|
958
|
+
// src/components/EntrySearch/DefaultSearchRow.tsx
|
|
959
|
+
import { css as css7 } from "@emotion/react";
|
|
960
|
+
import { useEffect, useRef, useState } from "react";
|
|
961
|
+
|
|
962
|
+
// src/components/EntrySearch/styles/DefaultSearchRow.styles.ts
|
|
963
|
+
import { css as css6 } from "@emotion/react";
|
|
964
|
+
var searchRowContainer = css6`
|
|
149
965
|
cursor: pointer;
|
|
150
966
|
padding: var(--spacing-sm);
|
|
151
967
|
position: relative;
|
|
152
968
|
transition: background-color var(--duration-fast) var(--timing-ease-out),
|
|
153
969
|
color var(--duration-fast) var(--timing-ease-out);
|
|
154
|
-
|
|
970
|
+
`;
|
|
971
|
+
var searchRowContainerWithPopover = css6`
|
|
155
972
|
padding-right: var(--spacing-lg);
|
|
156
|
-
|
|
973
|
+
`;
|
|
974
|
+
var searchRowContainerActive = css6`
|
|
157
975
|
background: var(--brand-secondary-3);
|
|
158
976
|
color: var(--white);
|
|
159
|
-
|
|
977
|
+
`;
|
|
978
|
+
var searchRowTextSmall = css6`
|
|
160
979
|
font-size: var(--fs-xs);
|
|
161
|
-
|
|
980
|
+
`;
|
|
981
|
+
var searchRowText = css6`
|
|
162
982
|
font-weight: var(--fw-bold);
|
|
163
983
|
margin-right: var(--spacing-sm);
|
|
164
|
-
|
|
984
|
+
`;
|
|
985
|
+
var searchRowPopover = css6`
|
|
165
986
|
background: var(--white);
|
|
166
987
|
border-left: 4px solid var(--brand-secondary-3);
|
|
167
988
|
border-radius: var(--rounded-base);
|
|
@@ -173,20 +994,128 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
173
994
|
right: var(--spacing-xl);
|
|
174
995
|
z-index: var(--z-10);
|
|
175
996
|
width: max-content;
|
|
176
|
-
|
|
997
|
+
`;
|
|
998
|
+
var searchRowBtn = css6`
|
|
177
999
|
position: absolute;
|
|
178
1000
|
inset: 0 var(--spacing-sm) 0 auto;
|
|
179
|
-
`;
|
|
1001
|
+
`;
|
|
1002
|
+
|
|
1003
|
+
// src/components/EntrySearch/DefaultSearchRow.tsx
|
|
1004
|
+
import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
|
|
1005
|
+
var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
|
|
1006
|
+
const buttonRef = useRef(null);
|
|
1007
|
+
const popoverRef = useRef(null);
|
|
1008
|
+
const [showInfo, setShowInfo] = useState(false);
|
|
1009
|
+
useEffect(() => {
|
|
1010
|
+
function handleClickOutside(event) {
|
|
1011
|
+
if (buttonRef.current && !buttonRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
|
|
1012
|
+
setShowInfo(false);
|
|
1013
|
+
}
|
|
1014
|
+
}
|
|
1015
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1016
|
+
return () => {
|
|
1017
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1018
|
+
};
|
|
1019
|
+
}, [popoverRef]);
|
|
1020
|
+
const click = (event) => {
|
|
1021
|
+
event.stopPropagation();
|
|
1022
|
+
setShowInfo(!showInfo);
|
|
1023
|
+
};
|
|
1024
|
+
return /* @__PURE__ */ jsxs8(
|
|
1025
|
+
"div",
|
|
1026
|
+
{
|
|
1027
|
+
css: [
|
|
1028
|
+
searchRowContainer,
|
|
1029
|
+
isSelected ? searchRowContainerActive : void 0,
|
|
1030
|
+
result.popoverData ? searchRowContainerWithPopover : void 0
|
|
1031
|
+
],
|
|
1032
|
+
"data-value": result.id,
|
|
1033
|
+
role: "option",
|
|
1034
|
+
tabIndex: -1,
|
|
1035
|
+
onClick: () => triggerSelection(),
|
|
1036
|
+
children: [
|
|
1037
|
+
result.title,
|
|
1038
|
+
result.popoverData && isSelected ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
1039
|
+
/* @__PURE__ */ jsx19(
|
|
1040
|
+
"button",
|
|
1041
|
+
{
|
|
1042
|
+
type: "button",
|
|
1043
|
+
ref: buttonRef,
|
|
1044
|
+
css: searchRowBtn,
|
|
1045
|
+
"aria-controls": "path-details",
|
|
1046
|
+
onClick: (e) => click(e),
|
|
1047
|
+
"aria-expanded": showInfo,
|
|
1048
|
+
children: /* @__PURE__ */ jsx19(Info_default, { width: 24, height: 24 })
|
|
1049
|
+
}
|
|
1050
|
+
),
|
|
1051
|
+
/* @__PURE__ */ jsxs8(
|
|
1052
|
+
"div",
|
|
1053
|
+
{
|
|
1054
|
+
id: "path-details",
|
|
1055
|
+
"aria-hidden": !showInfo,
|
|
1056
|
+
ref: popoverRef,
|
|
1057
|
+
css: [
|
|
1058
|
+
searchRowPopover,
|
|
1059
|
+
showInfo ? css7`
|
|
180
1060
|
visibility: visible;
|
|
181
|
-
|
|
1061
|
+
` : css7`
|
|
182
1062
|
visibility: hidden;
|
|
183
|
-
`
|
|
1063
|
+
`
|
|
1064
|
+
],
|
|
1065
|
+
children: [
|
|
1066
|
+
result.metadata && Object.entries(result.metadata).map(([key, value], index) => /* @__PURE__ */ jsxs8("div", { css: searchRowTextSmall, children: [
|
|
1067
|
+
/* @__PURE__ */ jsxs8("span", { css: searchRowText, children: [
|
|
1068
|
+
key,
|
|
1069
|
+
":"
|
|
1070
|
+
] }),
|
|
1071
|
+
value
|
|
1072
|
+
] }, index)),
|
|
1073
|
+
Object.entries(result.popoverData).map(([key, value], index) => /* @__PURE__ */ jsxs8("div", { css: searchRowTextSmall, children: [
|
|
1074
|
+
/* @__PURE__ */ jsxs8("span", { css: searchRowText, children: [
|
|
1075
|
+
key,
|
|
1076
|
+
":"
|
|
1077
|
+
] }),
|
|
1078
|
+
value
|
|
1079
|
+
] }, index))
|
|
1080
|
+
]
|
|
1081
|
+
}
|
|
1082
|
+
)
|
|
1083
|
+
] }) : null
|
|
1084
|
+
]
|
|
1085
|
+
},
|
|
1086
|
+
result.id
|
|
1087
|
+
);
|
|
1088
|
+
};
|
|
1089
|
+
|
|
1090
|
+
// src/components/EntrySearch/DefaultSelectedItem.tsx
|
|
1091
|
+
import { css as css9 } from "@emotion/react";
|
|
1092
|
+
import { Icon as Icon2 } from "@uniformdev/design-system";
|
|
1093
|
+
import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
|
|
1094
|
+
import { CgClose as CgClose2, CgInfo } from "react-icons/cg";
|
|
1095
|
+
import { format as timeAgo } from "timeago.js";
|
|
1096
|
+
|
|
1097
|
+
// src/utils/openWindowWithCloseCallback.ts
|
|
1098
|
+
function openWindowWithCloseCallback(href, callback) {
|
|
1099
|
+
const openedNewWindow = window.open(href, "_blank");
|
|
1100
|
+
const interval = setInterval(() => {
|
|
1101
|
+
if (openedNewWindow == null ? void 0 : openedNewWindow.closed) {
|
|
1102
|
+
clearInterval(interval);
|
|
1103
|
+
callback();
|
|
1104
|
+
}
|
|
1105
|
+
}, 500);
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
// src/components/EntrySearch/styles/DefaultSelectedItem.styles.ts
|
|
1109
|
+
import { css as css8 } from "@emotion/react";
|
|
1110
|
+
import { mq as mq2 } from "@uniformdev/design-system";
|
|
1111
|
+
var selectedItemContainer = css8`
|
|
184
1112
|
border: 1px solid var(--gray-200);
|
|
185
1113
|
background: var(--gray-50);
|
|
186
1114
|
border-radius: var(--rounded-base);
|
|
187
1115
|
display: flex;
|
|
188
1116
|
width: 100%;
|
|
189
|
-
|
|
1117
|
+
`;
|
|
1118
|
+
var selectedItemInner = css8`
|
|
190
1119
|
align-items: center;
|
|
191
1120
|
display: flex;
|
|
192
1121
|
flex-grow: 1;
|
|
@@ -194,22 +1123,27 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
194
1123
|
margin-inline: 0 var(--spacing-sm);
|
|
195
1124
|
padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-lg);
|
|
196
1125
|
position: relative;
|
|
197
|
-
|
|
1126
|
+
`;
|
|
1127
|
+
var selectedItemDetails = css8`
|
|
198
1128
|
flex-grow: 1;
|
|
199
|
-
|
|
1129
|
+
`;
|
|
1130
|
+
var selectedItemCopy = css8`
|
|
200
1131
|
align-items: start;
|
|
201
1132
|
display: inline-flex;
|
|
202
1133
|
position: relative;
|
|
203
|
-
|
|
1134
|
+
`;
|
|
1135
|
+
var selectedItemTitle = css8`
|
|
204
1136
|
color: var(--brand-secondary-1);
|
|
205
1137
|
font-size: var(--fs-base);
|
|
206
1138
|
font-weight: var(--fw-bold);
|
|
207
1139
|
line-height: 1;
|
|
208
1140
|
margin: 0;
|
|
209
|
-
|
|
1141
|
+
`;
|
|
1142
|
+
var selectedItemIcon = css8`
|
|
210
1143
|
width: 1.5rem;
|
|
211
1144
|
height: 1.5rem;
|
|
212
|
-
|
|
1145
|
+
`;
|
|
1146
|
+
var selectItemPopover = css8`
|
|
213
1147
|
background: var(--white);
|
|
214
1148
|
border-radius: var(--rounded-base);
|
|
215
1149
|
border-left: 4px solid var(--brand-secondary-3);
|
|
@@ -218,22 +1152,26 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
218
1152
|
padding: var(--spacing-base);
|
|
219
1153
|
z-index: var(--z-10);
|
|
220
1154
|
width: max-content;
|
|
221
|
-
|
|
1155
|
+
`;
|
|
1156
|
+
var selectItemSmallText = css8`
|
|
222
1157
|
font-size: var(--fs-sm);
|
|
223
|
-
|
|
1158
|
+
`;
|
|
1159
|
+
var selectItemPopoverLabel = css8`
|
|
224
1160
|
font-weight: var(--fw-bold);
|
|
225
1161
|
margin-right: var(--spacing-sm);
|
|
226
|
-
|
|
1162
|
+
`;
|
|
1163
|
+
var selectItemLinkContainer = css8`
|
|
227
1164
|
display: flex;
|
|
228
1165
|
flex-direction: column;
|
|
229
1166
|
gap: var(--spacing-sm);
|
|
230
1167
|
|
|
231
|
-
${
|
|
1168
|
+
${mq2("md")} {
|
|
232
1169
|
flex-direction: row;
|
|
233
1170
|
min-width: 200px;
|
|
234
1171
|
justify-content: end;
|
|
235
1172
|
}
|
|
236
|
-
|
|
1173
|
+
`;
|
|
1174
|
+
var selectItemLinkBtn = css8`
|
|
237
1175
|
align-items: center;
|
|
238
1176
|
background: var(--white);
|
|
239
1177
|
border-radius: var(--rounded-base);
|
|
@@ -248,29 +1186,273 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
248
1186
|
&:hover {
|
|
249
1187
|
background: var(--gray-50);
|
|
250
1188
|
}
|
|
251
|
-
`;
|
|
1189
|
+
`;
|
|
1190
|
+
|
|
1191
|
+
// src/components/EntrySearch/DefaultSelectedItem.tsx
|
|
1192
|
+
import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
|
|
1193
|
+
var DefaultSelectedItem = ({
|
|
1194
|
+
selectedItem,
|
|
1195
|
+
logoIcon,
|
|
1196
|
+
onDeselect,
|
|
1197
|
+
onEditClosed
|
|
1198
|
+
}) => {
|
|
1199
|
+
var _a;
|
|
1200
|
+
const buttonRef = useRef2(null);
|
|
1201
|
+
const popoverRef = useRef2(null);
|
|
1202
|
+
const [showInfo, setShowInfo] = useState2(false);
|
|
1203
|
+
useEffect2(() => {
|
|
1204
|
+
const eventHandler = (event) => {
|
|
1205
|
+
if (buttonRef.current && !buttonRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
|
|
1206
|
+
setShowInfo(false);
|
|
1207
|
+
}
|
|
1208
|
+
};
|
|
1209
|
+
const resizeHandler = () => {
|
|
1210
|
+
setShowInfo(false);
|
|
1211
|
+
};
|
|
1212
|
+
window.addEventListener("resize", resizeHandler, true);
|
|
1213
|
+
document.addEventListener("scroll", eventHandler, true);
|
|
1214
|
+
document.addEventListener("mousedown", eventHandler);
|
|
1215
|
+
return () => {
|
|
1216
|
+
window.removeEventListener("resize", resizeHandler, true);
|
|
1217
|
+
document.removeEventListener("scroll", eventHandler, true);
|
|
1218
|
+
document.removeEventListener("mousedown", eventHandler);
|
|
1219
|
+
};
|
|
1220
|
+
}, [popoverRef]);
|
|
1221
|
+
const popoverClick = () => {
|
|
1222
|
+
var _a2;
|
|
1223
|
+
setShowInfo(!showInfo);
|
|
1224
|
+
if (popoverRef.current && buttonRef.current) {
|
|
1225
|
+
const buttonPos = (_a2 = buttonRef == null ? void 0 : buttonRef.current) == null ? void 0 : _a2.getBoundingClientRect();
|
|
1226
|
+
const popoverWidth = popoverRef.current.offsetWidth;
|
|
1227
|
+
popoverRef.current.style["top"] = `${buttonPos.top + 30}px`;
|
|
1228
|
+
popoverRef.current.style["left"] = `${buttonPos.left - popoverWidth + 30}px`;
|
|
1229
|
+
}
|
|
1230
|
+
};
|
|
1231
|
+
return /* @__PURE__ */ jsx20("div", { css: selectedItemContainer, children: /* @__PURE__ */ jsxs9("div", { css: selectedItemInner, children: [
|
|
1232
|
+
/* @__PURE__ */ jsxs9("div", { css: selectedItemDetails, children: [
|
|
1233
|
+
/* @__PURE__ */ jsxs9("div", { css: selectedItemCopy, children: [
|
|
1234
|
+
/* @__PURE__ */ jsx20(
|
|
1235
|
+
"h4",
|
|
1236
|
+
{
|
|
1237
|
+
css: [
|
|
1238
|
+
selectedItemTitle,
|
|
1239
|
+
selectedItem.popoverData ? css9`
|
|
252
1240
|
margin-bottom: var(--spacing-sm);
|
|
253
|
-
|
|
1241
|
+
` : ""
|
|
1242
|
+
],
|
|
1243
|
+
title: `ID: ${selectedItem.id}`,
|
|
1244
|
+
"data-test-id": "entry-id",
|
|
1245
|
+
children: selectedItem.title || selectedItem.id || ""
|
|
1246
|
+
}
|
|
1247
|
+
),
|
|
1248
|
+
selectedItem.popoverData ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
|
|
1249
|
+
/* @__PURE__ */ jsx20(
|
|
1250
|
+
"button",
|
|
1251
|
+
{
|
|
1252
|
+
type: "button",
|
|
1253
|
+
ref: buttonRef,
|
|
1254
|
+
css: css9`
|
|
254
1255
|
margin: calc(var(--spacing-xs) * -1) 0 calc(var(--spacing-xs) * -1) var(--spacing-sm);
|
|
255
|
-
`,
|
|
1256
|
+
`,
|
|
1257
|
+
"aria-controls": "path-details",
|
|
1258
|
+
"aria-expanded": showInfo,
|
|
1259
|
+
onClick: popoverClick,
|
|
1260
|
+
children: /* @__PURE__ */ jsx20(
|
|
1261
|
+
Icon2,
|
|
1262
|
+
{
|
|
1263
|
+
icon: CgInfo,
|
|
1264
|
+
iconColor: "gray",
|
|
1265
|
+
size: 24,
|
|
1266
|
+
css: css9`
|
|
256
1267
|
opacity: var(--opacity-75);
|
|
257
|
-
`
|
|
1268
|
+
`
|
|
1269
|
+
}
|
|
1270
|
+
)
|
|
1271
|
+
}
|
|
1272
|
+
),
|
|
1273
|
+
/* @__PURE__ */ jsx20(
|
|
1274
|
+
"div",
|
|
1275
|
+
{
|
|
1276
|
+
id: "path-details",
|
|
1277
|
+
"aria-hidden": !showInfo,
|
|
1278
|
+
ref: popoverRef,
|
|
1279
|
+
css: [
|
|
1280
|
+
selectItemPopover,
|
|
1281
|
+
showInfo ? css9`
|
|
258
1282
|
visibility: visible;
|
|
259
|
-
|
|
1283
|
+
` : css9`
|
|
260
1284
|
visibility: hidden;
|
|
261
|
-
`
|
|
1285
|
+
`
|
|
1286
|
+
],
|
|
1287
|
+
children: Object.entries(selectedItem.popoverData).map(([key, value], index) => /* @__PURE__ */ jsxs9("div", { css: selectItemSmallText, children: [
|
|
1288
|
+
/* @__PURE__ */ jsxs9("span", { css: selectItemPopoverLabel, children: [
|
|
1289
|
+
key,
|
|
1290
|
+
":"
|
|
1291
|
+
] }),
|
|
1292
|
+
value
|
|
1293
|
+
] }, index))
|
|
1294
|
+
}
|
|
1295
|
+
)
|
|
1296
|
+
] }) : null
|
|
1297
|
+
] }),
|
|
1298
|
+
selectedItem.createdDate && /* @__PURE__ */ jsxs9("div", { css: selectItemSmallText, children: [
|
|
1299
|
+
/* @__PURE__ */ jsx20("span", { css: selectItemPopoverLabel, children: "Created:" }),
|
|
1300
|
+
timeAgo((_a = selectedItem.createdDate) != null ? _a : 0)
|
|
1301
|
+
] }),
|
|
1302
|
+
selectedItem.metadata ? Object.entries(selectedItem.metadata).filter(([key]) => ["type", "status"].includes(key.toLocaleLowerCase())).map(([key, value]) => {
|
|
1303
|
+
return /* @__PURE__ */ jsxs9(
|
|
1304
|
+
"div",
|
|
1305
|
+
{
|
|
1306
|
+
css: [
|
|
1307
|
+
selectItemSmallText,
|
|
1308
|
+
css9`
|
|
262
1309
|
order: 1;
|
|
263
|
-
`
|
|
1310
|
+
`
|
|
1311
|
+
],
|
|
1312
|
+
children: [
|
|
1313
|
+
/* @__PURE__ */ jsxs9("span", { css: selectItemPopoverLabel, children: [
|
|
1314
|
+
key,
|
|
1315
|
+
":"
|
|
1316
|
+
] }),
|
|
1317
|
+
value
|
|
1318
|
+
]
|
|
1319
|
+
},
|
|
1320
|
+
key
|
|
1321
|
+
);
|
|
1322
|
+
}) : null,
|
|
1323
|
+
selectedItem.metadata ? Object.entries(selectedItem.metadata).filter(([key]) => !["type", "status"].includes(key.toLocaleLowerCase())).map(([key, value]) => {
|
|
1324
|
+
return /* @__PURE__ */ jsxs9(
|
|
1325
|
+
"div",
|
|
1326
|
+
{
|
|
1327
|
+
css: [
|
|
1328
|
+
selectItemSmallText,
|
|
1329
|
+
css9`
|
|
264
1330
|
order: 1;
|
|
265
|
-
`
|
|
1331
|
+
`
|
|
1332
|
+
],
|
|
1333
|
+
children: [
|
|
1334
|
+
/* @__PURE__ */ jsxs9(
|
|
1335
|
+
"span",
|
|
1336
|
+
{
|
|
1337
|
+
css: [
|
|
1338
|
+
selectItemPopoverLabel,
|
|
1339
|
+
css9`
|
|
266
1340
|
order: 1;
|
|
267
|
-
`
|
|
1341
|
+
`
|
|
1342
|
+
],
|
|
1343
|
+
children: [
|
|
1344
|
+
key,
|
|
1345
|
+
":"
|
|
1346
|
+
]
|
|
1347
|
+
}
|
|
1348
|
+
),
|
|
1349
|
+
value
|
|
1350
|
+
]
|
|
1351
|
+
},
|
|
1352
|
+
key
|
|
1353
|
+
);
|
|
1354
|
+
}) : null
|
|
1355
|
+
] }),
|
|
1356
|
+
/* @__PURE__ */ jsxs9("div", { css: selectItemLinkContainer, children: [
|
|
1357
|
+
selectedItem.editLink ? /* @__PURE__ */ jsxs9(
|
|
1358
|
+
"a",
|
|
1359
|
+
{
|
|
1360
|
+
href: selectedItem.editLink,
|
|
1361
|
+
title: "edit",
|
|
1362
|
+
rel: "noopener noreferrer",
|
|
1363
|
+
target: "_blank",
|
|
1364
|
+
onClick: (e) => {
|
|
1365
|
+
if (onEditClosed) {
|
|
1366
|
+
openWindowWithCloseCallback(e.currentTarget.href, () => onEditClosed(selectedItem));
|
|
1367
|
+
e.preventDefault();
|
|
1368
|
+
}
|
|
1369
|
+
},
|
|
1370
|
+
css: selectItemLinkBtn,
|
|
1371
|
+
children: [
|
|
1372
|
+
/* @__PURE__ */ jsx20("span", { css: selectItemSmallText, children: "Edit" }),
|
|
1373
|
+
/* @__PURE__ */ jsx20(Image, { src: logoIcon, css: selectedItemIcon, alt: "Logo" })
|
|
1374
|
+
]
|
|
1375
|
+
}
|
|
1376
|
+
) : null,
|
|
1377
|
+
/* @__PURE__ */ jsxs9(
|
|
1378
|
+
"button",
|
|
1379
|
+
{
|
|
1380
|
+
type: "button",
|
|
1381
|
+
onClick: () => {
|
|
1382
|
+
onDeselect(selectedItem);
|
|
1383
|
+
},
|
|
1384
|
+
css: selectItemLinkBtn,
|
|
1385
|
+
children: [
|
|
1386
|
+
/* @__PURE__ */ jsx20("span", { css: selectItemSmallText, children: "Unlink" }),
|
|
1387
|
+
/* @__PURE__ */ jsx20(Icon2, { icon: CgClose2, iconColor: "red", size: 16 })
|
|
1388
|
+
]
|
|
1389
|
+
}
|
|
1390
|
+
)
|
|
1391
|
+
] })
|
|
1392
|
+
] }) }, selectedItem.id);
|
|
1393
|
+
};
|
|
1394
|
+
|
|
1395
|
+
// src/components/EntrySearch/EntrySearch.tsx
|
|
1396
|
+
import { css as css11 } from "@emotion/react";
|
|
1397
|
+
import {
|
|
1398
|
+
Button,
|
|
1399
|
+
Callout,
|
|
1400
|
+
InputKeywordSearch,
|
|
1401
|
+
InputSelect as InputSelect3,
|
|
1402
|
+
LoadingIndicator,
|
|
1403
|
+
LoadingOverlay,
|
|
1404
|
+
Menu,
|
|
1405
|
+
MenuItem,
|
|
1406
|
+
scrollbarStyles as scrollbarStyles2
|
|
1407
|
+
} from "@uniformdev/design-system";
|
|
1408
|
+
import * as React5 from "react";
|
|
1409
|
+
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
|
|
1410
|
+
import { useDebounce as useDebounce2 } from "react-use";
|
|
1411
|
+
import { v4 } from "uuid";
|
|
1412
|
+
|
|
1413
|
+
// src/hooks/useLoadingDelay.ts
|
|
1414
|
+
import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
|
|
1415
|
+
function useLoadingDelay(loading, { delay = 500, minDuration = 200 } = {
|
|
1416
|
+
delay: 500,
|
|
1417
|
+
minDuration: 200
|
|
1418
|
+
}) {
|
|
1419
|
+
const [state, setState] = useState3("IDLE");
|
|
1420
|
+
const timeout = useRef3(void 0);
|
|
1421
|
+
useEffect3(() => {
|
|
1422
|
+
if (loading && state === "IDLE") {
|
|
1423
|
+
clearTimeout(timeout.current);
|
|
1424
|
+
timeout.current = setTimeout(() => {
|
|
1425
|
+
if (!loading) {
|
|
1426
|
+
return setState("IDLE");
|
|
1427
|
+
}
|
|
1428
|
+
timeout.current = setTimeout(() => {
|
|
1429
|
+
setState("EXPIRE");
|
|
1430
|
+
}, minDuration);
|
|
1431
|
+
setState("DISPLAY");
|
|
1432
|
+
}, delay);
|
|
1433
|
+
setState("DELAY");
|
|
1434
|
+
}
|
|
1435
|
+
if (!loading && state !== "DISPLAY") {
|
|
1436
|
+
clearTimeout(timeout.current);
|
|
1437
|
+
setState("IDLE");
|
|
1438
|
+
}
|
|
1439
|
+
}, [loading, state, delay, minDuration]);
|
|
1440
|
+
useEffect3(() => {
|
|
1441
|
+
return () => clearTimeout(timeout.current);
|
|
1442
|
+
}, []);
|
|
1443
|
+
return state === "DISPLAY" || state === "EXPIRE";
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
// src/components/EntrySearch/styles/EntrySearch.styles.ts
|
|
1447
|
+
import { css as css10 } from "@emotion/react";
|
|
1448
|
+
var entrySearchWrapper = css10`
|
|
268
1449
|
background: var(--white);
|
|
269
1450
|
border: 1px solid var(--gray-300);
|
|
270
1451
|
border-radius: var(--rounded-base);
|
|
271
1452
|
padding: calc(var(--spacing-base) - 0.25rem) var(--spacing-sm);
|
|
272
1453
|
margin-bottom: var(--spacing-base);
|
|
273
|
-
|
|
1454
|
+
`;
|
|
1455
|
+
var entrySearchBtn = css10`
|
|
274
1456
|
align-items: center;
|
|
275
1457
|
display: flex;
|
|
276
1458
|
position: relative;
|
|
@@ -278,7 +1460,8 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
278
1460
|
width: 100%;
|
|
279
1461
|
background-color: transparent;
|
|
280
1462
|
border: 0;
|
|
281
|
-
|
|
1463
|
+
`;
|
|
1464
|
+
var entrySearchLoadMoreBtn = css10`
|
|
282
1465
|
color: var(--brand-secondary-1);
|
|
283
1466
|
display: block;
|
|
284
1467
|
font-weight: var(--fw-bold);
|
|
@@ -294,15 +1477,18 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
294
1477
|
background: var(--gray-100);
|
|
295
1478
|
outline: none;
|
|
296
1479
|
}
|
|
297
|
-
|
|
1480
|
+
`;
|
|
1481
|
+
var entrySearchConfig = css10`
|
|
298
1482
|
background: var(--white);
|
|
299
1483
|
border: 1px solid var(--gray-300);
|
|
300
1484
|
border-radius: var(--rounded-base);
|
|
301
1485
|
padding: calc(var(--spacing-base) - 0.25rem) var(--spacing-base);
|
|
302
1486
|
display: block;
|
|
303
|
-
|
|
1487
|
+
`;
|
|
1488
|
+
var entrySearchConfigHidden = css10`
|
|
304
1489
|
display: none;
|
|
305
|
-
|
|
1490
|
+
`;
|
|
1491
|
+
var entrySearchResultList = css10`
|
|
306
1492
|
overflow-y: auto;
|
|
307
1493
|
height: 16rem;
|
|
308
1494
|
margin-bottom: var(--spacing-base);
|
|
@@ -311,26 +1497,31 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
311
1497
|
& > :not(:last-child) {
|
|
312
1498
|
border-bottom: 1px solid var(--gray-200);
|
|
313
1499
|
}
|
|
314
|
-
|
|
1500
|
+
`;
|
|
1501
|
+
var entrySearchSelectInput = css10`
|
|
315
1502
|
background-color: var(--gray-50);
|
|
316
1503
|
max-width: 33.33%;
|
|
317
|
-
|
|
1504
|
+
`;
|
|
1505
|
+
var entrySearchSelectIcon = css10`
|
|
318
1506
|
align-items: center;
|
|
319
1507
|
display: flex;
|
|
320
1508
|
position: absolute;
|
|
321
1509
|
inset: 0 0 0 auto;
|
|
322
1510
|
pointer-events: none;
|
|
323
1511
|
padding-right: var(--spacing-sm);
|
|
324
|
-
|
|
1512
|
+
`;
|
|
1513
|
+
var entrySearchSelectImg = css10`
|
|
325
1514
|
color: var(--brand-secondary-1);
|
|
326
1515
|
width: 1.25rem;
|
|
327
1516
|
height: 1.25rem;
|
|
328
1517
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
329
1518
|
transform: rotate(0);
|
|
330
|
-
|
|
1519
|
+
`;
|
|
1520
|
+
var entrySearchSelectOption = css10`
|
|
331
1521
|
background: var(--white);
|
|
332
1522
|
color: var(--brand-secondary-1);
|
|
333
|
-
|
|
1523
|
+
`;
|
|
1524
|
+
var draggableContainer = css10`
|
|
334
1525
|
position: relative;
|
|
335
1526
|
margin-block: var(--spacing-sm) 0;
|
|
336
1527
|
|
|
@@ -342,96 +1533,552 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
342
1533
|
left: auto !important;
|
|
343
1534
|
top: auto !important;
|
|
344
1535
|
}
|
|
345
|
-
|
|
1536
|
+
`;
|
|
1537
|
+
var draggableIconWrapper = css10`
|
|
346
1538
|
align-items: center;
|
|
347
1539
|
display: flex;
|
|
348
1540
|
position: absolute;
|
|
349
1541
|
inset: 0 auto 0 0;
|
|
350
1542
|
margin-block: auto;
|
|
351
1543
|
opacity: 0;
|
|
352
|
-
|
|
1544
|
+
`;
|
|
1545
|
+
var draggableIcon = css10`
|
|
353
1546
|
color: var(--brand-secondary-1);
|
|
354
|
-
|
|
1547
|
+
`;
|
|
1548
|
+
var draggableIconOffset = css10`
|
|
355
1549
|
position: absolute;
|
|
356
1550
|
left: 0.375rem;
|
|
357
|
-
|
|
1551
|
+
`;
|
|
1552
|
+
var badgeIcon = css10`
|
|
358
1553
|
width: calc(var(--spacing-lg) + var(--spacing-xs));
|
|
359
1554
|
height: calc(var(--spacing-lg) + var(--spacing-xs));
|
|
360
|
-
`;
|
|
1555
|
+
`;
|
|
1556
|
+
|
|
1557
|
+
// src/components/EntrySearch/EntrySearch.tsx
|
|
1558
|
+
import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
|
|
1559
|
+
var DefaultNoResults = ({ searchText, selectedContentType }) => {
|
|
1560
|
+
let message = "No content found";
|
|
1561
|
+
if (selectedContentType && selectedContentType !== "any") {
|
|
1562
|
+
message = `No ${selectedContentType} content was found`;
|
|
1563
|
+
}
|
|
1564
|
+
if (searchText) {
|
|
1565
|
+
message = `${message} for keyword '${searchText}'.`;
|
|
1566
|
+
}
|
|
1567
|
+
return /* @__PURE__ */ jsx21(Callout, { type: "info", children: message });
|
|
1568
|
+
};
|
|
1569
|
+
var EntrySearch = ({
|
|
1570
|
+
search,
|
|
1571
|
+
results,
|
|
1572
|
+
contentTypes,
|
|
1573
|
+
selectedItems,
|
|
1574
|
+
logoIcon,
|
|
1575
|
+
select,
|
|
1576
|
+
multiSelect,
|
|
1577
|
+
multiSelectId,
|
|
1578
|
+
rowComponent,
|
|
1579
|
+
selectedItemComponent,
|
|
1580
|
+
totalResults,
|
|
1581
|
+
cursor,
|
|
1582
|
+
resultsLoading,
|
|
1583
|
+
requireContentType,
|
|
1584
|
+
onAddNew,
|
|
1585
|
+
onEditClosed,
|
|
1586
|
+
onCancel,
|
|
1587
|
+
noResultsComponent,
|
|
1588
|
+
helpComponent,
|
|
1589
|
+
onSort,
|
|
1590
|
+
typeSelectorLabel = "Content Type Select",
|
|
1591
|
+
typeSelectorAllTypesOptionText = "All content types",
|
|
1592
|
+
loadingIndicatorDelay = 1e3
|
|
1593
|
+
}) => {
|
|
1594
|
+
var _a, _b, _c;
|
|
1595
|
+
const pageSize = 5;
|
|
1596
|
+
const resolveInitialContentTypeState = () => {
|
|
1597
|
+
if (!requireContentType) {
|
|
1598
|
+
return "any";
|
|
1599
|
+
}
|
|
1600
|
+
if (Array.isArray(contentTypes) && contentTypes.length > 0) {
|
|
1601
|
+
return contentTypes[0].id;
|
|
1602
|
+
}
|
|
1603
|
+
return "";
|
|
1604
|
+
};
|
|
1605
|
+
const [textInput, setTextInput] = React5.useState("");
|
|
1606
|
+
const [contentTypeSelected, setContentTypeSelected] = React5.useState(resolveInitialContentTypeState);
|
|
1607
|
+
const [listOpen, setListOpen] = React5.useState(false);
|
|
1608
|
+
const [selectedListItems, setSelectedListItems] = React5.useState([]);
|
|
1609
|
+
const [loadingMore, setLoadingMore] = React5.useState(false);
|
|
1610
|
+
const listBoxId = React5.useRef(`x${v4()}`);
|
|
1611
|
+
useDebounce2(
|
|
1612
|
+
() => {
|
|
1613
|
+
search(textInput, {
|
|
1614
|
+
count: pageSize,
|
|
1615
|
+
offset: 0,
|
|
1616
|
+
contentType: contentTypeSelected === "any" ? void 0 : contentTypeSelected
|
|
1617
|
+
});
|
|
1618
|
+
},
|
|
1619
|
+
300,
|
|
1620
|
+
[textInput, contentTypeSelected]
|
|
1621
|
+
);
|
|
1622
|
+
const showLoadingOverlay = useLoadingDelay(resultsLoading, { delay: loadingIndicatorDelay });
|
|
1623
|
+
const handleListItemSelect = (selectedResult) => {
|
|
1624
|
+
if (selectedListItems.some((item) => item.id === selectedResult.id)) {
|
|
1625
|
+
setSelectedListItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
|
|
1626
|
+
} else {
|
|
1627
|
+
if (!multiSelect) {
|
|
1628
|
+
setSelectedListItems([selectedResult]);
|
|
1629
|
+
} else {
|
|
1630
|
+
setSelectedListItems((prev) => [...prev, selectedResult]);
|
|
1631
|
+
}
|
|
1632
|
+
}
|
|
1633
|
+
};
|
|
1634
|
+
const selectedItemsHash = selectedItems == null ? void 0 : selectedItems.map((item) => item.id + item.title).join(",");
|
|
1635
|
+
React5.useEffect(
|
|
1636
|
+
() => {
|
|
1637
|
+
if (Array.isArray(selectedItems)) {
|
|
1638
|
+
setSelectedListItems(selectedItems);
|
|
1639
|
+
}
|
|
1640
|
+
},
|
|
1641
|
+
[selectedItemsHash]
|
|
1642
|
+
);
|
|
1643
|
+
const resetForm = () => {
|
|
1644
|
+
setContentTypeSelected(resolveInitialContentTypeState());
|
|
1645
|
+
setTextInput("");
|
|
1646
|
+
setSelectedListItems((selectedItems == null ? void 0 : selectedItems.length) ? selectedItems : []);
|
|
1647
|
+
};
|
|
1648
|
+
const handleListButtonClick = () => {
|
|
1649
|
+
setListOpen((prevState) => !prevState);
|
|
1650
|
+
if (!listOpen) {
|
|
1651
|
+
resetForm();
|
|
1652
|
+
}
|
|
1653
|
+
};
|
|
1654
|
+
const handleDeselect = (result) => {
|
|
1655
|
+
const newValue = (selectedListItems == null ? void 0 : selectedListItems.filter((product) => product.id !== result.id)) || [];
|
|
1656
|
+
setSelectedListItems(newValue);
|
|
1657
|
+
select(newValue, "");
|
|
1658
|
+
};
|
|
1659
|
+
const handleAcceptClick = (e) => {
|
|
1660
|
+
e.preventDefault();
|
|
1661
|
+
select(selectedListItems, contentTypeSelected);
|
|
1662
|
+
setListOpen(false);
|
|
1663
|
+
};
|
|
1664
|
+
const handleCancelClick = (e) => {
|
|
1665
|
+
e.preventDefault();
|
|
1666
|
+
setListOpen(false);
|
|
1667
|
+
if (onCancel)
|
|
1668
|
+
onCancel();
|
|
1669
|
+
};
|
|
1670
|
+
const handleLoadMoreClick = () => {
|
|
1671
|
+
search(textInput, {
|
|
1672
|
+
count: pageSize,
|
|
1673
|
+
offset: (results == null ? void 0 : results.length) || 0,
|
|
1674
|
+
contentType: contentTypeSelected === "any" ? void 0 : contentTypeSelected,
|
|
1675
|
+
cursor
|
|
1676
|
+
});
|
|
1677
|
+
setLoadingMore(true);
|
|
1678
|
+
const timeout = setTimeout(() => {
|
|
1679
|
+
setLoadingMore(false);
|
|
1680
|
+
}, 750);
|
|
1681
|
+
return () => clearTimeout(timeout);
|
|
1682
|
+
};
|
|
1683
|
+
const showSelectedItems = selectedItems == null ? void 0 : selectedItems.length;
|
|
1684
|
+
const showSearchBox = !showSelectedItems || multiSelect;
|
|
1685
|
+
const ResolvedRowComponent = rowComponent || DefaultSearchRow;
|
|
1686
|
+
const ResolvedSelectedItemComponent = selectedItemComponent || DefaultSelectedItem;
|
|
1687
|
+
const ResolvedNoResultsComponent = noResultsComponent || DefaultNoResults;
|
|
1688
|
+
const CompIcon = logoIcon && typeof logoIcon !== "string" ? logoIcon : null;
|
|
1689
|
+
const resolvedIcon = CompIcon ? /* @__PURE__ */ jsx21(CompIcon, { css: badgeIcon }) : /* @__PURE__ */ jsx21("img", { src: logoIcon, alt: "Logo", css: badgeIcon });
|
|
1690
|
+
const onDragEnd = (res) => {
|
|
1691
|
+
var _a2, _b2;
|
|
1692
|
+
if (res.destination && res.source.droppableId === ((_a2 = res.destination) == null ? void 0 : _a2.droppableId)) {
|
|
1693
|
+
const result = [...selectedItems || []];
|
|
1694
|
+
const [removed] = (_b2 = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b2 : [];
|
|
1695
|
+
result == null ? void 0 : result.splice(res.destination.index, 0, removed);
|
|
1696
|
+
if (onSort) {
|
|
1697
|
+
setSelectedListItems(result);
|
|
1698
|
+
onSort == null ? void 0 : onSort(result);
|
|
1699
|
+
}
|
|
1700
|
+
return result;
|
|
1701
|
+
}
|
|
1702
|
+
};
|
|
1703
|
+
return /* @__PURE__ */ jsx21(
|
|
1704
|
+
"div",
|
|
1705
|
+
{
|
|
1706
|
+
css: css11`
|
|
361
1707
|
width: 100%;
|
|
362
|
-
`,
|
|
1708
|
+
`,
|
|
1709
|
+
children: /* @__PURE__ */ jsxs10(
|
|
1710
|
+
"div",
|
|
1711
|
+
{
|
|
1712
|
+
css: css11`
|
|
363
1713
|
position: relative;
|
|
364
1714
|
margin-block: var(--spacing-base);
|
|
365
|
-
`,
|
|
1715
|
+
`,
|
|
1716
|
+
children: [
|
|
1717
|
+
showSearchBox ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
|
|
1718
|
+
/* @__PURE__ */ jsx21("div", { css: entrySearchWrapper, "data-test-id": "component-search", children: /* @__PURE__ */ jsxs10(
|
|
1719
|
+
"button",
|
|
1720
|
+
{
|
|
1721
|
+
css: entrySearchBtn,
|
|
1722
|
+
onClick: handleListButtonClick,
|
|
1723
|
+
type: "button",
|
|
1724
|
+
"aria-haspopup": true,
|
|
1725
|
+
"aria-expanded": listOpen,
|
|
1726
|
+
"aria-controls": `entry-search-config-${listBoxId.current}`,
|
|
1727
|
+
children: [
|
|
1728
|
+
resolvedIcon,
|
|
1729
|
+
/* @__PURE__ */ jsx21(
|
|
1730
|
+
"span",
|
|
1731
|
+
{
|
|
1732
|
+
css: css11`
|
|
366
1733
|
margin-left: var(--spacing-base);
|
|
367
|
-
`,
|
|
1734
|
+
`,
|
|
1735
|
+
children: "Select"
|
|
1736
|
+
}
|
|
1737
|
+
),
|
|
1738
|
+
/* @__PURE__ */ jsx21("span", { css: entrySearchSelectIcon, children: /* @__PURE__ */ jsx21(
|
|
1739
|
+
ChevronDown_default,
|
|
1740
|
+
{
|
|
1741
|
+
css: [
|
|
1742
|
+
entrySearchSelectImg,
|
|
1743
|
+
!listOpen ? void 0 : css11`
|
|
368
1744
|
transform: rotate(180deg);
|
|
369
|
-
|
|
1745
|
+
`
|
|
1746
|
+
]
|
|
1747
|
+
}
|
|
1748
|
+
) })
|
|
1749
|
+
]
|
|
1750
|
+
}
|
|
1751
|
+
) }),
|
|
1752
|
+
/* @__PURE__ */ jsxs10(
|
|
1753
|
+
"div",
|
|
1754
|
+
{
|
|
1755
|
+
id: `entry-search-config-${listBoxId.current}`,
|
|
1756
|
+
"aria-hidden": !listOpen,
|
|
1757
|
+
css: [entrySearchConfig, listOpen ? void 0 : entrySearchConfigHidden],
|
|
1758
|
+
children: [
|
|
1759
|
+
helpComponent || null,
|
|
1760
|
+
/* @__PURE__ */ jsxs10(
|
|
1761
|
+
"div",
|
|
1762
|
+
{
|
|
1763
|
+
css: css11`
|
|
370
1764
|
display: flex;
|
|
371
1765
|
gap: calc(var(--spacing-base) - 0.25rem);
|
|
372
1766
|
margin-bottom: var(--spacing-base);
|
|
373
|
-
`,
|
|
1767
|
+
`,
|
|
1768
|
+
children: [
|
|
1769
|
+
/* @__PURE__ */ jsx21(
|
|
1770
|
+
InputSelect3,
|
|
1771
|
+
{
|
|
1772
|
+
onChange: (e) => setContentTypeSelected(e.target.value),
|
|
1773
|
+
value: contentTypeSelected,
|
|
1774
|
+
label: typeSelectorLabel,
|
|
1775
|
+
showLabel: false,
|
|
1776
|
+
options: [
|
|
1777
|
+
...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
|
|
1778
|
+
...contentTypes ? contentTypes.map((option) => {
|
|
1779
|
+
return {
|
|
1780
|
+
value: option.id,
|
|
1781
|
+
label: option.name
|
|
1782
|
+
};
|
|
1783
|
+
}) : []
|
|
1784
|
+
]
|
|
1785
|
+
}
|
|
1786
|
+
),
|
|
1787
|
+
/* @__PURE__ */ jsx21(
|
|
1788
|
+
"div",
|
|
1789
|
+
{
|
|
1790
|
+
css: css11`
|
|
374
1791
|
flex-grow: 1;
|
|
375
|
-
`,
|
|
1792
|
+
`,
|
|
1793
|
+
children: /* @__PURE__ */ jsx21(
|
|
1794
|
+
InputKeywordSearch,
|
|
1795
|
+
{
|
|
1796
|
+
inputFieldName: "searchText",
|
|
1797
|
+
placeholder: "Enter keyword to narrow your results",
|
|
1798
|
+
onSearchTextChanged: setTextInput,
|
|
1799
|
+
disabledFieldSubmission: true,
|
|
1800
|
+
value: textInput
|
|
1801
|
+
}
|
|
1802
|
+
)
|
|
1803
|
+
}
|
|
1804
|
+
)
|
|
1805
|
+
]
|
|
1806
|
+
}
|
|
1807
|
+
),
|
|
1808
|
+
/* @__PURE__ */ jsxs10(
|
|
1809
|
+
"div",
|
|
1810
|
+
{
|
|
1811
|
+
css: [entrySearchResultList, scrollbarStyles2],
|
|
1812
|
+
id: listBoxId.current,
|
|
1813
|
+
role: "listbox",
|
|
1814
|
+
tabIndex: 0,
|
|
1815
|
+
"data-test-id": "entry-list",
|
|
1816
|
+
children: [
|
|
1817
|
+
/* @__PURE__ */ jsx21(LoadingOverlay, { isActive: showLoadingOverlay }),
|
|
1818
|
+
Array.isArray(results) && results.length > 0 ? results.map((result) => /* @__PURE__ */ jsx21(
|
|
1819
|
+
ResolvedRowComponent,
|
|
1820
|
+
{
|
|
1821
|
+
isSelected: selectedListItems.some((item) => item.id === result.id),
|
|
1822
|
+
result,
|
|
1823
|
+
triggerSelection: () => handleListItemSelect(result)
|
|
1824
|
+
},
|
|
1825
|
+
result.id
|
|
1826
|
+
)) : resultsLoading ? null : /* @__PURE__ */ jsx21(
|
|
1827
|
+
ResolvedNoResultsComponent,
|
|
1828
|
+
{
|
|
1829
|
+
searchText: textInput || textInput,
|
|
1830
|
+
selectedContentType: (_b = (_a = contentTypes == null ? void 0 : contentTypes.find((t) => t.id === contentTypeSelected)) == null ? void 0 : _a.name) != null ? _b : contentTypeSelected
|
|
1831
|
+
}
|
|
1832
|
+
),
|
|
1833
|
+
!resultsLoading && typeof totalResults !== "undefined" && results && (results == null ? void 0 : results.length) < totalResults && /* @__PURE__ */ jsx21("button", { type: "button", css: entrySearchLoadMoreBtn, onClick: handleLoadMoreClick, children: !loadingMore ? "Load More" : /* @__PURE__ */ jsx21(LoadingIndicator, {}) })
|
|
1834
|
+
]
|
|
1835
|
+
}
|
|
1836
|
+
),
|
|
1837
|
+
/* @__PURE__ */ jsxs10(
|
|
1838
|
+
"div",
|
|
1839
|
+
{
|
|
1840
|
+
css: css11`
|
|
376
1841
|
display: flex;
|
|
377
1842
|
justify-content: space-between;
|
|
378
|
-
`,
|
|
1843
|
+
`,
|
|
1844
|
+
children: [
|
|
1845
|
+
/* @__PURE__ */ jsx21("div", { children: onAddNew && ((_c = contentTypes == null ? void 0 : contentTypes.length) != null ? _c : 0) > 0 ? /* @__PURE__ */ jsx21(
|
|
1846
|
+
Menu,
|
|
1847
|
+
{
|
|
1848
|
+
menuLabel: "Add new menu",
|
|
1849
|
+
menuTrigger: /* @__PURE__ */ jsx21(Button, { buttonType: "secondary", children: "Add New" }),
|
|
1850
|
+
children: contentTypes == null ? void 0 : contentTypes.map((ct) => /* @__PURE__ */ jsx21(
|
|
1851
|
+
MenuItem,
|
|
1852
|
+
{
|
|
1853
|
+
css: css11`
|
|
379
1854
|
background: var(--white);
|
|
380
1855
|
color: var(--brand-secondary-1);
|
|
381
|
-
`,
|
|
1856
|
+
`,
|
|
1857
|
+
onClick: () => onAddNew(ct),
|
|
1858
|
+
children: ct.name
|
|
1859
|
+
},
|
|
1860
|
+
ct.id
|
|
1861
|
+
))
|
|
1862
|
+
}
|
|
1863
|
+
) : null }),
|
|
1864
|
+
/* @__PURE__ */ jsxs10(
|
|
1865
|
+
"div",
|
|
1866
|
+
{
|
|
1867
|
+
css: css11`
|
|
382
1868
|
display: flex;
|
|
383
1869
|
gap: var(--spacing-base);
|
|
384
|
-
`,
|
|
1870
|
+
`,
|
|
1871
|
+
children: [
|
|
1872
|
+
/* @__PURE__ */ jsx21(Button, { buttonType: "unimportant", onClick: handleCancelClick, children: "Cancel" }),
|
|
1873
|
+
/* @__PURE__ */ jsx21(
|
|
1874
|
+
Button,
|
|
1875
|
+
{
|
|
1876
|
+
disabled: !selectedListItems.length,
|
|
1877
|
+
onClick: handleAcceptClick,
|
|
1878
|
+
"data-test-id": "entry-accept-button",
|
|
1879
|
+
children: "Accept"
|
|
1880
|
+
}
|
|
1881
|
+
)
|
|
1882
|
+
]
|
|
1883
|
+
}
|
|
1884
|
+
)
|
|
1885
|
+
]
|
|
1886
|
+
}
|
|
1887
|
+
)
|
|
1888
|
+
]
|
|
1889
|
+
}
|
|
1890
|
+
)
|
|
1891
|
+
] }) : null,
|
|
1892
|
+
!listOpen ? multiSelect && selectedListItems.length > 1 ? /* @__PURE__ */ jsx21(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx21(Droppable, { droppableId: multiSelectId || "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs10(
|
|
1893
|
+
"div",
|
|
1894
|
+
{
|
|
1895
|
+
...provided.droppableProps,
|
|
1896
|
+
ref: provided.innerRef,
|
|
1897
|
+
css: css11`
|
|
385
1898
|
margin-block: var(--spacing-sm) 0;
|
|
386
|
-
`,
|
|
1899
|
+
`,
|
|
1900
|
+
children: [
|
|
1901
|
+
selectedListItems == null ? void 0 : selectedListItems.map((selectedItem, index) => {
|
|
1902
|
+
if (selectedItem == null ? void 0 : selectedItem.id) {
|
|
1903
|
+
return /* @__PURE__ */ jsx21(Draggable, { draggableId: selectedItem.id, index, children: (provided2, snapshot) => {
|
|
1904
|
+
return /* @__PURE__ */ jsxs10(
|
|
1905
|
+
"div",
|
|
1906
|
+
{
|
|
1907
|
+
css: draggableContainer,
|
|
1908
|
+
ref: provided2.innerRef,
|
|
1909
|
+
"data-dragging": snapshot.isDragging,
|
|
1910
|
+
...provided2.draggableProps,
|
|
1911
|
+
...provided2.dragHandleProps,
|
|
1912
|
+
children: [
|
|
1913
|
+
/* @__PURE__ */ jsxs10("span", { css: draggableIconWrapper, children: [
|
|
1914
|
+
/* @__PURE__ */ jsx21(
|
|
1915
|
+
MoreVerticalAlt_default,
|
|
1916
|
+
{
|
|
1917
|
+
css: [draggableIcon, draggableIconOffset],
|
|
1918
|
+
width: 24,
|
|
1919
|
+
height: 24
|
|
1920
|
+
}
|
|
1921
|
+
),
|
|
1922
|
+
/* @__PURE__ */ jsx21(MoreVerticalAlt_default, { css: draggableIcon, width: 24, height: 24 })
|
|
1923
|
+
] }),
|
|
1924
|
+
/* @__PURE__ */ jsx21(
|
|
1925
|
+
ResolvedSelectedItemComponent,
|
|
1926
|
+
{
|
|
1927
|
+
logoIcon,
|
|
1928
|
+
selectedItem,
|
|
1929
|
+
onDeselect: (item) => handleDeselect(item),
|
|
1930
|
+
onEditClosed: onEditClosed ? (item) => onEditClosed(item) : void 0
|
|
1931
|
+
},
|
|
1932
|
+
`selected-item-${selectedItem.id}`
|
|
1933
|
+
)
|
|
1934
|
+
]
|
|
1935
|
+
}
|
|
1936
|
+
);
|
|
1937
|
+
} }, selectedItem.id);
|
|
1938
|
+
}
|
|
1939
|
+
}),
|
|
1940
|
+
provided.placeholder
|
|
1941
|
+
]
|
|
1942
|
+
}
|
|
1943
|
+
) }) }) : selectedListItems == null ? void 0 : selectedListItems.map((selectedItem) => /* @__PURE__ */ jsx21(
|
|
1944
|
+
ResolvedSelectedItemComponent,
|
|
1945
|
+
{
|
|
1946
|
+
logoIcon,
|
|
1947
|
+
selectedItem,
|
|
1948
|
+
onDeselect: (item) => handleDeselect(item),
|
|
1949
|
+
onEditClosed: onEditClosed ? (item) => onEditClosed(item) : void 0
|
|
1950
|
+
},
|
|
1951
|
+
`selected-item-${selectedItem.id}`
|
|
1952
|
+
)) : null
|
|
1953
|
+
]
|
|
1954
|
+
}
|
|
1955
|
+
)
|
|
1956
|
+
}
|
|
1957
|
+
);
|
|
1958
|
+
};
|
|
1959
|
+
|
|
1960
|
+
// src/components/commerce/ProductSearchRow.tsx
|
|
1961
|
+
import { css as css13 } from "@emotion/react";
|
|
1962
|
+
|
|
1963
|
+
// src/components/commerce/styles/ProductSearchRow.styles.ts
|
|
1964
|
+
import { css as css12 } from "@emotion/react";
|
|
1965
|
+
var productSearchRowContainer = css12`
|
|
387
1966
|
cursor: pointer;
|
|
388
1967
|
padding: var(--spacing-sm) 0;
|
|
389
1968
|
margin-right: var(--spacing-sm);
|
|
390
1969
|
position: relative;
|
|
391
1970
|
transition: background-color var(--duration-fast) var(--timing-ease-out),
|
|
392
1971
|
color var(--duration-fast) var(--timing-ease-out);
|
|
393
|
-
|
|
1972
|
+
`;
|
|
1973
|
+
var productSearchRowContent = css12`
|
|
394
1974
|
border: 2px solid transparent;
|
|
395
1975
|
border-radius: var(--rounded-base);
|
|
396
1976
|
display: flex;
|
|
397
1977
|
align-items: center;
|
|
398
1978
|
gap: var(--spacing-base);
|
|
399
1979
|
padding: var(--spacing-sm) var(--spacing-xs);
|
|
400
|
-
|
|
1980
|
+
`;
|
|
1981
|
+
var productSearchRowContentActive = css12`
|
|
401
1982
|
background-color: var(--green-50);
|
|
402
|
-
|
|
1983
|
+
`;
|
|
1984
|
+
var productSearchRowTitle = css12`
|
|
403
1985
|
font-size: var(--fs-sm);
|
|
404
1986
|
font-weight: var(--fw-bold);
|
|
405
1987
|
width: 50%;
|
|
406
|
-
|
|
1988
|
+
`;
|
|
1989
|
+
var productSearchRowCategory = css12`
|
|
407
1990
|
font-weight: var(--fw-normal);
|
|
408
1991
|
display: block;
|
|
409
|
-
|
|
1992
|
+
`;
|
|
1993
|
+
var productSearchRowDetails = css12`
|
|
410
1994
|
font-size: var(--fs-sm);
|
|
411
1995
|
> * {
|
|
412
1996
|
display: block;
|
|
413
1997
|
}
|
|
414
|
-
|
|
1998
|
+
`;
|
|
1999
|
+
var productSearchRowActiveIcon = css12`
|
|
415
2000
|
display: block;
|
|
416
2001
|
height: 1.5rem;
|
|
417
2002
|
width: 1.5rem;
|
|
418
2003
|
color: var(--brand-secondary-3);
|
|
419
2004
|
margin-left: auto;
|
|
420
|
-
`;
|
|
2005
|
+
`;
|
|
2006
|
+
|
|
2007
|
+
// src/components/commerce/ProductSearchRow.tsx
|
|
2008
|
+
import { jsx as jsx22, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
|
|
2009
|
+
function ProductSearchRow({
|
|
2010
|
+
result,
|
|
2011
|
+
isSelected,
|
|
2012
|
+
triggerSelection
|
|
2013
|
+
}) {
|
|
2014
|
+
var _a;
|
|
2015
|
+
const { categories, logoIcon } = useProductSearchContext();
|
|
2016
|
+
const [category] = result.categories || [{ id: "", name: "" }];
|
|
2017
|
+
const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
|
|
2018
|
+
return /* @__PURE__ */ jsx22(
|
|
2019
|
+
"div",
|
|
2020
|
+
{
|
|
2021
|
+
"data-value": result.id,
|
|
2022
|
+
role: "option",
|
|
2023
|
+
tabIndex: -1,
|
|
2024
|
+
onClick: () => triggerSelection(),
|
|
2025
|
+
css: [productSearchRowContainer],
|
|
2026
|
+
children: /* @__PURE__ */ jsxs11("div", { css: [productSearchRowContent, isSelected ? productSearchRowContentActive : void 0], children: [
|
|
2027
|
+
result.thumbnailUrl ? /* @__PURE__ */ jsx22(
|
|
2028
|
+
"img",
|
|
2029
|
+
{
|
|
2030
|
+
src: result.thumbnailUrl,
|
|
2031
|
+
alt: `Thumbnail for ${result.title}`,
|
|
2032
|
+
css: css13`
|
|
421
2033
|
background-color: var(--gray-200);
|
|
422
2034
|
width: 3rem;
|
|
423
2035
|
height: 3rem;
|
|
424
2036
|
object-fit: cover;
|
|
425
|
-
`
|
|
2037
|
+
`
|
|
2038
|
+
}
|
|
2039
|
+
) : /* @__PURE__ */ jsx22(
|
|
2040
|
+
Image,
|
|
2041
|
+
{
|
|
2042
|
+
src: logoIcon,
|
|
2043
|
+
alt: "Logo",
|
|
2044
|
+
css: css13`
|
|
426
2045
|
height: 2.25rem;
|
|
427
2046
|
width: 2.25rem;
|
|
428
|
-
`
|
|
2047
|
+
`
|
|
2048
|
+
}
|
|
2049
|
+
),
|
|
2050
|
+
/* @__PURE__ */ jsxs11("h4", { css: [productSearchRowTitle], children: [
|
|
2051
|
+
result.title,
|
|
2052
|
+
categoryName ? /* @__PURE__ */ jsx22("span", { css: [productSearchRowCategory], children: categoryName }) : null
|
|
2053
|
+
] }),
|
|
2054
|
+
/* @__PURE__ */ jsxs11("p", { css: [productSearchRowDetails], children: [
|
|
2055
|
+
"SKU: ",
|
|
2056
|
+
result.sku || result.id,
|
|
2057
|
+
result.price !== void 0 ? /* @__PURE__ */ jsx22("span", { children: result.price }) : null
|
|
2058
|
+
] }),
|
|
2059
|
+
isSelected ? /* @__PURE__ */ jsx22(Checkmark_default, { css: [productSearchRowActiveIcon] }) : null
|
|
2060
|
+
] })
|
|
2061
|
+
},
|
|
2062
|
+
result.id
|
|
2063
|
+
);
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
// src/components/commerce/ProductSelectedItem.tsx
|
|
2067
|
+
import { css as css15 } from "@emotion/react";
|
|
2068
|
+
import { Icon as Icon3, mq as mq4 } from "@uniformdev/design-system";
|
|
2069
|
+
import { CgClose as CgClose3 } from "react-icons/cg";
|
|
2070
|
+
|
|
2071
|
+
// src/components/commerce/styles/ProductSelectedItem.styles.ts
|
|
2072
|
+
import { css as css14 } from "@emotion/react";
|
|
2073
|
+
import { mq as mq3 } from "@uniformdev/design-system";
|
|
2074
|
+
var productSelectedItemContainer = css14`
|
|
429
2075
|
border: 1px solid var(--gray-200);
|
|
430
2076
|
border-radius: var(--rounded-base);
|
|
431
2077
|
background: var(--gray-50);
|
|
432
2078
|
display: flex;
|
|
433
2079
|
width: 100%;
|
|
434
|
-
|
|
2080
|
+
`;
|
|
2081
|
+
var productSelectedItemDetails = css14`
|
|
435
2082
|
align-items: center;
|
|
436
2083
|
display: flex;
|
|
437
2084
|
padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-lg);
|
|
@@ -439,22 +2086,25 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
439
2086
|
flex-grow: 1;
|
|
440
2087
|
gap: var(--spacing-sm);
|
|
441
2088
|
margin-inline: 0 var(--spacing-sm);
|
|
442
|
-
|
|
2089
|
+
`;
|
|
2090
|
+
var productSelectedItemContent = css14`
|
|
443
2091
|
display: flex;
|
|
444
2092
|
align-items: center;
|
|
445
2093
|
gap: var(--spacing-sm);
|
|
446
2094
|
flex-grow: 1;
|
|
447
2095
|
|
|
448
|
-
${
|
|
2096
|
+
${mq3("lg")} {
|
|
449
2097
|
width: 50%;
|
|
450
2098
|
margin-bottom: 0;
|
|
451
2099
|
}
|
|
452
|
-
|
|
2100
|
+
`;
|
|
2101
|
+
var productSelectedItemImage = css14`
|
|
453
2102
|
background-color: var(--gray-200);
|
|
454
2103
|
width: 3.5rem;
|
|
455
2104
|
height: 3.5rem;
|
|
456
2105
|
object-fit: cover;
|
|
457
|
-
|
|
2106
|
+
`;
|
|
2107
|
+
var productedSelectedItemLinkBtn = css14`
|
|
458
2108
|
align-items: center;
|
|
459
2109
|
background: var(--white);
|
|
460
2110
|
border-radius: var(--rounded-base);
|
|
@@ -469,50 +2119,277 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
469
2119
|
&:hover {
|
|
470
2120
|
background: var(--gray-50);
|
|
471
2121
|
}
|
|
472
|
-
|
|
2122
|
+
`;
|
|
2123
|
+
var productedSelectedItemSmallText = css14`
|
|
473
2124
|
font-size: var(--fs-sm);
|
|
474
|
-
|
|
2125
|
+
`;
|
|
2126
|
+
var productSelectedItemIcon = css14`
|
|
475
2127
|
display: block;
|
|
476
2128
|
width: 1rem;
|
|
477
2129
|
height: 1rem;
|
|
478
|
-
|
|
2130
|
+
`;
|
|
2131
|
+
var productSelectedItemLinkContainer = css14`
|
|
479
2132
|
display: flex;
|
|
480
2133
|
flex-direction: column;
|
|
481
2134
|
gap: var(--spacing-sm);
|
|
482
2135
|
|
|
483
|
-
${
|
|
2136
|
+
${mq3("md")} {
|
|
484
2137
|
flex-direction: row;
|
|
485
2138
|
min-width: 200px;
|
|
486
2139
|
justify-content: end;
|
|
487
2140
|
}
|
|
488
|
-
`;
|
|
2141
|
+
`;
|
|
2142
|
+
|
|
2143
|
+
// src/components/commerce/ProductSelectedItem.tsx
|
|
2144
|
+
import { jsx as jsx23, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
|
|
2145
|
+
function ProductSelectedItem({
|
|
2146
|
+
selectedItem,
|
|
2147
|
+
onDeselect
|
|
2148
|
+
}) {
|
|
2149
|
+
var _a;
|
|
2150
|
+
const { categories, logoIcon } = useProductSearchContext();
|
|
2151
|
+
const [category] = selectedItem.categories || [{ id: "", name: "" }];
|
|
2152
|
+
const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
|
|
2153
|
+
return /* @__PURE__ */ jsx23("div", { css: [productSelectedItemContainer], children: /* @__PURE__ */ jsxs12("article", { css: [productSelectedItemDetails], children: [
|
|
2154
|
+
/* @__PURE__ */ jsxs12("div", { css: [productSelectedItemContent], children: [
|
|
2155
|
+
selectedItem.thumbnailUrl ? /* @__PURE__ */ jsx23(
|
|
2156
|
+
"img",
|
|
2157
|
+
{
|
|
2158
|
+
src: selectedItem.thumbnailUrl,
|
|
2159
|
+
alt: categoryName,
|
|
2160
|
+
css: [productSelectedItemImage],
|
|
2161
|
+
loading: "lazy"
|
|
2162
|
+
}
|
|
2163
|
+
) : /* @__PURE__ */ jsx23("div", { css: [productSelectedItemImage] }),
|
|
2164
|
+
/* @__PURE__ */ jsxs12(
|
|
2165
|
+
"div",
|
|
2166
|
+
{
|
|
2167
|
+
css: css15`
|
|
489
2168
|
> :not(:last-child) {
|
|
490
2169
|
margin-bottom: var(--spacing-xs);
|
|
491
2170
|
}
|
|
492
|
-
`,
|
|
2171
|
+
`,
|
|
2172
|
+
children: [
|
|
2173
|
+
/* @__PURE__ */ jsxs12(
|
|
2174
|
+
"h4",
|
|
2175
|
+
{
|
|
2176
|
+
css: css15`
|
|
493
2177
|
margin-top: 0px;
|
|
494
2178
|
font-weight: var(--fw-bold);
|
|
495
|
-
`,
|
|
2179
|
+
`,
|
|
2180
|
+
children: [
|
|
2181
|
+
selectedItem.title || selectedItem.id || "",
|
|
2182
|
+
categoryName && /* @__PURE__ */ jsx23(
|
|
2183
|
+
"span",
|
|
2184
|
+
{
|
|
2185
|
+
css: css15`
|
|
496
2186
|
display: block;
|
|
497
2187
|
font-weight: var(--fw-regular);
|
|
498
|
-
`,
|
|
2188
|
+
`,
|
|
2189
|
+
children: categoryName
|
|
2190
|
+
}
|
|
2191
|
+
)
|
|
2192
|
+
]
|
|
2193
|
+
}
|
|
2194
|
+
),
|
|
2195
|
+
/* @__PURE__ */ jsxs12(
|
|
2196
|
+
"ul",
|
|
2197
|
+
{
|
|
2198
|
+
css: css15`
|
|
499
2199
|
font-size: var(--fs-sm);
|
|
500
2200
|
|
|
501
|
-
${
|
|
2201
|
+
${mq4("sm")} {
|
|
502
2202
|
display: flex;
|
|
503
2203
|
gap: var(--spacing-base);
|
|
504
2204
|
}
|
|
505
|
-
`,
|
|
2205
|
+
`,
|
|
2206
|
+
children: [
|
|
2207
|
+
/* @__PURE__ */ jsxs12("li", { children: [
|
|
2208
|
+
/* @__PURE__ */ jsx23(
|
|
2209
|
+
"span",
|
|
2210
|
+
{
|
|
2211
|
+
css: css15`
|
|
506
2212
|
margin-right: var(--spacing-xs);
|
|
507
|
-
`,
|
|
2213
|
+
`,
|
|
2214
|
+
children: "SKU:"
|
|
2215
|
+
}
|
|
2216
|
+
),
|
|
2217
|
+
selectedItem.sku || selectedItem.id
|
|
2218
|
+
] }),
|
|
2219
|
+
selectedItem.price !== void 0 ? /* @__PURE__ */ jsxs12("li", { children: [
|
|
2220
|
+
/* @__PURE__ */ jsx23(
|
|
2221
|
+
"span",
|
|
2222
|
+
{
|
|
2223
|
+
css: css15`
|
|
508
2224
|
margin-right: var(--spacing-xs);
|
|
509
|
-
`,
|
|
2225
|
+
`,
|
|
2226
|
+
children: "Price:"
|
|
2227
|
+
}
|
|
2228
|
+
),
|
|
2229
|
+
/* @__PURE__ */ jsx23("span", { children: selectedItem.price })
|
|
2230
|
+
] }) : null
|
|
2231
|
+
]
|
|
2232
|
+
}
|
|
2233
|
+
)
|
|
2234
|
+
]
|
|
2235
|
+
}
|
|
2236
|
+
)
|
|
2237
|
+
] }),
|
|
2238
|
+
/* @__PURE__ */ jsxs12("div", { css: productSelectedItemLinkContainer, children: [
|
|
2239
|
+
selectedItem.editLink ? /* @__PURE__ */ jsxs12(
|
|
2240
|
+
"a",
|
|
2241
|
+
{
|
|
2242
|
+
href: selectedItem.editLink,
|
|
2243
|
+
title: "edit",
|
|
2244
|
+
rel: "noopener noreferrer",
|
|
2245
|
+
target: "_blank",
|
|
2246
|
+
css: productedSelectedItemLinkBtn,
|
|
2247
|
+
children: [
|
|
2248
|
+
/* @__PURE__ */ jsx23("span", { css: productedSelectedItemSmallText, children: "Edit" }),
|
|
2249
|
+
/* @__PURE__ */ jsx23(Image, { src: logoIcon, alt: "Logo", css: productSelectedItemIcon })
|
|
2250
|
+
]
|
|
2251
|
+
}
|
|
2252
|
+
) : null,
|
|
2253
|
+
/* @__PURE__ */ jsxs12(
|
|
2254
|
+
"button",
|
|
2255
|
+
{
|
|
2256
|
+
type: "button",
|
|
2257
|
+
onClick: () => {
|
|
2258
|
+
onDeselect == null ? void 0 : onDeselect(selectedItem);
|
|
2259
|
+
},
|
|
2260
|
+
css: productedSelectedItemLinkBtn,
|
|
2261
|
+
children: [
|
|
2262
|
+
/* @__PURE__ */ jsx23("span", { css: productedSelectedItemSmallText, children: "Unlink" }),
|
|
2263
|
+
/* @__PURE__ */ jsx23(Icon3, { icon: CgClose3, iconColor: "red", size: 16 })
|
|
2264
|
+
]
|
|
2265
|
+
}
|
|
2266
|
+
)
|
|
2267
|
+
] })
|
|
2268
|
+
] }) }, selectedItem.id);
|
|
2269
|
+
}
|
|
2270
|
+
|
|
2271
|
+
// src/components/commerce/ProductSearch.tsx
|
|
2272
|
+
import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
|
|
2273
|
+
function ProductSearch({
|
|
2274
|
+
selectedProducts,
|
|
2275
|
+
setSelectedProducts,
|
|
2276
|
+
onGetCategories,
|
|
2277
|
+
onSearchProducts,
|
|
2278
|
+
logoIcon,
|
|
2279
|
+
multiSelect,
|
|
2280
|
+
multiSelectId,
|
|
2281
|
+
selectedItemComponent,
|
|
2282
|
+
rowComponent,
|
|
2283
|
+
errorComponent,
|
|
2284
|
+
helpComponent,
|
|
2285
|
+
noResultsComponent,
|
|
2286
|
+
onSort,
|
|
2287
|
+
typeSelectorAllTypesOptionText = "All categories",
|
|
2288
|
+
typeSelectorLabel = "Select Category"
|
|
2289
|
+
}) {
|
|
2290
|
+
var _a, _b;
|
|
2291
|
+
const {
|
|
2292
|
+
value: categories,
|
|
2293
|
+
loading: categoriesLoading,
|
|
2294
|
+
error: categoriesError
|
|
2295
|
+
} = useAsync(async () => {
|
|
2296
|
+
return await onGetCategories();
|
|
2297
|
+
}, [onGetCategories]);
|
|
2298
|
+
const categoryIds = categories == null ? void 0 : categories.map((c) => c.id).join(",");
|
|
2299
|
+
const categoryOptions = useMemo2(
|
|
2300
|
+
() => {
|
|
2301
|
+
if (!categories) {
|
|
2302
|
+
return void 0;
|
|
2303
|
+
}
|
|
2304
|
+
const result = categories.map((category) => ({
|
|
2305
|
+
id: category.id,
|
|
2306
|
+
name: category.name
|
|
2307
|
+
}));
|
|
2308
|
+
return result;
|
|
2309
|
+
},
|
|
2310
|
+
[categoryIds]
|
|
2311
|
+
);
|
|
2312
|
+
const combinedSearchResults = useRef5();
|
|
2313
|
+
const [handleSearchState, handleSearch] = useAsyncFn2(
|
|
2314
|
+
async (text, options) => {
|
|
2315
|
+
const result = await onSearchProducts({
|
|
2316
|
+
text,
|
|
2317
|
+
options: {
|
|
2318
|
+
limit: options == null ? void 0 : options.count,
|
|
2319
|
+
offset: options == null ? void 0 : options.offset,
|
|
2320
|
+
categoryId: options == null ? void 0 : options.contentType,
|
|
2321
|
+
cursor: options == null ? void 0 : options.cursor
|
|
2322
|
+
}
|
|
2323
|
+
});
|
|
2324
|
+
if ((options == null ? void 0 : options.offset) === 0) {
|
|
2325
|
+
combinedSearchResults.current = [];
|
|
2326
|
+
}
|
|
2327
|
+
(combinedSearchResults.current = combinedSearchResults.current || []).push(...result.products);
|
|
2328
|
+
return result;
|
|
2329
|
+
},
|
|
2330
|
+
[onSearchProducts]
|
|
2331
|
+
);
|
|
2332
|
+
const handleSelect = async (items) => {
|
|
2333
|
+
await setSelectedProducts(items);
|
|
2334
|
+
};
|
|
2335
|
+
if (categoriesError || handleSearchState.error) {
|
|
2336
|
+
const ErrorComp = errorComponent ? errorComponent : ({ categoriesError: categoriesError2, searchError }) => /* @__PURE__ */ jsxs13(Callout2, { type: "error", children: [
|
|
2337
|
+
"There was an error: ",
|
|
2338
|
+
(categoriesError2 == null ? void 0 : categoriesError2.message) || (searchError == null ? void 0 : searchError.message)
|
|
2339
|
+
] });
|
|
2340
|
+
return /* @__PURE__ */ jsx24(ErrorComp, { categoriesError, searchError: handleSearchState.error });
|
|
2341
|
+
}
|
|
2342
|
+
return /* @__PURE__ */ jsx24(ProductSearchContext.Provider, { value: { categories, logoIcon }, children: /* @__PURE__ */ jsx24(
|
|
2343
|
+
EntrySearch,
|
|
2344
|
+
{
|
|
2345
|
+
search: handleSearch,
|
|
2346
|
+
results: combinedSearchResults.current,
|
|
2347
|
+
logoIcon,
|
|
2348
|
+
selectedItems: selectedProducts,
|
|
2349
|
+
select: handleSelect,
|
|
2350
|
+
multiSelectId: multiSelectId || "product-search-multi-select",
|
|
2351
|
+
multiSelect,
|
|
2352
|
+
contentTypes: categoryOptions,
|
|
2353
|
+
selectedItemComponent: selectedItemComponent || ProductSelectedItem,
|
|
2354
|
+
rowComponent: rowComponent || ProductSearchRow,
|
|
2355
|
+
totalResults: (_a = handleSearchState.value) == null ? void 0 : _a.total,
|
|
2356
|
+
cursor: (_b = handleSearchState.value) == null ? void 0 : _b.cursor,
|
|
2357
|
+
resultsLoading: handleSearchState.loading || categoriesLoading,
|
|
2358
|
+
helpComponent,
|
|
2359
|
+
noResultsComponent,
|
|
2360
|
+
onSort,
|
|
2361
|
+
typeSelectorAllTypesOptionText,
|
|
2362
|
+
typeSelectorLabel
|
|
2363
|
+
}
|
|
2364
|
+
) });
|
|
2365
|
+
}
|
|
2366
|
+
var ProductSearchContext = React6.createContext(void 0);
|
|
2367
|
+
var useProductSearchContext = () => {
|
|
2368
|
+
const context = useContext2(ProductSearchContext);
|
|
2369
|
+
if (!context) {
|
|
2370
|
+
throw new Error("useProductSearchContext must be used within a <ProductSearchContext> provider");
|
|
2371
|
+
}
|
|
2372
|
+
return context;
|
|
2373
|
+
};
|
|
2374
|
+
|
|
2375
|
+
// src/components/dam/DamSelectedItem.tsx
|
|
2376
|
+
import { css as css17 } from "@emotion/react";
|
|
2377
|
+
import { Icon as Icon4 } from "@uniformdev/design-system";
|
|
2378
|
+
import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
|
|
2379
|
+
import { CgClose as CgClose4, CgInfo as CgInfo2 } from "react-icons/cg";
|
|
2380
|
+
import { format as timeAgo2 } from "timeago.js";
|
|
2381
|
+
|
|
2382
|
+
// src/components/dam/DamSelectedItem.styles.ts
|
|
2383
|
+
import { css as css16 } from "@emotion/react";
|
|
2384
|
+
import { mq as mq5 } from "@uniformdev/design-system";
|
|
2385
|
+
var damSelectedItemContainer = css16`
|
|
510
2386
|
border: 1px solid var(--gray-200);
|
|
511
2387
|
background: var(--gray-50);
|
|
512
2388
|
border-radius: var(--rounded-base);
|
|
513
2389
|
display: flex;
|
|
514
2390
|
width: 100%;
|
|
515
|
-
|
|
2391
|
+
`;
|
|
2392
|
+
var damSelectedItemInner = css16`
|
|
516
2393
|
align-items: center;
|
|
517
2394
|
display: flex;
|
|
518
2395
|
flex-grow: 1;
|
|
@@ -520,23 +2397,28 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
520
2397
|
margin-inline: 0 var(--spacing-sm);
|
|
521
2398
|
padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-lg);
|
|
522
2399
|
position: relative;
|
|
523
|
-
|
|
2400
|
+
`;
|
|
2401
|
+
var damSelectedItemDetails = css16`
|
|
524
2402
|
flex-grow: 1;
|
|
525
|
-
|
|
2403
|
+
`;
|
|
2404
|
+
var damSelectedItemCopy = css16`
|
|
526
2405
|
align-items: center;
|
|
527
2406
|
display: flex;
|
|
528
2407
|
position: relative;
|
|
529
|
-
|
|
2408
|
+
`;
|
|
2409
|
+
var damSelectedItemTitle = css16`
|
|
530
2410
|
color: var(--brand-secondary-1);
|
|
531
2411
|
font-size: var(--fs-base);
|
|
532
2412
|
font-weight: var(--fw-bold);
|
|
533
2413
|
line-height: 1;
|
|
534
2414
|
margin: 0;
|
|
535
2415
|
word-break: break-word;
|
|
536
|
-
|
|
2416
|
+
`;
|
|
2417
|
+
var damSelectedItemIcon = css16`
|
|
537
2418
|
width: 1.5rem;
|
|
538
2419
|
height: 1.5rem;
|
|
539
|
-
|
|
2420
|
+
`;
|
|
2421
|
+
var damSelectedItemPopover = css16`
|
|
540
2422
|
background: var(--white);
|
|
541
2423
|
border-radius: var(--rounded-base);
|
|
542
2424
|
border-left: 4px solid var(--brand-secondary-3);
|
|
@@ -545,22 +2427,26 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
545
2427
|
padding: var(--spacing-base);
|
|
546
2428
|
z-index: var(--z-10);
|
|
547
2429
|
width: max-content;
|
|
548
|
-
|
|
2430
|
+
`;
|
|
2431
|
+
var damSelectedItemSmallText = css16`
|
|
549
2432
|
font-size: var(--fs-sm);
|
|
550
|
-
|
|
2433
|
+
`;
|
|
2434
|
+
var damSelectedItemPopoverLabel = css16`
|
|
551
2435
|
font-weight: var(--fw-bold);
|
|
552
2436
|
margin-right: var(--spacing-sm);
|
|
553
|
-
|
|
2437
|
+
`;
|
|
2438
|
+
var damSelectedItemLinkContainer = css16`
|
|
554
2439
|
display: flex;
|
|
555
2440
|
flex-direction: column;
|
|
556
2441
|
gap: var(--spacing-sm);
|
|
557
2442
|
|
|
558
|
-
${
|
|
2443
|
+
${mq5("md")} {
|
|
559
2444
|
flex-direction: row;
|
|
560
2445
|
justify-content: end;
|
|
561
2446
|
min-width: 200px;
|
|
562
2447
|
}
|
|
563
|
-
|
|
2448
|
+
`;
|
|
2449
|
+
var damSelectedItemLinkBtn = css16`
|
|
564
2450
|
align-items: center;
|
|
565
2451
|
background: var(--white);
|
|
566
2452
|
border-radius: var(--rounded-base);
|
|
@@ -575,40 +2461,340 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
575
2461
|
&:hover {
|
|
576
2462
|
background: var(--gray-50);
|
|
577
2463
|
}
|
|
578
|
-
|
|
2464
|
+
`;
|
|
2465
|
+
var damSelectedItemMediaContainer = css16`
|
|
579
2466
|
display: flex;
|
|
580
2467
|
margin-top: var(--spacing-sm);
|
|
581
2468
|
gap: var(--spacing-sm);
|
|
582
|
-
|
|
2469
|
+
`;
|
|
2470
|
+
var damSelectedItemInfoBtn = css16`
|
|
583
2471
|
background: none;
|
|
584
2472
|
outline: none;
|
|
585
2473
|
border: none;
|
|
586
2474
|
margin: calc(var(--spacing-xs) * -1) 0 calc(var(--spacing-xs) * -1) var(--spacing-sm);
|
|
587
|
-
|
|
2475
|
+
`;
|
|
2476
|
+
var damSelectItemImage = css16`
|
|
588
2477
|
display: block;
|
|
589
2478
|
max-width: 100%;
|
|
590
2479
|
min-width: 100px;
|
|
591
2480
|
height: auto;
|
|
592
|
-
`;
|
|
2481
|
+
`;
|
|
2482
|
+
|
|
2483
|
+
// src/components/dam/DamSelectedItem.tsx
|
|
2484
|
+
import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
|
|
2485
|
+
function DamSelectedItem({
|
|
2486
|
+
selectedItem,
|
|
2487
|
+
onDeselect,
|
|
2488
|
+
onEditClosed,
|
|
2489
|
+
logoIcon,
|
|
2490
|
+
itemDetailsRendererComponent
|
|
2491
|
+
}) {
|
|
2492
|
+
const buttonRef = useRef6(null);
|
|
2493
|
+
const popoverRef = useRef6(null);
|
|
2494
|
+
const [showInfo, setShowInfo] = useState5(false);
|
|
2495
|
+
useEffect5(() => {
|
|
2496
|
+
const eventHandler = (event) => {
|
|
2497
|
+
if (buttonRef.current && !buttonRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
|
|
2498
|
+
setShowInfo(false);
|
|
2499
|
+
}
|
|
2500
|
+
};
|
|
2501
|
+
const resizeHandler = () => {
|
|
2502
|
+
setShowInfo(false);
|
|
2503
|
+
};
|
|
2504
|
+
window.addEventListener("resize", resizeHandler, true);
|
|
2505
|
+
document.addEventListener("scroll", eventHandler, true);
|
|
2506
|
+
document.addEventListener("mousedown", eventHandler);
|
|
2507
|
+
return () => {
|
|
2508
|
+
window.removeEventListener("resize", resizeHandler, true);
|
|
2509
|
+
document.removeEventListener("scroll", eventHandler, true);
|
|
2510
|
+
document.removeEventListener("mousedown", eventHandler);
|
|
2511
|
+
};
|
|
2512
|
+
}, [popoverRef]);
|
|
2513
|
+
const popoverClick = () => {
|
|
2514
|
+
var _a;
|
|
2515
|
+
setShowInfo(!showInfo);
|
|
2516
|
+
if (popoverRef.current && buttonRef.current) {
|
|
2517
|
+
const buttonPos = (_a = buttonRef == null ? void 0 : buttonRef.current) == null ? void 0 : _a.getBoundingClientRect();
|
|
2518
|
+
popoverRef.current.style["top"] = `${buttonPos.top + 30}px`;
|
|
2519
|
+
}
|
|
2520
|
+
};
|
|
2521
|
+
const ResolvedItemDetailsRendererComponent = itemDetailsRendererComponent != null ? itemDetailsRendererComponent : DefaultDamItemRenderer;
|
|
2522
|
+
return /* @__PURE__ */ jsx25(
|
|
2523
|
+
"div",
|
|
2524
|
+
{
|
|
2525
|
+
css: [
|
|
2526
|
+
damSelectedItemContainer,
|
|
2527
|
+
css17`
|
|
593
2528
|
margin: 0 0 1rem 0;
|
|
594
|
-
`
|
|
2529
|
+
`
|
|
2530
|
+
],
|
|
2531
|
+
children: /* @__PURE__ */ jsxs14("div", { css: damSelectedItemInner, children: [
|
|
2532
|
+
/* @__PURE__ */ jsxs14("div", { css: damSelectedItemDetails, children: [
|
|
2533
|
+
/* @__PURE__ */ jsxs14("div", { css: damSelectedItemCopy, children: [
|
|
2534
|
+
/* @__PURE__ */ jsx25(
|
|
2535
|
+
"h4",
|
|
2536
|
+
{
|
|
2537
|
+
css: [damSelectedItemTitle],
|
|
2538
|
+
title: `ID: ${selectedItem.id}`,
|
|
2539
|
+
"data-test-id": "dam-selected-item",
|
|
2540
|
+
children: selectedItem.title || selectedItem.id || ""
|
|
2541
|
+
}
|
|
2542
|
+
),
|
|
2543
|
+
selectedItem.popoverData ? /* @__PURE__ */ jsxs14(Fragment6, { children: [
|
|
2544
|
+
/* @__PURE__ */ jsx25(
|
|
2545
|
+
"button",
|
|
2546
|
+
{
|
|
2547
|
+
type: "button",
|
|
2548
|
+
ref: buttonRef,
|
|
2549
|
+
css: damSelectedItemInfoBtn,
|
|
2550
|
+
"aria-controls": "path-details",
|
|
2551
|
+
"aria-expanded": showInfo,
|
|
2552
|
+
onClick: popoverClick,
|
|
2553
|
+
children: /* @__PURE__ */ jsx25(
|
|
2554
|
+
Icon4,
|
|
2555
|
+
{
|
|
2556
|
+
icon: CgInfo2,
|
|
2557
|
+
iconColor: "gray",
|
|
2558
|
+
size: 24,
|
|
2559
|
+
css: css17`
|
|
595
2560
|
opacity: var(--opacity-75);
|
|
596
|
-
`
|
|
2561
|
+
`
|
|
2562
|
+
}
|
|
2563
|
+
)
|
|
2564
|
+
}
|
|
2565
|
+
),
|
|
2566
|
+
/* @__PURE__ */ jsx25(
|
|
2567
|
+
"div",
|
|
2568
|
+
{
|
|
2569
|
+
id: "path-details",
|
|
2570
|
+
"aria-hidden": !showInfo,
|
|
2571
|
+
ref: popoverRef,
|
|
2572
|
+
css: [
|
|
2573
|
+
damSelectedItemPopover,
|
|
2574
|
+
showInfo ? css17`
|
|
597
2575
|
visibility: visible;
|
|
598
|
-
|
|
2576
|
+
` : css17`
|
|
599
2577
|
visibility: hidden;
|
|
600
|
-
`
|
|
2578
|
+
`
|
|
2579
|
+
],
|
|
2580
|
+
children: Object.entries(selectedItem.popoverData).map(([key, value], index) => /* @__PURE__ */ jsxs14("div", { css: damSelectedItemSmallText, children: [
|
|
2581
|
+
/* @__PURE__ */ jsxs14("span", { css: damSelectedItemPopoverLabel, children: [
|
|
2582
|
+
key,
|
|
2583
|
+
":"
|
|
2584
|
+
] }),
|
|
2585
|
+
value
|
|
2586
|
+
] }, index))
|
|
2587
|
+
}
|
|
2588
|
+
)
|
|
2589
|
+
] }) : null
|
|
2590
|
+
] }),
|
|
2591
|
+
/* @__PURE__ */ jsx25(ResolvedItemDetailsRendererComponent, { item: selectedItem })
|
|
2592
|
+
] }),
|
|
2593
|
+
/* @__PURE__ */ jsxs14("div", { css: damSelectedItemLinkContainer, children: [
|
|
2594
|
+
selectedItem.editLink ? typeof selectedItem.editLink === "string" ? /* @__PURE__ */ jsxs14(
|
|
2595
|
+
"a",
|
|
2596
|
+
{
|
|
2597
|
+
href: selectedItem.editLink,
|
|
2598
|
+
title: "edit",
|
|
2599
|
+
rel: "noopener noreferrer",
|
|
2600
|
+
target: "_blank",
|
|
2601
|
+
onClick: (e) => {
|
|
2602
|
+
if (onEditClosed) {
|
|
2603
|
+
openWindowWithCloseCallback(e.currentTarget.href, () => onEditClosed(selectedItem));
|
|
2604
|
+
e.preventDefault();
|
|
2605
|
+
}
|
|
2606
|
+
},
|
|
2607
|
+
css: damSelectedItemLinkBtn,
|
|
2608
|
+
children: [
|
|
2609
|
+
/* @__PURE__ */ jsx25("span", { css: damSelectedItemSmallText, children: "Edit" }),
|
|
2610
|
+
logoIcon ? /* @__PURE__ */ jsx25(Image, { src: logoIcon, css: damSelectedItemIcon, alt: "Logo" }) : null
|
|
2611
|
+
]
|
|
2612
|
+
}
|
|
2613
|
+
) : selectedItem.editLink : null,
|
|
2614
|
+
/* @__PURE__ */ jsxs14(
|
|
2615
|
+
"button",
|
|
2616
|
+
{
|
|
2617
|
+
type: "button",
|
|
2618
|
+
onClick: () => {
|
|
2619
|
+
onDeselect(selectedItem);
|
|
2620
|
+
},
|
|
2621
|
+
css: damSelectedItemLinkBtn,
|
|
2622
|
+
children: [
|
|
2623
|
+
/* @__PURE__ */ jsx25("span", { css: damSelectedItemSmallText, children: "Unlink" }),
|
|
2624
|
+
/* @__PURE__ */ jsx25(Icon4, { icon: CgClose4, iconColor: "red", size: 16 })
|
|
2625
|
+
]
|
|
2626
|
+
}
|
|
2627
|
+
)
|
|
2628
|
+
] })
|
|
2629
|
+
] })
|
|
2630
|
+
},
|
|
2631
|
+
selectedItem.id
|
|
2632
|
+
);
|
|
2633
|
+
}
|
|
2634
|
+
function DefaultDamItemRenderer({ item }) {
|
|
2635
|
+
let preview = null;
|
|
2636
|
+
if (item.previewUrl && typeof item.previewUrl === "string") {
|
|
2637
|
+
if (item.type === "image") {
|
|
2638
|
+
preview = /* @__PURE__ */ jsx25("img", { src: item.previewUrl, alt: item.id, width: "200", css: damSelectItemImage });
|
|
2639
|
+
} else if (item.type === "video") {
|
|
2640
|
+
preview = /* @__PURE__ */ jsx25("video", { src: item.previewUrl, title: item.id, width: "200", controls: true, css: damSelectItemImage });
|
|
2641
|
+
}
|
|
2642
|
+
} else if (item.previewUrl && typeof item.previewUrl !== "string") {
|
|
2643
|
+
preview = item.previewUrl;
|
|
2644
|
+
}
|
|
2645
|
+
return preview || item.metadata ? /* @__PURE__ */ jsxs14("div", { css: damSelectedItemMediaContainer, children: [
|
|
2646
|
+
preview ? /* @__PURE__ */ jsx25("div", { children: preview }) : null,
|
|
2647
|
+
/* @__PURE__ */ jsxs14("ul", { children: [
|
|
2648
|
+
item.metadata ? Object.entries(item.metadata).map(([key, value]) => {
|
|
2649
|
+
return /* @__PURE__ */ jsxs14(
|
|
2650
|
+
"li",
|
|
2651
|
+
{
|
|
2652
|
+
css: [
|
|
2653
|
+
damSelectedItemSmallText,
|
|
2654
|
+
css17`
|
|
601
2655
|
order: 1;
|
|
602
|
-
`
|
|
2656
|
+
`
|
|
2657
|
+
],
|
|
2658
|
+
children: [
|
|
2659
|
+
/* @__PURE__ */ jsxs14(
|
|
2660
|
+
"span",
|
|
2661
|
+
{
|
|
2662
|
+
css: [
|
|
2663
|
+
damSelectedItemPopoverLabel,
|
|
2664
|
+
css17`
|
|
603
2665
|
order: 1;
|
|
604
|
-
`
|
|
2666
|
+
`
|
|
2667
|
+
],
|
|
2668
|
+
children: [
|
|
2669
|
+
key,
|
|
2670
|
+
":"
|
|
2671
|
+
]
|
|
2672
|
+
}
|
|
2673
|
+
),
|
|
2674
|
+
value
|
|
2675
|
+
]
|
|
2676
|
+
},
|
|
2677
|
+
key
|
|
2678
|
+
);
|
|
2679
|
+
}) : null,
|
|
2680
|
+
item.createdDate ? /* @__PURE__ */ jsxs14("li", { css: damSelectedItemSmallText, children: [
|
|
2681
|
+
/* @__PURE__ */ jsx25("span", { css: damSelectedItemPopoverLabel, children: "Date:" }),
|
|
2682
|
+
timeAgo2(item.createdDate)
|
|
2683
|
+
] }) : null
|
|
2684
|
+
] })
|
|
2685
|
+
] }) : null;
|
|
2686
|
+
}
|
|
2687
|
+
|
|
2688
|
+
// src/components/DataResourceVariablesList.tsx
|
|
2689
|
+
import { Callout as Callout3, Input as Input3 } from "@uniformdev/design-system";
|
|
2690
|
+
|
|
2691
|
+
// src/components/UniformMeshLocationContext.tsx
|
|
2692
|
+
import { createContext as createContext2, useContext as useContext4, useEffect as useEffect6, useState as useState6 } from "react";
|
|
2693
|
+
|
|
2694
|
+
// src/components/UniformMeshSdkContext.tsx
|
|
2695
|
+
import { Theme } from "@uniformdev/design-system";
|
|
2696
|
+
import { createContext, useContext as useContext3 } from "react";
|
|
2697
|
+
import { jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
|
|
2698
|
+
var UniformMeshSdkContext = createContext(void 0);
|
|
2699
|
+
var UniformMeshSdkContextProvider = ({ children }) => {
|
|
2700
|
+
let value = void 0;
|
|
2701
|
+
if (typeof window !== "undefined" && typeof window.UniformMeshSDK !== "undefined") {
|
|
2702
|
+
value = {
|
|
2703
|
+
sdk: window.UniformMeshSDK
|
|
2704
|
+
};
|
|
2705
|
+
}
|
|
2706
|
+
return /* @__PURE__ */ jsxs15(UniformMeshSdkContext.Provider, { value, children: [
|
|
2707
|
+
/* @__PURE__ */ jsx26(Theme, {}),
|
|
2708
|
+
/* @__PURE__ */ jsx26(UniformMeshLocationContextProvider, { children })
|
|
2709
|
+
] });
|
|
2710
|
+
};
|
|
2711
|
+
var useUniformMeshSdkContext = () => {
|
|
2712
|
+
const context = useContext3(UniformMeshSdkContext);
|
|
2713
|
+
if (!context) {
|
|
2714
|
+
throw new Error("useUniformMeshSdkContext must be used within <MeshApp /> or <UniformMeshSdkContext />");
|
|
2715
|
+
}
|
|
2716
|
+
return context;
|
|
2717
|
+
};
|
|
2718
|
+
|
|
2719
|
+
// src/hooks/useUniformMeshSdk.ts
|
|
2720
|
+
function useUniformMeshSdk() {
|
|
2721
|
+
const { sdk } = useUniformMeshSdkContext();
|
|
2722
|
+
return sdk;
|
|
2723
|
+
}
|
|
2724
|
+
|
|
2725
|
+
// src/components/UniformMeshLocationContext.tsx
|
|
2726
|
+
import { jsx as jsx27 } from "@emotion/react/jsx-runtime";
|
|
2727
|
+
var UniformMeshLocationContext = createContext2(
|
|
2728
|
+
void 0
|
|
2729
|
+
);
|
|
2730
|
+
var UniformMeshLocationContextProvider = ({
|
|
2731
|
+
children
|
|
2732
|
+
}) => {
|
|
2733
|
+
const sdk = useUniformMeshSdk();
|
|
2734
|
+
const [location, setLocation] = useState6(sdk.getCurrentLocation());
|
|
2735
|
+
const valueChangeListener = (event) => {
|
|
2736
|
+
setLocation((old) => ({ ...old, value: event.newValue }));
|
|
2737
|
+
};
|
|
2738
|
+
useEffect6(() => {
|
|
2739
|
+
sdk.events.on("onValueChanged", valueChangeListener);
|
|
2740
|
+
return () => {
|
|
2741
|
+
sdk.events.off("onValueChanged", valueChangeListener);
|
|
2742
|
+
};
|
|
2743
|
+
}, [sdk]);
|
|
2744
|
+
return /* @__PURE__ */ jsx27(UniformMeshLocationContext.Provider, { value: { location }, children });
|
|
2745
|
+
};
|
|
2746
|
+
var useUniformMeshLocationContext = () => {
|
|
2747
|
+
const context = useContext4(UniformMeshLocationContext);
|
|
2748
|
+
if (!context) {
|
|
2749
|
+
throw new Error("useUniformMeshLocationContext must be used within a UniformMeshLocationContextProvider");
|
|
2750
|
+
}
|
|
2751
|
+
return context;
|
|
2752
|
+
};
|
|
2753
|
+
|
|
2754
|
+
// src/hooks/useMeshLocation.ts
|
|
2755
|
+
var legacyWarned = false;
|
|
2756
|
+
function useMeshLocation(expectedLocation) {
|
|
2757
|
+
const { location } = useUniformMeshLocationContext();
|
|
2758
|
+
let effectiveExpected = expectedLocation;
|
|
2759
|
+
if (expectedLocation === "dataTypeInstance") {
|
|
2760
|
+
effectiveExpected = "dataResource";
|
|
2761
|
+
if (!legacyWarned) {
|
|
2762
|
+
console.warn(
|
|
2763
|
+
"`dataTypeInstance` mesh location is deprecated, please switch to `dataResource` instead."
|
|
2764
|
+
);
|
|
2765
|
+
legacyWarned = true;
|
|
2766
|
+
}
|
|
2767
|
+
}
|
|
2768
|
+
if (effectiveExpected && location.type !== effectiveExpected) {
|
|
2769
|
+
throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
|
|
2770
|
+
}
|
|
2771
|
+
const proxyLocation = {
|
|
2772
|
+
...location,
|
|
2773
|
+
setValue: (dispatch) => {
|
|
2774
|
+
const { newValue, options } = dispatch(location.value);
|
|
2775
|
+
location.setValue(newValue, options);
|
|
2776
|
+
}
|
|
2777
|
+
};
|
|
2778
|
+
return proxyLocation;
|
|
2779
|
+
}
|
|
2780
|
+
|
|
2781
|
+
// src/components/Variables/InputVariables.tsx
|
|
2782
|
+
import { Global } from "@emotion/react";
|
|
2783
|
+
import Tags from "@yaireo/tagify/dist/react.tagify";
|
|
2784
|
+
import * as React11 from "react";
|
|
2785
|
+
|
|
2786
|
+
// src/components/Variables/InputVariables.styles.ts
|
|
2787
|
+
import { css as css18 } from "@emotion/react";
|
|
2788
|
+
var variablesFormContainer = css18`
|
|
605
2789
|
> * {
|
|
606
2790
|
margin: var(--spacing-base) 0 0;
|
|
607
2791
|
}
|
|
608
|
-
|
|
2792
|
+
`;
|
|
2793
|
+
var variablesFormBtnGroup = css18`
|
|
609
2794
|
display: flex;
|
|
610
2795
|
gap: var(--spacing-sm);
|
|
611
|
-
|
|
2796
|
+
`;
|
|
2797
|
+
var tagifyStyles = css18`
|
|
612
2798
|
:root {
|
|
613
2799
|
--tagify-dd-color-primary: rgb(53, 149, 246);
|
|
614
2800
|
--tagify-dd-bg-color: var(--white);
|
|
@@ -1105,14 +3291,256 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
1105
3291
|
opacity: 0;
|
|
1106
3292
|
transition: inherit;
|
|
1107
3293
|
}
|
|
1108
|
-
`;
|
|
3294
|
+
`;
|
|
3295
|
+
|
|
3296
|
+
// src/components/Variables/VariablesProvider.tsx
|
|
3297
|
+
import * as React10 from "react";
|
|
3298
|
+
|
|
3299
|
+
// src/components/Variables/VariableEditor.tsx
|
|
3300
|
+
import { Button as Button2, Input as Input2 } from "@uniformdev/design-system";
|
|
3301
|
+
import { Form, Formik } from "formik";
|
|
3302
|
+
import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
|
|
3303
|
+
function VariableEditor({ variable, onSubmit, onCancel }) {
|
|
3304
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
3305
|
+
const { variables } = useVariables();
|
|
3306
|
+
return /* @__PURE__ */ jsx28(
|
|
3307
|
+
Formik,
|
|
3308
|
+
{
|
|
3309
|
+
initialValues: {
|
|
3310
|
+
name: variable,
|
|
3311
|
+
default: (_b = (_a = variables[variable]) == null ? void 0 : _a.default) != null ? _b : "",
|
|
3312
|
+
displayName: (_d = (_c = variables[variable]) == null ? void 0 : _c.displayName) != null ? _d : "",
|
|
3313
|
+
helpText: (_f = (_e = variables[variable]) == null ? void 0 : _e.helpText) != null ? _f : "",
|
|
3314
|
+
order: (_g = variables[variable]) == null ? void 0 : _g.order,
|
|
3315
|
+
type: (_i = (_h = variables[variable]) == null ? void 0 : _h.type) != null ? _i : ""
|
|
3316
|
+
},
|
|
3317
|
+
onSubmit: (values) => {
|
|
3318
|
+
const finalValue = {
|
|
3319
|
+
...values,
|
|
3320
|
+
helpText: values.helpText || void 0,
|
|
3321
|
+
type: values.type || void 0,
|
|
3322
|
+
displayName: values.displayName || void 0
|
|
3323
|
+
};
|
|
3324
|
+
return onSubmit(finalValue);
|
|
3325
|
+
},
|
|
3326
|
+
children: ({ getFieldProps, initialValues }) => {
|
|
3327
|
+
return /* @__PURE__ */ jsxs16(Form, { css: variablesFormContainer, children: [
|
|
3328
|
+
/* @__PURE__ */ jsx28(
|
|
3329
|
+
Input2,
|
|
3330
|
+
{
|
|
3331
|
+
...getFieldProps("name"),
|
|
3332
|
+
label: "Name",
|
|
3333
|
+
disabled: initialValues.name !== "",
|
|
3334
|
+
caption: "This cannot change once created."
|
|
3335
|
+
}
|
|
3336
|
+
),
|
|
3337
|
+
/* @__PURE__ */ jsx28(
|
|
3338
|
+
Input2,
|
|
3339
|
+
{
|
|
3340
|
+
...getFieldProps("helpText"),
|
|
3341
|
+
label: "Help Text",
|
|
3342
|
+
caption: "Appears in the composition data resource when entering a value for this variable.",
|
|
3343
|
+
autoComplete: "off"
|
|
3344
|
+
}
|
|
3345
|
+
),
|
|
3346
|
+
/* @__PURE__ */ jsx28(Input2, { ...getFieldProps("default"), label: "Default Value", autoComplete: "off" }),
|
|
3347
|
+
/* @__PURE__ */ jsxs16("div", { css: variablesFormBtnGroup, children: [
|
|
3348
|
+
/* @__PURE__ */ jsx28(Button2, { type: "submit", children: "Save" }),
|
|
3349
|
+
/* @__PURE__ */ jsx28(Button2, { type: "button", buttonType: "ghost", onClick: onCancel, children: "cancel" })
|
|
3350
|
+
] })
|
|
3351
|
+
] });
|
|
3352
|
+
}
|
|
3353
|
+
}
|
|
3354
|
+
);
|
|
3355
|
+
}
|
|
3356
|
+
|
|
3357
|
+
// src/components/Variables/VariablesProvider.tsx
|
|
3358
|
+
import { jsx as jsx29, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
|
|
3359
|
+
var VariablesContext = React10.createContext(null);
|
|
3360
|
+
function VariablesProvider({
|
|
3361
|
+
value,
|
|
3362
|
+
onChange,
|
|
3363
|
+
editVariableComponent,
|
|
3364
|
+
children
|
|
3365
|
+
}) {
|
|
3366
|
+
const [editing, setEditing] = React10.useState();
|
|
3367
|
+
const Editor2 = editVariableComponent != null ? editVariableComponent : VariableEditor;
|
|
3368
|
+
const contextValue = {
|
|
3369
|
+
dispatch: (event) => {
|
|
3370
|
+
if (event.type === "set") {
|
|
3371
|
+
const { name, ...varValue } = event.variable;
|
|
3372
|
+
onChange({ ...contextValue.variables, [event.variable.name]: varValue });
|
|
3373
|
+
if (event.openEditor) {
|
|
3374
|
+
setEditing(event.variable.name);
|
|
3375
|
+
}
|
|
3376
|
+
} else if (event.type === "edit") {
|
|
3377
|
+
setEditing(event.variable);
|
|
3378
|
+
} else if (event.type === "remove") {
|
|
3379
|
+
const newValue = { ...value };
|
|
3380
|
+
delete newValue[event.variable];
|
|
3381
|
+
onChange(newValue);
|
|
3382
|
+
} else if (event.type === "reorder") {
|
|
3383
|
+
onChange(event.result);
|
|
3384
|
+
} else {
|
|
3385
|
+
throw new Error(`Unknown event ${JSON.stringify(event)}`);
|
|
3386
|
+
}
|
|
3387
|
+
},
|
|
3388
|
+
variables: value
|
|
3389
|
+
};
|
|
3390
|
+
return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
|
|
3391
|
+
children,
|
|
3392
|
+
typeof editing !== "undefined" ? /* @__PURE__ */ jsx29(
|
|
3393
|
+
Editor2,
|
|
3394
|
+
{
|
|
3395
|
+
onSubmit: (val) => {
|
|
3396
|
+
setEditing(void 0);
|
|
3397
|
+
const { name, ...varValue } = val;
|
|
3398
|
+
onChange({ ...value, [name]: varValue });
|
|
3399
|
+
},
|
|
3400
|
+
onCancel: () => setEditing(void 0),
|
|
3401
|
+
variable: editing
|
|
3402
|
+
}
|
|
3403
|
+
) : null
|
|
3404
|
+
] });
|
|
3405
|
+
}
|
|
3406
|
+
function useVariables() {
|
|
3407
|
+
const context = React10.useContext(VariablesContext);
|
|
3408
|
+
if (!context) {
|
|
3409
|
+
throw new Error("No VariablesProvider present");
|
|
3410
|
+
}
|
|
3411
|
+
return context;
|
|
3412
|
+
}
|
|
3413
|
+
|
|
3414
|
+
// src/components/Variables/InputVariables.tsx
|
|
3415
|
+
import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
|
|
3416
|
+
function cleanTagifyValue(rawValue) {
|
|
3417
|
+
return rawValue.replace(/\${{.*?"value":"([^"]+)".*?}}/g, "${$1}").replace(/[\r\n]+/g, "");
|
|
3418
|
+
}
|
|
3419
|
+
function InputVariables({
|
|
3420
|
+
"aria-label": ariaLabel,
|
|
3421
|
+
value,
|
|
3422
|
+
disableVariables,
|
|
3423
|
+
onChange,
|
|
3424
|
+
onPaste
|
|
3425
|
+
}) {
|
|
3426
|
+
const { variables, dispatch } = useVariables();
|
|
3427
|
+
const currentVariables = React11.useRef(variables);
|
|
3428
|
+
const currentDispatch = React11.useRef(dispatch);
|
|
3429
|
+
const currentSetValue = React11.useRef(onChange);
|
|
3430
|
+
const tagifyRef = React11.useRef();
|
|
3431
|
+
React11.useEffect(() => {
|
|
3432
|
+
currentVariables.current = variables;
|
|
3433
|
+
}, [variables]);
|
|
3434
|
+
React11.useEffect(() => {
|
|
3435
|
+
currentDispatch.current = dispatch;
|
|
3436
|
+
}, [dispatch]);
|
|
3437
|
+
React11.useEffect(() => {
|
|
3438
|
+
currentSetValue.current = onChange;
|
|
3439
|
+
}, [onChange]);
|
|
3440
|
+
React11.useEffect(() => {
|
|
3441
|
+
var _a;
|
|
3442
|
+
if (((_a = tagifyRef == null ? void 0 : tagifyRef.current) == null ? void 0 : _a.DOM) && onPaste) {
|
|
3443
|
+
tagifyRef.current.DOM.input.onpaste = () => {
|
|
3444
|
+
var _a2, _b;
|
|
3445
|
+
return onPaste(cleanTagifyValue((_b = (_a2 = tagifyRef.current) == null ? void 0 : _a2.getInputValue()) != null ? _b : ""));
|
|
3446
|
+
};
|
|
3447
|
+
}
|
|
3448
|
+
});
|
|
3449
|
+
React11.useEffect(() => {
|
|
3450
|
+
var _a, _b, _c;
|
|
3451
|
+
const currentTagifyValue = cleanTagifyValue((_b = (_a = tagifyRef.current) == null ? void 0 : _a.getInputValue()) != null ? _b : "");
|
|
3452
|
+
if (value !== currentTagifyValue) {
|
|
3453
|
+
(_c = tagifyRef.current) == null ? void 0 : _c.loadOriginalValues(value);
|
|
3454
|
+
}
|
|
3455
|
+
}, [value]);
|
|
3456
|
+
const handleSetValue = React11.useCallback((rawValue) => {
|
|
3457
|
+
currentSetValue.current(cleanTagifyValue(rawValue));
|
|
3458
|
+
}, []);
|
|
3459
|
+
const handleAddTag = React11.useCallback((newTagName) => {
|
|
3460
|
+
if (!currentVariables.current[newTagName]) {
|
|
3461
|
+
currentDispatch.current({
|
|
3462
|
+
type: "set",
|
|
3463
|
+
variable: { name: newTagName, default: "" },
|
|
3464
|
+
openEditor: true
|
|
3465
|
+
});
|
|
3466
|
+
}
|
|
3467
|
+
}, []);
|
|
3468
|
+
return /* @__PURE__ */ jsxs18(Fragment7, { children: [
|
|
3469
|
+
/* @__PURE__ */ jsx30(Global, { styles: tagifyStyles }),
|
|
3470
|
+
/* @__PURE__ */ jsx30(
|
|
3471
|
+
Tags,
|
|
3472
|
+
{
|
|
3473
|
+
tagifyRef,
|
|
3474
|
+
"aria-label": ariaLabel,
|
|
3475
|
+
defaultValue: value,
|
|
3476
|
+
autoFocus: false,
|
|
3477
|
+
whitelist: Object.entries(variables).map(([k, v]) => {
|
|
3478
|
+
var _a;
|
|
3479
|
+
return { name: (_a = v.displayName) != null ? _a : k, value: k };
|
|
3480
|
+
}),
|
|
3481
|
+
settings: {
|
|
3482
|
+
pattern: disableVariables ? null : /\$/,
|
|
3483
|
+
enforceWhitelist: disableVariables,
|
|
3484
|
+
mixTagsInterpolator: ["${", "}"],
|
|
3485
|
+
duplicates: true,
|
|
3486
|
+
tagTextProp: "name",
|
|
3487
|
+
dropdown: {
|
|
3488
|
+
position: "text",
|
|
3489
|
+
enabled: 0,
|
|
3490
|
+
mapValueTo: (v) => v.name,
|
|
3491
|
+
includeSelectedTags: true,
|
|
3492
|
+
searchKeys: ["name", "value"],
|
|
3493
|
+
highlightFirst: true
|
|
3494
|
+
}
|
|
3495
|
+
},
|
|
3496
|
+
InputMode: "textarea",
|
|
3497
|
+
onAdd: (e) => {
|
|
3498
|
+
var _a;
|
|
3499
|
+
const newTagName = (_a = e.detail.data) == null ? void 0 : _a.value;
|
|
3500
|
+
if (newTagName) {
|
|
3501
|
+
handleAddTag(newTagName);
|
|
3502
|
+
}
|
|
3503
|
+
},
|
|
3504
|
+
onRemove: (e) => {
|
|
3505
|
+
handleSetValue(e.detail.tagify.getInputValue());
|
|
3506
|
+
},
|
|
3507
|
+
onChange: (e) => {
|
|
3508
|
+
handleSetValue(e.detail.value);
|
|
3509
|
+
},
|
|
3510
|
+
onInput: (e) => {
|
|
3511
|
+
handleSetValue(e.detail.tagify.getInputValue());
|
|
3512
|
+
}
|
|
3513
|
+
}
|
|
3514
|
+
)
|
|
3515
|
+
] });
|
|
3516
|
+
}
|
|
3517
|
+
|
|
3518
|
+
// src/components/Variables/VariablesList.tsx
|
|
3519
|
+
import { css as css20 } from "@emotion/react";
|
|
3520
|
+
import {
|
|
3521
|
+
AddListButton,
|
|
3522
|
+
button,
|
|
3523
|
+
Icon as Icon5,
|
|
3524
|
+
Table,
|
|
3525
|
+
TableBody,
|
|
3526
|
+
TableCellData,
|
|
3527
|
+
TableCellHead,
|
|
3528
|
+
TableHead,
|
|
3529
|
+
TableRow
|
|
3530
|
+
} from "@uniformdev/design-system";
|
|
3531
|
+
import { DragDropContext as DragDropContext2, Draggable as Draggable2, Droppable as Droppable2 } from "react-beautiful-dnd";
|
|
3532
|
+
|
|
3533
|
+
// src/components/Variables/styles/VariablesList.styles.ts
|
|
3534
|
+
import { css as css19 } from "@emotion/react";
|
|
3535
|
+
var tableRow = (isDragging) => css19`
|
|
1109
3536
|
position: relative;
|
|
1110
|
-
${
|
|
3537
|
+
${isDragging ? `
|
|
1111
3538
|
display: table;
|
|
1112
3539
|
left: auto !important;
|
|
1113
3540
|
top: auto !important;
|
|
1114
|
-
|
|
1115
|
-
|
|
3541
|
+
` : void 0}
|
|
3542
|
+
`;
|
|
3543
|
+
var tableCellDragIcon = css19`
|
|
1116
3544
|
&::after {
|
|
1117
3545
|
content: '';
|
|
1118
3546
|
display: block;
|
|
@@ -1129,7 +3557,8 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
1129
3557
|
&:hover::after {
|
|
1130
3558
|
opacity: 1;
|
|
1131
3559
|
}
|
|
1132
|
-
|
|
3560
|
+
`;
|
|
3561
|
+
var variableName = css19`
|
|
1133
3562
|
border: none;
|
|
1134
3563
|
color: var(--brand-secondary-5);
|
|
1135
3564
|
font-weight: var(--fw-medium);
|
|
@@ -1139,27 +3568,995 @@ var Go=Object.defineProperty;var Ho=(e,t)=>{for(var r in t)Go(e,r,{get:t[r],enum
|
|
|
1139
3568
|
text-overflow: ellipsis;
|
|
1140
3569
|
white-space: nowrap;
|
|
1141
3570
|
max-width: 20ch;
|
|
1142
|
-
|
|
3571
|
+
`;
|
|
3572
|
+
var variableValue = css19`
|
|
1143
3573
|
overflow: hidden;
|
|
1144
3574
|
text-overflow: ellipsis;
|
|
1145
3575
|
white-space: nowrap;
|
|
1146
3576
|
max-width: 20ch;
|
|
1147
|
-
`;
|
|
3577
|
+
`;
|
|
3578
|
+
|
|
3579
|
+
// src/components/Variables/variablesToList.ts
|
|
3580
|
+
function variablesToList(variables) {
|
|
3581
|
+
return Object.entries(variables || {}).sort(([aKey, a], [bKey, b]) => {
|
|
3582
|
+
var _a, _b;
|
|
3583
|
+
if (a.order && b.order) {
|
|
3584
|
+
return a.order - b.order;
|
|
3585
|
+
} else if (a.order) {
|
|
3586
|
+
return 1;
|
|
3587
|
+
} else if (b.order) {
|
|
3588
|
+
return -1;
|
|
3589
|
+
}
|
|
3590
|
+
return ((_a = a.displayName) != null ? _a : aKey).localeCompare((_b = b.displayName) != null ? _b : bKey);
|
|
3591
|
+
}).map(([name, definition]) => ({
|
|
3592
|
+
name,
|
|
3593
|
+
...definition
|
|
3594
|
+
}));
|
|
3595
|
+
}
|
|
3596
|
+
|
|
3597
|
+
// src/components/Variables/VariablesList.tsx
|
|
3598
|
+
import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
|
|
3599
|
+
function VariablesList() {
|
|
3600
|
+
const { variables, dispatch } = useVariables();
|
|
3601
|
+
const sorted = variablesToList(variables);
|
|
3602
|
+
const onDragEnd = (res) => {
|
|
3603
|
+
var _a, _b;
|
|
3604
|
+
if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
|
|
3605
|
+
const result = [...sorted || []];
|
|
3606
|
+
const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
|
|
3607
|
+
result == null ? void 0 : result.splice(res.destination.index, 0, removed);
|
|
3608
|
+
const resultAsObj = result.reduce(
|
|
3609
|
+
(acc, item, index) => ({
|
|
3610
|
+
...acc,
|
|
3611
|
+
[item.name]: { type: item.type, default: item.default, order: index }
|
|
3612
|
+
}),
|
|
3613
|
+
{}
|
|
3614
|
+
);
|
|
3615
|
+
dispatch({ type: "reorder", result: resultAsObj });
|
|
3616
|
+
return result;
|
|
3617
|
+
}
|
|
3618
|
+
};
|
|
3619
|
+
return /* @__PURE__ */ jsxs19(Fragment8, { children: [
|
|
3620
|
+
/* @__PURE__ */ jsx31(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx31(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs19(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
|
|
3621
|
+
/* @__PURE__ */ jsx31(TableHead, { children: /* @__PURE__ */ jsxs19(TableRow, { children: [
|
|
3622
|
+
/* @__PURE__ */ jsx31(TableCellHead, { children: "Name" }),
|
|
3623
|
+
/* @__PURE__ */ jsx31(TableCellHead, { children: "Default Value" }),
|
|
3624
|
+
/* @__PURE__ */ jsx31(TableCellHead, {})
|
|
3625
|
+
] }) }),
|
|
3626
|
+
/* @__PURE__ */ jsxs19(TableBody, { children: [
|
|
3627
|
+
sorted.map(({ name, displayName, default: defaultValue }, index) => {
|
|
3628
|
+
const text = displayName != null ? displayName : name;
|
|
3629
|
+
return /* @__PURE__ */ jsx31(
|
|
3630
|
+
Draggable2,
|
|
3631
|
+
{
|
|
3632
|
+
draggableId: name,
|
|
3633
|
+
index,
|
|
3634
|
+
isDragDisabled: sorted.length === 1,
|
|
3635
|
+
children: (provided2, snapshot) => /* @__PURE__ */ jsxs19(
|
|
3636
|
+
TableRow,
|
|
3637
|
+
{
|
|
3638
|
+
ref: provided2.innerRef,
|
|
3639
|
+
...provided2.dragHandleProps,
|
|
3640
|
+
...provided2.draggableProps,
|
|
3641
|
+
id: text,
|
|
3642
|
+
css: tableRow(snapshot.isDragging),
|
|
3643
|
+
"data-dragging": snapshot.isDragging,
|
|
3644
|
+
children: [
|
|
3645
|
+
/* @__PURE__ */ jsx31(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx31(
|
|
3646
|
+
"button",
|
|
3647
|
+
{
|
|
3648
|
+
css: variableName,
|
|
3649
|
+
type: "button",
|
|
3650
|
+
onClick: (e) => {
|
|
3651
|
+
e.preventDefault();
|
|
3652
|
+
dispatch({ type: "edit", variable: name });
|
|
3653
|
+
},
|
|
3654
|
+
title: text,
|
|
3655
|
+
children: text
|
|
3656
|
+
}
|
|
3657
|
+
) }),
|
|
3658
|
+
/* @__PURE__ */ jsx31(TableCellData, { children: /* @__PURE__ */ jsx31("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
|
|
3659
|
+
/* @__PURE__ */ jsx31(TableCellData, { align: "right", children: /* @__PURE__ */ jsx31(
|
|
3660
|
+
"button",
|
|
3661
|
+
{
|
|
3662
|
+
type: "button",
|
|
3663
|
+
title: `delete ${text}`,
|
|
3664
|
+
css: [
|
|
3665
|
+
button,
|
|
3666
|
+
css20`
|
|
1148
3667
|
background: transparent;
|
|
1149
|
-
`
|
|
3668
|
+
`
|
|
3669
|
+
],
|
|
3670
|
+
"aria-controls": text,
|
|
3671
|
+
onClick: () => dispatch({ type: "remove", variable: name }),
|
|
3672
|
+
children: /* @__PURE__ */ jsx31(Icon5, { icon: "trash", iconColor: "red" })
|
|
3673
|
+
}
|
|
3674
|
+
) })
|
|
3675
|
+
]
|
|
3676
|
+
}
|
|
3677
|
+
)
|
|
3678
|
+
},
|
|
3679
|
+
name
|
|
3680
|
+
);
|
|
3681
|
+
}),
|
|
3682
|
+
provided.placeholder
|
|
3683
|
+
] })
|
|
3684
|
+
] }) }) }),
|
|
3685
|
+
/* @__PURE__ */ jsx31(
|
|
3686
|
+
AddListButton,
|
|
3687
|
+
{
|
|
3688
|
+
onButtonClick: () => dispatch({ type: "edit", variable: "" }),
|
|
3689
|
+
"aria-label": "Add variable",
|
|
3690
|
+
buttonText: "add variable",
|
|
3691
|
+
icon: "math-plus",
|
|
3692
|
+
css: { marginLeft: "var(--spacing-md)" }
|
|
3693
|
+
}
|
|
3694
|
+
)
|
|
3695
|
+
] });
|
|
3696
|
+
}
|
|
3697
|
+
|
|
3698
|
+
// src/components/DataResourceVariablesList.tsx
|
|
3699
|
+
import { jsx as jsx32, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
|
|
3700
|
+
function DataResourceVariablesList({
|
|
3701
|
+
setVariables,
|
|
3702
|
+
noVariables: NoVariablesComponent,
|
|
3703
|
+
typeRenderers
|
|
3704
|
+
}) {
|
|
3705
|
+
const {
|
|
3706
|
+
value,
|
|
3707
|
+
metadata: { dataType }
|
|
3708
|
+
} = useMeshLocation("dataTypeInstance");
|
|
3709
|
+
const variableDefinitions = variablesToList(dataType.variables);
|
|
3710
|
+
if (variableDefinitions.length === 0) {
|
|
3711
|
+
if (NoVariablesComponent) {
|
|
3712
|
+
return /* @__PURE__ */ jsx32(NoVariablesComponent, {});
|
|
3713
|
+
}
|
|
3714
|
+
return /* @__PURE__ */ jsx32(Callout3, { type: "note", children: "No settings are required." });
|
|
3715
|
+
}
|
|
3716
|
+
return /* @__PURE__ */ jsx32("div", { children: variableDefinitions.map((variableDefinition) => {
|
|
3717
|
+
var _a, _b, _c;
|
|
3718
|
+
const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
|
|
3719
|
+
return /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
|
|
3720
|
+
VariableRenderer,
|
|
3721
|
+
{
|
|
3722
|
+
definition: variableDefinition,
|
|
3723
|
+
value: (_c = (_b = value == null ? void 0 : value[variableDefinition.name]) != null ? _b : variableDefinition.default) != null ? _c : "",
|
|
3724
|
+
setValue: (newVariableValue) => {
|
|
3725
|
+
setVariables((previousValue) => {
|
|
3726
|
+
const isDefaultValue = newVariableValue === variableDefinition.default;
|
|
3727
|
+
const newVariables = { ...previousValue };
|
|
3728
|
+
if (isDefaultValue || newVariableValue === void 0) {
|
|
3729
|
+
delete newVariables[variableDefinition.name];
|
|
3730
|
+
} else {
|
|
3731
|
+
newVariables[variableDefinition.name] = newVariableValue;
|
|
3732
|
+
}
|
|
3733
|
+
return { newValue: newVariables };
|
|
3734
|
+
});
|
|
3735
|
+
}
|
|
3736
|
+
}
|
|
3737
|
+
) }, variableDefinition.name);
|
|
3738
|
+
}) });
|
|
3739
|
+
}
|
|
3740
|
+
function TextVariableRenderer({ definition, value, setValue }) {
|
|
3741
|
+
return /* @__PURE__ */ jsxs20("div", { children: [
|
|
3742
|
+
/* @__PURE__ */ jsx32(
|
|
3743
|
+
Input3,
|
|
3744
|
+
{
|
|
3745
|
+
label: definition.displayName || definition.name,
|
|
3746
|
+
value,
|
|
3747
|
+
caption: definition.helpText,
|
|
3748
|
+
onChange: (e) => {
|
|
3749
|
+
setValue(e.target.value);
|
|
3750
|
+
}
|
|
3751
|
+
}
|
|
3752
|
+
),
|
|
3753
|
+
definition.default !== "" ? /* @__PURE__ */ jsxs20("small", { children: [
|
|
3754
|
+
"Default value: ",
|
|
3755
|
+
definition.default
|
|
3756
|
+
] }) : null
|
|
3757
|
+
] });
|
|
3758
|
+
}
|
|
3759
|
+
|
|
3760
|
+
// src/components/Request/RequestBody.tsx
|
|
3761
|
+
import { css as css22 } from "@emotion/react";
|
|
3762
|
+
import Editor from "@monaco-editor/react";
|
|
3763
|
+
import { InputSelect as InputSelect4 } from "@uniformdev/design-system";
|
|
3764
|
+
import { useState as useState8 } from "react";
|
|
3765
|
+
|
|
3766
|
+
// src/components/Request/RequestProvider.tsx
|
|
3767
|
+
import * as React12 from "react";
|
|
3768
|
+
import { jsx as jsx33 } from "@emotion/react/jsx-runtime";
|
|
3769
|
+
var RequestContext = React12.createContext(null);
|
|
3770
|
+
function RequestProvider({ value, onChange, children }) {
|
|
3771
|
+
const contextValue = React12.useMemo(() => {
|
|
3772
|
+
return {
|
|
3773
|
+
dispatch: (event) => {
|
|
3774
|
+
if (event.type === "setRelativeUrl") {
|
|
3775
|
+
onChange((old) => ({
|
|
3776
|
+
...old,
|
|
3777
|
+
relativeUrl: event.relativeUrl
|
|
3778
|
+
}));
|
|
3779
|
+
} else if (event.type === "updateParameter") {
|
|
3780
|
+
onChange((old) => {
|
|
3781
|
+
const newParameters = [...old.parameters];
|
|
3782
|
+
if (typeof event.index === "number") {
|
|
3783
|
+
newParameters[event.index] = event.parameter;
|
|
3784
|
+
} else {
|
|
3785
|
+
newParameters.push(event.parameter);
|
|
3786
|
+
}
|
|
3787
|
+
return { ...old, parameters: newParameters };
|
|
3788
|
+
});
|
|
3789
|
+
} else if (event.type === "removeParameter") {
|
|
3790
|
+
onChange((old) => {
|
|
3791
|
+
const newParameters = [...old.parameters];
|
|
3792
|
+
newParameters.splice(event.index, 1);
|
|
3793
|
+
return { ...old, parameters: newParameters };
|
|
3794
|
+
});
|
|
3795
|
+
} else if (event.type === "updateHeader") {
|
|
3796
|
+
onChange((old) => {
|
|
3797
|
+
const newHeaders = [...old.headers];
|
|
3798
|
+
if (typeof event.index !== "undefined") {
|
|
3799
|
+
newHeaders[event.index] = event.header;
|
|
3800
|
+
} else {
|
|
3801
|
+
newHeaders.push(event.header);
|
|
3802
|
+
}
|
|
3803
|
+
return { ...old, headers: newHeaders };
|
|
3804
|
+
});
|
|
3805
|
+
} else if (event.type === "removeHeader") {
|
|
3806
|
+
onChange((old) => {
|
|
3807
|
+
const newHeaders = [...old.headers];
|
|
3808
|
+
newHeaders.splice(event.index, 1);
|
|
3809
|
+
return { ...old, headers: newHeaders };
|
|
3810
|
+
});
|
|
3811
|
+
} else if (event.type === "setMethod") {
|
|
3812
|
+
onChange((old) => ({ ...old, method: event.method }));
|
|
3813
|
+
} else if (event.type === "setBody") {
|
|
3814
|
+
onChange((old) => {
|
|
3815
|
+
const newHeaders = [...old.headers];
|
|
3816
|
+
const contentTypeIndex = newHeaders.findIndex(
|
|
3817
|
+
({ key }) => key.trim().toLocaleLowerCase() === "content-type"
|
|
3818
|
+
);
|
|
3819
|
+
if (contentTypeIndex > -1) {
|
|
3820
|
+
newHeaders[contentTypeIndex].value = event.contentType;
|
|
3821
|
+
} else {
|
|
3822
|
+
newHeaders.push({ key: "Content-Type", value: event.contentType });
|
|
3823
|
+
}
|
|
3824
|
+
return {
|
|
3825
|
+
...old,
|
|
3826
|
+
body: event.body,
|
|
3827
|
+
headers: newHeaders
|
|
3828
|
+
};
|
|
3829
|
+
});
|
|
3830
|
+
} else {
|
|
3831
|
+
throw new Error(`Unknown event ${JSON.stringify(event)}`);
|
|
3832
|
+
}
|
|
3833
|
+
},
|
|
3834
|
+
request: value
|
|
3835
|
+
};
|
|
3836
|
+
}, [onChange, value]);
|
|
3837
|
+
return /* @__PURE__ */ jsx33(RequestContext.Provider, { value: contextValue, children });
|
|
3838
|
+
}
|
|
3839
|
+
function useRequest() {
|
|
3840
|
+
const context = React12.useContext(RequestContext);
|
|
3841
|
+
if (!context) {
|
|
3842
|
+
throw new Error("No RequestProvider present");
|
|
3843
|
+
}
|
|
3844
|
+
return context;
|
|
3845
|
+
}
|
|
3846
|
+
|
|
3847
|
+
// src/components/Request/styles/Request.styles.ts
|
|
3848
|
+
import { css as css21 } from "@emotion/react";
|
|
3849
|
+
var innerContentStyles = css21`
|
|
1150
3850
|
background: var(--white);
|
|
1151
|
-
|
|
3851
|
+
`;
|
|
3852
|
+
var requestTypeContainer = (bgColor) => css21`
|
|
1152
3853
|
align-items: start;
|
|
1153
|
-
background: ${
|
|
3854
|
+
background: ${bgColor};
|
|
1154
3855
|
display: grid;
|
|
1155
3856
|
grid-template-columns: 12ch 1fr;
|
|
1156
3857
|
gap: var(--spacing-sm);
|
|
1157
|
-
`;
|
|
3858
|
+
`;
|
|
3859
|
+
|
|
3860
|
+
// src/components/Request/RequestTypeContainer.tsx
|
|
3861
|
+
import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
|
|
3862
|
+
var RequestTypeContainer = ({
|
|
3863
|
+
bgColor = "transparent",
|
|
3864
|
+
children,
|
|
3865
|
+
...props
|
|
3866
|
+
}) => {
|
|
3867
|
+
return /* @__PURE__ */ jsx34("div", { css: requestTypeContainer(bgColor), ...props, children });
|
|
3868
|
+
};
|
|
3869
|
+
|
|
3870
|
+
// src/components/Request/RequestBody.tsx
|
|
3871
|
+
import { jsx as jsx35, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
|
|
3872
|
+
var LANGUAGE_OPTIONS = [
|
|
3873
|
+
{ label: "Text", value: "plaintext" },
|
|
3874
|
+
{ label: "JSON", value: "json" },
|
|
3875
|
+
{ label: "YAML", value: "yaml" },
|
|
3876
|
+
{ label: "JavaScript", value: "javascript" },
|
|
3877
|
+
{ label: "XML", value: "xml" },
|
|
3878
|
+
{ label: "HTML", value: "html" }
|
|
3879
|
+
];
|
|
3880
|
+
var LANGUAGE_TO_CONTENT_TYPE = {
|
|
3881
|
+
plaintext: "text/plain",
|
|
3882
|
+
json: "application/json",
|
|
3883
|
+
yaml: "application/x-yaml",
|
|
3884
|
+
javascript: "application/javascript",
|
|
3885
|
+
xml: "application/xml",
|
|
3886
|
+
html: "text/html"
|
|
3887
|
+
};
|
|
3888
|
+
function RequestBody() {
|
|
3889
|
+
const { request, dispatch } = useRequest();
|
|
3890
|
+
const [language, setLanguage] = useState8("json");
|
|
3891
|
+
return /* @__PURE__ */ jsxs21(
|
|
3892
|
+
"div",
|
|
3893
|
+
{
|
|
3894
|
+
css: css22`
|
|
1158
3895
|
background: var(--white);
|
|
1159
|
-
`,
|
|
3896
|
+
`,
|
|
3897
|
+
children: [
|
|
3898
|
+
/* @__PURE__ */ jsx35(
|
|
3899
|
+
RequestTypeContainer,
|
|
3900
|
+
{
|
|
3901
|
+
bgColor: "var(--gray-100)",
|
|
3902
|
+
css: css22`
|
|
1160
3903
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
1161
|
-
`,
|
|
3904
|
+
`,
|
|
3905
|
+
children: /* @__PURE__ */ jsx35(
|
|
3906
|
+
InputSelect4,
|
|
3907
|
+
{
|
|
3908
|
+
label: "Language",
|
|
3909
|
+
showLabel: false,
|
|
3910
|
+
options: LANGUAGE_OPTIONS,
|
|
3911
|
+
value: language,
|
|
3912
|
+
onChange: (e) => {
|
|
3913
|
+
const selectedLanguage = e.currentTarget.value;
|
|
3914
|
+
setLanguage(selectedLanguage);
|
|
3915
|
+
if (request.body) {
|
|
3916
|
+
dispatch({
|
|
3917
|
+
type: "setBody",
|
|
3918
|
+
body: request.body,
|
|
3919
|
+
contentType: LANGUAGE_TO_CONTENT_TYPE[selectedLanguage]
|
|
3920
|
+
});
|
|
3921
|
+
}
|
|
3922
|
+
},
|
|
3923
|
+
"data-test-id": "body-select"
|
|
3924
|
+
}
|
|
3925
|
+
)
|
|
3926
|
+
}
|
|
3927
|
+
),
|
|
3928
|
+
/* @__PURE__ */ jsx35(
|
|
3929
|
+
Editor,
|
|
3930
|
+
{
|
|
3931
|
+
height: 200,
|
|
3932
|
+
value: request.body,
|
|
3933
|
+
language,
|
|
3934
|
+
options: {
|
|
3935
|
+
language,
|
|
3936
|
+
minimap: { enabled: false },
|
|
3937
|
+
folding: false
|
|
3938
|
+
},
|
|
3939
|
+
onChange: (body) => {
|
|
3940
|
+
if (body) {
|
|
3941
|
+
dispatch({ type: "setBody", body, contentType: LANGUAGE_TO_CONTENT_TYPE[language] });
|
|
3942
|
+
}
|
|
3943
|
+
}
|
|
3944
|
+
}
|
|
3945
|
+
)
|
|
3946
|
+
]
|
|
3947
|
+
}
|
|
3948
|
+
);
|
|
3949
|
+
}
|
|
3950
|
+
|
|
3951
|
+
// src/components/Request/RequestHeaders.tsx
|
|
3952
|
+
import {
|
|
3953
|
+
Input as Input4,
|
|
3954
|
+
Table as Table2,
|
|
3955
|
+
TableBody as TableBody2,
|
|
3956
|
+
TableCellData as TableCellData2,
|
|
3957
|
+
TableCellHead as TableCellHead2,
|
|
3958
|
+
TableHead as TableHead2,
|
|
3959
|
+
TableRow as TableRow2,
|
|
3960
|
+
WarningMessage
|
|
3961
|
+
} from "@uniformdev/design-system";
|
|
3962
|
+
import { jsx as jsx36, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
|
|
3963
|
+
function RequestHeaders({ disableVariables }) {
|
|
3964
|
+
var _a, _b;
|
|
3965
|
+
const { dispatch, request } = useRequest();
|
|
3966
|
+
const deezHeaders = [...request.headers, { key: "", value: "" }];
|
|
3967
|
+
return /* @__PURE__ */ jsx36("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs22(Table2, { children: [
|
|
3968
|
+
/* @__PURE__ */ jsx36(TableHead2, { children: /* @__PURE__ */ jsxs22(TableRow2, { children: [
|
|
3969
|
+
/* @__PURE__ */ jsx36(TableCellHead2, { children: "Name" }),
|
|
3970
|
+
/* @__PURE__ */ jsx36(TableCellHead2, { children: "Value" })
|
|
3971
|
+
] }) }),
|
|
3972
|
+
/* @__PURE__ */ jsxs22(TableBody2, { children: [
|
|
3973
|
+
(_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
|
|
3974
|
+
return /* @__PURE__ */ jsxs22(TableRow2, { children: [
|
|
3975
|
+
/* @__PURE__ */ jsxs22(TableCellData2, { width: "50%", children: [
|
|
3976
|
+
baseHeader.key,
|
|
3977
|
+
/* @__PURE__ */ jsx36("br", {}),
|
|
3978
|
+
/* @__PURE__ */ jsx36("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx36("small", { children: "from data source" }) })
|
|
3979
|
+
] }),
|
|
3980
|
+
/* @__PURE__ */ jsxs22(TableCellData2, { width: "50%", children: [
|
|
3981
|
+
/* @__PURE__ */ jsx36("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
|
|
3982
|
+
request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ jsx36(WarningMessage, { message: "overridden below" }) : null
|
|
3983
|
+
] })
|
|
3984
|
+
] }, baseHeader.key);
|
|
3985
|
+
}),
|
|
3986
|
+
deezHeaders.map((header, index) => /* @__PURE__ */ jsxs22(TableRow2, { children: [
|
|
3987
|
+
/* @__PURE__ */ jsx36(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx36(
|
|
3988
|
+
Input4,
|
|
3989
|
+
{
|
|
3990
|
+
label: header.key,
|
|
3991
|
+
value: header.key,
|
|
3992
|
+
showLabel: false,
|
|
3993
|
+
onChange: (e) => {
|
|
3994
|
+
if (e.currentTarget.value) {
|
|
3995
|
+
dispatch({
|
|
3996
|
+
type: "updateHeader",
|
|
3997
|
+
header: { key: e.currentTarget.value, value: header.value },
|
|
3998
|
+
index
|
|
3999
|
+
});
|
|
4000
|
+
} else {
|
|
4001
|
+
dispatch({ type: "removeHeader", index });
|
|
4002
|
+
}
|
|
4003
|
+
},
|
|
4004
|
+
"data-test-id": "header-key"
|
|
4005
|
+
}
|
|
4006
|
+
) }),
|
|
4007
|
+
/* @__PURE__ */ jsx36(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx36(
|
|
4008
|
+
Input4,
|
|
4009
|
+
{
|
|
4010
|
+
showLabel: false,
|
|
4011
|
+
label: header.value,
|
|
4012
|
+
value: header.value,
|
|
4013
|
+
onChange: (e) => dispatch({
|
|
4014
|
+
type: "updateHeader",
|
|
4015
|
+
header: { key: header.key, value: e.currentTarget.value },
|
|
4016
|
+
index
|
|
4017
|
+
}),
|
|
4018
|
+
"data-test-id": "header-value"
|
|
4019
|
+
}
|
|
4020
|
+
) : null })
|
|
4021
|
+
] }, index))
|
|
4022
|
+
] })
|
|
4023
|
+
] }) });
|
|
4024
|
+
}
|
|
4025
|
+
|
|
4026
|
+
// src/components/Request/RequestMethodSelect.tsx
|
|
4027
|
+
import { InputSelect as InputSelect5 } from "@uniformdev/design-system";
|
|
4028
|
+
import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
|
|
4029
|
+
function RequestMethodSelect(props) {
|
|
4030
|
+
var _a;
|
|
4031
|
+
const { request, dispatch } = useRequest();
|
|
4032
|
+
return /* @__PURE__ */ jsx37(
|
|
4033
|
+
InputSelect5,
|
|
4034
|
+
{
|
|
4035
|
+
...props,
|
|
4036
|
+
options: [
|
|
4037
|
+
{ label: "GET", value: "GET" },
|
|
4038
|
+
{ label: "POST", value: "POST" },
|
|
4039
|
+
{ label: "HEAD", value: "HEAD" }
|
|
4040
|
+
],
|
|
4041
|
+
value: (_a = request.method) != null ? _a : "GET",
|
|
4042
|
+
onChange: (e) => dispatch({ type: "setMethod", method: e.currentTarget.value })
|
|
4043
|
+
}
|
|
4044
|
+
);
|
|
4045
|
+
}
|
|
4046
|
+
|
|
4047
|
+
// src/components/Request/RequestParameters.tsx
|
|
4048
|
+
import {
|
|
4049
|
+
Input as Input5,
|
|
4050
|
+
Table as Table3,
|
|
4051
|
+
TableBody as TableBody3,
|
|
4052
|
+
TableCellData as TableCellData3,
|
|
4053
|
+
TableCellHead as TableCellHead3,
|
|
4054
|
+
TableHead as TableHead3,
|
|
4055
|
+
TableRow as TableRow3,
|
|
4056
|
+
WarningMessage as WarningMessage2
|
|
4057
|
+
} from "@uniformdev/design-system";
|
|
4058
|
+
import { jsx as jsx38, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
|
|
4059
|
+
function RequestParameters({ disableVariables }) {
|
|
4060
|
+
var _a, _b;
|
|
4061
|
+
const { dispatch, request } = useRequest();
|
|
4062
|
+
const deezParameters = [...request.parameters, { key: "", value: "" }];
|
|
4063
|
+
return /* @__PURE__ */ jsx38("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs23(Table3, { children: [
|
|
4064
|
+
/* @__PURE__ */ jsx38(TableHead3, { children: /* @__PURE__ */ jsxs23(TableRow3, { children: [
|
|
4065
|
+
/* @__PURE__ */ jsx38(TableCellHead3, { children: "Name" }),
|
|
4066
|
+
/* @__PURE__ */ jsx38(TableCellHead3, { children: "Value" })
|
|
4067
|
+
] }) }),
|
|
4068
|
+
/* @__PURE__ */ jsxs23(TableBody3, { children: [
|
|
4069
|
+
(_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
|
|
4070
|
+
return /* @__PURE__ */ jsxs23(TableRow3, { children: [
|
|
4071
|
+
/* @__PURE__ */ jsxs23(TableCellData3, { width: "50%", children: [
|
|
4072
|
+
baseParameter.key,
|
|
4073
|
+
/* @__PURE__ */ jsx38("br", {}),
|
|
4074
|
+
/* @__PURE__ */ jsx38("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx38("small", { children: "from data source" }) })
|
|
4075
|
+
] }),
|
|
4076
|
+
/* @__PURE__ */ jsxs23(TableCellData3, { width: "50%", children: [
|
|
4077
|
+
/* @__PURE__ */ jsx38("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
|
|
4078
|
+
request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ jsx38(WarningMessage2, { message: "overridden below" }) : null
|
|
4079
|
+
] })
|
|
4080
|
+
] }, baseParameter.key);
|
|
4081
|
+
}),
|
|
4082
|
+
deezParameters.map((parameter, index) => /* @__PURE__ */ jsxs23(TableRow3, { children: [
|
|
4083
|
+
/* @__PURE__ */ jsx38(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx38(
|
|
4084
|
+
Input5,
|
|
4085
|
+
{
|
|
4086
|
+
label: parameter.key,
|
|
4087
|
+
value: parameter.key,
|
|
4088
|
+
showLabel: false,
|
|
4089
|
+
onChange: (e) => {
|
|
4090
|
+
if (e.currentTarget.value) {
|
|
4091
|
+
dispatch({
|
|
4092
|
+
type: "updateParameter",
|
|
4093
|
+
parameter: { key: e.currentTarget.value, value: parameter.value },
|
|
4094
|
+
index
|
|
4095
|
+
});
|
|
4096
|
+
} else {
|
|
4097
|
+
dispatch({ type: "removeParameter", index });
|
|
4098
|
+
}
|
|
4099
|
+
},
|
|
4100
|
+
"data-test-id": "parameter-key"
|
|
4101
|
+
}
|
|
4102
|
+
) }),
|
|
4103
|
+
/* @__PURE__ */ jsx38(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx38(
|
|
4104
|
+
Input5,
|
|
4105
|
+
{
|
|
4106
|
+
showLabel: false,
|
|
4107
|
+
label: parameter.value,
|
|
4108
|
+
value: parameter.value,
|
|
4109
|
+
onChange: (e) => dispatch({
|
|
4110
|
+
type: "updateParameter",
|
|
4111
|
+
parameter: { key: parameter.key, value: e.currentTarget.value },
|
|
4112
|
+
index
|
|
4113
|
+
}),
|
|
4114
|
+
"data-test-id": "parameter-value"
|
|
4115
|
+
}
|
|
4116
|
+
) : null })
|
|
4117
|
+
] }, index))
|
|
4118
|
+
] })
|
|
4119
|
+
] }) });
|
|
4120
|
+
}
|
|
4121
|
+
|
|
4122
|
+
// src/components/Request/RequestUrl.tsx
|
|
4123
|
+
import { css as css23 } from "@emotion/react";
|
|
4124
|
+
import { useMemo as useMemo4 } from "react";
|
|
4125
|
+
|
|
4126
|
+
// src/components/Request/urlEncodeRequestParameter.ts
|
|
4127
|
+
function urlEncodeRequestUrl(url, varValues) {
|
|
4128
|
+
return decodeVariablesInUrlEncodedString(encodeURI(url), varValues);
|
|
4129
|
+
}
|
|
4130
|
+
function urlEncodeRequestParameter(parameter, varValues) {
|
|
4131
|
+
return {
|
|
4132
|
+
key: decodeVariablesInUrlEncodedString(encodeURIComponent(parameter.key), varValues),
|
|
4133
|
+
value: decodeVariablesInUrlEncodedString(encodeURIComponent(parameter.value), varValues)
|
|
4134
|
+
};
|
|
4135
|
+
}
|
|
4136
|
+
function decodeVariablesInUrlEncodedString(string, varValues) {
|
|
4137
|
+
return string.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
|
|
4138
|
+
var _a;
|
|
4139
|
+
const varName = decodeURIComponent(body);
|
|
4140
|
+
return ((_a = varValues == null ? void 0 : varValues[varName]) == null ? void 0 : _a.default) ? varValues[varName].default : `\${${varName}}`;
|
|
4141
|
+
});
|
|
4142
|
+
}
|
|
4143
|
+
|
|
4144
|
+
// src/components/Request/RequestUrl.tsx
|
|
4145
|
+
import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
|
|
4146
|
+
function RequestUrl() {
|
|
4147
|
+
var _a, _b;
|
|
4148
|
+
const { variables } = useVariables();
|
|
4149
|
+
const { request } = useRequest();
|
|
4150
|
+
const mergedParameters = useMemo4(() => {
|
|
4151
|
+
var _a2;
|
|
4152
|
+
if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
|
|
4153
|
+
return request.parameters;
|
|
4154
|
+
}
|
|
4155
|
+
return request.baseRequest.parameters.filter((baseParam) => !request.parameters.find((p) => p.key === baseParam.key)).concat(request.parameters);
|
|
4156
|
+
}, [(_a = request.baseRequest) == null ? void 0 : _a.parameters, request.parameters]);
|
|
4157
|
+
return /* @__PURE__ */ jsxs24(
|
|
4158
|
+
"small",
|
|
4159
|
+
{
|
|
4160
|
+
css: css23`
|
|
1162
4161
|
display: inline-block;
|
|
1163
4162
|
margin-bottom: var(--spacing-xs);
|
|
1164
4163
|
word-break: break-word;
|
|
1165
|
-
`,
|
|
4164
|
+
`,
|
|
4165
|
+
children: [
|
|
4166
|
+
request.baseRequest ? /* @__PURE__ */ jsx39("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
|
|
4167
|
+
/* @__PURE__ */ jsxs24("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
|
|
4168
|
+
urlEncodeRequestUrl(request.relativeUrl, variables),
|
|
4169
|
+
mergedParameters.length > 0 ? /* @__PURE__ */ jsxs24(Fragment9, { children: [
|
|
4170
|
+
"?",
|
|
4171
|
+
mergedParameters.map((param, index) => {
|
|
4172
|
+
const encoded = urlEncodeRequestParameter(param, variables);
|
|
4173
|
+
return /* @__PURE__ */ jsxs24("span", { children: [
|
|
4174
|
+
index > 0 ? "&" : null,
|
|
4175
|
+
encoded.key,
|
|
4176
|
+
"=",
|
|
4177
|
+
encoded.value
|
|
4178
|
+
] }, index);
|
|
4179
|
+
})
|
|
4180
|
+
] }) : null
|
|
4181
|
+
] })
|
|
4182
|
+
]
|
|
4183
|
+
}
|
|
4184
|
+
);
|
|
4185
|
+
}
|
|
4186
|
+
|
|
4187
|
+
// src/components/Request/RequestUrlInput.tsx
|
|
4188
|
+
import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
|
|
4189
|
+
function RequestUrlInput(props) {
|
|
4190
|
+
const { request, dispatch } = useRequest();
|
|
4191
|
+
return /* @__PURE__ */ jsx40(
|
|
4192
|
+
InputVariables,
|
|
4193
|
+
{
|
|
4194
|
+
...props,
|
|
4195
|
+
value: request.relativeUrl,
|
|
4196
|
+
onPaste: (value) => {
|
|
4197
|
+
var _a, _b, _c;
|
|
4198
|
+
const indexOfQueryString = value.indexOf("?");
|
|
4199
|
+
if (indexOfQueryString >= 0) {
|
|
4200
|
+
let relativeUrl = value.substring(0, indexOfQueryString);
|
|
4201
|
+
if (((_a = request.baseRequest) == null ? void 0 : _a.baseUrl) && relativeUrl.startsWith((_b = request.baseRequest) == null ? void 0 : _b.baseUrl)) {
|
|
4202
|
+
relativeUrl = relativeUrl.substring((_c = request.baseRequest) == null ? void 0 : _c.baseUrl.length);
|
|
4203
|
+
}
|
|
4204
|
+
dispatch({ type: "setRelativeUrl", relativeUrl });
|
|
4205
|
+
for (let index = request.parameters.length - 1; index >= 0; index--) {
|
|
4206
|
+
dispatch({ type: "removeParameter", index });
|
|
4207
|
+
}
|
|
4208
|
+
try {
|
|
4209
|
+
const query = new URLSearchParams(value.substring(indexOfQueryString));
|
|
4210
|
+
query.forEach((value2, key) => {
|
|
4211
|
+
dispatch({ type: "updateParameter", parameter: { key, value: value2 } });
|
|
4212
|
+
});
|
|
4213
|
+
} catch (e) {
|
|
4214
|
+
}
|
|
4215
|
+
}
|
|
4216
|
+
},
|
|
4217
|
+
onChange: (value) => {
|
|
4218
|
+
dispatch({ type: "setRelativeUrl", relativeUrl: value });
|
|
4219
|
+
}
|
|
4220
|
+
}
|
|
4221
|
+
);
|
|
4222
|
+
}
|
|
4223
|
+
|
|
4224
|
+
// src/components/DataSourceEditor.tsx
|
|
4225
|
+
import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
|
|
4226
|
+
function DataSourceEditor({ onChange, children }) {
|
|
4227
|
+
var _a;
|
|
4228
|
+
const { value } = useMeshLocation("dataSource");
|
|
4229
|
+
const currentRequestValue = convertDataSourceToRequestData(value);
|
|
4230
|
+
return /* @__PURE__ */ jsx41(
|
|
4231
|
+
VariablesProvider,
|
|
4232
|
+
{
|
|
4233
|
+
value: (_a = value.variables) != null ? _a : {},
|
|
4234
|
+
onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
|
|
4235
|
+
children: /* @__PURE__ */ jsx41(
|
|
4236
|
+
RequestProvider,
|
|
4237
|
+
{
|
|
4238
|
+
value: currentRequestValue,
|
|
4239
|
+
onChange: (requestDispatch) => {
|
|
4240
|
+
onChange((previousDataSource) => {
|
|
4241
|
+
const previousDataSourceAsRequestData = convertDataSourceToRequestData(previousDataSource);
|
|
4242
|
+
const updatedRequestData = requestDispatch(previousDataSourceAsRequestData);
|
|
4243
|
+
return {
|
|
4244
|
+
newValue: convertRequestDataToDataSource(previousDataSource, updatedRequestData)
|
|
4245
|
+
};
|
|
4246
|
+
});
|
|
4247
|
+
},
|
|
4248
|
+
children
|
|
4249
|
+
}
|
|
4250
|
+
)
|
|
4251
|
+
}
|
|
4252
|
+
);
|
|
4253
|
+
}
|
|
4254
|
+
function convertDataSourceToRequestData(dataSource) {
|
|
4255
|
+
var _a, _b, _c;
|
|
4256
|
+
return {
|
|
4257
|
+
headers: (_a = dataSource == null ? void 0 : dataSource.headers) != null ? _a : [],
|
|
4258
|
+
parameters: (_b = dataSource == null ? void 0 : dataSource.parameters) != null ? _b : [],
|
|
4259
|
+
relativeUrl: (_c = dataSource == null ? void 0 : dataSource.baseUrl) != null ? _c : ""
|
|
4260
|
+
};
|
|
4261
|
+
}
|
|
4262
|
+
function convertRequestDataToDataSource(dataSource, requestData) {
|
|
4263
|
+
return {
|
|
4264
|
+
...dataSource,
|
|
4265
|
+
baseUrl: requestData.relativeUrl,
|
|
4266
|
+
headers: requestData.headers.length ? requestData.headers : void 0,
|
|
4267
|
+
parameters: requestData.parameters
|
|
4268
|
+
};
|
|
4269
|
+
}
|
|
4270
|
+
|
|
4271
|
+
// src/components/DataTypeEditor.tsx
|
|
4272
|
+
import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
|
|
4273
|
+
function DataTypeEditor({ onChange, children }) {
|
|
4274
|
+
var _a;
|
|
4275
|
+
const {
|
|
4276
|
+
value,
|
|
4277
|
+
metadata: { dataSource }
|
|
4278
|
+
} = useMeshLocation("dataType");
|
|
4279
|
+
const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
|
|
4280
|
+
return /* @__PURE__ */ jsx42(
|
|
4281
|
+
VariablesProvider,
|
|
4282
|
+
{
|
|
4283
|
+
value: (_a = value.variables) != null ? _a : {},
|
|
4284
|
+
onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
|
|
4285
|
+
children: /* @__PURE__ */ jsx42(
|
|
4286
|
+
RequestProvider,
|
|
4287
|
+
{
|
|
4288
|
+
value: currentRequestValue,
|
|
4289
|
+
onChange: (requestDispatch) => {
|
|
4290
|
+
onChange((previousDataType) => {
|
|
4291
|
+
const previousDataTypeAsRequestData = convertDataTypeToRequestData(previousDataType, dataSource);
|
|
4292
|
+
const updatedRequestData = requestDispatch(previousDataTypeAsRequestData);
|
|
4293
|
+
return {
|
|
4294
|
+
newValue: convertRequestDataToDataType(previousDataType, updatedRequestData)
|
|
4295
|
+
};
|
|
4296
|
+
});
|
|
4297
|
+
},
|
|
4298
|
+
children
|
|
4299
|
+
}
|
|
4300
|
+
)
|
|
4301
|
+
}
|
|
4302
|
+
);
|
|
4303
|
+
}
|
|
4304
|
+
function convertDataTypeToRequestData(dataType, dataSource) {
|
|
4305
|
+
var _a, _b;
|
|
4306
|
+
return {
|
|
4307
|
+
...dataType,
|
|
4308
|
+
headers: (_a = dataType.headers) != null ? _a : [],
|
|
4309
|
+
parameters: (_b = dataType.parameters) != null ? _b : [],
|
|
4310
|
+
relativeUrl: dataType.path,
|
|
4311
|
+
baseRequest: {
|
|
4312
|
+
baseUrl: dataSource.baseUrl,
|
|
4313
|
+
headers: dataSource.headers,
|
|
4314
|
+
parameters: dataSource.parameters
|
|
4315
|
+
}
|
|
4316
|
+
};
|
|
4317
|
+
}
|
|
4318
|
+
function convertRequestDataToDataType(dataType, requestData) {
|
|
4319
|
+
var _a;
|
|
4320
|
+
return {
|
|
4321
|
+
...dataType,
|
|
4322
|
+
path: requestData.relativeUrl,
|
|
4323
|
+
headers: requestData.headers.length ? requestData.headers : void 0,
|
|
4324
|
+
parameters: requestData.parameters.length ? requestData.parameters : void 0,
|
|
4325
|
+
method: (_a = requestData.method) != null ? _a : "GET",
|
|
4326
|
+
body: requestData.body
|
|
4327
|
+
};
|
|
4328
|
+
}
|
|
4329
|
+
|
|
4330
|
+
// src/components/MeshApp.tsx
|
|
4331
|
+
import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniformdev/design-system";
|
|
4332
|
+
|
|
4333
|
+
// src/hooks/useInitializeUniformMeshSdk.ts
|
|
4334
|
+
import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
|
|
4335
|
+
import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
|
|
4336
|
+
var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
|
|
4337
|
+
const [error, setError] = useState9();
|
|
4338
|
+
const [sdk, setSdk] = useState9();
|
|
4339
|
+
const initializationInProgress = useRef8(false);
|
|
4340
|
+
useEffect8(
|
|
4341
|
+
() => {
|
|
4342
|
+
if (typeof window === "undefined" || sdk) {
|
|
4343
|
+
return;
|
|
4344
|
+
}
|
|
4345
|
+
if (typeof window.UniformMeshSDK === "undefined" && !initializationInProgress.current) {
|
|
4346
|
+
initializationInProgress.current = true;
|
|
4347
|
+
initializeUniformMeshSDK({ autoResizingDisabled }).then((sdk2) => {
|
|
4348
|
+
setSdk(sdk2);
|
|
4349
|
+
}).catch((err) => {
|
|
4350
|
+
setError(err);
|
|
4351
|
+
}).finally(() => {
|
|
4352
|
+
initializationInProgress.current = false;
|
|
4353
|
+
});
|
|
4354
|
+
} else {
|
|
4355
|
+
setSdk(window.UniformMeshSDK);
|
|
4356
|
+
}
|
|
4357
|
+
},
|
|
4358
|
+
[autoResizingDisabled]
|
|
4359
|
+
);
|
|
4360
|
+
return {
|
|
4361
|
+
initializing: !sdk && !error,
|
|
4362
|
+
error,
|
|
4363
|
+
sdk
|
|
4364
|
+
};
|
|
4365
|
+
};
|
|
4366
|
+
|
|
4367
|
+
// src/components/MeshApp.tsx
|
|
4368
|
+
import { jsx as jsx43, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
|
|
4369
|
+
var MeshApp = ({
|
|
4370
|
+
children,
|
|
4371
|
+
loadingComponent,
|
|
4372
|
+
errorComponent
|
|
4373
|
+
}) => {
|
|
4374
|
+
const { initializing, error, sdk } = useInitializeUniformMeshSdk();
|
|
4375
|
+
if (initializing || !sdk) {
|
|
4376
|
+
const LoadingComponent = loadingComponent;
|
|
4377
|
+
return LoadingComponent ? /* @__PURE__ */ jsx43(LoadingComponent, {}) : /* @__PURE__ */ jsx43(LoadingIndicator2, {});
|
|
4378
|
+
}
|
|
4379
|
+
if (error) {
|
|
4380
|
+
const ErrorComponent = errorComponent;
|
|
4381
|
+
if (ErrorComponent) {
|
|
4382
|
+
return /* @__PURE__ */ jsx43(ErrorComponent, { error });
|
|
4383
|
+
}
|
|
4384
|
+
throw error;
|
|
4385
|
+
}
|
|
4386
|
+
return /* @__PURE__ */ jsxs25(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
|
|
4387
|
+
/* @__PURE__ */ jsx43(Theme2, {}),
|
|
4388
|
+
/* @__PURE__ */ jsx43(UniformMeshLocationContextProvider, { children })
|
|
4389
|
+
] });
|
|
4390
|
+
};
|
|
4391
|
+
|
|
4392
|
+
// src/hooks/useUniformMeshLocation.ts
|
|
4393
|
+
function useUniformMeshLocation() {
|
|
4394
|
+
const { location } = useUniformMeshLocationContext();
|
|
4395
|
+
return location;
|
|
4396
|
+
}
|
|
4397
|
+
|
|
4398
|
+
// src/utils/createLocationValidator.ts
|
|
4399
|
+
function createLocationValidator(setValue, validate) {
|
|
4400
|
+
return (dispatch) => setValue((previous) => {
|
|
4401
|
+
const { newValue, options } = dispatch(previous);
|
|
4402
|
+
return { newValue, options: validate(newValue, options) };
|
|
4403
|
+
});
|
|
4404
|
+
}
|
|
4405
|
+
|
|
4406
|
+
// src/index.ts
|
|
4407
|
+
import {
|
|
4408
|
+
AddListButton as AddListButton2,
|
|
4409
|
+
Button as Button3,
|
|
4410
|
+
Callout as Callout4,
|
|
4411
|
+
Heading,
|
|
4412
|
+
Input as Input6,
|
|
4413
|
+
InputComboBox,
|
|
4414
|
+
InputKeywordSearch as InputKeywordSearch2,
|
|
4415
|
+
InputSelect as InputSelect6,
|
|
4416
|
+
InputToggle,
|
|
4417
|
+
InputKeywordSearch as InputKeywordSearch3,
|
|
4418
|
+
Label,
|
|
4419
|
+
LoadingIndicator as LoadingIndicator3,
|
|
4420
|
+
LoadingOverlay as LoadingOverlay2,
|
|
4421
|
+
Menu as Menu2,
|
|
4422
|
+
MenuItem as MenuItem2,
|
|
4423
|
+
ScrollableList,
|
|
4424
|
+
ScrollableListItem,
|
|
4425
|
+
Switch,
|
|
4426
|
+
Textarea,
|
|
4427
|
+
Theme as Theme3
|
|
4428
|
+
} from "@uniformdev/design-system";
|
|
4429
|
+
export * from "@uniformdev/mesh-sdk";
|
|
4430
|
+
export {
|
|
4431
|
+
AddListButton2 as AddListButton,
|
|
4432
|
+
Button3 as Button,
|
|
4433
|
+
Callout4 as Callout,
|
|
4434
|
+
DamSelectedItem,
|
|
4435
|
+
DataResourceVariablesList,
|
|
4436
|
+
DataSourceEditor,
|
|
4437
|
+
DataTypeEditor,
|
|
4438
|
+
DefaultSearchRow,
|
|
4439
|
+
DefaultSelectedItem,
|
|
4440
|
+
EntrySearch,
|
|
4441
|
+
Heading,
|
|
4442
|
+
icons_exports as Icons,
|
|
4443
|
+
Input6 as Input,
|
|
4444
|
+
InputComboBox,
|
|
4445
|
+
InputKeywordSearch2 as InputKeywordSearch,
|
|
4446
|
+
InputSelect6 as InputSelect,
|
|
4447
|
+
InputToggle,
|
|
4448
|
+
InputVariables,
|
|
4449
|
+
InputKeywordSearch3 as KeywordSearchInput,
|
|
4450
|
+
Label,
|
|
4451
|
+
LoadingIndicator3 as LoadingIndicator,
|
|
4452
|
+
LoadingOverlay2 as LoadingOverlay,
|
|
4453
|
+
Menu2 as Menu,
|
|
4454
|
+
MenuItem2 as MenuItem,
|
|
4455
|
+
MeshApp,
|
|
4456
|
+
ProductPreviewList,
|
|
4457
|
+
ProductQuery,
|
|
4458
|
+
ProductQueryContext,
|
|
4459
|
+
ProductSearch,
|
|
4460
|
+
ProductSearchContext,
|
|
4461
|
+
ProductSearchRow,
|
|
4462
|
+
ProductSelectedItem,
|
|
4463
|
+
RequestBody,
|
|
4464
|
+
RequestHeaders,
|
|
4465
|
+
RequestMethodSelect,
|
|
4466
|
+
RequestParameters,
|
|
4467
|
+
RequestProvider,
|
|
4468
|
+
RequestTypeContainer,
|
|
4469
|
+
RequestUrl,
|
|
4470
|
+
RequestUrlInput,
|
|
4471
|
+
ResolvableLoadingValue,
|
|
4472
|
+
ScrollableList,
|
|
4473
|
+
ScrollableListItem,
|
|
4474
|
+
SelectionField,
|
|
4475
|
+
Switch,
|
|
4476
|
+
TextVariableRenderer,
|
|
4477
|
+
Textarea,
|
|
4478
|
+
Theme3 as Theme,
|
|
4479
|
+
UniformMeshLocationContext,
|
|
4480
|
+
UniformMeshLocationContextProvider,
|
|
4481
|
+
UniformMeshSdkContext,
|
|
4482
|
+
UniformMeshSdkContextProvider,
|
|
4483
|
+
VariableEditor,
|
|
4484
|
+
VariablesList,
|
|
4485
|
+
VariablesProvider,
|
|
4486
|
+
badgeIcon,
|
|
4487
|
+
createLocationValidator,
|
|
4488
|
+
damSelectItemImage,
|
|
4489
|
+
damSelectedItemContainer,
|
|
4490
|
+
damSelectedItemCopy,
|
|
4491
|
+
damSelectedItemDetails,
|
|
4492
|
+
damSelectedItemIcon,
|
|
4493
|
+
damSelectedItemInfoBtn,
|
|
4494
|
+
damSelectedItemInner,
|
|
4495
|
+
damSelectedItemLinkBtn,
|
|
4496
|
+
damSelectedItemLinkContainer,
|
|
4497
|
+
damSelectedItemMediaContainer,
|
|
4498
|
+
damSelectedItemPopover,
|
|
4499
|
+
damSelectedItemPopoverLabel,
|
|
4500
|
+
damSelectedItemSmallText,
|
|
4501
|
+
damSelectedItemTitle,
|
|
4502
|
+
draggableContainer,
|
|
4503
|
+
draggableIcon,
|
|
4504
|
+
draggableIconOffset,
|
|
4505
|
+
draggableIconWrapper,
|
|
4506
|
+
entrySearchBtn,
|
|
4507
|
+
entrySearchConfig,
|
|
4508
|
+
entrySearchConfigHidden,
|
|
4509
|
+
entrySearchLoadMoreBtn,
|
|
4510
|
+
entrySearchResultList,
|
|
4511
|
+
entrySearchSelectIcon,
|
|
4512
|
+
entrySearchSelectImg,
|
|
4513
|
+
entrySearchSelectInput,
|
|
4514
|
+
entrySearchSelectOption,
|
|
4515
|
+
entrySearchWrapper,
|
|
4516
|
+
productSearchRowActiveIcon,
|
|
4517
|
+
productSearchRowCategory,
|
|
4518
|
+
productSearchRowContainer,
|
|
4519
|
+
productSearchRowContent,
|
|
4520
|
+
productSearchRowContentActive,
|
|
4521
|
+
productSearchRowDetails,
|
|
4522
|
+
productSearchRowTitle,
|
|
4523
|
+
productSelectedItemContainer,
|
|
4524
|
+
productSelectedItemContent,
|
|
4525
|
+
productSelectedItemDetails,
|
|
4526
|
+
productSelectedItemIcon,
|
|
4527
|
+
productSelectedItemImage,
|
|
4528
|
+
productSelectedItemLinkContainer,
|
|
4529
|
+
productedSelectedItemLinkBtn,
|
|
4530
|
+
productedSelectedItemSmallText,
|
|
4531
|
+
searchRowBtn,
|
|
4532
|
+
searchRowContainer,
|
|
4533
|
+
searchRowContainerActive,
|
|
4534
|
+
searchRowContainerWithPopover,
|
|
4535
|
+
searchRowPopover,
|
|
4536
|
+
searchRowText,
|
|
4537
|
+
searchRowTextSmall,
|
|
4538
|
+
selectItemLinkBtn,
|
|
4539
|
+
selectItemLinkContainer,
|
|
4540
|
+
selectItemPopover,
|
|
4541
|
+
selectItemPopoverLabel,
|
|
4542
|
+
selectItemSmallText,
|
|
4543
|
+
selectedItemContainer,
|
|
4544
|
+
selectedItemCopy,
|
|
4545
|
+
selectedItemDetails,
|
|
4546
|
+
selectedItemIcon,
|
|
4547
|
+
selectedItemInner,
|
|
4548
|
+
selectedItemTitle,
|
|
4549
|
+
urlEncodeRequestParameter,
|
|
4550
|
+
urlEncodeRequestUrl,
|
|
4551
|
+
useInitializeUniformMeshSdk,
|
|
4552
|
+
useMeshLocation,
|
|
4553
|
+
useProductQueryContext,
|
|
4554
|
+
useProductSearchContext,
|
|
4555
|
+
useRequest,
|
|
4556
|
+
useUniformMeshLocation,
|
|
4557
|
+
useUniformMeshLocationContext,
|
|
4558
|
+
useUniformMeshSdk,
|
|
4559
|
+
useUniformMeshSdkContext,
|
|
4560
|
+
useVariables,
|
|
4561
|
+
variablesToList
|
|
4562
|
+
};
|