@finos/legend-query-builder 4.14.51 → 4.14.53
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/components/QueryBuilder.d.ts.map +1 -1
- package/lib/components/QueryBuilder.js +1 -0
- package/lib/components/QueryBuilder.js.map +1 -1
- package/lib/components/QueryBuilderConstantExpressionPanel.js +1 -1
- package/lib/components/QueryBuilderConstantExpressionPanel.js.map +1 -1
- package/lib/components/QueryBuilderParametersPanel.js +1 -1
- package/lib/components/QueryBuilderParametersPanel.js.map +1 -1
- package/lib/components/QueryBuilderPropertyExpressionEditor.js +1 -1
- package/lib/components/QueryBuilderPropertyExpressionEditor.js.map +1 -1
- package/lib/components/QueryBuilderSideBar.d.ts.map +1 -1
- package/lib/components/QueryBuilderSideBar.js +1 -1
- package/lib/components/QueryBuilderSideBar.js.map +1 -1
- package/lib/components/QueryBuilder_LegendApplicationPlugin.d.ts +0 -1
- package/lib/components/QueryBuilder_LegendApplicationPlugin.d.ts.map +1 -1
- package/lib/components/ServiceQuerySetupUtils.d.ts.map +1 -1
- package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.d.ts +1 -1
- package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.d.ts.map +1 -1
- package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.js +4 -2
- package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.js.map +1 -1
- package/lib/components/execution-plan/AllocationExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/AllocationExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/ConstantExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/ConstantExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/DataTypeResultTypeViewer.d.ts +0 -1
- package/lib/components/execution-plan/DataTypeResultTypeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/ExecutionPlanViewer.d.ts +0 -1
- package/lib/components/execution-plan/ExecutionPlanViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/FunctionParametersValidationNodeViewer.js +1 -1
- package/lib/components/execution-plan/ImplementationViewer.d.ts +0 -1
- package/lib/components/execution-plan/ImplementationViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/PartialClassResultViewer.d.ts +0 -1
- package/lib/components/execution-plan/PartialClassResultViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/PartialClassResultViewer.js +1 -1
- package/lib/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.js +1 -1
- package/lib/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.js +1 -1
- package/lib/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.js +1 -1
- package/lib/components/execution-plan/RelationalTDSInstantiationExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/RelationalTDSInstantiationExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/ResultTypeViewer.d.ts +0 -1
- package/lib/components/execution-plan/ResultTypeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/SQLExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/SQLExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/SQLExecutionNodeViewer.js +1 -1
- package/lib/components/execution-plan/SequenceExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/SequenceExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.d.ts +0 -1
- package/lib/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.js +2 -2
- package/lib/components/execution-plan/TDSResultTypeViewer.d.ts +0 -1
- package/lib/components/execution-plan/TDSResultTypeViewer.d.ts.map +1 -1
- package/lib/components/execution-plan/TDSResultTypeViewer.js +1 -1
- package/lib/components/execution-plan/TempTableStrategyViewer.d.ts +0 -1
- package/lib/components/execution-plan/TempTableStrategyViewer.d.ts.map +1 -1
- package/lib/components/explorer/QueryBuilderExplorerPanel.d.ts +0 -1
- package/lib/components/explorer/QueryBuilderExplorerPanel.d.ts.map +1 -1
- package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.d.ts +2 -0
- package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.d.ts.map +1 -1
- package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.js +14 -7
- package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.js.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderGraphFetchTreePanel.d.ts +0 -1
- package/lib/components/fetch-structure/QueryBuilderGraphFetchTreePanel.d.ts.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderPostFilterPanel.d.ts.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderPostFilterPanel.js +1 -1
- package/lib/components/fetch-structure/QueryBuilderPostFilterPanel.js.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderResultModifierPanel.d.ts.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderResultModifierPanel.js +36 -11
- package/lib/components/fetch-structure/QueryBuilderResultModifierPanel.js.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderTDSComponentHelper.d.ts +0 -1
- package/lib/components/fetch-structure/QueryBuilderTDSComponentHelper.d.ts.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderTDSPanel.d.ts.map +1 -1
- package/lib/components/fetch-structure/QueryBuilderTDSPanel.js +5 -2
- package/lib/components/fetch-structure/QueryBuilderTDSPanel.js.map +1 -1
- package/lib/components/filter/QueryBuilderFilterPanel.d.ts.map +1 -1
- package/lib/components/filter/QueryBuilderFilterPanel.js +9 -4
- package/lib/components/filter/QueryBuilderFilterPanel.js.map +1 -1
- package/lib/components/result/QueryBuilderResultPanel.d.ts.map +1 -1
- package/lib/components/result/QueryBuilderResultPanel.js +1 -1
- package/lib/components/result/QueryBuilderResultPanel.js.map +1 -1
- package/lib/components/result/tds/QueryBuilderTDSGridResult.d.ts.map +1 -1
- package/lib/components/result/tds/QueryBuilderTDSGridResult.js +10 -8
- package/lib/components/result/tds/QueryBuilderTDSGridResult.js.map +1 -1
- package/lib/components/result/tds/QueryBuilderTDSResultShared.d.ts +0 -1
- package/lib/components/result/tds/QueryBuilderTDSResultShared.d.ts.map +1 -1
- package/lib/components/result/tds/QueryBuilderTDSResultShared.js.map +1 -1
- package/lib/components/result/tds/QueryBuilderTDSSimpleGridResult.js +2 -2
- package/lib/components/result/tds/QueryBuilderTDSSimpleGridResult.js.map +1 -1
- package/lib/components/shared/BasicValueSpecificationEditor.d.ts +19 -4
- package/lib/components/shared/BasicValueSpecificationEditor.d.ts.map +1 -1
- package/lib/components/shared/BasicValueSpecificationEditor.js +97 -36
- package/lib/components/shared/BasicValueSpecificationEditor.js.map +1 -1
- package/lib/components/shared/CustomDatePicker.d.ts +2 -1
- package/lib/components/shared/CustomDatePicker.d.ts.map +1 -1
- package/lib/components/shared/CustomDatePicker.js +8 -5
- package/lib/components/shared/CustomDatePicker.js.map +1 -1
- package/lib/components/shared/LambdaParameterValuesEditor.js +1 -1
- package/lib/components/shared/LambdaParameterValuesEditor.js.map +1 -1
- package/lib/components/shared/QueryBuilderPanelIssueCountBadge.d.ts +0 -1
- package/lib/components/shared/QueryBuilderPanelIssueCountBadge.d.ts.map +1 -1
- package/lib/components/shared/QueryBuilderPropertyInfoTooltip.d.ts +0 -1
- package/lib/components/shared/QueryBuilderPropertyInfoTooltip.d.ts.map +1 -1
- package/lib/components/shared/QueryBuilderRootClassInfoTooltip.d.ts +0 -1
- package/lib/components/shared/QueryBuilderRootClassInfoTooltip.d.ts.map +1 -1
- package/lib/components/shared/QueryBuilderVariableSelector.d.ts +3 -0
- package/lib/components/shared/QueryBuilderVariableSelector.d.ts.map +1 -1
- package/lib/components/shared/QueryBuilderVariableSelector.js +3 -3
- package/lib/components/shared/QueryBuilderVariableSelector.js.map +1 -1
- package/lib/components/workflows/ClassQueryBuilder.d.ts.map +1 -1
- package/lib/components/workflows/MappingQueryBuilder.d.ts.map +1 -1
- package/lib/components/workflows/ServiceQueryBuilder.d.ts.map +1 -1
- package/lib/graph/QueryBuilderMetaModelConst.d.ts +1 -0
- package/lib/graph/QueryBuilderMetaModelConst.d.ts.map +1 -1
- package/lib/graph/QueryBuilderMetaModelConst.js +1 -0
- package/lib/graph/QueryBuilderMetaModelConst.js.map +1 -1
- package/lib/graph-manager/protocol/pure/QueryBuilder_PureGraphManagerExtension.d.ts.map +1 -1
- package/lib/graph-manager/protocol/pure/QueryBuilder_PureGraphManagerExtension.js.map +1 -1
- package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.d.ts +1 -2
- package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.d.ts.map +1 -1
- package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.js +68 -8
- package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.js.map +1 -1
- package/lib/index.css +2 -2
- package/lib/index.css.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/package.json +7 -7
- package/lib/stores/QueryBuilderState.d.ts +0 -1
- package/lib/stores/QueryBuilderState.d.ts.map +1 -1
- package/lib/stores/QueryBuilderState.js +1 -0
- package/lib/stores/QueryBuilderState.js.map +1 -1
- package/lib/stores/QueryBuilderStateBuilder.d.ts.map +1 -1
- package/lib/stores/QueryBuilderStateBuilder.js +5 -1
- package/lib/stores/QueryBuilderStateBuilder.js.map +1 -1
- package/lib/stores/QueryBuilderValueSpecificationHelper.js.map +1 -1
- package/lib/stores/QueryBuilder_LegendApplicationPlugin_Extension.d.ts +1 -2
- package/lib/stores/QueryBuilder_LegendApplicationPlugin_Extension.d.ts.map +1 -1
- package/lib/stores/__test-utils__/QueryBuilderStateTestUtils.d.ts.map +1 -1
- package/lib/stores/execution-plan/ExecutionPlanState.d.ts.map +1 -1
- package/lib/stores/explorer/QueryBuilderExplorerState.d.ts +0 -1
- package/lib/stores/explorer/QueryBuilderExplorerState.d.ts.map +1 -1
- package/lib/stores/explorer/QueryFunctionsExplorerState.d.ts.map +1 -1
- package/lib/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeUtil.d.ts.map +1 -1
- package/lib/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeValueSpecificationBuilder.d.ts.map +1 -1
- package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.d.ts +2 -0
- package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.d.ts.map +1 -1
- package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.js +6 -0
- package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.js.map +1 -1
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.d.ts +11 -0
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.d.ts.map +1 -1
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.js +76 -20
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.js.map +1 -1
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.d.ts.map +1 -1
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.js +70 -34
- package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.js.map +1 -1
- package/lib/stores/filter/QueryBuilderFilterState.d.ts +2 -0
- package/lib/stores/filter/QueryBuilderFilterState.d.ts.map +1 -1
- package/lib/stores/filter/QueryBuilderFilterState.js +7 -0
- package/lib/stores/filter/QueryBuilderFilterState.js.map +1 -1
- package/lib/stores/milestoning/QueryBuilderMilestoningState.d.ts +2 -2
- package/lib/stores/milestoning/QueryBuilderMilestoningState.d.ts.map +1 -1
- package/lib/stores/milestoning/QueryBuilderMilestoningState.js +15 -4
- package/lib/stores/milestoning/QueryBuilderMilestoningState.js.map +1 -1
- package/lib/stores/shared/ValueSpecificationEditorHelper.d.ts +5 -2
- package/lib/stores/shared/ValueSpecificationEditorHelper.d.ts.map +1 -1
- package/lib/stores/shared/ValueSpecificationEditorHelper.js +20 -9
- package/lib/stores/shared/ValueSpecificationEditorHelper.js.map +1 -1
- package/lib/stores/shared/ValueSpecificationModifierHelper.d.ts.map +1 -1
- package/lib/stores/workflows/ClassQueryBuilderState.d.ts.map +1 -1
- package/lib/stores/workflows/MappingQueryBuilderState.d.ts.map +1 -1
- package/lib/stores/workflows/ServiceQueryBuilderState.d.ts.map +1 -1
- package/package.json +15 -15
- package/src/components/QueryBuilder.tsx +1 -0
- package/src/components/QueryBuilderConstantExpressionPanel.tsx +1 -1
- package/src/components/QueryBuilderParametersPanel.tsx +1 -1
- package/src/components/QueryBuilderPropertyExpressionEditor.tsx +1 -1
- package/src/components/QueryBuilderSideBar.tsx +1 -1
- package/src/components/__test-utils__/QueryBuilderComponentTestUtils.tsx +4 -1
- package/src/components/execution-plan/FunctionParametersValidationNodeViewer.tsx +1 -1
- package/src/components/execution-plan/PartialClassResultViewer.tsx +1 -1
- package/src/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.tsx +1 -1
- package/src/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.tsx +1 -1
- package/src/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.tsx +1 -1
- package/src/components/execution-plan/SQLExecutionNodeViewer.tsx +1 -1
- package/src/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.tsx +2 -2
- package/src/components/execution-plan/TDSResultTypeViewer.tsx +1 -1
- package/src/components/explorer/QueryBuilderMilestoningParameterEditor.tsx +60 -22
- package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx +1 -1
- package/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx +156 -60
- package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx +12 -2
- package/src/components/filter/QueryBuilderFilterPanel.tsx +18 -4
- package/src/components/result/QueryBuilderResultPanel.tsx +1 -0
- package/src/components/result/tds/QueryBuilderTDSGridResult.tsx +12 -13
- package/src/components/result/tds/QueryBuilderTDSResultShared.tsx +1 -1
- package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx +2 -2
- package/src/components/shared/BasicValueSpecificationEditor.tsx +257 -55
- package/src/components/shared/CustomDatePicker.tsx +36 -11
- package/src/components/shared/LambdaParameterValuesEditor.tsx +1 -1
- package/src/components/shared/QueryBuilderVariableSelector.tsx +13 -4
- package/src/graph/QueryBuilderMetaModelConst.ts +1 -0
- package/src/graph-manager/protocol/pure/QueryBuilder_PureGraphManagerExtension.ts +1 -1
- package/src/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.ts +189 -18
- package/src/index.ts +1 -0
- package/src/stores/QueryBuilderState.ts +1 -0
- package/src/stores/QueryBuilderStateBuilder.ts +6 -1
- package/src/stores/QueryBuilderValueSpecificationHelper.ts +2 -2
- package/src/stores/QueryBuilder_LegendApplicationPlugin_Extension.ts +1 -1
- package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts +7 -0
- package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.ts +167 -43
- package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.ts +145 -69
- package/src/stores/filter/QueryBuilderFilterState.ts +8 -0
- package/src/stores/milestoning/QueryBuilderMilestoningState.ts +22 -9
- package/src/stores/shared/ValueSpecificationEditorHelper.ts +47 -7
- package/tsconfig.package.json +1 -1
@@ -22,6 +22,7 @@ import {
|
|
22
22
|
type TooltipPlacement,
|
23
23
|
type InputActionData,
|
24
24
|
type SelectActionData,
|
25
|
+
type SelectComponent,
|
25
26
|
Tooltip,
|
26
27
|
DollarIcon,
|
27
28
|
clsx,
|
@@ -41,6 +42,7 @@ import {
|
|
41
42
|
type Type,
|
42
43
|
type ValueSpecification,
|
43
44
|
type PureModel,
|
45
|
+
type ObserverContext,
|
44
46
|
PrimitiveInstanceValue,
|
45
47
|
CollectionInstanceValue,
|
46
48
|
EnumValueInstanceValue,
|
@@ -54,9 +56,9 @@ import {
|
|
54
56
|
GenericType,
|
55
57
|
Enumeration,
|
56
58
|
getMultiplicityDescription,
|
57
|
-
type ObserverContext,
|
58
59
|
matchFunctionName,
|
59
60
|
isSubType,
|
61
|
+
InstanceValue,
|
60
62
|
} from '@finos/legend-graph';
|
61
63
|
import {
|
62
64
|
type DebouncedFunc,
|
@@ -220,14 +222,18 @@ const VariableExpressionParameterEditor = observer(
|
|
220
222
|
|
221
223
|
const StringPrimitiveInstanceValueEditor = observer(
|
222
224
|
forwardRef<
|
223
|
-
HTMLInputElement,
|
225
|
+
HTMLInputElement | SelectComponent,
|
224
226
|
{
|
225
227
|
valueSpecification: PrimitiveInstanceValue;
|
226
228
|
className?: string | undefined;
|
227
229
|
setValueSpecification: (val: ValueSpecification) => void;
|
228
230
|
resetValue: () => void;
|
229
231
|
selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
|
230
|
-
|
232
|
+
observerContext: ObserverContext;
|
233
|
+
handleBlur?: (() => void) | undefined;
|
234
|
+
handleKeyDown?:
|
235
|
+
| ((event: React.KeyboardEvent<HTMLInputElement>) => void)
|
236
|
+
| undefined;
|
231
237
|
}
|
232
238
|
>(function StringPrimitiveInstanceValueEditor(props, ref) {
|
233
239
|
const {
|
@@ -236,13 +242,15 @@ const StringPrimitiveInstanceValueEditor = observer(
|
|
236
242
|
resetValue,
|
237
243
|
setValueSpecification,
|
238
244
|
selectorConfig,
|
239
|
-
|
245
|
+
observerContext,
|
246
|
+
handleBlur,
|
247
|
+
handleKeyDown,
|
240
248
|
} = props;
|
241
249
|
const useSelector = Boolean(selectorConfig);
|
242
250
|
const applicationStore = useApplicationStore();
|
243
251
|
const value = valueSpecification.values[0] as string | null;
|
244
252
|
const updateValueSpec = (val: string): void => {
|
245
|
-
instanceValue_setValue(valueSpecification, val, 0,
|
253
|
+
instanceValue_setValue(valueSpecification, val, 0, observerContext);
|
246
254
|
setValueSpecification(valueSpecification);
|
247
255
|
};
|
248
256
|
const changeInputValue: React.ChangeEventHandler<HTMLInputElement> = (
|
@@ -287,9 +295,22 @@ const StringPrimitiveInstanceValueEditor = observer(
|
|
287
295
|
: undefined;
|
288
296
|
const noOptionsMessage =
|
289
297
|
selectorConfig?.values === undefined ? (): null => null : undefined;
|
298
|
+
const resetButtonName = `reset-${valueSpecification.hashCode}`;
|
299
|
+
const inputName = `input-${valueSpecification.hashCode}`;
|
300
|
+
|
301
|
+
const onBlur = (
|
302
|
+
event: React.FocusEvent<HTMLInputElement, HTMLButtonElement>,
|
303
|
+
): void => {
|
304
|
+
if (
|
305
|
+
event.relatedTarget?.name !== resetButtonName &&
|
306
|
+
event.relatedTarget?.name !== inputName
|
307
|
+
) {
|
308
|
+
handleBlur?.();
|
309
|
+
}
|
310
|
+
};
|
290
311
|
|
291
312
|
return (
|
292
|
-
<div className={clsx('value-spec-editor', className)}>
|
313
|
+
<div className={clsx('value-spec-editor', className)} onBlur={onBlur}>
|
293
314
|
{useSelector ? (
|
294
315
|
<CustomSelectorInput
|
295
316
|
className="value-spec-editor__enum-selector"
|
@@ -310,6 +331,9 @@ const StringPrimitiveInstanceValueEditor = observer(
|
|
310
331
|
}}
|
311
332
|
hasError={!isValidInstanceValue(valueSpecification)}
|
312
333
|
placeholder={value === '' ? '(empty)' : undefined}
|
334
|
+
ref={ref as React.Ref<SelectComponent>}
|
335
|
+
onKeyDown={handleKeyDown}
|
336
|
+
inputName={inputName}
|
313
337
|
/>
|
314
338
|
) : (
|
315
339
|
<InputWithInlineValidation
|
@@ -318,17 +342,19 @@ const StringPrimitiveInstanceValueEditor = observer(
|
|
318
342
|
value={value ?? ''}
|
319
343
|
placeholder={value === '' ? '(empty)' : undefined}
|
320
344
|
onChange={changeInputValue}
|
321
|
-
ref={ref}
|
345
|
+
ref={ref as React.Ref<HTMLInputElement>}
|
322
346
|
error={
|
323
347
|
!isValidInstanceValue(valueSpecification)
|
324
348
|
? 'Invalid String value'
|
325
349
|
: undefined
|
326
350
|
}
|
351
|
+
onKeyDown={handleKeyDown}
|
352
|
+
name={inputName}
|
327
353
|
/>
|
328
354
|
)}
|
329
355
|
<button
|
330
356
|
className="value-spec-editor__reset-btn"
|
331
|
-
name=
|
357
|
+
name={resetButtonName}
|
332
358
|
title="Reset"
|
333
359
|
onClick={resetValue}
|
334
360
|
>
|
@@ -345,18 +371,18 @@ const BooleanPrimitiveInstanceValueEditor = observer(
|
|
345
371
|
className?: string | undefined;
|
346
372
|
resetValue: () => void;
|
347
373
|
setValueSpecification: (val: ValueSpecification) => void;
|
348
|
-
|
374
|
+
observerContext: ObserverContext;
|
349
375
|
}) => {
|
350
376
|
const {
|
351
377
|
valueSpecification,
|
352
378
|
className,
|
353
379
|
resetValue,
|
354
380
|
setValueSpecification,
|
355
|
-
|
381
|
+
observerContext,
|
356
382
|
} = props;
|
357
383
|
const value = valueSpecification.values[0] as boolean;
|
358
384
|
const toggleValue = (): void => {
|
359
|
-
instanceValue_setValue(valueSpecification, !value, 0,
|
385
|
+
instanceValue_setValue(valueSpecification, !value, 0, observerContext);
|
360
386
|
setValueSpecification(valueSpecification);
|
361
387
|
};
|
362
388
|
|
@@ -392,7 +418,11 @@ const NumberPrimitiveInstanceValueEditor = observer(
|
|
392
418
|
className?: string | undefined;
|
393
419
|
resetValue: () => void;
|
394
420
|
setValueSpecification: (val: ValueSpecification) => void;
|
395
|
-
|
421
|
+
observerContext: ObserverContext;
|
422
|
+
handleBlur?: (() => void) | undefined;
|
423
|
+
handleKeyDown?:
|
424
|
+
| ((event: React.KeyboardEvent<HTMLInputElement>) => void)
|
425
|
+
| undefined;
|
396
426
|
}
|
397
427
|
>(function NumberPrimitiveInstanceValueEditor(props, ref) {
|
398
428
|
const {
|
@@ -401,7 +431,9 @@ const NumberPrimitiveInstanceValueEditor = observer(
|
|
401
431
|
className,
|
402
432
|
resetValue,
|
403
433
|
setValueSpecification,
|
404
|
-
|
434
|
+
observerContext,
|
435
|
+
handleBlur,
|
436
|
+
handleKeyDown,
|
405
437
|
} = props;
|
406
438
|
const [value, setValue] = useState(
|
407
439
|
valueSpecification.values[0] === null
|
@@ -429,7 +461,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
|
|
429
461
|
valueSpecification,
|
430
462
|
parsedValue,
|
431
463
|
0,
|
432
|
-
|
464
|
+
observerContext,
|
433
465
|
);
|
434
466
|
setValueSpecification(valueSpecification);
|
435
467
|
}
|
@@ -496,8 +528,24 @@ const NumberPrimitiveInstanceValueEditor = observer(
|
|
496
528
|
}
|
497
529
|
}, [numericValue, valueSpecification]);
|
498
530
|
|
531
|
+
const resetButtonName = `reset-${valueSpecification.hashCode}`;
|
532
|
+
const inputName = `input-${valueSpecification.hashCode}`;
|
533
|
+
const calculateButtonName = `calculate-${valueSpecification.hashCode}`;
|
534
|
+
|
535
|
+
const onBlur = (
|
536
|
+
event: React.FocusEvent<HTMLInputElement, HTMLButtonElement>,
|
537
|
+
): void => {
|
538
|
+
if (
|
539
|
+
event.relatedTarget?.name !== resetButtonName &&
|
540
|
+
event.relatedTarget?.name !== inputName &&
|
541
|
+
event.relatedTarget?.name !== calculateButtonName
|
542
|
+
) {
|
543
|
+
handleBlur?.();
|
544
|
+
}
|
545
|
+
};
|
546
|
+
|
499
547
|
return (
|
500
|
-
<div className={clsx('value-spec-editor', className)}>
|
548
|
+
<div className={clsx('value-spec-editor', className)} onBlur={onBlur}>
|
501
549
|
<div className="value-spec-editor__number__input-container">
|
502
550
|
<input
|
503
551
|
ref={inputRef}
|
@@ -516,12 +564,17 @@ const NumberPrimitiveInstanceValueEditor = observer(
|
|
516
564
|
value={value}
|
517
565
|
onChange={handleInputChange}
|
518
566
|
onBlur={calculateExpression}
|
519
|
-
onKeyDown={
|
567
|
+
onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
|
568
|
+
onKeyDown(event);
|
569
|
+
handleKeyDown?.(event);
|
570
|
+
}}
|
571
|
+
name={inputName}
|
520
572
|
/>
|
521
573
|
<div className="value-spec-editor__number__actions">
|
522
574
|
<button
|
523
575
|
className="value-spec-editor__number__action"
|
524
576
|
title="Evaluate Expression (Enter)"
|
577
|
+
name={calculateButtonName}
|
525
578
|
onClick={calculateExpression}
|
526
579
|
>
|
527
580
|
<CalculateIcon />
|
@@ -530,7 +583,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
|
|
530
583
|
</div>
|
531
584
|
<button
|
532
585
|
className="value-spec-editor__reset-btn"
|
533
|
-
name=
|
586
|
+
name={resetButtonName}
|
534
587
|
title="Reset"
|
535
588
|
onClick={resetValue}
|
536
589
|
>
|
@@ -547,14 +600,16 @@ const EnumValueInstanceValueEditor = observer(
|
|
547
600
|
className?: string | undefined;
|
548
601
|
setValueSpecification: (val: ValueSpecification) => void;
|
549
602
|
resetValue: () => void;
|
550
|
-
|
603
|
+
observerContext: ObserverContext;
|
604
|
+
handleBlur?: (() => void) | undefined;
|
551
605
|
}) => {
|
552
606
|
const {
|
553
607
|
valueSpecification,
|
554
608
|
className,
|
555
609
|
resetValue,
|
556
610
|
setValueSpecification,
|
557
|
-
|
611
|
+
observerContext,
|
612
|
+
handleBlur,
|
558
613
|
} = props;
|
559
614
|
const applicationStore = useApplicationStore();
|
560
615
|
const enumType = guaranteeType(
|
@@ -569,18 +624,33 @@ const EnumValueInstanceValueEditor = observer(
|
|
569
624
|
label: value.name,
|
570
625
|
value: value,
|
571
626
|
}));
|
627
|
+
const resetButtonName = `reset-${valueSpecification.hashCode}`;
|
628
|
+
const inputName = `input-${valueSpecification.hashCode}`;
|
629
|
+
|
572
630
|
const changeValue = (val: { value: Enum; label: string }): void => {
|
573
631
|
instanceValue_setValue(
|
574
632
|
valueSpecification,
|
575
633
|
EnumValueExplicitReference.create(val.value),
|
576
634
|
0,
|
577
|
-
|
635
|
+
observerContext,
|
578
636
|
);
|
579
637
|
setValueSpecification(valueSpecification);
|
638
|
+
handleBlur?.();
|
639
|
+
};
|
640
|
+
|
641
|
+
const onBlur = (
|
642
|
+
event: React.FocusEvent<HTMLInputElement, HTMLButtonElement>,
|
643
|
+
): void => {
|
644
|
+
if (
|
645
|
+
event.relatedTarget?.name !== resetButtonName &&
|
646
|
+
event.relatedTarget?.name !== inputName
|
647
|
+
) {
|
648
|
+
handleBlur?.();
|
649
|
+
}
|
580
650
|
};
|
581
651
|
|
582
652
|
return (
|
583
|
-
<div className={clsx('value-spec-editor', className)}>
|
653
|
+
<div className={clsx('value-spec-editor', className)} onBlur={onBlur}>
|
584
654
|
<CustomSelectorInput
|
585
655
|
className="value-spec-editor__enum-selector"
|
586
656
|
options={options}
|
@@ -591,10 +661,12 @@ const EnumValueInstanceValueEditor = observer(
|
|
591
661
|
}
|
592
662
|
hasError={!isValidInstanceValue(valueSpecification)}
|
593
663
|
placeholder="Select value"
|
664
|
+
autoFocus={true}
|
665
|
+
inputName={inputName}
|
594
666
|
/>
|
595
667
|
<button
|
596
668
|
className="value-spec-editor__reset-btn"
|
597
|
-
name=
|
669
|
+
name={resetButtonName}
|
598
670
|
title="Reset"
|
599
671
|
onClick={resetValue}
|
600
672
|
>
|
@@ -672,7 +744,9 @@ const PrimitiveCollectionInstanceValueEditor = observer(
|
|
672
744
|
{ label: string; value: string }[]
|
673
745
|
>(
|
674
746
|
valueSpecification.values
|
675
|
-
.map((valueSpec) =>
|
747
|
+
.map((valueSpec) =>
|
748
|
+
getValueSpecificationStringValue(valueSpec, applicationStore),
|
749
|
+
)
|
676
750
|
.filter(isNonEmptyString)
|
677
751
|
.map((value) => ({
|
678
752
|
label: value,
|
@@ -707,7 +781,7 @@ const PrimitiveCollectionInstanceValueEditor = observer(
|
|
707
781
|
value: ValueSpecification,
|
708
782
|
): { label: string; value: string } => {
|
709
783
|
const stringValue = guaranteeNonNullable(
|
710
|
-
getValueSpecificationStringValue(value),
|
784
|
+
getValueSpecificationStringValue(value, applicationStore),
|
711
785
|
);
|
712
786
|
return {
|
713
787
|
label: stringValue,
|
@@ -736,10 +810,11 @@ const PrimitiveCollectionInstanceValueEditor = observer(
|
|
736
810
|
|
737
811
|
if (
|
738
812
|
newValueSpec === null ||
|
739
|
-
getValueSpecificationStringValue(newValueSpec) ===
|
813
|
+
getValueSpecificationStringValue(newValueSpec, applicationStore) ===
|
814
|
+
undefined ||
|
740
815
|
isValueAlreadySelected(
|
741
816
|
guaranteeNonNullable(
|
742
|
-
getValueSpecificationStringValue(newValueSpec),
|
817
|
+
getValueSpecificationStringValue(newValueSpec, applicationStore),
|
743
818
|
),
|
744
819
|
)
|
745
820
|
) {
|
@@ -849,7 +924,7 @@ const PrimitiveCollectionInstanceValueEditor = observer(
|
|
849
924
|
observerContext,
|
850
925
|
);
|
851
926
|
return newValueSpec
|
852
|
-
? getValueSpecificationStringValue(newValueSpec)
|
927
|
+
? getValueSpecificationStringValue(newValueSpec, applicationStore)
|
853
928
|
: null;
|
854
929
|
})
|
855
930
|
.filter(isNonNullable),
|
@@ -1009,7 +1084,7 @@ const CollectionValueInstanceValueEditor = observer(
|
|
1009
1084
|
resetValue: () => void;
|
1010
1085
|
setValueSpecification: (val: ValueSpecification) => void;
|
1011
1086
|
selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
|
1012
|
-
|
1087
|
+
observerContext: ObserverContext;
|
1013
1088
|
}) => {
|
1014
1089
|
const {
|
1015
1090
|
valueSpecification,
|
@@ -1018,7 +1093,7 @@ const CollectionValueInstanceValueEditor = observer(
|
|
1018
1093
|
resetValue,
|
1019
1094
|
setValueSpecification,
|
1020
1095
|
selectorConfig,
|
1021
|
-
|
1096
|
+
observerContext,
|
1022
1097
|
} = props;
|
1023
1098
|
|
1024
1099
|
const [editable, setEditable] = useState(false);
|
@@ -1051,7 +1126,7 @@ const CollectionValueInstanceValueEditor = observer(
|
|
1051
1126
|
{expectedType instanceof Enumeration ? (
|
1052
1127
|
<EnumCollectionInstanceValueEditor
|
1053
1128
|
valueSpecification={valueSpecification}
|
1054
|
-
observerContext={
|
1129
|
+
observerContext={observerContext}
|
1055
1130
|
saveEdit={saveEdit}
|
1056
1131
|
/>
|
1057
1132
|
) : (
|
@@ -1060,7 +1135,7 @@ const CollectionValueInstanceValueEditor = observer(
|
|
1060
1135
|
expectedType={expectedType}
|
1061
1136
|
saveEdit={saveEdit}
|
1062
1137
|
selectorConfig={selectorConfig}
|
1063
|
-
observerContext={
|
1138
|
+
observerContext={observerContext}
|
1064
1139
|
/>
|
1065
1140
|
)}
|
1066
1141
|
<button
|
@@ -1105,19 +1180,23 @@ const DateInstanceValueEditor = observer(
|
|
1105
1180
|
(props: {
|
1106
1181
|
valueSpecification: PrimitiveInstanceValue | SimpleFunctionExpression;
|
1107
1182
|
graph: PureModel;
|
1108
|
-
|
1183
|
+
observerContext: ObserverContext;
|
1109
1184
|
typeCheckOption: TypeCheckOption;
|
1110
1185
|
className?: string | undefined;
|
1111
1186
|
setValueSpecification: (val: ValueSpecification) => void;
|
1112
1187
|
resetValue: () => void;
|
1188
|
+
handleBlur?: (() => void) | undefined;
|
1189
|
+
displayAsEditableValue?: boolean | undefined;
|
1113
1190
|
}) => {
|
1114
1191
|
const {
|
1115
1192
|
valueSpecification,
|
1116
1193
|
setValueSpecification,
|
1117
1194
|
graph,
|
1118
|
-
|
1195
|
+
observerContext,
|
1119
1196
|
typeCheckOption,
|
1120
1197
|
resetValue,
|
1198
|
+
handleBlur,
|
1199
|
+
displayAsEditableValue,
|
1121
1200
|
} = props;
|
1122
1201
|
|
1123
1202
|
return (
|
@@ -1125,22 +1204,26 @@ const DateInstanceValueEditor = observer(
|
|
1125
1204
|
<CustomDatePicker
|
1126
1205
|
valueSpecification={valueSpecification}
|
1127
1206
|
graph={graph}
|
1128
|
-
observerContext={
|
1207
|
+
observerContext={observerContext}
|
1129
1208
|
typeCheckOption={typeCheckOption}
|
1130
1209
|
setValueSpecification={setValueSpecification}
|
1131
1210
|
hasError={
|
1132
1211
|
valueSpecification instanceof PrimitiveInstanceValue &&
|
1133
1212
|
!isValidInstanceValue(valueSpecification)
|
1134
1213
|
}
|
1214
|
+
handleBlur={handleBlur}
|
1215
|
+
displayAsEditableValue={displayAsEditableValue}
|
1135
1216
|
/>
|
1136
|
-
|
1137
|
-
|
1138
|
-
|
1139
|
-
|
1140
|
-
|
1141
|
-
|
1142
|
-
|
1143
|
-
|
1217
|
+
{!displayAsEditableValue && (
|
1218
|
+
<button
|
1219
|
+
className="value-spec-editor__reset-btn"
|
1220
|
+
name="Reset"
|
1221
|
+
title="Reset"
|
1222
|
+
onClick={resetValue}
|
1223
|
+
>
|
1224
|
+
<RefreshIcon />
|
1225
|
+
</button>
|
1226
|
+
)}
|
1144
1227
|
</div>
|
1145
1228
|
);
|
1146
1229
|
},
|
@@ -1157,25 +1240,33 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1157
1240
|
{
|
1158
1241
|
valueSpecification: ValueSpecification;
|
1159
1242
|
graph: PureModel;
|
1160
|
-
|
1243
|
+
observerContext: ObserverContext;
|
1161
1244
|
typeCheckOption: TypeCheckOption;
|
1162
1245
|
className?: string | undefined;
|
1163
1246
|
setValueSpecification: (val: ValueSpecification) => void;
|
1164
1247
|
resetValue: () => void;
|
1165
|
-
isConstant?: boolean;
|
1248
|
+
isConstant?: boolean | undefined;
|
1166
1249
|
selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
|
1250
|
+
handleBlur?: (() => void) | undefined;
|
1251
|
+
handleKeyDown?:
|
1252
|
+
| ((event: React.KeyboardEvent<HTMLInputElement>) => void)
|
1253
|
+
| undefined;
|
1254
|
+
displayDateEditorAsEditableValue?: boolean | undefined;
|
1167
1255
|
}
|
1168
1256
|
>(function BasicValueSpecificationEditor(props, ref) {
|
1169
1257
|
const {
|
1170
1258
|
className,
|
1171
1259
|
valueSpecification,
|
1172
1260
|
graph,
|
1173
|
-
|
1261
|
+
observerContext,
|
1174
1262
|
typeCheckOption,
|
1175
1263
|
setValueSpecification,
|
1176
1264
|
resetValue,
|
1177
1265
|
selectorConfig,
|
1178
1266
|
isConstant,
|
1267
|
+
handleBlur,
|
1268
|
+
handleKeyDown,
|
1269
|
+
displayDateEditorAsEditableValue,
|
1179
1270
|
} = props;
|
1180
1271
|
if (valueSpecification instanceof PrimitiveInstanceValue) {
|
1181
1272
|
const _type = valueSpecification.genericType.value.rawType;
|
@@ -1188,8 +1279,10 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1188
1279
|
className={className}
|
1189
1280
|
resetValue={resetValue}
|
1190
1281
|
selectorConfig={selectorConfig}
|
1191
|
-
|
1282
|
+
observerContext={observerContext}
|
1192
1283
|
ref={ref}
|
1284
|
+
handleBlur={handleBlur}
|
1285
|
+
handleKeyDown={handleKeyDown}
|
1193
1286
|
/>
|
1194
1287
|
);
|
1195
1288
|
case PRIMITIVE_TYPE.BOOLEAN:
|
@@ -1199,7 +1292,7 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1199
1292
|
setValueSpecification={setValueSpecification}
|
1200
1293
|
className={className}
|
1201
1294
|
resetValue={resetValue}
|
1202
|
-
|
1295
|
+
observerContext={observerContext}
|
1203
1296
|
/>
|
1204
1297
|
);
|
1205
1298
|
case PRIMITIVE_TYPE.NUMBER:
|
@@ -1215,8 +1308,10 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1215
1308
|
setValueSpecification={setValueSpecification}
|
1216
1309
|
className={className}
|
1217
1310
|
resetValue={resetValue}
|
1218
|
-
|
1311
|
+
observerContext={observerContext}
|
1219
1312
|
ref={ref}
|
1313
|
+
handleBlur={handleBlur}
|
1314
|
+
handleKeyDown={handleKeyDown}
|
1220
1315
|
/>
|
1221
1316
|
);
|
1222
1317
|
case PRIMITIVE_TYPE.DATE:
|
@@ -1227,11 +1322,13 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1227
1322
|
<DateInstanceValueEditor
|
1228
1323
|
valueSpecification={valueSpecification}
|
1229
1324
|
graph={graph}
|
1230
|
-
|
1325
|
+
observerContext={observerContext}
|
1231
1326
|
typeCheckOption={typeCheckOption}
|
1232
1327
|
className={className}
|
1233
1328
|
setValueSpecification={setValueSpecification}
|
1234
1329
|
resetValue={resetValue}
|
1330
|
+
handleBlur={handleBlur}
|
1331
|
+
displayAsEditableValue={displayDateEditorAsEditableValue}
|
1235
1332
|
/>
|
1236
1333
|
);
|
1237
1334
|
default:
|
@@ -1244,7 +1341,8 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1244
1341
|
className={className}
|
1245
1342
|
resetValue={resetValue}
|
1246
1343
|
setValueSpecification={setValueSpecification}
|
1247
|
-
|
1344
|
+
observerContext={observerContext}
|
1345
|
+
handleBlur={handleBlur}
|
1248
1346
|
/>
|
1249
1347
|
);
|
1250
1348
|
} else if (
|
@@ -1263,7 +1361,7 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1263
1361
|
resetValue={resetValue}
|
1264
1362
|
setValueSpecification={setValueSpecification}
|
1265
1363
|
selectorConfig={selectorConfig}
|
1266
|
-
|
1364
|
+
observerContext={observerContext}
|
1267
1365
|
/>
|
1268
1366
|
);
|
1269
1367
|
}
|
@@ -1282,10 +1380,13 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1282
1380
|
<BasicValueSpecificationEditor
|
1283
1381
|
valueSpecification={valueSpecification.getValue()}
|
1284
1382
|
graph={graph}
|
1285
|
-
|
1383
|
+
observerContext={observerContext}
|
1286
1384
|
typeCheckOption={typeCheckOption}
|
1287
1385
|
setValueSpecification={setValueSpecification}
|
1288
1386
|
resetValue={resetValue}
|
1387
|
+
handleBlur={handleBlur}
|
1388
|
+
handleKeyDown={handleKeyDown}
|
1389
|
+
displayDateEditorAsEditableValue={displayDateEditorAsEditableValue}
|
1289
1390
|
/>
|
1290
1391
|
);
|
1291
1392
|
} else if (valueSpecification instanceof SimpleFunctionExpression) {
|
@@ -1295,11 +1396,13 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1295
1396
|
<DateInstanceValueEditor
|
1296
1397
|
valueSpecification={valueSpecification}
|
1297
1398
|
graph={graph}
|
1298
|
-
|
1399
|
+
observerContext={observerContext}
|
1299
1400
|
typeCheckOption={typeCheckOption}
|
1300
1401
|
className={className}
|
1301
1402
|
setValueSpecification={setValueSpecification}
|
1302
1403
|
resetValue={resetValue}
|
1404
|
+
handleBlur={handleBlur}
|
1405
|
+
displayAsEditableValue={displayDateEditorAsEditableValue}
|
1303
1406
|
/>
|
1304
1407
|
);
|
1305
1408
|
} else {
|
@@ -1316,7 +1419,7 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1316
1419
|
) {
|
1317
1420
|
const simplifiedValue = simplifyValueExpression(
|
1318
1421
|
valueSpecification,
|
1319
|
-
|
1422
|
+
observerContext,
|
1320
1423
|
);
|
1321
1424
|
if (
|
1322
1425
|
simplifiedValue instanceof PrimitiveInstanceValue &&
|
@@ -1335,8 +1438,10 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1335
1438
|
setValueSpecification={setValueSpecification}
|
1336
1439
|
className={className}
|
1337
1440
|
resetValue={resetValue}
|
1338
|
-
|
1441
|
+
observerContext={observerContext}
|
1339
1442
|
ref={ref}
|
1443
|
+
handleBlur={handleBlur}
|
1444
|
+
handleKeyDown={handleKeyDown}
|
1340
1445
|
/>
|
1341
1446
|
);
|
1342
1447
|
}
|
@@ -1345,3 +1450,100 @@ export const BasicValueSpecificationEditor = forwardRef<
|
|
1345
1450
|
|
1346
1451
|
return <UnsupportedValueSpecificationEditor />;
|
1347
1452
|
});
|
1453
|
+
|
1454
|
+
export const EditableBasicValueSpecificationEditor = observer(
|
1455
|
+
(props: {
|
1456
|
+
valueSpecification: ValueSpecification;
|
1457
|
+
setValueSpecification: (valueSpec: ValueSpecification) => void;
|
1458
|
+
graph: PureModel;
|
1459
|
+
observerContext: ObserverContext;
|
1460
|
+
typeCheckOption: TypeCheckOption;
|
1461
|
+
resetValue: () => void;
|
1462
|
+
selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
|
1463
|
+
isConstant?: boolean;
|
1464
|
+
initializeAsEditable?: boolean;
|
1465
|
+
}) => {
|
1466
|
+
const {
|
1467
|
+
valueSpecification,
|
1468
|
+
setValueSpecification,
|
1469
|
+
graph,
|
1470
|
+
observerContext,
|
1471
|
+
typeCheckOption,
|
1472
|
+
resetValue,
|
1473
|
+
selectorConfig,
|
1474
|
+
isConstant,
|
1475
|
+
initializeAsEditable,
|
1476
|
+
} = props;
|
1477
|
+
const applicationStore = useApplicationStore();
|
1478
|
+
|
1479
|
+
const [isEditingValue, setIsEditingValue] = useState(
|
1480
|
+
initializeAsEditable ?? false,
|
1481
|
+
);
|
1482
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
1483
|
+
|
1484
|
+
useEffect(() => {
|
1485
|
+
if (isEditingValue) {
|
1486
|
+
inputRef.current?.focus();
|
1487
|
+
}
|
1488
|
+
}, [isEditingValue, inputRef]);
|
1489
|
+
|
1490
|
+
const editableDisplayValueSupported =
|
1491
|
+
(valueSpecification instanceof PrimitiveInstanceValue &&
|
1492
|
+
!isSubType(
|
1493
|
+
valueSpecification.genericType.value.rawType,
|
1494
|
+
PrimitiveType.DATE,
|
1495
|
+
) &&
|
1496
|
+
valueSpecification.genericType.value.rawType !==
|
1497
|
+
PrimitiveType.BOOLEAN) ||
|
1498
|
+
valueSpecification instanceof EnumValueInstanceValue;
|
1499
|
+
|
1500
|
+
const shouldRenderEditor = isEditingValue || !editableDisplayValueSupported;
|
1501
|
+
|
1502
|
+
const valueSpecStringValue = getValueSpecificationStringValue(
|
1503
|
+
valueSpecification,
|
1504
|
+
applicationStore,
|
1505
|
+
{
|
1506
|
+
omitEnumOwnerName: true,
|
1507
|
+
},
|
1508
|
+
);
|
1509
|
+
|
1510
|
+
return shouldRenderEditor ? (
|
1511
|
+
<BasicValueSpecificationEditor
|
1512
|
+
valueSpecification={valueSpecification}
|
1513
|
+
setValueSpecification={setValueSpecification}
|
1514
|
+
graph={graph}
|
1515
|
+
observerContext={observerContext}
|
1516
|
+
typeCheckOption={typeCheckOption}
|
1517
|
+
resetValue={resetValue}
|
1518
|
+
selectorConfig={selectorConfig}
|
1519
|
+
isConstant={isConstant}
|
1520
|
+
ref={inputRef}
|
1521
|
+
handleBlur={() => setIsEditingValue(false)}
|
1522
|
+
handleKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
|
1523
|
+
if (event.key === 'Enter') {
|
1524
|
+
setIsEditingValue(false);
|
1525
|
+
}
|
1526
|
+
}}
|
1527
|
+
displayDateEditorAsEditableValue={true}
|
1528
|
+
/>
|
1529
|
+
) : (
|
1530
|
+
<div className="value-spec-editor__editable__display">
|
1531
|
+
<span
|
1532
|
+
className={clsx(
|
1533
|
+
'value-spec-editor__editable__display--content editable-value',
|
1534
|
+
{
|
1535
|
+
'value-spec-editor__editable__display--content--error':
|
1536
|
+
valueSpecification instanceof InstanceValue &&
|
1537
|
+
!isValidInstanceValue(valueSpecification),
|
1538
|
+
},
|
1539
|
+
)}
|
1540
|
+
onClick={() => {
|
1541
|
+
setIsEditingValue(true);
|
1542
|
+
}}
|
1543
|
+
>
|
1544
|
+
{`"${valueSpecStringValue !== undefined ? valueSpecStringValue : ''}"`}
|
1545
|
+
</span>
|
1546
|
+
</div>
|
1547
|
+
);
|
1548
|
+
},
|
1549
|
+
);
|