feat(general-modal): 增加模态框标题后插槽

Closes INSTANCE-1390
easyops-cn · Feb 8, 2021 · 18c9d1e · 18c9d1e
1 parent 9f94548
commit 18c9d1e
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 3 deletions.
diff --git a/bricks/basic-bricks/src/general-modal/GeneralModal.tsx b/bricks/basic-bricks/src/general-modal/GeneralModal.tsx
@@ -2,19 +2,26 @@ import React, { useEffect, useRef, useState } from "react";
 import classnames from "classnames";
 import { Modal, Button } from "antd";
 import { ModalProps } from "antd/lib/modal";
-import { TextAlignProperty } from "csstype";
 import { GeneralIcon } from "@next-libs/basic-components";
 import { MenuIcon } from "@next-core/brick-types";
 
 const fullscreenTopOffset = 40;
 
+const titleAlignPropertyMap: Record<string, string> = {
+  start: "flex-start",
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  end: "flex-end",
+};
+
 interface GeneralModalProps {
   visible: boolean;
   configProps?: ModalProps;
   modalTitle: string;
   hideCancelButton?: boolean;
   enableFooterSlot?: boolean;
-  titleAlign?: TextAlignProperty;
+  titleAlign?: string;
   titleIcon?: MenuIcon;
   fullscreen?: boolean;
   okDisabled?: boolean;
@@ -112,11 +119,20 @@ export function GeneralModal(props: GeneralModalProps): React.ReactElement {
       className={classnames({ wrapper: hideCancelButton })}
       title={
         modalTitle && (
-          <div style={{ textAlign: titleAlign }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: titleAlignPropertyMap[titleAlign],
+            }}
+          >
             {titleIcon && (
               <GeneralIcon icon={titleIcon} style={{ marginRight: 8 }} />
             )}
             {modalTitle}
+            <span className="headerExtra">
+              <slot id="headerExtra" name="headerExtra"></slot>
+            </span>
           </div>
         )
       }

diff --git a/bricks/basic-bricks/src/general-modal/index.shadow.less b/bricks/basic-bricks/src/general-modal/index.shadow.less
@@ -33,3 +33,10 @@
     }
   }
 }
+
+.headerExtra {
+  display: inline-flex;
+  margin-left: 20px;
+  align-items: center;
+  height: 22px;
+}
diff --git a/bricks/basic-bricks/src/general-modal/index.tsx b/bricks/basic-bricks/src/general-modal/index.tsx
@@ -27,6 +27,7 @@ export interface OpenCloseOption {
  * @author ice
  * @slots
  * content:模态框里面的内容
+ * headerExtra:模态框头部标题后面的内容
  * @history
  * 1.26.0:新增 `modal.close` 事件
  * 1.34.0:新增 `width` 属性

diff --git a/bricks/basic-bricks/stories/chapters/general-modal.ts b/bricks/basic-bricks/stories/chapters/general-modal.ts
@@ -291,5 +291,68 @@ export const generalModalStory: Story = {
         },
       },
     },
+    {
+      description: {
+        title: "标题后自定义构件",
+      },
+      brick: "div",
+      slots: {
+        content: {
+          bricks: [
+            {
+              brick: "basic-bricks.general-button",
+              events: {
+                "general.button.click": {
+                  method: "open",
+                  target: "#title-extra",
+                },
+              },
+              properties: {
+                buttonName: "点击弹出模态框",
+              },
+            },
+            {
+              brick: "basic-bricks.general-modal",
+              properties: {
+                id: "title-extra",
+                modalTitle: "执行结果",
+                okText: "ok",
+                titleAlign: "left",
+              },
+              slots: {
+                content: {
+                  bricks: [
+                    {
+                      brick: "h3",
+                      properties: {
+                        textContent: "modal content",
+                      },
+                    },
+                  ],
+                  type: "bricks",
+                },
+                headerExtra: {
+                  bricks: [
+                    {
+                      brick: "presentational-bricks.brick-tag",
+                      properties: {
+                        color: "var(--bg-color-button-warning)",
+                        showCard: false,
+                        tagList: ["警告"],
+                        tagStyle: {
+                          marginLeft: "-4px",
+                        },
+                      },
+                    },
+                  ],
+                  type: "bricks",
+                },
+              },
+            },
+          ],
+          type: "bricks",
+        },
+      },
+    },
   ],
 };