@dartech/arsenal-ui 1.4.1 → 1.4.3

package/index.js

@@ -746,12 +746,12 @@ const ControlAutocomplete = _a => {
     labelKey
   });
   const handleChange = (_, value) => {
-    onChange(useStringValue ? value[valueKey] : value);
+    onChange(useStringValue ? _get(value, valueKey) : value);
     setLocalValue(value);
   };
   useEffect(() => {
     if (typeof value === 'string' && valueKey && useStringValue && !localValue && options.length && !!options[0] && typeof options[0] === 'object') {
-      setLocalValue(options.find(el => el[valueKey] === value));
+      setLocalValue(options.find(el => _get(el, valueKey) === value));
     } else setLocalValue(value);
   }, [localValue, options, useStringValue, value, valueKey]);
   return jsx(Autocomplete, Object.assign({}, fieldProps, {
@@ -867,11 +867,11 @@ function ControlQueryAutocomplete(_a) {
     if (!isDirty && formValue && itemQueryFunction) {
       let requestValue = formValue;
       if (typeof formValue === 'object' && valueKey in formValue) {
-        requestValue = formValue[valueKey];
+        requestValue = _get(formValue, valueKey);
       }
       itemQueryFunction(requestValue).then(item => {
         setFieldValue(item);
-        setInputValue(item[labelKey]);
+        setInputValue(_get(item, labelKey));
       }).catch();
     }
   }, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
@@ -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:
@@ -1627,15 +1629,12 @@ const propertiesArrayToObject = (properties, isGlobalParameter) => {
       name,
       isRequired,
       isMultiple,
-      isVisible,
-      isFillable,
-      isEditable,
       sortOrder,
       isEnabled,
       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,
@@ -1648,9 +1647,6 @@ const propertiesArrayToObject = (properties, isGlobalParameter) => {
     }, getPropertyValue(Object.assign(Object.assign({}, property), {
       propertyType
     }), isGlobalParameter));
-    if (isVisible !== undefined) resultProperty.isVisible = isVisible;
-    if (isFillable !== undefined) resultProperty.isFillable = isFillable;
-    if (isEditable !== undefined) resultProperty.isEditable = isEditable;
     if ('isViewableInList' in property) {
       resultProperty['isViewableInList'] = property.isViewableInList;
     }
@@ -2283,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,
@@ -2298,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]);
@@ -2329,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"
         }, {
@@ -2377,7 +2378,11 @@ const ControlArrayInput = ({
           })
         }))
       }
-    })]
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
+    }, {
+      children: error
+    }))]
   });
 };
 
@@ -4008,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:
@@ -4030,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 {
@@ -4040,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,
@@ -4248,6 +4253,7 @@ const ControlPropertyFiller = ({
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
     }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
+      control: control,
       title: "JSON",
       definitionFieldName: name,
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5329,6 +5335,7 @@ const defaultPropertyValues = {
   uiSettings: ''
 };
 const CreatePropertiesListContext = ({
+  control,
   parentFieldName,
   hideAddButton,
   focusOnIndex,
@@ -5343,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 {
@@ -5459,6 +5466,7 @@ const CreatePropertiesListContext = ({
 };
 
 const CreateDefinition = /*#__PURE__*/forwardRef(({
+  control: extControl,
   definitionFieldName,
   title,
   hideCodeField,
@@ -5496,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"
       })
@@ -5505,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"
       })
@@ -5514,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"
       })
@@ -5527,6 +5535,7 @@ const CreateDefinition = /*#__PURE__*/forwardRef(({
       entityReferenceValueComponent: entityReferenceValueComponent,
       fileReferenceValueComponent: fileReferenceValueComponent
     }) : jsx(CreatePropertiesListContext, {
+      control: extControl,
       required: _required,
       parentFieldName: definitionFieldName,
       entityReferenceDefinitionSources: entityReferenceDefinitionSources,
@@ -5829,7 +5838,6 @@ const PropertyFiller = ({
   } = useController({
     name,
     control,
-    defaultValue: property.defaultValue,
     rules: {
       validate: val => {
         if (required && val === null) return 'Please, fill this field';
@@ -5837,7 +5845,11 @@ const PropertyFiller = ({
       }
     }
   });
-  const value = watch(name);
+  // const value = watch(name);
+  const value = useWatch({
+    control,
+    name
+  });
   const prevValueRef = useRef({});
   const {
     propertyType,
@@ -5911,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.1",
+  "version": "1.4.3",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/interfaces/definition.d.ts

@@ -43,9 +43,6 @@ export interface Property {
     isMultiple: boolean;
     sortOrder: number;
     isEnabled: boolean;
-    isVisible?: boolean;
-    isFillable?: boolean;
-    isEditable?: boolean;
     uiSettings: unknown;
     validationNode: unknown;
     key?: string;

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;

package/src/lib/Property/UpsertProperty/PropertyValueField/BooleanValueField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Control } from 'react-hook-form';
 type Props = {
     control: Control<any>;

package/src/lib/Property/UpsertProperty/PropertyValueField/DateTimeValueField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/DateValueField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     name: string;
     format: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/JsonValueField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/TimeValueField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/ViewProperty/PropertyItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PropertyUnion } from '../../../interfaces';
 type PropertyItemProps = {
     property: PropertyUnion;