feat(form): Add ExcelPreviewWidget and ExcelPreview components.

schedula/utils/form/react/package.json

@@ -18,7 +18,6 @@
     "ahooks": "^3.7.10",
     "ajv-i18n": "^4.2.0",
     "ant-design-draggable-modal": "git+https://github.com/thunkable/ant-design-draggable-modal-v5.git",
-    "react-uid": "^2.3.3",
     "antd": "^5.15.3",
     "antd-img-crop": "^4.21.0",
     "classnames": "^2.5.1",
@@ -50,15 +49,15 @@
     "react": "^18.2.0",
     "react-antdown": "^1.0.11",
     "react-csv": "^2.2.2",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-grid-layout": "^1.4.4",
     "react-markdown": "^9.0.1",
     "react-plotly.js": "^2.6.0",
     "react-resize-detector": "^10.0.1",
-    "remark-gfm": "^4.0.0"
+    "react-uid": "^2.3.3",
+    "remark-gfm": "^4.0.0",
+    "xlsx-preview": "^1.0.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.9",

schedula/utils/form/react/public/forms/index-schema.json

@@ -3,6 +3,11 @@
   "title": "Schedula Form",
   "type": "object",
   "properties": {
+    "xlsx": {
+      "title": "File",
+      "type": "string",
+      "format": "data-url"
+    },
     "number": {
       "type": "number",
       "minimum": 0,

schedula/utils/form/react/public/forms/index-ui.json

@@ -60,6 +60,10 @@
           "label": "LAYOUT",
           "key": 2
         },
+        {
+          "label": "EXCEL",
+          "key": 3
+        },
         {
           "label": "OUTPUT",
           "children": [
@@ -1133,6 +1137,20 @@
             }
           }
         ]
+      },
+      {
+        "component": "div",
+        "children": [
+          {
+            "path": "xlsx"
+          },
+          {
+            "path": "xlsx",
+            "uiSchema": {
+              "ui:widget": "ExcelPreviewWidget"
+            }
+          }
+        ]
       }
     ]
   }

schedula/utils/form/react/src/core/components/ExcelPreview/index.js

@@ -0,0 +1,43 @@
+import {useEffect, useState} from "react";
+import xlsxPreview from 'xlsx-preview';
+
+
+function dataURLtoFile(dataurl) {
+    let arr = dataurl.split(','),
+        mime = arr[0].match(/:(.*?);/)[1],
+        filename = decodeURIComponent(arr[0].match(/;?name=(.*?);/)[1]),
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {type: mime});
+}
+
+
+export default function ExcelPreview({children, render, uri, ...props}) {
+    const [url, setUrl] = useState(null)
+    useEffect(() => {
+        if (uri)
+            (async () => {
+                const result = await xlsxPreview.xlsx2Html(dataURLtoFile(uri), {
+                    output: 'arrayBuffer',
+                    minimumRows: 50,
+                    minimumCols: 30,
+                    separateSheets: false
+                });
+                const url = URL.createObjectURL(new Blob([result], {
+                    type: 'text/html'
+                }));
+                setUrl(url);
+            })();
+    }, [uri]);
+    return <>{url ? <object
+        style={{height: '100%', width: '100%'}}
+        className="res-obj"
+        type="text/html" data={url}
+    /> : null}</>
+
+}

schedula/utils/form/react/src/core/widgets/ExcelPreviewWidget/core.js

@@ -0,0 +1,5 @@
+import ExcelPreview from '../../components/ExcelPreview'
+
+export default function ExcelPreviewWidget({value, options, ...props}) {
+    return <ExcelPreview uri={value} {...options}/>
+}

schedula/utils/form/react/src/core/widgets/ExcelPreviewWidget/index.js

@@ -0,0 +1,7 @@
+import React, {Suspense} from "react";
+
+const Field = React.lazy(() => import('./core'));
+
+export default function ExcelPreviewWidget(props) {
+    return <Suspense key={props.key}><Field{...props}/></Suspense>
+}

schedula/utils/form/react/src/core/widgets/index.js

@@ -1,8 +1,10 @@
+import ExcelPreviewWidget from './ExcelPreviewWidget'
 import ReCAPTCHAWidget from './ReCAPTCHA'
 import ValueWidget from './ValueWidget'
 
 export function generateWidgets() {
     return {
+        ExcelPreviewWidget,
         ReCAPTCHAWidget,
         ValueWidget
     }