@dartech/arsenal-ui 1.3.96 → 1.3.97

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 CHANGED
@@ -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 PropertyFiller = ({
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
- control,
4068
- clearErrors,
4069
- setValue,
4070
- watch
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
- setValue(name, null, {
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
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
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
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
4127
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
4130
4128
  }
4131
4129
  } else if (selectedType === 'expression' || selectedType === 'string') {
4132
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
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
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
4144
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
4147
4145
  shouldDirty: true
4148
4146
  });
4149
4147
  } catch (error) {
4150
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4148
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4151
4149
  shouldDirty: true
4152
4150
  });
4153
4151
  }
4154
4152
  } else {
4155
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4153
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4156
4154
  shouldDirty: true
4157
4155
  });
4158
4156
  }
4159
4157
  }
4160
- clearErrors();
4161
- }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
4158
+ // clearErrors();
4159
+ }, [defaultProperyValue, value, setFillOption, fillOption, propertyType, onChange, property]);
4162
4160
  useEffect(() => {
4163
4161
  if (!isDirty && (property.defaultValue || property.value) && !value) {
4164
- setValue(name, property.defaultValue || property.value);
4162
+ onChange(property.defaultValue || property.value);
4165
4163
  }
4166
- }, [isDirty, property, name, setValue, value]);
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
- setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
4168
+ onChange((_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
4171
4169
  }
4172
- }, [value, setValue, defaultProperyValue, property, name, fillOption]);
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 MultiplePropertyWidget = ({
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
- control,
4260
- setValue,
4261
- clearErrors
4262
- } = useFormContext();
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
- if (values && Array.isArray(values)) {
4269
- setValue(`${name}.${values.length}`, null);
4270
- } else {
4271
- setValue(name, []);
4272
- }
4273
- clearErrors(name);
4274
- }, [name, values, setValue, clearErrors]);
4275
- const handleDeleteValue = useCallback(index => {
4276
- setValue(name, removeArrayItem(values, index));
4277
- }, [name, values, setValue]);
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(PropertyFiller, {
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: () => handleDeleteValue(index)
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
- }), index)) : null, jsx(Grid, {
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: handleAddValue
4340
+ onClick: () => append(null)
4330
4341
  }, {
4331
4342
  children: "Add value"
4332
4343
  }))
4333
4344
  })]
4334
4345
  }));
4335
4346
  };
4336
- var MultiplePropertyWidget$1 = MultiplePropertyWidget;
4347
+ var ControlMultiplePropertyWidget$1 = ControlMultiplePropertyWidget;
4337
4348
 
4338
- const MultiplePropertyFiller = ({
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
- ref,
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
- setValue(name, null);
4411
+ onChange(null);
4405
4412
  } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
4406
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
4413
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
4407
4414
  shouldDirty: true
4408
4415
  });
