@dartech/arsenal-ui 1.3.56 → 1.3.58

package/index.js

@@ -216,7 +216,6 @@ const AlertDialog = ({
  * @category Forms
  */
 const ControlInput = _a => {
-  var _b;
   var {
       control,
       validate,
@@ -233,7 +232,8 @@ const ControlInput = _a => {
   const {
     field: {
       ref,
-      onChange
+      onChange,
+      value
     },
     fieldState: {
       error
@@ -247,10 +247,6 @@ const ControlInput = _a => {
       validate
     }
   });
-  const value = useWatch({
-    control,
-    name
-  });
   return jsx(TextField, Object.assign({
     fullWidth: true,
     size: "small",
@@ -275,11 +271,7 @@ const ControlInput = _a => {
     minRows: textarea ? 3 : 1,
     value: value !== null && value !== void 0 ? value : '',
     onChange: customOnChange ? customOnChange : onChange
-  }, textFieldProps, {
-    inputProps: Object.assign(Object.assign({}, (_b = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputProps) !== null && _b !== void 0 ? _b : {}), {
-      value: value !== null && value !== void 0 ? value : ''
-    })
-  }));
+  }, textFieldProps));
 };
 
 function useDebounce(func, delay) {
@@ -1036,30 +1028,33 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
       readOnly,
       required = false,
       validateJson = false,
+      hideErrorMessage = false,
       fontSize = 16,
       validate = true,
       parseValue
     } = _a,
-    otherProps = __rest(_a, ["control", "name", "mode", "label", "width", "height", "readOnly", "required", "validateJson", "fontSize", "validate", "parseValue"]);
+    otherProps = __rest(_a, ["control", "name", "mode", "label", "width", "height", "readOnly", "required", "validateJson", "hideErrorMessage", "fontSize", "validate", "parseValue"]);
   const {
     setError,
     clearErrors
   } = useFormContext();
   const {
     field: {
-      onChange
+      onChange,
+      value,
+      ref: fromRef
     },
     fieldState: {
       error
     }
   } = useController({
     control,
-    name
-  });
-  const value = useWatch({
-    control,
-    name
+    name,
+    rules: {
+      required: required && 'Please, fill this field'
+    }
   });
+  // const value = useWatch({ control, name });
   const extensions = useMemo(() => ({
     json: [langs.json()],
     javascript: [langs.javascript()],
@@ -1086,7 +1081,6 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
     if (parseValue) {
       try {
         const val = JSON.parse(value);
-        console.log('parsed val:', val);
         onChange(val);
       } catch (e) {
         onChange(value);
@@ -1119,7 +1113,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
       }))
     }), jsxs(Fragment, {
       children: [jsx(CodeMirror, Object.assign({
-        ref: ref,
+        ref: ref || fromRef,
         basicSetup: {
           autocompletion: true,
           history: true
@@ -1137,7 +1131,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
         value: mode === 'json' && typeof value !== 'string' ? value === null ? '' : JSON.stringify(value, null, 2) : value,
         onChange: handleChange,
         extensions: extensions[mode]
-      }, otherProps)), error && jsx(FormHelperText, Object.assign({
+      }, otherProps)), error && !hideErrorMessage && jsx(FormHelperText, Object.assign({
         error: true
       }, {
         children: error.message
@@ -3580,12 +3574,11 @@ const PropertyAdditionalFields = ({
   }
 };
 
-const JsonEditor = ({
+const JsonEditor = /*#__PURE__*/forwardRef(({
   validate: _validate = false,
   name,
-  inputRef,
   useParsedValue
-}) => {
+}, ref) => {
   const {
     control,
     setValue,
@@ -3607,7 +3600,7 @@ const JsonEditor = ({
     }
   };
   return jsx(CodeMirror, {
-    ref: inputRef,
+    ref: ref,
     basicSetup: {
       autocompletion: true,
       history: true
@@ -3621,39 +3614,11 @@ const JsonEditor = ({
       zIndex: 0,
       isolation: 'isolate'
     },
-    value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value) : value,
+    value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value, null, 2) : value,
     onChange: handleChange,
     extensions: [langs.json()]
-  })
-  // <AceEditor
-  //   wrapEnabled
-  //   width="100%"
-  //   height="200px"
-  //   theme="monokai"
-  //   fontSize={14}
-  //   showPrintMargin={false}
-  //   style={{ lineHeight: 1.4, zIndex: 0, isolation: 'isolate' }}
-  //   setOptions={{
-  //     enableLiveAutocompletion: true,
-  //     enableBasicAutocompletion: true,
-  //     showLineNumbers: true,
-  //     tabSize: 2,
-  //     useWorker: false
-  //   }}
-  //   ref={inputRef}
-  //   name={name}
-  //   value={typeof value !== 'string' ? (value === null ? '' : JSON.stringify(value)) : value}
-  //   onChange={handleChange}
-  //   mode="json"
-  //   onLoad={(editor) => {
-  //     if (!validate) {
-  //       editor.getSession().setUseWorker(false);
-  //     }
-  //   }}
-  // />
-  ;
-};
-
+  });
+});
 var JsonEditor$1 = JsonEditor;
 
 const StringValueField = ({
@@ -3788,7 +3753,8 @@ const PropertyWidget = ({
       return jsx(JsonEditor$1, {
         validate: true,
         name: name,
-        inputRef: inputRef
+        ref: inputRef,
+        useParsedValue: true
       });
     case PropertyType.STRING:
       return jsx(StringValueField$1, {
@@ -3808,7 +3774,7 @@ const PropertyWidget = ({
     case PropertyType.ANY:
       return jsx(JsonEditor$1, {
         name: name,
-        inputRef: inputRef
+        ref: inputRef
       });
     case PropertyType.ENTITY:
       return jsx(DefinitionFiller, {
@@ -3834,7 +3800,10 @@ const usePropertyFiller = ({
 }) => {
   const valueLabel = useMemo(() => label ? `${label} (value)` : `${property.name} (value)`, [label, property]);
   const fillOptionLabel = useMemo(() => label ? `${label} (widget)` : `${property.name} (widget)`, [label, property]);
-  const propertyType = useMemo(() => typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value'], [property]);
+  const propertyType = useMemo(() => {
+    var _a;
+    return typeof property.propertyType === 'string' ? property.propertyType : (_a = property['propertyType']) === null || _a === void 0 ? void 0 : _a['value'];
+  }, [property]);
   const [fillOption, setFillOption] = useState(null);
   const fillOptions = useMemo(() => _multipleOptions ? getMultiplePropertyFillOptions({
     propertyType,
@@ -3845,6 +3814,29 @@ const usePropertyFiller = ({
     required: _required,
     useExpression: _useExpression
   }), [_useExpression, _required, propertyType, _multipleOptions]);
+  const defaultProperyValue = useMemo(() => {
+    switch (propertyType) {
+      case PropertyType.STRING:
+      case PropertyType.DATE:
+      case PropertyType.TIME:
+      case PropertyType.DATE_TIME:
+      case PropertyType.ANY:
+        return '';
+      case PropertyType.JSON:
+        return {};
+      case PropertyType.BOOLEAN:
+        return true;
+      case PropertyType.INTEGER:
+      case PropertyType.BIG_DECIMAL:
+      case PropertyType.BIG_INTEGER:
+      case PropertyType.DOUBLE:
+      case PropertyType.LONG:
+      case PropertyType.FLOAT:
+        return 0;
+      default:
+        return {};
+    }
+  }, [propertyType]);
   useEffect(() => {
     if (!fillOption) {
       if (isPropertyValueEmpty(value) && (fillOptions === null || fillOptions === void 0 ? void 0 : fillOptions.length)) {
@@ -3868,7 +3860,8 @@ const usePropertyFiller = ({
     fillOptionLabel,
     fillOption,
     fillOptions,
-    setFillOption
+    setFillOption,
+    defaultProperyValue
   };
 };
 var usePropertyFiller$1 = usePropertyFiller;
@@ -3898,7 +3891,8 @@ const PropertyFiller = ({
   const {
     field: {
       ref,
-      onChange
+      onChange,
+      value
     },
     fieldState: {
       error,
@@ -3911,17 +3905,15 @@ const PropertyFiller = ({
       required
     }
   });
-  const value = useWatch({
-    control,
-    name
-  });
+  // const value = useWatch({ control, name });
   const {
     propertyType,
     valueLabel,
     fillOptionLabel,
     fillOption,
     fillOptions,
-    setFillOption
+    setFillOption,
+    defaultProperyValue
   } = usePropertyFiller$1({
     value,
     property,
@@ -3943,10 +3935,10 @@ const PropertyFiller = ({
         try {
           onChange(JSON.stringify(definitionValue, null, '\t'));
         } catch (error) {
-          console.log('Stringify failed');
+          console.log('Stringify failed', error);
         }
       } else {
-        setValue(name, null);
+        setValue(name, defaultProperyValue);
       }
     } else if (selectedType === 'expression' || selectedType === 'string') {
       onChange('');
@@ -3971,12 +3963,12 @@ const PropertyFiller = ({
       }
     }
     clearErrors();
-  }, [name, clearErrors, value, setFillOption, onChange, fillOption, propertyType, setValue]);
+  }, [name, defaultProperyValue, clearErrors, value, setFillOption, onChange, fillOption, propertyType, setValue]);
   useEffect(() => {
     if (value === undefined) {
       onChange(null);
     }
-  }, [value, onChange]);
+  }, [value, onChange, defaultProperyValue]);
   return jsxs(Grid$1, Object.assign({
     xs: 12
   }, {
@@ -4015,13 +4007,21 @@ const PropertyFiller = ({
       }))
     })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(JsonEditor$1, {
       name: name,
-      inputRef: ref
+      ref: ref
     }) : jsx(ControlInput, {
       control: control,
       name: name,
       label: valueLabel,
       required: true,
-      hideErrorMessage: true
+      hideErrorMessage: true,
+      onChange: e => {
+        try {
+          onChange(JSON.parse(e.target.value));
+        } catch (err) {
+          onChange(e.target.value);
+        }
+      },
+      value: typeof value === 'string' ? value : JSON.stringify(value)
     })), fillOption === 'string' && jsx(ControlInput, {
       control: control,
       name: name,
@@ -4030,7 +4030,7 @@ const PropertyFiller = ({
       hideErrorMessage: true
     }), fillOption === 'json_notvalid' && jsx(JsonEditor$1, {
       name: name,
-      inputRef: ref
+      ref: ref
     }), fillOption === 'widget' && jsx(PropertyWidget, {
       property: property,
       name: name,
@@ -4041,8 +4041,8 @@ const PropertyFiller = ({
     }), fillOption === 'dem_builder' && jsx(CreateDefinition, {
       title: "JSON",
       definitionFieldName: name
-    }), error && jsx(Typography, Object.assign({
-      color: "secondary"
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
     }, {
       children: error.message
     }))]
@@ -4061,18 +4061,6 @@ const MultiplePropertyWidget = ({
     setValue,
     clearErrors
   } = useFormContext();
-  // const controller = useController({
-  //   control,
-  //   name,
-  // rules: {
-  //   validate: (val) => {
-  //     if (!val || (Array.isArray(val) && !val.length)) {
-  //       return 'Please, fill array';
-  //     }
-  //     return true;
-  //   },
-  // },
-  // });
   const values = useWatch({
     control,
     name
@@ -4081,7 +4069,7 @@ const MultiplePropertyWidget = ({
     if (values && Array.isArray(values)) {
       setValue(`${name}.${values.length}`, null);
     } else {
-      setValue(name, [null]);
+      setValue(name, []);
     }
     clearErrors(name);
   }, [name, values, setValue, clearErrors]);
@@ -4094,7 +4082,7 @@ const MultiplePropertyWidget = ({
     direction: "column",
     xs: 12
   }, {
-    children: [values && Array.isArray(values) ? values.map((value, index) => jsx(Grid$1, Object.assign({
+    children: [Array.isArray(values) && values.length ? values.map((value, index) => jsx(Grid$1, Object.assign({
       xs: 12
     }, {
       children: jsxs(Box, Object.assign({
@@ -4150,7 +4138,8 @@ const MultiplePropertyFiller = ({
 }) => {
   const {
     control,
-    clearErrors
+    clearErrors,
+    setValue
   } = useFormContext();
   const {
     field: {
@@ -4164,11 +4153,10 @@ const MultiplePropertyFiller = ({
   } = useController({
     control,
     name,
+    defaultValue: [],
     rules: {
       validate: val => {
-        if (required && !val) {
-          return 'Please, fill this field';
-        }
+        if (required && !val) return 'Please, fill this field';
         return true;
       }
     }
@@ -4196,7 +4184,7 @@ const MultiplePropertyFiller = ({
   const handleFillOptionChange = event => {
     const selectedType = event.target.value;
     if (selectedType === 'null') {
-      onChange(null);
+      setValue(name, null);
     } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
       onChange('');
     } else if (selectedType === 'widget') {
@@ -4205,11 +4193,11 @@ const MultiplePropertyFiller = ({
     setFillOption(selectedType);
     clearErrors(name);
   };
-  useEffect(() => {
-    if (value === undefined) {
-      onChange(null);
-    }
-  }, [value, onChange]);
+  // useEffect(() => {
+  //   if (value === undefined) {
+  //     onChange([]);
+  //   } 
+  // }, [value, property, onChange]);
   return jsxs(Grid$1, {
     children: [title && jsx(Box, Object.assign({
       mb: 2
@@ -4246,7 +4234,7 @@ const MultiplePropertyFiller = ({
       }))
     })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(JsonEditor$1, {
       name: name,
-      inputRef: ref
+      ref: ref
     }) : jsx(ControlInput, {
       required: true,
       hideErrorMessage: true,
@@ -4256,7 +4244,7 @@ const MultiplePropertyFiller = ({
     })), fillOption === 'json_valid' && jsx(JsonEditor$1, {
       validate: true,
       name: name,
-      inputRef: ref,
+      ref: ref,
       useParsedValue: true
     }), fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
       property: property,
@@ -4264,8 +4252,8 @@ const MultiplePropertyFiller = ({
       useExpression: useExpression,
       required: required,
       label: label
-    }), error && jsx(Typography, Object.assign({
-      color: "secondary"
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
     }, {
       children: error.message
     }))]
@@ -5334,7 +5322,8 @@ const DefinitionFiller = ({
   const stepperData = useMemo(() => {
     if (properties) {
       return properties.map(property => {
-        const propertyType = typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value'];
+        var _a;
+        const propertyType = typeof property.propertyType === 'string' ? property.propertyType : (_a = property['propertyType']) === null || _a === void 0 ? void 0 : _a['value'];
         return {
           label: jsxs(Box, Object.assign({
             display: "flex",

package/package.json

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

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

@@ -13,6 +13,7 @@ export interface ControlAceEditorProps {
     validateJson?: boolean;
     fontSize?: number;
     validate?: boolean;
+    hideErrorMessage?: boolean;
     parseValue?: boolean;
     [key: string]: unknown;
 }

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { RefCallBack } from 'react-hook-form';
+import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 type Props = {
     useParsedValue?: boolean;
     validate?: boolean;
     name: string;
-    inputRef: RefCallBack;
 };
-declare const JsonEditor: ({ validate, name, inputRef, useParsedValue }: Props) => JSX.Element;
+declare const JsonEditor: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ReactCodeMirrorRef>>;
 export default JsonEditor;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PropertyFillType, PropertyUnion } from '../../../interfaces';
+import { PropertyFillType, PropertyUnion, PropertyType } from '../../../interfaces';
 type Props = {
     value: unknown;
     property: PropertyUnion;
@@ -10,7 +10,7 @@ type Props = {
     multipleOptions?: boolean;
 };
 declare const usePropertyFiller: ({ value, property, label, isDirty, required, useExpression, multipleOptions, }: Props) => {
-    propertyType: import("../../../interfaces").PropertyType;
+    propertyType: PropertyType;
     valueLabel: string;
     fillOptionLabel: string;
     fillOption: PropertyFillType;
@@ -20,5 +20,6 @@ declare const usePropertyFiller: ({ value, property, label, isDirty, required, u
         sortOrder: number;
     }[];
     setFillOption: import("react").Dispatch<import("react").SetStateAction<PropertyFillType>>;
+    defaultProperyValue: {};
 };
 export default usePropertyFiller;