@dartech/arsenal-ui 1.3.94 → 1.3.95

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.
Files changed (19) hide show
  1. package/index.js +136 -208
  2. package/package.json +1 -1
  3. package/src/lib/Definition/CreateDefinition/CreateDefinition.d.ts +1 -1
  4. package/src/lib/Forms/ControlInput.d.ts +1 -1
  5. package/src/lib/Property/UpsertProperty/CreatePropertiesList.d.ts +3 -2
  6. package/src/lib/Property/UpsertProperty/CreatePropertyFormFields.d.ts +4 -1
  7. package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/BigDecimalPropertyFields.d.ts +3 -1
  8. package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/DateAdditionalFields.d.ts +3 -1
  9. package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityAdditionalFields.d.ts +3 -1
  10. package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityReferencePropertyFields.d.ts +3 -1
  11. package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/PropertyAdditionalFields.d.ts +3 -1
  12. package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/StringPropertyFields.d.ts +3 -1
  13. package/src/lib/Property/UpsertProperty/PropertyValueField/BooleanValueField.d.ts +1 -0
  14. package/src/lib/Property/UpsertProperty/PropertyValueField/DateTimeValueField.d.ts +1 -0
  15. package/src/lib/Property/UpsertProperty/PropertyValueField/DateValueField.d.ts +1 -0
  16. package/src/lib/Property/UpsertProperty/PropertyValueField/JsonValueField.d.ts +1 -0
  17. package/src/lib/Property/UpsertProperty/PropertyValueField/PropertyValueField.d.ts +3 -1
  18. package/src/lib/Property/UpsertProperty/PropertyValueField/TimeValueField.d.ts +1 -0
  19. package/src/lib/Property/ViewProperty/PropertyItem.d.ts +1 -0
package/index.js CHANGED
@@ -9,9 +9,9 @@ import DialogTitle from '@mui/material/DialogTitle';
9
9
  import Box from '@mui/material/Box';
10
10
  import CircularProgress from '@mui/material/CircularProgress';
11
11
  import { __rest, __awaiter } from 'tslib';
12
- import { useController, useWatch, useFormContext, Controller, useFieldArray } from 'react-hook-form';
12
+ import { useController, useWatch, useFormContext, Controller, useFieldArray, useForm } from 'react-hook-form';
13
13
  import TextField from '@mui/material/TextField';
14
- import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, Suspense } from 'react';
14
+ import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, useImperativeHandle, Suspense } from 'react';
15
15
  import MenuItem from '@mui/material/MenuItem';
16
16
  import SvgIcon from '@mui/material/SvgIcon';
17
17
  import IconButton from '@mui/material/IconButton';
@@ -1518,6 +1518,7 @@ const formatPropertyValue = (propertyType, value, params) => {
1518
1518
  return null;
1519
1519
  }
1520
1520
  let parsedValue = value;
