clxx 2.1.7 → 3.0.0

package/build/utils/dom.js

@@ -23,12 +23,13 @@ function createPortalDOM(point) {
             root.render(component);
         },
         unmount() {
-            // 先从 DOM 移除容器，再卸载 React 树
-            // 避免 React 18+ 在已卸载的根上发出警告
+            // 先卸载 React 根，再从 DOM 移除容器
+            // React 18+ 推荐先 unmount 让 React 完成清理（包括 effect 的 cleanup），
+            // 然后再移除真实 DOM 节点；倒过来在严格模式下可能产生警告
+            root.unmount();
             if (container.parentNode) {
                 container.parentNode.removeChild(container);
             }
-            root.unmount();
         },
     };
 }

package/build/utils/theme.d.ts

@@ -0,0 +1,2 @@
+export declare const fontStack = "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif";
+export declare const numberFontStack = "\"SF Pro Text\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif";

package/build/utils/theme.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberFontStack = exports.fontStack = void 0;
+// 设计通用字体栈（与 iOS / 桌面/ 中文常见系统字体兼容）
+exports.fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+// 数字场景优先使用 SF Pro Text（iOS），其它退化到通用字体栈
+exports.numberFontStack = `"SF Pro Text", ${exports.fontStack}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clxx",
-  "version": "2.1.7",
+  "version": "3.0.0",
   "description": "Basic JS library for mobile devices",
   "main": "./build/index.js",
   "module": "./build/index.js",

package/test/src/date-picker/index.jsx

@@ -0,0 +1,119 @@
+import { showDatePicker } from "@";
+import { useState } from "react";
+
+export default function DatePickerDemo() {
+  const [result, setResult] = useState("");
+
+  const open = (precision) => {
+    showDatePicker({
+      precision,
+      title: `选择日期（${precision}）`,
+      onConfirm: (d) => {
+        const fmt =
+          precision === "day"
+            ? "YYYY-MM-DD"
+            : precision === "hour"
+              ? "YYYY-MM-DD HH时"
+              : precision === "minute"
+                ? "YYYY-MM-DD HH:mm"
+                : "YYYY-MM-DD HH:mm:ss";
+        setResult(d.format(fmt));
+      },
+      onCancel: () => {
+        console.log("取消选择");
+      },
+    });
+  };
+
+  return (
+    <div style={{ padding: "0.3rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem" }}>
+        <button onClick={() => open("day")}>选择年/月/日</button>
+        <button onClick={() => open("hour")}>选择年/月/日 + 时</button>
+        <button onClick={() => open("minute")}>选择年/月/日 + 时分</button>
+        <button onClick={() => open("second")}>选择年/月/日 + 时分秒</button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "minute",
+              value: "2024-06-15 10:30",
+              primary: "#16a34a",
+              minDate: "2024-01-01",
+              maxDate: "2026-12-31 23:59",
+              title: "自定义范围 + 绿色主题",
+              onConfirm: (d) => {
+                setResult(d.format("YYYY-MM-DD HH:mm"));
+              },
+            });
+          }}
+        >
+          自定义初值 / 范围 / 主题
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "minute",
+              showUnit: false,
+              title: "不显示单位",
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD HH:mm")),
+            });
+          }}
+        >
+          不显示单位
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "second",
+              units: {
+                year: "Y",
+                month: "M",
+                day: "D",
+                hour: "h",
+                minute: "m",
+                second: "s",
+              },
+              title: "英文单位",
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD HH:mm:ss")),
+            });
+          }}
+        >
+          自定义单位（英文）
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "day",
+              rounded: false,
+              title: "无圆角（rounded=false）",
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD")),
+            });
+          }}
+        >
+          无圆角
+        </button>
+        <button
+          onClick={() => {
+            showDatePicker({
+              precision: "day",
+              title: (
+                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.08rem" }}>
+                  <span style={{ color: "#ef4444" }}>★</span>
+                  <span>ReactNode 标题</span>
+                </span>
+              ),
+              cancelText: <span style={{ color: "#ef4444" }}>✕ 关</span>,
+              confirmText: <strong>OK ✓</strong>,
+              onConfirm: (d) => setResult(d.format("YYYY-MM-DD")),
+            });
+          }}
+        >
+          ReactNode 标题/按钮文案
+        </button>
+      </div>
+      <div style={{ marginTop: "0.4rem", fontSize: "0.3rem" }}>
+        选择结果：<span style={{ color: "#2f7dff" }}>{result || "（未选择）"}</span>
+      </div>
+    </div>
+  );
+}

package/test/src/index/index.jsx

@@ -17,6 +17,8 @@ const pageConfig = [
   // { path: 'privacy', title: 'Privacy去标识化', enable: true },
   { path: "autogrid", title: "AutoGrid生成自动对齐的表格", enable: true },
   { path: "city-select", title: "CitySelect城市选择器", enable: true },
+  { path: "date-picker", title: "DatePicker日期时间选择器", enable: true },
+  { path: "region-picker", title: "RegionPicker省市区选择器", enable: true },
 ];
 
 export default function Index() {

package/test/src/index.jsx

@@ -6,6 +6,7 @@ import Home from './index/index';
 createApp({
   target: "#root",
   // maxDocWidth: 10000,
+  maxWidth: 750,
   async render(pathname) {
     const module = await import(`./${pathname}/index.jsx`);
     const Page = module.default;

package/test/src/loading/index.jsx

@@ -8,7 +8,7 @@ export default function Index () {
       <button
         onClick={async () => {
           const close = await showLoading();
-          window.setTimeout(close, 5000);
+          window.setTimeout(close, 500000);
         }}
       >
         显示Loading
@@ -17,7 +17,7 @@ export default function Index () {
       <button
         onClick={async () => {
           const close = await showLoading("数据加载中...");
-          window.setTimeout(close, 5000);
+          window.setTimeout(close, 500000);
         }}
       >
         显示Loading

package/test/src/region-picker/index.jsx

@@ -0,0 +1,120 @@
+import { showRegionPicker } from "@";
+import { useState } from "react";
+
+export default function RegionPickerDemo() {
+  const [result, setResult] = useState("");
+  const [initial, setInitial] = useState(null);
+
+  const openDefault = () => {
+    showRegionPicker({
+      value: initial || undefined,
+      onConfirm: (sel) => {
+        const text = `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`;
+        setResult(text);
+        setInitial([sel.province.value, sel.city.value, sel.district.value]);
+      },
+      onCancel: () => {
+        console.log("取消选择");
+      },
+    });
+  };
+
+  const openWithInitial = () => {
+    showRegionPicker({
+      // 广东 / 广州 / 天河区
+      value: ["440000", "440100", "440106"],
+      title: "带初始值",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openCustomTheme = () => {
+    showRegionPicker({
+      primary: "#e53935",
+      title: "京东红主题",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openNoRounded = () => {
+    showRegionPicker({
+      rounded: false,
+      title: "无圆角",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openCustomLabels = () => {
+    showRegionPicker({
+      labels: { province: "选省份", city: "选城市", district: "选区县" },
+      cancelText: "放弃",
+      confirmText: "选好了",
+      title: "自定义文案",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openNoMaskClose = () => {
+    showRegionPicker({
+      maskClosable: false,
+      title: "点击遮罩不关闭",
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  const openReactNodeTitle = () => {
+    showRegionPicker({
+      title: (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.08rem" }}>
+          <span style={{ color: "#f59e0b" }}>★</span>
+          <span>ReactNode 标题</span>
+        </span>
+      ),
+      cancelText: <span style={{ color: "#ef4444" }}>✕ 关</span>,
+      confirmText: <strong>OK ✓</strong>,
+      onConfirm: (sel) => {
+        setResult(
+          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
+        );
+      },
+    });
+  };
+
+  return (
+    <div style={{ padding: "0.3rem" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem" }}>
+        <button onClick={openDefault}>默认（保留上次选择）</button>
+        <button onClick={openWithInitial}>带初始值（广东/广州/天河）</button>
+        <button onClick={openCustomTheme}>自定义主色（京东红）</button>
+        <button onClick={openNoRounded}>无圆角</button>
+        <button onClick={openCustomLabels}>自定义 tab 占位 / 按钮文案</button>
+        <button onClick={openNoMaskClose}>点击遮罩不关闭</button>
+        <button onClick={openReactNodeTitle}>ReactNode 标题/按钮</button>
+      </div>
+      <div style={{ marginTop: "0.4rem", fontSize: "0.3rem" }}>
+        选择结果：
+        <span style={{ color: "#2f7dff" }}>{result || "（未选择）"}</span>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/BasicSection.jsx

@@ -0,0 +1,56 @@
+import { useRef, useState } from "react";
+import { ScrollView } from "@";
+
+export default function BasicSection() {
+  const [list, setList] = useState(() =>
+    Array.from({ length: 8 }, (_, i) => i + 1),
+  );
+  const [hasMore, setHasMore] = useState(true);
+  const loadingRef = useRef(false);
+  const [stat, setStat] = useState({ scrollTop: 0, dir: "-" });
+
+  const loadMore = () => {
+    if (loadingRef.current || !hasMore) return;
+    loadingRef.current = true;
+    window.setTimeout(() => {
+      setList((prev) => {
+        const next = [...prev];
+        const start = prev.length;
+        for (let i = 1; i <= 8; i++) next.push(start + i);
+        if (next.length >= 40) setHasMore(false);
+        return next;
+      });
+      loadingRef.current = false;
+    }, 700);
+  };
+
+  return (
+    <div className="section">
+      <div className="section-title">基础：触底加载更多 + 触顶事件</div>
+      <div className="stat">
+        scrollTop: {stat.scrollTop.toFixed(0)}px / 方向: {stat.dir} / 共{" "}
+        {list.length} 项
+        {!hasMore && <span className="badge">已全部加载</span>}
+      </div>
+      <div className="section-body" style={{ height: "4.4rem" }}>
+        <ScrollView
+          showLoading={hasMore}
+          onScroll={(e) =>
+            setStat({ scrollTop: e.scrollTop, dir: e.direction })
+          }
+          onReachTop={() => console.log("[basic] reach top")}
+          onReachBottom={() => {
+            console.log("[basic] reach bottom => loadMore");
+            loadMore();
+          }}
+        >
+          {list.map((n) => (
+            <div className="item" key={n}>
+              第 {n} 项 — 内容占位行
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/CustomLoadingSection.jsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { ScrollView } from "@";
+
+export default function CustomLoadingSection() {
+  const [list, setList] = useState(() =>
+    Array.from({ length: 5 }, (_, i) => i + 1),
+  );
+  const [loading, setLoading] = useState(false);
+
+  const onReachBottom = () => {
+    if (loading) return;
+    setLoading(true);
+    window.setTimeout(() => {
+      setList((prev) => [
+        ...prev,
+        ...Array.from({ length: 5 }, (_, i) => prev.length + i + 1),
+      ]);
+      setLoading(false);
+    }, 600);
+  };
+
+  return (
+    <div className="section">
+      <div className="section-title">
+        自定义 loading 内容 + 触底阈值 100px
+      </div>
+      <div className="section-body" style={{ height: "4rem" }}>
+        <ScrollView
+          reachBottomThreshold={100}
+          onReachBottom={onReachBottom}
+          loadingContent={
+            <div
+              style={{
+                padding: "0.2rem",
+                textAlign: "center",
+                fontSize: "0.24rem",
+                color: loading ? "#2f7dff" : "#8e8e93",
+              }}
+            >
+              {loading ? "正在加载…" : "上拉加载更多"}
+            </div>
+          }
+        >
+          {list.map((n) => (
+            <div className="item" key={n}>
+              卡片 {n}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/HeightModeSection.jsx

@@ -0,0 +1,42 @@
+import { ScrollView } from "@";
+
+export default function HeightModeSection() {
+  return (
+    <div className="section">
+      <div className="section-title">两种高度方式：prop height vs CSS</div>
+      <div className="section-body">
+        <div style={{ display: "flex", gap: "0.16rem", padding: "0.16rem" }}>
+          <div style={{ flex: 1, border: "1px solid #eee" }}>
+            <div className="stat">prop height="2.4rem"</div>
+            <ScrollView height="2.4rem">
+              {Array.from({ length: 12 }, (_, i) => (
+                <div className="item" key={i}>
+                  A{i + 1}
+                </div>
+              ))}
+            </ScrollView>
+          </div>
+          <div
+            style={{
+              flex: 1,
+              border: "1px solid #eee",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <div className="stat">外层 flex 高 2.4rem</div>
+            <div style={{ height: "2.4rem" }}>
+              <ScrollView>
+                {Array.from({ length: 12 }, (_, i) => (
+                  <div className="item" key={i}>
+                    B{i + 1}
+                  </div>
+                ))}
+              </ScrollView>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/ImperativeSection.jsx

@@ -0,0 +1,56 @@
+import { useRef } from "react";
+import { ScrollView } from "@";
+
+export default function ImperativeSection() {
+  const ref = useRef(null);
+  const list = Array.from({ length: 30 }, (_, i) => i + 1);
+
+  return (
+    <div className="section">
+      <div className="section-title">命令式 API（forwardRef + handle）</div>
+      <div className="section-body" style={{ height: "4rem" }}>
+        <ScrollView ref={ref}>
+          {list.map((n) => (
+            <div
+              className={"item" + (n === 18 ? " target" : "")}
+              key={n}
+              data-index={n}
+            >
+              Item #{n}
+              {n === 18 && " ← 目标项"}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+      <div className="toolbar">
+        <button onClick={() => ref.current?.scrollToTop("smooth")}>
+          ↑ 顶部
+        </button>
+        <button onClick={() => ref.current?.scrollToBottom("smooth")}>
+          ↓ 底部
+        </button>
+        <button onClick={() => ref.current?.scrollTo({ top: 200 })}>
+          跳到 200px
+        </button>
+        <button
+          onClick={() =>
+            ref.current?.scrollToElement('[data-index="18"]', {
+              behavior: "smooth",
+              offset: -20,
+            })
+          }
+        >
+          滚到目标项
+        </button>
+        <button
+          onClick={() => {
+            const el = ref.current?.getElement();
+            console.log("getElement →", el);
+          }}
+        >
+          打印 DOM
+        </button>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/NotScrollableSection.jsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { ScrollView } from "@";
+
+export default function NotScrollableSection() {
+  const [items, setItems] = useState([1, 2]);
+  return (
+    <div className="section">
+      <div className="section-title">
+        内容不足时自动隐藏 loading（点击按钮加内容观察 loading 出现）
+      </div>
+      <div className="section-body" style={{ height: "3rem" }}>
+        <ScrollView showLoading>
+          {items.map((n) => (
+            <div className="item" key={n}>
+              Row {n}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+      <div className="toolbar">
+        <button
+          onClick={() =>
+            setItems((prev) => [...prev, prev.length + 1, prev.length + 2])
+          }
+        >
+          + 加 2 行
+        </button>
+        <button onClick={() => setItems([1, 2])}>重置</button>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/PerfSection.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { ScrollView } from "@";
+
+export default function PerfSection() {
+  const ref = useRef(null);
+  const [count, setCount] = useState(0);
+  const list = Array.from({ length: 1000 }, (_, i) => i + 1);
+
+  useEffect(() => {
+    console.log("PerfSection mounted, 1000 items");
+  }, []);
+
+  return (
+    <div className="section">
+      <div className="section-title">大列表性能（1000 项 + RAF 节流）</div>
+      <div className="stat">onScroll 触发次数: {count}</div>
+      <div className="section-body" style={{ height: "4rem" }}>
+        <ScrollView ref={ref} onScroll={() => setCount((c) => c + 1)}>
+          {list.map((n) => (
+            <div className="item" key={n}>
+              性能行 {n}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+      <div className="toolbar">
+        <button onClick={() => ref.current?.scrollToTop("smooth")}>
+          回顶部
+        </button>
+        <button onClick={() => setCount(0)}>重置计数</button>
+      </div>
+    </div>
+  );
+}