v2.3.1

2025-10-22 08:13:59 +00:00
commit 80ca059fb8
162 changed files with 16816 additions and 0 deletions
@@ -0,0 +1,183 @@
+import { useState, useEffect, useCallback } from 'react';
+import { HashRouter, NavLink, useNavigate } from 'react-router-dom';
+
+import Router from './Router';
+import { links } from '../routes';
+import { GitHubLogoIcon, LogoIcon } from '../assets/icons';
+import './Index.css';
+
+function DemoExplorerContent({
+  productTag,
+  publicName,
+  skins,
+  Globals,
+  Button,
+  Segmented,
+}) {
+  const navigate = useNavigate();
+  const [skin, setSkin] = useState(skins[0].id);
+  const [title, setTitle] = useState('');
+  const [githubLink, setGithubLink] = useState('');
+  const [show, setShow] = useState(false);
+
+  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];
+
+      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);
+    const parts = currentPath.split('/');
+    if (parts[1]) {
+      navigate(`/${parts[1]}/${value}`);
+    }
+  };
+
+  const toggleSidebar = () => {
+    setShow(!show);
+  };
+
+  return (
+    <div className={`wx-demos layout ${show ? 'active' : ''}`}>
+      <div
+        className={`wx-demos sidebar ${show ? 'active' : ''}`}
+        role="tabpanel"
+      >
+        <div className="wx-demos sidebar-content">
+          <div className="wx-demos sidebar-header">
+            <div className="wx-demos box-title">
+              <a
+                href="https://svar.dev/react/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={LogoIcon} alt="Logo icon" className="box-title-img" />
+              </a>
+              <div className="wx-demos separator"></div>
+              <a
+                href={`https://svar.dev/react/${productTag}/`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <h1 className="wx-demos title">React {publicName}</h1>
+              </a>
+            </div>
+            <div className="wx-demos btn-box">
+              <Button
+                type="secondary"
+                icon="wxi-angle-left"
+                css="toggle-btn"
+                onClick={toggleSidebar}
+              ></Button>
+            </div>
+          </div>
+          <div className="wx-demos box-links">
+            {links.map((data) => (
+              <NavLink
+                key={data[0]}
+                to={data[0].replace(':skin', skin)}
+                className={({ isActive }) =>
+                  `wx-demos demo ${isActive ? 'active' : ''}`
+                }
+              >
+                {data[1]}
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="wx-demos page-content">
+        <div className="wx-demos page-content-header">
+          <div className="wx-demos header-title-box">
+            {!show && (
+              <div className="wx-demos btn-box">
+                <Button
+                  type="secondary"
+                  icon="wxi-angle-right"
+                  css="toggle-btn"
+                  onClick={toggleSidebar}
+                />
+              </div>
+            )}
+            <div className="wx-demos hint">{title}</div>
+          </div>
+          <div className="wx-demos header-actions-container">
+            <div className="wx-demos segmented-box">
+              <Segmented
+                value={skin}
+                options={skins}
+                css="segmented-themes"
+                onChange={handleSkinChange}
+              />
+            </div>
+            <div className="wx-demos btn-box">
+              <a href={githubLink} target="_blank" rel="noopener noreferrer">
+                <Button type="secondary" css="toggle-btn">
+                  <img src={GitHubLogoIcon} alt="GitHub icon" />
+                  See code on GitHub
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="wx-demos wrapper-content"
+          onClick={() => setShow(false)}
+          role="none"
+        >
+          <div
+            className={`wx-demos content wx-${skin}-theme`}
+            role="none"
+            data-wx-portal-root="true"
+          >
+            <Globals>
+              <Router skin={skin} onRouteChange={handleRouteChange} />
+            </Globals>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DemoExplorer(props) {
+  const skins = props.skins;
+  return (
+    <>
+      {skins.map((skin) => (
+        <skin.Component key={skin.id} />
+      ))}
+      <HashRouter>
+        <DemoExplorerContent {...props} />
+      </HashRouter>
+    </>
+  );
+}