v2.4.3

demos/common/Index.css

@@ -76,13 +76,13 @@
 }
 
 .wx-demos.sidebar.active {
-  width: 300px;
+  width: 320px;
 }
 
 .wx-demos.sidebar-content {
   display: flex;
   flex-direction: column;
-  width: 300px;
+  width: 320px;
   gap: 16px;
   height: 100%;
   border-right: 1px solid #ebebeb;
@@ -133,7 +133,7 @@
 .wx-demos.box-links {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
 }
 
 .wx-demos.hint {
@@ -210,14 +210,14 @@
 .wx-demos.demo {
   display: flex;
   align-items: center;
-  height: 37px;
   font-weight: 400;
-  padding-left: 16px;
+  padding: 8px 12px 8px 16px;
   border-left: 4px solid transparent;
   color: #595b66;
   list-style: none;
   cursor: pointer;
   text-decoration: none;
+  min-height: 38px;
 }
 
 .wx-demos.demo.active {
@@ -226,7 +226,26 @@
 
 .wx-demos.demo.active,
 .wx-demos.demo:hover {
-  font-weight: 500;
+  font-weight: 400;
   color: #42454d;
   background-color: #f1f1f1;
 }
+
+.wx-demos.demo.active {
+  font-weight: 500;
+}
+
+.wx-demos.demo .pro {
+  color: #087a9f;
+  border: 1px solid #087a9f;
+  border-radius: 4px;
+  padding: 0px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: auto;
+  letter-spacing: 0.4px;
+}
+
+.wx-theme {
+  height: 100%;
+}

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>

demos/common/Router.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   Routes,
   Route,
@@ -12,7 +12,9 @@ export default function Router({ onRouteChange }) {
   const location = useLocation();
   const navigate = useNavigate();
 
+  const lastRef = useRef(location.pathname);
   useEffect(() => {
+    if (lastRef.current === location.pathname) return;
     if (location.pathname === '/') {
       navigate('/base/willow', { replace: true });
     } else {