@dartech/arsenal-ui 1.3.94 → 1.3.96

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
@@ -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';
@@ -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,
@@ -1070,30 +1080,13 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1070
1080
  error
1071
1081
  }
1072
1082
  } = _b;
1083
+ console.log(error);
1073
1084
  const extensions = useMemo(() => ({
1074
1085
  json: [langs.json()],
1075
1086
  javascript: [langs.javascript()],
1076
1087
  python: [langs.python()]
1077
1088
  }), []);
1078
1089
  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
1090
  if (parseValue) {
1098
1091
  try {
1099
1092
  const val = JSON.parse(value);
@@ -1104,7 +1097,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
1104
1097
  } else {
1105
1098
  onChange(value);
1106
1099
  }
1107
- }, [setError, clearErrors, onChange, name, parseValue, validateJson, required]);
1100
+ }, [onChange, parseValue]);
1108
1101
  return jsxs(Box, Object.assign({
1109
1102
  display: "flex",
1110
1103
  flexDirection: "column",
@@ -1518,6 +1511,7 @@ const formatPropertyValue = (propertyType, value, params) => {
1518
1511
  return null;
1519
1512
  }
1520
1513
  let parsedValue = value;
1514
+ // console.log(value);
1521
1515
  switch (propertyType) {
1522
1516
  case PropertyType.BOOLEAN:
1523
1517
  if (value) {
@@ -1537,8 +1531,10 @@ const formatPropertyValue = (propertyType, value, params) => {
1537
1531
  case PropertyType.DATE:
1538
1532
  case PropertyType.DATE_TIME:
1539
1533
  case PropertyType.TIME:
1540
- parsedValue = format(new Date(value.toString()), params.formatText);
1541
- break;
1534
+ {
1535
+ if (value) parsedValue = format(new Date(value.toString()), params.formatText);
1536
+ break;
1537
+ }
1542
1538
  case PropertyType.JSON:
1543
1539
  case PropertyType.ANY:
1544
1540
  try {
@@ -2281,15 +2277,15 @@ const ControlArrayInput = ({
2281
2277
  var _a, _b, _c;
2282
2278
  const [localValue, setLoacalValue] = useState('');
2283
2279
  const {
2284
- register,
2285
- setValue,
2286
- setError,
2287
- clearErrors,
2280
+ field: {
2281
+ onChange,
2282
+ value: values
2283
+ },
2284
+ // fieldState: { error },
2288
2285
  formState: {
2289
2286
  errors
2290
2287
  }
2291
- } = useFormContext();
2292
- const values = useWatch({
2288
+ } = useController({
2293
2289
  control,
2294
2290
  name
2295
2291
  });
@@ -2298,25 +2294,18 @@ const ControlArrayInput = ({
2298
2294
  value
2299
2295
  } = e.target;
2300
2296
  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]);
2297
+ if (Array.isArray(values) && values.includes(value)) ;
2298
+ }, [values]);
2310
2299
  const handleAdd = useCallback(() => {
2311
2300
  var _a;
2312
2301
  if (localValue && !((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message)) {
2313
- setValue(name, [...values, localValue]);
2302
+ onChange([...(values !== null && values !== void 0 ? values : []), localValue]);
2314
2303
  setLoacalValue('');
2315
2304
  }
2316
- }, [localValue, setValue, values, name, errors]);
2305
+ }, [localValue, onChange, values, name, errors]);
2317
2306
  const handleDelete = useCallback(value => {
2318
- setValue(name, values.filter(code => code !== value));
2319
- }, [values, name, setValue]);
2307
+ onChange(values.filter(code => code !== value));
2308
+ }, [values, onChange]);
2320
2309
  const handleKeyDown = useCallback(e => {
2321
2310
  if (e.key === 'Enter' || e.keyCode === 13) {
2322
2311
  e.stopPropagation();
@@ -2340,7 +2329,7 @@ const ControlArrayInput = ({
2340
2329
  display: "flex",
2341
2330
  flexWrap: "wrap"
2342
2331
  }, {
2343
- children: values.map((value, index) => jsx(Chip, {
2332
+ children: values === null || values === void 0 ? void 0 : values.map((value, index) => jsx(Chip, {
2344
2333
  sx: {
2345
2334
  mr: 1,
2346
2335
  mb: 1
@@ -2351,7 +2340,7 @@ const ControlArrayInput = ({
2351
2340
  }, index))
2352
2341
  })), jsx("input", Object.assign({
2353
2342
  type: "hidden"
2354
- }, register(name, {
2343
+ }, control.register(name, {
2355
2344
  required: required && 'Please, add a value'
2356
2345
  }))), jsx(TextField, {
2357
2346
  fullWidth: true,
@@ -3251,11 +3240,10 @@ const InfoItem = ({
3251
3240
 
3252
3241
  const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
3253
3242
  const BigDecimalPropertyFields = ({
3254
- propertyFieldName
3243
+ propertyFieldName,
3244
+ control
3255
3245
  }) => {
3256
- const {
3257
- control
3258
- } = useFormContext();
3246
+ // const { control } = useFormContext();
3259
3247
  return jsxs(Fragment, {
3260
3248
  children: [jsx(Grid, {
3261
3249
  children: jsx(ControlNumberInput, {
@@ -3281,11 +3269,9 @@ var BigDecimalPropertyFields$1 = BigDecimalPropertyFields;
3281
3269
 
3282
3270
  const DateAdditionalFields = ({
3283
3271
  propertyFieldName,
3272
+ control,
3284
3273
  defaultValue: _defaultValue = ''
3285
3274
  }) => {
3286
- const {
3287
- control
3288
- } = useFormContext();
3289
3275
  return jsx(Grid, {
3290
3276
  children: jsx(ControlInput, {
3291
3277
  required: true,
@@ -3397,6 +3383,7 @@ const defaultPropertyValues$1 = {
3397
3383
  uiSettings: ''
3398
3384
  };
3399
3385
  const EntityAdditionalFields = ({
3386
+ control,
3400
3387
  parentPropertyFieldName,
3401
3388
  entityDefinition: _entityDefinition = false,
3402
3389
  globalParameter: _globalParameter = false,
@@ -3404,15 +3391,19 @@ const EntityAdditionalFields = ({
3404
3391
  entityReferenceValueComponent,
3405
3392
  fileReferenceValueComponent
3406
3393
  }) => {
3394
+ const propsRef = useRef(null);
3407
3395
  const {
3396
+ field: {
3397
+ onChange
3398
+ }
3399
+ } = useController({
3408
3400
  control,
3409
- getValues,
3410
- trigger
3411
- } = useFormContext();
3401
+ name: `${parentPropertyFieldName}.properties`
3402
+ });
3412
3403
  const properties = useWatch({
3413
3404
  control,
3414
3405
  name: `${parentPropertyFieldName}.properties`,
3415
- defaultValue: getValues(`${parentPropertyFieldName}.properties`) || []
3406
+ defaultValue: []
3416
3407
  });
3417
3408
  const parentPropertyName = useWatch({
3418
3409
  control,
@@ -3429,21 +3420,26 @@ const EntityAdditionalFields = ({
3429
3420
  const parametersModal = useToggle();
3430
3421
  const [focusedProperty, setFocusedProperty] = useState(0);
3431
3422
  const handleAddParameter = useCallback(() => {
3432
- if (fields.length > 0) {
3423
+ if ((properties === null || properties === void 0 ? void 0 : properties.length) > 0) {
3433
3424
  append(defaultPropertyValues$1);
3434
- const propertyIndex = fields.length;
3425
+ const propertyIndex = properties.length;
3435
3426
  setFocusedProperty(propertyIndex);
3436
3427
  } else {
3437
3428
  append(defaultPropertyValues$1);
3438
3429
  }
3439
- }, [fields, append]);
3430
+ propsRef.current.addProperty();
3431
+ }, [properties, append]);
3440
3432
  const handleStepperClick = index => setFocusedProperty(index);
3441
3433
  const handleSubmitClick = () => __awaiter(void 0, void 0, void 0, function* () {
3442
- const isValid = yield trigger(`${parentPropertyFieldName}.properties`);
3443
- if (isValid) {
3444
- parametersModal.onClose();
3445
- }
3434
+ // console.log(propsRef.current.getProperties());
3435
+ onChange(propsRef.current.getProperties());
3436
+ // const isValid = await trigger(`${parentPropertyFieldName}.properties`);
3437
+ parametersModal.onClose();
3438
+ // if (isValid) {
3439
+ // parametersModal.onClose();
3440
+ // }
3446
3441
  });
3442
+
3447
3443
  return jsxs(Fragment, {
3448
3444
  children: [jsx(Grid, {
3449
3445
  children: jsx(Typography, Object.assign({
@@ -3502,7 +3498,7 @@ const EntityAdditionalFields = ({
3502
3498
  paddingLeft: '4px'
3503
3499
  }
3504
3500
  }, {
3505
- children: properties.map((property, index) => jsxs(Step, Object.assign({
3501
+ children: fields.map((property, index) => jsxs(Step, Object.assign({
3506
3502
  onClick: () => handleStepperClick(index),
3507
3503
  style: {
3508
3504
  cursor: 'pointer'
@@ -3516,7 +3512,7 @@ const EntityAdditionalFields = ({
3516
3512
  wordBreak: 'break-word'
3517
3513
  }
3518
3514
  }, {
3519
- children: property.name || '(no name)'
3515
+ children: property['name'] || '(no name)'
3520
3516
  })), jsx(StepContent, {})]
3521
3517
  }), index))
3522
3518
  })), jsx(Button, Object.assign({
@@ -3539,10 +3535,12 @@ const EntityAdditionalFields = ({
3539
3535
  }
3540
3536
  }, {
3541
3537
  children: jsx(CreatePropertiesList, {
3538
+ ref: propsRef,
3539
+ properties: fields,
3542
3540
  hideAddButton: true,
3543
- entityPropFields: fields,
3541
+ // entityPropFields={properties as any}
3544
3542
  parentRemove: remove,
3545
- parentFieldName: parentPropertyFieldName,
3543
+ // parentFieldName={parentPropertyFieldName}
3546
3544
  focusOnIndex: focusedProperty,
3547
3545
  entityDefinition: _entityDefinition,
3548
3546
  globalParameter: _globalParameter,
@@ -3568,14 +3566,12 @@ var EntityAdditionalFields$1 = EntityAdditionalFields;
3568
3566
 
3569
3567
  const EntityReferencePropertyFields = ({
3570
3568
  propertyFieldName,
3569
+ control,
3571
3570
  sources: _sources = [{
3572
3571
  label: 'Arsenal Entities',
3573
3572
  value: 'ARSENAL_ENTITIES'
3574
3573
  }]
3575
3574
  }) => {
3576
- const {
3577
- control
3578
- } = useFormContext();
3579
3575
  return jsxs(Fragment, {
3580
3576
  children: [jsx(Grid, {
3581
3577
  children: jsx(ControlSelect, {
@@ -3619,102 +3615,8 @@ const EntityReferencePropertyFields = ({
3619
3615
  };
3620
3616
  var EntityReferencePropertyFields$1 = EntityReferencePropertyFields;
3621
3617
 
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
3618
  const PropertyAdditionalFields = ({
3619
+ control,
3718
3620
  propertyType,
3719
3621
  propertyFieldName,
3720
3622
  entityDefinition: _entityDefinition = false,
@@ -3725,35 +3627,43 @@ const PropertyAdditionalFields = ({
3725
3627
  }) => {
3726
3628
  switch (propertyType) {
3727
3629
  case PropertyType.STRING:
3728
- return jsx(StringPropertyFields$1, {
3729
- propertyFieldName: propertyFieldName
3630
+ return jsx(ControlArrayInput, {
3631
+ name: `${propertyFieldName}.restrictedValues`,
3632
+ control: control,
3633
+ label: "Restricted Values"
3730
3634
  });
3731
3635
  case PropertyType.BIG_DECIMAL:
3732
3636
  return jsx(BigDecimalPropertyFields$1, {
3733
- propertyFieldName: propertyFieldName
3637
+ propertyFieldName: propertyFieldName,
3638
+ control: control
3734
3639
  });
3735
3640
  case PropertyType.DATE:
3736
3641
  return jsx(DateAdditionalFields$1, {
3642
+ control: control,
3737
3643
  propertyFieldName: propertyFieldName,
3738
3644
  defaultValue: DATE_DEFAULT_FORMAT
3739
3645
  });
3740
3646
  case PropertyType.TIME:
3741
3647
  return jsx(DateAdditionalFields$1, {
3648
+ control: control,
3742
3649
  propertyFieldName: propertyFieldName,
3743
3650
  defaultValue: TIME_DEFAULT_FORMAT
3744
3651
  });
3745
3652
  case PropertyType.DATE_TIME:
3746
3653
  return jsx(DateAdditionalFields$1, {
3654
+ control: control,
3747
3655
  propertyFieldName: propertyFieldName,
3748
3656
  defaultValue: DATE_TIME_DEFAULT_FORMAT
3749
3657
  });
3750
3658
  case PropertyType.ENTITY_REFERENCE:
3751
3659
  return jsx(EntityReferencePropertyFields$1, {
3660
+ control: control,
3752
3661
  propertyFieldName: propertyFieldName,
3753
3662
  sources: entityReferenceDefinitionSources
3754
3663
  });
3755
3664
  case PropertyType.ENTITY:
3756
3665
  return jsx(EntityAdditionalFields$1, {
3666
+ control: control,
3757
3667
  parentPropertyFieldName: propertyFieldName,
3758
3668
  globalParameter: _globalParameter,
3759
3669
  entityDefinition: _entityDefinition,
@@ -3767,14 +3677,12 @@ const PropertyAdditionalFields = ({
3767
3677
  };
3768
3678
 
3769
3679
  const StringValueField = ({
3680
+ control,
3770
3681
  name,
3771
3682
  label,
3772
3683
  required,
3773
3684
  restrictedValues
3774
3685
  }) => {
3775
- const {
3776
- control
3777
- } = useFormContext();
3778
3686
  const {
3779
3687
  field: {
3780
3688
  onChange,
@@ -3993,6 +3901,7 @@ const PropertyWidget = ({
3993
3901
  });
3994
3902
  case PropertyType.STRING:
3995
3903
  return jsx(StringValueField$1, {
3904
+ control: control,
3996
3905
  name: name,
3997
3906
  label: label,
3998
3907
  restrictedValues: property.restrictedValues
@@ -4006,7 +3915,8 @@ const PropertyWidget = ({
4006
3915
  } else {
4007
3916
  return jsx(StringValueField$1, {
4008
3917
  name: name,
4009
- label: label
3918
+ label: label,
3919
+ control: control
4010
3920
  });
4011
3921
  }
4012
3922
  case PropertyType.FILE:
@@ -4021,7 +3931,8 @@ const PropertyWidget = ({
4021
3931
  } else {
4022
3932
  return jsx(StringValueField$1, {
4023
3933
  name: name,
4024
- label: label
3934
+ label: label,
3935
+ control: control
4025
3936
  });
4026
3937
  }
4027
3938
  case PropertyType.ANY:
@@ -4326,12 +4237,6 @@ const PropertyFiller = ({
4326
4237
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4327
4238
  entityReferenceValueComponent: entityReferenceValueComponent,
4328
4239
  fileReferenceValueComponent: fileReferenceValueComponent
4329
- }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
4330
- title: "JSON",
4331
- definitionFieldName: name,
4332
- entityReferenceDefinitionSources: entityReferenceDefinitionSources,
4333
- entityReferenceValueComponent: entityReferenceValueComponent,
4334
- fileReferenceValueComponent: fileReferenceValueComponent
4335
4240
  }), error && jsx(FormHelperText, Object.assign({
4336
4241
  error: true
4337
4242
  }, {
@@ -4594,6 +4499,7 @@ const MultiplePropertyFiller = ({
4594
4499
  };
4595
4500
 
4596
4501
  const PropertyValueField = ({
4502
+ control,
4597
4503
  propertyFieldName,
4598
4504
  name,
4599
4505
  label: _label = '',
@@ -4602,9 +4508,7 @@ const PropertyValueField = ({
4602
4508
  entityReferenceValueComponent,
4603
4509
  fileReferenceValueComponent
4604
4510
  }) => {
4605
- const {
4606
- control
4607
- } = useFormContext();
4511
+ // const { control } = useFormContext();
4608
4512
  const propertyType = useWatch({
4609
4513
  control,
4610
4514
  name: `${propertyFieldName}.propertyType`
@@ -5060,7 +4964,10 @@ const propertyTypes = Object.values(PropertyType).sort((a, b) => a.localeCompare
5060
4964
  value: propType,
5061
4965
  label: propType.replace('_', ' ').toLowerCase().replace(/(^\w)|([-\s]\w)/g, c => c.toUpperCase())
5062
4966
  }));
5063
- const CreatePropertyFormFields = ({
4967
+ const CreatePropertyFormFields = /*#__PURE__*/memo(({
4968
+ setValue,
4969
+ control,
4970
+ // watch,
5064
4971
  propertyFieldName,
5065
4972
  entityDefinition: _entityDefinition = false,
5066
4973
  globalParameter: _globalParameter = false,
@@ -5070,11 +4977,8 @@ const CreatePropertyFormFields = ({
5070
4977
  fileReferenceValueComponent
5071
4978
  }) => {
5072
4979
  var _a;
5073
- const {
5074
- control,
5075
- setValue,
5076
- watch
5077
- } = useFormContext();
4980
+ // const { control, setValue, watch } = useFormContext();
4981
+ // console.log(propertyFieldName);
5078
4982
  const propertyType = useWatch({
5079
4983
  control,
5080
4984
  name: `${propertyFieldName}.propertyType`
@@ -5087,6 +4991,7 @@ const CreatePropertyFormFields = ({
5087
4991
  control,
5088
4992
  name: `${propertyFieldName}.isRequired`
5089
4993
  });
4994
+ // console.log('render - ', propertyFieldName);
5090
4995
  const {
5091
4996
  customCheckboxes,
5092
4997
  customFields
@@ -5191,6 +5096,7 @@ const CreatePropertyFormFields = ({
5191
5096
  })
5192
5097
  }))
5193
5098
  }), jsx(PropertyAdditionalFields, {
5099
+ control: control,
5194
5100
  propertyType: typeof propertyType === 'string' ? propertyType : propertyType.value,
5195
5101
  propertyFieldName: propertyFieldName,
5196
5102
  globalParameter: _globalParameter,
@@ -5199,6 +5105,7 @@ const CreatePropertyFormFields = ({
5199
5105
  entityReferenceValueComponent: entityReferenceValueComponent,
5200
5106
  fileReferenceValueComponent: fileReferenceValueComponent
5201
5107
  }), jsx(PropertyValueField, {
5108
+ control: control,
5202
5109
  propertyFieldName: propertyFieldName,
5203
5110
  name: `${propertyFieldName}.${_globalParameter ? 'value' : 'defaultValue'}`,
5204
5111
  // name=
@@ -5216,7 +5123,7 @@ const CreatePropertyFormFields = ({
5216
5123
  }, index))
5217
5124
  }) : null]
5218
5125
  }));
5219
- };
5126
+ });
5220
5127
 
5221
5128
  const defaultPropertyValues = {
5222
5129
  key: '',
@@ -5231,34 +5138,45 @@ const defaultPropertyValues = {
5231
5138
  executeValue: '',
5232
5139
  uiSettings: ''
5233
5140
  };
5234
- const CreatePropertiesList = ({
5235
- parentFieldName,
5141
+ const CreatePropertiesList = /*#__PURE__*/forwardRef(({
5142
+ properties,
5143
+ // parentFieldName,
5236
5144
  hideAddButton,
5237
5145
  focusOnIndex,
5238
5146
  required,
5239
5147
  entityDefinition: _entityDefinition = false,
5240
5148
  globalParameter: _globalParameter = false,
5241
5149
  customPropertyFields: _customPropertyFields = [],
5242
- entityPropFields,
5243
5150
  parentRemove,
5244
5151
  entityReferenceDefinitionSources,
5245
5152
  entityReferenceValueComponent,
5246
5153
  fileReferenceValueComponent
5247
- }) => {
5248
- var _a, _b;
5249
- const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
5154
+ }, ref) => {
5155
+ // const fieldName = useMemo(
5156
+ // () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
5157
+ // [parentFieldName]
5158
+ // );
5159
+ var _a;
5250
5160
  const {
5251
5161
  clearErrors,
5252
5162
  control,
5253
- watch
5254
- } = useFormContext();
5163
+ setValue,
5164
+ getValues,
5165
+ reset,
5166
+ trigger
5167
+ } = useForm({
5168
+ mode: 'all',
5169
+ defaultValues: {
5170
+ properties
5171
+ }
5172
+ });
5255
5173
  const {
5256
5174
  fields,
5257
5175
  append,
5258
5176
  remove
5259
5177
  } = useFieldArray({
5260
5178
  control,
5261
- name: fieldName
5179
+ name: 'properties'
5262
5180
  });
5263
5181
  const {
5264
5182
  fieldState: {
@@ -5266,7 +5184,7 @@ const CreatePropertiesList = ({
5266
5184
  }
5267
5185
  } = useController({
5268
5186
  control,
5269
- name: fieldName,
5187
+ name: 'properties',
5270
5188
  rules: {
5271
5189
  validate: val => {
5272
5190
  if (required && Array.isArray(val) && val.length === 0) return 'Please, fill the properties';
@@ -5274,11 +5192,15 @@ const CreatePropertiesList = ({
5274
5192
  }
5275
5193
  }
5276
5194
  });
5277
- const properties = useWatch({
5278
- control,
5279
- name: fieldName
5280
- });
5281
5195
  const refs = useRef([]);
5196
+ const handleAddParameter = useCallback(() => {
5197
+ append(defaultPropertyValues);
5198
+ clearErrors('properties');
5199
+ }, [append, clearErrors]);
5200
+ const handleRemoveParameter = useCallback(index => {
5201
+ if (parentRemove) parentRemove(index);
5202
+ remove(index);
5203
+ }, [parentRemove, remove]);
5282
5204
  useEffect(() => {
5283
5205
  if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
5284
5206
  refs.current[focusOnIndex].scrollIntoView({
@@ -5287,27 +5209,21 @@ const CreatePropertiesList = ({
5287
5209
  });
5288
5210
  }
5289
5211
  }, [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;
5212
+ useEffect(() => {
5213
+ var _a;
5214
+ if (properties.length && !((_a = getValues('properties')) === null || _a === void 0 ? void 0 : _a.length)) {
5215
+ reset({
5216
+ properties
5217
+ });
5309
5218
  }
5310
- }, [entityPropFields, fields]);
5219
+ }, [properties, getValues, reset]);
5220
+ useImperativeHandle(ref, () => {
5221
+ return {
5222
+ getProperties: () => getValues('properties'),
5223
+ addProperty: handleAddParameter,
5224
+ removeProperty: handleRemoveParameter
5225
+ };
5226
+ }, [getValues, handleAddParameter, handleRemoveParameter]);
5311
5227
  return jsxs(Fragment, {
5312
5228
  children: [error && error.message && jsx(Grid, Object.assign({
5313
5229
  sm: 12
@@ -5315,9 +5231,9 @@ const CreatePropertiesList = ({
5315
5231
  children: jsx(Typography, Object.assign({
5316
5232
  color: "secondary"
5317
5233
  }, {
5318
- children: ((_a = error.root) === null || _a === void 0 ? void 0 : _a.message) || error.message
5234
+ children: error.message
5319
5235
  }))
5320
- })), Array.isArray(properties) && propFields.map((item, index) => jsx(Grid, Object.assign({
5236
+ })), Array.isArray(fields) && fields.map((item, index) => jsx(Grid, Object.assign({
5321
5237
  sm: 12,
5322
5238
  ref: ref => refs.current[index] = ref
5323
5239
  }, {
@@ -5334,11 +5250,13 @@ const CreatePropertiesList = ({
5334
5250
  wordBreak: 'break-word'
5335
5251
  }
5336
5252
  }, {
5337
- children: watch(`${fieldName}.${index}.name`) || `Property ${index + 1}`
5253
+ children: item.name || `Property ${index + 1}`
5338
5254
  }))
5339
5255
  })), jsx(AccordionDetails, {
5340
5256
  children: jsx(CreatePropertyFormFields, {
5341
- propertyFieldName: `${fieldName}.${index}`,
5257
+ control: control,
5258
+ setValue: setValue,
5259
+ propertyFieldName: `properties.${index}`,
5342
5260
  entityDefinition: _entityDefinition,
5343
5261
  globalParameter: _globalParameter,
5344
5262
  customPropertyFields: _customPropertyFields,
@@ -5370,13 +5288,13 @@ const CreatePropertiesList = ({
5370
5288
  })), error && jsx(FormHelperText, Object.assign({
5371
5289
  error: true
5372
5290
  }, {
5373
- children: (_b = error.root) === null || _b === void 0 ? void 0 : _b.message
5291
+ children: (_a = error.root) === null || _a === void 0 ? void 0 : _a.message
5374
5292
  }))]
5375
5293
  }))]
5376
5294
  });
5377
- };
5295
+ });
5378
5296
 
5379
- const CreateDefinition = ({
5297
+ const CreateDefinition = /*#__PURE__*/forwardRef(({
5380
5298
  definitionFieldName,
5381
5299
  title,
5382
5300
  hideCodeField,
@@ -5386,10 +5304,12 @@ const CreateDefinition = ({
5386
5304
  entityReferenceDefinitionSources,
5387
5305
  entityReferenceValueComponent,
5388
5306
  fileReferenceValueComponent
5389
- }) => {
5307
+ }, ref) => {
5390
5308
  const {
5391
- control
5309
+ control,
5310
+ getValues
5392
5311
  } = useFormContext();
5312
+ const properties = getValues(`${definitionFieldName}.properties`);
5393
5313
  return jsxs(Grid, Object.assign({
5394
5314
  container: true,
5395
5315
  direction: "column",
@@ -5435,6 +5355,8 @@ const CreateDefinition = ({
5435
5355
  label: "Version"
5436
5356
  })
5437
5357
  })), jsx(CreatePropertiesList, {
5358
+ ref: ref,
5359
+ properties: properties,
5438
5360
  required: _required,
5439
5361
  parentFieldName: definitionFieldName,
5440
5362
  entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5442,7 +5364,7 @@ const CreateDefinition = ({
5442
5364
  fileReferenceValueComponent: fileReferenceValueComponent
5443
5365
  })]
5444
5366
  }));
5445
- };
5367
+ });
5446
5368
 
5447
5369
  const labels = {
5448
5370
  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.96",
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,6 +1,8 @@
1
+ import { Control } from 'react-hook-form';
1
2
  type Props = {
3
+ control: Control<any>;
2
4
  name: string;
3
5
  label?: string;
4
6
  };
5
- declare const BooleanValueField: ({ name, label }: Props) => JSX.Element;
7
+ declare const BooleanValueField: ({ name, label, control }: Props) => JSX.Element;
6
8
  export default BooleanValueField;
@@ -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,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;