feat:组件库插件代码调整

packages/editor-skeleton/src/components/LeftPlugin/index.scss

@@ -25,7 +25,6 @@
       border-radius: 4px;
       background: $balloon-normal-color-bg;
       border: 1px solid $balloon-normal-color-border;
-      opacity: 0.8;
       color: $color-text1-3;
       z-index: 100;
     }

packages/editor-skeleton/src/components/TopIcon/index.scss

@@ -39,7 +39,6 @@
       border-radius: 4px;
       background: $balloon-normal-color-bg;
       border: 1px solid $balloon-normal-color-border;
-      opacity: 0.8;
       color: $color-text1-3;
       z-index: 100;
     }

packages/editor/package.json

@@ -9,7 +9,7 @@
     "@ali/lowcode-plugin-undo-redo": "0.0.1",
     "@ali/lowcode-plugin-save": "0.0.1",
     "@ali/lowcode-plugin-designer": "0.0.1",
-    "@ali/lowcode-plugin-components-pane": "^1.0.11",
+    "@ali/lowcode-plugin-components-pane": "0.0.1",
     "@alifd/next": "^1.x",
     "@alife/theme-lowcode-dark": "^0.1.0",
     "@alife/theme-lowcode-light": "^0.1.0",

packages/editor/src/config/components.js

@@ -1,13 +1,3 @@
-import topBalloonIcon from '@ali/iceluna-addon-2';
-import topDialogIcon from '@ali/iceluna-addon-2';
-import leftPanelIcon from '@ali/iceluna-addon-2';
-import leftPanelIcon2 from '@ali/iceluna-addon-2';
-import leftBalloonIcon from '@ali/iceluna-addon-2';
-import leftDialogIcon from '@ali/iceluna-addon-2';
-import rightPanel1 from '@ali/iceluna-addon-2';
-import rightPanel2 from '@ali/iceluna-addon-2';
-import rightPanel3 from '@ali/iceluna-addon-2';
-import rightPanel4 from '@ali/iceluna-addon-2';
 import componentsPane from '@ali/lowcode-plugin-components-pane';
 import Settings from '../../../plugin-settings';
 import undoRedo from '@ali/lowcode-plugin-undo-redo';
@@ -23,15 +13,5 @@ export default {
   designer: PluginFactory(Designer),
   settings: PluginFactory(Settings),
   undoRedo: PluginFactory(undoRedo),
-  topBalloonIcon: PluginFactory(topBalloonIcon),
-  topDialogIcon: PluginFactory(topDialogIcon),
-  leftPanelIcon: PluginFactory(leftPanelIcon),
-  leftPanelIcon2: PluginFactory(leftPanelIcon2),
-  leftBalloonIcon: PluginFactory(leftBalloonIcon),
-  leftDialogIcon: PluginFactory(leftDialogIcon),
-  rightPanel1: PluginFactory(rightPanel1),
-  rightPanel2: PluginFactory(rightPanel2),
-  rightPanel3: PluginFactory(rightPanel3),
-  rightPanel4: PluginFactory(rightPanel4),
   componentsPane: PluginFactory(componentsPane)
 };

packages/editor/src/config/skeleton.js

