@alilc/lowcode-plugin-components-pane
Version:
299 lines (297 loc) • 11.5 kB
JavaScript
import _Search from "@alifd/next/es/search";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import cls from 'classnames/bind';
import debounce from 'lodash.debounce';
import style from './index.module.scss';
import IconOfPane from '../Icon';
import Category from '../components/Category';
import List from '../components/List';
import Component from '../components/Component';
import Tab from '../components/Tab';
import ComponentManager from '../store';
import transform, { getTextReader, createI18n } from '../utils/transform';
var _ref = window.AliLowCodeEngine || {},
material = _ref.material,
common = _ref.common,
project = _ref.project,
event = _ref.event;
var isNewEngineVersion = !!material;
var store = new ComponentManager();
var cx = cls.bind(style);
var ComponentPane = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ComponentPane, _React$Component);
var _proto = ComponentPane.prototype;
_proto.getKeyToSearch = function getKeyToSearch(c) {
var _schema;
var strTitle = this.t(c.title);
var strComponentName = this.t((_schema = c.schema) === null || _schema === void 0 ? void 0 : _schema.componentName);
var strDescription = "description" in c ? this.t(c.description) : '';
var strKeywords = "keywords" in c ? this.getStrKeywords(c.keywords || []) : '';
return (strTitle + "#" + strComponentName + "#" + strDescription + "#" + strKeywords).toLowerCase();
};
function ComponentPane(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.state = {
groups: [],
filter: [],
keyword: ''
};
_this.store = store;
_this.t = void 0;
_this.getStrKeywords = void 0;
_this.getFilteredComponents = debounce(function () {
var _this$state = _this.state,
_this$state$groups = _this$state.groups,
groups = _this$state$groups === void 0 ? [] : _this$state$groups,
keyword = _this$state.keyword;
if (!keyword) {
_this.setState({
filter: groups
});
return;
}
var filter = groups.map(function (group) {
return _extends({}, group, {
categories: group.categories.map(function (category) {
return _extends({}, category, {
components: category.components.filter(function (c) {
var keyToSearch = _this.getKeyToSearch(c);
if (c.snippets) {
c.snippets.map(function (item) {
keyToSearch += "_" + _this.getKeyToSearch(item);
});
}
return keyToSearch.includes(keyword);
})
});
}).filter(function (c) {
var _c$components;
return c === null || c === void 0 ? void 0 : (_c$components = c.components) === null || _c$components === void 0 ? void 0 : _c$components.length;
})
});
});
_this.setState({
filter: filter
});
}, 200);
_this.registerAdditive = function (shell) {
if (!shell || shell.dataset.registered) {
return;
}
function getSnippetId(elem) {
if (!elem) {
return null;
}
while (shell !== elem) {
if (elem.classList.contains('snippet')) {
return elem.dataset.id;
}
elem = elem.parentNode;
}
return null;
}
var editor = _this.props.editor;
var designer = !isNewEngineVersion ? editor === null || editor === void 0 ? void 0 : editor.get('designer') : null;
var _dragon = isNewEngineVersion ? common.designerCabin.dragon : designer === null || designer === void 0 ? void 0 : designer.dragon;
if (!_dragon || !isNewEngineVersion && !designer) {
return;
}
// eslint-disable-next-line
var click = function click(e) {};
shell.addEventListener('click', click);
_dragon.from(shell, function (e) {
var doc = isNewEngineVersion ? project.getCurrentDocument() : designer === null || designer === void 0 ? void 0 : designer.currentDocument;
var id = getSnippetId(e.target);
if (!doc || !id) {
return false;
}
var dragTarget = {
type: 'nodedata',
data: _this.store.getSnippetById(id)
};
return dragTarget;
});
shell.dataset.registered = 'true';
};
_this.handleSearch = function (keyword) {
if (keyword === void 0) {
keyword = '';
}
_this.setState({
keyword: keyword.toLowerCase()
});
_this.getFilteredComponents();
};
_this.t = getTextReader(props.lang);
_this.getStrKeywords = function (keywords) {
if (typeof keywords === 'string') {
return keywords;
}
if (keywords && Array.isArray(keywords) && keywords.length) {
return keywords.map(function (keyword) {
return _this.t(keyword);
}).join('-');
}
return '';
};
return _this;
}
_proto.componentDidMount = function componentDidMount() {
var editor = this.props.editor;
if (!editor) {
this.initComponentList();
return;
}
var assets = isNewEngineVersion ? material.getAssets() : editor.get('assets');
if (assets) {
this.initComponentList();
} else {
console.warn('[ComponentsPane]: assets not ready, wait for assets ready event.');
}
if (isNewEngineVersion) {
event.on('trunk.change', this.initComponentList.bind(this));
material.onChangeAssets(this.initComponentList.bind(this));
} else {
editor.on('trunk.change', this.initComponentList.bind(this));
editor.once('editor.ready', this.initComponentList.bind(this));
editor.on('designer.incrementalAssetsReady', this.initComponentList.bind(this));
}
}
/**
* 初始化组件列表
* TODO: 无副作用，可多次执行
*/;
_proto.initComponentList = function initComponentList() {
var editor = this.props.editor;
var rawData = isNewEngineVersion ? material.getAssets() : editor.get('assets');
var meta = transform(rawData, this.t);
var groups = meta.groups,
snippets = meta.snippets;
this.store.setSnippets(snippets);
this.setState({
groups: groups,
filter: groups
});
};
_proto.renderEmptyContent = function renderEmptyContent() {
return /*#__PURE__*/React.createElement("div", {
className: cx('empty')
}, /*#__PURE__*/React.createElement("img", {
src: "//g.alicdn.com/uxcore/pic/empty.png"
}), /*#__PURE__*/React.createElement("div", {
className: cx('content')
}, this.t(createI18n('暂无组件，请在物料站点添加', 'No components, please add materials'))));
};
_proto.renderContent = function renderContent() {
var _this2 = this;
var _this$state2 = this.state,
_this$state2$filter = _this$state2.filter,
filter = _this$state2$filter === void 0 ? [] : _this$state2$filter,
keyword = _this$state2.keyword;
var hasContent = filter.filter(function (item) {
var _item$categories;
return item === null || item === void 0 ? void 0 : (_item$categories = item.categories) === null || _item$categories === void 0 ? void 0 : _item$categories.filter(function (category) {
var _category$components;
return category === null || category === void 0 ? void 0 : (_category$components = category.components) === null || _category$components === void 0 ? void 0 : _category$components.length;
}).length;
}).length;
if (!hasContent) {
return this.renderEmptyContent();
}
if (keyword) {
return /*#__PURE__*/React.createElement("div", {
ref: this.registerAdditive,
className: cx('filtered-content')
}, filter.map(function (group) {
var categories = group.categories;
{
return categories.map(function (category) {
var components = category.components;
var cname = _this2.t(category.name);
return /*#__PURE__*/React.createElement(Category, {
key: cname,
name: cname
}, /*#__PURE__*/React.createElement(List, null, components.map(function (component) {
var componentName = component.componentName,
_component$snippets = component.snippets,
snippets = _component$snippets === void 0 ? [] : _component$snippets;
return snippets.filter(function (snippet) {
return snippet.id && _this2.getKeyToSearch(snippet).toLowerCase().includes(keyword);
}).map(function (snippet) {
return /*#__PURE__*/React.createElement(Component, {
data: {
title: snippet.title || component.title,
icon: snippet.screenshot || component.icon,
snippets: [snippet]
},
key: _this2.t(group.name) + "_" + _this2.t(componentName) + "_" + _this2.t(snippet.title),
t: _this2.t
});
});
})));
});
}
}));
}
return /*#__PURE__*/React.createElement(Tab, {
className: cx('tabs')
}, filter.map(function (group) {
var categories = group.categories;
return /*#__PURE__*/React.createElement(Tab.Item, {
title: _this2.t(group.name),
key: _this2.t(group.name)
}, /*#__PURE__*/React.createElement("div", {
ref: _this2.registerAdditive
}, categories.map(function (category) {
var components = category.components;
var cname = _this2.t(category.name);
return /*#__PURE__*/React.createElement(Category, {
key: cname,
name: cname
}, /*#__PURE__*/React.createElement(List, null, components.map(function (component) {
var componentName = component.componentName,
_component$snippets2 = component.snippets,
snippets = _component$snippets2 === void 0 ? [] : _component$snippets2;
return snippets.filter(function (snippet) {
return snippet.id;
}).map(function (snippet) {
return /*#__PURE__*/React.createElement(Component, {
data: {
title: snippet.title || component.title,
icon: snippet.screenshot || component.icon,
snippets: [snippet]
},
t: _this2.t,
key: _this2.t(group.name) + "_" + _this2.t(componentName) + "_" + _this2.t(snippet.title)
});
});
})));
})));
}));
};
_proto.render = function render() {
return /*#__PURE__*/React.createElement("div", {
className: cx('lowcode-component-panel')
}, /*#__PURE__*/React.createElement("div", {
className: cx('header')
}, /*#__PURE__*/React.createElement(_Search, {
className: cx('search'),
placeholder: this.t(createI18n('搜索组件', 'Search components')),
shape: "simple",
hasClear: true,
autoFocus: true,
onSearch: this.handleSearch,
onChange: this.handleSearch
})), this.renderContent());
};
return ComponentPane;
}(React.Component);
ComponentPane.displayName = 'LowcodeComponentPane';
ComponentPane.defaultProps = {
lang: 'zh_CN'
};
export { ComponentPane as default };
export var PaneIcon = IconOfPane;