@qoretechnologies/reqraft 0.10.37-pr.98.gac01251 → 0.10.37
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/dist/components/form/fields/template/ExampleValueModal.d.ts +11 -1
- package/dist/components/form/fields/template/ExampleValueModal.d.ts.map +1 -1
- package/dist/components/form/fields/template/ExampleValueModal.js +5 -5
- package/dist/components/form/fields/template/ExampleValueModal.js.map +1 -1
- package/dist/helpers/templates.d.ts +7 -5
- package/dist/helpers/templates.d.ts.map +1 -1
- package/dist/helpers/templates.js +12 -5
- package/dist/helpers/templates.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/fields/template/ExampleValueModal.stories.tsx +54 -0
- package/src/components/form/fields/template/ExampleValueModal.tsx +22 -5
- package/src/components/form/fields/template/TemplateField.stories.tsx +15 -1
- package/src/helpers/templates.ts +12 -5
|
@@ -5,6 +5,16 @@ export interface IReqraftTemplateExampleValueModalProps extends Partial<IReqoreM
|
|
|
5
5
|
label?: string;
|
|
6
6
|
/** The FULL serialized example value. */
|
|
7
7
|
value: string;
|
|
8
|
+
/** Copy-action label. @default 'Copy' */
|
|
9
|
+
copyLabel?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Notification shown after a successful copy (prop-overridable so consumers
|
|
12
|
+
* can pass translated copy — same contract as `ReqoreExportModal`).
|
|
13
|
+
* @default 'Example value copied to clipboard'
|
|
14
|
+
*/
|
|
15
|
+
copyNotificationContent?: string;
|
|
16
|
+
/** Notification shown when the browser denies clipboard access. @default 'Could not copy to clipboard' */
|
|
17
|
+
copyFailedNotificationContent?: string;
|
|
8
18
|
}
|
|
9
19
|
/**
|
|
10
20
|
* Full example-value viewer for template/context-data items whose
|
|
@@ -15,5 +25,5 @@ export interface IReqraftTemplateExampleValueModalProps extends Partial<IReqoreM
|
|
|
15
25
|
* this component stays presentation-only (pass `isOpen` yourself only when
|
|
16
26
|
* rendering it standalone, e.g. in a story).
|
|
17
27
|
*/
|
|
18
|
-
export declare const ReqraftTemplateExampleValueModal: import("react").MemoExoticComponent<({ label, value, ...rest }: IReqraftTemplateExampleValueModalProps) => import("react/jsx-runtime").JSX.Element>;
|
|
28
|
+
export declare const ReqraftTemplateExampleValueModal: import("react").MemoExoticComponent<({ label, value, copyLabel, copyNotificationContent, copyFailedNotificationContent, ...rest }: IReqraftTemplateExampleValueModalProps) => import("react/jsx-runtime").JSX.Element>;
|
|
19
29
|
//# sourceMappingURL=ExampleValueModal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleValueModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/template/ExampleValueModal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,WAAW,sCAAuC,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IACxF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ExampleValueModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/template/ExampleValueModal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAGnF,MAAM,WAAW,sCAAuC,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IACxF,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0GAA0G;IAC1G,6BAA6B,CAAC,EAAE,MAAM,CAAC;CACxC;AASD;;;;;;;;GAQG;AACH,eAAO,MAAM,gCAAgC,qIAQxC,sCAAsC,6CAmD1C,CAAC"}
|
|
@@ -78,7 +78,7 @@ var FILL_STYLE = { height: '100%' };
|
|
|
78
78
|
* rendering it standalone, e.g. in a story).
|
|
79
79
|
*/
|
|
80
80
|
exports.ReqraftTemplateExampleValueModal = (0, react_1.memo)(function (_a) {
|
|
81
|
-
var label = _a.label, value = _a.value, rest = __rest(_a, ["label", "value"]);
|
|
81
|
+
var label = _a.label, value = _a.value, _b = _a.copyLabel, copyLabel = _b === void 0 ? 'Copy' : _b, _c = _a.copyNotificationContent, copyNotificationContent = _c === void 0 ? 'Example value copied to clipboard' : _c, _d = _a.copyFailedNotificationContent, copyFailedNotificationContent = _d === void 0 ? 'Could not copy to clipboard' : _d, rest = __rest(_a, ["label", "value", "copyLabel", "copyNotificationContent", "copyFailedNotificationContent"]);
|
|
82
82
|
var addNotification = (0, reqore_1.useReqoreProperty)('addNotification');
|
|
83
83
|
var handleCopyClick = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
84
84
|
var error_1;
|
|
@@ -90,7 +90,7 @@ exports.ReqraftTemplateExampleValueModal = (0, react_1.memo)(function (_a) {
|
|
|
90
90
|
case 1:
|
|
91
91
|
_a.sent();
|
|
92
92
|
addNotification({
|
|
93
|
-
content:
|
|
93
|
+
content: copyNotificationContent,
|
|
94
94
|
intent: 'success',
|
|
95
95
|
duration: 3000,
|
|
96
96
|
});
|
|
@@ -98,7 +98,7 @@ exports.ReqraftTemplateExampleValueModal = (0, react_1.memo)(function (_a) {
|
|
|
98
98
|
case 2:
|
|
99
99
|
error_1 = _a.sent();
|
|
100
100
|
addNotification({
|
|
101
|
-
content:
|
|
101
|
+
content: copyFailedNotificationContent,
|
|
102
102
|
intent: 'danger',
|
|
103
103
|
duration: 3000,
|
|
104
104
|
});
|
|
@@ -106,11 +106,11 @@ exports.ReqraftTemplateExampleValueModal = (0, react_1.memo)(function (_a) {
|
|
|
106
106
|
case 3: return [2 /*return*/];
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
|
-
}); }, [value, addNotification]);
|
|
109
|
+
}); }, [value, addNotification, copyNotificationContent, copyFailedNotificationContent]);
|
|
110
110
|
return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreModal, __assign({ label: label || 'Example value', icon: 'FileTextLine', height: '70vh', className: 'reqraft-template-example-value-modal', bottomActions: [
|
|
111
111
|
{
|
|
112
112
|
position: 'right',
|
|
113
|
-
label:
|
|
113
|
+
label: copyLabel,
|
|
114
114
|
icon: 'ClipboardLine',
|
|
115
115
|
onClick: function () {
|
|
116
116
|
handleCopyClick();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleValueModal.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/template/ExampleValueModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0F;AAE1F,+BAAyD;
|
|
1
|
+
{"version":3,"file":"ExampleValueModal.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/template/ExampleValueModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0F;AAE1F,+BAAyD;AAmBzD;;;;gCAIgC;AAChC,IAAM,UAAU,GAAkB,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAErD;;;;;;;;GAQG;AACU,QAAA,gCAAgC,GAAG,IAAA,YAAI,EAClD,UAAC,EAOwC;IANvC,IAAA,KAAK,WAAA,EACL,KAAK,WAAA,EACL,iBAAkB,EAAlB,SAAS,mBAAG,MAAM,KAAA,EAClB,+BAA6D,EAA7D,uBAAuB,mBAAG,mCAAmC,KAAA,EAC7D,qCAA6D,EAA7D,6BAA6B,mBAAG,6BAA6B,KAAA,EAC1D,IAAI,cANR,2FAOA,CADQ;IAEP,IAAM,eAAe,GAAG,IAAA,0BAAiB,EAAC,iBAAiB,CAAC,CAAC;IAE7D,IAAM,eAAe,GAAG,IAAA,mBAAW,EAAC;;;;;;oBAIhC,qBAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,EAAA;;oBAA1C,SAA0C,CAAC;oBAC3C,eAAe,CAAC;wBACd,OAAO,EAAE,uBAAuB;wBAChC,MAAM,EAAE,SAAS;wBACjB,QAAQ,EAAE,IAAI;qBACf,CAAC,CAAC;;;;oBAEH,eAAe,CAAC;wBACd,OAAO,EAAE,6BAA6B;wBACtC,MAAM,EAAE,QAAQ;wBAChB,QAAQ,EAAE,IAAI;qBACf,CAAC,CAAC;;;;;SAEN,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAC;IAErF,OAAO,CACL,uBAAC,oBAAW,aACV,KAAK,EAAE,KAAK,IAAI,eAAe,EAC/B,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,MAAM,EACb,SAAS,EAAC,sCAAsC,EAChD,aAAa,EAAE;YACb;gBACE,QAAQ,EAAE,OAAO;gBACjB,KAAK,EAAE,SAAS;gBAChB,IAAI,EAAE,eAAe;gBACrB,OAAO,EAAE;oBACP,eAAe,EAAE,CAAC;gBACpB,CAAC;aACF;SACF,IACG,IAAI,cAER,uBAAC,uBAAc,IACb,QAAQ,QACR,KAAK,EAAE,KAAK,EACZ,OAAO,QACP,KAAK,QACL,KAAK,EAAE,UAAU,EACjB,YAAY,EAAE,UAAU,GACxB,IACU,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wCAAgC,CAAC,WAAW,GAAG,kCAAkC,CAAC"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
|
|
2
2
|
import { TReqoreDropdownItem } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
4
|
+
* The DOM ceiling for a serialized example value in a picker item — a
|
|
5
|
+
* binary-carrying field's example (e.g. an email attachment body) can be an
|
|
6
|
+
* entire base64 file, and it must not enter the item wholesale. The VISUAL
|
|
7
|
+
* truncation is not this number: past the ceiling the item also gets a
|
|
8
|
+
* single-line-ellipsis description (`descriptionEffect.noWrap`), which cuts at
|
|
9
|
+
* the popover's ACTUAL rendered width — container-intrinsic, no breakpoints —
|
|
10
|
+
* paired with the "?" action that shows the full value.
|
|
9
11
|
*/
|
|
10
12
|
export declare const TEMPLATE_EXAMPLE_PREVIEW_LENGTH = 150;
|
|
11
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/helpers/templates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EACL,mBAAmB,EAEpB,MAAM,wDAAwD,CAAC;AAMhE
|
|
1
|
+
{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../src/helpers/templates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EACL,mBAAmB,EAEpB,MAAM,wDAAwD,CAAC;AAMhE;;;;;;;;GAQG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE5F,eAAO,MAAM,mBAAmB,UACvB,aAAa,KACnB;IAAE,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;CAI1C,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,MAAM,KAAG,OAK/C,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,MAAM,KAAG,MAG9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,MAAM,KAAG,MAGhD,CAAC;AAEF,eAAO,MAAM,YAAY,cACZ,oBAAoB,SACxB,MAAM,KACZ,mBAAmB,GAAG,SAoBxB,CAAC;AAMF,eAAO,MAAM,qBAAqB,eACrB,oBAAoB,qCAEhB,OAAO,KACrB,oBAgEF,CAAC;AAOF,UAAU,oBAAoB;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,CAAC,MAAM,EAAE,MAAM,GAAG;QAChB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;QAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,eAAO,MAAM,cAAc,eACb,iBAAiB,KAC5B,oBAAoB,GAAG,SAgJzB,CAAC"}
|
|
@@ -27,11 +27,13 @@ var react_1 = require("react");
|
|
|
27
27
|
var ExampleValueModal_1 = require("../components/form/fields/template/ExampleValueModal");
|
|
28
28
|
var expressions_1 = require("./expressions");
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
30
|
+
* The DOM ceiling for a serialized example value in a picker item — a
|
|
31
|
+
* binary-carrying field's example (e.g. an email attachment body) can be an
|
|
32
|
+
* entire base64 file, and it must not enter the item wholesale. The VISUAL
|
|
33
|
+
* truncation is not this number: past the ceiling the item also gets a
|
|
34
|
+
* single-line-ellipsis description (`descriptionEffect.noWrap`), which cuts at
|
|
35
|
+
* the popover's ACTUAL rendered width — container-intrinsic, no breakpoints —
|
|
36
|
+
* paired with the "?" action that shows the full value.
|
|
35
37
|
*/
|
|
36
38
|
exports.TEMPLATE_EXAMPLE_PREVIEW_LENGTH = 150;
|
|
37
39
|
var getTemplateTagStyle = function (meta) {
|
|
@@ -147,6 +149,11 @@ var buildTemplates = function (templates) {
|
|
|
147
149
|
? "".concat(serializedExample.slice(0, exports.TEMPLATE_EXAMPLE_PREVIEW_LENGTH), "\u2026")
|
|
148
150
|
: serializedExample)
|
|
149
151
|
: undefined,
|
|
152
|
+
// Ellipsize ONLY where the "?" full-value affordance exists — for a
|
|
153
|
+
// short value an ellipsis would hide information with no way to
|
|
154
|
+
// reveal it. The single line cuts at the rendered width, so the
|
|
155
|
+
// preview adapts to any popover/panel width without breakpoints.
|
|
156
|
+
descriptionEffect: exampleIsLong ? { noWrap: true } : undefined,
|
|
150
157
|
badge: type,
|
|
151
158
|
metadata: {
|
|
152
159
|
image: logo,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../src/helpers/templates.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAsD;AAMtD,iCAAyC;AACzC,+BAAsC;AACtC,0FAAwG;AACxG,6CAAwD;AAExD
|
|
1
|
+
{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../src/helpers/templates.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qoretechnologies/reqraft",
|
|
3
|
-
"version": "0.10.37
|
|
3
|
+
"version": "0.10.37",
|
|
4
4
|
"description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -58,3 +58,57 @@ export const Default: StoryObj<typeof meta> = {
|
|
|
58
58
|
);
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
|
+
|
|
62
|
+
export const Mobile: StoryObj<typeof meta> = {
|
|
63
|
+
args: {
|
|
64
|
+
// The overridable strings double as the prop-passthrough coverage: the
|
|
65
|
+
// play below asserts THIS notification text, proving consumers (e.g.
|
|
66
|
+
// qorus-ide under Lingui) can supply translated copy.
|
|
67
|
+
copyLabel: 'Copy value',
|
|
68
|
+
copyNotificationContent: 'Value copied',
|
|
69
|
+
copyFailedNotificationContent: 'Copy was blocked',
|
|
70
|
+
},
|
|
71
|
+
parameters: {
|
|
72
|
+
qlip: { viewport: { width: 390, height: 844 } },
|
|
73
|
+
docs: {
|
|
74
|
+
description: {
|
|
75
|
+
story:
|
|
76
|
+
'The phone presentation of the full-value modal — the textarea still fills the modal body at phone width, and every user-visible string (Copy label, both notifications) is prop-overridden here, which doubles as coverage that consumers can pass translated copy.',
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
play: async () => {
|
|
81
|
+
const modal = await waitFor(
|
|
82
|
+
() => {
|
|
83
|
+
const el = document.querySelector('.reqraft-template-example-value-modal');
|
|
84
|
+
if (!el) throw new Error('modal not rendered yet');
|
|
85
|
+
return el;
|
|
86
|
+
},
|
|
87
|
+
{ timeout: 10000 }
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
|
|
91
|
+
await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
|
|
92
|
+
|
|
93
|
+
// The overridden copy label renders…
|
|
94
|
+
const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
|
|
95
|
+
button.textContent?.includes('Copy value')
|
|
96
|
+
);
|
|
97
|
+
await expect(copy).toBeTruthy();
|
|
98
|
+
|
|
99
|
+
// …and the overridden notification content is what surfaces (success or
|
|
100
|
+
// clipboard-denied, both prop-supplied).
|
|
101
|
+
fireEvent.click(copy);
|
|
102
|
+
await waitFor(
|
|
103
|
+
() => {
|
|
104
|
+
const notification = document.querySelector('.reqore-notification');
|
|
105
|
+
if (!notification) throw new Error('no notification yet');
|
|
106
|
+
const text = notification.textContent || '';
|
|
107
|
+
if (!text.includes('Value copied') && !text.includes('Copy was blocked')) {
|
|
108
|
+
throw new Error(`unexpected notification: ${text}`);
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
{ timeout: 10000 }
|
|
112
|
+
);
|
|
113
|
+
},
|
|
114
|
+
};
|
|
@@ -7,6 +7,16 @@ export interface IReqraftTemplateExampleValueModalProps extends Partial<IReqoreM
|
|
|
7
7
|
label?: string;
|
|
8
8
|
/** The FULL serialized example value. */
|
|
9
9
|
value: string;
|
|
10
|
+
/** Copy-action label. @default 'Copy' */
|
|
11
|
+
copyLabel?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Notification shown after a successful copy (prop-overridable so consumers
|
|
14
|
+
* can pass translated copy — same contract as `ReqoreExportModal`).
|
|
15
|
+
* @default 'Example value copied to clipboard'
|
|
16
|
+
*/
|
|
17
|
+
copyNotificationContent?: string;
|
|
18
|
+
/** Notification shown when the browser denies clipboard access. @default 'Could not copy to clipboard' */
|
|
19
|
+
copyFailedNotificationContent?: string;
|
|
10
20
|
}
|
|
11
21
|
|
|
12
22
|
/* Fill the modal's fixed-height body instead of scaling with content: a
|
|
@@ -26,7 +36,14 @@ const FILL_STYLE: CSSProperties = { height: '100%' };
|
|
|
26
36
|
* rendering it standalone, e.g. in a story).
|
|
27
37
|
*/
|
|
28
38
|
export const ReqraftTemplateExampleValueModal = memo(
|
|
29
|
-
({
|
|
39
|
+
({
|
|
40
|
+
label,
|
|
41
|
+
value,
|
|
42
|
+
copyLabel = 'Copy',
|
|
43
|
+
copyNotificationContent = 'Example value copied to clipboard',
|
|
44
|
+
copyFailedNotificationContent = 'Could not copy to clipboard',
|
|
45
|
+
...rest
|
|
46
|
+
}: IReqraftTemplateExampleValueModalProps) => {
|
|
30
47
|
const addNotification = useReqoreProperty('addNotification');
|
|
31
48
|
|
|
32
49
|
const handleCopyClick = useCallback(async () => {
|
|
@@ -35,18 +52,18 @@ export const ReqraftTemplateExampleValueModal = memo(
|
|
|
35
52
|
try {
|
|
36
53
|
await navigator.clipboard.writeText(value);
|
|
37
54
|
addNotification({
|
|
38
|
-
content:
|
|
55
|
+
content: copyNotificationContent,
|
|
39
56
|
intent: 'success',
|
|
40
57
|
duration: 3000,
|
|
41
58
|
});
|
|
42
59
|
} catch (error) {
|
|
43
60
|
addNotification({
|
|
44
|
-
content:
|
|
61
|
+
content: copyFailedNotificationContent,
|
|
45
62
|
intent: 'danger',
|
|
46
63
|
duration: 3000,
|
|
47
64
|
});
|
|
48
65
|
}
|
|
49
|
-
}, [value, addNotification]);
|
|
66
|
+
}, [value, addNotification, copyNotificationContent, copyFailedNotificationContent]);
|
|
50
67
|
|
|
51
68
|
return (
|
|
52
69
|
<ReqoreModal
|
|
@@ -57,7 +74,7 @@ export const ReqraftTemplateExampleValueModal = memo(
|
|
|
57
74
|
bottomActions={[
|
|
58
75
|
{
|
|
59
76
|
position: 'right',
|
|
60
|
-
label:
|
|
77
|
+
label: copyLabel,
|
|
61
78
|
icon: 'ClipboardLine',
|
|
62
79
|
onClick: () => {
|
|
63
80
|
handleCopyClick();
|
|
@@ -744,7 +744,7 @@ export const LongExampleValueTruncatedWithModal: StoryObj<typeof meta> = {
|
|
|
744
744
|
docs: {
|
|
745
745
|
description: {
|
|
746
746
|
story:
|
|
747
|
-
'Every item-affordance combination in one picker: a leaf with a whole-base64-file example gets
|
|
747
|
+
'Every item-affordance combination in one picker: a leaf with a whole-base64-file example gets a single-line ellipsized preview (cut at the popover\'s actual width — no breakpoints) and the "?" action (right) opening the full value in a modal; a hash parent whose own example object is long gets BOTH the "+" select action (left) and the "?"; a small hash parent keeps only the "+"; and a short leaf keeps its full wrapped preview with no actions. Neither previewing nor copying ever selects an item.',
|
|
748
748
|
},
|
|
749
749
|
},
|
|
750
750
|
},
|
|
@@ -765,6 +765,20 @@ export const LongExampleValueTruncatedWithModal: StoryObj<typeof meta> = {
|
|
|
765
765
|
await expect(popover.querySelectorAll('.reqore-menu-item-right-action').length).toBe(2);
|
|
766
766
|
await expect(popover.querySelectorAll('.reqore-menu-item-left-action').length).toBe(2);
|
|
767
767
|
|
|
768
|
+
// Long previews are single-line ellipsized at the RENDERED width
|
|
769
|
+
// (container-intrinsic — the same item adapts to any popover width);
|
|
770
|
+
// short previews keep normal wrapping.
|
|
771
|
+
const descriptions = popover.querySelectorAll('.reqore-button-description');
|
|
772
|
+
const longDescription = Array.from(descriptions).find((el) =>
|
|
773
|
+
el.textContent?.includes('JVBERi0x')
|
|
774
|
+
) as HTMLElement;
|
|
775
|
+
const shortDescription = Array.from(descriptions).find((el) =>
|
|
776
|
+
el.textContent?.includes('invoice.pdf')
|
|
777
|
+
) as HTMLElement;
|
|
778
|
+
await expect(getComputedStyle(longDescription).whiteSpace).toBe('nowrap');
|
|
779
|
+
await expect(longDescription.scrollWidth).toBeGreaterThan(longDescription.clientWidth);
|
|
780
|
+
await expect(getComputedStyle(shortDescription).whiteSpace).not.toBe('nowrap');
|
|
781
|
+
|
|
768
782
|
await _testsClickButton({ selector: '.reqore-menu-item-right-action' });
|
|
769
783
|
|
|
770
784
|
const modal = await waitFor(
|
package/src/helpers/templates.ts
CHANGED
|
@@ -10,11 +10,13 @@ import { ReqraftTemplateExampleValueModal } from '../components/form/fields/temp
|
|
|
10
10
|
import { areQorusTypesCompatible } from './expressions';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
13
|
+
* The DOM ceiling for a serialized example value in a picker item — a
|
|
14
|
+
* binary-carrying field's example (e.g. an email attachment body) can be an
|
|
15
|
+
* entire base64 file, and it must not enter the item wholesale. The VISUAL
|
|
16
|
+
* truncation is not this number: past the ceiling the item also gets a
|
|
17
|
+
* single-line-ellipsis description (`descriptionEffect.noWrap`), which cuts at
|
|
18
|
+
* the popover's ACTUAL rendered width — container-intrinsic, no breakpoints —
|
|
19
|
+
* paired with the "?" action that shows the full value.
|
|
18
20
|
*/
|
|
19
21
|
export const TEMPLATE_EXAMPLE_PREVIEW_LENGTH = 150;
|
|
20
22
|
|
|
@@ -219,6 +221,11 @@ export const buildTemplates = (
|
|
|
219
221
|
: serializedExample
|
|
220
222
|
}`
|
|
221
223
|
: undefined,
|
|
224
|
+
// Ellipsize ONLY where the "?" full-value affordance exists — for a
|
|
225
|
+
// short value an ellipsis would hide information with no way to
|
|
226
|
+
// reveal it. The single line cuts at the rendered width, so the
|
|
227
|
+
// preview adapts to any popover/panel width without breakpoints.
|
|
228
|
+
descriptionEffect: exampleIsLong ? { noWrap: true } : undefined,
|
|
222
229
|
badge: type,
|
|
223
230
|
metadata: {
|
|
224
231
|
image: logo,
|