@@ -72,7 +72,7 @@ export default {
         },
         config: {
           package: '@ali/iceluna-plugin-components-pane',
-          version: '^1.0.4'
+          version: '0.0.1'
         },
         pluginProps: {
           disableAppComponent: true

packages/plugin-component-pane/src/index.tsx

@@ -1,24 +0,0 @@
-import React, {PureComponent} from '../node_modules/_@types_react@16.9.25@@types/react';
-import {
-  Search,
-  Select
-} from '../node_modules/_@alifd_next@1.19.19@@alifd/next/types';
-import './index.scss';
-import ComponentList from '../node_modules/_@ali_iceluna-addon-component-list@1.0.12@@ali/iceluna-addon-component-list/lib';
-import { PluginProps } from './node_modules/@ali/lowcode-editor-core/lib/definitions';
-
-export default class ComponentListPlugin extends PureComponent<PluginProps> {
-  static displayName = 'LowcodeComponentListPlugin';
-
-
-
-  render(): React.ReactNode {
-    return (
-      <div className="lowcode-component-list">
-        
-      </div>
-    )
-  }
-
-
-}

packages/plugin-components-pane/es/index.d.ts

@@ -1,9 +1,24 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
-import './index.scss';
 import { PluginProps } from '@ali/lowcode-editor-core/lib/definitions';
-export interface IProps {
+import './index.scss';
-    logo?: string;
+export interface LibrayInfo {
-    href?: string;
+    label: string;
+    value: string;
+}
+export interface IState {
+    loading: boolean;
+    libs: LibrayInfo[];
+    searchKey: string;
+    currentLib: string;
+    componentList: object[];
+}
+export default class ComponentListPlugin extends PureComponent<PluginProps, IState> {
+    static displayName: string;
+    constructor(props: any);
+    componentDidMount(): void;
+    transformMaterial: (componentList: any) => any;
+    initComponentList: () => void;
+    searchAction: (value: string) => void;
+    filterMaterial: () => any;
+    render(): React.ReactNode;
 }
-declare const Logo: React.FC<IProps & PluginProps>;
-export default Logo;

packages/plugin-components-pane/es/index.js

@@ -1,17 +1,192 @@
-import React from 'react';
+import _Select from "@alifd/next/es/select";
+import _Search from "@alifd/next/es/search";
+import _Icon from "@alifd/next/es/icon";
+import _extends from "@babel/runtime/helpers/extends";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+
+function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { PureComponent } from 'react';
+import MaterialShow from '@ali/iceluna-comp-material-show';
 import './index.scss';
 
-var Logo = function Logo(props) {
+var ComponentListPlugin = /*#__PURE__*/function (_PureComponent) {
-  return /*#__PURE__*/React.createElement("div", {
+  _inheritsLoose(ComponentListPlugin, _PureComponent);
-    className: "lowcode-plugin-logo"
-  }, /*#__PURE__*/React.createElement("a", {
-    className: "logo",
-    target: "blank",
-    href: props.href || '/',
-    style: {
-      backgroundImage: "url(" + props.logo + ")"
-    }
-  }));
-};
 
-export default Logo;
+  var _super = _createSuper(ComponentListPlugin);
+
+  function ComponentListPlugin(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _this.transformMaterial = function (componentList) {
+      return componentList.map(function (category) {
+        return {
+          name: category.title,
+          items: category.children.map(function (comp) {
+            return _extends({}, comp, {
+              name: comp.componentName,
+              snippets: comp.snippets.map(function (snippet) {
+                return {
+                  name: snippet.title,
+                  screenshot: snippet.screenshot,
+                  code: JSON.stringify(snippet.schema)
+                };
+              })
+            });
+          })
+        };
+      });
+    };
+
+    _this.initComponentList = function () {
+      var editor = _this.props.editor;
+      var assets = editor.assets || {};
+      var list = [];
+      var libs = [];
+      Object.values(assets.packages).forEach(function (item) {
+        list.push(item.library);
+        libs.push({
+          label: item.title,
+          value: item.library
+        });
+      });
+
+      if (list.length > 1) {
+        libs.unshift({
+          label: '全部',
+          value: list.join(',')
+        });
+      }
+
+      var componentList = _this.transformMaterial(assets.componentList);
+
+      _this.setState({
+        libs: libs,
+        componentList: componentList,
+        currentLib: libs[0] && libs[0].value
+      });
+
+      editor.set('dndHelper', {
+        handleResourceDragStart: function handleResourceDragStart(ev, tagName, schema) {
+          // 物料面板中组件snippet的dragStart回调
+          // ev: 原始的domEvent；tagName: 组件的描述文案；schema: snippet的schema
+          if (editor.designer) {
+            editor.designer.dragon.boost({
+              type: 'nodedata',
+              data: schema
+            }, ev.nativeEvent);
+          }
+        }
+      });
+    };
+
+    _this.searchAction = function (value) {
+      _this.setState({
+        searchKey: value
+      });
+    };
+
+    _this.filterMaterial = function () {
+      var _this$state = _this.state,
+          searchKey = _this$state.searchKey,
+          currentLib = _this$state.currentLib,
+          componentList = _this$state.componentList;
+      var libs = currentLib.split(',');
+      return (componentList || []).map(function (cate) {
+        return _extends({}, cate, {
+          items: (cate.items || []).filter(function (item) {
+            var libFlag = libs.some(function (lib) {
+              return lib == item.library;
+            });
+            var keyFlag = true;
+
+            if (searchKey) {
+              keyFlag = ((item.name || '') + " " + (item.title || '')).toLowerCase().indexOf(searchKey.trim().toLowerCase()) >= 0;
+            } else {
+              keyFlag = item.is_show === undefined || !!(item.is_show == 1);
+            }
+
+            return libFlag && keyFlag;
+          })
+        });
+      }).filter(function (cate) {
+        return cate.items && cate.items.length > 0;
+      });
+    };
+
+    _this.state = {
+      loading: false,
+      libs: [{
+        label: '全部',
+        value: 'all'
+      }],
+      searchKey: '',
+      currentLib: 'all',
+      componentList: []
+    };
+    return _this;
+  }
+
+  var _proto = ComponentListPlugin.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var editor = this.props.editor;
+
+    if (editor.assets) {
+      this.initComponentList();
+    } else {
+      editor.once('editor.ready', this.initComponentList);
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$state2 = this.state,
+        libs = _this$state2.libs,
+        loading = _this$state2.loading,
+        currentLib = _this$state2.currentLib;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lowcode-component-list"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title"
+    }, /*#__PURE__*/React.createElement(_Icon, {
+      type: "jihe",
+      size: "small"
+    }), /*#__PURE__*/React.createElement("span", null, "\u7EC4\u4EF6\u5E93")), /*#__PURE__*/React.createElement(_Search, {
+      shape: "simple",
+      size: "small",
+      className: "search",
+      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
+      onChange: this.searchAction,
+      onSearch: this.searchAction,
+      hasClear: true
+    }), /*#__PURE__*/React.createElement(_Select, {
+      size: "small",
+      className: "select",
+      dataSource: libs,
+      value: currentLib,
+      onChange: function onChange(value) {
+        _this2.setState({
+          currentLib: value
+        });
+      }
+    }), /*#__PURE__*/React.createElement(MaterialShow, {
+      className: "components-show",
+      loading: loading,
+      type: "component",
+      dataSource: this.filterMaterial()
+    }));
+  };
+
+  return ComponentListPlugin;
+}(PureComponent);
+
+ComponentListPlugin.displayName = 'LowcodeComponentListPlugin';
+export { ComponentListPlugin as default };

