@dartech/arsenal-ui 1.3.64 → 1.3.65

package/index.js

@@ -129,7 +129,8 @@ var RoundingMode;
  */
 const Loader = ({
   transparent,
-  position
+  position,
+  bgcolor
 }) => {
   return jsx(Box, Object.assign({
     position: position !== null && position !== void 0 ? position : 'absolute',
@@ -140,7 +141,7 @@ const Loader = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    bgcolor: transparent ? 'none' : 'rgba(255, 255, 255, .3)',
+    bgcolor: bgcolor || (transparent ? 'none' : 'rgba(255, 255, 255, .3)'),
     zIndex: 10
   }, {
     children: jsx(CircularProgress, {})
@@ -1209,27 +1210,62 @@ const deepParseJson = value => {
 //   return obj;
 // };
 
-const JsonView = ({
+const JsonView = /*#__PURE__*/forwardRef(({
   value,
   height: _height = '200px',
   fontSize: _fontSize = 16
-}) => {
-  return jsx(CodeMirror, {
-    readOnly: true,
-    width: "100%",
-    value: typeof value === 'string' ? value : JSON.stringify(value, null, 2),
-    height: _height,
-    basicSetup: {
-      autocompletion: true,
-      history: true
-    },
-    extensions: [langs.json()],
-    style: {
-      fontSize: _fontSize,
-      width: '100%'
+}, ref) => {
+  const [loading, setLoading] = useState(true);
+  const onCreateEditor = useCallback(view => {
+    const onScroll = e => {
+      if (e.target.scrollTop === 0) {
+        setLoading(false);
+        view.scrollDOM.removeEventListener('scroll', onScroll);
+      }
+    };
+    if (view.scrollDOM.scrollHeight > 38300) {
+      setLoading(true);
+      view.scrollDOM.addEventListener('scroll', onScroll);
+      view.scrollDOM.scrollTo(0, view.scrollDOM.scrollHeight - 300);
+      setTimeout(() => {
+        view.scrollDOM.scrollTo({
+          top: view.scrollDOM.scrollHeight,
+          behavior: 'smooth'
+        });
+      }, 300);
+      setTimeout(() => {
+        view.scrollDOM.scrollTo(0, 0);
+      }, 500);
+    } else {
+      setLoading(false);
     }
-  });
-};
+  }, []);
+  return jsxs(Box, Object.assign({
+    position: "relative"
+  }, {
+    children: [loading && jsx(Loader, {
+      bgcolor: "#fff"
+    }), jsx(CodeMirror, {
+      ref: ref,
+      readOnly: true,
+      width: "100%",
+      value: typeof value === 'string' ? value : JSON.stringify(value, null, 2),
+      height: _height,
+      basicSetup: {
+        autocompletion: true,
+        history: true,
+        foldGutter: true
+        // bracketMatching: true
+      },
+      onCreateEditor: onCreateEditor,
+      extensions: [langs.json()],
+      style: {
+        fontSize: _fontSize,
+        width: '100%'
+      }
+    })]
+  }));
+});
 
 const JsonModalView = ({
   open,
@@ -1237,6 +1273,13 @@ const JsonModalView = ({
   value,
   jsonViewProps
 }) => {
+  const editorRef = useRef();
+  // useEffect(() => {
+  //   if (editorRef.current) {
+  //     console.log(editorRef.current);
+  //     editorRef.current.editor.scrollTop = 1000;
+  //   }
+  // }, [open, editorRef]);
   return jsxs(Dialog, Object.assign({
     disableEscapeKeyDown: true,
     open: open,
@@ -1251,7 +1294,9 @@ const JsonModalView = ({
     children: [jsx(DialogContent, {
       children: jsx(JsonView, Object.assign({
         value: value
-      }, jsonViewProps))
+      }, jsonViewProps, {
+        ref: editorRef
+      }))
     }), jsxs(DialogActions, {
       children: [jsx(CopyButton, {
         copyText: value

package/package.json

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

package/src/lib/JsonView/JsonView.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 type Props = {
     value: unknown;
     height?: string;
     fontSize?: number;
 };
-export declare const JsonView: ({ value, height, fontSize }: Props) => JSX.Element;
+export declare const JsonView: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ReactCodeMirrorRef>>;
 export {};

package/src/lib/Loader/Loader.d.ts

@@ -12,10 +12,11 @@ export interface LoaderProps {
      * CSS `position` property. Default: `absolute`
      */
     position?: 'absolute' | 'relative' | 'fixed';
+    bgcolor?: string;
 }
 /**
  * Loader screen component. Used in the data loading process
  * @category Common UI components
  */
-export declare const Loader: ({ transparent, position }: LoaderProps) => JSX.Element;
+export declare const Loader: ({ transparent, position, bgcolor }: LoaderProps) => JSX.Element;
 export default Loader;