@dartech/arsenal-ui 1.3.95 → 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
@@ -1047,15 +1047,25 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1047
1047
  parseValue
1048
1048
  } = _a,
1049
1049
  otherProps = __rest(_a, ["control", "name", "mode", "label", "width", "height", "readOnly", "required", "validateJson", "hideErrorMessage", "fontSize", "validate", "parseValue"]);
1050
- const {
1051
- setError,
1052
- clearErrors
1053
- } = useFormContext();
1054
1050
  const _b = useController({
1055
1051
  control,
1056
1052
  name,
1057
1053
  rules: {
1058
- required: required && 'Please, fill this field'
1054
+ required: required && 'Please, fill this field',
1055
+ validate: val => {
1056
+ console.log('_____', val);
1057
+ if (val && validateJson) {
1058
+ try {
1059
+ JSON.parse(val);
1060
+ return true;
1061
+ // clearErrors(name);
1062
+ } catch (error) {
1063
+ console.error(error);
1064
+ return 'Invalid JSON';
1065
+ }
1066
+ }
1067
+ return true;
1068
+ }
1059
1069
  }
1060
1070
  }),
1061
1071
  _c = _b.field,
@@ -1076,24 +1086,6 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1076
1086
  python: [langs.python()]
1077
1087
  }), []);
