make cached default to true, deprecate animated property

Author: rinick

HISTORY.md

@@ -1,5 +1,9 @@
-# History
-----
+## 4.0.0
+
+- migrate to pnpm
+- migrate to @rc-component packages
+- deprecated animated property in Tab
+- make Tab cached property default to true
 
 ## 3.2.18 / 2023-06-08
 - fix the issue that sometimes dock icons are shown and no UI response after switching tabs quickly

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-dock",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "dock layout for react component",
   "repository": {
     "type": "git",
@@ -48,7 +48,7 @@
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.6",
     "@types/shelljs": "^0.8.11",
-    "less": "^4.1.2",
+    "less": "^4.2.0",
     "node-gyp": "^10.1.0",
     "prismjs": "^1.26.0",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -37,10 +37,10 @@ export interface TabGroup {
    * default false
    */
   tabLocked?: boolean;
+
   /**
+   * @deprecated no longer supported
    * Whether to show animation effect when switch tabs.
-   *
-   * default true
    */
   animated?: boolean;
 
@@ -208,9 +208,8 @@ export interface TabData extends TabBase, DockDataBase {
 
 
   /**
-   * - when value is true: content will always reuse the react component thus allows the component to keep its internal state
-   * - when value is false: content will be destroyed when it's not visible, [[TabGroup.animated]] should be set to false, otherwise animation would show blank pages
-   * - when value is undefined: content is rendered normally as react component
+   * - when value is true (default): content will always reuse the react component thus allows the component to keep its internal state
+   * - when value is false: content will be destroyed when it's not visible
    */
   cached?: boolean;
   /**

src/DockData.ts

@@ -51,7 +51,6 @@ export default class DockTabPane extends React.PureComponent<DockTabPaneProps, a
       style,
       id,
       active,
-      animated,
       // destroyInactiveTabPane, // Not in @rc-component/tabs TabPaneProps
       tabKey,
       children,
@@ -61,13 +60,7 @@ export default class DockTabPane extends React.PureComponent<DockTabPaneProps, a
     } // Removed destroyInactiveTabPane check
     const mergedStyle: React.CSSProperties = {};
     if (!active) {
-      if (animated) {
-        mergedStyle.visibility = 'hidden';
-        mergedStyle.height = 0;
-        mergedStyle.overflowY = 'hidden';
-      } else {
-        mergedStyle.display = 'none';
-      }
+      mergedStyle.display = 'none';
     }
 
 

src/DockTabPane.tsx

@@ -177,7 +177,7 @@ export class TabCache {
     // Store the tab label and content for use in items array
     this.tabLabel = tab;
     this.tabContent = content;
-    this.cached = cached;
+    this.cached = cached ?? true;
 
     return null; // We don't return JSX here anymore
   }
@@ -334,10 +334,7 @@ export class DockTabs extends React.PureComponent<Props> {
   render(): React.ReactNode {
     let {group, tabs, activeId} = this.props.panelData;
     let tabGroup = this.context.getGroup(group);
-    let {animated, moreIcon} = tabGroup;
-    if (animated == null) {
-      animated = true;
-    }
+    let {moreIcon} = tabGroup;
     if (!moreIcon) {
       moreIcon = "...";
     }
@@ -358,7 +355,6 @@ export class DockTabs extends React.PureComponent<Props> {
             cacheId={id}
             cached={tabCache.cached}
             active={isActive}
-            animated={animated}
             prefixCls="dock"
           >
             {tabCache.tabContent}
@@ -373,7 +369,6 @@ export class DockTabs extends React.PureComponent<Props> {
     return (
       <Tabs prefixCls="dock"
             more={{icon: moreIcon}}
-            animated={animated}
             renderTabBar={this.renderTabBar}
             activeKey={activeId}
             onChange={this.onTabChange}