clxx 3.0.1 → 3.0.2

package/build/RegionPicker/index.d.ts

@@ -8,7 +8,7 @@ export interface RegionNode {
 export interface RegionSelection {
     province: RegionNode;
     city: RegionNode;
-    district: RegionNode;
+    district: RegionNode | null;
 }
 export interface RegionLabels {
     province?: string;
@@ -25,9 +25,10 @@ export interface RegionPickerProps {
     maskClosable?: boolean;
     primary?: string;
     rounded?: boolean;
+    taiwanHKMacau?: boolean;
     onClose?: () => void;
     onCancel?: () => void;
     onConfirm?: (selection: RegionSelection) => void;
 }
 export declare function RegionPicker(props: RegionPickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function showRegionPicker(options?: Pick<RegionPickerProps, "value" | "data" | "title" | "cancelText" | "confirmText" | "labels" | "maskClosable" | "primary" | "rounded" | "onCancel" | "onConfirm">): void;
+export declare function showRegionPicker(options?: Pick<RegionPickerProps, "value" | "data" | "title" | "cancelText" | "confirmText" | "labels" | "maskClosable" | "primary" | "rounded" | "taiwanHKMacau" | "onCancel" | "onConfirm">): void;

package/build/RegionPicker/index.js

@@ -19,6 +19,12 @@ const Dialog_1 = require("../Dialog");
 const Clickable_1 = require("../Clickable");
 const style_1 = require("./style");
 const data_1 = require("./data");
+// 港澳台对应的顶层省级 value（台湾、香港、澳门）
+const HK_MO_TW_VALUES = new Set([
+    "710000",
+    "810000",
+    "820000",
+]);
 const DEFAULT_LABELS = {
     province: "省",
     city: "市",
@@ -26,8 +32,12 @@ const DEFAULT_LABELS = {
 };
 const TAB_ORDER = ["province", "city", "district"];
 function RegionPicker(props) {
-    const { value, data = data_1.treeRegionData, title = "请选择地区", cancelText = "取消", confirmText = "确定", labels, primary = style_1.DEFAULT_PRIMARY, rounded = true, onClose, onCancel, onConfirm, } = props;
+    const { value, data = data_1.treeRegionData, title = "请选择地区", cancelText = "取消", confirmText = "确定", labels, primary = style_1.DEFAULT_PRIMARY, rounded = true, taiwanHKMacau = false, onClose, onCancel, onConfirm, } = props;
     const style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary, rounded), [primary, rounded]);
+    // 过滤后的顶层数据：仅在 data / taiwanHKMacau 变化时重建
+    const effectiveData = (0, react_1.useMemo)(() => taiwanHKMacau
+        ? data
+        : data.filter((x) => !HK_MO_TW_VALUES.has(x.value)), [data, taiwanHKMacau]);
     const lab = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, DEFAULT_LABELS), labels)), [labels]);
     // === 选中状态 ===
     // 当前每级选中节点；未选为 null
