@qoretechnologies/reqraft 0.10.44-pr.95.gb67bfb7 → 0.10.45-pr.95.gc02205d
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/engine/_structuredData/SchemaDataView.d.ts.map +1 -1
- package/dist/components/form/engine/_structuredData/SchemaDataView.js +60 -14
- package/dist/components/form/engine/_structuredData/SchemaDataView.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/engine/_structuredData/SchemaDataView.stories.tsx +19 -0
- package/src/components/form/engine/_structuredData/SchemaDataView.tsx +74 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SchemaDataView.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/engine/_structuredData/SchemaDataView.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SchemaDataView.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/engine/_structuredData/SchemaDataView.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,gBAAgB,EAEjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAiO1B,MAAM,WAAW,oBAAoB;IACnC,mEAAmE;IACnE,KAAK,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,MAAM,EAAE,gBAAgB,CAAC;IACzB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;OASG;IACH,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAyTD,eAAO,MAAM,cAAc,gFAC2B,oBAAoB,6CASzE,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,UAAW,OAAO,UAAU,OAAO,KAAG,OASrE,CAAC"}
|
|
@@ -31,10 +31,11 @@ var structuredData_1 = require("./structuredData");
|
|
|
31
31
|
* So a described value is rendered the way the form asked for it, in the form's
|
|
32
32
|
* own clothes:
|
|
33
33
|
*
|
|
34
|
-
* - Field names use `
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
34
|
+
* - Field names use `StyledFieldLabel` (a `StyledRowLabel` in the read-only
|
|
35
|
+
* eyebrow treatment) and values use `StyledRowValue` — the very components the
|
|
36
|
+
* option rows above are built from. Not a copy of their CSS: a copy is a
|
|
37
|
+
* second definition of "what a form label looks like", and the two drift the
|
|
38
|
+
* first time either is touched.
|
|
38
39
|
* - Values are formatted by the same `formatOptionValue` the rows use, so an
|
|
39
40
|
* `allowed_values` entry resolves to its display name, a bool to Yes/No, a
|
|
40
41
|
* date to the app's format. The same words appear in the summary, the preview
|
|
@@ -112,15 +113,33 @@ var StyledItemFields = styled_components_1.default.div(templateObject_5 || (temp
|
|
|
112
113
|
* and leave the items ragged against each other, which reads as a rendering
|
|
113
114
|
* fault rather than as a list.
|
|
114
115
|
*/
|
|
115
|
-
|
|
116
|
+
/**
|
|
117
|
+
* A record field's name, in the detail-page vocabulary.
|
|
118
|
+
*
|
|
119
|
+
* Uppercase, tracked and dimmed, so a field name reads as furniture and the
|
|
120
|
+
* VALUE beside it is what the eye lands on. Same treatment the read-only
|
|
121
|
+
* interface panels use, which is the point: an in-editor list of records and a
|
|
122
|
+
* detail-page panel showing the same shape should not look like two components.
|
|
123
|
+
*
|
|
124
|
+
* A variant rather than a change to `StyledRowLabel`: that one is the FORM's own
|
|
125
|
+
* option-row label, and the form's fields are not read-only furniture — they are
|
|
126
|
+
* the things you are about to edit. Composing it keeps the colour, weight base
|
|
127
|
+
* and wrapping behaviour in one place instead of copying them.
|
|
128
|
+
*
|
|
129
|
+
* Applies to the label only. A VALUE is never uppercased: values are frequently
|
|
130
|
+
* case-sensitive — a service method is `onOrderStatus`, not `ONORDERSTATUS` —
|
|
131
|
+
* and the item heading is a value.
|
|
132
|
+
*/
|
|
133
|
+
var StyledFieldLabel = (0, styled_components_1.default)(compactRowStyles_1.StyledRowLabel)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n opacity: 0.55;\n"], ["\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n opacity: 0.55;\n"])));
|
|
134
|
+
var StyledFields = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* The supporting fields step in under the heading, so the heading keeps the\n left edge to itself. This is the half that answers \"the name is written in\n the position of the label\": with the labels indented, it no longer is. */\n padding-left: 14px;\n display: grid;\n grid-template-columns: var(", ", 140px) minmax(0, 1fr);\n column-gap: 10px;\n row-gap: 2px;\n align-items: baseline;\n min-width: 0;\n\n /* A row's value truncates because a row is one line high. The preview is the\n place that shows what the row could not, so a long value wraps here instead\n of ellipsising \u2014 otherwise opening the preview would reveal exactly as\n little as the line above it. */\n .options-readfirst-valuetext {\n white-space: normal;\n overflow: visible;\n text-overflow: clip;\n overflow-wrap: anywhere;\n }\n\n /* Mono faces run visually larger than the UI face at the same pixel size, so\n a literal set at the row's 13px looks a step bolder than the label naming\n it. A hair smaller puts the two back on the same footing. */\n .schema-view-data {\n font-size: 12.5px;\n }\n"], ["\n /* The supporting fields step in under the heading, so the heading keeps the\n left edge to itself. This is the half that answers \"the name is written in\n the position of the label\": with the labels indented, it no longer is. */\n padding-left: 14px;\n display: grid;\n grid-template-columns: var(", ", 140px) minmax(0, 1fr);\n column-gap: 10px;\n row-gap: 2px;\n align-items: baseline;\n min-width: 0;\n\n /* A row's value truncates because a row is one line high. The preview is the\n place that shows what the row could not, so a long value wraps here instead\n of ellipsising \u2014 otherwise opening the preview would reveal exactly as\n little as the line above it. */\n .options-readfirst-valuetext {\n white-space: normal;\n overflow: visible;\n text-overflow: clip;\n overflow-wrap: anywhere;\n }\n\n /* Mono faces run visually larger than the UI face at the same pixel size, so\n a literal set at the row's 13px looks a step bolder than the label naming\n it. A hair smaller puts the two back on the same footing. */\n .schema-view-data {\n font-size: 12.5px;\n }\n"])), LABEL_COL_VAR);
|
|
116
135
|
/** A nested level spans both columns and indents under its own name. */
|
|
117
|
-
var StyledNested = styled_components_1.default.div(
|
|
136
|
+
var StyledNested = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n grid-column: 1 / -1;\n margin-left: 2px;\n padding-left: 10px;\n border-left: 1px solid ", ";\n min-width: 0;\n"], ["\n grid-column: 1 / -1;\n margin-left: 2px;\n padding-left: 10px;\n border-left: 1px solid ", ";\n min-width: 0;\n"])), function (_a) {
|
|
118
137
|
var $border = _a.$border;
|
|
119
138
|
return $border;
|
|
120
139
|
});
|
|
121
|
-
var StyledNestedLabel = styled_components_1.default.div(
|
|
140
|
+
var StyledNestedLabel = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n grid-column: 1 / -1;\n"], ["\n grid-column: 1 / -1;\n"])));
|
|
122
141
|
/** A code value is a block, not a cell: it spans the grid under its own name. */
|
|
123
|
-
var StyledCodeCell = styled_components_1.default.div(
|
|
142
|
+
var StyledCodeCell = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n grid-column: 1 / -1;\n min-width: 0;\n margin: 2px 0 4px;\n"], ["\n grid-column: 1 / -1;\n min-width: 0;\n margin: 2px 0 4px;\n"])));
|
|
124
143
|
/** Look inside a `{type, value}` envelope, once. `isUiEncodedValue` is the
|
|
125
144
|
* engine's single authority on what an envelope is — a looser test would unwrap
|
|
126
145
|
* a real user hash that happens to carry a `value` key and drop its siblings. */
|
|
@@ -137,6 +156,10 @@ var isRecord = function (value) {
|
|
|
137
156
|
* the `%` ceiling stops one long name from taking the whole row when the inset
|
|
138
157
|
* is narrow — a phone, or a deeply nested level.
|
|
139
158
|
*/
|
|
159
|
+
/** Approximate rendered width of one label character, in px. See `labelColumn`. */
|
|
160
|
+
var LABEL_CHAR_PX = 9.5;
|
|
161
|
+
/** Gap to the value, so the longest label is not flush against it. */
|
|
162
|
+
var LABEL_SLACK_PX = 14;
|
|
140
163
|
var labelColumn = function (value, schema) {
|
|
141
164
|
var inner = unwrap(value);
|
|
142
165
|
var records = (Array.isArray(inner) ? inner.map(unwrap) : [inner]).filter(isRecord);
|
|
@@ -146,7 +169,24 @@ var labelColumn = function (value, schema) {
|
|
|
146
169
|
}, 0);
|
|
147
170
|
return Math.max(widest, own);
|
|
148
171
|
}, 0);
|
|
149
|
-
|
|
172
|
+
// px, not `ch`. `ch` is the base font's `0` advance and knows nothing about
|
|
173
|
+
// the label's own treatment — uppercase, semibold, `letter-spacing: 0.06em`,
|
|
174
|
+
// at 12px — so it under-measures by about a tenth. With `overflow-wrap:
|
|
175
|
+
// anywhere` on the label, an under-measured column does not ellipsise, it
|
|
176
|
+
// BREAKS THE NAME IN HALF: `LEGACY_FLAG` came out over two lines the moment
|
|
177
|
+
// the labels became uppercase. Erring high costs a few px of gap; erring low
|
|
178
|
+
// costs a broken word.
|
|
179
|
+
return longest ? "min(".concat(Math.ceil(longest * LABEL_CHAR_PX + LABEL_SLACK_PX), "px, 45%)") : '140px';
|
|
180
|
+
};
|
|
181
|
+
/**
|
|
182
|
+
* `true` when a value is an address a browser can open.
|
|
183
|
+
*
|
|
184
|
+
* Deliberately per VALUE, not per field: a field named `url` frequently holds
|
|
185
|
+
* something that is not one — a bare path, a regex, a template — and offering
|
|
186
|
+
* those a link promises a destination there is not.
|
|
187
|
+
*/
|
|
188
|
+
var isNavigableUrl = function (value) {
|
|
189
|
+
return typeof value === 'string' && /^(https?|wss?|ftps?):\/\//i.test(value);
|
|
150
190
|
};
|
|
151
191
|
/** One field's value, rendered the way its row above renders it. */
|
|
152
192
|
var FieldValue = function (_a) {
|
|
@@ -168,7 +208,13 @@ var FieldValue = function (_a) {
|
|
|
168
208
|
(0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: field.value === true ? 'success' : 'danger', label: formatted })
|
|
169
209
|
: (0, jsx_runtime_1.jsxs)("span", { className: "options-readfirst-valuetext".concat(isChosenLabel ? '' : ' schema-view-data'), style: isChosenLabel ? undefined : { fontFamily: compactRowStyles_1.MONO_FONT_STACK }, children: [image ?
|
|
170
210
|
(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { image: image, size: '14px', style: { flexShrink: 0, marginRight: 6, verticalAlign: 'middle' } })
|
|
171
|
-
: null, formatted
|
|
211
|
+
: null, formatted, isNavigableUrl(field.value) ?
|
|
212
|
+
// The read-only detail views make an address openable, and a
|
|
213
|
+
// preview that shows the same value should not be the one place it
|
|
214
|
+
// is inert. A real anchor, so middle-click and "copy link address"
|
|
215
|
+
// work; `stopPropagation` because the row around it toggles.
|
|
216
|
+
(0, jsx_runtime_1.jsx)("a", { className: 'schema-view-open-url', href: field.value, target: '_blank', rel: 'noreferrer noopener', "aria-label": 'Open in a new tab', style: { marginLeft: 4, verticalAlign: 'middle' }, onClick: function (event) { return event.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'ExternalLinkLine', size: '11px' }) })
|
|
217
|
+
: null] }) }));
|
|
172
218
|
};
|
|
173
219
|
/** One described hash: its fields as label/value pairs in the shared columns. */
|
|
174
220
|
var SchemaRecord = function (_a) {
|
|
@@ -189,7 +235,7 @@ var SchemaRecord = function (_a) {
|
|
|
189
235
|
// A field that describes its own level renders AS that level, indented
|
|
190
236
|
// under its name — the same decision, one step down.
|
|
191
237
|
if (nested && (isRecord(value) || Array.isArray(value))) {
|
|
192
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledNestedLabel, { children: (0, jsx_runtime_1.jsx)(
|
|
238
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledNestedLabel, { children: (0, jsx_runtime_1.jsx)(StyledFieldLabel, { "$color": colors.key, children: labelWithType }) }), (0, jsx_runtime_1.jsx)(StyledNested, { "$border": colors.border, children: (0, jsx_runtime_1.jsx)(SchemaLevel, { value: value, schema: nested, showTypes: showTypes, colors: colors }) })] }, key));
|
|
193
239
|
}
|
|
194
240
|
// A code value is source, and source is read as source: the host's renderer
|
|
195
241
|
// gives it the syntax highlighting (and read-only LSP hover) it has in the
|
|
@@ -197,7 +243,7 @@ var SchemaRecord = function (_a) {
|
|
|
197
243
|
// preview. Flattening it to one mono line — which is what a plain value cell
|
|
198
244
|
// does — throws all of that away for a field whose whole content is code.
|
|
199
245
|
if ((0, readFirst_1.isCodeField)(fieldSchema) && typeof value === 'string') {
|
|
200
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledNestedLabel, { children: (0, jsx_runtime_1.jsx)(
|
|
246
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledNestedLabel, { children: (0, jsx_runtime_1.jsx)(StyledFieldLabel, { "$color": colors.key, children: labelWithType }) }), (0, jsx_runtime_1.jsx)(StyledCodeCell, { onClick: function (event) { return event.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: codePreviewRenderer ?
|
|
201
247
|
codePreviewRenderer({
|
|
202
248
|
value: value,
|
|
203
249
|
name: key,
|
|
@@ -207,7 +253,7 @@ var SchemaRecord = function (_a) {
|
|
|
207
253
|
})
|
|
208
254
|
: (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledCodePreview, { className: 'options-readfirst-code', "$bg": cHover, "$border": "".concat(colors.border, "88"), "$fg": colors.key, children: value }) }) })] }, key));
|
|
209
255
|
}
|
|
210
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
256
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledFieldLabel, { "$color": colors.key, title: label, children: labelWithType }), (0, jsx_runtime_1.jsx)(FieldValue, { field: { type: fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type, value: value }, fieldSchema: fieldSchema, color: colors.key })] }, key));
|
|
211
257
|
}) }));
|
|
212
258
|
};
|
|
213
259
|
/** A level: a list of numbered items, or a single described hash. */
|
|
@@ -257,5 +303,5 @@ var canRenderWithSchema = function (value, schema) {
|
|
|
257
303
|
return isRecord(inner);
|
|
258
304
|
};
|
|
259
305
|
exports.canRenderWithSchema = canRenderWithSchema;
|
|
260
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
306
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
261
307
|
//# sourceMappingURL=SchemaDataView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SchemaDataView.js","sourceRoot":"","sources":["../../../../../src/components/form/engine/_structuredData/SchemaDataView.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,mDAAoG;AAMpG,gDAA0B;AAC1B,wEAAuC;AACvC,6DAA0D;AAC1D,0DAAyD;AACzD,wDAAyG;AACzG,0CASsB;AACtB,mDAAoD;AAEpD
|
|
1
|
+
{"version":3,"file":"SchemaDataView.js","sourceRoot":"","sources":["../../../../../src/components/form/engine/_structuredData/SchemaDataView.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,mDAAoG;AAMpG,gDAA0B;AAC1B,wEAAuC;AACvC,6DAA0D;AAC1D,0DAAyD;AACzD,wDAAyG;AACzG,0CASsB;AACtB,mDAAoD;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,kFAAkF;AAClF,IAAM,aAAa,GAAG,yBAAyB,CAAC;AAEhD,IAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,kJAAA,+EAKlC,IAAA,CAAC;AAEF;;;;;;GAMG;AACH,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,oMAAA,iIAM5B,IAAA,CAAC;AAEF;0DAC0D;AAC1D,IAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,gMAAoB,aACxC,EAAsB,8GAKhC,KALU,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,MAAM;AAAN,CAAM,CAKhC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,+wCAAqD,aAC5E,EAAsB,0ZAOjB,EAA+B,8BACpB,EAAwB,2vBAiB/C,EAAiF,IACpF,KA1BU,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,MAAM;AAAN,CAAM,EAOjB,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,UAAG,OAAO,OAAI;AAAd,CAAc,EACpB,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO;AAAP,CAAO,EAiB/C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAgB,kCAAe,uBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAAlE,CAAkE,CACpF,CAAC;AAEF,qDAAqD;AACrD,IAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,+IAAqB,6BAC7B,EAAwB,6CAGlD,KAH0B,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO;AAAP,CAAO,CAGlD,CAAC;AAEF;;;;;;;GAOG;AACH;;;;;;;;;;;;;;;;GAgBG;AACH,IAAM,gBAAgB,GAAG,IAAA,2BAAM,EAAC,iCAAc,CAAC,sKAAA,mGAK9C,IAAA,CAAC;AAEF,IAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,urCAAA,6TAMA,EAAa,qzBAuB3C,KAvB8B,aAAa,CAuB3C,CAAC;AAEF,wEAAwE;AACxE,IAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,4LAAqB,iGAIzB,EAAwB,sBAElD,KAF0B,UAAC,EAAW;QAAT,OAAO,aAAA;IAAO,OAAA,OAAO;AAAP,CAAO,CAElD,CAAC;AAEF,IAAM,iBAAiB,GAAG,2BAAM,CAAC,GAAG,+FAAA,4BAEnC,IAAA,CAAC;AAEF,iFAAiF;AACjF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,wIAAA,mEAIhC,IAAA,CAAC;AAuBF;;kFAEkF;AAClF,IAAM,MAAM,GAAG,UAAC,IAAa,IAAc,OAAA,CAAC,IAAA,iCAAgB,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAA5C,CAA4C,CAAC;AAExF,IAAM,QAAQ,GAAG,UAAC,KAAc;IAC9B,OAAA,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAA7D,CAA6D,CAAC;AAEhE;;;;;;;;GAQG;AACH,mFAAmF;AACnF,IAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,sEAAsE;AACtE,IAAM,cAAc,GAAG,EAAE,CAAC;AAE1B,IAAM,WAAW,GAAG,UAAC,KAAc,EAAE,MAAwB;IAC3D,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAM,OAAO,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtF,IAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAC,MAAM,EAAE,MAAM;QAC5C,IAAM,GAAG,GAAG,IAAA,uBAAW,EAAC,MAAM,EAAE,MAAM,CAAC,CAAC,MAAM,CAC5C,UAAC,GAAG,EAAE,GAAG;YACP,OAAA,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAA,sBAAU,EAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAsC,CAAC,CAAC,MAAM,CAAC;QAAvF,CAAuF,EACzF,CAAC,CACF,CAAC;QACF,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,CAAC,CAAC;IACN,4EAA4E;IAC5E,6EAA6E;IAC7E,wEAAwE;IACxE,0EAA0E;IAC1E,4EAA4E;IAC5E,6EAA6E;IAC7E,uBAAuB;IACvB,OAAO,OAAO,CAAC,CAAC,CAAC,cAAO,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC,aAAU,CAAC,CAAC,CAAC,OAAO,CAAC;AAClG,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,IAAM,cAAc,GAAG,UAAC,KAAc;IACpC,OAAA,OAAO,KAAK,KAAK,QAAQ,IAAI,4BAA4B,CAAC,IAAI,CAAC,KAAK,CAAC;AAArE,CAAqE,CAAC;AAExE,oEAAoE;AACpE,IAAM,UAAU,GAAG,UAAC,EAQnB;QAPC,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,KAAK,WAAA;IAML,IAAM,SAAS,GAAG,IAAA,6BAAiB,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACxD,6EAA6E;IAC7E,6EAA6E;IAC7E,IAAM,KAAK,GAAG,IAAA,gCAAoB,EAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAE7D,+CAA+C;IAC/C,EAAE;IACF,0EAA0E;IAC1E,4EAA4E;IAC5E,8EAA8E;IAC9E,4EAA4E;IAC5E,0EAA0E;IAC1E,uEAAuE;IACvE,IAAM,aAAa,GAAG,CAAC,CAAC,IAAA,kCAAsB,EAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAEzE,OAAO,CACL,uBAAC,iCAAc,cAAS,KAAK,YAC1B,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;YAC9C,uBAAC,kBAAS,IACR,IAAI,EAAC,OAAO,EACZ,OAAO,QACP,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACnD,KAAK,EAAE,SAAS,GAChB;YACJ,CAAC,CAAC,kCACE,SAAS,EAAE,qCAA8B,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAE,EACnF,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,kCAAe,EAAE,aAEjE,KAAK,CAAC,CAAC;wBACN,uBAAC,mBAAU,IACT,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,GACjE;wBACJ,CAAC,CAAC,IAAI,EACL,SAAS,EACT,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;wBAC5B,6DAA6D;wBAC7D,mEAAmE;wBACnE,mEAAmE;wBACnE,6DAA6D;wBAC7D,8BACE,SAAS,EAAC,sBAAsB,EAChC,IAAI,EAAE,KAAK,CAAC,KAAK,EACjB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,gBACd,mBAAmB,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EACjD,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,eAAe,EAAE,EAAvB,CAAuB,YAE3C,uBAAC,mBAAU,IAAC,IAAI,EAAC,kBAAkB,EAAC,IAAI,EAAC,MAAM,GAAG,GAChD;wBACN,CAAC,CAAC,IAAI,IACD,GAEM,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,iFAAiF;AACjF,IAAM,YAAY,GAAG,UAAC,EAarB;QAZC,MAAM,YAAA,EACN,MAAM,YAAA,EACN,SAAS,eAAA,EACT,MAAM,YAAA,EACN,OAAO,aAAA;IASP,4EAA4E;IAC5E,iFAAiF;IACjF,0EAA0E;IAC1E,IAAM,mBAAmB,GAAG,IAAA,yCAAkB,EAC5C,qCAAiB,EACjB,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,mBAAmB,EAArB,CAAqB,CAC7B,CAAC;IACF,IAAM,MAAM,GAAG,IAAA,yCAAkB,EAAC,qCAAiB,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,MAAM,EAAR,CAAQ,CAAC,CAAC;IAEtE,OAAO,CACP,uBAAC,YAAY,IAAC,SAAS,EAAC,oBAAoB,YACzC,IAAA,uBAAW,EAAC,MAAM,EAAE,MAAM,CAAC;aACzB,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,KAAK,OAAO,EAAf,CAAe,CAAC;aAChC,GAAG,CAAC,UAAC,GAAG;YACT,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAsC,CAAC;YACrE,IAAM,MAAM,GAAI,WAA6D,aAA7D,WAAW,uBAAX,WAAW,CAAoD,UAAU,CAAC;YAC1F,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YAClC,IAAM,KAAK,GAAG,IAAA,sBAAU,EAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YAC3C,IAAM,aAAa,GACjB,SAAS,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAA,CAAC,CAAC,CAAC,UAAG,KAAK,qBAAM,WAAW,CAAC,IAAI,CAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAE5E,uEAAuE;YACvE,qDAAqD;YACrD,IAAI,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;gBACxD,OAAO,CACL,wBAAC,eAAK,CAAC,QAAQ,eACb,uBAAC,iBAAiB,cAChB,uBAAC,gBAAgB,cAAS,MAAM,CAAC,GAAG,YAAG,aAAa,GAAoB,GACtD,EACpB,uBAAC,YAAY,eAAU,MAAM,CAAC,MAAM,YAClC,uBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAI,GACtE,KANI,GAAG,CAOP,CAClB,CAAC;YACJ,CAAC;YAED,4EAA4E;YAC5E,2EAA2E;YAC3E,4EAA4E;YAC5E,6EAA6E;YAC7E,0EAA0E;YAC1E,IAAI,IAAA,uBAAW,EAAC,WAAW,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC1D,OAAO,CACL,wBAAC,eAAK,CAAC,QAAQ,eACb,uBAAC,iBAAiB,cAChB,uBAAC,gBAAgB,cAAS,MAAM,CAAC,GAAG,YAAG,aAAa,GAAoB,GACtD,EACpB,uBAAC,cAAc,IAAC,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,eAAe,EAAE,EAAvB,CAAuB,YACzD,uBAAC,iCAAwB,IACvB,kBAAkB,EAAE,EAAE,EACtB,WAAW,EAAE,EAAE,SAAS,EAAE,4BAA4B,EAAE,YAEvD,mBAAmB,CAAC,CAAC;oCACpB,mBAAmB,CAAC;wCAClB,KAAK,OAAA;wCACL,IAAI,EAAE,GAAG;wCACT,MAAM,EAAE,WAAW;wCACnB,OAAO,EAAE,MAAM;wCACf,MAAM,EAAE,MAAe;qCACxB,CAAC;oCACJ,CAAC,CAAC,uBAAC,oCAAiB,IAChB,SAAS,EAAC,wBAAwB,SAC7B,MAAM,aACF,UAAG,MAAM,CAAC,MAAM,OAAI,SACxB,MAAM,CAAC,GAAG,YAEd,KAAK,GACY,GAEG,GACZ,KA3BE,GAAG,CA4BP,CAClB,CAAC;YACJ,CAAC;YAED,OAAO,CACL,wBAAC,eAAK,CAAC,QAAQ,eACb,uBAAC,gBAAgB,cAAS,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,YAC/C,aAAa,GACG,EACnB,uBAAC,UAAU,IACT,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,KAAK,OAAA,EAAqB,EAC5D,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,MAAM,CAAC,GAAG,GACjB,KARiB,GAAG,CASP,CAClB,CAAC;QACJ,CAAC,CAAC,GACW,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,qEAAqE;AACrE,IAAM,WAAW,GAAG,UAAC,EAUpB;QATC,KAAK,WAAA,EACL,MAAM,YAAA,EACN,SAAS,eAAA,EACT,MAAM,YAAA;IAON,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5B,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,CACL,2DACG,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;gBACrB,IAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC5B,OAAO,CACL,wBAAC,UAAU,IAAa,SAAS,EAAC,kBAAkB,aAClD,wBAAC,YAAY,cAAS,MAAM,CAAC,KAAK,aAAG,KAAK,GAAG,CAAC,SAAiB,EAC/D,uBAAC,gBAAgB,eAAU,MAAM,CAAC,MAAM,YACrC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;gCACjB,6DACG,CAAC;4CACA,IAAM,QAAQ,GAAG,IAAA,0BAAc,EAAC,MAAM,EAAE,MAAM,CAAC,CAAC;4CAChD,IAAI,CAAC,QAAQ,EAAE,CAAC;gDACd,OAAO,IAAI,CAAC;4CACd,CAAC;4CACD,OAAO,CACL,uBAAC,eAAe,IACd,SAAS,EAAC,wBAAwB,YAC1B,MAAM,CAAC,GAAG,WAIX,QAAQ,CAAC,IAAI,aACX,MAAM,CAAC,MAAM,EACtB,KAAK,EAAE,QAAQ,CAAC,KAAK,YAEpB,QAAQ,CAAC,IAAI,GACE,CACnB,CAAC;wCACJ,CAAC,CAAC,EAAE,EACJ,uBAAC,YAAY,IACX,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,IAAA,uBAAW,EAAC,MAAM,EAAE,MAAM,CAAC,GACpC,IACD;gCACL,CAAC,CAAC,uBAAC,iCAAc,cAAS,MAAM,CAAC,GAAG,YAChC,iCACE,SAAS,EAAC,8CAA8C,EACxD,KAAK,EAAE,EAAE,UAAU,EAAE,kCAAe,EAAE,YAErC,IAAA,6BAAiB,EAAC,EAAE,KAAK,EAAE,MAAM,EAAqB,CAAC,GACnD,GACQ,GAEF,KA1CJ,KAAK,CA2CT,CACd,CAAC;YACJ,CAAC,CAAC,GACD,CACJ,CAAC;IACJ,CAAC;IAED,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,uBAAC,YAAY,IAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;IAC/F,CAAC;IAED,OAAO,CACL,uBAAC,gBAAO,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,EAAE,YAC/C,IAAA,6BAAiB,EAAC,EAAE,KAAK,EAAE,KAAK,EAAqB,CAAC,GAC/C,CACX,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,cAAc,GAAG,eAAK,CAAC,IAAI,CACtC,UAAC,EAAuE;;QAArE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,WAAW,iBAAA;IAA6B,OAAA,CAC3E,uBAAC,gBAAgB,IACf,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,CAAA,SAAE,GAAC,aAAa,IAAG,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,IAAyB,CAAA,YAE7E,uBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAI,GAClE,CACpB;AAR4E,CAQ5E,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C;;;;;;GAMG;AACI,IAAM,mBAAmB,GAAG,UAAC,KAAc,EAAE,MAAe;IACjE,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,IAAI,CAAC,UAAC,IAAI,IAAK,OAAA,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAtB,CAAsB,CAAC,CAAC;IACtD,CAAC;IACD,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;AACzB,CAAC,CAAC;AATW,QAAA,mBAAmB,uBAS9B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qoretechnologies/reqraft",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.45-pr.95.gc02205d",
|
|
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",
|
|
@@ -106,5 +106,24 @@ export const Undescribed: Story = {
|
|
|
106
106
|
},
|
|
107
107
|
play: async ({ canvasElement }) => {
|
|
108
108
|
await expect(canvasElement.textContent).toContain('legacy_flag');
|
|
109
|
+
|
|
110
|
+
// A field name renders on ONE line. The label column is measured from the
|
|
111
|
+
// longest name, and the label carries `overflow-wrap: anywhere` — so an
|
|
112
|
+
// under-measured column does not ellipsise, it breaks the name in half.
|
|
113
|
+
// That is exactly what happened when the labels became uppercase and the
|
|
114
|
+
// measurement was still in `ch`, which knows nothing about the tracking:
|
|
115
|
+
// `LEGACY_FLAG` came out over two lines.
|
|
116
|
+
//
|
|
117
|
+
// Asserted as geometry rather than as a width, because the width is the
|
|
118
|
+
// thing that keeps being wrong — the invariant is that the name fits.
|
|
119
|
+
const label = [...canvasElement.querySelectorAll<HTMLElement>('.schema-view-fields > *')].find(
|
|
120
|
+
(element) => (element.textContent ?? '').trim().toLowerCase() === 'legacy_flag'
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
await expect(label).toBeTruthy();
|
|
124
|
+
|
|
125
|
+
const lineHeight = parseFloat(getComputedStyle(label!).lineHeight) || 16;
|
|
126
|
+
|
|
127
|
+
await expect(label!.offsetHeight).toBeLessThan(lineHeight * 1.6);
|
|
109
128
|
},
|
|
110
129
|
};
|
|
@@ -35,10 +35,11 @@ import { isUiEncodedValue } from './structuredData';
|
|
|
35
35
|
* So a described value is rendered the way the form asked for it, in the form's
|
|
36
36
|
* own clothes:
|
|
37
37
|
*
|
|
38
|
-
* - Field names use `
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
38
|
+
* - Field names use `StyledFieldLabel` (a `StyledRowLabel` in the read-only
|
|
39
|
+
* eyebrow treatment) and values use `StyledRowValue` — the very components the
|
|
40
|
+
* option rows above are built from. Not a copy of their CSS: a copy is a
|
|
41
|
+
* second definition of "what a form label looks like", and the two drift the
|
|
42
|
+
* first time either is touched.
|
|
42
43
|
* - Values are formatted by the same `formatOptionValue` the rows use, so an
|
|
43
44
|
* `allowed_values` entry resolves to its display name, a bool to Yes/No, a
|
|
44
45
|
* date to the app's format. The same words appear in the summary, the preview
|
|
@@ -153,6 +154,30 @@ const StyledItemFields = styled.div<{ $border: string }>`
|
|
|
153
154
|
* and leave the items ragged against each other, which reads as a rendering
|
|
154
155
|
* fault rather than as a list.
|
|
155
156
|
*/
|
|
157
|
+
/**
|
|
158
|
+
* A record field's name, in the detail-page vocabulary.
|
|
159
|
+
*
|
|
160
|
+
* Uppercase, tracked and dimmed, so a field name reads as furniture and the
|
|
161
|
+
* VALUE beside it is what the eye lands on. Same treatment the read-only
|
|
162
|
+
* interface panels use, which is the point: an in-editor list of records and a
|
|
163
|
+
* detail-page panel showing the same shape should not look like two components.
|
|
164
|
+
*
|
|
165
|
+
* A variant rather than a change to `StyledRowLabel`: that one is the FORM's own
|
|
166
|
+
* option-row label, and the form's fields are not read-only furniture — they are
|
|
167
|
+
* the things you are about to edit. Composing it keeps the colour, weight base
|
|
168
|
+
* and wrapping behaviour in one place instead of copying them.
|
|
169
|
+
*
|
|
170
|
+
* Applies to the label only. A VALUE is never uppercased: values are frequently
|
|
171
|
+
* case-sensitive — a service method is `onOrderStatus`, not `ONORDERSTATUS` —
|
|
172
|
+
* and the item heading is a value.
|
|
173
|
+
*/
|
|
174
|
+
const StyledFieldLabel = styled(StyledRowLabel)`
|
|
175
|
+
font-size: 12px;
|
|
176
|
+
text-transform: uppercase;
|
|
177
|
+
letter-spacing: 0.06em;
|
|
178
|
+
opacity: 0.55;
|
|
179
|
+
`;
|
|
180
|
+
|
|
156
181
|
const StyledFields = styled.div`
|
|
157
182
|
/* The supporting fields step in under the heading, so the heading keeps the
|
|
158
183
|
left edge to itself. This is the half that answers "the name is written in
|
|
@@ -242,6 +267,12 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
|
|
|
242
267
|
* the `%` ceiling stops one long name from taking the whole row when the inset
|
|
243
268
|
* is narrow — a phone, or a deeply nested level.
|
|
244
269
|
*/
|
|
270
|
+
/** Approximate rendered width of one label character, in px. See `labelColumn`. */
|
|
271
|
+
const LABEL_CHAR_PX = 9.5;
|
|
272
|
+
|
|
273
|
+
/** Gap to the value, so the longest label is not flush against it. */
|
|
274
|
+
const LABEL_SLACK_PX = 14;
|
|
275
|
+
|
|
245
276
|
const labelColumn = (value: unknown, schema: IQorusFormSchema): string => {
|
|
246
277
|
const inner = unwrap(value);
|
|
247
278
|
const records = (Array.isArray(inner) ? inner.map(unwrap) : [inner]).filter(isRecord);
|
|
@@ -253,9 +284,26 @@ const labelColumn = (value: unknown, schema: IQorusFormSchema): string => {
|
|
|
253
284
|
);
|
|
254
285
|
return Math.max(widest, own);
|
|
255
286
|
}, 0);
|
|
256
|
-
|
|
287
|
+
// px, not `ch`. `ch` is the base font's `0` advance and knows nothing about
|
|
288
|
+
// the label's own treatment — uppercase, semibold, `letter-spacing: 0.06em`,
|
|
289
|
+
// at 12px — so it under-measures by about a tenth. With `overflow-wrap:
|
|
290
|
+
// anywhere` on the label, an under-measured column does not ellipsise, it
|
|
291
|
+
// BREAKS THE NAME IN HALF: `LEGACY_FLAG` came out over two lines the moment
|
|
292
|
+
// the labels became uppercase. Erring high costs a few px of gap; erring low
|
|
293
|
+
// costs a broken word.
|
|
294
|
+
return longest ? `min(${Math.ceil(longest * LABEL_CHAR_PX + LABEL_SLACK_PX)}px, 45%)` : '140px';
|
|
257
295
|
};
|
|
258
296
|
|
|
297
|
+
/**
|
|
298
|
+
* `true` when a value is an address a browser can open.
|
|
299
|
+
*
|
|
300
|
+
* Deliberately per VALUE, not per field: a field named `url` frequently holds
|
|
301
|
+
* something that is not one — a bare path, a regex, a template — and offering
|
|
302
|
+
* those a link promises a destination there is not.
|
|
303
|
+
*/
|
|
304
|
+
const isNavigableUrl = (value: unknown): value is string =>
|
|
305
|
+
typeof value === 'string' && /^(https?|wss?|ftps?):\/\//i.test(value);
|
|
306
|
+
|
|
259
307
|
/** One field's value, rendered the way its row above renders it. */
|
|
260
308
|
const FieldValue = ({
|
|
261
309
|
field,
|
|
@@ -302,6 +350,23 @@ const FieldValue = ({
|
|
|
302
350
|
/>
|
|
303
351
|
: null}
|
|
304
352
|
{formatted}
|
|
353
|
+
{isNavigableUrl(field.value) ?
|
|
354
|
+
// The read-only detail views make an address openable, and a
|
|
355
|
+
// preview that shows the same value should not be the one place it
|
|
356
|
+
// is inert. A real anchor, so middle-click and "copy link address"
|
|
357
|
+
// work; `stopPropagation` because the row around it toggles.
|
|
358
|
+
<a
|
|
359
|
+
className='schema-view-open-url'
|
|
360
|
+
href={field.value}
|
|
361
|
+
target='_blank'
|
|
362
|
+
rel='noreferrer noopener'
|
|
363
|
+
aria-label='Open in a new tab'
|
|
364
|
+
style={{ marginLeft: 4, verticalAlign: 'middle' }}
|
|
365
|
+
onClick={(event) => event.stopPropagation()}
|
|
366
|
+
>
|
|
367
|
+
<ReqoreIcon icon='ExternalLinkLine' size='11px' />
|
|
368
|
+
</a>
|
|
369
|
+
: null}
|
|
305
370
|
</span>
|
|
306
371
|
}
|
|
307
372
|
</StyledRowValue>
|
|
@@ -350,7 +415,7 @@ const SchemaRecord = ({
|
|
|
350
415
|
return (
|
|
351
416
|
<React.Fragment key={key}>
|
|
352
417
|
<StyledNestedLabel>
|
|
353
|
-
<
|
|
418
|
+
<StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
|
|
354
419
|
</StyledNestedLabel>
|
|
355
420
|
<StyledNested $border={colors.border}>
|
|
356
421
|
<SchemaLevel value={value} schema={nested} showTypes={showTypes} colors={colors} />
|
|
@@ -368,7 +433,7 @@ const SchemaRecord = ({
|
|
|
368
433
|
return (
|
|
369
434
|
<React.Fragment key={key}>
|
|
370
435
|
<StyledNestedLabel>
|
|
371
|
-
<
|
|
436
|
+
<StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
|
|
372
437
|
</StyledNestedLabel>
|
|
373
438
|
<StyledCodeCell onClick={(event) => event.stopPropagation()}>
|
|
374
439
|
<ReqoreCollapsibleContent
|
|
@@ -400,9 +465,9 @@ const SchemaRecord = ({
|
|
|
400
465
|
|
|
401
466
|
return (
|
|
402
467
|
<React.Fragment key={key}>
|
|
403
|
-
<
|
|
468
|
+
<StyledFieldLabel $color={colors.key} title={label}>
|
|
404
469
|
{labelWithType}
|
|
405
|
-
</
|
|
470
|
+
</StyledFieldLabel>
|
|
406
471
|
<FieldValue
|
|
407
472
|
field={{ type: fieldSchema?.type, value } as IQorusFormField}
|
|
408
473
|
fieldSchema={fieldSchema}
|