@dartech/arsenal-ui 1.3.70 → 1.3.72

package/index.js

@@ -3286,17 +3286,24 @@ const EntityAdditionalFields = ({
     control,
     name: `${parentPropertyFieldName}.name`
   });
+  const {
+    fields,
+    append
+  } = useFieldArray({
+    control,
+    name: `${parentPropertyFieldName}.properties`
+  });
   const parametersModal = useToggle();
   const [focusedProperty, setFocusedProperty] = useState(0);
   const handleAddParameter = useCallback(() => {
-    if (properties) {
-      const propertyIndex = properties.length;
-      setValue(`${parentPropertyFieldName}.properties.${propertyIndex}`, defaultPropertyValues$1);
+    if (fields.length > 0) {
+      append(defaultPropertyValues$1);
+      const propertyIndex = fields.length;
       setFocusedProperty(propertyIndex);
     } else {
-      setValue(`${parentPropertyFieldName}.properties`, [defaultPropertyValues$1]);
+      append(defaultPropertyValues$1);
     }
-  }, [properties, parentPropertyFieldName, setValue]);
+  }, [fields, append]);
   const handleStepperClick = index => setFocusedProperty(index);
   const handleSubmitClick = () => __awaiter(void 0, void 0, void 0, function* () {
     const isValid = yield trigger(`${parentPropertyFieldName}.properties`);
@@ -3391,15 +3398,16 @@ const EntityAdditionalFields = ({
             container: true,
             wrap: "nowrap",
             direction: "column",
-            xs: 9,
             spacing: 2,
             style: {
               height: '100%',
-              overflowY: 'auto'
+              overflowY: 'auto',
+              width: '75%'
             }
           }, {
             children: jsx(CreatePropertiesList, {
               hideAddButton: true,
+              entityPropFields: fields,
               parentFieldName: parentPropertyFieldName,
               focusOnIndex: focusedProperty,
               entityDefinition: _entityDefinition,
@@ -5127,14 +5135,23 @@ const CreatePropertiesList = ({
   required,
   entityDefinition: _entityDefinition = false,
   globalParameter: _globalParameter = false,
-  customPropertyFields: _customPropertyFields = []
+  customPropertyFields: _customPropertyFields = [],
+  entityPropFields
 }) => {
   const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
   const {
-    setValue,
     clearErrors,
-    control
+    control,
+    watch
   } = useFormContext();
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: fieldName
+  });
   const {
     fieldState: {
       error
@@ -5160,16 +5177,19 @@ const CreatePropertiesList = ({
     }
   }, [focusOnIndex, refs]);
   const handleAddParameter = useCallback(() => {
-    if (properties) {
-      setValue(`${fieldName}.${properties.length}`, defaultPropertyValues);
-    } else {
-      setValue(fieldName, [defaultPropertyValues]);
-    }
+    append(defaultPropertyValues);
     clearErrors(fieldName);
-  }, [properties, fieldName, clearErrors, setValue]);
+  }, [append, fieldName, clearErrors]);
   const handleRemoveParameter = useCallback(index => {
-    setValue(`${fieldName}`, removeArrayItem(properties, index));
-  }, [properties, fieldName, setValue]);
+    remove(index);
+  }, [remove]);
+  const propFields = useMemo(() => {
+    if (entityPropFields) {
+      return entityPropFields;
+    } else {
+      return fields;
+    }
+  }, [entityPropFields, fields]);
   return jsxs(Fragment, {
     children: [error && error.message && jsx(Grid, Object.assign({
       sm: 12
@@ -5179,7 +5199,7 @@ const CreatePropertiesList = ({
       }, {
         children: error.message
       }))
-    })), Array.isArray(properties) && properties.map((property, index) => jsx(Grid, Object.assign({
+    })), Array.isArray(properties) && propFields.map((item, index) => jsx(Grid, Object.assign({
       sm: 12,
       ref: ref => refs.current[index] = ref
     }, {
@@ -5196,7 +5216,7 @@ const CreatePropertiesList = ({
               wordBreak: 'break-word'
             }
           }, {
-            children: property.name || `Property ${index + 1}`
+            children: watch(`${fieldName}.${index}.name`) || `Property ${index + 1}`
           }))
         })), jsx(AccordionDetails, {
           children: jsx(CreatePropertyFormFields, {
@@ -5216,7 +5236,7 @@ const CreatePropertiesList = ({
           }))
         })]
       }))
-    }), index)), !hideAddButton && jsx(Grid, Object.assign({
+    }), item.id)), !hideAddButton && jsx(Grid, Object.assign({
       xs: 12
     }, {
       children: jsx(Button, Object.assign({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.3.70",
+  "version": "1.3.72",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/lib/Property/UpsertProperty/CreatePropertiesList.d.ts

@@ -8,6 +8,9 @@ type Props = {
     entityDefinition?: boolean;
     globalParameter?: boolean;
     customPropertyFields?: CustomPropertyFieldProps[];
+    entityPropFields?: Array<object & {
+        id: string;
+    }>;
 };
-export declare const CreatePropertiesList: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, }: Props) => JSX.Element;
+export declare const CreatePropertiesList: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, entityPropFields, }: Props) => JSX.Element;
 export default CreatePropertiesList;