fix(blocks-antd): Change to controlled tab, closes #1705

lowdefy · Nov 15, 2023 · c804c18 · c804c18
1 parent 5a750da
commit c804c18
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/Tabs/Tabs.js b/packages/plugins/blocks/blocks-antd/src/blocks/Tabs/Tabs.js
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { blockDefaultProps } from '@lowdefy/block-utils';
 import { Tabs } from 'antd';
 
@@ -29,35 +29,43 @@ const getTabs = ({ content, properties }) => {
   return tabs.filter((tab) => tab.key !== properties.extraAreaKey);
 };
 
-const getAdditionalProps = ({ content, properties }) => {
+const TabsBlock = ({ blockId, components: { Icon }, events, content, methods, properties }) => {
+  const tabs = getTabs({ content, properties });
   const additionalProps = {};
-  if (properties.activeKey) {
-    additionalProps.activeKey = properties.activeKey;
-  }
   if (properties.extraAreaKey) {
     additionalProps.tabBarExtraContent =
       content[properties.extraAreaKey] && content[properties.extraAreaKey]();
   }
-  return additionalProps;
-};
 
-const TabsBlock = ({ blockId, components: { Icon }, events, content, methods, properties }) => {
-  const tabs = getTabs({ content, properties });
-  const additionalProps = getAdditionalProps({ content, properties });
+  const [key, setKey] = useState(
+    properties.activeKey ?? properties.defaultActiveKey ?? tabs[0].key
+  );
+  useEffect(() => {
+    if (properties.activeKey !== key) {
+      setKey(properties.activeKey);
+    }
+  }, [properties.activeKey]);
+
   return (
     <Tabs
+      activeKey={key}
       animated={properties.animated !== undefined ? properties.animated : true}
-      defaultActiveKey={properties.defaultActiveKey ?? tabs[0].key}
       id={blockId}
-      onChange={(activeKey) => methods.triggerEvent({ name: 'onChange', event: { activeKey } })}
+      onChange={(activeKey) => {
+        setKey(activeKey);
+        methods.triggerEvent({ name: 'onChange', event: { activeKey } });
+      }}
       size={properties.size ?? 'default'}
       tabBarStyle={methods.makeCssClass(properties.tabBarStyle, true)}
       tabPosition={properties.tabPosition ?? 'top'}
       type={properties.tabType ?? 'line'}
       onTabScroll={({ direction }) =>
         methods.triggerEvent({ name: 'onTabScroll', event: { direction } })
       }
-      onTabClick={(key) => methods.triggerEvent({ name: 'onTabClick', event: { key } })}
+      onTabClick={(key) => {
+        setKey(key);
+        methods.triggerEvent({ name: 'onTabClick', event: { key } });
+      }}
       items={tabs.map((tab) => ({
         id: `${blockId}_${tab.key}`,
         key: tab.key,