feat(Tab): feat addIcon func, close alibaba-fusion#4109

siyou · Sep 19, 2022 · df84688 · df84688
1 parent b7b6bc6
commit df84688
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/docs/tab/index.md b/docs/tab/index.md
@@ -53,6 +53,7 @@ Fusion 提供了三级选项卡，分别用于不同的场景。
 | popupProps          | 弹层属性透传, 只有当 excessMode 为 dropdown 时生效                                                                                                                                                                                        | Object        | -        |
 | icons               | 自定义组件内 icon                                                                                                                                                                                                                  | Object        | {}       |
 | showAdd             | 新增按钮                                                                                                                                                                                                                         | Boolean       | -        |
+| addIcon             | 自定义添加按钮                                                                                                                                                                                                                         | ReactNode       | -        |
 | onAdd               | 新增的事件回调<br/><br/>**签名**:<br/>Function() => void                                                                                                                                                                              | Function      | -        |
 
 ### Tab.Item

diff --git a/src/tab/tab.jsx b/src/tab/tab.jsx
@@ -124,6 +124,10 @@ class Tab extends Component {
          * 新增的事件回调
          */
         onAdd: PropTypes.func,
+        /**
+         * 自定义添加按钮
+         */
+        addIcon: PropTypes.node,
     };
 
     static defaultProps = {
@@ -312,6 +316,7 @@ class Tab extends Component {
             icons,
             showAdd,
             onAdd,
+            addIcon,
             ...others
         } = this.props;
         const { activeKey } = this.state;
@@ -353,6 +358,7 @@ class Tab extends Component {
             locale,
             icons,
             showAdd,
+            addIcon,
             onAdd,
         };
 

diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx
@@ -289,7 +289,7 @@ class Nav extends React.Component {
     };
 
     renderTabList(props, hideAdd) {
-        const { prefix, tabs, activeKey, tabRender, showAdd, onAdd } = props;
+        const { prefix, tabs, activeKey, tabRender, showAdd, onAdd, addIcon } = props;
         const tabTemplateFn = tabRender || this.defaultTabTemplateRender;
 
         const rst = [];
@@ -339,9 +339,7 @@ class Nav extends React.Component {
         if (!hideAdd && showAdd) {
             rst.push(
                 <li role="button" className={`${prefix}tabs-tab ${prefix}tabs-add`} onClick={onAdd} key="add">
-                    <div className={`${prefix}tabs-tab-inner`}>
-                        <Icon type="add" />
-                    </div>
+                    <div className={`${prefix}tabs-tab-inner`}>{addIcon ? addIcon : <Icon type="add" />}</div>
                 </li>
             );
         }
@@ -499,6 +497,7 @@ class Nav extends React.Component {
             className,
             showAdd,
             onAdd,
+            addIcon,
             rtl,
         } = this.props;
         const state = this.state;
@@ -594,9 +593,7 @@ class Nav extends React.Component {
                         {nextButton}
                         {restButton}
                         <li className={`${prefix}tabs-tab ${prefix}tabs-add`} onClick={onAdd} key="add">
-                            <div className={`${prefix}tabs-tab-inner`}>
-                                <Icon type="add" />
-                            </div>
+                            <div className={`${prefix}tabs-tab-inner`}>{addIcon ? addIcon : <Icon type="add" />}</div>
                         </li>
                     </div>
                 ) : (

diff --git a/types/tab/index.d.ts b/types/tab/index.d.ts
@@ -153,6 +153,11 @@ export interface TabProps extends HTMLAttributesWeak, CommonProps {
      * 新增的事件回调
      */
     onAdd?: () => void,
+
+    /**
+     * 自定义添加按钮
+     */
+    addIcon?: React.ReactNode;
 }
 
 export default class Tab extends React.Component<TabProps, any> {