1521
+ // console.log(value);
1521
1522
  switch (propertyType) {
1522
1523
  case PropertyType.BOOLEAN:
1523
1524
  if (value) {
@@ -1537,8 +1538,10 @@ const formatPropertyValue = (propertyType, value, params) => {
1537
1538
  case PropertyType.DATE:
1538
1539
  case PropertyType.DATE_TIME:
1539
1540
  case PropertyType.TIME:
1540
- parsedValue = format(new Date(value.toString()), params.formatText);
1541
- break;
1541
+ {
1542
+ if (value) parsedValue = format(new Date(value.toString()), params.formatText);
1543
+ break;
1544
+ }
1542
1545
  case PropertyType.JSON:
1543
1546
  case PropertyType.ANY:
1544
1547
  try {
@@ -2281,15 +2284,15 @@ const ControlArrayInput = ({
2281
2284
  var _a, _b, _c;
2282
2285
  const [localValue, setLoacalValue] = useState('');
2283
2286
  const {
2284
- register,
2285
- setValue,
2286
- setError,
2287
- clearErrors,
2287
+ field: {
2288
+ onChange,
2289
+ value: values
2290
+ },
2291
+ // fieldState: { error },
2288
2292
  formState: {
2289
2293
  errors
2290
2294
  }
2291
- } = useFormContext();
2292
- const values = useWatch({
2295
+ } = useController({
2293
2296
  control,
2294
2297
  name
2295
2298
  });
@@ -2298,25 +2301,18 @@ const ControlArrayInput = ({
2298
2301
  value
2299
2302
  } = e.target;
2300
2303
  setLoacalValue(value);
2301
- if (values.includes(value)) {
2302
- setError(name, {
2303
- type: 'custom',
2304
- message: 'This value already exists'
2305
- });
2306
- } else {
2307
- clearErrors(name);
2308
- }
2309
- }, [values, name, setError, clearErrors]);
2304
+ if (Array.isArray(values) && values.includes(value)) ;
2305
+ }, [values]);
2310
2306
  const handleAdd = useCallback(() => {
2311
2307
  var _a;
2312
2308
  if (localValue && !((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message)) {
2313
- setValue(name, [...values, localValue]);
2309
+ onChange([...(values !== null && values !== void 0 ? values : []), localValue]);
2314
2310
  setLoacalValue('');
2315
2311
  }
2316
- }, [localValue, setValue, values, name, errors]);
2312
+ }, [localValue, onChange, values, name, errors]);
2317
2313
  const handleDelete = useCallback(value => {
2318
- setValue(name, values.filter(code => code !== value));
2319
- }, [values, name, setValue]);
2314
+ onChange(values.filter(code => code !== value));
2315
+ }, [values, onChange]);
2320
2316
  const handleKeyDown = useCallback(e => {
2321
2317
  if (e.key === 'Enter' || e.keyCode === 13) {
2322
2318
  e.stopPropagation();
@@ -2340,7 +2336,7 @@ const ControlArrayInput = ({
2340
2336
  display: "flex",
2341
2337
  flexWrap: "wrap"
2342
2338
  }, {
2343
- children: values.map((value, index) => jsx(Chip, {
2339
+ children: values === null || values === void 0 ? void 0 : values.map((value, index) => jsx(Chip, {
2344
2340
  sx: {
2345
2341
  mr: 1,
2346
2342
  mb: 1
@@ -2351,7 +2347,7 @@ const ControlArrayInput = ({
2351
2347
  }, index))
2352
2348
  })), jsx("input", Object.assign({
2353
2349
  type: "hidden"
2354
- }, register(name, {
2350
+ }, control.register(name, {
2355
2351
  required: required && 'Please, add a value'
2356
2352
  }))), jsx(TextField, {
2357
2353
  fullWidth: true,
@@ -3251,11 +3247,10 @@ const InfoItem = ({
3251
3247
 
3252
3248
  const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
3253
3249
  const BigDecimalPropertyFields = ({
3254
- propertyFieldName
3250
+ propertyFieldName,
3251
+ control
3255
3252
  }) => {
3256
- const {
3257
- control
3258
- } = useFormContext();
3253
+ // const { control } = useFormContext();
3259
3254
  return jsxs(Fragment, {
3260
3255
  children: [jsx(Grid, {
3261
3256
  children: jsx(ControlNumberInput, {
@@ -3281,11 +3276,9 @@ var BigDecimalPropertyFields$1 = BigDecimalPropertyFields;
3281
3276
 
3282
3277
  const DateAdditionalFields = ({
3283
3278
  propertyFieldName,
3279
+ control,
3284
3280
  defaultValue: _defaultValue = ''
3285
3281
  }) => {
3286
- const {
3287
- control
3288
- } = useFormContext();
3289
3282
  return jsx(Grid, {
3290
3283
  children: jsx(ControlInput, {
3291
3284
  required: true,
@@ -3397,6 +3390,7 @@ const defaultPropertyValues$1 = {
3397
3390
  uiSettings: ''
3398
3391
  };
3399
3392
  const EntityAdditionalFields = ({
3393
+ control,
3400
3394
  parentPropertyFieldName,
3401
3395
  entityDefinition: _entityDefinition = false,
3402
3396
  globalParameter: _globalParameter = false,
@@ -3404,15 +3398,19 @@ const EntityAdditionalFields = ({
3404
3398
  entityReferenceValueComponent,
3405
3399
  fileReferenceValueComponent
3406
3400
  }) => {
3401
+ const propsRef = useRef(null);
3407
3402
  const {
3403
+ field: {
3404
+ onChange
3405
+ }
3406
+ } = useController({
3408
3407
  control,
3409
- getValues,
3410
- trigger
3411
- } = useFormContext();
3408
+ name: `${parentPropertyFieldName}.properties`
3409
+ });
3412
3410
  const properties = useWatch({
3413
3411
  control,
3414
3412
  name: `${parentPropertyFieldName}.properties`,
3415
- defaultValue: getValues(`${parentPropertyFieldName}.properties`) || []
3413
+ defaultValue: []
3416
3414
  });
3417
3415
  const parentPropertyName = useWatch({
3418
3416
  control,
@@ -3429,21 +3427,26 @@ const EntityAdditionalFields = ({
3429
3427
  const parametersModal = useToggle();
3430
3428
  const [focusedProperty, setFocusedProperty] = useState(0);
3431
3429
  const handleAddParameter = useCallback(() => {
3432
- if (fields.length > 0) {
3430
+ if ((properties === null || properties === void 0 ? void 0 : properties.length) > 0) {
3433
3431
  append(defaultPropertyValues$1);
3434
- const propertyIndex = fields.length;
3432
+ const propertyIndex = properties.length;
3435
3433
  setFocusedProperty(propertyIndex);
3436
3434
  } else {
3437
3435
  append(defaultPropertyValues$1);
3438
3436
  }
3439
- }, [fields, append]);
3437
+ propsRef.current.addProperty();
3438
+ }, [properties, append]);
3440
3439
  const handleStepperClick = index => setFocusedProperty(index);
3441
3440
  const handleSubmitClick = () => __awaiter(void 0, void 0, void 0, function* () {
3442
- const isValid = yield trigger(`${parentPropertyFieldName}.properties`);
3443
- if (isValid) {
3444
- parametersModal.onClose();
3445
- }
3441
+ // console.log(propsRef.current.getProperties());
3442
+ onChange(propsRef.current.getProperties());
3443
+ // const isValid = await trigger(`${parentPropertyFieldName}.properties`);
3444
+ parametersModal.onClose();
3445
+ // if (isValid) {
3446
+ // parametersModal.onClose();
3447
+ // }
3446
3448
  });
3449
+
3447
3450
  return jsxs(Fragment, {
3448
3451
  children: [jsx(Grid, {
3449
3452
  children: jsx(Typography, Object.assign({
@@ -3502,7 +3505,7 @@ const EntityAdditionalFields = ({
3502
3505
  paddingLeft: '4px'
3503
3506
  }
3504
3507
  }, {
3505
- children: properties.map((property, index) => jsxs(Step, Object.assign({
3508
+ children: fields.map((property, index) => jsxs(Step, Object.assign({
3506
3509
  onClick: () => handleStepperClick(index),
3507
3510
  style: {
3508
3511
  cursor: 'pointer'
@@ -3516,7 +3519,7 @@ const EntityAdditionalFields = ({
3516
3519
  wordBreak: 'break-word'
3517
3520
  }
3518
3521
  }, {
3519
- children: property.name || '(no name)'
3522
+ children: property['name'] || '(no name)'
3520
3523
  })), jsx(StepContent, {})]
3521
3524
  }), index))
3522
3525
  })), jsx(Button, Object.assign({
@@ -3539,10 +3542,12 @@ const EntityAdditionalFields = ({
3539
3542
  }
3540
3543
  }, {
3541
3544
  children: jsx(CreatePropertiesList, {
3545
+ ref: propsRef,
3546
+ properties: fields,
3542
3547
  hideAddButton: true,
3543
- entityPropFields: fields,
3548
+ // entityPropFields={properties as any}
3544
3549
  parentRemove: remove,
3545
- parentFieldName: parentPropertyFieldName,
3550
+ // parentFieldName={parentPropertyFieldName}
3546
3551
  focusOnIndex: focusedProperty,
3547
3552
  entityDefinition: _entityDefinition,
3548
3553
  globalParameter: _globalParameter,
@@ -3568,14 +3573,12 @@ var EntityAdditionalFields$1 = EntityAdditionalFields;
3568
3573
 
3569
3574
  const EntityReferencePropertyFields = ({
3570
3575
  propertyFieldName,
3576
+ control,
3571
3577
  sources: _sources = [{
3572
3578
  label: 'Arsenal Entities',
3573
3579
  value: 'ARSENAL_ENTITIES'
3574
3580
  }]
3575
3581
  }) => {
3576
- const {
3577
- control
3578
- } = useFormContext();
3579
3582
  return jsxs(Fragment, {
3580
3583
  children: [jsx(Grid, {
3581
3584
  children: jsx(ControlSelect, {
@@ -3619,102 +3622,8 @@ const EntityReferencePropertyFields = ({
3619
3622
  };
3620
3623
  var EntityReferencePropertyFields$1 = EntityReferencePropertyFields;
3621
3624
 
3622
- const StringPropertyFields = ({
3623
- propertyFieldName
3624
- }) => {
3625
- const fieldName = useMemo(() => `${propertyFieldName}.restrictedValues`, [propertyFieldName]);
3626
- const {
3627
- control,
3628
- setValue,
3629
- getValues
3630
- } = useFormContext();
3631
- const restrictedValues = useWatch({
3632
- control,
3633
- name: fieldName,
3634
- defaultValue: getValues(`${propertyFieldName}.restrictedValues`) || []
3635
- });
3636
- const [inputValue, setInputValue] = useState('');
3637
- const [error, setError] = useState('');
3638
- const handleDelete = useCallback(index => {
3639
- setValue(fieldName, removeArrayItem(restrictedValues, index));
3640
- }, [restrictedValues, fieldName, setValue]);
3641
- const handleAddValue = () => {
3642
- if (inputValue) {
3643
- setValue(fieldName, [...restrictedValues, inputValue]);
3644
- setInputValue('');
3645
- }
3646
- };
3647
- const handleInputChange = e => {
3648
- const {
3649
- value
3650
- } = e.target;
3651
- setInputValue(value);
3652
- if (restrictedValues.includes(value)) {
3653
- setError('This value already exists');
3654
- } else {
3655
- setError('');
3656
- }
3657
- };
3658
- const handleKeyDown = e => {
3659
- if (e.key === 'Enter') {
3660
- handleAddValue();
3661
- }
3662
- };
3663
- return jsxs(Fragment, {
3664
- children: [jsx(Grid, {
3665
- children: jsx(Typography, Object.assign({
3666
- variant: "h6"
3667
- }, {
3668
- children: "Restricted Values"
3669
- }))
3670
- }), !!(restrictedValues === null || restrictedValues === void 0 ? void 0 : restrictedValues.length) && jsx(Grid, {
3671
- children: jsx(Box, Object.assign({
3672
- display: "flex",
3673
- flexWrap: "wrap"
3674
- }, {
3675
- children: restrictedValues.map((value, index) => jsx(Chip, {
3676
- sx: {
3677
- mr: 1
3678
- },
3679
- variant: "outlined",
3680
- label: value,
3681
- onDelete: () => handleDelete(index)
3682
- }, index))
3683
- }))
3684
- }), jsx(Grid, {
3685
- children: jsx(TextField, {
3686
- fullWidth: true,
3687
- variant: "outlined",
3688
- size: "small",
3689
- label: "Add restricted value",
3690
- value: inputValue,
3691
- onChange: handleInputChange,
3692
- error: !!error,
3693
- helperText: error,
3694
- name: "restrictedValues",
3695
- inputProps: {
3696
- onKeyDown: handleKeyDown
3697
- },
3698
- InputProps: {
3699
- endAdornment: jsx(IconButton, Object.assign({
3700
- size: "small",
3701
- onClick: handleAddValue,
3702
- disabled: !!error
3703
- }, {
3704
- children: jsx(SvgIcon, {
3705
- children: jsx("path", {
3706
- d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
3707
- })
3708
- })
3709
- }))
3710
- }
3711
- })
3712
- })]
3713
- });
3714
- };
3715
- var StringPropertyFields$1 = StringPropertyFields;
3716
-
3717
3625
  const PropertyAdditionalFields = ({
3626
+ control,
3718
3627
  propertyType,
3719
3628
  propertyFieldName,
3720
3629
  entityDefinition: _entityDefinition = false,
@@ -3725,35 +3634,43 @@ const PropertyAdditionalFields = ({
3725
3634
  }) => {
3726
3635
  switch (propertyType) {
3727
3636
  case PropertyType.STRING:
3728
- return jsx(StringPropertyFields$1, {
3729
- propertyFieldName: propertyFieldName
3637
+ return jsx(ControlArrayInput, {
3638
+ name: `${propertyFieldName}.restrictedValues`,
3639
+ control: control,
3640
+ label: "Restricted Values"
3730
3641
  });
3731
3642
  case PropertyType.BIG_DECIMAL:
3732
3643
  return jsx(BigDecimalPropertyFields$1, {
3733
- propertyFieldName: propertyFieldName
3644
+ propertyFieldName: propertyFieldName,
3645
+ control: control
3734
3646
  });
3735
3647
  case PropertyType.DATE:
3736
3648
  return jsx(DateAdditionalFields$1, {
3649
+ control: control,
3737
3650
  propertyFieldName: propertyFieldName,
3738
3651
  defaultValue: DATE_DEFAULT_FORMAT
3739
3652
  });
3740
3653
  case PropertyType.TIME:
3741
3654
  return jsx(DateAdditionalFields$1, {
3655
+ control: control,
3742
3656
  propertyFieldName: propertyFieldName,
3743
3657
  defaultValue: TIME_DEFAULT_FORMAT
3744
3658
  });
3745
3659
  case PropertyType.DATE_TIME:
3746
3660
  return jsx(DateAdditionalFields$1, {
3661
+ control: control,
3747
3662
  propertyFieldName: propertyFieldName,
3748
3663
  defaultValue: DATE_TIME_DEFAULT_FORMAT
3749
3664
  });
3750
3665
  case PropertyType.ENTITY_REFERENCE:
3751
3666
  return jsx(EntityReferencePropertyFields$1, {
3667
+ control: control,
3752
3668
  propertyFieldName: propertyFieldName,
3753
3669
  sources: entityReferenceDefinitionSources
3754
3670
  });
3755
3671
  case PropertyType.ENTITY:
3756
3672
  return jsx(EntityAdditionalFields$1, {
3673
+ control: control,
3757
3674
  parentPropertyFieldName: propertyFieldName,
3758
3675
  globalParameter: _globalParameter,
3759
3676
  entityDefinition: _entityDefinition,
@@ -4326,12 +4243,6 @@ const PropertyFiller = ({
4326
4243
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4327
4244
  entityReferenceValueComponent: entityReferenceValueComponent,
4328
4245
  fileReferenceValueComponent: fileReferenceValueComponent
4329
- }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
4330
- title: "JSON",
4331
- definitionFieldName: name,
4332
- entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4333
- entityReferenceValueComponent: entityReferenceValueComponent,
4334
- fileReferenceValueComponent: fileReferenceValueComponent
4335
4246
  }), error && jsx(FormHelperText, Object.assign({
4336
4247
  error: true
4337
4248
  }, {
@@ -4594,6 +4505,7 @@ const MultiplePropertyFiller = ({
4594
4505
  };
4595
4506
 
4596
4507
  const PropertyValueField = ({
4508
+ control,
4597
4509
  propertyFieldName,
4598
4510
  name,
4599
4511
  label: _label = '',
@@ -4602,9 +4514,7 @@ const PropertyValueField = ({
4602
4514
  entityReferenceValueComponent,
4603
4515
  fileReferenceValueComponent
4604
4516
  }) => {
4605
- const {
4606
- control
4607
- } = useFormContext();
4517
+ // const { control } = useFormContext();
4608
4518
  const propertyType = useWatch({
4609
4519
  control,
4610
4520
  name: `${propertyFieldName}.propertyType`
@@ -5060,7 +4970,10 @@ const propertyTypes = Object.values(PropertyType).sort((a, b) => a.localeCompare
5060
4970
  value: propType,
5061
4971
  label: propType.replace('_', ' ').toLowerCase().replace(/(^\w)|([-\s]\w)/g, c => c.toUpperCase())
5062
4972
  }));
5063
- const CreatePropertyFormFields = ({
4973
+ const CreatePropertyFormFields = /*#__PURE__*/memo(({
4974
+ setValue,
4975
+ control,
4976
+ // watch,
5064
4977
  propertyFieldName,
5065
4978
  entityDefinition: _entityDefinition = false,
5066
4979
  globalParameter: _globalParameter = false,
@@ -5070,11 +4983,8 @@ const CreatePropertyFormFields = ({
5070
4983
  fileReferenceValueComponent
5071
4984
  }) => {
5072
4985
  var _a;
5073
- const {
5074
- control,
5075
- setValue,
5076
- watch
5077
- } = useFormContext();
4986
+ // const { control, setValue, watch } = useFormContext();
4987
+ // console.log(propertyFieldName);
5078
4988
  const propertyType = useWatch({
5079
4989
  control,
5080
4990
  name: `${propertyFieldName}.propertyType`
@@ -5087,6 +4997,7 @@ const CreatePropertyFormFields = ({
5087
4997
  control,
5088
4998
  name: `${propertyFieldName}.isRequired`
5089
4999
  });
5000
+ // console.log('render - ', propertyFieldName);
5090
5001
  const {
5091
5002
  customCheckboxes,
5092
5003
  customFields
@@ -5191,6 +5102,7 @@ const CreatePropertyFormFields = ({
5191
5102
  })
5192
5103
  }))
5193
5104
  }), jsx(PropertyAdditionalFields, {
5105
+ control: control,
5194
5106
  propertyType: typeof propertyType === 'string' ? propertyType : propertyType.value,
5195
5107
  propertyFieldName: propertyFieldName,
5196
5108
  globalParameter: _globalParameter,
@@ -5199,6 +5111,7 @@ const CreatePropertyFormFields = ({
5199
5111
  entityReferenceValueComponent: entityReferenceValueComponent,
5200
5112
  fileReferenceValueComponent: fileReferenceValueComponent
5201
5113
  }), jsx(PropertyValueField, {
5114
+ control: control,
5202
5115
  propertyFieldName: propertyFieldName,
5203
5116
  name: `${propertyFieldName}.${_globalParameter ? 'value' : 'defaultValue'}`,
5204
5117
  // name=
@@ -5216,7 +5129,7 @@ const CreatePropertyFormFields = ({
5216
5129
  }, index))
5217
5130
  }) : null]
5218
5131
  }));
5219
- };
5132
+ });
5220
5133
 
5221
5134
  const defaultPropertyValues = {
5222
5135
  key: '',
@@ -5231,34 +5144,43 @@ const defaultPropertyValues = {
5231
5144
  executeValue: '',
5232
5145
  uiSettings: ''
5233
5146
  };
5234
- const CreatePropertiesList = ({
5235
- parentFieldName,
5147
+ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
5148
+ properties,
5149
+ // parentFieldName,
5236
5150
  hideAddButton,
5237
5151
  focusOnIndex,
5238
5152
  required,
5239
5153
  entityDefinition: _entityDefinition = false,
5240
5154
  globalParameter: _globalParameter = false,
5241
5155
  customPropertyFields: _customPropertyFields = [],
5242
- entityPropFields,
5243
5156
  parentRemove,
5244
5157
  entityReferenceDefinitionSources,
5245
5158
  entityReferenceValueComponent,
5246
5159
  fileReferenceValueComponent
5247
- }) => {
5248
- var _a, _b;
5249
- const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
5160
+ }, ref) => {
5161
+ // const fieldName = useMemo(
5162
+ // () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
5163
+ // [parentFieldName]
5164
+ // );
5165
+ var _a;
5250
5166
  const {
5251
5167
  clearErrors,
5252
5168
  control,
5253
- watch
5254
- } = useFormContext();
5169
+ setValue,
5170
+ getValues,
5171
+ reset
5172
+ } = useForm({
5173
+ defaultValues: {
5174
+ properties
5175
+ }
5176
+ });
5255
5177
  const {
5256
5178
  fields,
5257
5179
  append,
5258
5180
  remove
5259
5181
  } = useFieldArray({
5260
5182
  control,
5261
- name: fieldName
5183
+ name: 'properties'
5262
5184
  });
5263
5185
  const {
5264
5186
  fieldState: {
@@ -5266,7 +5188,7 @@ const CreatePropertiesList = ({
5266
5188
  }
5267
5189
  } = useController({
5268
5190
  control,
5269
- name: fieldName,
5191
+ name: 'properties',
5270
5192
  rules: {
5271
5193
  validate: val => {
5272
5194
  if (required && Array.isArray(val) && val.length === 0) return 'Please, fill the properties';
@@ -5274,11 +5196,17 @@ const CreatePropertiesList = ({
5274
5196
  }
5275
5197
  }
5276
5198
  });
5277
- const properties = useWatch({
5278
- control,
5279
- name: fieldName
5280
- });
5199
+ // console.log(watch());
5200
+ // const properties = useWatch({ control, name: fieldName });
5281
5201
  const refs = useRef([]);
5202
+ const handleAddParameter = useCallback(() => {
5203
+ append(defaultPropertyValues);
5204
+ clearErrors('properties');
5205
+ }, [append, clearErrors]);
5206
+ const handleRemoveParameter = useCallback(index => {
5207
+ if (parentRemove) parentRemove(index);
5208
+ remove(index);
5209
+ }, [parentRemove, remove]);
5282
5210
  useEffect(() => {
5283
5211
  if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
5284
5212
  refs.current[focusOnIndex].scrollIntoView({
@@ -5287,27 +5215,21 @@ const CreatePropertiesList = ({
5287
5215
  });
5288
5216
  }
5289
5217
  }, [focusOnIndex, refs]);
5290
- const handleAddParameter = useCallback(() => {
5291
- append(defaultPropertyValues);
5292
- clearErrors(fieldName);
5293
- }, [append, fieldName, clearErrors]);
5294
- const removeFields = useMemo(() => {
5295
- if (entityPropFields) {
5296
- return parentRemove;
5297
- } else {
5298
- return remove;
5299
- }
5300
- }, [entityPropFields, remove, parentRemove]);
5301
- const handleRemoveParameter = useCallback(index => {
5302
- removeFields(index);
5303
- }, [removeFields]);
5304
- const propFields = useMemo(() => {
5305
- if (entityPropFields) {
5306
- return entityPropFields;
5307
- } else {
5308
- return fields;
5218
+ useEffect(() => {
5219
+ var _a;
5220
+ if (properties.length && !((_a = getValues('properties')) === null || _a === void 0 ? void 0 : _a.length)) {
5221
+ reset({
5222
+ properties
5223
+ });
5309
5224
  }
5310
- }, [entityPropFields, fields]);
5225
+ }, [properties, getValues, reset]);
5226
+ useImperativeHandle(ref, () => {
5227
+ return {
5228
+ getProperties: () => getValues('properties'),
5229
+ addProperty: handleAddParameter,
5230
+ removeProperty: handleRemoveParameter
5231
+ };
5232
+ }, [getValues, handleAddParameter, handleRemoveParameter]);
5311
5233
  return jsxs(Fragment, {
5312
5234
  children: [error && error.message && jsx(Grid, Object.assign({
5313
5235
  sm: 12
@@ -5315,9 +5237,9 @@ const CreatePropertiesList = ({
5315
5237
  children: jsx(Typography, Object.assign({
5316
5238
  color: "secondary"
5317
5239
  }, {
5318
- children: ((_a = error.root) === null || _a === void 0 ? void 0 : _a.message) || error.message
5240
+ children: error.message
5319
5241
  }))
5320
- })), Array.isArray(properties) && propFields.map((item, index) => jsx(Grid, Object.assign({
5242
+ })), Array.isArray(fields) && fields.map((item, index) => jsx(Grid, Object.assign({
5321
5243
  sm: 12,
5322
5244
  ref: ref => refs.current[index] = ref
5323
5245
  }, {
@@ -5334,11 +5256,13 @@ const CreatePropertiesList = ({
5334
5256
  wordBreak: 'break-word'
5335
5257
  }
5336
5258
  }, {
5337
- children: watch(`${fieldName}.${index}.name`) || `Property ${index + 1}`
5259
+ children: item.name || `Property ${index + 1}`
5338
5260
  }))
5339
5261
  })), jsx(AccordionDetails, {
5340
5262
  children: jsx(CreatePropertyFormFields, {
5341
- propertyFieldName: `${fieldName}.${index}`,
5263
+ control: control,
5264
+ setValue: setValue,
5265
+ propertyFieldName: `properties.${index}`,
5342
5266
  entityDefinition: _entityDefinition,
5343
5267
  globalParameter: _globalParameter,
5344
5268
  customPropertyFields: _customPropertyFields,
@@ -5370,13 +5294,13 @@ const CreatePropertiesList = ({
5370
5294
  })), error && jsx(FormHelperText, Object.assign({
5371
5295
  error: true
5372
5296
  }, {
5373
- children: (_b = error.root) === null || _b === void 0 ? void 0 : _b.message
5297
+ children: (_a = error.root) === null || _a === void 0 ? void 0 : _a.message
5374
5298
  }))]
5375
5299
  }))]
5376
5300
  });
5377
- };
5301
+ });
5378
5302
 
5379
- const CreateDefinition = ({
5303
+ const CreateDefinition = /*#__PURE__*/forwardRef(({
5380
5304
  definitionFieldName,
5381
5305
  title,
5382
5306
  hideCodeField,
@@ -5386,10 +5310,12 @@ const CreateDefinition = ({
5386
5310
  entityReferenceDefinitionSources,
5387
5311
  entityReferenceValueComponent,
5388
5312
  fileReferenceValueComponent
5389
- }) => {
5313
+ }, ref) => {
5390
5314
  const {
5391
- control
5315
+ control,
5316
+ getValues
5392
5317
  } = useFormContext();
5318
+ const properties = getValues(`${definitionFieldName}.properties`);
5393
5319
  return jsxs(Grid, Object.assign({
5394
5320
  container: true,
5395
5321
  direction: "column",
@@ -5435,6 +5361,8 @@ const CreateDefinition = ({
5435
5361
  label: "Version"
5436
5362
  })
5437
5363
  })), jsx(CreatePropertiesList, {
5364
+ ref: ref,
5365
+ properties: properties,
5438
5366
  required: _required,
5439
5367
  parentFieldName: definitionFieldName,
5440
5368
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5442,7 +5370,7 @@ const CreateDefinition = ({
5442
5370
  fileReferenceValueComponent: fileReferenceValueComponent
5443
5371
  })]
5444
5372
  }));
5445
- };
5373
+ });
5446
5374
 
5447
5375
  const labels = {
5448
5376
  name: 'Name',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dartech/arsenal-ui",
3
- "version": "1.3.94",
3
+ "version": "1.3.95",
4
4
  "author": "DAR",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -19,5 +19,5 @@ type Props = {
19
19
  name: string;
20
20
  }>;
21
21
  };
22
- export declare const CreateDefinition: ({ definitionFieldName, title, hideCodeField, hideVersionField, hideNameField, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
22
+ export declare const CreateDefinition: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
23
23
  export default CreateDefinition;
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  import { Control } from 'react-hook-form';
3
3
  import { TextFieldProps } from '@mui/material/TextField';
4
4
  import { ValidateFunc } from '../../interfaces';
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
2
+ import { CustomPropertyFieldProps, EntityReferenceProperty, PropertiesArrayType } from '../../../interfaces';
3
3
  type Props = {
4
+ properties: PropertiesArrayType<any>;
4
5
  parentFieldName?: string;
5
6
  hideAddButton?: boolean;
6
7
  focusOnIndex?: number;
@@ -24,5 +25,5 @@ type Props = {
24
25
  name: string;
25
26
  }>;
26
27
  };
27
- export declare const CreatePropertiesList: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, entityPropFields, parentRemove, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
28
+ export declare const CreatePropertiesList: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
28
29
  export default CreatePropertiesList;
@@ -1,6 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
3
3
  type Props = {
4
+ setValue: any;
5
+ control: any;
6
+ watch?: any;
4
7
  propertyFieldName: string;
5
8
  entityDefinition?: boolean;
6
9
  globalParameter?: boolean;
@@ -17,5 +20,5 @@ type Props = {
17
20
  name: string;
18
21
  }>;
19
22
  };
20
- export declare const CreatePropertyFormFields: ({ propertyFieldName, entityDefinition, globalParameter, customPropertyFields, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
23
+ export declare const CreatePropertyFormFields: import("react").MemoExoticComponent<({ setValue, control, propertyFieldName, entityDefinition, globalParameter, customPropertyFields, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element>;
21
24
  export default CreatePropertyFormFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
5
+ control: Control<any>;
4
6
  };
5
- declare const BigDecimalPropertyFields: ({ propertyFieldName }: Props) => JSX.Element;
7
+ declare const BigDecimalPropertyFields: ({ propertyFieldName, control }: Props) => JSX.Element;
6
8
  export default BigDecimalPropertyFields;
@@ -1,7 +1,9 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
4
5
  defaultValue?: string;
6
+ control: Control<any>;
5
7
  };
6
- declare const DateAdditionalFields: ({ propertyFieldName, defaultValue }: Props) => JSX.Element;
8
+ declare const DateAdditionalFields: ({ propertyFieldName, control, defaultValue }: Props) => JSX.Element;
7
9
  export default DateAdditionalFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  import { EntityReferenceProperty } from '../../../../interfaces';
3
4
  type Props = {
5
+ control: Control<any>;
4
6
  parentPropertyFieldName: string;
5
7
  entityDefinition?: boolean;
6
8
  globalParameter?: boolean;
@@ -16,5 +18,5 @@ type Props = {
16
18
  name: string;
17
19
  }>;
18
20
  };
19
- declare const EntityAdditionalFields: ({ parentPropertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
21
+ declare const EntityAdditionalFields: ({ control, parentPropertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
20
22
  export default EntityAdditionalFields;
@@ -1,10 +1,12 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
4
5
  sources?: {
5
6
  label: string;
6
7
  value: string;
7
8
  }[];
9
+ control: Control<any>;
8
10
  };
9
- declare const EntityReferencePropertyFields: ({ propertyFieldName, sources, }: Props) => JSX.Element;
11
+ declare const EntityReferencePropertyFields: ({ propertyFieldName, control, sources, }: Props) => JSX.Element;
10
12
  export default EntityReferencePropertyFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { PropertyType, EntityReferenceProperty } from '../../../../interfaces';
3
+ import { Control } from 'react-hook-form';
3
4
  type Props = {
5
+ control: Control<any>;
4
6
  propertyType: PropertyType;
5
7
  propertyFieldName: string;
6
8
  entityDefinition?: boolean;
@@ -17,5 +19,5 @@ type Props = {
17
19
  name: string;
18
20
  }>;
19
21
  };
20
- export declare const PropertyAdditionalFields: ({ propertyType, propertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
22
+ export declare const PropertyAdditionalFields: ({ control, propertyType, propertyFieldName, entityDefinition, globalParameter, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
21
23
  export default PropertyAdditionalFields;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  type Props = {
3
4
  propertyFieldName: string;
5
+ control: Control<any>;
4
6
  };
5
- declare const StringPropertyFields: ({ propertyFieldName }: Props) => JSX.Element;
7
+ declare const StringPropertyFields: ({ propertyFieldName, control }: Props) => JSX.Element;
6
8
  export default StringPropertyFields;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  type Props = {
2
3
  name: string;
3
4
  label?: string;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  type Props = {
2
3
  name: string;
3
4
  label?: string;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  type Props = {
2
3
  name: string;
3
4
  format: string;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  type Props = {
2
3
  name: string;
3
4
  label?: string;
@@ -1,6 +1,8 @@
1
1
  /// <reference types="react" />
2
+ import { Control } from 'react-hook-form';
2
3
  import { EntityReferenceProperty } from '../../../../interfaces';
3
4
  type Props = {
5
+ control: Control<any>;
4
6
  propertyFieldName: string;
5
7
  name: string;
6
8
  label?: string;
@@ -17,5 +19,5 @@ type Props = {
17
19
  name: string;
18
20
  }>;
19
21
  };
20
- export declare const PropertyValueField: ({ propertyFieldName, name, label, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
22
+ export declare const PropertyValueField: ({ control, propertyFieldName, name, label, required, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
21
23
  export default PropertyValueField;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  type Props = {
2
3
  name: string;
3
4
  label?: string;
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { PropertyUnion } from '../../../interfaces';
2
3
  type PropertyItemProps = {
3
4
  property: PropertyUnion;