@dartech/arsenal-ui 1.3.61 → 1.3.63

package/index.js

@@ -1057,23 +1057,21 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
         error
       }
     } = _b;
-  // console.log('validateJson', validateJson, name);
-  // console.log('parseValue', parseValue, name);
   const extensions = useMemo(() => ({
     json: [langs.json()],
     javascript: [langs.javascript()],
     python: [langs.python()]
   }), []);
   const handleChange = useCallback(value => {
-    // console.log('handleChange', name, value);
-    // if (!value && required) {
-    //   setError(name, { message: 'Required field' });
-    // } else {
-    //   clearErrors(name);
-    // }
+    if (!value && required) {
+      setError(name, {
+        message: 'Required field'
+      });
+    } else {
+      clearErrors(name);
+    }
     if (validateJson) {
       try {
-        // console.log('validateJson', JSON.parse(value), name);
         JSON.parse(value);
         clearErrors(name);
       } catch (error) {
@@ -1093,7 +1091,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
     } else {
       onChange(value);
     }
-  }, [setError, clearErrors, onChange, name, parseValue, validateJson]);
+  }, [setError, clearErrors, onChange, name, parseValue, validateJson, required]);
   return jsxs(Box, Object.assign({
     display: "flex",
     flexDirection: "column",
@@ -1216,22 +1214,10 @@ const JsonView = ({
   height: _height = '200px',
   fontSize: _fontSize = 16
 }) => {
-  const stringValue = useMemo(() => {
-    if (typeof value === 'string') {
-      return value;
-    } else if (typeof value === 'object') {
-      try {
-        return JSON.stringify(value, null, 2);
-      } catch (error) {
-        return 'Failed to stringify Object';
-      }
-    }
-    return '';
-  }, [value]);
   return jsx(CodeMirror, {
     readOnly: true,
     width: "100%",
-    value: stringValue,
+    value: typeof value === 'string' ? value : JSON.stringify(value, null, 2),
     height: _height,
     basicSetup: {
       autocompletion: true,
@@ -3717,17 +3703,16 @@ const PropertyWidget = ({
       });
     // return <JsonEditor validate name={name} ref={ref} useParsedValue />;
     case PropertyType.STRING:
-      return jsx(StringValueField$1
-      // required={!property.isRequired}
-      , {
-        // required={!property.isRequired}
+      return jsx(StringValueField$1, {
         name: name,
         label: label,
         restrictedValues: property.restrictedValues
       });
     case PropertyType.ENTITY_REFERENCE:
-      return jsx(ControlInput, {
-        required: true,
+      return jsx(ControlInput
+      // required
+      , {
+        // required
         hideErrorMessage: true,
         name: name,
         label: label,
@@ -3802,6 +3787,13 @@ const usePropertyFiller = ({
         return {};
     }
   }, [propertyType]);
+  const checkFillOption = useCallback(() => {
+    if (isExpression(value) && fillOption !== 'expression') {
+      setFillOption('expression');
+    } else if (value !== null && value !== undefined && !isExpression(value) && fillOption !== 'widget' && fillOption !== 'string') {
+      setFillOption('widget');
+    }
+  }, [value, fillOption]);
   useEffect(() => {
     if (!fillOption) {
       if (isPropertyValueEmpty(value) && (fillOptions === null || fillOptions === void 0 ? void 0 : fillOptions.length)) {
@@ -3812,13 +3804,9 @@ const usePropertyFiller = ({
         setFillOption('widget');
       }
     } else if (!isDirty) {
-      if (isExpression(value) && fillOption !== 'expression') {
-        setFillOption('expression');
-      } else if (value !== null && value !== undefined && !isExpression(value) && fillOption !== 'widget') {
-        setFillOption('widget');
-      }
+      checkFillOption();
     }
-  }, [value, fillOption, fillOptions, _useExpression, isDirty]);
+  }, [value, fillOption, fillOptions, _useExpression, isDirty, checkFillOption]);
   return {
     propertyType,
     valueLabel,
@@ -3826,7 +3814,8 @@ const usePropertyFiller = ({
     fillOption,
     fillOptions,
     setFillOption,
-    defaultProperyValue
+    defaultProperyValue,
+    checkFillOption
   };
 };
 var usePropertyFiller$1 = usePropertyFiller;
@@ -3866,7 +3855,10 @@ const PropertyFiller = ({
     control,
     defaultValue: property.defaultValue,
     rules: {
-      required
+      validate: val => {
+        if (required && val === null) return 'Please, fill this field555';
+        return true;
+      }
     }
   });
   const {
@@ -3919,7 +3911,6 @@ const PropertyFiller = ({
           setValue(name, definitionValue);
         } catch (error) {
           setValue(name, defaultArrayValue);
-          // console.log('Parse failed');
         }
       } else {
         setValue(name, defaultArrayValue);
@@ -3933,10 +3924,10 @@ const PropertyFiller = ({
     }
   }, [isDirty, property, name, setValue]);
   useEffect(() => {
-    if (value === undefined || property.isRequired && value === null) {
+    if (value === undefined || property.isRequired && value === null && !property.defaultValue) {
       setValue(name, defaultProperyValue);
     }
-  }, [value, setValue, defaultProperyValue, property, name, isDirty]);
+  }, [value, setValue, defaultProperyValue, property, name]);
   return jsxs(Grid$1, Object.assign({
     xs: 12
   }, {
@@ -3973,9 +3964,7 @@ const PropertyFiller = ({
           }), option.value))
         }))]
       }))
-    })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ?
-    // <JsonEditor validate name={name} useParsedValue />
-    jsx(ControlAceEditor, {
+    })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
       name: name,
       control: control,
       label: valueLabel,
@@ -3986,17 +3975,13 @@ const PropertyFiller = ({
       control: control,
       name: name,
       label: valueLabel,
-      required: true,
       hideErrorMessage: true
     })), fillOption === 'string' && jsx(ControlInput, {
       control: control,
       name: name,
       label: valueLabel,
-      required: true,
       hideErrorMessage: true
-    }), fillOption === 'json_notvalid' &&
-    // <JsonEditor validate name={name} />
-    jsx(ControlAceEditor, {
+    }), fillOption === 'json_notvalid' && jsx(ControlAceEditor, {
       name: name,
       control: control,
       label: valueLabel,
@@ -4006,8 +3991,7 @@ const PropertyFiller = ({
       property: property,
       name: name,
       useExpression: useExpression,
-      label: valueLabel,
-      required: required
+      label: valueLabel
     }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
       title: "JSON",
       definitionFieldName: name
@@ -4157,6 +4141,8 @@ const MultiplePropertyFiller = ({
   label,
   title
 }) => {
+  var _a;
+  const [selectTouched, setSelectTouched] = useState(false);
   const {
     control,
     clearErrors,
@@ -4175,7 +4161,7 @@ const MultiplePropertyFiller = ({
   } = useController({
     control,
     name,
-    defaultValue: property.defaultValue,
+    defaultValue: (_a = property.defaultValue) !== null && _a !== void 0 ? _a : [],
     rules: {
       validate: val => {
         if (required && !val) return 'Please, fill this field';
@@ -4189,7 +4175,8 @@ const MultiplePropertyFiller = ({
     fillOptionLabel,
     fillOption,
     fillOptions,
-    setFillOption
+    setFillOption,
+    checkFillOption
   } = usePropertyFiller$1({
     property,
     value,
@@ -4200,6 +4187,7 @@ const MultiplePropertyFiller = ({
     multipleOptions: true
   });
   const handleFillOptionChange = event => {
+    setSelectTouched(true);
     const selectedType = event.target.value;
     if (selectedType === 'null') {
       setValue(name, null);
@@ -4216,6 +4204,11 @@ const MultiplePropertyFiller = ({
       onChange(property.isRequired ? [] : null);
     }
   }, [value, property, onChange]);
+  useEffect(() => {
+    if (value && !selectTouched) {
+      checkFillOption();
+    }
+  }, [checkFillOption, selectTouched, value]);
   return jsxs(Grid$1, {
     children: [title && jsx(Box, Object.assign({
       mb: 2

package/package.json

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

package/src/lib/Property/PropertyFiller/usePropertyFiller.d.ts

@@ -21,5 +21,6 @@ declare const usePropertyFiller: ({ value, property, label, isDirty, required, u
     }[];
     setFillOption: import("react").Dispatch<import("react").SetStateAction<PropertyFillType>>;
     defaultProperyValue: {};
+    checkFillOption: () => void;
 };
 export default usePropertyFiller;

package/src/lib/Property/PropertyWidget/PropertyWidget.d.ts

@@ -6,7 +6,6 @@ type Props = {
     name: string;
     label?: string;
     useExpression?: boolean;
-    required?: boolean;
     control: Control<any>;
 };
 export declare const PropertyWidget: ({ property, name, label, useExpression, control }: Props) => JSX.Element;

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

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

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;