4409
4416
  } else if (selectedType === 'widget') {
4410
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : [], {
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(MultiplePropertyWidget$1, {
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,7 +4564,8 @@ const PropertyValueField = ({
4556
4564
  }, [propertyType, format, restrictedValues, isMultiple, _label,
4557
4565
  // key,
4558
4566
  isRequired, properties, required]);
4559
- return isMultiple ? jsx(MultiplePropertyFiller, {
4567
+ return isMultiple ? jsx(ControlMultiplePropertyFiller, {
4568
+ control: control,
4560
4569
  name: name,
4561
4570
  property: fillerProperty,
4562
4571
  title: _label,
@@ -4564,7 +4573,8 @@ const PropertyValueField = ({
4564
4573
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4565
4574
  entityReferenceValueComponent: entityReferenceValueComponent,
4566
4575
  fileReferenceValueComponent: fileReferenceValueComponent
4567
- }) : jsx(PropertyFiller, {
4576
+ }) : jsx(ControlPropertyFiller, {
4577
+ control: control,
4568
4578
  name: name,
4569
4579
  property: fillerProperty,
4570
4580
  title: _label,
@@ -5633,6 +5643,452 @@ const ViewPropertiesList = ({
5633
5643
  }));
5634
5644
  };
5635
5645
 
5646
+ const PropertyFiller = ({
5647
+ property,
5648
+ name,
5649
+ useExpression,
5650
+ label,
5651
+ required,
5652
+ title,
5653
+ entityReferenceDefinitionSources,
5654
+ entityReferenceValueComponent,
5655
+ fileReferenceValueComponent
5656
+ }) => {
5657
+ const {
5658
+ control,
5659
+ clearErrors,
5660
+ setValue,
5661
+ watch
5662
+ } = useFormContext();
5663
+ const {
5664
+ // field: { value },
5665
+ fieldState: {
5666
+ error,
5667
+ isDirty
5668
+ }
5669
+ } = useController({
5670
+ name,
5671
+ control,
5672
+ defaultValue: property.defaultValue,
5673
+ rules: {
5674
+ validate: val => {
5675
+ if (required && val === null) return 'Please, fill this field';
5676
+ return true;
5677
+ }
5678
+ }
5679
+ });
5680
+ const value = watch(name);
5681
+ const prevValueRef = useRef({});
5682
+ const {
5683
+ propertyType,
5684
+ valueLabel,
5685
+ fillOptionLabel,
5686
+ fillOption,
5687
+ fillOptions,
5688
+ setFillOption,
5689
+ defaultProperyValue
5690
+ } = usePropertyFiller$1({
5691
+ value,
5692
+ property,
5693
+ isDirty,
5694
+ label,
5695
+ required,
5696
+ useExpression
5697
+ });
5698
+ const handleFillOptionChange = useCallback(event => {
5699
+ const selectedType = event.target.value;
5700
+ prevValueRef.current = Object.assign(Object.assign({}, prevValueRef.current), {
5701
+ [fillOption]: value
5702
+ });
5703
+ setFillOption(selectedType);
5704
+ const prevValue = prevValueRef.current[selectedType];
5705
+ if (selectedType === 'null') {
5706
+ setValue(name, null, {
5707
+ shouldDirty: true
5708
+ });
5709
+ } else if (selectedType === 'widget') {
5710
+ if (propertyType === PropertyType.JSON && value && typeof value !== 'string' && fillOption === 'dem_builder' && 'properties' in value) {
5711
+ const definitionValue = Object.assign(Object.assign({}, value), {
5712
+ properties: propertiesArrayToObject(value.property || [])
5713
+ });
5714
+ try {
5715
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : JSON.stringify(definitionValue, null, '\t'));
5716
+ } catch (error) {
5717
+ console.log('Stringify failed', error);
5718
+ }
5719
+ } else {
5720
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
5721
+ }
5722
+ } else if (selectedType === 'expression' || selectedType === 'string') {
5723
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
5724
+ shouldDirty: true
5725
+ });
5726
+ } else if (selectedType === 'dem_builder') {
5727
+ const defaultArrayValue = {
5728
+ code: '',
5729
+ name: '',
5730
+ version: 0,
5731
+ properties: []
5732
+ };
5733
+ if (value) {
5734
+ try {
5735
+ const definitionValue = JSON.parse(value);
5736
+ definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
5737
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
5738
+ shouldDirty: true
5739
+ });
5740
+ } catch (error) {
5741
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
5742
+ shouldDirty: true
5743
+ });
5744
+ }
5745
+ } else {
5746
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
5747
+ shouldDirty: true
5748
+ });
5749
+ }
5750
+ }
5751
+ clearErrors();
5752
+ }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
5753
+ useEffect(() => {
5754
+ if (!isDirty && (property.defaultValue || property.value) && !value) {
5755
+ setValue(name, property.defaultValue || property.value);
5756
+ }
5757
+ }, [isDirty, property, name, setValue, value]);
5758
+ useEffect(() => {
5759
+ var _a;
5760
+ if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
5761
+ setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
5762
+ }
5763
+ }, [value, setValue, defaultProperyValue, property, name, fillOption]);
5764
+ return jsxs(Grid, Object.assign({
5765
+ xs: 12
5766
+ }, {
5767
+ children: [title && jsx(Box, Object.assign({
5768
+ mb: 2
5769
+ }, {
5770
+ children: jsx(Typography, Object.assign({
5771
+ variant: "h6"
5772
+ }, {
5773
+ children: title
5774
+ }))
5775
+ })), fillOptions ? jsx(Box, Object.assign({
5776
+ mb: 2
5777
+ }, {
5778
+ children: jsxs(FormControl, Object.assign({
5779
+ fullWidth: true,
5780
+ size: "small",
5781
+ variant: "outlined"
5782
+ }, {
5783
+ children: [jsx(StyledInputLabel, Object.assign({
5784
+ htmlFor: "type-select"
5785
+ }, {
5786
+ children: fillOptionLabel
5787
+ })), jsx(Select, Object.assign({
5788
+ labelId: "type-select",
5789
+ label: fillOptionLabel,
5790
+ value: fillOption || '',
5791
+ onChange: handleFillOptionChange
5792
+ }, {
5793
+ children: fillOptions.map(option => jsx(MenuItem, Object.assign({
5794
+ value: option.value
5795
+ }, {
5796
+ children: option.label
5797
+ }), option.value))
5798
+ }))]
5799
+ }))
5800
+ })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
5801
+ name: name,
5802
+ control: control,
5803
+ label: valueLabel,
5804
+ parseValue: true,
5805
+ validateJson: true,
5806
+ hideErrorMessage: true
5807
+ }) : jsx(ControlInput, {
5808
+ control: control,
5809
+ name: name,
5810
+ label: valueLabel,
5811
+ hideErrorMessage: true
5812
+ })), fillOption === 'string' && jsx(ControlInput, {
5813
+ control: control,
5814
+ name: name,
5815
+ label: valueLabel,
5816
+ hideErrorMessage: true
5817
+ }), fillOption === 'json_notvalid' && jsx(ControlAceEditor, {
5818
+ name: name,
5819
+ control: control,
5820
+ label: valueLabel,
5821
+ hideErrorMessage: true
5822
+ }), fillOption === 'widget' && jsx(PropertyWidget, {
5823
+ control: control,
5824
+ property: property,
5825
+ name: name,
5826
+ useExpression: useExpression,
5827
+ label: valueLabel,
5828
+ entityReferenceDefinitionSources: entityReferenceDefinitionSources,
5829
+ entityReferenceValueComponent: entityReferenceValueComponent,
5830
+ fileReferenceValueComponent: fileReferenceValueComponent
5831
+ }), error && jsx(FormHelperText, Object.assign({
5832
+ error: true
5833
+ }, {
5834
+ children: error.message
5835
+ }))]
5836
+ }));
5837
+ };
5838
+
5839
+ const MultiplePropertyWidget = ({
5840
+ name,
5841
+ property,
5842
+ useExpression,
5843
+ required,
5844
+ label,
5845
+ entityReferenceDefinitionSources,
5846
+ entityReferenceValueComponent,
5847
+ fileReferenceValueComponent
5848
+ }) => {
5849
+ const {
5850
+ control,
5851
+ setValue,
5852
+ clearErrors
5853
+ } = useFormContext();
5854
+ const values = useWatch({
5855
+ control,
5856
+ name
5857
+ });
5858
+ const handleAddValue = useCallback(() => {
5859
+ if (values && Array.isArray(values)) {
5860
+ setValue(`${name}.${values.length}`, null);
5861
+ } else {
5862
+ setValue(name, []);
5863
+ }
5864
+ clearErrors(name);
5865
+ }, [name, values, setValue, clearErrors]);
5866
+ const handleDeleteValue = useCallback(index => {
5867
+ setValue(name, removeArrayItem(values, index));
5868
+ }, [name, values, setValue]);
5869
+ return jsxs(Grid, Object.assign({
5870
+ container: true,
5871
+ spacing: 2,
5872
+ direction: "column",
5873
+ xs: 12
5874
+ }, {
5875
+ children: [Array.isArray(values) && values.length ? values.map((value, index) => jsx(Grid, Object.assign({
5876
+ xs: 12
5877
+ }, {
5878
+ children: jsxs(Box, Object.assign({
5879
+ display: "flex",
5880
+ alignItems: "flex-start",
5881
+ width: "100%",
5882
+ p: 2,
5883
+ style: {
5884
+ backgroundColor: '#f1f1f1'
5885
+ }
5886
+ }, {
5887
+ children: [jsx(PropertyFiller, {
5888
+ required: required,
5889
+ property: property,
5890
+ useExpression: useExpression,
5891
+ name: `${name}.${index}`,
5892
+ label: `${label || property.name} (${index + 1})`,
5893
+ entityReferenceDefinitionSources: entityReferenceDefinitionSources,
5894
+ entityReferenceValueComponent: entityReferenceValueComponent,
5895
+ fileReferenceValueComponent: fileReferenceValueComponent
5896
+ }), jsx(Box, Object.assign({
5897
+ mt: "8px",
5898
+ ml: "4px"
5899
+ }, {
5900
+ children: jsx(IconButton, Object.assign({
5901
+ id: "close-button",
5902
+ size: "small",
5903
+ onClick: () => handleDeleteValue(index)
5904
+ }, {
5905
+ children: jsx(SvgIcon, Object.assign({
5906
+ fontSize: "small"
5907
+ }, {
5908
+ children: jsx("path", {
5909
+ 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"
5910
+ })
5911
+ }))
5912
+ }))
5913
+ }))]
5914
+ }))
5915
+ }), index)) : null, jsx(Grid, {
5916
+ children: jsx(Button, Object.assign({
5917
+ variant: "contained",
5918
+ size: "small",
5919
+ color: "primary",
5920
+ onClick: handleAddValue
5921
+ }, {
5922
+ children: "Add value"
5923
+ }))
5924
+ })]
5925
+ }));
5926
+ };
5927
+ var MultiplePropertyWidget$1 = MultiplePropertyWidget;
5928
+
5929
+ const MultiplePropertyFiller = ({
5930
+ property,
5931
+ name,
5932
+ useExpression,
5933
+ required,
5934
+ label,
5935
+ title,
5936
+ entityReferenceDefinitionSources,
5937
+ entityReferenceValueComponent,
5938
+ fileReferenceValueComponent
5939
+ }) => {
5940
+ var _a;
5941
+ const [selectTouched, setSelectTouched] = useState(false);
5942
+ const {
5943
+ control,
5944
+ clearErrors,
5945
+ setValue,
5946
+ watch
5947
+ } = useFormContext();
5948
+ const {
5949
+ field: {
5950
+ ref,
5951
+ onChange
5952
+ },
5953
+ fieldState: {
5954
+ error,
5955
+ isDirty
5956
+ }
5957
+ } = useController({
5958
+ control,
5959
+ name,
5960
+ defaultValue: (_a = property.defaultValue) !== null && _a !== void 0 ? _a : [],
5961
+ rules: {
5962
+ validate: val => {
5963
+ if (required && !val) return 'Please, fill this field';
5964
+ return true;
5965
+ }
5966
+ }
5967
+ });
5968
+ const value = watch(name);
5969
+ const prevValueRef = useRef({});
5970
+ const {
5971
+ propertyType,
5972
+ valueLabel,
5973
+ fillOptionLabel,
5974
+ fillOption,
5975
+ fillOptions,
5976
+ setFillOption,
5977
+ checkFillOption
5978
+ } = usePropertyFiller$1({
5979
+ property,
5980
+ value,
5981
+ isDirty,
5982
+ label,
5983
+ required,
5984
+ useExpression,
5985
+ multipleOptions: true
5986
+ });
5987
+ const handleFillOptionChange = event => {
5988
+ setSelectTouched(true);
5989
+ prevValueRef.current = Object.assign(Object.assign({}, prevValueRef.current), {
5990
+ [fillOption]: value
5991
+ });
5992
+ const selectedType = event.target.value;
5993
+ const prevValue = prevValueRef.current[selectedType];
5994
+ if (selectedType === 'null') {
5995
+ setValue(name, null);
5996
+ } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
5997
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
5998
+ shouldDirty: true
5999
+ });
6000
+ } else if (selectedType === 'widget') {
6001
+ setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : [], {
6002
+ shouldDirty: true
6003
+ });
6004
+ }
6005
+ setFillOption(selectedType);
6006
+ clearErrors(name);
6007
+ };
6008
+ useEffect(() => {
6009
+ if (!value) {
6010
+ onChange(property.isRequired && property.isMultiple ? [] : null);
6011
+ }
6012
+ }, [value, property, onChange]);
6013
+ useEffect(() => {
6014
+ if (value && !selectTouched) {
6015
+ setSelectTouched(true);
6016
+ checkFillOption();
6017
+ }
6018
+ }, [checkFillOption, selectTouched, value]);
6019
+ return jsxs(Grid, {
6020
+ children: [title && jsx(Box, Object.assign({
6021
+ mb: 2
6022
+ }, {
6023
+ children: jsx(Typography, Object.assign({
6024
+ variant: "h6"
6025
+ }, {
6026
+ children: title
6027
+ }))
6028
+ })), fillOptions ? jsx(Box, Object.assign({
6029
+ mb: 2
6030
+ }, {
6031
+ children: jsxs(FormControl, Object.assign({
6032
+ fullWidth: true,
6033
+ size: "small",
6034
+ variant: "outlined"
6035
+ }, {
6036
+ children: [jsx(StyledInputLabel, Object.assign({
6037
+ htmlFor: "type-select"
6038
+ }, {
6039
+ children: fillOptionLabel
6040
+ })), jsx(Select, Object.assign({
6041
+ labelId: "type-select",
6042
+ label: fillOptionLabel,
6043
+ value: fillOption || '',
6044
+ onChange: handleFillOptionChange
6045
+ }, {
6046
+ children: fillOptions.map(option => jsx(MenuItem, Object.assign({
6047
+ value: option.value
6048
+ }, {
6049
+ children: option.label
6050
+ }), option.value))
6051
+ }))]
6052
+ }))
6053
+ })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
6054
+ name: name,
6055
+ control: control,
6056
+ label: valueLabel,
6057
+ parseValue: true,
6058
+ validateJson: true,
6059
+ hideErrorMessage: true
6060
+ }) : jsx(ControlInput, {
6061
+ required: true,
6062
+ hideErrorMessage: true,
6063
+ control: control,
6064
+ name: name,
6065
+ label: valueLabel
6066
+ })), fillOption === 'json_valid' && jsx(ControlAceEditor, {
6067
+ name: name,
6068
+ control: control,
6069
+ label: valueLabel,
6070
+ parseValue: true,
6071
+ validateJson: true,
6072
+ hideErrorMessage: true
6073
+ })
6074
+ // <JsonEditor validate name={name} ref={ref} useParsedValue />
6075
+ , fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
6076
+ property: property,
6077
+ name: name,
6078
+ useExpression: useExpression,
6079
+ required: required,
6080
+ label: label,
6081
+ entityReferenceDefinitionSources: entityReferenceDefinitionSources,
6082
+ entityReferenceValueComponent: entityReferenceValueComponent,
6083
+ fileReferenceValueComponent: fileReferenceValueComponent
6084
+ }), error && jsx(FormHelperText, Object.assign({
6085
+ error: true
6086
+ }, {
6087
+ children: error.message
6088
+ }))]
6089
+ });
6090
+ };
6091
+
5636
6092
  const DefinitionFiller = ({
5637
6093
  properties,
5638
6094
  dataFieldName,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dartech/arsenal-ui",
3
- "version": "1.3.96",
3
+ "version": "1.3.97",
4
4
  "author": "DAR",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -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;
@@ -0,0 +1,3 @@
1
+ export * from './ControlPropertyFiller';
2
+ export * from './ControlMultiplePropertyFiller';
3
+ export * from './ControlMultiplePropertyWidget';