外观
第75章—低代码编辑器：自定义JS
前面实现了内置的几个动作，这节来实现下自定义 JS。
比如 amis：
它就支持通过代码来自定义动作。
而且自定义 JS 可以拿到 doAction 方法来执行其他动作：
可以通过 context 拿到组件信息。
我们也来实现下。
创建 Setting/actions/CustomJS.tsx
import { useState } from "react";
import { useComponetsStore } from "../../../stores/components";
import MonacoEditor, { OnMount } from '@monaco-editor/react'
export interface CustomJSConfig {
type: 'customJS',
code: string
}
export interface CustomJSProps {
defaultValue?: string
onChange?: (config: CustomJSConfig) => void
}
export function CustomJS(props: CustomJSProps) {
const { defaultValue, onChange } = props;
const { curComponentId } = useComponetsStore();
const [value, setValue] = useState(defaultValue);
function codeChange(value?: string) {
if (!curComponentId) return;
setValue(value);
onChange?.({
type: 'customJS',
code: value!
})
}
const handleEditorMount: OnMount = (editor, monaco) => {
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
editor.getAction('editor.action.formatDocument')?.run()
});
}
return <div className='mt-[40px]'>
<div className='flex items-start gap-[20px]'>
<div>自定义 JS</div>
<div>
<MonacoEditor
width={'600px'}
height={'400px'}
path='action.js'
language='javascript'
onMount={handleEditorMount}
onChange={codeChange}
value={value}
options={
{
fontSize: 14,
scrollBeyondLastLine: false,
minimap: {
enabled: false,
},
scrollbar: {
verticalScrollbarSize: 6,
horizontalScrollbarSize: 6,
},
}
}
/>
</div>
</div>
</div>
}和其他动作表单不同的是这里用 monaco editor。
然后在 ActionModal 里用一下：
切换自定义 JS 的 tab 时，渲染 CustomJS 组件。
顺便把类型也改一下，加上 CustomJSConfig 的类型
import { Modal, Segmented } from "antd";
import { useState } from "react";
import { GoToLink, GoToLinkConfig } from "./actions/GoToLink";
import { ShowMessage, ShowMessageConfig } from "./actions/ShowMessage";
import { CustomJS, CustomJSConfig } from "./actions/CustomJS";
export interface ActionModalProps {
visible: boolean
handleOk: (config?: ActionConfig) => void
handleCancel: () => void
}
export type ActionConfig = GoToLinkConfig | ShowMessageConfig | CustomJSConfig;
export function ActionModal(props: ActionModalProps) {
const {
visible,
handleOk,
handleCancel
} = props;
const [key, setKey] = useState<string>('访问链接');
const [curConfig, setCurConfig] = useState<ActionConfig>();
return <Modal
title="事件动作配置"
width={800}
open={visible}
okText="确认"
cancelText="取消"
onOk={() => handleOk(curConfig)}
onCancel={handleCancel}
>
<div className="h-[500px]">
<Segmented value={key} onChange={setKey} block options={['访问链接', '消息提示', '自定义 JS']} />
{
key === '访问链接' && <GoToLink onChange={(config) => {
setCurConfig(config);
}}/>
}
{
key === '消息提示' && <ShowMessage onChange={(config) => {
setCurConfig(config);
}}/>
}
{
key === '自定义 JS' && <CustomJS onChange={(config) => {
setCurConfig(config);
}}/>
}
</div>
</Modal>
}ComponentEvent 里渲染的时候也支持 customJS，并改下 ts 类型：
import { Collapse, Input, Select, CollapseProps, Button} from 'antd';
import { useComponetsStore } from '../../stores/components';
import { useComponentConfigStore } from '../../stores/component-config';
import type { ComponentEvent } from '../../stores/component-config';
import { ActionConfig, ActionModal } from './ActionModal';
import { useState } from 'react';
import { DeleteOutlined } from '@ant-design/icons';
export function ComponentEvent() {
const { curComponentId, curComponent, updateComponentProps } = useComponetsStore();
const { componentConfig } = useComponentConfigStore();
const [actionModalOpen, setActionModalOpen] = useState(false);
const [curEvent, setCurEvent] = useState<ComponentEvent>();
if (!curComponent) return null;
function deleteAction(event: ComponentEvent, index: number) {
if(!curComponent) {
return;
}
const actions = curComponent.props[event.name]?.actions;
actions.splice(index, 1)
updateComponentProps(curComponent.id, {
[event.name]: {
actions: actions
}
})
}
const items: CollapseProps['items'] = (componentConfig[curComponent.name].events || []).map(event => {
return {
key: event.name,
label: <div className='flex justify-between leading-[30px]'>
{event.label}
<Button type="primary" onClick={(e) => {
e.stopPropagation();
setCurEvent(event);
setActionModalOpen(true);
}}>添加动作</Button>
</div>,
children: <div>
{
(curComponent.props[event.name]?.actions || []).map((item: ActionConfig, index: number) => {
return <div>
{
item.type === 'goToLink' ? <div key="goToLink" className='border border-[#aaa] m-[10px] p-[10px] relative'>
<div className='text-[blue]'>跳转链接</div>
<div>{item.url}</div>
<div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }}
onClick={() => deleteAction(event, index)}
><DeleteOutlined /></div>
</div> : null
}
{
item.type === 'showMessage' ? <div key="showMessage" className='border border-[#aaa] m-[10px] p-[10px] relative'>
<div className='text-[blue]'>消息弹窗</div>
<div>{item.config.type}</div>
<div>{item.config.text}</div>
<div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }}
onClick={() => deleteAction(event, index)}
><DeleteOutlined /></div>
</div> : null
}
{
item.type === 'customJS' ? <div key="customJS" className='border border-[#aaa] m-[10px] p-[10px] relative'>
<div className='text-[blue]'>自定义 JS</div>
<div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }}
onClick={() => deleteAction(event, index)}
><DeleteOutlined /></div>
</div> : null
}
</div>
})
}
</div>
}
})
function handleModalOk(config?: ActionConfig) {
if(!config || !curEvent || !curComponent) {
return ;
}
updateComponentProps(curComponent.id, {
[curEvent.name]: {
actions: [
...(curComponent.props[curEvent.name]?.actions || []),
config
]
}
})
setActionModalOpen(false)
}
return <div className='px-[10px]'>
<Collapse className='mb-[10px]' items={items} defaultActiveKey={componentConfig[curComponent.name].events?.map(item =>item.name)}/>
<ActionModal visible={actionModalOpen} handleOk={handleModalOk} handleCancel={() => {
setActionModalOpen(false)
}}/>
</div>
}测试下：
动作添加成功。
在 json 里可以看到这个配置：
接下来只要 Preview 的时候实现这种 action 的执行就好了。
支持 customJS 的 action 执行，顺便改下类型。
props[event.name] = () => {
eventConfig?.actions?.forEach((action: ActionConfig) => {
if (action.type === 'goToLink') {
window.location.href = action.url;
} else if (action.type === 'showMessage') {
if (action.config.type === 'success') {
message.success(action.config.text);
} else if (action.config.type === 'error') {
message.error(action.config.text);
}
} else if(action.type === 'customJS') {
const func = new Function(action.code);
func()
}
})
}测试下：
这样就实现了自定义 JS 的执行。
然后给执行的函数加上一些参数：
new Function 可以传入任意个参数，最后一个是函数体，前面都会作为函数参数的名字。
然后调用的时候传入参数。
我们这里只传入了当前组件的 name、props 还有一个方法。
const func = new Function('context', action.code);
func({
name: component.name,
props: component.props,
showMessage(content: string) {
message.success(content)
}
});测试下：
这样，自定义 JS 的功能就完成了。
但现在有个问题：
我们上节做了动作的新增、删除，并没有做编辑。
这对于跳转链接、消息弹窗这种动作还好，参数比较简单。
但是对于自定义 JS，写一段 JS 成本还是挺高的，删了再重写体验不好，所以我们得支持下编辑。
改下 ComponentEvent 组件：
<div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }}
onClick={() => editAction(item)}
><EditOutlined /></div>加一个绝对定位的 icon。
点击的时候打开弹窗：
function editAction(config: ActionConfig) {
if(!curComponent) {
return;
}
setActionModalOpen(true);
}测试下：
能打开弹窗，但是还没回显内容。
在 ActionModal 传入 action 来回显：
import { Modal, Segmented } from "antd";
import { useEffect, useState } from "react";
import { GoToLink, GoToLinkConfig } from "./actions/GoToLink";
import { ShowMessage, ShowMessageConfig } from "./actions/ShowMessage";
import { CustomJS, CustomJSConfig } from "./actions/CustomJS";
export type ActionConfig = GoToLinkConfig | ShowMessageConfig | CustomJSConfig;
export interface ActionModalProps {
visible: boolean
action?: ActionConfig
handleOk: (config?: ActionConfig) => void
handleCancel: () => void
}
export function ActionModal(props: ActionModalProps) {
const {
visible,
action,
handleOk,
handleCancel
} = props;
const map = {
goToLink: '访问链接',
showMessage: '消息提示',
customJS: '自定义 JS'
}
const [key, setKey] = useState<string>('访问链接');
const [curConfig, setCurConfig] = useState<ActionConfig>();
useEffect(() => {
if(action?.type ) {
setKey(map[action.type]);
}
}, [action]);
return <Modal
title="事件动作配置"
width={800}
open={visible}
okText="确认"
cancelText="取消"
onOk={() => handleOk(curConfig)}
onCancel={handleCancel}
>
<div className="h-[500px]">
<Segmented value={key} onChange={setKey} block options={['访问链接', '消息提示', '自定义 JS']} />
{
key === '访问链接' && <GoToLink key="goToLink" defaultValue={action?.type === 'goToLink' ? action.url : ''} onChange={(config) => {
setCurConfig(config);
}}/>
}
{
key === '消息提示' && <ShowMessage key="showMessage" value={action?.type === 'showMessage' ? action.config : undefined} onChange={(config) => {
setCurConfig(config);
}}/>
}
{
key === '自定义 JS' && <CustomJS key="customJS" defaultValue={action?.type === 'customJS' ? action.code : ''} onChange={(config) => {
setCurConfig(config);
}}/>
}
</div>
</Modal>
}然后在 ComponentEvent 里传入这个参数：
const [curAction, setCurAction] = useState<ActionConfig>();测试下：
这样，回显就完成了。
然后保存的时候也要处理下：
记录下当前编辑的 action 的 index。
保存的时候如果有 curAction，就是修改，没有的话才是新增。
import { Collapse, Input, Select, CollapseProps, Button} from 'antd';
import { useComponetsStore } from '../../stores/components';
import { useComponentConfigStore } from '../../stores/component-config';
import type { ComponentEvent } from '../../stores/component-config';
import { ActionConfig, ActionModal } from './ActionModal';
import { useState } from 'react';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
export function ComponentEvent() {
const { curComponentId, curComponent, updateComponentProps } = useComponetsStore();
const { componentConfig } = useComponentConfigStore();
const [actionModalOpen, setActionModalOpen] = useState(false);
const [curEvent, setCurEvent] = useState<ComponentEvent>();
const [curAction, setCurAction] = useState<ActionConfig>();
const [curActionIndex, setCurActionIndex] = useState<number>();
if (!curComponent) return null;
function deleteAction(event: ComponentEvent, index: number) {
if(!curComponent) {
return;
}
const actions = curComponent.props[event.name]?.actions;
actions.splice(index, 1)
updateComponentProps(curComponent.id, {
[event.name]: {
actions: actions
}
})
}
function editAction(config: ActionConfig, index: number) {
if(!curComponent) {
return;
}
setCurAction(config);
setCurActionIndex(index)
setActionModalOpen(true);
}
const items: CollapseProps['items'] = (componentConfig[curComponent.name].events || []).map(event => {
return {
key: event.name,
label: <div className='flex justify-between leading-[30px]'>
{event.label}
<Button type="primary" onClick={(e) => {
e.stopPropagation();
setCurEvent(event);
setActionModalOpen(true);
}}>添加动作</Button>
</div>,
children: <div>
{
(curComponent.props[event.name]?.actions || []).map((item: ActionConfig, index: number) => {
return <div>
{
item.type === 'goToLink' ? <div key="goToLink" className='border border-[#aaa] m-[10px] p-[10px] relative'>
<div className='text-[blue]'>跳转链接</div>
<div>{item.url}</div>
<div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }}
onClick={() => editAction(item, index)}
><EditOutlined /></div>
<div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }}
onClick={() => deleteAction(event, index)}
><DeleteOutlined /></div>
</div> : null
}
{
item.type === 'showMessage' ? <div key="showMessage" className='border border-[#aaa] m-[10px] p-[10px] relative'>
<div className='text-[blue]'>消息弹窗</div>
<div>{item.config.type}</div>
<div>{item.config.text}</div>
<div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }}
onClick={() => editAction(item, index)}
><EditOutlined /></div>
<div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }}
onClick={() => deleteAction(event, index)}
><DeleteOutlined /></div>
</div> : null
}
{
item.type === 'customJS' ? <div key="customJS" className='border border-[#aaa] m-[10px] p-[10px] relative'>
<div className='text-[blue]'>自定义 JS</div>
<div style={{ position: 'absolute', top: 10, right: 30, cursor: 'pointer' }}
onClick={() => editAction(item, index)}
><EditOutlined /></div>
<div style={{ position: 'absolute', top: 10, right: 10, cursor: 'pointer' }}
onClick={() => deleteAction(event, index)}
><DeleteOutlined /></div>
</div> : null
}
</div>
})
}
</div>
}
})
function handleModalOk(config?: ActionConfig) {
if(!config || !curEvent || !curComponent) {
return ;
}
if(curAction) {
updateComponentProps(curComponent.id, {
[curEvent.name]: {
actions: curComponent.props[curEvent.name]?.actions.map((item: ActionConfig, index: number) => {
return index === curActionIndex ? config : item;
})
}
})
} else {
updateComponentProps(curComponent.id, {
[curEvent.name]: {
actions: [
...(curComponent.props[curEvent.name]?.actions || []),
config
]
}
})
}
setCurAction(undefined);
setActionModalOpen(false)
}
return <div className='px-[10px]'>
<Collapse className='mb-[10px]' items={items} defaultActiveKey={componentConfig[curComponent.name].events?.map(item =>item.name)}/>
<ActionModal visible={actionModalOpen} handleOk={handleModalOk} action={curAction} handleCancel={() => {
setCurAction(undefined);
setActionModalOpen(false)
}}/>
</div>
}测试下：
action 的新增和修改正常。
这时候我发现虽然最终保存的是对的，回显的不对：
如上图，我修改下面的 action 的时候，回显的依然是之前的值，但保存是对的。
这是为什么呢？我们不是传了参数了么：
因为我们是用非受控模式写的，传的参数作为表单的默认值：
所以修改 defaultValue 并不会修改表单值。
有回显需求的表单，必须用受控模式来写。
我们改一下：
当传入 value 参数的时候，同步设置内部的 value
测试下：
这样就好了。
案例代码上传了小册仓库，可以切换到这个 commit 查看：
git reset --hard 29562eb568bdc05e4efbdd02ba4f817f47201279总结
这节我们实现了自定义 JS。
通过 monaco editor 来输入代码，然后通过 new Function 来动态执行代码，执行的代码可以访问 context，传入一些属性方法。
然后我们实现了动作的编辑，点击编辑按钮会在弹窗回显 action，保存之后会修改 json。
主要回显的表单一定是受控模式，这样才可以随时 value，不然只能设置初始值 defaultValue
这样，内置动作、自定义 JS 的动作就都完成了。