clxx 2.1.7 → 3.0.0

package/build/RegionPicker/index.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+import { TreeRegionItem } from "./data";
+export type { TreeRegionItem } from "./data";
+export interface RegionNode {
+    value: string;
+    label: string;
+}
+export interface RegionSelection {
+    province: RegionNode;
+    city: RegionNode;
+    district: RegionNode;
+}
+export interface RegionLabels {
+    province?: string;
+    city?: string;
+    district?: string;
+}
+export interface RegionPickerProps {
+    value?: [string?, string?, string?];
+    data?: TreeRegionItem[];
+    title?: ReactNode;
+    cancelText?: ReactNode;
+    confirmText?: ReactNode;
+    labels?: RegionLabels;
+    maskClosable?: boolean;
+    primary?: string;
+    rounded?: 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;

package/build/RegionPicker/index.js

@@ -0,0 +1,205 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegionPicker = RegionPicker;
+exports.showRegionPicker = showRegionPicker;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const Dialog_1 = require("../Dialog");
+const Clickable_1 = require("../Clickable");
+const style_1 = require("./style");
+const data_1 = require("./data");
+const DEFAULT_LABELS = {
+    province: "省",
+    city: "市",
+    district: "区",
+};
+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 style = (0, react_1.useMemo)(() => (0, style_1.createStyle)(primary, rounded), [primary, rounded]);
+    const lab = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, DEFAULT_LABELS), labels)), [labels]);
+    // === 选中状态 ===
+    // 当前每级选中节点；未选为 null
+    const [provinceNode, setProvinceNode] = (0, react_1.useState)(null);
+    const [cityNode, setCityNode] = (0, react_1.useState)(null);
+    const [districtNode, setDistrictNode] = (0, react_1.useState)(null);
+    // 当前激活 tab
+    const [activeTab, setActiveTab] = (0, react_1.useState)("province");
+    // 根据 value 初始化（只在首次 & data 变化时）
+    (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 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
+        if (!p)
+            setActiveTab("province");
+        else if (!c)
+            setActiveTab("city");
+        else
+            setActiveTab("district");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // 当前 tab 对应的待选列表
+    const currentList = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (activeTab === "province")
+            return data;
+        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]);
+    const selectedValueOfTab = (tab) => {
+        var _a, _b, _c;
+        if (tab === "province")
+            return (_a = provinceNode === null || provinceNode === void 0 ? void 0 : provinceNode.value) !== null && _a !== void 0 ? _a : null;
+        if (tab === "city")
+            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 是否可点击：只有已有对应级数据时才可点（即上级已选）
+    const tabEnabled = (tab) => {
+        if (tab === "province")
+            return true;
+        if (tab === "city")
+            return !!provinceNode;
+        return !!cityNode;
+    };
+    // 点击列表项
+    const handlePick = (item) => {
+        if (activeTab === "province") {
+            // 换省 => 清空下级
+            if ((provinceNode === null || provinceNode === void 0 ? void 0 : provinceNode.value) !== item.value) {
+                setProvinceNode(item);
+                setCityNode(null);
+                setDistrictNode(null);
+            }
+            // 自动进入下一级；若无子级则停留
+            if (item.children && item.children.length > 0) {
+                setActiveTab("city");
+            }
+        }
+        else if (activeTab === "city") {
+            if ((cityNode === null || cityNode === void 0 ? void 0 : cityNode.value) !== item.value) {
+                setCityNode(item);
+                setDistrictNode(null);
+            }
+            if (item.children && item.children.length > 0) {
+                setActiveTab("district");
+            }
+        }
+        else {
+            setDistrictNode(item);
+        }
+    };
+    const handleTabClick = (tab) => {
+        if (!tabEnabled(tab))
+            return;
+        setActiveTab(tab);
+    };
+    // 切 tab / 列表变化时，把当前选中项的顶部对齐到列表顶部（即 tabs 下方的分隔线）
+    // 列表不可滚动时浏览器自然忽略 scrollTop 赋值，无需额外判断
+    const listRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const el = listRef.current;
+        if (!el)
+            return;
+        const sel = selectedValueOfTab(activeTab);
+        if (!sel) {
+            el.scrollTop = 0;
+            return;
+        }
+        const target = el.querySelector(`[data-value="${CSS.escape(sel)}"]`);
+        if (!target) {
+            el.scrollTop = 0;
+            return;
+        }
+        // 用 getBoundingClientRect 差分计算偏移，避免 offsetTop 受
+        // offsetParent 定位上下文影响（list 容器未必是 positioned 元素）
+        const offsetWithinList = target.getBoundingClientRect().top -
+            el.getBoundingClientRect().top +
+            el.scrollTop;
+        const maxScroll = Math.max(0, el.scrollHeight - el.clientHeight);
+        el.scrollTop = Math.max(0, Math.min(offsetWithinList, maxScroll));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeTab, currentList]);
+    // ---------------- 关闭逻辑 ----------------
+    // 动画与卸载交由 Dialog 处理
+    const handleCancel = () => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const canConfirm = !!(provinceNode && cityNode && districtNode);
+    const handleConfirm = () => {
+        if (!canConfirm)
+            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 },
+        });
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    const tabLabelText = (tab) => {
+        if (tab === "province")
+            return provinceNode ? provinceNode.label : lab.province;
+        if (tab === "city")
+            return cityNode ? cityNode.label : lab.city;
+        return districtNode ? districtNode.label : lab.district;
+    };
+    const isTabPlaceholder = (tab) => {
+        if (tab === "province")
+            return !provinceNode;
+        if (tab === "city")
+            return !cityNode;
+        return !districtNode;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: style.sheet, children: [(0, jsx_runtime_1.jsxs)("div", { css: style.header, children: [(0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style.btn, style.btnCancel], onClick: handleCancel, children: cancelText }), (0, jsx_runtime_1.jsx)("div", { css: style.title, children: title }), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [
+                            style.btn,
+                            style.btnConfirm,
+                            !canConfirm && style.btnConfirmDisabled,
+                        ], onClick: handleConfirm, children: confirmText })] }), (0, jsx_runtime_1.jsx)("div", { css: style.tabs, children: TAB_ORDER.map((tab) => ((0, jsx_runtime_1.jsx)("div", { css: [
+                        style.tab,
+                        isTabPlaceholder(tab) && style.tabPlaceholder,
+                        activeTab === tab && style.tabActive,
+                    ], onClick: () => handleTabClick(tab), children: tabLabelText(tab) }, tab))) }), (0, jsx_runtime_1.jsx)("div", { css: style.list, ref: listRef, children: currentList.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { css: style.empty, children: "\u6682\u65E0\u6570\u636E" })) : (currentList.map((item) => {
+                    const selected = selectedValueOfTab(activeTab) === item.value;
+                    return ((0, jsx_runtime_1.jsxs)(Clickable_1.Clickable, { "data-value": item.value, css: [style.listItem, selected && style.listItemSelected], onClick: () => handlePick(item), children: [(0, jsx_runtime_1.jsx)("div", { css: style.listItemLabel, children: item.label }), selected && (0, jsx_runtime_1.jsx)("div", { css: style.checkIcon })] }, item.value));
+                })) })] }));
+}
+function showRegionPicker(options = {}) {
+    const { maskClosable = true, onCancel } = options, rest = __rest(options, ["maskClosable", "onCancel"]);
+    let closing = false;
+    let close;
+    const requestClose = () => {
+        if (closing)
+            return;
+        closing = true;
+        close === null || close === void 0 ? void 0 : close();
+    };
+    close = (0, Dialog_1.showDialog)({
+        type: "pullUp",
+        blankClosable: maskClosable,
+        onBlankClick: () => {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        },
+        content: ((0, jsx_runtime_1.jsx)(RegionPicker, Object.assign({}, rest, { onCancel: onCancel, onClose: requestClose }))),
+    });
+}