packages/plugin-components-pane/es/index.scss

@@ -1,13 +1,25 @@
-.lowcode-plugin-logo {
+.lowcode-component-list {
-  padding: 14px 8px;
+  height: 100%;
-  padding-left: 8px;
+  display: flex;
-  .logo {
+  flex-flow: column;
+  .title {
+    height: 40px;
+    line-height: 39px;
+    border-bottom: 1px solid $color-line1-1;
+    padding: 0 8px;
+    position: relative;
+  }
+  .search {
     display: block;
-    width: 56px;
+    width: auto;
-    height: 20px;
+    margin: 8px 8px 0;
-    cursor: pointer;
+  }
-    background-size: contain;
+  .select {
-    background-position: center;
+    display: block;
-    background-repeat: no-repeat;
+    margin: 8px 8px 4px;
+  }
+  .components-show {
+    flex: 1 1 0%;
+    overflow: hidden;
   }
 }

packages/plugin-components-pane/es/style.js

@@ -1 +1,4 @@
+import '@alifd/next/es/select/style';
+import '@alifd/next/es/search/style';
+import '@alifd/next/es/icon/style';
 import './index.scss';

packages/plugin-components-pane/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@ali/iceluna-addon-component-list": "^1.0.11",
     "@ali/iceluna-comp-material-show": "^1.0.10",
+    "@ali/iceluna-sdk": "^1.0.6-beta.6",
     "@alifd/next": "^1.19.19",
     "prop-types": "^15.5.8",
     "react": "^16.8.1",