@@ -36,23 +46,26 @@ function RegionPicker(props) {
     const [districtNode, setDistrictNode] = (0, react_1.useState)(null);
     // 当前激活 tab
     const [activeTab, setActiveTab] = (0, react_1.useState)("province");
-    // 根据 value 初始化（只在首次 & data 变化时）
+    // 初始化 / data 恢复选中里允许 city 无 children（部分地区没有区级）
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d, _e;
         if (!value)
             return;
         const [pv, cv, dv] = value;
-        const p = (_a = data.find((x) => x.value === pv)) !== null && _a !== void 0 ? _a : null;
+        const p = (_a = effectiveData.find((x) => x.value === pv)) !== null && _a !== void 0 ? _a : null;
         const c = (_c = (_b = p === null || p === void 0 ? void 0 : p.children) === null || _b === void 0 ? void 0 : _b.find((x) => x.value === cv)) !== null && _c !== void 0 ? _c : null;
         const d = (_e = (_d = c === null || c === void 0 ? void 0 : c.children) === null || _d === void 0 ? void 0 : _d.find((x) => x.value === dv)) !== null && _e !== void 0 ? _e : null;
         setProvinceNode(p);
         setCityNode(c);
         setDistrictNode(d);
-        // 定位 activeTab 到「最深的未选层」，全部选好时停在 district
+        // 定位 activeTab 到「最深的未选层」；
+        // 如果选中的市无 children，则停在 city
         if (!p)
             setActiveTab("province");
         else if (!c)
             setActiveTab("city");
+        else if (!c.children || c.children.length === 0)
+            setActiveTab("city");
         else
             setActiveTab("district");
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -61,11 +74,11 @@ function RegionPicker(props) {
     const currentList = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (activeTab === "province")
-            return data;
+            return effectiveData;
         if (activeTab === "city")
             return (_a = provinceNode === null || provinceNode === void 0 ? void 0 : provinceNode.children) !== null && _a !== void 0 ? _a : [];
         return (_b = cityNode === null || cityNode === void 0 ? void 0 : cityNode.children) !== null && _b !== void 0 ? _b : [];
-    }, [activeTab, data, provinceNode, cityNode]);
+    }, [activeTab, effectiveData, provinceNode, cityNode]);
     const selectedValueOfTab = (tab) => {
         var _a, _b, _c;
         if (tab === "province")
@@ -74,13 +87,13 @@ function RegionPicker(props) {
             return (_b = cityNode === null || cityNode === void 0 ? void 0 : cityNode.value) !== null && _b !== void 0 ? _b : null;
         return (_c = districtNode === null || districtNode === void 0 ? void 0 : districtNode.value) !== null && _c !== void 0 ? _c : null;
     };
-    // tab 是否可点击：只有已有对应级数据时才可点（即上级已选）
+    // tab 是否可点击：上级已选；district 额外要求 city 有子级
     const tabEnabled = (tab) => {
         if (tab === "province")
             return true;
         if (tab === "city")
             return !!provinceNode;
-        return !!cityNode;
+        return !!(cityNode && cityNode.children && cityNode.children.length > 0);
     };
     // 点击列表项
     const handlePick = (item) => {
@@ -146,14 +159,20 @@ function RegionPicker(props) {
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    const canConfirm = !!(provinceNode && cityNode && districtNode);
+    const canConfirm = !!(provinceNode &&
+        cityNode &&
+        (!cityNode.children || cityNode.children.length === 0 || districtNode));
     const handleConfirm = () => {
         if (!canConfirm)
             return;
+        if (!provinceNode || !cityNode)
+            return;
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
             province: { value: provinceNode.value, label: provinceNode.label },
             city: { value: cityNode.value, label: cityNode.label },
-            district: { value: districtNode.value, label: districtNode.label },
+            district: districtNode
+                ? { value: districtNode.value, label: districtNode.label }
+                : null,
         });
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };

package/build/RegionPicker/style.js

@@ -5,16 +5,17 @@ exports.createStyle = createStyle;
 const react_1 = require("@emotion/react");
 const color_1 = require("../utils/color");
 const theme_1 = require("../utils/theme");
-// iOS 风格设计变量
-const textPrimary = "#000000";
-const textSecondary = "#3c3c43"; // iOS secondaryLabel
-const textTertiary = "#8e8e93"; // iOS tertiaryLabel / placeholder
+// 与 CitySelect 一致的设计变量（带线条风格）
+const textPrimary = "#1f2328";
+const textSecondary = "#6b7280";
+const textTertiary = "#9ca3af";
 const bgPage = "#ffffff";
-const bgSubtle = "rgba(0,0,0,.04)"; // 按下态浅灰
+const bgSubtle = "#f5f6f8";
+const border = "#e5e7eb";
 exports.DEFAULT_PRIMARY = "#2f7dff";
 function createStyle(primary, rounded = true) {
     const primaryActive = (0, color_1.darken)(primary, 0.15);
-    const sheetRadius = rounded ? ".28rem" : "0";
+    const sheetRadius = rounded ? ".24rem" : "0";
     return {
         // 内容容器：动画/遮罩/全屏由 Dialog 提供，这里只保留视觉与排版
         sheet: (0, react_1.css)({
@@ -32,7 +33,7 @@ function createStyle(primary, rounded = true) {
             WebkitFontSmoothing: "antialiased",
             MozOsxFontSmoothing: "grayscale",
         }),
-        // iOS 风标题栏：无底边框，标题加粗居中，左右按钮都用主色
+        // 标题栏：底部 hairline 与列表区分；按钮中等字重
         header: (0, react_1.css)({
             flexShrink: 0,
             height: ".92rem",
@@ -40,11 +41,12 @@ function createStyle(primary, rounded = true) {
             alignItems: "center",
             justifyContent: "space-between",
             padding: "0 .16rem",
+            borderBottom: `1px solid ${border}`,
         }),
         title: (0, react_1.css)({
             flex: 1,
             textAlign: "center",
-            fontSize: ".32rem",
+            fontSize: ".3rem",
             fontWeight: 600,
             color: textPrimary,
             letterSpacing: ".01rem",
@@ -52,7 +54,7 @@ function createStyle(primary, rounded = true) {
         btn: (0, react_1.css)({
             minWidth: "1.1rem",
             padding: "0 .08rem",
-            fontSize: ".3rem",
+            fontSize: ".28rem",
             fontWeight: 400,
             lineHeight: ".92rem",
             cursor: "pointer",
@@ -65,7 +67,7 @@ function createStyle(primary, rounded = true) {
         }),
         btnConfirm: (0, react_1.css)({
             textAlign: "right",
-            fontWeight: 600,
+            fontWeight: 500,
             color: primary,
             "&:active": { color: primaryActive, opacity: 0.65 },
         }),
@@ -73,17 +75,18 @@ function createStyle(primary, rounded = true) {
             color: textTertiary,
             cursor: "not-allowed",
             pointerEvents: "none",
-            fontWeight: 600,
+            fontWeight: 500,
             "&:active": { opacity: 1, color: textTertiary },
         }),
-        // tabs 行：轻量化，激活态用细下划线提示；底部加 hairline 分隔下方列表
+        // tabs 行：浅灰底色（与 CitySelect 字母分组标题色一致），激活态细下划线
         tabs: (0, react_1.css)({
             flexShrink: 0,
             display: "flex",
             alignItems: "stretch",
             height: ".8rem",
             padding: "0 .16rem",
-            borderBottom: "1px solid rgba(60,60,67,.18)",
+            backgroundColor: bgSubtle,
+            borderBottom: `1px solid ${border}`,
         }),
         tab: (0, react_1.css)({
             flex: 1,
@@ -92,7 +95,7 @@ function createStyle(primary, rounded = true) {
             alignItems: "center",
             justifyContent: "center",
             padding: "0 .08rem",
-            fontSize: ".28rem",
+            fontSize: ".26rem",
             color: textSecondary,
             position: "relative",
             cursor: "pointer",
@@ -107,7 +110,7 @@ function createStyle(primary, rounded = true) {
         }),
         tabActive: (0, react_1.css)({
             color: primary,
-            fontWeight: 500,
+            fontWeight: 600,
             "&::after": {
                 content: '""',
                 position: "absolute",
@@ -120,7 +123,7 @@ function createStyle(primary, rounded = true) {
                 borderRadius: ".02rem",
             },
         }),
-        // 选项列表（固定高度，避免跳变；6 行 × .88rem = 5.28rem，整体更紧凑）
+        // 选项列表：固定高度避免跳变
         list: (0, react_1.css)({
             flexShrink: 0,
             height: "5.28rem",
@@ -129,18 +132,19 @@ function createStyle(primary, rounded = true) {
             WebkitOverflowScrolling: "touch",
             overscrollBehavior: "contain",
             backgroundColor: bgPage,
-            paddingBottom: ".12rem",
         }),
-        // iOS 风列表项：无分隔线，仅按下态浅灰底
+        // 列表项：底部 hairline 分隔（CitySelect 风），按下浅灰底
         listItem: (0, react_1.css)({
             position: "relative",
             height: ".88rem",
             display: "flex",
             alignItems: "center",
-            padding: "0 .32rem",
+            padding: "0 .3rem",
             fontSize: ".3rem",
             color: textPrimary,
-            transition: "background-color .15s",
+            backgroundColor: bgPage,
+            borderBottom: `1px solid ${border}`,
+            transition: "background-color .12s",
             "&:active": {
                 backgroundColor: bgSubtle,
             },
@@ -157,7 +161,7 @@ function createStyle(primary, rounded = true) {
             color: primary,
             fontWeight: 500,
         }),
-        // iOS 风对勾（SF Symbol checkmark 风格）
+        // 对勾
         checkIcon: (0, react_1.css)({
             width: ".32rem",
             height: ".32rem",

package/package.json

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

package/test/src/city-select/index.jsx

@@ -1,21 +1,34 @@
 import { showCitySelect } from "@";
-import { useEffect } from "react";
 
 export default function Index() {
   return (
-    <button
-      onClick={() => {
-        showCitySelect({
-          onSelect: (city) => {
-            console.log("选择了城市：", city);
-          },
-          getLocation() {
-            return "北京";
-          },
-        });
-      }}
-    >
-      选择城市
-    </button>
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.2rem", padding: "0.3rem" }}>
+      <button
+        onClick={() => {
+          showCitySelect({
+            onSelect: (city) => {
+              console.log("选择了城市：", city);
+            },
+            getLocation() {
+              return "北京";
+            },
+          });
+        }}
+      >
+        选择城市（默认：不含港澳台）
+      </button>
+      <button
+        onClick={() => {
+          showCitySelect({
+            taiwanHKMacau: true,
+            onSelect: (city) => {
+              console.log("选择了城市：", city);
+            },
+          });
+        }}
+      >
+        选择城市（含港澳台）
+      </button>
+    </div>
   );
 }

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

@@ -1,6 +1,12 @@
 import { showRegionPicker } from "@";
 import { useState } from "react";
 
+// 部分城市无区级，district 可能为 null
+const formatSelection = (sel) =>
+  sel.district
+    ? `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`
+    : `${sel.province.label} / ${sel.city.label}`;
+
 export default function RegionPickerDemo() {
   const [result, setResult] = useState("");
   const [initial, setInitial] = useState(null);
@@ -9,9 +15,12 @@ export default function RegionPickerDemo() {
     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]);
+        setResult(formatSelection(sel));
+        setInitial([
+          sel.province.value,
+          sel.city.value,
+          sel.district?.value,
+        ]);
       },
       onCancel: () => {
         console.log("取消选择");
@@ -25,9 +34,7 @@ export default function RegionPickerDemo() {
       value: ["440000", "440100", "440106"],
       title: "带初始值",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -37,9 +44,7 @@ export default function RegionPickerDemo() {
       primary: "#e53935",
       title: "京东红主题",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -49,9 +54,7 @@ export default function RegionPickerDemo() {
       rounded: false,
       title: "无圆角",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -63,9 +66,7 @@ export default function RegionPickerDemo() {
       confirmText: "选好了",
       title: "自定义文案",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -75,9 +76,7 @@ export default function RegionPickerDemo() {
       maskClosable: false,
       title: "点击遮罩不关闭",
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -93,9 +92,17 @@ export default function RegionPickerDemo() {
       cancelText: <span style={{ color: "#ef4444" }}>✕ 关</span>,
       confirmText: <strong>OK ✓</strong>,
       onConfirm: (sel) => {
-        setResult(
-          `${sel.province.label} / ${sel.city.label} / ${sel.district.label}`,
-        );
+        setResult(formatSelection(sel));
+      },
+    });
+  };
+
+  const openWithHKMOTW = () => {
+    showRegionPicker({
+      taiwanHKMacau: true,
+      title: "含港澳台",
+      onConfirm: (sel) => {
+        setResult(formatSelection(sel));
       },
     });
   };
@@ -110,6 +117,7 @@ export default function RegionPickerDemo() {
         <button onClick={openCustomLabels}>自定义 tab 占位 / 按钮文案</button>
         <button onClick={openNoMaskClose}>点击遮罩不关闭</button>
         <button onClick={openReactNodeTitle}>ReactNode 标题/按钮</button>
+        <button onClick={openWithHKMOTW}>含港澳台</button>
       </div>
       <div style={{ marginTop: "0.4rem", fontSize: "0.3rem" }}>
         选择结果：