package/build/RegionPicker/style.d.ts

@@ -0,0 +1,4 @@
+import { Interpolation, Theme } from "@emotion/react";
+export declare const DEFAULT_PRIMARY = "#2f7dff";
+export type RegionPickerStyle = Record<string, Interpolation<Theme>>;
+export declare function createStyle(primary: string, rounded?: boolean): RegionPickerStyle;

package/build/RegionPicker/style.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PRIMARY = void 0;
+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 bgPage = "#ffffff";
+const bgSubtle = "rgba(0,0,0,.04)"; // 按下态浅灰
+exports.DEFAULT_PRIMARY = "#2f7dff";
+function createStyle(primary, rounded = true) {
+    const primaryActive = (0, color_1.darken)(primary, 0.15);
+    const sheetRadius = rounded ? ".28rem" : "0";
+    return {
+        // 内容容器：动画/遮罩/全屏由 Dialog 提供，这里只保留视觉与排版
+        sheet: (0, react_1.css)({
+            width: "100%",
+            backgroundColor: bgPage,
+            borderTopLeftRadius: sheetRadius,
+            borderTopRightRadius: sheetRadius,
+            display: "flex",
+            flexDirection: "column",
+            maxHeight: "80vh",
+            overflow: "hidden",
+            userSelect: "none",
+            color: textPrimary,
+            fontFamily: theme_1.fontStack,
+            WebkitFontSmoothing: "antialiased",
+            MozOsxFontSmoothing: "grayscale",
+        }),
+        // iOS 风标题栏：无底边框，标题加粗居中，左右按钮都用主色
+        header: (0, react_1.css)({
+            flexShrink: 0,
+            height: ".92rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0 .16rem",
+        }),
+        title: (0, react_1.css)({
+            flex: 1,
+            textAlign: "center",
+            fontSize: ".32rem",
+            fontWeight: 600,
+            color: textPrimary,
+            letterSpacing: ".01rem",
+        }),
+        btn: (0, react_1.css)({
+            minWidth: "1.1rem",
+            padding: "0 .08rem",
+            fontSize: ".3rem",
+            fontWeight: 400,
+            lineHeight: ".92rem",
+            cursor: "pointer",
+            transition: "opacity .15s, color .15s",
+        }),
+        btnCancel: (0, react_1.css)({
+            textAlign: "left",
+            color: textSecondary,
+            "&:active": { opacity: 0.55 },
+        }),
+        btnConfirm: (0, react_1.css)({
+            textAlign: "right",
+            fontWeight: 600,
+            color: primary,
+            "&:active": { color: primaryActive, opacity: 0.65 },
+        }),
+        btnConfirmDisabled: (0, react_1.css)({
+            color: textTertiary,
+            cursor: "not-allowed",
+            pointerEvents: "none",
+            fontWeight: 600,
+            "&:active": { opacity: 1, color: textTertiary },
+        }),
+        // tabs 行：轻量化，激活态用细下划线提示；底部加 hairline 分隔下方列表
+        tabs: (0, react_1.css)({
+            flexShrink: 0,
+            display: "flex",
+            alignItems: "stretch",
+            height: ".8rem",
+            padding: "0 .16rem",
+            borderBottom: "1px solid rgba(60,60,67,.18)",
+        }),
+        tab: (0, react_1.css)({
+            flex: 1,
+            minWidth: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "0 .08rem",
+            fontSize: ".28rem",
+            color: textSecondary,
+            position: "relative",
+            cursor: "pointer",
+            transition: "color .2s ease",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            letterSpacing: ".01rem",
+        }),
+        tabPlaceholder: (0, react_1.css)({
+            color: textTertiary,
+        }),
+        tabActive: (0, react_1.css)({
+            color: primary,
+            fontWeight: 500,
+            "&::after": {
+                content: '""',
+                position: "absolute",
+                left: "50%",
+                bottom: ".06rem",
+                transform: "translateX(-50%)",
+                width: ".32rem",
+                height: ".04rem",
+                backgroundColor: primary,
+                borderRadius: ".02rem",
+            },
+        }),
+        // 选项列表（固定高度，避免跳变；6 行 × .88rem = 5.28rem，整体更紧凑）
+        list: (0, react_1.css)({
+            flexShrink: 0,
+            height: "5.28rem",
+            overflowY: "auto",
+            overflowX: "hidden",
+            WebkitOverflowScrolling: "touch",
+            overscrollBehavior: "contain",
+            backgroundColor: bgPage,
+            paddingBottom: ".12rem",
+        }),
+        // iOS 风列表项：无分隔线，仅按下态浅灰底
+        listItem: (0, react_1.css)({
+            position: "relative",
+            height: ".88rem",
+            display: "flex",
+            alignItems: "center",
+            padding: "0 .32rem",
+            fontSize: ".3rem",
+            color: textPrimary,
+            transition: "background-color .15s",
+            "&:active": {
+                backgroundColor: bgSubtle,
+            },
+        }),
+        listItemLabel: (0, react_1.css)({
+            flex: 1,
+            minWidth: 0,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            letterSpacing: ".01rem",
+        }),
+        listItemSelected: (0, react_1.css)({
+            color: primary,
+            fontWeight: 500,
+        }),
+        // iOS 风对勾（SF Symbol checkmark 风格）
+        checkIcon: (0, react_1.css)({
+            width: ".32rem",
+            height: ".32rem",
+            flexShrink: 0,
+            marginLeft: ".16rem",
+            position: "relative",
+            "&::after": {
+                content: '""',
+                position: "absolute",
+                left: ".06rem",
+                top: ".04rem",
+                width: ".1rem",
+                height: ".2rem",
+                border: `solid ${primary}`,
+                borderWidth: "0 .03rem .03rem 0",
+                transform: "rotate(45deg)",
+            },
+        }),
+        // 空数据占位
+        empty: (0, react_1.css)({
+            padding: ".6rem 0",
+            textAlign: "center",
+            fontSize: ".26rem",
+            color: textTertiary,
+        }),
+    };
+}

