@qoretechnologies/reqraft 0.10.60-pr.131.g64ccc01 → 0.10.60-pr.131.g7e0c20a
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/expressions/builder/argumentWrapper.d.ts.map +1 -1
- package/dist/components/form/expressions/builder/argumentWrapper.js +23 -1
- package/dist/components/form/expressions/builder/argumentWrapper.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/expressions/builder/ExpressionBuilder.stories.tsx +45 -1
- package/src/components/form/expressions/builder/argumentWrapper.tsx +26 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"argumentWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/expressions/builder/argumentWrapper.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"argumentWrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/expressions/builder/argumentWrapper.tsx"],"names":[],"mappings":";AAUA,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EAC1B,MAAM,UAAU,CAAC;AAwBlB,MAAM,WAAW,sCAAsC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,iBAAiB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,gCAAgC,qPAoBxC,sCAAsC,6CA8J1C,CAAC"}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -10,13 +14,28 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
14
|
};
|
|
11
15
|
return __assign.apply(this, arguments);
|
|
12
16
|
};
|
|
17
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
+
};
|
|
13
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
21
|
exports.ExpressionBuilderArgumentWrapper = void 0;
|
|
15
22
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
23
|
var reqore_1 = require("@qoretechnologies/reqore");
|
|
17
24
|
var react_1 = require("react");
|
|
25
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
18
26
|
var common_1 = require("../../../../helpers/common");
|
|
19
27
|
var argumentLabel_1 = require("./argumentLabel");
|
|
28
|
+
/**
|
|
29
|
+
* An operand's field row: the field (a value or a field reference, its clear button, its ⋮ menu) shrinks
|
|
30
|
+
* with a narrow row. A control group that is not fluid does not shrink, and a field is several of them
|
|
31
|
+
* nested, so in a narrow column - not only on a phone, where operands are fluid - the field kept its
|
|
32
|
+
* natural width and its ⋮ was cut off at the expression's edge or hung past it. The value gives way, down
|
|
33
|
+
* to its own least width, and the controls beside it stay in the row.
|
|
34
|
+
*
|
|
35
|
+
* The row's own control group, styled - not a wrapper inside it: a control group hands its size to its
|
|
36
|
+
* children, and a wrapper between them drew the field at the normal size instead of the row's small one.
|
|
37
|
+
*/
|
|
38
|
+
var StyledOperandFieldRow = (0, styled_components_1.default)(reqore_1.ReqoreControlGroup)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n min-width: 0;\n max-width: 100%;\n\n .reqore-control-group {\n flex-shrink: 1;\n min-width: 0;\n max-width: 100%;\n }\n"], ["\n min-width: 0;\n max-width: 100%;\n\n .reqore-control-group {\n flex-shrink: 1;\n min-width: 0;\n max-width: 100%;\n }\n"])));
|
|
20
39
|
exports.ExpressionBuilderArgumentWrapper = (0, react_1.memo)(function (_a) {
|
|
21
40
|
var children = _a.children, schema = _a.schema, arg = _a.arg, onRemoveArgClick = _a.onRemoveArgClick, hasMultipleArgs = _a.hasMultipleArgs, expressions = _a.expressions, label = _a.label, readOnly = _a.readOnly, fluid = _a.fluid, reorder = _a.reorder, _b = _a.argIndex, argIndex = _b === void 0 ? 0 : _b, _c = _a.argCount, argCount = _c === void 0 ? 0 : _c, dragOver = _a.dragOver, onMoveArg = _a.onMoveArg, onArgDragStart = _a.onArgDragStart, onArgDragOver = _a.onArgDragOver, onArgDrop = _a.onArgDrop, onArgDragEnd = _a.onArgDragEnd;
|
|
22
41
|
var theme = (0, reqore_1.useReqoreTheme)();
|
|
@@ -69,6 +88,9 @@ exports.ExpressionBuilderArgumentWrapper = (0, react_1.memo)(function (_a) {
|
|
|
69
88
|
if (arg === null || arg === void 0 ? void 0 : arg.is_expression) {
|
|
70
89
|
return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ vertical: true, fluid: true, gapSize: 'small', className: 'expression-arg' }, dragProps, { children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { verticalAlign: 'center', gapSize: 'small', children: [(0, jsx_runtime_1.jsx)(argumentLabel_1.ExpressionBuilderArgumentLabel, { arg: arg, schema: schema, label: label || '', expressions: expressions, type: type }), reorder && renderReorderControls()] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqorePanel, { minimal: true, fluid: true, wrapperPadding: 'top', responsiveTitle: false, responsiveActions: false, size: 'small', flat: true, padded: false, transparent: true, children: children })] })));
|
|
71
90
|
}
|
|
72
|
-
return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ vertical: true, wrap: true, fluid: fluid, size: 'small', className: 'expression-arg' }, dragProps, {
|
|
91
|
+
return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ vertical: true, wrap: true, fluid: fluid, size: 'small', className: 'expression-arg' }, dragProps, {
|
|
92
|
+
// at most the width of the expression it is in: a narrow column shrinks its field instead
|
|
93
|
+
style: __assign({ flexShrink: 1, minWidth: 0, maxWidth: '100%' }, dragProps.style), children: [(0, jsx_runtime_1.jsx)(argumentLabel_1.ExpressionBuilderArgumentLabel, { arg: arg, schema: schema, label: label, expressions: expressions }), (0, jsx_runtime_1.jsxs)(StyledOperandFieldRow, { verticalAlign: 'flex-start', wrap: !fluid, fluid: true, className: 'expression-arg-field', children: [reorder && renderReorderControls(), children, hasMultipleArgs && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, intent: 'danger', minimal: true, fixed: true, className: 'expression-remove-arg', icon: 'DeleteBinLine', flat: true, transparent: true, tooltip: 'Remove argument', onClick: onRemoveArgClick, disabled: readOnly }))] })] })));
|
|
73
94
|
});
|
|
95
|
+
var templateObject_1;
|
|
74
96
|
//# sourceMappingURL=argumentWrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"argumentWrapper.js","sourceRoot":"","sources":["../../../../../src/components/form/expressions/builder/argumentWrapper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"argumentWrapper.js","sourceRoot":"","sources":["../../../../../src/components/form/expressions/builder/argumentWrapper.tsx"],"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.60-pr.131.
|
|
3
|
+
"version": "0.10.60-pr.131.g7e0c20a",
|
|
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",
|
|
@@ -1105,7 +1105,7 @@ export const NestedFitsNarrowColumn: Story = {
|
|
|
1105
1105
|
docs: {
|
|
1106
1106
|
description: {
|
|
1107
1107
|
story:
|
|
1108
|
-
'Renders two "Logical Greater Than Or Equal" comparisons nested in an "AND" group, in a 320px
|
|
1108
|
+
'Renders two "Logical Greater Than Or Equal" comparisons nested in an "AND" group, in a column narrowed from 320px to 186px - what a 320px screen leaves a condition in a form - and shown at 186px: each nested expression is indented and stays inside the group, its operation name shortened to fit, so the actions that float above it on hover stay on the screen.',
|
|
1109
1109
|
},
|
|
1110
1110
|
},
|
|
1111
1111
|
},
|
|
@@ -1133,6 +1133,50 @@ export const NestedFitsNarrowColumn: Story = {
|
|
|
1133
1133
|
},
|
|
1134
1134
|
};
|
|
1135
1135
|
|
|
1136
|
+
/**
|
|
1137
|
+
* The controls of the operands (a value or a field, its clear button, its `⋮` menu) that reach past their
|
|
1138
|
+
* operand's row, or a row past its expression: none should, or a control is cut off or hangs outside.
|
|
1139
|
+
*/
|
|
1140
|
+
const operandControlsPastTheirRow = () =>
|
|
1141
|
+
[...document.querySelectorAll<HTMLElement>('.expression-arg')].flatMap((row) => {
|
|
1142
|
+
const box = row.getBoundingClientRect();
|
|
1143
|
+
const panel = (row.closest('.expression') as HTMLElement).getBoundingClientRect();
|
|
1144
|
+
const right = Math.min(box.right, panel.right);
|
|
1145
|
+
return [...row.querySelectorAll<HTMLElement>('button, input, .reqore-tag')]
|
|
1146
|
+
.filter((control) => control.closest('.expression-arg') === row && control.getBoundingClientRect().width > 0)
|
|
1147
|
+
.map((control) => ({
|
|
1148
|
+
control: control.className.split(' ').filter((c) => !/^sc-/.test(c)).pop() ?? control.tagName,
|
|
1149
|
+
over: Math.round(control.getBoundingClientRect().right - right),
|
|
1150
|
+
}))
|
|
1151
|
+
.filter(({ over }) => over > 0);
|
|
1152
|
+
});
|
|
1153
|
+
|
|
1154
|
+
/** The same condition's operands - a field and a number each - in a column narrowed to 186px. */
|
|
1155
|
+
export const OperandsFitNarrowColumn: Story = {
|
|
1156
|
+
args: NestedFitsNarrowColumn.args,
|
|
1157
|
+
decorators: NestedFitsNarrowColumn.decorators,
|
|
1158
|
+
parameters: {
|
|
1159
|
+
qlip: { viewport: { width: 320, height: 800 } },
|
|
1160
|
+
docs: {
|
|
1161
|
+
description: {
|
|
1162
|
+
story:
|
|
1163
|
+
'Renders the nested "AND" condition in a column narrowed from 320px to 186px - what a 320px screen leaves a condition in a form - and shown at 186px: each operand\'s value or field, its clear button and its ⋮ menu stay inside the operand\'s row, the field shortened to fit.',
|
|
1164
|
+
},
|
|
1165
|
+
},
|
|
1166
|
+
},
|
|
1167
|
+
play: async ({ canvasElement }) => {
|
|
1168
|
+
await waitFor(() => expect(expressionCount()).toBe(2), { timeout: 10000 });
|
|
1169
|
+
const column = canvasElement.querySelector('.narrow-column') as HTMLElement;
|
|
1170
|
+
for (const width of NARROW_COLUMNS) {
|
|
1171
|
+
column.style.width = `${width}px`;
|
|
1172
|
+
await waitFor(
|
|
1173
|
+
() => expect({ width, past: operandControlsPastTheirRow() }).toEqual({ width, past: [] }),
|
|
1174
|
+
{ timeout: 10000 }
|
|
1175
|
+
);
|
|
1176
|
+
}
|
|
1177
|
+
},
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1136
1180
|
/**
|
|
1137
1181
|
* On a phone the remove action leaves the operand row for its ⋮ menu. The play
|
|
1138
1182
|
* runs at the runner's desktop viewport, where the inline buttons are the
|
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
useReqoreTheme,
|
|
7
7
|
} from '@qoretechnologies/reqore';
|
|
8
8
|
import { memo } from 'react';
|
|
9
|
+
import styled from 'styled-components';
|
|
9
10
|
import { ordinal } from '../../../../helpers/common';
|
|
10
11
|
import {
|
|
11
12
|
IExpression,
|
|
@@ -15,6 +16,27 @@ import {
|
|
|
15
16
|
} from '../types';
|
|
16
17
|
import { ExpressionBuilderArgumentLabel } from './argumentLabel';
|
|
17
18
|
|
|
19
|
+
/**
|
|
20
|
+
* An operand's field row: the field (a value or a field reference, its clear button, its ⋮ menu) shrinks
|
|
21
|
+
* with a narrow row. A control group that is not fluid does not shrink, and a field is several of them
|
|
22
|
+
* nested, so in a narrow column - not only on a phone, where operands are fluid - the field kept its
|
|
23
|
+
* natural width and its ⋮ was cut off at the expression's edge or hung past it. The value gives way, down
|
|
24
|
+
* to its own least width, and the controls beside it stay in the row.
|
|
25
|
+
*
|
|
26
|
+
* The row's own control group, styled - not a wrapper inside it: a control group hands its size to its
|
|
27
|
+
* children, and a wrapper between them drew the field at the normal size instead of the row's small one.
|
|
28
|
+
*/
|
|
29
|
+
const StyledOperandFieldRow = styled(ReqoreControlGroup)`
|
|
30
|
+
min-width: 0;
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
|
|
33
|
+
.reqore-control-group {
|
|
34
|
+
flex-shrink: 1;
|
|
35
|
+
min-width: 0;
|
|
36
|
+
max-width: 100%;
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
|
|
18
40
|
export interface IExpressionBuilderArgumentWrapperProps {
|
|
19
41
|
children: React.ReactNode;
|
|
20
42
|
schema?: IExpressionSchemaArg;
|
|
@@ -184,7 +206,8 @@ export const ExpressionBuilderArgumentWrapper = memo(
|
|
|
184
206
|
size='small'
|
|
185
207
|
className='expression-arg'
|
|
186
208
|
{...dragProps}
|
|
187
|
-
|
|
209
|
+
// at most the width of the expression it is in: a narrow column shrinks its field instead
|
|
210
|
+
style={{ flexShrink: 1, minWidth: 0, maxWidth: '100%', ...dragProps.style }}
|
|
188
211
|
>
|
|
189
212
|
<ExpressionBuilderArgumentLabel
|
|
190
213
|
arg={arg}
|
|
@@ -195,7 +218,7 @@ export const ExpressionBuilderArgumentWrapper = memo(
|
|
|
195
218
|
{/* A fluid operand is a phone row: grip, field and `⋮` share it, and
|
|
196
219
|
the field takes what is left; wrapping would put the grip on a
|
|
197
220
|
line of its own above a full-width field. */}
|
|
198
|
-
<
|
|
221
|
+
<StyledOperandFieldRow verticalAlign='flex-start' wrap={!fluid} fluid className='expression-arg-field'>
|
|
199
222
|
{reorder && renderReorderControls()}
|
|
200
223
|
{children}
|
|
201
224
|
{hasMultipleArgs && (
|
|
@@ -213,7 +236,7 @@ export const ExpressionBuilderArgumentWrapper = memo(
|
|
|
213
236
|
disabled={readOnly}
|
|
214
237
|
/>
|
|
215
238
|
)}
|
|
216
|
-
</
|
|
239
|
+
</StyledOperandFieldRow>
|
|
217
240
|
</ReqoreControlGroup>
|
|
218
241
|
);
|
|
219
242
|
}
|