浏览代码

fix: fix split button lost className when child changed

代强 1 年之前
父节点
当前提交
4fb96e8feb
共有 1 个文件被更改,包括 27 次插入5 次删除
  1. 27 5
      packages/semi-ui/button/splitButtonGroup.tsx

+ 27 - 5
packages/semi-ui/button/splitButtonGroup.tsx

@@ -14,22 +14,44 @@ export interface SplitButtonGroupProps extends BaseProps {
 export default class SplitButtonGroup extends BaseComponent<SplitButtonGroupProps> {
 
     containerRef: React.RefObject<HTMLDivElement> = React.createRef();
-
+    mutationObserver: MutationObserver | null = null;
     static propTypes = {
         style: PropTypes.object,
         className: PropTypes.string,
         'aria-label': PropTypes.string,
     };
 
-    componentDidMount() { 
-        if (this.containerRef.current) {
+    componentDidMount() {
+        const addClassName = ()=>{
             const buttons = this.containerRef.current.querySelectorAll('button');
             const firstButton = buttons[0];
             const lastButton = buttons[buttons.length - 1];
-            firstButton?.classList.add(`${prefixCls}-first`);
-            lastButton?.classList.add(`${prefixCls}-last`);
+            if (!firstButton?.classList.contains(`${prefixCls}-first`)) {
+                firstButton?.classList.add(`${prefixCls}-first`);
+            }
+            if (!lastButton?.classList.contains(`${prefixCls}-last`)) {
+                lastButton?.classList.add(`${prefixCls}-last`);
+            }
+
+        };
+        if (this.containerRef.current) {
+            addClassName();
+            const mutationObserver = new MutationObserver((mutations, observer)=>{
+                for (const mutation of mutations) {
+                    if ((mutation.type === "attributes" && mutation.attributeName === "class") || (mutation.type==='childList' && Array.from( mutation.addedNodes).some(node=>node.nodeName==='BUTTON'))) {
+                        addClassName();
+                    }
+                }
+            });
+            mutationObserver.observe(this.containerRef.current, { attributes: true, childList: true, subtree: true });
+            this.mutationObserver = mutationObserver;
         }
     }
+    
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.mutationObserver?.disconnect();
+    }
 
     render() {
         const { children, style, className } = this.props;