Merge pull request alibaba#8 from bindoon/panel-update

jinchanz · web-flow · commit aeb2b8488db5 · 2022-03-21T14:37:50.000+08:00
fix: Panel for Search
diff --git a/packages/plugin-components-pane/demo/component.md b/packages/plugin-components-pane/demo/component.md
@@ -7,7 +7,7 @@ order: 2
 
 ````jsx
 import React, { Component } from 'react';
-import ComponentPane, { PaneIcon } from '@alife/lowcode-plugin-components-pane';
+import ComponentPane, { PaneIcon } from '@alilc/lowcode-plugin-components-pane';
 import Editor from '../schema/editor';
 import mock from '../schema/mock.json';
 
diff --git a/packages/plugin-components-pane/demo/epoch.md b/packages/plugin-components-pane/demo/epoch.md
@@ -7,7 +7,7 @@ order: 3
 
 ````jsx
 import React, { Component } from 'react';
-import ComponentPane, { PaneIcon } from '@alife/lowcode-plugin-components-pane';
+import ComponentPane, { PaneIcon } from '@alilc/lowcode-plugin-components-pane';
 import Editor from '../schema/editor';
 import mock from '../schema/mock2.json';
 
diff --git a/packages/plugin-components-pane/demo/usage.md b/packages/plugin-components-pane/demo/usage.md
@@ -9,7 +9,7 @@ order: 1
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Icon } from '@alifd/next';
-import ComponentPane, { PaneIcon } from '@alife/lowcode-plugin-components-pane';
+import ComponentPane, { PaneIcon } from '@alilc/lowcode-plugin-components-pane';
 import './index.scss';
 
 const packages = [
diff --git a/packages/plugin-components-pane/src/index.tsx b/packages/plugin-components-pane/src/index.tsx
@@ -202,7 +202,7 @@ export default class ComponentPane extends React.Component<ComponentPaneProps, C
   }
 
   renderContent() {
-    const { filter = [] } = this.state;
+    const { filter = [], keyword } = this.state;
     const hasContent = filter.filter(item => {
       return item?.categories?.filter(category => {
         return category?.components?.length;
@@ -211,6 +211,40 @@ export default class ComponentPane extends React.Component<ComponentPaneProps, C
     if (!hasContent) {
       return this.renderEmptyContent();
     }
+    if (keyword) {
+      return (
+        <div ref={this.registerAdditive}>
+          {filter.map((group) => {
+            const { categories } = group;
+            {return categories.map((category) => {
+              const { components } = category;
+              const cname = this.t(category.name);
+              return (
+                <Category key={cname} name={cname}>
+                  <List>
+                    {components.map((component) => {
+                      const { componentName, snippets = [] } = component;
+                      return snippets.filter(snippet => snippet.id).map(snippet => {
+                        return (
+                          <Component
+                            data={{
+                              title: snippet.title || component.title,
+                              icon: snippet.screenshot || component.icon,
+                              snippets: [snippet]
+                            }}
+                            key={`${this.t(group.name)}_${this.t(componentName)}_${this.t(snippet.title)}`}
+                          />
+                        );
+                      });
+                    })}
+                  </List>
+                </Category>
+              );
+            })}
+          })}
+        </div>
+      )
+    }
     return (
       <Tab className={cx('tabs')}>
         {filter.map((group) => {
@@ -260,6 +294,7 @@ export default class ComponentPane extends React.Component<ComponentPaneProps, C
             placeholder="搜索组件"
             shape="simple"
             hasClear
+            autoFocus
             onSearch={this.handleSearch}
             onChange={this.handleSearch}
           />
