@dartech/arsenal-ui 1.3.96 → 1.3.98
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/index.js +539 -79
- package/package.json +1 -1
- package/src/lib/Property/PropertyFiller/ControlFiller/ControlMultiplePropertyFiller.d.ts +25 -0
- package/src/lib/Property/PropertyFiller/ControlFiller/ControlMultiplePropertyWidget.d.ts +24 -0
- package/src/lib/Property/PropertyFiller/ControlFiller/ControlPropertyFiller.d.ts +25 -0
- package/src/lib/Property/PropertyFiller/ControlFiller/index.d.ts +3 -0
package/index.js
CHANGED
@@ -69,10 +69,10 @@ import Step from '@mui/material/Step';
|
|
69
69
|
import StepLabel from '@mui/material/StepLabel';
|
70
70
|
import StepContent from '@mui/material/StepContent';
|
71
71
|
import StepConnector from '@mui/material/StepConnector';
|
72
|
-
import Select from '@mui/material/Select';
|
73
|
-
import InputLabel from '@mui/material/InputLabel';
|
74
72
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
75
73
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
74
|
+
import Select from '@mui/material/Select';
|
75
|
+
import InputLabel from '@mui/material/InputLabel';
|
76
76
|
import classnames from 'classnames';
|
77
77
|
import { toast } from 'react-toastify';
|
78
78
|
import CssBaseline from '@mui/material/CssBaseline';
|
@@ -1080,7 +1080,6 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
|
|
1080
1080
|
error
|
1081
1081
|
}
|
1082
1082
|
} = _b;
|
1083
|
-
console.log(error);
|
1084
1083
|
const extensions = useMemo(() => ({
|
1085
1084
|
json: [langs.json()],
|
1086
1085
|
javascript: [langs.javascript()],
|
@@ -4052,7 +4051,8 @@ const StyledInputLabel = styled(InputLabel)(() => ({
|
|
4052
4051
|
}
|
4053
4052
|
}));
|
4054
4053
|
|
4055
|
-
const
|
4054
|
+
const ControlPropertyFiller = ({
|
4055
|
+
control,
|
4056
4056
|
property,
|
4057
4057
|
name,
|
4058
4058
|
useExpression,
|
@@ -4063,14 +4063,12 @@ const PropertyFiller = ({
|
|
4063
4063
|
entityReferenceValueComponent,
|
4064
4064
|
fileReferenceValueComponent
|
4065
4065
|
}) => {
|
4066
|
+
// const { control, clearErrors, setValue, watch } = useFormContext();
|
4066
4067
|
const {
|
4067
|
-
|
4068
|
-
|
4069
|
-
|
4070
|
-
|
4071
|
-
} = useFormContext();
|
4072
|
-
const {
|
4073
|
-
// field: { value },
|
4068
|
+
field: {
|
4069
|
+
value,
|
4070
|
+
onChange
|
4071
|
+
},
|
4074
4072
|
fieldState: {
|
4075
4073
|
error,
|
4076
4074
|
isDirty
|
@@ -4086,7 +4084,7 @@ const PropertyFiller = ({
|
|
4086
4084
|
}
|
4087
4085
|
}
|
4088
4086
|
});
|
4089
|
-
const value = watch(name);
|
4087
|
+
// const value = watch(name);
|
4090
4088
|
const prevValueRef = useRef({});
|
4091
4089
|
const {
|
4092
4090
|
propertyType,
|
@@ -4112,7 +4110,7 @@ const PropertyFiller = ({
|
|
4112
4110
|
setFillOption(selectedType);
|
4113
4111
|
const prevValue = prevValueRef.current[selectedType];
|
4114
4112
|
if (selectedType === 'null') {
|
4115
|
-
|
4113
|
+
onChange(null, {
|
4116
4114
|
shouldDirty: true
|
4117
4115
|
});
|
4118
4116
|
} else if (selectedType === 'widget') {
|
@@ -4121,15 +4119,15 @@ const PropertyFiller = ({
|
|
4121
4119
|
properties: propertiesArrayToObject(value.property || [])
|
4122
4120
|
});
|
4123
4121
|
try {
|
4124
|
-
|
4122
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
|
4125
4123
|
} catch (error) {
|
4126
4124
|
console.log('Stringify failed', error);
|
4127
4125
|
}
|
4128
4126
|
} else {
|
4129
|
-
|
4127
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
|
4130
4128
|
}
|
4131
4129
|
} else if (selectedType === 'expression' || selectedType === 'string') {
|
4132
|
-
|
4130
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
|
4133
4131
|
shouldDirty: true
|
4134
4132
|
});
|
4135
4133
|
} else if (selectedType === 'dem_builder') {
|
@@ -4143,33 +4141,33 @@ const PropertyFiller = ({
|
|
4143
4141
|
try {
|
4144
4142
|
const definitionValue = JSON.parse(value);
|
4145
4143
|
definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
|
4146
|
-
|
4144
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
|
4147
4145
|
shouldDirty: true
|
4148
4146
|
});
|
4149
4147
|
} catch (error) {
|
4150
|
-
|
4148
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
|
4151
4149
|
shouldDirty: true
|
4152
4150
|
});
|
4153
4151
|
}
|
4154
4152
|
} else {
|
4155
|
-
|
4153
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
|
4156
4154
|
shouldDirty: true
|
4157
4155
|
});
|
4158
4156
|
}
|
4159
4157
|
}
|
4160
|
-
clearErrors();
|
4161
|
-
}, [
|
4158
|
+
// clearErrors();
|
4159
|
+
}, [defaultProperyValue, value, setFillOption, fillOption, propertyType, onChange, property]);
|
4162
4160
|
useEffect(() => {
|
4163
4161
|
if (!isDirty && (property.defaultValue || property.value) && !value) {
|
4164
|
-
|
4162
|
+
onChange(property.defaultValue || property.value);
|
4165
4163
|
}
|
4166
|
-
}, [isDirty, property,
|
4164
|
+
}, [isDirty, property, onChange, value]);
|
4167
4165
|
useEffect(() => {
|
4168
4166
|
var _a;
|
4169
4167
|
if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
|
4170
|
-
|
4168
|
+
onChange((_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
|
4171
4169
|
}
|
4172
|
-
}, [value,
|
4170
|
+
}, [value, onChange, defaultProperyValue, property, fillOption]);
|
4173
4171
|
return jsxs(Grid, Object.assign({
|
4174
4172
|
xs: 12
|
4175
4173
|
}, {
|
@@ -4237,6 +4235,12 @@ const PropertyFiller = ({
|
|
4237
4235
|
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
4238
4236
|
entityReferenceValueComponent: entityReferenceValueComponent,
|
4239
4237
|
fileReferenceValueComponent: fileReferenceValueComponent
|
4238
|
+
}), fillOption === 'dem_builder' && jsx(CreateDefinition, {
|
4239
|
+
title: "JSON",
|
4240
|
+
definitionFieldName: name,
|
4241
|
+
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
4242
|
+
entityReferenceValueComponent: entityReferenceValueComponent,
|
4243
|
+
fileReferenceValueComponent: fileReferenceValueComponent
|
4240
4244
|
}), error && jsx(FormHelperText, Object.assign({
|
4241
4245
|
error: true
|
4242
4246
|
}, {
|
@@ -4245,7 +4249,8 @@ const PropertyFiller = ({
|
|
4245
4249
|
}));
|
4246
4250
|
};
|
4247
4251
|
|
4248
|
-
const
|
4252
|
+
const ControlMultiplePropertyWidget = ({
|
4253
|
+
control,
|
4249
4254
|
name,
|
4250
4255
|
property,
|
4251
4256
|
useExpression,
|
@@ -4255,26 +4260,31 @@ const MultiplePropertyWidget = ({
|
|
4255
4260
|
entityReferenceValueComponent,
|
4256
4261
|
fileReferenceValueComponent
|
4257
4262
|
}) => {
|
4263
|
+
// const { control, setValue, clearErrors } = useFormContext();
|
4264
|
+
// const { field: { onChange } } = useController({ control, name });
|
4265
|
+
// const values = useWatch({ control, name });
|
4258
4266
|
const {
|
4259
|
-
|
4260
|
-
|
4261
|
-
|
4262
|
-
} =
|
4263
|
-
const values = useWatch({
|
4267
|
+
fields: values,
|
4268
|
+
append,
|
4269
|
+
remove
|
4270
|
+
} = useFieldArray({
|
4264
4271
|
control,
|
4265
4272
|
name
|
4266
4273
|
});
|
4267
|
-
const handleAddValue = useCallback(() => {
|
4268
|
-
|
4269
|
-
|
4270
|
-
|
4271
|
-
|
4272
|
-
|
4273
|
-
|
4274
|
-
}, [name, values, setValue, clearErrors]);
|
4275
|
-
const handleDeleteValue = useCallback(
|
4276
|
-
|
4277
|
-
|
4274
|
+
// const handleAddValue = useCallback(() => {
|
4275
|
+
// if (values && Array.isArray(values)) {
|
4276
|
+
// onChange(`${name}.${values.length}`, null);
|
4277
|
+
// } else {
|
4278
|
+
// onChange([]);
|
4279
|
+
// }
|
4280
|
+
// // clearErrors(name);
|
4281
|
+
// }, [name, values, setValue, clearErrors]);
|
4282
|
+
// const handleDeleteValue = useCallback(
|
4283
|
+
// (index) => {
|
4284
|
+
// setValue(name, removeArrayItem(values, index));
|
4285
|
+
// },
|
4286
|
+
// [name, values, setValue]
|
4287
|
+
// );
|
4278
4288
|
return jsxs(Grid, Object.assign({
|
4279
4289
|
container: true,
|
4280
4290
|
spacing: 2,
|
@@ -4293,7 +4303,8 @@ const MultiplePropertyWidget = ({
|
|
4293
4303
|
backgroundColor: '#f1f1f1'
|
4294
4304
|
}
|
4295
4305
|
}, {
|
4296
|
-
children: [jsx(
|
4306
|
+
children: [jsx(ControlPropertyFiller, {
|
4307
|
+
control: control,
|
4297
4308
|
required: required,
|
4298
4309
|
property: property,
|
4299
4310
|
useExpression: useExpression,
|
@@ -4309,7 +4320,7 @@ const MultiplePropertyWidget = ({
|
|
4309
4320
|
children: jsx(IconButton, Object.assign({
|
4310
4321
|
id: "close-button",
|
4311
4322
|
size: "small",
|
4312
|
-
onClick: () =>
|
4323
|
+
onClick: () => remove(index)
|
4313
4324
|
}, {
|
4314
4325
|
children: jsx(SvgIcon, Object.assign({
|
4315
4326
|
fontSize: "small"
|
@@ -4321,21 +4332,22 @@ const MultiplePropertyWidget = ({
|
|
4321
4332
|
}))
|
4322
4333
|
}))]
|
4323
4334
|
}))
|
4324
|
-
}),
|
4335
|
+
}), value.id)) : null, jsx(Grid, {
|
4325
4336
|
children: jsx(Button, Object.assign({
|
4326
4337
|
variant: "contained",
|
4327
4338
|
size: "small",
|
4328
4339
|
color: "primary",
|
4329
|
-
onClick:
|
4340
|
+
onClick: () => append(null)
|
4330
4341
|
}, {
|
4331
4342
|
children: "Add value"
|
4332
4343
|
}))
|
4333
4344
|
})]
|
4334
4345
|
}));
|
4335
4346
|
};
|
4336
|
-
var
|
4347
|
+
var ControlMultiplePropertyWidget$1 = ControlMultiplePropertyWidget;
|
4337
4348
|
|
4338
|
-
const
|
4349
|
+
const ControlMultiplePropertyFiller = ({
|
4350
|
+
control,
|
4339
4351
|
property,
|
4340
4352
|
name,
|
4341
4353
|
useExpression,
|
@@ -4348,15 +4360,10 @@ const MultiplePropertyFiller = ({
|
|
4348
4360
|
}) => {
|
4349
4361
|
var _a;
|
4350
4362
|
const [selectTouched, setSelectTouched] = useState(false);
|
4351
|
-
const {
|
4352
|
-
control,
|
4353
|
-
clearErrors,
|
4354
|
-
setValue,
|
4355
|
-
watch
|
4356
|
-
} = useFormContext();
|
4363
|
+
// const { control, clearErrors, setValue, watch } = useFormContext();
|
4357
4364
|
const {
|
4358
4365
|
field: {
|
4359
|
-
|
4366
|
+
value,
|
4360
4367
|
onChange
|
4361
4368
|
},
|
4362
4369
|
fieldState: {
|
@@ -4374,7 +4381,7 @@ const MultiplePropertyFiller = ({
|
|
4374
4381
|
}
|
4375
4382
|
}
|
4376
4383
|
});
|
4377
|
-
const value = watch(name);
|
4384
|
+
// const value = watch(name);
|
4378
4385
|
const prevValueRef = useRef({});
|
4379
4386
|
const {
|
4380
4387
|
propertyType,
|
@@ -4401,19 +4408,20 @@ const MultiplePropertyFiller = ({
|
|
4401
4408
|
const selectedType = event.target.value;
|
4402
4409
|
const prevValue = prevValueRef.current[selectedType];
|
4403
4410
|
if (selectedType === 'null') {
|
4404
|
-
|
4411
|
+
onChange(null);
|
4405
4412
|
} else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
|
4406
|
-
|
4413
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
|
4407
4414
|
shouldDirty: true
|
4408
4415
|
});
|
4409
4416
|
} else if (selectedType === 'widget') {
|
4410
|
-
|
4417
|
+
onChange(prevValue !== null && prevValue !== void 0 ? prevValue : [], {
|
4411
4418
|
shouldDirty: true
|
4412
4419
|
});
|
4413
4420
|
}
|
4414
4421
|
setFillOption(selectedType);
|
4415
|
-
clearErrors(name);
|
4422
|
+
// clearErrors(name);
|
4416
4423
|
};
|
4424
|
+
|
4417
4425
|
useEffect(() => {
|
4418
4426
|
if (!value) {
|
4419
4427
|
onChange(property.isRequired && property.isMultiple ? [] : null);
|
@@ -4481,7 +4489,8 @@ const MultiplePropertyFiller = ({
|
|
4481
4489
|
hideErrorMessage: true
|
4482
4490
|
})
|
4483
4491
|
// <JsonEditor validate name={name} ref={ref} useParsedValue />
|
4484
|
-
, fillOption === 'widget' && jsx(
|
4492
|
+
, fillOption === 'widget' && jsx(ControlMultiplePropertyWidget$1, {
|
4493
|
+
control: control,
|
4485
4494
|
property: property,
|
4486
4495
|
name: name,
|
4487
4496
|
useExpression: useExpression,
|
@@ -4508,7 +4517,6 @@ const PropertyValueField = ({
|
|
4508
4517
|
entityReferenceValueComponent,
|
4509
4518
|
fileReferenceValueComponent
|
4510
4519
|
}) => {
|
4511
|
-
// const { control } = useFormContext();
|
4512
4520
|
const propertyType = useWatch({
|
4513
4521
|
control,
|
4514
4522
|
name: `${propertyFieldName}.propertyType`
|
@@ -4556,23 +4564,29 @@ const PropertyValueField = ({
|
|
4556
4564
|
}, [propertyType, format, restrictedValues, isMultiple, _label,
|
4557
4565
|
// key,
|
4558
4566
|
isRequired, properties, required]);
|
4559
|
-
return
|
4560
|
-
|
4561
|
-
|
4562
|
-
|
4563
|
-
|
4564
|
-
|
4565
|
-
|
4566
|
-
|
4567
|
-
|
4568
|
-
|
4569
|
-
|
4570
|
-
|
4571
|
-
|
4572
|
-
|
4573
|
-
|
4574
|
-
|
4575
|
-
|
4567
|
+
return jsx(LocalizationProvider, Object.assign({
|
4568
|
+
dateAdapter: AdapterDateFns
|
4569
|
+
}, {
|
4570
|
+
children: isMultiple ? jsx(ControlMultiplePropertyFiller, {
|
4571
|
+
control: control,
|
4572
|
+
name: name,
|
4573
|
+
property: fillerProperty,
|
4574
|
+
title: _label,
|
4575
|
+
required: required,
|
4576
|
+
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
4577
|
+
entityReferenceValueComponent: entityReferenceValueComponent,
|
4578
|
+
fileReferenceValueComponent: fileReferenceValueComponent
|
4579
|
+
}) : jsx(ControlPropertyFiller, {
|
4580
|
+
control: control,
|
4581
|
+
name: name,
|
4582
|
+
property: fillerProperty,
|
4583
|
+
title: _label,
|
4584
|
+
required: required,
|
4585
|
+
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
4586
|
+
entityReferenceValueComponent: entityReferenceValueComponent,
|
4587
|
+
fileReferenceValueComponent: fileReferenceValueComponent
|
4588
|
+
})
|
4589
|
+
}));
|
4576
4590
|
};
|
4577
4591
|
|
4578
4592
|
const NodesList = ({
|
@@ -5633,6 +5647,452 @@ const ViewPropertiesList = ({
|
|
5633
5647
|
}));
|
5634
5648
|
};
|
5635
5649
|
|
5650
|
+
const PropertyFiller = ({
|
5651
|
+
property,
|
5652
|
+
name,
|
5653
|
+
useExpression,
|
5654
|
+
label,
|
5655
|
+
required,
|
5656
|
+
title,
|
5657
|
+
entityReferenceDefinitionSources,
|
5658
|
+
entityReferenceValueComponent,
|
5659
|
+
fileReferenceValueComponent
|
5660
|
+
}) => {
|
5661
|
+
const {
|
5662
|
+
control,
|
5663
|
+
clearErrors,
|
5664
|
+
setValue,
|
5665
|
+
watch
|
5666
|
+
} = useFormContext();
|
5667
|
+
const {
|
5668
|
+
// field: { value },
|
5669
|
+
fieldState: {
|
5670
|
+
error,
|
5671
|
+
isDirty
|
5672
|
+
}
|
5673
|
+
} = useController({
|
5674
|
+
name,
|
5675
|
+
control,
|
5676
|
+
defaultValue: property.defaultValue,
|
5677
|
+
rules: {
|
5678
|
+
validate: val => {
|
5679
|
+
if (required && val === null) return 'Please, fill this field';
|
5680
|
+
return true;
|
5681
|
+
}
|
5682
|
+
}
|
5683
|
+
});
|
5684
|
+
const value = watch(name);
|
5685
|
+
const prevValueRef = useRef({});
|
5686
|
+
const {
|
5687
|
+
propertyType,
|
5688
|
+
valueLabel,
|
5689
|
+
fillOptionLabel,
|
5690
|
+
fillOption,
|
5691
|
+
fillOptions,
|
5692
|
+
setFillOption,
|
5693
|
+
defaultProperyValue
|
5694
|
+
} = usePropertyFiller$1({
|
5695
|
+
value,
|
5696
|
+
property,
|
5697
|
+
isDirty,
|
5698
|
+
label,
|
5699
|
+
required,
|
5700
|
+
useExpression
|
5701
|
+
});
|
5702
|
+
const handleFillOptionChange = useCallback(event => {
|
5703
|
+
const selectedType = event.target.value;
|
5704
|
+
prevValueRef.current = Object.assign(Object.assign({}, prevValueRef.current), {
|
5705
|
+
[fillOption]: value
|
5706
|
+
});
|
5707
|
+
setFillOption(selectedType);
|
5708
|
+
const prevValue = prevValueRef.current[selectedType];
|
5709
|
+
if (selectedType === 'null') {
|
5710
|
+
setValue(name, null, {
|
5711
|
+
shouldDirty: true
|
5712
|
+
});
|
5713
|
+
} else if (selectedType === 'widget') {
|
5714
|
+
if (propertyType === PropertyType.JSON && value && typeof value !== 'string' && fillOption === 'dem_builder' && 'properties' in value) {
|
5715
|
+
const definitionValue = Object.assign(Object.assign({}, value), {
|
5716
|
+
properties: propertiesArrayToObject(value.property || [])
|
5717
|
+
});
|
5718
|
+
try {
|
5719
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
|
5720
|
+
} catch (error) {
|
5721
|
+
console.log('Stringify failed', error);
|
5722
|
+
}
|
5723
|
+
} else {
|
5724
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
|
5725
|
+
}
|
5726
|
+
} else if (selectedType === 'expression' || selectedType === 'string') {
|
5727
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
|
5728
|
+
shouldDirty: true
|
5729
|
+
});
|
5730
|
+
} else if (selectedType === 'dem_builder') {
|
5731
|
+
const defaultArrayValue = {
|
5732
|
+
code: '',
|
5733
|
+
name: '',
|
5734
|
+
version: 0,
|
5735
|
+
properties: []
|
5736
|
+
};
|
5737
|
+
if (value) {
|
5738
|
+
try {
|
5739
|
+
const definitionValue = JSON.parse(value);
|
5740
|
+
definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
|
5741
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
|
5742
|
+
shouldDirty: true
|
5743
|
+
});
|
5744
|
+
} catch (error) {
|
5745
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
|
5746
|
+
shouldDirty: true
|
5747
|
+
});
|
5748
|
+
}
|
5749
|
+
} else {
|
5750
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
|
5751
|
+
shouldDirty: true
|
5752
|
+
});
|
5753
|
+
}
|
5754
|
+
}
|
5755
|
+
clearErrors();
|
5756
|
+
}, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
|
5757
|
+
useEffect(() => {
|
5758
|
+
if (!isDirty && (property.defaultValue || property.value) && !value) {
|
5759
|
+
setValue(name, property.defaultValue || property.value);
|
5760
|
+
}
|
5761
|
+
}, [isDirty, property, name, setValue, value]);
|
5762
|
+
useEffect(() => {
|
5763
|
+
var _a;
|
5764
|
+
if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
|
5765
|
+
setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
|
5766
|
+
}
|
5767
|
+
}, [value, setValue, defaultProperyValue, property, name, fillOption]);
|
5768
|
+
return jsxs(Grid, Object.assign({
|
5769
|
+
xs: 12
|
5770
|
+
}, {
|
5771
|
+
children: [title && jsx(Box, Object.assign({
|
5772
|
+
mb: 2
|
5773
|
+
}, {
|
5774
|
+
children: jsx(Typography, Object.assign({
|
5775
|
+
variant: "h6"
|
5776
|
+
}, {
|
5777
|
+
children: title
|
5778
|
+
}))
|
5779
|
+
})), fillOptions ? jsx(Box, Object.assign({
|
5780
|
+
mb: 2
|
5781
|
+
}, {
|
5782
|
+
children: jsxs(FormControl, Object.assign({
|
5783
|
+
fullWidth: true,
|
5784
|
+
size: "small",
|
5785
|
+
variant: "outlined"
|
5786
|
+
}, {
|
5787
|
+
children: [jsx(StyledInputLabel, Object.assign({
|
5788
|
+
htmlFor: "type-select"
|
5789
|
+
}, {
|
5790
|
+
children: fillOptionLabel
|
5791
|
+
})), jsx(Select, Object.assign({
|
5792
|
+
labelId: "type-select",
|
5793
|
+
label: fillOptionLabel,
|
5794
|
+
value: fillOption || '',
|
5795
|
+
onChange: handleFillOptionChange
|
5796
|
+
}, {
|
5797
|
+
children: fillOptions.map(option => jsx(MenuItem, Object.assign({
|
5798
|
+
value: option.value
|
5799
|
+
}, {
|
5800
|
+
children: option.label
|
5801
|
+
}), option.value))
|
5802
|
+
}))]
|
5803
|
+
}))
|
5804
|
+
})) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
|
5805
|
+
name: name,
|
5806
|
+
control: control,
|
5807
|
+
label: valueLabel,
|
5808
|
+
parseValue: true,
|
5809
|
+
validateJson: true,
|
5810
|
+
hideErrorMessage: true
|
5811
|
+
}) : jsx(ControlInput, {
|
5812
|
+
control: control,
|
5813
|
+
name: name,
|
5814
|
+
label: valueLabel,
|
5815
|
+
hideErrorMessage: true
|
5816
|
+
})), fillOption === 'string' && jsx(ControlInput, {
|
5817
|
+
control: control,
|
5818
|
+
name: name,
|
5819
|
+
label: valueLabel,
|
5820
|
+
hideErrorMessage: true
|
5821
|
+
}), fillOption === 'json_notvalid' && jsx(ControlAceEditor, {
|
5822
|
+
name: name,
|
5823
|
+
control: control,
|
5824
|
+
label: valueLabel,
|
5825
|
+
hideErrorMessage: true
|
5826
|
+
}), fillOption === 'widget' && jsx(PropertyWidget, {
|
5827
|
+
control: control,
|
5828
|
+
property: property,
|
5829
|
+
name: name,
|
5830
|
+
useExpression: useExpression,
|
5831
|
+
label: valueLabel,
|
5832
|
+
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
5833
|
+
entityReferenceValueComponent: entityReferenceValueComponent,
|
5834
|
+
fileReferenceValueComponent: fileReferenceValueComponent
|
5835
|
+
}), error && jsx(FormHelperText, Object.assign({
|
5836
|
+
error: true
|
5837
|
+
}, {
|
5838
|
+
children: error.message
|
5839
|
+
}))]
|
5840
|
+
}));
|
5841
|
+
};
|
5842
|
+
|
5843
|
+
const MultiplePropertyWidget = ({
|
5844
|
+
name,
|
5845
|
+
property,
|
5846
|
+
useExpression,
|
5847
|
+
required,
|
5848
|
+
label,
|
5849
|
+
entityReferenceDefinitionSources,
|
5850
|
+
entityReferenceValueComponent,
|
5851
|
+
fileReferenceValueComponent
|
5852
|
+
}) => {
|
5853
|
+
const {
|
5854
|
+
control,
|
5855
|
+
setValue,
|
5856
|
+
clearErrors
|
5857
|
+
} = useFormContext();
|
5858
|
+
const values = useWatch({
|
5859
|
+
control,
|
5860
|
+
name
|
5861
|
+
});
|
5862
|
+
const handleAddValue = useCallback(() => {
|
5863
|
+
if (values && Array.isArray(values)) {
|
5864
|
+
setValue(`${name}.${values.length}`, null);
|
5865
|
+
} else {
|
5866
|
+
setValue(name, []);
|
5867
|
+
}
|
5868
|
+
clearErrors(name);
|
5869
|
+
}, [name, values, setValue, clearErrors]);
|
5870
|
+
const handleDeleteValue = useCallback(index => {
|
5871
|
+
setValue(name, removeArrayItem(values, index));
|
5872
|
+
}, [name, values, setValue]);
|
5873
|
+
return jsxs(Grid, Object.assign({
|
5874
|
+
container: true,
|
5875
|
+
spacing: 2,
|
5876
|
+
direction: "column",
|
5877
|
+
xs: 12
|
5878
|
+
}, {
|
5879
|
+
children: [Array.isArray(values) && values.length ? values.map((value, index) => jsx(Grid, Object.assign({
|
5880
|
+
xs: 12
|
5881
|
+
}, {
|
5882
|
+
children: jsxs(Box, Object.assign({
|
5883
|
+
display: "flex",
|
5884
|
+
alignItems: "flex-start",
|
5885
|
+
width: "100%",
|
5886
|
+
p: 2,
|
5887
|
+
style: {
|
5888
|
+
backgroundColor: '#f1f1f1'
|
5889
|
+
}
|
5890
|
+
}, {
|
5891
|
+
children: [jsx(PropertyFiller, {
|
5892
|
+
required: required,
|
5893
|
+
property: property,
|
5894
|
+
useExpression: useExpression,
|
5895
|
+
name: `${name}.${index}`,
|
5896
|
+
label: `${label || property.name} (${index + 1})`,
|
5897
|
+
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
5898
|
+
entityReferenceValueComponent: entityReferenceValueComponent,
|
5899
|
+
fileReferenceValueComponent: fileReferenceValueComponent
|
5900
|
+
}), jsx(Box, Object.assign({
|
5901
|
+
mt: "8px",
|
5902
|
+
ml: "4px"
|
5903
|
+
}, {
|
5904
|
+
children: jsx(IconButton, Object.assign({
|
5905
|
+
id: "close-button",
|
5906
|
+
size: "small",
|
5907
|
+
onClick: () => handleDeleteValue(index)
|
5908
|
+
}, {
|
5909
|
+
children: jsx(SvgIcon, Object.assign({
|
5910
|
+
fontSize: "small"
|
5911
|
+
}, {
|
5912
|
+
children: jsx("path", {
|
5913
|
+
d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
5914
|
+
})
|
5915
|
+
}))
|
5916
|
+
}))
|
5917
|
+
}))]
|
5918
|
+
}))
|
5919
|
+
}), index)) : null, jsx(Grid, {
|
5920
|
+
children: jsx(Button, Object.assign({
|
5921
|
+
variant: "contained",
|
5922
|
+
size: "small",
|
5923
|
+
color: "primary",
|
5924
|
+
onClick: handleAddValue
|
5925
|
+
}, {
|
5926
|
+
children: "Add value"
|
5927
|
+
}))
|
5928
|
+
})]
|
5929
|
+
}));
|
5930
|
+
};
|
5931
|
+
var MultiplePropertyWidget$1 = MultiplePropertyWidget;
|
5932
|
+
|
5933
|
+
const MultiplePropertyFiller = ({
|
5934
|
+
property,
|
5935
|
+
name,
|
5936
|
+
useExpression,
|
5937
|
+
required,
|
5938
|
+
label,
|
5939
|
+
title,
|
5940
|
+
entityReferenceDefinitionSources,
|
5941
|
+
entityReferenceValueComponent,
|
5942
|
+
fileReferenceValueComponent
|
5943
|
+
}) => {
|
5944
|
+
var _a;
|
5945
|
+
const [selectTouched, setSelectTouched] = useState(false);
|
5946
|
+
const {
|
5947
|
+
control,
|
5948
|
+
clearErrors,
|
5949
|
+
setValue,
|
5950
|
+
watch
|
5951
|
+
} = useFormContext();
|
5952
|
+
const {
|
5953
|
+
field: {
|
5954
|
+
ref,
|
5955
|
+
onChange
|
5956
|
+
},
|
5957
|
+
fieldState: {
|
5958
|
+
error,
|
5959
|
+
isDirty
|
5960
|
+
}
|
5961
|
+
} = useController({
|
5962
|
+
control,
|
5963
|
+
name,
|
5964
|
+
defaultValue: (_a = property.defaultValue) !== null && _a !== void 0 ? _a : [],
|
5965
|
+
rules: {
|
5966
|
+
validate: val => {
|
5967
|
+
if (required && !val) return 'Please, fill this field';
|
5968
|
+
return true;
|
5969
|
+
}
|
5970
|
+
}
|
5971
|
+
});
|
5972
|
+
const value = watch(name);
|
5973
|
+
const prevValueRef = useRef({});
|
5974
|
+
const {
|
5975
|
+
propertyType,
|
5976
|
+
valueLabel,
|
5977
|
+
fillOptionLabel,
|
5978
|
+
fillOption,
|
5979
|
+
fillOptions,
|
5980
|
+
setFillOption,
|
5981
|
+
checkFillOption
|
5982
|
+
} = usePropertyFiller$1({
|
5983
|
+
property,
|
5984
|
+
value,
|
5985
|
+
isDirty,
|
5986
|
+
label,
|
5987
|
+
required,
|
5988
|
+
useExpression,
|
5989
|
+
multipleOptions: true
|
5990
|
+
});
|
5991
|
+
const handleFillOptionChange = event => {
|
5992
|
+
setSelectTouched(true);
|
5993
|
+
prevValueRef.current = Object.assign(Object.assign({}, prevValueRef.current), {
|
5994
|
+
[fillOption]: value
|
5995
|
+
});
|
5996
|
+
const selectedType = event.target.value;
|
5997
|
+
const prevValue = prevValueRef.current[selectedType];
|
5998
|
+
if (selectedType === 'null') {
|
5999
|
+
setValue(name, null);
|
6000
|
+
} else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
|
6001
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
|
6002
|
+
shouldDirty: true
|
6003
|
+
});
|
6004
|
+
} else if (selectedType === 'widget') {
|
6005
|
+
setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : [], {
|
6006
|
+
shouldDirty: true
|
6007
|
+
});
|
6008
|
+
}
|
6009
|
+
setFillOption(selectedType);
|
6010
|
+
clearErrors(name);
|
6011
|
+
};
|
6012
|
+
useEffect(() => {
|
6013
|
+
if (!value) {
|
6014
|
+
onChange(property.isRequired && property.isMultiple ? [] : null);
|
6015
|
+
}
|
6016
|
+
}, [value, property, onChange]);
|
6017
|
+
useEffect(() => {
|
6018
|
+
if (value && !selectTouched) {
|
6019
|
+
setSelectTouched(true);
|
6020
|
+
checkFillOption();
|
6021
|
+
}
|
6022
|
+
}, [checkFillOption, selectTouched, value]);
|
6023
|
+
return jsxs(Grid, {
|
6024
|
+
children: [title && jsx(Box, Object.assign({
|
6025
|
+
mb: 2
|
6026
|
+
}, {
|
6027
|
+
children: jsx(Typography, Object.assign({
|
6028
|
+
variant: "h6"
|
6029
|
+
}, {
|
6030
|
+
children: title
|
6031
|
+
}))
|
6032
|
+
})), fillOptions ? jsx(Box, Object.assign({
|
6033
|
+
mb: 2
|
6034
|
+
}, {
|
6035
|
+
children: jsxs(FormControl, Object.assign({
|
6036
|
+
fullWidth: true,
|
6037
|
+
size: "small",
|
6038
|
+
variant: "outlined"
|
6039
|
+
}, {
|
6040
|
+
children: [jsx(StyledInputLabel, Object.assign({
|
6041
|
+
htmlFor: "type-select"
|
6042
|
+
}, {
|
6043
|
+
children: fillOptionLabel
|
6044
|
+
})), jsx(Select, Object.assign({
|
6045
|
+
labelId: "type-select",
|
6046
|
+
label: fillOptionLabel,
|
6047
|
+
value: fillOption || '',
|
6048
|
+
onChange: handleFillOptionChange
|
6049
|
+
}, {
|
6050
|
+
children: fillOptions.map(option => jsx(MenuItem, Object.assign({
|
6051
|
+
value: option.value
|
6052
|
+
}, {
|
6053
|
+
children: option.label
|
6054
|
+
}), option.value))
|
6055
|
+
}))]
|
6056
|
+
}))
|
6057
|
+
})) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
|
6058
|
+
name: name,
|
6059
|
+
control: control,
|
6060
|
+
label: valueLabel,
|
6061
|
+
parseValue: true,
|
6062
|
+
validateJson: true,
|
6063
|
+
hideErrorMessage: true
|
6064
|
+
}) : jsx(ControlInput, {
|
6065
|
+
required: true,
|
6066
|
+
hideErrorMessage: true,
|
6067
|
+
control: control,
|
6068
|
+
name: name,
|
6069
|
+
label: valueLabel
|
6070
|
+
})), fillOption === 'json_valid' && jsx(ControlAceEditor, {
|
6071
|
+
name: name,
|
6072
|
+
control: control,
|
6073
|
+
label: valueLabel,
|
6074
|
+
parseValue: true,
|
6075
|
+
validateJson: true,
|
6076
|
+
hideErrorMessage: true
|
6077
|
+
})
|
6078
|
+
// <JsonEditor validate name={name} ref={ref} useParsedValue />
|
6079
|
+
, fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
|
6080
|
+
property: property,
|
6081
|
+
name: name,
|
6082
|
+
useExpression: useExpression,
|
6083
|
+
required: required,
|
6084
|
+
label: label,
|
6085
|
+
entityReferenceDefinitionSources: entityReferenceDefinitionSources,
|
6086
|
+
entityReferenceValueComponent: entityReferenceValueComponent,
|
6087
|
+
fileReferenceValueComponent: fileReferenceValueComponent
|
6088
|
+
}), error && jsx(FormHelperText, Object.assign({
|
6089
|
+
error: true
|
6090
|
+
}, {
|
6091
|
+
children: error.message
|
6092
|
+
}))]
|
6093
|
+
});
|
6094
|
+
};
|
6095
|
+
|
5636
6096
|
const DefinitionFiller = ({
|
5637
6097
|
properties,
|
5638
6098
|
dataFieldName,
|
package/package.json
CHANGED
@@ -0,0 +1,25 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Control } from 'react-hook-form';
|
3
|
+
import { EntityReferenceProperty, PropertyUnion } from '../../../../interfaces';
|
4
|
+
type Props = {
|
5
|
+
control: Control<any>;
|
6
|
+
property: PropertyUnion;
|
7
|
+
name: string;
|
8
|
+
useExpression?: boolean;
|
9
|
+
required?: boolean;
|
10
|
+
label?: string;
|
11
|
+
title?: string;
|
12
|
+
entityReferenceDefinitionSources?: {
|
13
|
+
label: string;
|
14
|
+
value: string;
|
15
|
+
}[];
|
16
|
+
entityReferenceValueComponent?: React.ElementType<{
|
17
|
+
name: string;
|
18
|
+
property: EntityReferenceProperty;
|
19
|
+
}>;
|
20
|
+
fileReferenceValueComponent?: React.ElementType<{
|
21
|
+
name: string;
|
22
|
+
}>;
|
23
|
+
};
|
24
|
+
export declare const ControlMultiplePropertyFiller: ({ control, property, name, useExpression, required, label, title, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
|
25
|
+
export default ControlMultiplePropertyFiller;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Control } from 'react-hook-form';
|
3
|
+
import { EntityReferenceProperty, PropertyUnion } from '../../../../interfaces';
|
4
|
+
type Props = {
|
5
|
+
control: Control<any>;
|
6
|
+
name: string;
|
7
|
+
property: PropertyUnion;
|
8
|
+
useExpression?: boolean;
|
9
|
+
required?: boolean;
|
10
|
+
label?: string;
|
11
|
+
entityReferenceDefinitionSources?: {
|
12
|
+
label: string;
|
13
|
+
value: string;
|
14
|
+
}[];
|
15
|
+
entityReferenceValueComponent?: React.ElementType<{
|
16
|
+
name: string;
|
17
|
+
property: EntityReferenceProperty;
|
18
|
+
}>;
|
19
|
+
fileReferenceValueComponent?: React.ElementType<{
|
20
|
+
name: string;
|
21
|
+
}>;
|
22
|
+
};
|
23
|
+
export declare const ControlMultiplePropertyWidget: ({ control, name, property, useExpression, required, label, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
|
24
|
+
export default ControlMultiplePropertyWidget;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Control } from 'react-hook-form';
|
3
|
+
import { EntityReferenceProperty, PropertyUnion } from '../../../../interfaces';
|
4
|
+
export type ControlPropertyFillerProps = {
|
5
|
+
control: Control<any>;
|
6
|
+
property: PropertyUnion;
|
7
|
+
name: string;
|
8
|
+
useExpression?: boolean;
|
9
|
+
label?: string;
|
10
|
+
required?: boolean;
|
11
|
+
title?: string;
|
12
|
+
entityReferenceDefinitionSources?: {
|
13
|
+
label: string;
|
14
|
+
value: string;
|
15
|
+
}[];
|
16
|
+
entityReferenceValueComponent?: React.ElementType<{
|
17
|
+
name: string;
|
18
|
+
property: EntityReferenceProperty;
|
19
|
+
}>;
|
20
|
+
fileReferenceValueComponent?: React.ElementType<{
|
21
|
+
name: string;
|
22
|
+
}>;
|
23
|
+
};
|
24
|
+
export declare const ControlPropertyFiller: ({ control, property, name, useExpression, label, required, title, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: ControlPropertyFillerProps) => JSX.Element;
|
25
|
+
export default ControlPropertyFiller;
|