@dartech/arsenal-ui 1.4.2 → 1.4.3

package/index.js

@@ -1507,7 +1507,7 @@ const isPropertyValueEmpty = value => {
   return true;
 };
 const formatPropertyValue = (propertyType, value, params) => {
-  if ((value === null || value === undefined) && propertyType !== PropertyType.BOOLEAN) {
+  if (value === null || value === undefined) {
     return null;
   }
   let parsedValue = value;
@@ -1516,8 +1516,10 @@ const formatPropertyValue = (propertyType, value, params) => {
     case PropertyType.BOOLEAN:
       if (value) {
         parsedValue = true;
-      } else {
+      } else if (!value && value !== null) {
         parsedValue = false;
+      } else {
+        parsedValue = null;
       }
       break;
     case PropertyType.INTEGER:
@@ -1632,7 +1634,7 @@ const propertiesArrayToObject = (properties, isGlobalParameter) => {
       uiSettings,
       validationNode
     } = property;
-    const propertyType = typeof property.propertyType === 'string' ? property.propertyType : property.propertyType.value;
+    const propertyType = property.propertyType ? typeof property.propertyType === 'string' ? property.propertyType : property.propertyType.value : null;
     const resultProperty = Object.assign({
       name,
       propertyType,
@@ -2277,10 +2279,12 @@ const ControlArrayInput = ({
   name,
   control,
   label,
-  required
+  required,
+  defaultValue: _defaultValue = null
 }) => {
   var _a, _b, _c;
   const [localValue, setLoacalValue] = useState('');
+  const [error, setError] = useState(null);
   const {
     field: {
       onChange,
@@ -2292,22 +2296,25 @@ const ControlArrayInput = ({
     }
   } = useController({
     control,
-    name
+    name,
+    defaultValue: _defaultValue
   });
   const handleInputChange = useCallback(e => {
     const {
       value
     } = e.target;
     setLoacalValue(value);
-    if (Array.isArray(values) && values.includes(value)) ;
-  }, [values]);
+  }, []);
   const handleAdd = useCallback(() => {
     var _a;
-    if (localValue && !((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message)) {
+    setError(null);
+    if (localValue && !((_a = errors[name]) === null || _a === void 0 ? void 0 : _a.message) && !(Array.isArray(values) && values.includes(localValue))) {
       onChange([...(values !== null && values !== void 0 ? values : []), localValue]);
       setLoacalValue('');
+    } else if (Array.isArray(values) && values.includes(localValue)) {
+      setError('This value already exists');
     }
-  }, [localValue, onChange, values, name, errors]);
+  }, [localValue, errors, name, onChange, values]);
   const handleDelete = useCallback(value => {
     onChange(values.filter(code => code !== value));
   }, [values, onChange]);
@@ -2323,7 +2330,7 @@ const ControlArrayInput = ({
       variant: "subtitle1"
     }, {
       children: required ? jsxs(Fragment, {
-        children: [label, " ", jsx(Box, Object.assign({
+        children: [label, ' ', jsx(Box, Object.assign({
           component: "span",
           color: "#D6331F"
         }, {
@@ -2371,7 +2378,11 @@ const ControlArrayInput = ({
           })
         }))
       }
-    })]
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
+    }, {
+      children: error
+    }))]
   });
 };
 
@@ -4002,7 +4013,7 @@ const usePropertyFiller = ({
       case PropertyType.JSON:
         return {};
       case PropertyType.BOOLEAN:
-        return true;
+        return false;
       case PropertyType.INTEGER:
       case PropertyType.BIG_DECIMAL:
       case PropertyType.BIG_INTEGER:
@@ -4024,8 +4035,8 @@ const usePropertyFiller = ({
   }, [value, fillOption, needRecursionCheck]);
   useEffect(() => {
     if (!fillOption) {
-      if (isPropertyValueEmpty(value) && (fillOptions === null || fillOptions === void 0 ? void 0 : fillOptions.length)) {
-        setFillOption(fillOptions[0].value);
+      if (isPropertyValueEmpty(value) && !property.isRequired && (property.defaultValue === null || property.value === null)) {
+        setFillOption('null');
       } else if (_useExpression && isExpression(value, needRecursionCheck)) {
         setFillOption('expression');
       } else {
@@ -4034,7 +4045,7 @@ const usePropertyFiller = ({
     } else if (!isDirty) {
       checkFillOption();
     }
-  }, [value, fillOption, fillOptions, _useExpression, isDirty, checkFillOption, needRecursionCheck]);
+  }, [value, fillOption, fillOptions, _useExpression, isDirty, checkFillOption, needRecursionCheck, _required, property]);
   return {
     propertyType,
     valueLabel,
@@ -4242,6 +4253,7 @@ const ControlPropertyFiller = ({
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
     }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
+      control: control,
       title: "JSON",
       definitionFieldName: name,
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5323,6 +5335,7 @@ const defaultPropertyValues = {
   uiSettings: ''
 };
 const CreatePropertiesListContext = ({
+  control,
   parentFieldName,
   hideAddButton,
   focusOnIndex,
@@ -5337,9 +5350,9 @@ const CreatePropertiesListContext = ({
 }) => {
   var _a;
   const fieldName = useMemo(() => parentFieldName ? `${parentFieldName}.properties` : `properties`, [parentFieldName]);
+  // const { } = useControler({ name: fieldName  })
   const {
     clearErrors,
-    control,
     setValue
   } = useFormContext();
   const {
@@ -5453,6 +5466,7 @@ const CreatePropertiesListContext = ({
 };
 
 const CreateDefinition = /*#__PURE__*/forwardRef(({
+  control: extControl,
   definitionFieldName,
   title,
   hideCodeField,
@@ -5490,7 +5504,7 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
     }, {
       children: jsx(ControlInput, {
         required: true,
-        control: control,
+        control: extControl !== null && extControl !== void 0 ? extControl : control,
         name: definitionFieldName ? `${definitionFieldName}.name` : `name`,
         label: "Name"
       })
@@ -5499,7 +5513,7 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
     }, {
       children: jsx(ControlInput, {
         required: true,
-        control: control,
+        control: extControl !== null && extControl !== void 0 ? extControl : control,
         name: definitionFieldName ? `${definitionFieldName}.code` : `code`,
         label: "Code"
       })
@@ -5508,7 +5522,7 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
     }, {
       children: jsx(ControlNumberInput, {
         required: true,
-        control: control,
+        control: extControl !== null && extControl !== void 0 ? extControl : control,
         name: definitionFieldName ? `${definitionFieldName}.version` : `version`,
         label: "Version"
       })
@@ -5521,6 +5535,7 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
     }) : jsx(CreatePropertiesListContext, {
+      control: extControl,
       required: _required,
       parentFieldName: definitionFieldName,
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5823,7 +5838,6 @@ const PropertyFiller = ({
   } = useController({
     name,
     control,
-    defaultValue: property.defaultValue,
     rules: {
       validate: val => {
         if (required && val === null) return 'Please, fill this field';
@@ -5831,7 +5845,11 @@ const PropertyFiller = ({
       }
     }
   });
-  const value = watch(name);
+  // const value = watch(name);
+  const value = useWatch({
+    control,
+    name
+  });
   const prevValueRef = useRef({});
   const {
     propertyType,
@@ -5905,14 +5923,24 @@ const PropertyFiller = ({
     clearErrors();
   }, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
   useEffect(() => {
-    if (!isDirty && (property.defaultValue || property.value) && !value) {
-      setValue(name, property.defaultValue || property.value);
+    if (!isDirty && (property.defaultValue || property.value) && isPropertyValueEmpty(value)) {
+      setValue(name, property.defaultValue || property.value, {
+        shouldDirty: true
+      });
     }
-  }, [isDirty, property, name, setValue, value]);
+  }, [isDirty, property, name, setValue, value, required]);
   useEffect(() => {
     var _a;
-    if (value === undefined || property.isRequired && value === null && !(property.defaultValue || property.value)) {
-      setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue);
+    if (
+    // value === undefined ||
+    property.isRequired && isPropertyValueEmpty(value) && (property.defaultValue === null || property.value === null)) {
+      setValue(name, (_a = prevValueRef.current[fillOption]) !== null && _a !== void 0 ? _a : defaultProperyValue, {
+        shouldDirty: true
+      });
+    } else if ((value === undefined || value === null) && !property.isRequired && (property.defaultValue === null || property.value === null)) {
+      setValue(name, null, {
+        shouldDirty: true
+      });
     }
   }, [value, setValue, defaultProperyValue, property, name, fillOption]);
   return jsxs(Grid, Object.assign({

package/package.json

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

package/src/lib/Definition/CreateDefinition/CreateDefinition.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { type RefMethods } from '../../Property/UpsertProperty';
+import { Control } from 'react-hook-form';
 import { EntityReferenceProperty } from '../../../interfaces';
 type Props = {
+    control?: Control<any>;
     definitionFieldName?: string;
     title?: string;
     hideCodeField?: boolean;

package/src/lib/Forms/ControlArrayInput.d.ts

@@ -5,6 +5,7 @@ type Props = {
     control: Control<any>;
     label: ReactNode;
     required?: boolean;
+    defaultValue?: [] | null;
 };
-export declare const ControlArrayInput: ({ name, control, label, required }: Props) => JSX.Element;
+export declare const ControlArrayInput: ({ name, control, label, required, defaultValue, }: Props) => JSX.Element;
 export {};

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Control } from 'react-hook-form';
 import { CustomPropertyFieldProps, EntityReferenceProperty } from '../../../interfaces';
 type Props = {
+    control: Control<any>;
     parentFieldName?: string;
     hideAddButton?: boolean;
     focusOnIndex?: number;
@@ -24,5 +26,5 @@ type Props = {
         name: string;
     }>;
 };
-export declare const CreatePropertiesListContext: ({ parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, parentRemove, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
+export declare const CreatePropertiesListContext: ({ control, parentFieldName, hideAddButton, focusOnIndex, required, entityDefinition, globalParameter, customPropertyFields, parentRemove, entityReferenceDefinitionSources, entityReferenceValueComponent, fileReferenceValueComponent, }: Props) => JSX.Element;
 export default CreatePropertiesListContext;