diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index 36060b79b..414afdced 100644 --- a/packages/plugin-components-pane/package.json +++ b/packages/plugin-components-pane/package.json @@ -20,9 +20,12 @@ ], "author": "xiayang.xy", "dependencies": { + "@ali/intl-universal": "^0.4.12", "@ali/lowcode-designer": "^1.0.8-0", "@ali/lowcode-editor-core": "^1.0.8-0", "@ali/lowcode-types": "^1.0.8-0", + "@ali/vu-layer": "^4.0.1", + "@ali/vu-uxcore-legao-design": "^1.4.0", "@alifd/next": "^1.19.19", "react": "^16.8.1" }, diff --git a/packages/plugin-components-pane/src/components/base/index.js b/packages/plugin-components-pane/src/components/base/index.tsx similarity index 79% rename from packages/plugin-components-pane/src/components/base/index.js rename to packages/plugin-components-pane/src/components/base/index.tsx index 97283f518..a7664223b 100644 --- a/packages/plugin-components-pane/src/components/base/index.js +++ b/packages/plugin-components-pane/src/components/base/index.tsx @@ -1,10 +1,11 @@ -import React from "react"; -import { Search, Box } from "@alifd/next"; -import Button from "../button/index.js"; -import Card from "../card"; -import $i18n from "../../i18n/index.js"; -import { searchComponent, builtinSearchMap } from "../../utils"; -import "./index.less"; +import React from 'react'; +import PropTypes from 'prop-types'; +import { Search, Box } from '@alifd/next'; +import Button from '../button'; +import Card from '../card'; +import $i18n from '../../i18n/index'; +import { searchComponent, builtinSearchMap } from '../../utils'; +import './index.less'; /** * 配置元素的操作类型 @@ -13,9 +14,9 @@ import "./index.less"; * All：可拖拽也可点击 */ export const AdditiveType = { - Draggable: "additive-drag", - Clickable: "additive-click", - All: "additive", + Draggable: 'additive-drag', + Clickable: 'additive-click', + All: 'additive', }; class Base extends React.Component { @@ -23,33 +24,27 @@ class Base extends React.Component { metaData: PropTypes.array, className: PropTypes.string, registerAdditive: PropTypes.func, - renderCustomSnippet: PropTypes.func, actions: PropTypes.array, getComponentInfo: PropTypes.func, enableSearch: PropTypes.bool, - enableCard: PropTypes.bool, - enableReport: PropTypes.bool, placeholder: PropTypes.string, }; static defaultProps = { metaData: [], - registerAdditive: () => { - return; - }, - className: "", + registerAdditive: () => {}, + className: '', renderCustomSnippet: null, actions: [], getComponentInfo: null, enableSearch: false, enableCard: true, enableReport: true, - placeholder: "", + placeholder: '', }; state = { - selected: "", - searchText: "", + searchText: '', currentCard: null, target: null, currentCardImage: '', @@ -63,7 +58,7 @@ class Base extends React.Component { isMouseEnterCard = false; - componentWillMount() { + UNSAFE_componentWillMount() { // TODO get remote search map this.searchMap = builtinSearchMap; } @@ -85,9 +80,9 @@ class Base extends React.Component { normalizeBundle(mode) { const { metaData } = this.props; - const { searchText = "" } = this.state; + const { searchText = '' } = this.state; const groupList = metaData.filter((comp, index) => { - const { title = "", componentName = "", id = "" } = comp; + const { title = '', componentName = '', id = '' } = comp; if (!id) { comp.id = `${comp.componentName}_${index}`; } @@ -103,10 +98,10 @@ class Base extends React.Component { return groupList; } - let bundle = {}; + const bundle = {}; // 按一定顺序排列 groupList.forEach((m) => { - const c = m.category || "Others"; + const c = m.category || 'Others'; if (!bundle[c]) { bundle[c] = []; } @@ -119,7 +114,7 @@ class Base extends React.Component { this.isEmpty = true; return ( - +
暂无组件，请在物料站点添加
@@ -131,14 +126,8 @@ class Base extends React.Component { const { placeholder } = this.props; return ( =3：一个主按钮、一个次按钮、其余放在按钮组里； return actions.map((action, idx) => { return ( @@ -162,7 +151,7 @@ class Base extends React.Component { key={idx} action={action} className="btn" - type={idx === 0 ? "primary" : "outline"} + type={idx === 0 ? 'primary' : 'outline'} > {action.title} @@ -194,7 +183,7 @@ class Base extends React.Component { componentPrototype={currentCard} target={target} customImage={currentCardImage} - subTitle={target && target.innerText || ''} + subTitle={target ? target.innerText : ''} position="right top" visible={!!currentCard} showClose @@ -219,18 +208,18 @@ class Base extends React.Component { enableSearch, className, registerAdditive = () => { - return; + }, } = this.props; - let bodyExtraClass = ""; + let bodyExtraClass = ''; if (this.hasActions() && enableSearch) { - bodyExtraClass = "small"; + bodyExtraClass = 'small'; } else if (!this.hasActions() && enableSearch) { - bodyExtraClass = "medium"; + bodyExtraClass = 'medium'; } else if (this.hasActions() && !enableSearch) { - bodyExtraClass = "large"; + bodyExtraClass = 'large'; } else { - bodyExtraClass = ""; + bodyExtraClass = ''; } return ( @@ -256,7 +245,7 @@ class Base extends React.Component {
{this.renderActions()} diff --git a/packages/plugin-components-pane/src/components/button/index.js b/packages/plugin-components-pane/src/components/button/index.tsx similarity index 69% rename from packages/plugin-components-pane/src/components/button/index.js rename to packages/plugin-components-pane/src/components/button/index.tsx index d1d385e22..929915344 100644 --- a/packages/plugin-components-pane/src/components/button/index.js +++ b/packages/plugin-components-pane/src/components/button/index.tsx @@ -1,4 +1,4 @@ -import { Button } from "@ali/vu-uxcore-legao-design"; +import { Button } from '@ali/vu-uxcore-legao-design'; import './index.less'; const MyButton = (props) => { @@ -6,10 +6,10 @@ const MyButton = (props) => { return (
diff --git a/packages/plugin-components-pane/src/components/component-list/index.js b/packages/plugin-components-pane/src/components/component-list/index.tsx similarity index 88% rename from packages/plugin-components-pane/src/components/component-list/index.js rename to packages/plugin-components-pane/src/components/component-list/index.tsx index b14eb7f78..79f0425bc 100644 --- a/packages/plugin-components-pane/src/components/component-list/index.js +++ b/packages/plugin-components-pane/src/components/component-list/index.tsx @@ -1,23 +1,23 @@ -import Base, { AdditiveType } from "../base/index.js"; -import Snippet from "../snippet"; -import "./index.less"; +import Base, { AdditiveType } from '../base/index'; +import Snippet from '../snippet'; +import './index.less'; // 滚动事件触发灵敏度 const OFFSET_ACCURCY = 25; const categoryMap = { - General: "常用", - Navigation: "导航", - DataEntry: "输入", - DataDisplay: "展示", - Feedback: "反馈", - Util: "工具", - Chart: "图表", - Others: "其他", + General: '常用', + Navigation: '导航', + DataEntry: '输入', + DataDisplay: '展示', + Feedback: '反馈', + Util: '工具', + Chart: '图表', + Others: '其他', }; export default class ComponentList extends Base { - static displayName = "ComponentList"; + static displayName = 'ComponentList'; descRefList = new Map(); navRefList = new Map(); @@ -28,10 +28,10 @@ export default class ComponentList extends Base { scroll; scrollTimer; state = { - selected: "", - searchText: "", + selected: '', + searchText: '', currentCard: null, - currentCardImage: '' + currentCardImage: '', }; componentDidMount() { @@ -40,7 +40,7 @@ export default class ComponentList extends Base { // mock 滚动结束事件 if (this.scroll) { - this.scroll.addEventListener("scroll", this.handleScrollEnd); + this.scroll.addEventListener('scroll', this.handleScrollEnd); } }, 20); const bundle = this.normalizeBundle(); @@ -60,7 +60,7 @@ export default class ComponentList extends Base { componentWillUnmount() { if (this.scroll) { - this.scroll.removeEventListener("scroll", this.handleScrollEnd); + this.scroll.removeEventListener('scroll', this.handleScrollEnd); } } @@ -127,7 +127,7 @@ export default class ComponentList extends Base { fixSideBarView(selected) { const nav = this.navRefList.get(selected); if (nav) { - nav.scrollIntoView({ block: "center" }); + nav.scrollIntoView({ block: 'center' }); } } @@ -167,11 +167,11 @@ export default class ComponentList extends Base { {metaData.map((comp) => (
{ this.navRefList.set(comp.id, item); @@ -186,7 +186,7 @@ export default class ComponentList extends Base { } renderComponentDescriptionList(bundle) { - const { renderCustomSnippet = "", enableCard = true } = this.props; + const { renderCustomSnippet = '', enableCard = true } = this.props; return (
{Object.keys(bundle).map((cat) => { @@ -208,8 +208,7 @@ export default class ComponentList extends Base { {comp.title}
) : null} -
-
+
{comp.snippets && @@ -227,7 +226,7 @@ export default class ComponentList extends Base { this.setState({ currentCard: comp, target: this.snippetMap.get(`${comp.id}-${idx}`), - currentCardImage: snippet.thumbnail + currentCardImage: snippet.thumbnail, }); this.timer = null; }, 1000); @@ -242,7 +241,7 @@ export default class ComponentList extends Base { if (this.isMouseEnterCard) { return; } - this.setState({currentCard: null}); + this.setState({ currentCard: null }); }, 200); }} > @@ -270,7 +269,7 @@ export default class ComponentList extends Base { key="content" className="ve-component-list-content" onScroll={(e) => this.handleScroll(e)} - ref={(scroll) => (this.scroll = scroll)} + ref={(scroll) => { this.scroll = scroll; }} > {this.renderComponentDescriptionList(bundle)}
, diff --git a/packages/plugin-components-pane/src/components/snippet/index.js b/packages/plugin-components-pane/src/components/snippet/index.tsx similarity index 59% rename from packages/plugin-components-pane/src/components/snippet/index.js rename to packages/plugin-components-pane/src/components/snippet/index.tsx index fed12c8e7..a8f299659 100644 --- a/packages/plugin-components-pane/src/components/snippet/index.js +++ b/packages/plugin-components-pane/src/components/snippet/index.tsx @@ -1,41 +1,41 @@ -import { Fragment } from "react"; -import { Icon } from "@alifd/next"; -import { AdditiveType } from "../base"; -import "./index.less"; +import { Fragment } from 'react'; +import { Icon } from '@alifd/next'; +import { AdditiveType } from '../base'; +import './index.less'; const Snippet = (props) => { const { snippet, - renderCustomSnippet = "", - size = "small", + renderCustomSnippet = '', + size = 'small', actionsInLT, actionsInRT, } = props; const { - thumbnail = "https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png", + thumbnail = 'https://img.alicdn.com/tfs/TB1XHG6ehrI8KJjy0FpXXb5hVXa-740-608.png', description, - title = "未知" + title = '未知', } = snippet; const snippetClassName = `component-description-item-snippet ${AdditiveType.All} ${size}`; return (
- {typeof renderCustomSnippet === "function" ? ( + {typeof renderCustomSnippet === 'function' ? ( renderCustomSnippet(snippet) ) : (
- {typeof thumbnail === "string" && thumbnail.startsWith("http") ? ( + {typeof thumbnail === 'string' && thumbnail.startsWith('http') ? ( thumbnail ) : ( - + )}
{description || title}
- {actionsInLT ? actionsInLT : null} + {actionsInLT || null}
- {actionsInRT ? actionsInRT : null} + {actionsInRT || null}
)} diff --git a/packages/plugin-components-pane/src/i18n/index.js b/packages/plugin-components-pane/src/i18n/index.ts similarity index 98% rename from packages/plugin-components-pane/src/i18n/index.js rename to packages/plugin-components-pane/src/i18n/index.ts index eae0b99e3..9cecc0762 100644 --- a/packages/plugin-components-pane/src/i18n/index.js +++ b/packages/plugin-components-pane/src/i18n/index.ts @@ -39,7 +39,7 @@ if (PSEUDO_LANGUAGE_TAG === CURRENT_LANGUAGE) { update(CURRENT_LANGUAGE); } -module.exports = { +export default { get, update, }; diff --git a/packages/plugin-components-pane/src/i18n/strings/index.js b/packages/plugin-components-pane/src/i18n/strings/index.ts similarity index 79% rename from packages/plugin-components-pane/src/i18n/strings/index.js rename to packages/plugin-components-pane/src/i18n/strings/index.ts index 9b61c93e1..01d106371 100644 --- a/packages/plugin-components-pane/src/i18n/strings/index.js +++ b/packages/plugin-components-pane/src/i18n/strings/index.ts @@ -1,4 +1,4 @@ -module.exports = { +export default { 'en-US': require('./en-US.json'), 'zh-CN': require('./zh-CN.json'), }; diff --git a/packages/plugin-components-pane/src/index.tsx b/packages/plugin-components-pane/src/index.tsx index b3f5ee578..97a12bbb2 100644 --- a/packages/plugin-components-pane/src/index.tsx +++ b/packages/plugin-components-pane/src/index.tsx @@ -1,15 +1,15 @@ import { Component, ReactNode } from 'react'; import { Tab } from '@alifd/next'; -import ComponentList from "./components/component-list"; -import { AdditiveType } from "./components/base" +import ComponentList from './components/component-list'; +import { AdditiveType } from './components/base'; import { PluginProps } from '@ali/lowcode-types'; import { Designer } from '@ali/lowcode-designer'; import './index.scss'; export interface IState { - metaData: object[]; - bizComponents: object[]; + metaData: Record[]; + bizComponents: Record[]; } export default class ComponentListPlugin extends Component { @@ -35,7 +35,10 @@ export default class ComponentListPlugin extends Component } transformMetaData(componentList: any): any { - const metaData: object[] = []; + const metaData: Record[] = []; + if (!componentList || !Array.isArray(componentList) || !componentList.length) { + return metaData; + } componentList.forEach((category: any, categoryId: number) => { if (Array.isArray(category?.children)) { category.children.forEach((comp: any, compId: number) => { @@ -98,20 +101,7 @@ export default class ComponentListPlugin extends Component return; } - const click = (e: Event) => { - if ( - (e.target.tagName === 'ICON' - && e.target.parentNode - && e.target.parentNode.classList.contains('engine-additive-helper')) - || e.target.classList.contains('engine-additive-helper') - ) { - return; - } - const snippetId = getSnippetId(e.target, AdditiveType.Clickable); - if (!snippetId || !this.snippetsMap.get(snippetId)) { - return; - } - }; + const click = (e: Event) => { console.log(e); }; shell.addEventListener('click', click); @@ -136,22 +126,22 @@ export default class ComponentListPlugin extends Component return (
- - this.registerAdditive(shell)} - enableSearch - /> - - - this.registerAdditive(shell)} - enableSearch - /> - + + this.registerAdditive(shell)} + enableSearch + /> + + + this.registerAdditive(shell)} + enableSearch + /> +
); diff --git a/packages/plugin-components-pane/src/utils.js b/packages/plugin-components-pane/src/utils.js deleted file mode 100644 index fc46ee975..000000000 --- a/packages/plugin-components-pane/src/utils.js +++ /dev/null @@ -1,99 +0,0 @@ -export const builtinSearchMap = { - "容器": "容器、rongqi、rq、分栏、ColumnsLayout、Columns、layout、grid", - "分栏": "分栏、ColumnsLayout、Columns、layout、grid、容器、rongqi、rq、fl、fenlan", - "卡片": "卡片、card、kapian、kp", - "选项卡": "选项卡、tab、tabs、页签、xuanxiangka、xxk、yeqian、yq", - "按钮": "按钮、button、anniu、an", - "图标": "图标、icon、tubiao、tb", - "标题": "标题、title、biaoti、bt", - "图片": "图片、image、pic、picture、tupian、tp", - "Dialog": "对话框、Dialog、弹框、弹出框、duihuakuang、dhk", - "Drawer": "抽屉、Drawer、chouti、ct、couti", - "文本": "文本、文字、text、wenzi、wz、wenben", - "链接": "链接、link、lianjie、lj", - "链接块": "链接块、链接、link、lianjie、lj、ljk", - "表单容器": "表单容器、表单、form、biaodan、bd", - "输入框": "输入框、文本框、密码框、input、shurukuang、srk、wenbenkuang、wbk", - "数字输入框": "数字输入框、数字、输入框、Number、NumberPicker、shuzi、sz、srk、shurukuang", - "单选": "单选、radio button、radio、danxuan、dx", - "多选": "复选、复选框、多选、Checkbox、check、fuxuan、fx、dx、duoxuan", - "下拉选择": "下拉选择、Select、选择器、下拉、xiala、xl、xialaxuanze、xlxz", - "开关": "开关、switch、kaiguan、kg", - "日期": "日期选择、date、DatePicker、riqi、riqixuanz、rq、rqxz", - "日期区间": "日期区间、Cascade、date、riqiqujian、rq", - "时间选择框": "时间选择、time、TimePicker、shijian、sj、shijianxuanze、sjxz、xuanzekuang", - "上传图片": "上传图片、upload、上传、shangchuan、sc、tupian", - "上传附件": "上传附件、upload、上传、shangchuan、sc、fujian", - "树形选择": "树形选择、树型选择、树选择、tree、TreeSelect、shu、sxz、shuxingxuanze", - "级联选择": "级联选择、Cascade、Cascadeselect、级联、jilian、jl、jilianxuanze、jlxz", - "地区选择": "地区选择、city、地址、address、地区、diqu、dq、diquxuanze、dqxz", - "国家选择": "国家选择、country、国家、guojia、gj、guojiaxuanze、gjxz", - "评分": "评分、Rate、Rating、星、pingfen、pf", - "明细": "明细、table、表格、表单、form、mingxi、mx", - "穿梭框": "穿梭框、transfer、chuansuokuang、csk", - "人员搜索框": "人员搜索框、employee、人员选择、选人、xuanren、xr、renyuansousuo、ryss", - "筛选": "筛选、pickable、shaixuan、sx", - "金额输入框": "金额输入框、输入框、shurukuang、srk、money、金额、jine、je", - "金额区间": "金额区间、money、金额、jine、je", - "查询": "查询、filter、chaxun、cx", - "表格": "表格、table、biaoge、bg", - "数据文本": "数据文本、Number Info、数据、shuju、sj、shujuwenben、sjwb", - "数据趋势": "数据趋势、Number Trend、数据、shuju、sj、shujuqushi、sjqs", - "勾选框": "勾选框、复选框、check box、gouxuankuang、gxk、fuxuankuang、fxk", - "图片浏览": "图片浏览、图片预览、image、pic、picture、图片、预览、tupianyulan、tupianliulan、tupian、tp、yulan、yl", - "搜索": "搜索、搜索框、查询框、查询、search、sousuo、ss", - "树形控件": "树形控件、树组件、tree、shuzujian、shuxingkongjian、shu、szj、sxkj", - "富文本框": "富文本框、RichText、fuwenben、fwb", - "步骤": "步骤、步骤条、step、steps、buzhoutiao、buzhou、bzt、bz", - "时间轴": "时间轴、时间线、timeline、shijianzhou、shijianxian、sjz、sjx", - "菜单": "菜单、menu、caidan、cd", - "气泡提示": "气泡提示、tip、tips、balloon、气泡、qipao、qp、qipaotishi、qpts", - "面包屑": "面包屑、breadcrumb、crumb、mianbaoxie、mbx", - "日历": "日历、calendar、rili、rl", - "折叠面板": "折叠面板、collapse、折叠、zhedie、zd、zhediemianban、zdmb", - "下拉菜单": "下拉菜单、dropdown、下拉、xiala、xl、xialacaidan、xlcd、菜单、caidan、cd", - "信息提示": "信息提示、message、alert、信息、提示、警示、xinxitishi、xxts、xinxi、xx、tishi、ts、消息、xiaoxi", - "进度指示器": "进度指示器、进度条、progress、jindutiao、jdt、进度、jindu、jd", - "翻页器": "翻页器、分页器、pagination、fanyeqi、fyq、分页、fenye、fy", - "轮播图": "轮播图、图片轮播、slider、轮播、lunbo、lb、lunbotu、lbt", - "底部通栏": "底部通栏、tool bar、通栏、dibutonglan、dbtl、浮动工具条、浮动、工具条、工具、fudong、gongju、toolbar、tool bar、fd、gj", - "HTML": "html", - "JSX": "jsx", - "浮动导航": "浮动导航、nav、floatNav、fudongdaohang、fddh", - "Iframe": "Iframe", - "Markdown": "Markdown", - "区段选择器": "区段选择、滑块选择、区段、滑块、选择、Range、quduan、huakuai、xuanze、qdxz、hkxz、xz" -}; - -/** - * - * @param {string} title 组件名 - * @param {string} query 搜索词 - * @param {object} map 映射关系 - */ -export function searchComponent(title, query, map = {}) { - if (!title || !query || !map || !map[title]) { - return false; - } - const keys = (map[title] || '').split('、'); - return !!keys.find(key => { - if (!key) { - return false; - } - return key.indexOf(query) > -1 - }); -} - -export function debounce(func, delay) { - let timer - return function(...args) { - if (timer) { - return - } - timer = setTimeout(() => { - func.apply(this, args) - clearTimeout(timer) - timer = null - }, delay) - } -} diff --git a/packages/plugin-components-pane/src/utils.ts b/packages/plugin-components-pane/src/utils.ts new file mode 100644 index 000000000..c8b6cbb64 --- /dev/null +++ b/packages/plugin-components-pane/src/utils.ts @@ -0,0 +1,98 @@ +export const builtinSearchMap = { + 容器: '容器、rongqi、rq、分栏、ColumnsLayout、Columns、layout、grid', + 分栏: '分栏、ColumnsLayout、Columns、layout、grid、容器、rongqi、rq、fl、fenlan', + 卡片: '卡片、card、kapian、kp', + 选项卡: '选项卡、tab、tabs、页签、xuanxiangka、xxk、yeqian、yq', + 按钮: '按钮、button、anniu、an', + 图标: '图标、icon、tubiao、tb', + 标题: '标题、title、biaoti、bt', + 图片: '图片、image、pic、picture、tupian、tp', + Dialog: '对话框、Dialog、弹框、弹出框、duihuakuang、dhk', + Drawer: '抽屉、Drawer、chouti、ct、couti', + 文本: '文本、文字、text、wenzi、wz、wenben', + 链接: '链接、link、lianjie、lj', + 链接块: '链接块、链接、link、lianjie、lj、ljk', + 表单容器: '表单容器、表单、form、biaodan、bd', + 输入框: '输入框、文本框、密码框、input、shurukuang、srk、wenbenkuang、wbk', + 数字输入框: '数字输入框、数字、输入框、Number、NumberPicker、shuzi、sz、srk、shurukuang', + 单选: '单选、radio button、radio、danxuan、dx', + 多选: '复选、复选框、多选、Checkbox、check、fuxuan、fx、dx、duoxuan', + 下拉选择: '下拉选择、Select、选择器、下拉、xiala、xl、xialaxuanze、xlxz', + 开关: '开关、switch、kaiguan、kg', + 日期: '日期选择、date、DatePicker、riqi、riqixuanz、rq、rqxz', + 日期区间: '日期区间、Cascade、date、riqiqujian、rq', + 时间选择框: '时间选择、time、TimePicker、shijian、sj、shijianxuanze、sjxz、xuanzekuang', + 上传图片: '上传图片、upload、上传、shangchuan、sc、tupian', + 上传附件: '上传附件、upload、上传、shangchuan、sc、fujian', + 树形选择: '树形选择、树型选择、树选择、tree、TreeSelect、shu、sxz、shuxingxuanze', + 级联选择: '级联选择、Cascade、Cascadeselect、级联、jilian、jl、jilianxuanze、jlxz', + 地区选择: '地区选择、city、地址、address、地区、diqu、dq、diquxuanze、dqxz', + 国家选择: '国家选择、country、国家、guojia、gj、guojiaxuanze、gjxz', + 评分: '评分、Rate、Rating、星、pingfen、pf', + 明细: '明细、table、表格、表单、form、mingxi、mx', + 穿梭框: '穿梭框、transfer、chuansuokuang、csk', + 人员搜索框: '人员搜索框、employee、人员选择、选人、xuanren、xr、renyuansousuo、ryss', + 筛选: '筛选、pickable、shaixuan、sx', + 金额输入框: '金额输入框、输入框、shurukuang、srk、money、金额、jine、je', + 金额区间: '金额区间、money、金额、jine、je', + 查询: '查询、filter、chaxun、cx', + 表格: '表格、table、biaoge、bg', + 数据文本: '数据文本、Number Info、数据、shuju、sj、shujuwenben、sjwb', + 数据趋势: '数据趋势、Number Trend、数据、shuju、sj、shujuqushi、sjqs', + 勾选框: '勾选框、复选框、check box、gouxuankuang、gxk、fuxuankuang、fxk', + 图片浏览: '图片浏览、图片预览、image、pic、picture、图片、预览、tupianyulan、tupianliulan、tupian、tp、yulan、yl', + 搜索: '搜索、搜索框、查询框、查询、search、sousuo、ss', + 树形控件: '树形控件、树组件、tree、shuzujian、shuxingkongjian、shu、szj、sxkj', + 富文本框: '富文本框、RichText、fuwenben、fwb', + 步骤: '步骤、步骤条、step、steps、buzhoutiao、buzhou、bzt、bz', + 时间轴: '时间轴、时间线、timeline、shijianzhou、shijianxian、sjz、sjx', + 菜单: '菜单、menu、caidan、cd', + 气泡提示: '气泡提示、tip、tips、balloon、气泡、qipao、qp、qipaotishi、qpts', + 面包屑: '面包屑、breadcrumb、crumb、mianbaoxie、mbx', + 日历: '日历、calendar、rili、rl', + 折叠面板: '折叠面板、collapse、折叠、zhedie、zd、zhediemianban、zdmb', + 下拉菜单: '下拉菜单、dropdown、下拉、xiala、xl、xialacaidan、xlcd、菜单、caidan、cd', + 信息提示: '信息提示、message、alert、信息、提示、警示、xinxitishi、xxts、xinxi、xx、tishi、ts、消息、xiaoxi', + 进度指示器: '进度指示器、进度条、progress、jindutiao、jdt、进度、jindu、jd', + 翻页器: '翻页器、分页器、pagination、fanyeqi、fyq、分页、fenye、fy', + 轮播图: '轮播图、图片轮播、slider、轮播、lunbo、lb、lunbotu、lbt', + 底部通栏: '底部通栏、tool bar、通栏、dibutonglan、dbtl、浮动工具条、浮动、工具条、工具、fudong、gongju、toolbar、tool bar、fd、gj', + HTML: 'html', + JSX: 'jsx', + 浮动导航: '浮动导航、nav、floatNav、fudongdaohang、fddh', + Iframe: 'Iframe', + Markdown: 'Markdown', + 区段选择器: '区段选择、滑块选择、区段、滑块、选择、Range、quduan、huakuai、xuanze、qdxz、hkxz、xz', +}; + +/** + * @param {string} title 组件名 + * @param {string} query 搜索词 + * @param {object} map 映射关系 + */ +export function searchComponent(title, query, map = {}) { + if (!title || !query || !map || !map[title]) { + return false; + } + const keys = (map[title] || '').split('、'); + return !!keys.find(key => { + if (!key) { + return false; + } + return key.indexOf(query) > -1; + }); +} + +export function debounce(func, delay) { + let timer; + return function (...args) { + if (timer) { + return; + } + timer = setTimeout(() => { + func.apply(this, args); + clearTimeout(timer); + timer = null; + }, delay); + }; +}