1078
1088
  const handleChange = useCallback(value => {
1079
- if (!value && required) {
1080
- setError(name, {
1081
- message: 'Required field'
1082
- });
1083
- } else {
1084
- clearErrors(name);
1085
- }
1086
- if (validateJson) {
1087
- try {
1088
- JSON.parse(value);
1089
- clearErrors(name);
1090
- } catch (error) {
1091
- console.error(error);
1092
- setError(name, {
1093
- message: 'Invalid JSON'
1094
- });
1095
- }
1096
- }
1097
1089
  if (parseValue) {
1098
1090
  try {
1099
1091
  const val = JSON.parse(value);
@@ -1104,7 +1096,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1104
1096
  } else {
1105
1097
  onChange(value);
1106
1098
  }
1107
- }, [setError, clearErrors, onChange, name, parseValue, validateJson, required]);
1099
+ }, [onChange, parseValue]);
1108
1100
  return jsxs(Box, Object.assign({
1109
1101
  display: "flex",
1110
1102
  flexDirection: "column",
@@ -3684,14 +3676,12 @@ const PropertyAdditionalFields = ({
3684
3676
  };
3685
3677
 
3686
3678
  const StringValueField = ({
3679
+ control,
3687
3680
  name,
3688
3681
  label,
3689
3682
  required,
3690
3683
  restrictedValues
3691
3684
  }) => {
3692
- const {
3693
- control
3694
- } = useFormContext();
3695
3685
  const {
3696
3686
  field: {
3697
3687
  onChange,
@@ -3910,6 +3900,7 @@ const PropertyWidget = ({
3910
3900
  });
3911
3901
  case PropertyType.STRING:
3912
3902
  return jsx(StringValueField$1, {
3903
+ control: control,
3913
3904
  name: name,
3914
3905
  label: label,
3915
3906
  restrictedValues: property.restrictedValues
@@ -3923,7 +3914,8 @@ const PropertyWidget = ({
3923
3914
  } else {
3924
3915
  return jsx(StringValueField$1, {
3925
3916
  name: name,
3926
- label: label
3917
+ label: label,
3918
+ control: control
3927
3919
  });
3928
3920
  }
3929
3921
  case PropertyType.FILE:
@@ -3938,7 +3930,8 @@ const PropertyWidget = ({
3938
3930
  } else {
3939
3931
  return jsx(StringValueField$1, {
3940
3932
  name: name,
3941
- label: label
3933
+ label: label,
3934
+ control: control
3942
3935
  });
3943
3936
  }
3944
3937
  case PropertyType.ANY:
@@ -4058,7 +4051,8 @@ const StyledInputLabel = styled(InputLabel)(() => ({
4058
4051
  }
4059
4052
  }));
4060
4053
 
4061
- const PropertyFiller = ({
4054
+ const ControlPropertyFiller = ({
4055
+ control,
4062
4056
  property,
4063
4057
  name,
4064
4058
  useExpression,
@@ -4069,14 +4063,12 @@ const PropertyFiller = ({
4069
4063
  entityReferenceValueComponent,
4070
4064
  fileReferenceValueComponent
4071
4065
  }) => {
4066
+ // const { control, clearErrors, setValue, watch } = useFormContext();
4072
4067
  const {
4073
- control,
4074
- clearErrors,
4075
- setValue,
4076
- watch
4077
- } = useFormContext();
4078
- const {
4079
- // field: { value },
4068
+ field: {
4069
+ value,
4070
+ onChange
4071
+ },
4080
4072
  fieldState: {
4081
4073
  error,
4082
4074
  isDirty
@@ -4092,7 +4084,7 @@ const PropertyFiller = ({
4092
4084
  }
4093
4085
  }
4094
4086
  });
4095
- const value = watch(name);
4087
+ // const value = watch(name);
4096
4088
  const prevValueRef = useRef({});
4097
4089
  const {
4098
4090
  propertyType,
@@ -4118,7 +4110,7 @@ const PropertyFiller = ({
4118
4110
  setFillOption(selectedType);
4119
4111
  const prevValue = prevValueRef.current[selectedType];
4120
4112
  if (selectedType === 'null') {
4121
- setValue(name, null, {
4113
+ onChange(null, {
4122
4114
  shouldDirty: true
4123
4115
  });
4124
4116
  } else if (selectedType === 'widget') {
@@ -4127,15 +4119,15 @@ const PropertyFiller = ({
4127
4119
  properties: propertiesArrayToObject(value.property || [])
4128
4120
  });
4129
4121
  try {
4130
- 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'));
4131
4123
  } catch (error) {
4132
4124
  console.log('Stringify failed', error);
4133
4125
  }
4134
4126
  } else {
4135
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
4127
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : property.defaultValue || defaultProperyValue);
4136
4128
  }
4137
4129
  } else if (selectedType === 'expression' || selectedType === 'string') {
4138
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
4130
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
4139
4131
  shouldDirty: true
4140
4132
  });
4141
4133
  } else if (selectedType === 'dem_builder') {
@@ -4149,33 +4141,33 @@ const PropertyFiller = ({
4149
4141
  try {
4150
4142
  const definitionValue = JSON.parse(value);
4151
4143
  definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
4152
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
4144
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : definitionValue, {
4153
4145
  shouldDirty: true
4154
4146
  });
4155
4147
  } catch (error) {
4156
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4148
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4157
4149
  shouldDirty: true
4158
4150
  });
4159
4151
  }
4160
4152
  } else {
4161
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4153
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : defaultArrayValue, {
4162
4154
  shouldDirty: true
4163
4155
  });
4164
4156
  }
4165
4157
  }
4166
- clearErrors();
4167
- }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
4158
+ // clearErrors();
4159
+ }, [defaultProperyValue, value, setFillOption, fillOption, propertyType, onChange, property]);
4168
4160
  useEffect(() => {
4169
4161
  if (!isDirty && (property.defaultValue || property.value) && !value) {
4170
- setValue(name, property.defaultValue || property.value);
4162
+ onChange(property.defaultValue || property.value);
4171
4163
  }
4172
- }, [isDirty, property, name, setValue, value]);
4164
+ }, [isDirty, property, onChange, value]);
4173
4165
  useEffect(() => {
4174
4166
  var _a;
4175
4167
  if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
4176
- setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
4168
+ onChange((_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
4177
4169
  }
4178
- }, [value, setValue, defaultProperyValue, property, name, fillOption]);
4170
+ }, [value, onChange, defaultProperyValue, property, fillOption]);
4179
4171
  return jsxs(Grid, Object.assign({
4180
4172
  xs: 12
4181
4173
  }, {
@@ -4243,6 +4235,12 @@ const PropertyFiller = ({
4243
4235
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4244
4236
  entityReferenceValueComponent: entityReferenceValueComponent,
4245
4237
  fileReferenceValueComponent: fileReferenceValueComponent
4238
+ }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
4239
+ title: "JSON",
4240
+ definitionFieldName: name,
4241
+ entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4242
+ entityReferenceValueComponent: entityReferenceValueComponent,
4243
+ fileReferenceValueComponent: fileReferenceValueComponent
4246
4244
  }), error && jsx(FormHelperText, Object.assign({
4247
4245
  error: true
4248
4246
  }, {
@@ -4251,7 +4249,8 @@ const PropertyFiller = ({
4251
4249
  }));
4252
4250
  };
4253
4251
 
4254
- const MultiplePropertyWidget = ({
4252
+ const ControlMultiplePropertyWidget = ({
4253
+ control,
4255
4254
  name,
4256
4255
  property,
4257
4256
  useExpression,
@@ -4261,26 +4260,31 @@ const MultiplePropertyWidget = ({
4261
4260
  entityReferenceValueComponent,
4262
4261
  fileReferenceValueComponent
4263
4262
  }) => {
4263
+ // const { control, setValue, clearErrors } = useFormContext();
4264
+ // const { field: { onChange } } = useController({ control, name });
4265
+ // const values = useWatch({ control, name });
4264
4266
  const {
4265
- control,
4266
- setValue,
4267
- clearErrors
4268
- } = useFormContext();
4269
- const values = useWatch({
4267
+ fields: values,
4268
+ append,
4269
+ remove
4270
+ } = useFieldArray({
4270
4271
  control,
4271
4272
  name
4272
4273
  });
4273
- const handleAddValue = useCallback(() => {
4274
- if (values && Array.isArray(values)) {
4275
- setValue(`${name}.${values.length}`, null);
4276
- } else {
4277
- setValue(name, []);
4278
- }
4279
- clearErrors(name);
4280
- }, [name, values, setValue, clearErrors]);
4281
- const handleDeleteValue = useCallback(index => {
4282
- setValue(name, removeArrayItem(values, index));
4283
- }, [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
+ // );
4284
4288
  return jsxs(Grid, Object.assign({
4285
4289
  container: true,
4286
4290
  spacing: 2,
@@ -4299,7 +4303,8 @@ const MultiplePropertyWidget = ({
4299
4303
  backgroundColor: '#f1f1f1'
4300
4304
  }
4301
4305
  }, {
4302
- children: [jsx(PropertyFiller, {
4306
+ children: [jsx(ControlPropertyFiller, {
4307
+ control: control,
4303
4308
  required: required,
4304
4309
  property: property,
4305
4310
  useExpression: useExpression,
@@ -4315,7 +4320,7 @@ const MultiplePropertyWidget = ({
4315
4320
  children: jsx(IconButton, Object.assign({
4316
4321
  id: "close-button",
4317
4322
  size: "small",
4318
- onClick: () => handleDeleteValue(index)
4323
+ onClick: () => remove(index)
4319
4324
  }, {
4320
4325
  children: jsx(SvgIcon, Object.assign({
4321
4326
  fontSize: "small"
@@ -4327,21 +4332,22 @@ const MultiplePropertyWidget = ({
4327
4332
  }))
4328
4333
  }))]
4329
4334
  }))
4330
- }), index)) : null, jsx(Grid, {
4335
+ }), value.id)) : null, jsx(Grid, {
4331
4336
  children: jsx(Button, Object.assign({
4332
4337
  variant: "contained",
4333
4338
  size: "small",
4334
4339
  color: "primary",
4335
- onClick: handleAddValue
4340
+ onClick: () => append(null)
4336
4341
  }, {
4337
4342
  children: "Add value"
4338
4343
  }))
4339
4344
  })]
4340
4345
  }));
4341
4346
  };
4342
- var MultiplePropertyWidget$1 = MultiplePropertyWidget;
4347
+ var ControlMultiplePropertyWidget$1 = ControlMultiplePropertyWidget;
4343
4348
 
4344
- const MultiplePropertyFiller = ({
4349
+ const ControlMultiplePropertyFiller = ({
4350
+ control,
4345
4351
  property,
4346
4352
  name,
4347
4353
  useExpression,
@@ -4354,15 +4360,10 @@ const MultiplePropertyFiller = ({
4354
4360
  }) => {
4355
4361
  var _a;
4356
4362
  const [selectTouched, setSelectTouched] = useState(false);
4357
- const {
4358
- control,
4359
- clearErrors,
4360
- setValue,
4361
- watch
4362
- } = useFormContext();
4363
+ // const { control, clearErrors, setValue, watch } = useFormContext();
4363
4364
  const {
4364
4365
  field: {
4365
- ref,
4366
+ value,
4366
4367
  onChange
4367
4368
  },
4368
4369
  fieldState: {
@@ -4380,7 +4381,7 @@ const MultiplePropertyFiller = ({
4380
4381
  }
4381
4382
  }
4382
4383
  });
4383
- const value = watch(name);
4384
+ // const value = watch(name);
4384
4385
  const prevValueRef = useRef({});
4385
4386
  const {
4386
4387
  propertyType,
@@ -4407,19 +4408,20 @@ const MultiplePropertyFiller = ({
4407
4408
  const selectedType = event.target.value;
4408
4409
  const prevValue = prevValueRef.current[selectedType];
4409
4410
  if (selectedType === 'null') {
4410
- setValue(name, null);
4411
+ onChange(null);
4411
4412
  } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
4412
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : '', {
4413
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : '', {
4413
4414
  shouldDirty: true
4414
4415
  });
4415
4416
  } else if (selectedType === 'widget') {
4416
- setValue(name, prevValue !== null && prevValue !== void 0 ? prevValue : [], {
4417
+ onChange(prevValue !== null && prevValue !== void 0 ? prevValue : [], {
4417
4418
  shouldDirty: true
4418
4419
  });
4419
4420
  }
4420
4421
  setFillOption(selectedType);
4421
- clearErrors(name);
4422
+ // clearErrors(name);
4422
4423
  };
4424
+
4423
4425
  useEffect(() => {
4424
4426
  if (!value) {
4425
4427
  onChange(property.isRequired && property.isMultiple ? [] : null);
@@ -4487,7 +4489,8 @@ const MultiplePropertyFiller = ({
4487
4489
  hideErrorMessage: true
4488
4490
  })
4489
4491
  // <JsonEditor validate name={name} ref={ref} useParsedValue />
4490
- , fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
4492
+ , fillOption === 'widget' && jsx(ControlMultiplePropertyWidget$1, {
4493
+ control: control,
4491
4494
  property: property,
4492
4495
  name: name,
4493
4496
  useExpression: useExpression,
@@ -4514,7 +4517,6 @@ const PropertyValueField = ({
4514
4517
  entityReferenceValueComponent,
4515
4518
  fileReferenceValueComponent
4516
4519
  }) => {
4517
- // const { control } = useFormContext();
4518
4520
  const propertyType = useWatch({
4519
4521
  control,
4520
4522
  name: `${propertyFieldName}.propertyType`
@@ -4562,7 +4564,8 @@ const PropertyValueField = ({
4562
4564
  }, [propertyType, format, restrictedValues, isMultiple, _label,
4563
4565
  // key,
4564
4566
  isRequired, properties, required]);
4565
- return isMultiple ? jsx(MultiplePropertyFiller, {
4567
+ return isMultiple ? jsx(ControlMultiplePropertyFiller, {
4568
+ control: control,
4566
4569
  name: name,
4567
4570
  property: fillerProperty,
4568
4571
  title: _label,
@@ -4570,7 +4573,8 @@ const PropertyValueField = ({
4570
4573
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4571
4574
  entityReferenceValueComponent: entityReferenceValueComponent,
4572
4575
  fileReferenceValueComponent: fileReferenceValueComponent
4573
- }) : jsx(PropertyFiller, {
4576
+ }) : jsx(ControlPropertyFiller, {
4577
+ control: control,
4574
4578
  name: name,
4575
4579
  property: fillerProperty,
4576
4580
  title: _label,
@@ -5168,8 +5172,10 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
5168
5172
  control,
5169
5173
  setValue,
5170
5174
  getValues,
5171
- reset
5175
+ reset,
5176
+ trigger
5172
5177
  } = useForm({
5178
+ mode: 'all',
5173
5179
  defaultValues: {
5174
5180
  properties
5175
5181
  }
@@ -5196,8 +5202,6 @@ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
5196
5202
  }
5197
5203
  }
5198
5204
  });
5199
- // console.log(watch());
5200
- // const properties = useWatch({ control, name: fieldName });
5201
5205
  const refs = useRef([]);
5202
5206
  const handleAddParameter = useCallback(() => {
5203
5207
  append(defaultPropertyValues);
@@ -5639,6 +5643,452 @@ const ViewPropertiesList = ({
5639
5643
  }));
5640
5644
  };
5641
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
+
5642
6092
  const DefinitionFiller = ({
5643
6093
  properties,
5644
6094
  dataFieldName,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dartech/arsenal-ui",
3
- "version": "1.3.95",
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';
@@ -1,7 +1,8 @@
1
- /// <reference types="react" />
1
+ import { Control } from 'react-hook-form';
2
2
  type Props = {
3
+ control: Control<any>;
3
4
  name: string;
4
5
  label?: string;
5
6
  };
6
- declare const BooleanValueField: ({ name, label }: Props) => JSX.Element;
7
+ declare const BooleanValueField: ({ name, label, control }: Props) => JSX.Element;
7
8
  export default BooleanValueField;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  format: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,10 +1,12 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
4
+ control: Control<any>;
3
5
  name: string;
4
6
  label?: string;
5
7
  required?: boolean;
6
8
  restrictedValues?: string[];
7
9
  urlValidate?: boolean;
8
10
  };
9
- declare const StringValueField: ({ name, label, required, restrictedValues, }: Props) => JSX.Element;
11
+ declare const StringValueField: ({ control, name, label, required, restrictedValues, }: Props) => JSX.Element;
10
12
  export default StringValueField;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { PropertyUnion } from '../../../interfaces';
3
2
  type PropertyItemProps = {
4
3
  property: PropertyUnion;