package/build/SafeArea/index.js

@@ -14,25 +14,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SafeArea = SafeArea;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const useViewport_1 = require("../Effect/useViewport");
+// 模块级常量：避免每次 render 重新分配对象与哈希
+const topStyle = {
+    height: [
+        `constant(safe-area-inset-top, 0)`,
+        `env(safe-area-inset-top, 0)`,
+    ],
+};
+const bottomStyle = {
+    height: [
+        `constant(safe-area-inset-bottom, 0)`,
+        `env(safe-area-inset-bottom, 0)`,
+    ],
+};
 function SafeArea(props) {
     const { children, type = "bottom" } = props, extra = __rest(props, ["children", "type"]);
     (0, useViewport_1.useViewport)({ viewportFit: "cover" });
-    let boxCss = {};
-    if (type === "top") {
-        boxCss = {
-            height: [
-                `constant(safe-area-inset-top, 0)`,
-                `env(safe-area-inset-top, 0)`,
-            ],
-        };
-    }
-    else if (type === "bottom") {
-        boxCss = {
-            height: [
-                `constant(safe-area-inset-bottom, 0)`,
-                `env(safe-area-inset-bottom, 0)`,
-            ],
-        };
-    }
+    const boxCss = type === "top" ? topStyle : bottomStyle;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: boxCss }, extra, { children: children })));
 }

