fix(): 给brickTree增加searchBrick

close CD-3201
easyops-cn · Oct 28, 2022 · 6ae438d · 6ae438d
1 parent e8a42f3
commit 6ae438d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/bricks/presentational-bricks/src/brick-tree/BrickTree.tsx b/bricks/presentational-bricks/src/brick-tree/BrickTree.tsx
@@ -181,6 +181,7 @@ export interface BrickTreeProps {
       | { checked: React.Key[]; halfChecked: React.Key[] }
   ): void;
   suffixBrick?: { useBrick: UseBrickConf };
+  searchBrick?: { useBrick: UseBrickConf };
   showSpecificationTitleStyle?: boolean;
   defaultExpandAll?: boolean;
   deselectable?: boolean;
@@ -200,6 +201,7 @@ export function BrickTree(props: BrickTreeProps): React.ReactElement {
     checkAllEnabled,
     checkedFilterConfig: { field, value, operator } = {},
     suffixBrick,
+    searchBrick,
     showSpecificationTitleStyle,
     defaultExpandAll,
     deselectable,
@@ -361,12 +363,19 @@ export function BrickTree(props: BrickTreeProps): React.ReactElement {
   return (
     <>
       {searchable && (
-        <Input.Search
-          placeholder={placeholder}
-          onChange={(e) => onChange(e.target.value)}
-          style={{ marginBottom: 8 }}
-          data-testid="search-input"
-        />
+        <div style={{ display: "flex" }}>
+          <Input.Search
+            placeholder={placeholder}
+            onChange={(e) => onChange(e.target.value)}
+            style={{ marginBottom: 8 }}
+            data-testid="search-input"
+          />
+          {!isEmpty(searchBrick?.useBrick) && (
+            <BrickAsComponent
+              useBrick={searchBrick?.useBrick}
+            ></BrickAsComponent>
+          )}
+        </div>
       )}
       {configProps.checkable && checkAllEnabled && (
         <div style={{ marginBottom: 6, display: "flex", alignItems: "center" }}>

diff --git a/bricks/presentational-bricks/src/brick-tree/index.tsx b/bricks/presentational-bricks/src/brick-tree/index.tsx
@@ -183,6 +183,17 @@ export class BrickTreeElement extends UpdatingElement {
   })
   suffixBrick: { useBrick: UseBrickConf };
 
+  /**
+   * @kind {useBrick:[UseBrickConf](http://docs.developers.easyops.cn/docs/api-reference/brick-types.usebrickconf)}
+   * @required false
+   * @default -
+   * @description 搜索框右边的自定义项，当`searchable`为true时生效
+   */
+  @property({
+    attribute: false,
+  })
+  searchBrick: { useBrick: UseBrickConf };
+
   /**
    * @kind boolean
    * @required false
@@ -250,6 +261,7 @@ export class BrickTreeElement extends UpdatingElement {
             onCheck={this._handleCheck}
             checkedFilterConfig={this.checkedFilterConfig}
             suffixBrick={this.suffixBrick}
+            searchBrick={this.searchBrick}
             showSpecificationTitleStyle={this.showSpecificationTitleStyle}
             defaultExpandAll={this.defaultExpandAll}
             deselectable={this.deselectable}

diff --git a/bricks/presentational-bricks/src/index.ts b/bricks/presentational-bricks/src/index.ts
@@ -42,8 +42,8 @@ import "./general-list";
 // !Lazy: import "./modal-confirm";
 import "./brick-quick-entries";
 import "./collapsible-card-item";
-import "./single-field-edit";
-import "./brick-placeholder";
+// !Lazy: import "./single-field-edit";
+// !Lazy: import "./brick-placeholder";
 import "./general-carousel";
 import "./agent-status";
 import "./dynamic-content";

diff --git a/bricks/presentational-bricks/src/interfaces/common.ts b/bricks/presentational-bricks/src/interfaces/common.ts
@@ -3,6 +3,7 @@ export interface EasyopsEmptyProps {
   description?: string;
   imageStyle?: React.CSSProperties;
   illustration?: IllustrationProps;
+  noImage?: boolean;
 }
 
 export interface IllustrationProps {