github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-02-21 08:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat:组件库插件代码调整

Browse Source
This commit is contained in:
下羊 2020-03-26 21:53:39 +08:00
parent 37e49a34fc
commit a3d985ad9e
11 changed files with 239 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/editor-skeleton/src/components/LeftPlugin/index.scss
View File

@ -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;
}

1
packages/editor-skeleton/src/components/TopIcon/index.scss
View File

@ -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;
}

2
packages/editor/package.json
View File

@ -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",

20
packages/editor/src/config/components.js
View File

@ -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)
};

2
packages/editor/src/config/skeleton.js
View File

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

24
packages/plugin-component-pane/src/index.tsx
View File

@ -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>
)
}
}

29
packages/plugin-components-pane/es/index.d.ts vendored
View File

@ -1,9 +1,24 @@
import React from 'react';
import './index.scss';
import React, { PureComponent } from 'react';
import { PluginProps } from '@ali/lowcode-editor-core/lib/definitions';
export interface IProps {
logo?: string;
href?: string;
import './index.scss';
export interface LibrayInfo {
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;

203
packages/plugin-components-pane/es/index.js
View File

@ -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) {
return /*#__PURE__*/React.createElement("div", {
className: "lowcode-plugin-logo"
}, /*#__PURE__*/React.createElement("a", {
className: "logo",
target: "blank",
href: props.href || '/',
style: {
backgroundImage: "url(" + props.logo + ")"
}
}));
};
var ComponentListPlugin = /*#__PURE__*/function (_PureComponent) {
_inheritsLoose(ComponentListPlugin, _PureComponent);
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 };

32
packages/plugin-components-pane/es/index.scss
View File

@ -1,13 +1,25 @@
.lowcode-plugin-logo {
padding: 14px 8px;
padding-left: 8px;
.logo {
.lowcode-component-list {
height: 100%;
display: flex;
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;
height: 20px;
cursor: pointer;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: auto;
margin: 8px 8px 0;
}
.select {
display: block;
margin: 8px 8px 4px;
}
.components-show {
flex: 1 1 0%;
overflow: hidden;
}
}

3
packages/plugin-components-pane/es/style.js
View File

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

1
packages/plugin-components-pane/package.json
View File

@ -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",