replace jsxTab with tsxTab

rinick · rinick · commit 759412e196cc · 2025-09-02T00:51:30.000-07:00
diff --git a/example/adv-save-layout.tsx b/example/adv-save-layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout, TabBase, TabData, PanelBase, PanelData, LayoutBase} from '../src';
 
 let groups = {
@@ -66,7 +66,7 @@ class Demo extends React.Component<{}, DemoState> {
         {
           id: 'main-panel',
           size: 400,
-          tabs: [{id: 'tab0'}, {id: 'jsxTab'}, {id: 'htmlTab'}],
+          tabs: [{id: 'tab0'}, {id: 'tsxTab'}, {id: 'htmlTab'}],
           panelLock: {
             panelStyle: 'main'
           }
@@ -92,8 +92,8 @@ class Demo extends React.Component<{}, DemoState> {
     switch (id) {
       case 'tab0':
         return tab0;
-      case 'jsxTab':
-        return jsxTab;
+      case 'tsxTab':
+        return tsxTab;
       case 'htmlTab':
         return htmlTab;
       default:
diff --git a/example/adv-tab-update.tsx b/example/adv-tab-update.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout, PanelData} from '../src';
 
 let groups = {
@@ -69,7 +69,7 @@ class Demo extends React.Component<{}, DemoState> {
                 </div>
               )
             },
-            jsxTab,
+            tsxTab,
             htmlTab
           ],
         },
diff --git a/example/basic.tsx b/example/basic.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab, htmlTab} from './prism-tabs';
+import {tsxTab, htmlTab} from './prism-tabs';
 import {DockLayout, DockContextType, DragState} from '../src';
 
 let tab = {
@@ -42,7 +42,7 @@ let layout: any = {
                 </div>
               ),
             },
-            jsxTab,
+            tsxTab,
             htmlTab,
           ],
           panelLock: {panelStyle: 'main'},
diff --git a/example/controlled-layout.tsx b/example/controlled-layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout, LayoutBase, TabBase, TabData, DropDirection} from '../src';
 
 let tab0 = {
@@ -22,7 +22,7 @@ let box = {
         mode: 'vertical',
         children: [
           {
-            tabs: [{id: 't0'}, htmlTab, jsxTab],
+            tabs: [{id: 't0'}, htmlTab, tsxTab],
           },
           {
             tabs: [{id: 'protect1'}, {id: 't4'}, {id: 't5'}, {id: 't6'}],
@@ -57,8 +57,8 @@ class Demo extends React.Component<{}, DemoState> {
             This is done in the onLayoutChange callback
           </div>
         };
-      case jsxTab.id:
-        return jsxTab;
+      case tsxTab.id:
+        return tsxTab;
       case htmlTab.id:
         return htmlTab;
     }
diff --git a/example/dark-theme.tsx b/example/dark-theme.tsx
@@ -1,2 +1,2 @@
-// The jsx is same as basic example.
+// The tsx is same as basic example.
 // Only difference is in the css, just use dist/rc-dock-dark.css for dark theme.
diff --git a/example/disable-dock.tsx b/example/disable-dock.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab, htmlTab} from './prism-tabs';
+import {tsxTab, htmlTab} from './prism-tabs';
 import {DockLayout, DockContextType} from '../src';
 
 
@@ -17,7 +17,7 @@ let layout: any = {
     mode: 'horizontal',
     children: [
       {
-        tabs: [{id: 't1', title: 'Dock', content: <div>Dock Content</div>}, jsxTab, htmlTab],
+        tabs: [{id: 't1', title: 'Dock', content: <div>Dock Content</div>}, tsxTab, htmlTab],
       }
     ]
   },
diff --git a/example/divider-box.tsx b/example/divider-box.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab, htmlTab} from './prism-tabs';
+import {tsxTab, htmlTab} from './prism-tabs';
 import {DockLayout, DividerBox} from '../src';
 
 let layoutLeft = {
@@ -28,7 +28,7 @@ let layoutRight = {
           id: 't3',
           title: 'Dock',
           content: <div>Right Side Dock Layout.</div>
-        }, jsxTab, htmlTab],
+        }, tsxTab, htmlTab],
       }
     ]
   },
