feat: addPanel add renderTitle for user custom (umijs#3646)

dxlyf · Nov 18, 2019 · 1115aab · 1115aab
1 parent 32d2e2c
commit 1115aab
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/umi-build-dev/src/plugins/commands/block/ui/client/index.tsx b/packages/umi-build-dev/src/plugins/commands/block/ui/client/index.tsx
@@ -26,7 +26,7 @@ export default (api: IUiApi) => {
 
   api.addPanel({
     title: 'org.umi.ui.blocks.content.title',
-    titleComponent: () => <TitleTab />,
+    headerTitle: <TitleTab />,
     provider: ({ children, ...restProps }) => (
       <Container.Provider initialState={{ api }} {...restProps}>
         {children}

diff --git a/packages/umi-types/ui.d.ts b/packages/umi-types/ui.d.ts
@@ -85,6 +85,10 @@ declare namespace IUI {
     icon: IconType | string;
     actions?: IPanelAction;
     beta?: boolean;
+    /** header title, default use `title` */
+    headerTitle?: ReactNode;
+    /** custom title Component */
+    renderTitle?: (title: string) => ReactNode;
   }
 
   interface IService {

diff --git a/packages/umi-ui/client/src/layouts/Dashboard.tsx b/packages/umi-ui/client/src/layouts/Dashboard.tsx
@@ -132,6 +132,7 @@ export default withRouter(props => {
           );
 
           const MenuItem = ({ panel, ...restProps }) => {
+            const { renderTitle } = panel;
             const renderIcon = () => {
               const icon = typeof panel.icon === 'string' ? { type: panel.icon } : panel.icon;
 
@@ -145,6 +146,9 @@ export default withRouter(props => {
               return <Icon {...icon} />;
             };
 
+            const titleText = renderLocaleText(panel.title);
+            const titleNode = renderTitle ? renderTitle(titleText) : titleText;
+
             return (
               <Menu.Item
                 key={panel.path}
@@ -156,9 +160,9 @@ export default withRouter(props => {
                 <NavLink exact to={`${panel.path}${search}`}>
                   {renderIcon()}
                   {isMini ? (
-                    <p className={styles.menuText}>{renderLocaleText(panel.title)}</p>
+                    <p className={styles.menuText}>{titleNode}</p>
                   ) : (
-                    <span className={styles.menuItem}>{renderLocaleText(panel.title)}</span>
+                    <span className={styles.menuItem}>{titleNode}</span>
                   )}
                 </NavLink>
               </Menu.Item>
@@ -330,7 +334,7 @@ export default withRouter(props => {
                       <div key="header" className={styles.header}>
                         <h1>
                           {activePanel &&
-                            (activePanel.titleComponent ? activePanel.titleComponent() : title)}
+                            (activePanel.headerTitle ? activePanel.headerTitle : title)}
                         </h1>
                         {Array.isArray(actions) && actions.length > 0 && (
                           <Row type="flex" className={styles['header-actions']}>