feat: 新增functionSetter

packages/editor-setters/src/events-setter/index.tsx

@@ -18,6 +18,8 @@ const DEFINITION_EVENT_TYPE = {
   LIFE_CYCLE_EVENT: 'lifeCycleEvent',
 };
 
+const SETTER_NAME = 'event-setter'
+
 export default class EventsSetter extends Component<{
   value: any[];
   onChange: (eventList: any[]) => void;
@@ -61,7 +63,7 @@ export default class EventsSetter extends Component<{
     const {editor} = this.props.field;
     this.initEventBtns();
     this.initEventList();
-    editor.on('event-setter.bindEvent',(relatedEventName)=>{
+    editor.on(`${SETTER_NAME}.bindEvent`,(relatedEventName)=>{
       this.bindEvent(relatedEventName);
     })
 
@@ -328,7 +330,7 @@ export default class EventsSetter extends Component<{
   openDialog = (bindEventName: String) => {
     const {editor} = this.props.field;
     this.bindEventName = bindEventName;
-    editor.emit('eventBindDialog.openDialog',bindEventName);
+    editor.emit('eventBindDialog.openDialog',bindEventName,SETTER_NAME);
   };
 
 

packages/editor-setters/src/function-setter/index.scss

@@ -0,0 +1,36 @@
+.lc-icon-setter{
+  .next-input{
+    width: auto !important;
+  }
+  i {
+    min-width: 12px;
+  }
+  i:hover {
+    cursor: pointer;
+  }
+  input:hover {
+    cursor: pointer;
+  }
+}
+
+
+.lowcode-icon-setter-popup{
+  max-width: 354px;
+  .lowcode-icon-list{
+
+    overflow: auto;
+    li{
+      float: left;
+      margin-bottom: 10px;
+      width: 40px;
+      color: #666;
+      cursor: pointer;
+      text-align: center;
+
+      &:hover{
+        color: #000;
+      }
+    }
+  }
+}
+

packages/editor-setters/src/function-setter/index.tsx

@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+// import PropTypes from 'prop-types';
+import { Button } from '@alifd/next';
+
+import './index.scss';
+
+const SETTER_NAME = 'function-setter'
+
+interface FunctionSetterProps {
+  value: string;
+  type: string;
+  defaultValue: string;
+  placeholder: string;
+  hasClear: boolean;
+  onChange: (icon: string | object) => undefined;
+  icons: string[];
+}
+export default class FunctionSetter extends PureComponent<FunctionSetterProps, {}> {
+  static defaultProps = {
+    value: undefined,
+    type: 'string',
+    defaultValue: '',
+    hasClear: true,
+    placeholder: '请点击选择 Icon',
+    onChange: (icon: string | object) => undefined,
+  };
+
+  state = {
+    firstLoad: true,
+  };
+
+  componentDidMount() {
+    const {editor} = this.props.field;
+    editor.on(`${SETTER_NAME}.bindEvent`,(eventName)=>{
+      this.bindEventCallback(eventName);
+    })
+
+  }
+
+  bindFunction = () =>{
+    const {field,value} = this.props;
+    field.editor.emit('eventBindDialog.openDialog',field.name,SETTER_NAME);
+  }
+
+  bindEventCallback = (eventName) => {
+    const {onChange} = this.props;
+    onChange({
+      type: 'JSFunction',
+      value: `function(){ this.${eventName}() }`,
+    });
+  }
+
+  render() {
+    const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props;
+    const { firstLoad } = this.state;
+
+    return <div className="lc-icon-setter"><Button type="primary" onClick={()=>this.bindFunction()}>绑定函数</Button></div>;
+  }
+}

packages/editor-setters/src/index.tsx

@@ -8,6 +8,7 @@ import JsonSetter from './json-setter';
 import EventsSetter from './events-setter';
 import StyleSetter from './style-setter';
 import IconSetter from './icon-setter';
+// import FunctionSetter from './function-setter';
 // import MixedSetter from './mixed-setter';
 
 export const StringSetter = {
@@ -109,6 +110,7 @@ const builtinSetters: any = {
   JsonSetter,
   StyleSetter,
   IconSetter,
+  FunctionSetter
 };
 
 registerSetter(builtinSetters);

packages/plugin-event-bind-dialog/src/index.tsx

@@ -24,6 +24,7 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   state: any = {
     visiable: false,
+    setterName:'event-setter',
     selectedEventName: '',
     eventName: '',
   };
@@ -46,8 +47,11 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   componentDidMount() {
     const { editor, config } = this.props;
-    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => {
+    editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String,setterName:String) => {
       this.openDialog(bindEventName);
+      this.setState({
+        setterName
+      })
 
       let schema = editor.get('designer').project.getSchema();
       let pageNode = schema.componentsTree[0];
@@ -102,7 +106,10 @@ export default class EventBindDialog extends Component<PluginProps> {
 
   onOk = () => {
     const { editor } = this.props;
-    editor.emit('event-setter.bindEvent', this.state.eventName);
+    const {setterName,eventName} = this.state;
+
+    editor.emit(`${setterName}.bindEvent`, eventName);
+
     // 选中的是新建事件
     if (this.state.selectedEventName == '') {
       // 判断面板是否处于激活状态