diff --git a/example/drag-new-tab.tsx b/example/drag-new-tab.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout, DragDropDiv, DragState} from '../src';
 
 let tab = {
@@ -16,7 +16,7 @@ let box = {
         mode: 'vertical',
         children: [
           {
-            tabs: [jsxTab, htmlTab],
+            tabs: [tsxTab, htmlTab],
           },
           {
             tabs: [{...tab, id: 't4'}, {...tab, id: 't5'}, {...tab, id: 't6'}],
diff --git a/example/drop-mode.tsx b/example/drop-mode.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout} from '../src';
 
 let dropModeTab = {
@@ -26,7 +26,7 @@ let box = {
         mode: 'vertical',
         children: [
           {
-            tabs: [{...dropModeTab, id: 't1'}, jsxTab, htmlTab],
+            tabs: [{...dropModeTab, id: 't1'}, tsxTab, htmlTab],
           },
           {
             tabs: [{...tab, id: 't4'}, {...tab, id: 't5'}, {...tab, id: 't6'}],
diff --git a/example/gesture.tsx b/example/gesture.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab} from "./prism-tabs";
+import {tsxTab} from "./prism-tabs";
 import {DragDropDiv, GestureState} from '../src';
 
 interface DemoState {
@@ -39,7 +39,7 @@ class Demo extends React.PureComponent<{}, DemoState> {
           dx: {dx} <br/>
           dy: {dy} <br/>
         </div>
-        {jsxTab.content}
+        {tsxTab.content}
       </div>
     );
   }
diff --git a/example/index.tsx b/example/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
 import {Divider} from '../src';
-// keep the above unused import so tools script can understand this jsx
+// keep the above unused import so tools script can understand this tsx
 
 let demos = ['basic', 'dark-theme', 'panel-style', 'drop-mode', 'tab-update', 'save-layout', 'panel-extra'];
 let advance = ['new-window', 'adv-tab-update', 'adv-save-layout', 'controlled-layout', 'tab-cache', 'divider-box', 'drag-new-tab'];
diff --git a/example/new-window.tsx b/example/new-window.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout} from '../src';
 
 let groups = {
@@ -44,7 +44,7 @@ class Demo extends React.Component {
           mode: 'vertical',
           children: [
             {
-              tabs: [this.mainTab, jsxTab, htmlTab],
+              tabs: [this.mainTab, tsxTab, htmlTab],
               panelLock: {panelStyle: 'main'},
             }
           ]
diff --git a/example/panel-extra.tsx b/example/panel-extra.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout, DockContextType, PanelData, DockContext} from '../src';
 
 let groups = {
@@ -69,7 +69,7 @@ let box = {
         size: 500,
         children: [
           {
-            tabs: [{...tab, id: 't1'}, {...jsxTab, group: 'close-all'}, {...htmlTab, group: 'close-all'}],
+            tabs: [{...tab, id: 't1'}, {...tsxTab, group: 'close-all'}, {...htmlTab, group: 'close-all'}],
           },
           {
             tabs: [newTab(), newTab()],
diff --git a/example/panel-style.tsx b/example/panel-style.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab, htmlTab} from './prism-tabs';
+import {tsxTab, htmlTab} from './prism-tabs';
 import {DockLayout} from '../src';
 
 let groups = {
@@ -84,7 +84,7 @@ let box = {
                   </div>
                 )
               },
-              jsxTab,
+              tsxTab,
               htmlTab
             ],
           },
diff --git a/example/prism-tabs.tsx b/example/prism-tabs.tsx
@@ -3,11 +3,11 @@ import * as React from "react";
 let name = window.location.pathname.split('/').pop();
 name = name.substr(0, name.length - 5);
 
-export const jsxTab = {
-  id: 'jsxTab',
-  title: 'jsx',
+export const tsxTab = {
+  id: 'tsxTab',
+  title: 'tsx',
   closable: true,
-  content: <iframe src={`./${name}.jsx.html`}/>
+  content: <iframe src={`./${name}.tsx.html`}/>
 };
 
 
diff --git a/example/save-layout.tsx b/example/save-layout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout, LayoutBase} from '../src';
 
 let tab1 = {id: 't1', title: 'Tab 1', content: <div>Tab 1</div>};
@@ -19,7 +19,7 @@ let defaultLayout = {
         mode: 'vertical',
         children: [
           {
-            tabs: [tab1, jsxTab, htmlTab],
+            tabs: [tab1, tsxTab, htmlTab],
           },
           {
             tabs: [tab2, tab3, tab4],
@@ -37,7 +37,7 @@ let panelLayout = {
     mode: 'horizontal',
     children: [
       {
-        tabs: [{id: 't1'}, {id: 't2'}, {id: 't3'}, {id: 't4'}, {id: 't5'}, {id: 't6'}, {id: 'jsxTab'}, {id: 'htmlTab'}],
+        tabs: [{id: 't1'}, {id: 't2'}, {id: 't3'}, {id: 't4'}, {id: 't5'}, {id: 't6'}, {id: 'tsxTab'}, {id: 'htmlTab'}],
       },
     ]
   }
@@ -46,7 +46,7 @@ let horizontalLayout = {
   dockbox: {
     mode: 'horizontal',
     children: [
-      {tabs: [{id: 't1'}, {id: 'jsxTab'}, {id: 'htmlTab'}]},
+      {tabs: [{id: 't1'}, {id: 'tsxTab'}, {id: 'htmlTab'}]},
       {tabs: [{id: 't2'}]},
       {tabs: [{id: 't3'}]},
       {tabs: [{id: 't4'}]},
diff --git a/example/standalone-divider.tsx b/example/standalone-divider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab} from "./prism-tabs";
+import {tsxTab} from "./prism-tabs";
 import {Divider} from '../src';
 
 interface DemoState {
@@ -54,7 +54,7 @@ class Demo extends React.Component<{}, DemoState> {
           <div style={{width: sizes[2]}}/>
         </div>
         Dragging with shift key to resize all children, otherwise only 2 children are affected
-        {jsxTab.content}
+        {tsxTab.content}
       </div>
     );
   }
diff --git a/example/tab-cache.tsx b/example/tab-cache.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout} from '../src';
 
 let cachedTab = {
@@ -43,7 +43,7 @@ let box = {
     mode: 'vertical',
     children: [
       {
-        tabs: [{...cachedTab, id: 'cache1'}, {...cachedTab, id: 'cache2'}, jsxTab, htmlTab],
+        tabs: [{...cachedTab, id: 'cache1'}, {...cachedTab, id: 'cache2'}, tsxTab, htmlTab],
       },
       {
         tabs: [{...nocachedTab, id: 'nocache1'}, {...nocachedTab, id: 'nocache2'}],
diff --git a/example/tab-min-size.tsx b/example/tab-min-size.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {jsxTab, htmlTab} from './prism-tabs';
+import {tsxTab, htmlTab} from './prism-tabs';
 import {DockLayout} from '../src';
 
 function getTab(width: number, height: number) {
@@ -33,7 +33,7 @@ let box = {
           {
             tabs: [getTab(300, 100), getTab(100, 100)],
           },
-          jsxTab,
+          tsxTab,
           htmlTab
         ]
       },
diff --git a/example/tab-update.tsx b/example/tab-update.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from "react-dom/client";
-import {htmlTab, jsxTab} from "./prism-tabs";
+import {htmlTab, tsxTab} from "./prism-tabs";
 import {DockLayout} from '../src';
 
 const Context = React.createContext<number>(0);
@@ -31,7 +31,7 @@ class Demo extends React.Component<{}, DemoState> {
                 </div>
               )
             },
-            jsxTab,
+            tsxTab,
             htmlTab],
         },
         {

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-// The jsx is same as basic example.`
	`1`	`+// The tsx is same as basic example.`
`2`	`2`	`// Only difference is in the css, just use dist/rc-dock-dark.css for dark theme.`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import * as React from 'react';`
`2`	`2`	`import * as ReactDOM from 'react-dom';`
`3`	`3`	`import { createRoot } from "react-dom/client";`
`4`		`-import {jsxTab, htmlTab} from './prism-tabs';`
	`4`	`+import {tsxTab, htmlTab} from './prism-tabs';`
`5`	`5`	`import {DockLayout, DockContextType} from '../src';`
`6`	`6`
`7`	`7`
`@@ -17,7 +17,7 @@ let layout: any = {`
`17`	`17`	`mode: 'horizontal',`
`18`	`18`	`children: [`
`19`	`19`	`{`
`20`		`- tabs: [{id: 't1', title: 'Dock', content: <div>Dock Content</div>}, jsxTab, htmlTab],`
	`20`	`+ tabs: [{id: 't1', title: 'Dock', content: <div>Dock Content</div>}, tsxTab, htmlTab],`
`21`	`21`	`}`
`22`	`22`	`]`
`23`	`23`	`},`