package/build/ScrollView/index.d.ts

@@ -1,27 +1,39 @@
-/** @jsx jsx */
-import { SerializedStyles } from "@emotion/react";
+import { Interpolation, Theme } from "@emotion/react";
 import * as CSS from "csstype";
+import { HTMLAttributes, ReactNode } from "react";
 export interface ScrollEvent {
     containerHeight: number;
     contentHeight: number;
     scrollTop: number;
     maxScroll: number;
     direction: "upward" | "downward";
-    rawEvent?: React.UIEvent;
+    rawEvent?: Event;
 }
-export interface ScrollViewProps extends Omit<React.HTMLProps<HTMLDivElement>, "onScroll"> {
-    children?: React.ReactNode;
+export interface ScrollViewHandle {
+    getElement: () => HTMLDivElement | null;
+    scrollTo: (options: {
+        top: number;
+        behavior?: ScrollBehavior;
+    }) => void;
+    scrollToTop: (behavior?: ScrollBehavior) => void;
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    scrollToElement: (target: HTMLElement | string, options?: {
+        offset?: number;
+        behavior?: ScrollBehavior;
+    }) => void;
+}
+export interface ScrollViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll"> {
+    children?: ReactNode;
     height?: CSS.Property.Height;
     reachTopThreshold?: number;
     onReachTop?: (event: ScrollEvent) => void;
     reachBottomThreshold?: number;
     onReachBottom?: (event: ScrollEvent) => void;
     showLoading?: boolean;
-    loadingContent?: React.ReactNode;
+    loadingContent?: ReactNode;
     onScroll?: (event: ScrollEvent) => void;
-    scrollThrottle?: number;
-    containerStyle?: SerializedStyles;
-    wrapperStyle?: SerializedStyles;
-    loadingStyle?: SerializedStyles;
+    containerStyle?: Interpolation<Theme>;
+    wrapperStyle?: Interpolation<Theme>;
+    loadingStyle?: Interpolation<Theme>;
 }
-export declare function ScrollView(props: ScrollViewProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & import("react").RefAttributes<ScrollViewHandle>>;