clxx 3.0.0 → 3.0.2

package/build/CitySelect/index.d.ts

@@ -12,6 +12,7 @@ export interface CitySelectProps {
     onLetterChange?: (letter: string) => void;
     getLocation?: () => string | null | undefined | Promise<string | null | undefined>;
     primary?: string;
+    taiwanHKMacau?: boolean;
 }
 export declare function CitySelect(props: CitySelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function showCitySelect(options?: Pick<CitySelectProps, "onSelect" | "onLetterChange" | "getLocation" | "primary">): void;
+export declare function showCitySelect(options?: Pick<CitySelectProps, "onSelect" | "onLetterChange" | "getLocation" | "primary" | "taiwanHKMacau">): void;

package/build/CitySelect/index.js

@@ -11,17 +11,23 @@ const style_1 = require("./style");
 const Col_1 = require("../Flex/Col");
 const Row_1 = require("../Flex/Row");
 const Clickable_1 = require("../Clickable");
+// 港澳台对应的省份 code（台湾、香港、澳门）
+const HK_MO_TW_PCODES = new Set([
+    "710000",
+    "810000",
+    "820000",
+]);
 // 在 cityData 中按 code 或 name 查找城市
 // name 匹配时允许省略末尾的"市"，如"北京" 匹配 "北京市"
-function findCity(key) {
+function findCity(source, key) {
     if (!key)
         return null;
     const k = key.trim();
     if (!k)
         return null;
     const kNoCity = k.endsWith("市") ? k.slice(0, -1) : k;
-    for (const letter of Object.keys(data_1.cityData)) {
-        for (const item of data_1.cityData[letter]) {
+    for (const letter of Object.keys(source)) {
+        for (const item of source[letter]) {
             if (item.code === k)
                 return item;
             const nameNoCity = item.name.endsWith("市")
@@ -35,14 +41,29 @@ function findCity(key) {
 }
 // 弹出与滑入/滑出动画由 showDialog (pullLeft) 接管
 function CitySelect(props) {
-    const { onClose, onSelect, onLetterChange, getLocation, primary = style_1.DEFAULT_PRIMARY, } = props;
+    const { onClose, onSelect, onLetterChange, getLocation, primary = style_1.DEFAULT_PRIMARY, taiwanHKMacau = false, } = props;
     const style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary), [primary]);
-    const letters = (0, react_1.useMemo)(() => Object.keys(data_1.cityData), []);
+    // 过滤后的城市数据：当 taiwanHKMacau=false 时排除港澳台；
+    // 过滤后为空的字母档位会从指引中移除。仅在 taiwanHKMacau 变化时重建。
+    const filteredCityData = (0, react_1.useMemo)(() => {
+        if (taiwanHKMacau)
+            return data_1.cityData;
+        const out = {};
+        for (const letter of Object.keys(data_1.cityData)) {
+            const arr = data_1.cityData[letter].filter((it) => !HK_MO_TW_PCODES.has(it.pcode));
+            if (arr.length > 0)
+                out[letter] = arr;
+        }
+        return out;
+    }, [taiwanHKMacau]);
+    const letters = (0, react_1.useMemo)(() => Object.keys(filteredCityData), [filteredCityData]);
     // 定位解析结果：null 表示尚未解析或失败/未匹配；非空时展示快捷入口
     const [locatedCity, setLocatedCity] = (0, react_1.useState)(null);
     // 首次挂载时调用一次外部定位；异步失败或匹配不到均保持不展示
     const getLocationRef = (0, react_1.useRef)(getLocation);
     getLocationRef.current = getLocation;
+    const filteredCityDataRef = (0, react_1.useRef)(filteredCityData);
+    filteredCityDataRef.current = filteredCityData;
     (0, react_1.useEffect)(() => {
         const fn = getLocationRef.current;
         if (!fn)
@@ -53,7 +74,7 @@ function CitySelect(props) {
                 .then((key) => {
                 if (cancelled)
                     return;
-                const city = findCity(key !== null && key !== void 0 ? key : undefined);
+                const city = findCity(filteredCityDataRef.current, key !== null && key !== void 0 ? key : undefined);
                 if (city)
                     setLocatedCity(city);
             })
@@ -83,8 +104,13 @@ function CitySelect(props) {
     const searchResult = (0, react_1.useMemo)(() => {
         if (composing)
             return null;
-        return keyword.trim() ? (0, search_1.searchCity)(keyword) : null;
-    }, [keyword, composing]);
+        if (!keyword.trim())
+            return null;
+        const list = (0, search_1.searchCity)(keyword);
+        if (taiwanHKMacau)
+            return list;
+        return list.filter((it) => !HK_MO_TW_PCODES.has(it.pcode));
+    }, [keyword, composing, taiwanHKMacau]);
     const isSearching = searchResult !== null;
     // 用 ref 保存最新值，避免 effect 依赖变化而反复解绑/绑定
     const lettersRef = (0, react_1.useRef)(letters);
@@ -287,7 +313,7 @@ function CitySelect(props) {
                             // 每个字母对应一个区块，包含该字母开头的城市列表
                             (0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
                                     sectionRefs.current[k] = el;
-                                }, children: [(0, jsx_runtime_1.jsx)("div", { css: style.title, children: k.toUpperCase() }), data_1.cityData[k].map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code)))] }, k));
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { css: style.title, children: k.toUpperCase() }), filteredCityData[k].map((item) => ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: style.item, onClick: () => handleSelect(item), children: item.name }, item.code)))] }, k));
                         }) }))] }), !isSearching && ((0, jsx_runtime_1.jsx)("div", { ref: sidebarRef, css: style.sidebar, children: letters.map((k) => ((0, jsx_runtime_1.jsx)("div", { css: [style.letter, activeLetter === k && style.letterActive], children: k.toUpperCase() }, k))) })), touching && activeLetter && !isSearching && ((0, jsx_runtime_1.jsx)("div", { css: style.bigLetter, children: activeLetter.toUpperCase() }))] }));
 }
 function showCitySelect(options = {}) {

package/build/CitySelect/style.js

@@ -5,13 +5,13 @@ 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
+// 设计变量
+const textPrimary = "#1f2328";
+const textSecondary = "#6b7280";
+const textTertiary = "#9ca3af";
 const bgPage = "#ffffff";
-const bgSubtle = "rgba(120,120,128,.12)"; // iOS quaternary fill
-const bgGrouped = "#f2f2f7"; // iOS systemGroupedBackground
+const bgSubtle = "#f5f6f8";
+const border = "#e5e7eb";
 // 根据 primary 色值生成一整套样式；primaryActive 由 primary 派生
 function createStyle(primary) {
     const primaryActive = (0, color_1.darken)(primary, 0.15);
@@ -81,7 +81,8 @@ function createStyle(primary) {
             backgroundColor: bgPage,
         }),
         top: (0, react_1.css)({
-            padding: ".3rem",
+            padding: ".24rem .3rem",
+            borderBottom: `1px solid ${border}`,
             "& > div": {
                 height: ".72rem",
                 backgroundColor: bgSubtle,
@@ -137,7 +138,8 @@ function createStyle(primary) {
         locate: (0, react_1.css)({
             display: "flex",
             alignItems: "center",
-            padding: "0 .3rem .3rem",
+            padding: ".2rem .23rem",
+            borderBottom: `1px solid ${border}`,
             backgroundColor: bgPage,
             transition: "background-color .12s",
             "&:active": {
@@ -162,13 +164,13 @@ function createStyle(primary) {
             color: primary,
         }),
         title: (0, react_1.css)({
-            padding: ".12rem .3rem .06rem",
+            padding: ".08rem .3rem",
             fontSize: ".22rem",
-            fontWeight: 500,
-            color: textTertiary,
+            fontWeight: 600,
+            color: textSecondary,
             letterSpacing: ".02rem",
             textTransform: "uppercase",
-            backgroundColor: bgGrouped,
+            backgroundColor: bgSubtle,
             position: "sticky",
             top: 0,
             zIndex: 1,
@@ -177,6 +179,7 @@ function createStyle(primary) {
             padding: ".24rem .3rem",
             fontSize: ".3rem",
             color: textPrimary,
+            borderBottom: `1px solid ${border}`,
             backgroundColor: bgPage,
             transition: "background-color .12s",
             "&:active": {

package/build/DatePicker/style.js

@@ -5,18 +5,19 @@ 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
+// 与 CitySelect 一致的设计变量（带线条风格）
+const textPrimary = "#1f2328";
+const textSecondary = "#6b7280";
+const textTertiary = "#9ca3af";
 const bgPage = "#ffffff";
-const bgSubtle = "rgba(120,120,128,.12)"; // iOS quaternary fill
+const bgSubtle = "#f5f6f8";
+const border = "#e5e7eb";
 // 可见行数 = 5，单元高度 = .8rem
 exports.ITEM_HEIGHT_REM = 0.8;
 exports.VISIBLE_ROWS = 5;
 function createStyle(primary, rounded = true) {
     const primaryActive = (0, color_1.darken)(primary, 0.15);
-    const sheetRadius = rounded ? ".28rem" : "0";
+    const sheetRadius = rounded ? ".24rem" : "0";
     const indicatorRadius = rounded ? ".12rem" : "0";
     return {
         // 内容容器：动画/全屏/居中由 Dialog 提供，这里只保留视觉与排版
@@ -32,19 +33,19 @@ function createStyle(primary, rounded = true) {
             WebkitFontSmoothing: "antialiased",
             MozOsxFontSmoothing: "grayscale",
         }),
-        // iOS 风标题栏：底部 hairline 与下方 body 做轻量区块分隔
+        // 标题栏：底部 hairline 与 body 区分
         header: (0, react_1.css)({
             height: ".92rem",
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
             padding: "0 .16rem",
-            borderBottom: "1px solid rgba(60,60,67,.18)",
+            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 +53,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 +66,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 },
         }),
@@ -75,7 +76,7 @@ function createStyle(primary, rounded = true) {
             height: `${exports.ITEM_HEIGHT_REM * exports.VISIBLE_ROWS}rem`,
             padding: "0 .16rem .12rem",
         }),
-        // iOS 风选中背景：柔和的 quaternary fill、充足圆角
+        // 选中条：浅灰底 + 上下 hairline，与 CitySelect 列表观感一致
         indicator: (0, react_1.css)({
             position: "absolute",
             left: ".16rem",
@@ -84,6 +85,8 @@ function createStyle(primary, rounded = true) {
             height: `${exports.ITEM_HEIGHT_REM}rem`,
             pointerEvents: "none",
             backgroundColor: bgSubtle,
+            borderTop: `1px solid ${border}`,
+            borderBottom: `1px solid ${border}`,
             borderRadius: indicatorRadius,
         }),
         column: (0, react_1.css)({
@@ -118,8 +121,8 @@ function createStyle(primary, rounded = true) {
             transition: "color .18s ease",
         }),
         itemActive: (0, react_1.css)({
-            color: textPrimary,
-            fontWeight: 500,
+            color: primary,
+            fontWeight: 600,
         }),
         spacer: (0, react_1.css)({
             height: `${exports.ITEM_HEIGHT_REM * 2}rem`,