v2.4.3

demos/common/Index.jsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { HashRouter, NavLink, useNavigate } from 'react-router-dom';
+import { Willow } from '@svar-ui/react-core';
 
 import Router from './Router';
 import { links } from '../routes';
@@ -18,38 +19,28 @@ function DemoExplorerContent({
   const [skin, setSkin] = useState(skins[0].id);
   const [title, setTitle] = useState('');
   const [githubLink, setGithubLink] = useState('');
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(true);
 
   const baseLink =
     'https://github.com/svar-widgets/react-' +
     productTag +
     '/tree/main/demos/cases/';
 
-  useEffect(() => {
-    document.body.className = `wx-willow-theme`;
+  const handleRouteChange = useCallback((path) => {
+    const parts = path.split('/');
+    const page = parts[1];
+    const newSkin = parts[2];
+    setSkin(newSkin);
+
+    const targetPage = `/${page}/:skin`;
+    const matched = links.find((a) => a[0] === targetPage);
+    if (matched) {
+      setTitle(matched[1]);
+      const name = matched[3] || matched[1];
+      setGithubLink(`${baseLink}${name}.jsx`);
+    }
   }, []);
 
-  const handleRouteChange = useCallback(
-    (path) => {
-      const parts = path.split('/');
-      const page = parts[1];
-      const newSkin = parts[2];
-
-      if (newSkin && newSkin !== skin) {
-        setSkin(newSkin);
-      }
-
-      const targetPage = `/${page}/:skin`;
-      const matched = links.find((a) => a[0] === targetPage);
-      if (matched) {
-        setTitle(matched[1]);
-        const name = matched[3] || matched[1];
-        setGithubLink(`${baseLink}${name}.jsx`);
-      }
-    },
-    [skin],
-  );
-
   const handleSkinChange = ({ value }) => {
     setSkin(value);
     const currentPath = window.location.hash.slice(1);
@@ -63,8 +54,10 @@ function DemoExplorerContent({
     setShow(!show);
   };
 
+  const SkinComponent = skins.find((s) => s.id === skin).Component;
+
   return (
-    <div className={`wx-demos layout ${show ? 'active' : ''}`}>
+    <div className={`wx-demos wx-willow-theme layout ${show ? 'active' : ''}`}>
       <div
         className={`wx-demos sidebar ${show ? 'active' : ''}`}
         role="tabpanel"
@@ -81,7 +74,7 @@ function DemoExplorerContent({
               </a>
               <div className="wx-demos separator"></div>
               <a
-                href={`https://svar.dev/react/${productTag}/`}
+                href={`https://svar.dev/react/gantt/`}
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -107,6 +100,7 @@ function DemoExplorerContent({
                 }
               >
                 {data[1]}
+                {data[4] && data[4].pro && <span className="pro">PRO</span>}
               </NavLink>
             ))}
           </div>
@@ -159,7 +153,9 @@ function DemoExplorerContent({
             data-wx-portal-root="true"
           >
             <Globals>
-              <Router skin={skin} onRouteChange={handleRouteChange} />
+              <SkinComponent>
+                <Router skin={skin} onRouteChange={handleRouteChange} />
+              </SkinComponent>
             </Globals>
           </div>
         </div>
@@ -169,12 +165,9 @@ function DemoExplorerContent({
 }
 
 export default function DemoExplorer(props) {
-  const skins = props.skins;
   return (
     <>
-      {skins.map((skin) => (
-        <skin.Component key={skin.id} />
-      ))}
+      <Willow />
       <HashRouter>
         <DemoExplorerContent {...props} />
       </HashRouter>