feat: 新增class-name setter

packages/demo/package.json

@@ -39,6 +39,7 @@
     "@alife/theme-lowcode-light": "^0.1.0",
     "compare-versions": "^3.0.1",
     "react": "^16.8.1",
+    "monaco-editor": "0.21.0",
     "react-dom": "^16.8.1",
     "streamsaver": "^2.0.4",
     "web-streams-polyfill": "^2.1.1"
@@ -52,7 +53,7 @@
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-moment-locales": "^0.1.0",
     "build-plugin-react-app": "^1.1.2",
-    "monaco-editor-webpack-plugin": "^1.9.0",
+    "monaco-editor-webpack-plugin": "2.0.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0"
   }
 }

packages/editor-setters/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-setters",
-  "version": "1.0.8-0",
+  "version": "1.0.8-beta-3",
   "description": "Builtin setters for Ali lowCode engine",
   "files": [
     "es",
@@ -17,7 +17,6 @@
     "@ali/iceluna-comp-expression": "^1.0.6",
     "@ali/iceluna-comp-form": "^1.0.20",
     "@ali/iceluna-comp-list": "^1.0.26",
-    "@ali/iceluna-comp-monaco-editor": "^1.0.31",
     "@ali/iceluna-comp-object-button": "^1.0.23",
     "@ali/iceluna-comp-react-node": "^1.0.5",
     "@ali/iceluna-sdk": "^1.0.5-beta.24",
@@ -27,11 +26,10 @@
     "acorn": "^6.4.1",
     "classnames": "^2.2.6",
     "intl-messageformat": "^9.3.1",
-    "monaco-editor": "^0.20.0",
     "qs": "^6.9.1",
     "react": "^16",
     "react-dom": "^16.7.0",
-    "react-monaco-editor": "^0.34.0"
+    "react-monaco-editor": "0.40.0"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",

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

@@ -0,0 +1,90 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Select } from '@alife/next';
+
+interface Color {
+  rgb: any;
+  onChange: () => void;
+}
+
+export interface PluginProps {
+  value: string;
+  onChange: any;
+}
+
+export default class ClassNameView extends PureComponent<PluginProps> {
+  static display = 'ClassName';
+
+  static propTypes = {
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    onChange: () => {},
+    value: '',
+  };
+
+  getClassNameList = () => {
+    const { editor } = this.props.field;
+    const schema = editor.get('designer').project.getSchema();
+    const css = schema.componentsTree[0].css;
+    const classNameList = [];
+    const re = /\.?\w+[^{]+\{[^}]*\}/g;
+    const list = css.match(re);
+    list.map((item) => {
+      if (item[0] === '.') {
+        const className = item.substring(1, item.indexOf('{'));
+        classNameList.push(className);
+      }
+
+      return item;
+    });
+
+    return classNameList;
+  };
+
+
+  handleChange = (value) => {
+    const { onChange } = this.props;
+    onChange(value.join(' '));
+    this.setState({
+      selectValue: value,
+    });
+  };
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillMount() {
+    const { value } = this.props;
+    const classnameList = this.getClassNameList();
+    const dataSource = [];
+    classnameList.map((item) => {
+      dataSource.push({
+        value: item,
+        label: item,
+      });
+
+      return item;
+    });
+
+
+    let selectValue = [];
+    if (value && value !== '') {
+      selectValue = value.split(' ');
+    }
+
+
+    this.setState({
+      dataSource,
+      selectValue,
+    });
+  }
+
+
+  render() {
+    const { dataSource, selectValue } = this.state;
+    return (
+      <Select aria-label="tag mode" mode="tag" dataSource={dataSource} onChange={this.handleChange} value={selectValue} />
+    );
+  }
+}

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

@@ -266,11 +266,12 @@ export default class ExpressionView extends PureComponent {
                   innerBefore={<span style={{ color: '#999', marginLeft: 4 }}>{'{{'}</span>}
                   innerAfter={<span style={{ color: '#999', marginRight: 4 }}>{'}}'}</span>}
                   popupClassName="expression-setter-item-inner"
-                  itemRender={({ itemValue }) => {
+                  // eslint-disable-next-line no-shadow
+                  itemRender={({ value }) => {
                     return (
-                      <Option key={itemValue} text={itemValue} value={itemValue}>
+                      <Option key={value} text={value} value={value}>
-                        <div className="code-input-value">{itemValue}</div>
+                        <div className="code-input-value">{value}</div>
-                        <div className="code-input-help">{helpMap[itemValue]}</div>
+                        <div className="code-input-help">{helpMap[value]}</div>
                       </Option>
                     );
                   }}

packages/editor-setters/src/index.tsx

@@ -9,6 +9,7 @@ import EventsSetter from './events-setter';
 import StyleSetter from './style-setter';
 import IconSetter from './icon-setter';
 import FunctionSetter from './function-setter';
+import ClassNameSetter from './classname-setter';
 // import MixedSetter from './mixed-setter';
 
 export const StringSetter = {
@@ -87,7 +88,7 @@ const VariableSetter = {
   component: ExpressionSetter,
   condition: (field: any) => {
     const v = field.getValue();
-    return v == null || isJSExpression(v);
+    return isJSExpression(v);
   },
   defaultProps: { placeholder: '请输入表达式' },
   title: '表达式输入',
@@ -123,6 +124,7 @@ const builtinSetters: any = {
   JsonSetter,
   StyleSetter,
   IconSetter,
+  ClassNameSetter,
   FunctionSetter: FunctionBindSetter,
 };
 

packages/plugin-source-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-source-editor",
-  "version": "1.0.8-beta-1",
+  "version": "1.0.8-beta-4",
   "description": "alibaba lowcode editor source-editor plugin",
   "files": [
     "es",
@@ -25,7 +25,7 @@
     "prettier": "^1.18.2",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-monaco-editor": "^0.36.0"
+    "react-monaco-editor": "0.40.0"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.3",

packages/plugin-source-editor/src/index.tsx

@@ -257,20 +257,22 @@ export default class SourceEditor extends Component<{
 
 
   saveSchema = (successFlag?: boolean) => {
-    const { jsCode } = this.state;
+    const { jsCode, css } = this.state;
     const { editor } = this.props;
     const functionMap = transfrom.code2Schema(jsCode);
 
     if (functionMap != null) {
       const schema = editor.get('designer').project.getSchema();
       // let oldSchemaStr = JSON.stringify(schema);
-      const newSchema = transfrom.setFunction2Schema(functionMap, schema);
+      const newSchema = transfrom.setFunction2Schema(functionMap, css, schema);
 
       if (newSchema != '') {
         editor.get('designer').project.setSchema(newSchema);
         successFlag && Message.success('保存成功');
       }
     }
+
+
   };
 
   render() {
@@ -280,6 +282,7 @@ export default class SourceEditor extends Component<{
       { tab: 'style.css', key: TAB_KEY.CSS_TAB },
     ];
 
+
     return (
       <div className="source-editor-container">
 

packages/plugin-source-editor/src/transform.ts

@@ -55,7 +55,7 @@ const transfrom = {
     return `\n\t${functionName}(){\n\t}\n`;
   },
 
-  setFunction2Schema(functionMap, schema) {
+  setFunction2Schema(functionMap, css, schema) {
     const pageNode = schema.componentsTree[0];
     // 先清除原有的schema的值
     delete pageNode.state;
@@ -96,6 +96,8 @@ const transfrom = {
       }
     }
 
+    pageNode.css = css;
+
     return schema;
   },
 };