@dartech/arsenal-ui 1.4.20 → 1.4.22

package/index.js

@@ -810,6 +810,7 @@ const ControlAutocomplete = _a => {
 };
 
 function ControlQueryAutocomplete(_a) {
+  var _b;
   var {
       name,
       label,
@@ -831,7 +832,7 @@ function ControlQueryAutocomplete(_a) {
       requiredErrorText = ''
     } = _a,
     autocompleteProps = __rest(_a, ["name", "label", "control", "required", "searchBy", "labelKey", "multiple", "disabled", "valueKey", "sortBy", "hideErrorMessage", "disableCloseOnSelect", "textFieldProps", "onChange", "queryFunction", "validate", "itemQueryFunction", "requiredErrorText"]);
-  const _b = useController({
+  const _c = useController({
       control,
       name,
       defaultValue: multiple ? [] : null,
@@ -840,20 +841,19 @@ function ControlQueryAutocomplete(_a) {
         validate
       }
     }),
-    _c = _b.field,
+    _d = _c.field,
     {
       ref,
       onChange: setFieldValue,
       value: formValue
-    } = _c,
-    fieldProps = __rest(_c, ["ref", "onChange", "value"]),
+    } = _d,
+    fieldProps = __rest(_d, ["ref", "onChange", "value"]),
     {
       fieldState: {
         error,
         isDirty
       }
-    } = _b;
-  // const formValue = useWatch({ control, name, defaultValue:  });
+    } = _c;
   const {
     getOptionLabel,
     isOptionEqualToValue,
@@ -865,13 +865,25 @@ function ControlQueryAutocomplete(_a) {
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [searchValue, setSearchValue] = useState('');
-  const [totalItems, setTotalItems] = useState(0);
   const [page, setPage] = useState(0);
-  const [options, setOptions] = useState([]);
+  const {
+    data,
+    isFetching
+  } = useQuery(['options', page, searchValue], () => {
+    const params = qs.parse(Object.assign({
+      page: `${page}`,
+      size: '20',
+      sort: sortBy
+    }, searchValue ? {
+      [searchBy]: searchValue
+    } : {}), {
+      ignoreQueryPrefix: true
+    });
+    return queryFunction(params);
+  });
   const debouncedChange = useDebounce(val => {
     setPage(0);
     setSearchValue(val);
-    setOptions([]);
   }, 500);
   const handleInputChange = useCallback((_, value) => {
     setInputValue(value);
@@ -897,10 +909,10 @@ function ControlQueryAutocomplete(_a) {
   }, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
   const handleOnScroll = useCallback(event => {
     const listboxNode = event.currentTarget;
-    if (listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 && options.length < totalItems) {
+    if (listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 && (data === null || data === void 0 ? void 0 : data.collection.length) < (data === null || data === void 0 ? void 0 : data.totalItems)) {
       setPage(page => page + 1);
     }
-  }, [totalItems, options]);
+  }, [data]);
   const handleOpen = () => {
     setOpen(true);
   };
@@ -908,33 +920,12 @@ function ControlQueryAutocomplete(_a) {
     setOpen(false);
     setSearchValue('');
   };
-  const {
-    data,
-    isFetching
-  } = useQuery(['options', page, searchValue], () => {
-    const params = qs.parse(Object.assign({
-      page: `${page}`,
-      size: '20',
-      sort: sortBy
-    }, searchValue ? {
-      [searchBy]: searchValue
-    } : {}), {
-      ignoreQueryPrefix: true
-    });
-    return queryFunction(params);
-  });
-  useEffect(() => {
-    if (data) {
-      setOptions(prevOptions => [...prevOptions, ...data.collection]);
-      setTotalItems(data.totalItems);
-    }
-  }, [data]);
   return jsx(Autocomplete, Object.assign({}, fieldProps, {
     fullWidth: true,
     disablePortal: true,
     size: "small",
     readOnly: disabled,
-    options: options,
+    options: (_b = data === null || data === void 0 ? void 0 : data.collection) !== null && _b !== void 0 ? _b : [],
     multiple: multiple,
     getOptionLabel: getOptionLabel,
     isOptionEqualToValue: isOptionEqualToValue,
@@ -1066,9 +1057,10 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
       fontSize = 16,
       validate = true,
       parseValue,
-      requiredErrorText = ''
+      requiredErrorText = '',
+      useCleanValue
     } = _a,
-    otherProps = __rest(_a, ["control", "name", "mode", "label", "width", "height", "readOnly", "required", "validateJson", "hideErrorMessage", "fontSize", "validate", "parseValue", "requiredErrorText"]);
+    otherProps = __rest(_a, ["control", "name", "mode", "label", "width", "height", "readOnly", "required", "validateJson", "hideErrorMessage", "fontSize", "validate", "parseValue", "requiredErrorText", "useCleanValue"]);
   const _b = useController({
       control,
       name,
@@ -1106,6 +1098,16 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
     javascript: [langs.javascript()],
     python: [langs.python()]
   }), []);
+  const safeValue = useMemo(() => {
+    if (mode === 'json' && typeof value !== 'string') {
+      if (value === null) return '';
+      return useCleanValue ? JSON.stringify(value, null, 2).replace(/\\"/g, '') : JSON.stringify(value, null, 2);
+    }
+    if (typeof value === 'string') {
+      return useCleanValue ? value.replace(/\\"/g, '') : value;
+    }
+    return value;
+  }, [value, useCleanValue, mode]);
   const handleChange = useCallback(value => {
     if (parseValue) {
       try {
@@ -1157,7 +1159,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
           isolation: 'isolate'
         },
         readOnly: readOnly,
-        value: mode === 'json' && typeof value !== 'string' ? value === null ? '' : JSON.stringify(value, null, 2) : value,
+        value: safeValue,
         onChange: handleChange,
         extensions: extensions[mode]
       }, otherProps)), error && !hideErrorMessage && jsx(FormHelperText, Object.assign({
@@ -6035,7 +6037,8 @@ const PropertyFiller = ({
       control: control,
       label: valueLabel,
       parseValue: true,
-      hideErrorMessage: true
+      hideErrorMessage: true,
+      useCleanValue: true
     }) : jsx(ControlInput, {
       control: control,
       name: name,
@@ -6294,7 +6297,8 @@ const MultiplePropertyFiller = ({
       control: control,
       label: valueLabel,
       parseValue: true,
-      hideErrorMessage: true
+      hideErrorMessage: true,
+      useCleanValue: true
     }) : jsx(ControlInput, {
       required: true,
       hideErrorMessage: true,

package/package.json

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

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

@@ -17,6 +17,7 @@ export interface ControlAceEditorProps {
     parseValue?: boolean;
     requiredErrorText?: string;
     [key: string]: unknown;
+    useCleanValue?: boolean;
 }
 export declare const ControlAceEditor: import("react").ForwardRefExoticComponent<Omit<ControlAceEditorProps, "ref"> & import("react").RefAttributes<ReactCodeMirrorRef>>;
 export default ControlAceEditor;