UNPKG

@nocobase/plugin-block-lowcode

Version:

A block for executing custom JavaScript code and dynamically updating HTML content.

10 lines (9 loc) • 9.98 kB
1
2
3
4
5
6
7
8
9
10
/** * This file is part of the NocoBase (R) project. * Copyright (c) 2020-2024 NocoBase Co., Ltd. * Authors: NocoBase Team. * * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. * For more information, please refer to: https://www.nocobase.com/agreement. */ "use strict";(self.webpackChunk_nocobase_plugin_block_lowcode=self.webpackChunk_nocobase_plugin_block_lowcode||[]).push([["923"],{144:function(e,t,n){n.r(t),n.d(t,{CodeEditor:function(){return g},default:function(){return b}});var o=n(505),r=n(156),a=n.n(r),i=n(490),s=n(402),l=n(779),c=n(55),p=n(266),d=n(586),u=n(990),h=[{label:"ctx",type:"class",info:"Running context with all available APIs and utilities",detail:"FlowRuntimeContext",boost:110},{label:"ctx.api",type:"class",info:"APIClient instance for making HTTP requests.",detail:"APIClient",boost:100,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:t.label}})}},{label:"ctx.api.request(options)",type:"method",info:"Make an HTTP request using the APIClient instance.",detail:"Promise<any>",boost:95,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:'await ctx.api.request({\n url: "",\n method: "get",\n params: {}\n})'}})}},{label:"ctx.element",type:"property",info:"Represents the current HTML element in the runtime context",detail:"HTMLElement",boost:110,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:t.label}})}},{label:"ctx.element.innerHTML",type:"property",info:"Set the inner HTML content of the current HTML element in the runtime context.",detail:"string",boost:90,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:"ctx.element.innerHTML = `<h1>Hello, NocoBase!</h1>`;"}})}},{label:"Basic HTML Template",type:"snippet",info:"Insert a basic HTML structure with padding and sample content.",detail:"HTML Snippet",boost:85,apply:'ctx.element.innerHTML = `\n <div style="padding: 20px;">\n <h2>Hello World</h2>\n <p>This is a basic HTML template.</p>\n </div>\n`;'},{label:"API Response Snippet",type:"snippet",info:"Fetch data from an API and display it as formatted JSON in the current HTML element.",detail:"API Request and Display",boost:85,apply:"const response = await ctx.api.request({\n url: '/users',\n method: 'get',\n params: { page: 1, pageSize: 10 }\n});\n\nctx.element.innerHTML = `\n <pre>${JSON.stringify(response.data, null, 2)}<pre/>\n`"},{label:"ECharts Example Snippet",type:"snippet",info:"Insert an ECharts example with random data and responsive resizing.",detail:"ECharts Snippet",boost:85,apply:"ctx.element.style.height = '400px';\nconst echarts = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js');\nif (!echarts) {\n return;\n}\nconst chart = echarts.init(ctx.element);\n// Generate random data\nconst categories = ['A', 'B', 'C', 'D', 'E', 'F'];\nconst randomData = categories.map(() => Math.floor(Math.random() * 50) + 1);\nconst option = {\n title: { text: 'ECharts Example (Random Data)' },\n tooltip: {},\n xAxis: { data: categories },\n yAxis: {},\n series: [{ name: 'Sales', type: 'bar', data: randomData }],\n};\nchart.setOption(option);\nchart.resize();\nwindow.addEventListener('resize', () => chart.resize());"},{label:"I18n Example Snippet",type:"snippet",info:"Insert an example for internationalization using ctx.i18n.",detail:"I18n Snippet",boost:85,apply:"const zhCN = {\n hello: \"你好\",\n welcome_user: \"欢迎，{{user}}！\"\n};\nconst enUS = {\n hello: \"Hello\",\n welcome_user: \"Welcome, {{user}}!\"\n};\n\n// Add Chinese resource bundle\nctx.i18n.addResourceBundle('zh-CN', 'ns1', zhCN, true, true);\n// Add English resource bundle\nctx.i18n.addResourceBundle('en-US', 'ns1', enUS, true, true);\n\n// Render localized content\nctx.element.innerHTML = ctx.t('welcome_user', { user: ctx.auth.user.nickname, ns: 'ns1' });"},{label:"ctx.i18n",type:"class",info:"An instance of i18next for managing internationalization.",detail:"i18next",boost:100,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:t.label}})}},{label:"ctx.t(text, options)",type:"method",info:"Translate a given text key using the provided options.",detail:"string",boost:95,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:'ctx.t("key", { ns: "namespace" })'}})}},{label:"ctx.element.querySelector(selector)",type:"method",info:"Find the first descendant element that matches the specified CSS selector.",detail:"HTMLElement | null",boost:85,apply:function(e,t,n,o){e.dispatch({changes:{from:n,to:o,insert:'const child = ctx.element.querySelector(".child-class");'}})}},{label:"Resource Example Snippet",type:"snippet",info:"Use a resource to fetch data and display it in the current HTML element.",detail:"Resource Snippet",boost:85,apply:"ctx.useResource('SingleRecordResource');\nconst resource = ctx.resource;\nresource.setDataSourceKey('main');\nresource.setResourceName('users');\nawait resource.refresh();\nctx.element.innerHTML = `\n <pre>${JSON.stringify(ctx.resource.getData(), null, 2)}</pre>\n`;"}],f=n(840);function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=Array(t);n<t;n++)o[n]=e[n];return o}var g=(0,o.connect)(function(e){var t=e.value,n=void 0===t?"":t,o=e.onChange,g=e.placeholder,b=void 0===g?"":g,x=e.height,y=void 0===x?"300px":x,v=e.minHeight,w=e.theme,S=void 0===w?"light":w,k=e.readonly,L=void 0!==k&&k,C=e.enableLinter,H=void 0!==C&&C,T=(0,r.useRef)(null),R=(0,r.useRef)(null);return(0,r.useEffect)(function(){if(T.current){var e,t=[d.Xy,(0,s.eJ)(),(0,i.ys)({override:[function(e){var t=e.matchBefore(/[a-zA-Z_][\w.]*/);return t&&(t.from!==t.to||e.explicit)?{from:t.from,to:t.to,options:h}:null}],closeOnBlur:!1,activateOnTyping:!0})].concat(function(e){if(Array.isArray(e))return m(e)}(e=H?[(0,l.Q2)(),(0,l.ir)(function(e){var t=[],n=e.state.doc.toString();if(!n.trim())return t;try{f.Qc(n,{ecmaVersion:2022,sourceType:"script",allowAwaitOutsideFunction:!0,locations:!0})}catch(e){var o=0,r=n.length;e.loc?r=(o=n.split("\n").slice(0,e.loc.line-1).join("\n").length+ +(e.loc.line>1)+e.loc.column)+1:void 0!==e.pos&&(r=(o=e.pos)+1),t.push({from:o,to:r,severity:"error",message:"Syntax error: ".concat(e.message),actions:[]})}return t})]:[])||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return m(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return m(e,t)}}(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(),[u.tk.updateListener.of(function(e){e.docChanged&&o&&!L&&o(e.state.doc.toString())}),u.tk.theme({"&":function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){var o;o=n[t],t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o})}return e}({},v?{minHeight:"string"==typeof v?v:"".concat(v,"px")}:{height:"string"==typeof y?y:"".concat(y,"px")}),".cm-editor":{height:"100%"},".cm-scroller":{fontFamily:'"Fira Code", "Monaco", "Menlo", "Ubuntu Mono", monospace'},".cm-tooltip-autocomplete":{border:"1px solid #d9d9d9",borderRadius:"4px",boxShadow:"0 2px 8px rgba(0,0,0,0.1)"},".cm-diagnostic":{padding:"4px 8px",borderRadius:"4px",border:"1px solid #d9d9d9",backgroundColor:"#fff",boxShadow:"0 2px 8px rgba(0,0,0,0.1)",fontSize:"12px",maxWidth:"300px"},".cm-diagnostic-error":{borderLeftColor:"#ff4d4f",borderLeftWidth:"3px"},".cm-diagnostic-warning":{borderLeftColor:"#faad14",borderLeftWidth:"3px"},".cm-diagnostic-info":{borderLeftColor:"#1890ff",borderLeftWidth:"3px"},".cm-lintRange-error":{backgroundImage:'url("data:image/svg+xml;charset=utf8,<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"6\\" height=\\"3\\"><path d=\\"m0 3 l2 -2 l1 0 l2 2 l1 0\\" stroke=\\"%23ff4d4f\\" fill=\\"none\\" stroke-width=\\".7\\"/></svg>")',backgroundRepeat:"repeat-x",backgroundPosition:"left bottom"},".cm-lintRange-warning":{backgroundImage:'url("data:image/svg+xml;charset=utf8,<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"6\\" height=\\"3\\"><path d=\\"m0 3 l2 -2 l1 0 l2 2 l1 0\\" stroke=\\"%23faad14\\" fill=\\"none\\" stroke-width=\\".7\\"/></svg>")',backgroundRepeat:"repeat-x",backgroundPosition:"left bottom"},".cm-lintRange-info":{backgroundImage:'url("data:image/svg+xml;charset=utf8,<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"6\\" height=\\"3\\"><path d=\\"m0 3 l2 -2 l1 0 l2 2 l1 0\\" stroke=\\"%231890ff\\" fill=\\"none\\" stroke-width=\\".7\\"/></svg>")',backgroundRepeat:"repeat-x",backgroundPosition:"left bottom"}})]);"dark"===S&&t.push(p.vk),b&&t.push(u.tk.domEventHandlers({focus:function(e,t){0===t.state.doc.length&&t.dispatch({changes:{from:0,insert:""},selection:{anchor:0}})}}));var r=c.yy.create({doc:n,extensions:t}),a=new u.tk({state:r,parent:T.current});return R.current=a,function(){a.destroy(),R.current=null}}},[S,y,v,b,L,H]),(0,r.useEffect)(function(){R.current&&R.current.state.doc.toString()!==n&&R.current.dispatch({changes:{from:0,to:R.current.state.doc.length,insert:n}})},[n]),a().createElement("div",{style:{border:"1px solid #d9d9d9",borderRadius:"6px",overflow:"hidden"}},a().createElement("div",{ref:T}),b&&!n&&a().createElement("div",{style:{position:"absolute",top:"12px",left:"12px",color:"#999",pointerEvents:"none",fontSize:"14px"}},b))},(0,o.mapProps)(function(e,t){return{value:e.value,readonly:e.readonly,enableLinter:e.enableLinter,onChange:e.onChange,placeholder:e.placeholder,height:e.height,minHeight:e.minHeight,theme:e.theme}})),b=g}}]);