@alilc/lowcode-plugin-components-pane
Version:
307 lines (304 loc) • 13.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.PaneIcon = void 0;
var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _lodash = _interopRequireDefault(require("lodash.debounce"));
var _indexModule = _interopRequireDefault(require("./index.module.scss"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _Category = _interopRequireDefault(require("../components/Category"));
var _List = _interopRequireDefault(require("../components/List"));
var _Component = _interopRequireDefault(require("../components/Component"));
var _Tab = _interopRequireDefault(require("../components/Tab"));
var _store = _interopRequireDefault(require("../store"));
var _transform = _interopRequireWildcard(require("../utils/transform"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _ref = window.AliLowCodeEngine || {},
material = _ref.material,
common = _ref.common,
project = _ref.project,
event = _ref.event;
var isNewEngineVersion = !!material;
var store = new _store["default"]();
var cx = _bind["default"].bind(_indexModule["default"]);
var ComponentPane = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(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 = (0, _lodash["default"])(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 (0, _extends2["default"])({}, group, {
categories: group.categories.map(function (category) {
return (0, _extends2["default"])({}, 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 = (0, _transform.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 = (0, _transform["default"])(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["default"].createElement("div", {
className: cx('empty')
}, /*#__PURE__*/_react["default"].createElement("img", {
src: "//g.alicdn.com/uxcore/pic/empty.png"
}), /*#__PURE__*/_react["default"].createElement("div", {
className: cx('content')
}, this.t((0, _transform.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["default"].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["default"].createElement(_Category["default"], {
key: cname,
name: cname
}, /*#__PURE__*/_react["default"].createElement(_List["default"], 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["default"].createElement(_Component["default"], {
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["default"].createElement(_Tab["default"], {
className: cx('tabs')
}, filter.map(function (group) {
var categories = group.categories;
return /*#__PURE__*/_react["default"].createElement(_Tab["default"].Item, {
title: _this2.t(group.name),
key: _this2.t(group.name)
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: _this2.registerAdditive
}, categories.map(function (category) {
var components = category.components;
var cname = _this2.t(category.name);
return /*#__PURE__*/_react["default"].createElement(_Category["default"], {
key: cname,
name: cname
}, /*#__PURE__*/_react["default"].createElement(_List["default"], 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["default"].createElement(_Component["default"], {
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["default"].createElement("div", {
className: cx('lowcode-component-panel')
}, /*#__PURE__*/_react["default"].createElement("div", {
className: cx('header')
}, /*#__PURE__*/_react["default"].createElement(_search["default"], {
className: cx('search'),
placeholder: this.t((0, _transform.createI18n)('搜索组件', 'Search components')),
shape: "simple",
hasClear: true,
autoFocus: true,
onSearch: this.handleSearch,
onChange: this.handleSearch
})), this.renderContent());
};
return ComponentPane;
}(_react["default"].Component);
exports["default"] = ComponentPane;
ComponentPane.displayName = 'LowcodeComponentPane';
ComponentPane.defaultProps = {
lang: 'zh_CN'
};
var PaneIcon = _Icon["default"];
exports.PaneIcon = PaneIcon;