zkit-ui 1.0.0

package/dist/ui/AddressCascader/index.js

@@ -0,0 +1,710 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddressCascader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const zkit_tools_1 = require("zkit-tools");
+const useI18n_1 = require("../../i18n/useI18n");
+const useTheme_1 = require("../../theme/useTheme");
+const Sheet_1 = require("../Sheet");
+const Text_1 = require("../Text");
+const actionBar_1 = require("../Picker/actionBar");
+const area_data_1 = require("@vant/area-data");
+// 懒加载转换省市区数据。
+let cachedAreaData = null;
+function getAreaData() {
+    if (cachedAreaData)
+        return cachedAreaData;
+    const { province_list, city_list, county_list } = area_data_1.areaList;
+    const countiesByCity = new Map();
+    for (const [countyCode, countyName] of Object.entries(county_list)) {
+        const cityPrefix = countyCode.slice(0, 4);
+        const county = { value: countyCode, text: String(countyName) };
+        const counties = countiesByCity.get(cityPrefix);
+        if (counties) {
+            counties.push(county);
+        }
+        else {
+            countiesByCity.set(cityPrefix, [county]);
+        }
+    }
+    const citiesByProvince = new Map();
+    for (const [cityCode, cityName] of Object.entries(city_list)) {
+        const provincePrefix = cityCode.slice(0, 2);
+        const children = countiesByCity.get(cityCode.slice(0, 4));
+        const city = (children === null || children === void 0 ? void 0 : children.length)
+            ? { value: cityCode, text: String(cityName), children }
+            : { value: cityCode, text: String(cityName) };
+        const cities = citiesByProvince.get(provincePrefix);
+        if (cities) {
+            cities.push(city);
+        }
+        else {
+            citiesByProvince.set(provincePrefix, [city]);
+        }
+    }
+    const provinces = Object.entries(province_list).map(([provinceCode, provinceName]) => {
+        const children = citiesByProvince.get(provinceCode.slice(0, 2));
+        return (children === null || children === void 0 ? void 0 : children.length)
+            ? { value: provinceCode, text: String(provinceName), children }
+            : { value: provinceCode, text: String(provinceName) };
+    });
+    cachedAreaData = provinces;
+    return provinces;
+}
+const MAX_LEVELS = 3;
+const LEVELS = Array.from({ length: MAX_LEVELS }, (_, level) => level);
+const LIST_FADE_DURATION = 180;
+const LIST_FADE_START_OPACITY = 0.58;
+const OPTION_ROW_ESTIMATED_HEIGHT = (0, zkit_tools_1.wp)(58);
+const SELECTED_OPTION_VIEW_POSITION = 0.18;
+function clampNumber(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function pickPrimitive(node, keys, fallback) {
+    for (const key of keys) {
+        const v = node === null || node === void 0 ? void 0 : node[key];
+        if (typeof v === 'string' || typeof v === 'number')
+            return v;
+    }
+    return fallback;
+}
+function pickValue(node, fallbackIndex) {
+    var _a;
+    const fallback = fallbackIndex == null ? undefined : String(fallbackIndex);
+    return String((_a = pickPrimitive(node, ['value', 'id', 'code', 'key'], fallback)) !== null && _a !== void 0 ? _a : '');
+}
+function pickText(node) {
+    const v = pickPrimitive(node, ['text', 'label', 'title', 'name']);
+    return v == null ? '' : String(v);
+}
+function getChildren(node) {
+    return Array.isArray(node === null || node === void 0 ? void 0 : node.children) ? node.children : [];
+}
+function hasNextLevel(node, level) {
+    return level < MAX_LEVELS - 1 && getChildren(node).length > 0;
+}
+function buildLabel(labels, separator) {
+    return labels.filter(Boolean).join(separator);
+}
+function resolvePath(list, value) {
+    const nextValue = [];
+    const labels = [];
+    const items = [];
+    let currentList = Array.isArray(list) ? list : [];
+    for (let level = 0; level < MAX_LEVELS; level += 1) {
+        const desired = value === null || value === void 0 ? void 0 : value[level];
+        if (desired == null || !currentList.length)
+            break;
+        const idx = currentList.findIndex((item, index) => pickValue(item, index) === String(desired));
+        if (idx < 0)
+            break;
+        const item = currentList[idx];
+        if (!item)
+            break;
+        nextValue.push(pickValue(item, idx));
+        labels.push(pickText(item));
+        items.push(item);
+        currentList = getChildren(item);
+    }
+    return { value: nextValue, labels, items };
+}
+function getActiveLevelFromItems(items) {
+    if (!items.length)
+        return 0;
+    const lastIndex = Math.min(items.length - 1, MAX_LEVELS - 1);
+    const lastItem = items[lastIndex];
+    if (hasNextLevel(lastItem, lastIndex) && items.length < MAX_LEVELS)
+        return items.length;
+    return lastIndex;
+}
+function createDraft(list, value) {
+    const resolved = resolvePath(list, value);
+    return {
+        ...resolved,
+        activeLevel: getActiveLevelFromItems(resolved.items),
+    };
+}
+function getListForLevel(list, items, level) {
+    let currentList = Array.isArray(list) ? list : [];
+    for (let i = 0; i < level; i += 1) {
+        const next = getChildren(items[i]);
+        if (!next.length)
+            return [];
+        currentList = next;
+    }
+    return currentList;
+}
+function isCompleteDraft(draft) {
+    if (!draft.items.length)
+        return false;
+    const lastLevel = draft.items.length - 1;
+    const lastItem = draft.items[lastLevel];
+    return !hasNextLevel(lastItem, lastLevel);
+}
+function composeTrigger(children, onPress, disabled, ctx) {
+    if (typeof children === 'function') {
+        const node = children(ctx);
+        return composeTrigger(node, onPress, disabled, ctx);
+    }
+    if (React.isValidElement(children)) {
+        const child = children;
+        const prevOnPress = child.props.onPress;
+        if (typeof prevOnPress === 'function') {
+            return React.cloneElement(child, {
+                onPress: (...args) => {
+                    prevOnPress(...args);
+                    onPress();
+                },
+                disabled: disabled || child.props.disabled,
+            });
+        }
+        return React.cloneElement(child, {
+            onPress,
+            disabled: disabled || child.props.disabled,
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, disabled: disabled, children: children }));
+}
+const AddressOptionRow = React.memo(function AddressOptionRow({ option, selected, disabled, primaryColor, onSurfaceColor, mutedColor, onPress, onLayout, }) {
+    const handlePress = React.useCallback(() => {
+        onPress(option.item, option.index, option.level);
+    }, [onPress, option]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", disabled: disabled || option.disabled, onLayout: onLayout, onPress: handlePress, style: ({ pressed }) => [
+            styles.optionRow,
+            {
+                opacity: option.disabled ? 0.46 : pressed ? 0.78 : 1,
+            },
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.optionMain, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 2, style: [
+                        styles.optionText,
+                        {
+                            color: selected ? primaryColor : onSurfaceColor,
+                            fontWeight: selected ? '700' : '500',
+                        },
+                    ], children: option.text }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.optionMark, children: selected ? ((0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "check", size: (0, zkit_tools_1.wp)(19), color: primaryColor })) : option.hasChildren ? ((0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "chevron-right", size: (0, zkit_tools_1.wp)(18), color: mutedColor })) : null })] }));
+});
+exports.AddressCascader = React.forwardRef(function AddressCascader({ list, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, onDismissComplete, label: labelProp, defaultLabel, onLabelChange, title, separator = ' / ', levelLabels, lazyContent = true, drawerSize, disabled = false, onCancel, onConfirm, onChange, children, }, ref) {
+    const { t } = (0, useI18n_1.useI18n)();
+    const theme = (0, useTheme_1.useTheme)();
+    const { height: screenH } = (0, react_native_1.useWindowDimensions)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const safeBottom = (0, actionBar_1.getPickerActionBarBottomInset)(insets.bottom);
+    const areaData = React.useMemo(() => list !== null && list !== void 0 ? list : getAreaData(), [list]);
+    const isValueControlled = valueProp !== undefined;
+    const [innerValue, setInnerValue] = React.useState(defaultValue);
+    const value = valueProp !== undefined ? valueProp : innerValue;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const isOpenControlled = openProp !== undefined;
+    const visible = openProp !== undefined ? !!openProp : innerOpen;
+    const [contentMounted, setContentMounted] = React.useState(() => !lazyContent || visible);
+    const [innerLabel, setInnerLabel] = React.useState(defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : '');
+    const [draft, setDraft] = React.useState(() => createDraft(areaData, value));
+    const draftRef = React.useRef(draft);
+    draftRef.current = draft;
+    const defaultLevelLabels = React.useMemo(() => [
+        t('addressCascader.province'),
+        t('addressCascader.city'),
+        t('addressCascader.district'),
+    ], [t]);
+    const resolvedLevelLabels = React.useMemo(() => {
+        const next = (levelLabels === null || levelLabels === void 0 ? void 0 : levelLabels.length) ? levelLabels : defaultLevelLabels;
+        return Array.from({ length: MAX_LEVELS }, (_, i) => { var _a, _b; return (_b = (_a = next[i]) !== null && _a !== void 0 ? _a : defaultLevelLabels[i]) !== null && _b !== void 0 ? _b : ''; });
+    }, [defaultLevelLabels, levelLabels]);
+    React.useEffect(() => {
+        const nextDraft = createDraft(areaData, value);
+        draftRef.current = nextDraft;
+        setDraft(nextDraft);
+    }, [areaData, value]);
+    React.useEffect(() => {
+        if (visible) {
+            const nextDraft = createDraft(areaData, value);
+            draftRef.current = nextDraft;
+            setDraft(nextDraft);
+            if (lazyContent)
+                setContentMounted(true);
+        }
+        // 这里只希望在进入打开态时重置草稿和挂载懒加载内容。
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
+    const sheetHeight = React.useMemo(() => {
+        const maxHeight = Math.max((0, zkit_tools_1.wp)(320), screenH - Math.max(insets.top, (0, zkit_tools_1.wp)(24)));
+        const n = typeof drawerSize === 'number' ? drawerSize : drawerSize == null ? undefined : Number.parseFloat(drawerSize);
+        if (n != null && Number.isFinite(n) && n > 0) {
+            return clampNumber(n, Math.min((0, zkit_tools_1.wp)(360), maxHeight), maxHeight);
+        }
+        return clampNumber(screenH * 0.72, Math.min((0, zkit_tools_1.wp)(430), maxHeight), maxHeight);
+    }, [drawerSize, insets.top, screenH]);
+    const detents = React.useMemo(() => [clampNumber(sheetHeight / screenH, 0.1, 0.92)], [screenH, sheetHeight]);
+    const setCascaderOpen = React.useCallback((nextOpen) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+        if (!isOpenControlled)
+            setInnerOpen(nextOpen);
+    }, [isOpenControlled, onOpenChange]);
+    const close = React.useCallback(() => {
+        setCascaderOpen(false);
+    }, [setCascaderOpen]);
+    const openPicker = React.useCallback(() => {
+        if (disabled)
+            return;
+        if (!visible) {
+            setCascaderOpen(true);
+        }
+        const nextDraft = createDraft(areaData, value);
+        draftRef.current = nextDraft;
+        setDraft(nextDraft);
+        if (lazyContent)
+            setContentMounted(true);
+    }, [areaData, disabled, lazyContent, setCascaderOpen, value, visible]);
+    React.useImperativeHandle(ref, () => ({
+        open: openPicker,
+        close,
+    }), [close, openPicker]);
+    const committed = React.useMemo(() => resolvePath(areaData, value), [areaData, value]);
+    const committedLabel = React.useMemo(() => buildLabel(committed.labels, separator), [committed.labels, separator]);
+    const effectiveLabel = labelProp !== undefined ? labelProp : committedLabel || innerLabel;
+    const effectiveCtx = React.useMemo(() => ({
+        value: committed.value,
+        label: effectiveLabel,
+        labels: committed.labels,
+        items: committed.items,
+    }), [committed.items, committed.labels, committed.value, effectiveLabel]);
+    const currentList = React.useMemo(() => getListForLevel(areaData, draft.items, draft.activeLevel), [areaData, draft.activeLevel, draft.items]);
+    const currentOptions = React.useMemo(() => currentList.map((item, index) => ({
+        item,
+        index,
+        level: draft.activeLevel,
+        value: pickValue(item, index),
+        text: pickText(item),
+        disabled: !!item.disabled,
+        hasChildren: hasNextLevel(item, draft.activeLevel),
+    })), [currentList, draft.activeLevel]);
+    const activeSelectedValue = draft.value[draft.activeLevel];
+    const activeSelectedIndex = React.useMemo(() => currentOptions.findIndex((item) => item.value === activeSelectedValue), [activeSelectedValue, currentOptions]);
+    const currentOptionsRef = React.useRef(currentOptions);
+    const activeSelectedIndexRef = React.useRef(activeSelectedIndex);
+    currentOptionsRef.current = currentOptions;
+    activeSelectedIndexRef.current = activeSelectedIndex;
+    const confirmDisabled = disabled || !isCompleteDraft(draft);
+    const stepsScrollRef = React.useRef(null);
+    const optionsScrollRef = React.useRef(null);
+    const optionLayoutYRef = React.useRef(new Map());
+    const optionsViewportHeightRef = React.useRef(0);
+    const pendingOptionScrollFrameRef = React.useRef(null);
+    const pendingActiveOptionScrollRef = React.useRef(false);
+    const listOpacity = React.useRef(new react_native_1.Animated.Value(1)).current;
+    const pendingListTransitionFrameRef = React.useRef(null);
+    const previousActiveLevelRef = React.useRef(draft.activeLevel);
+    const listAnimatedStyle = React.useMemo(() => ({
+        opacity: listOpacity,
+    }), [listOpacity]);
+    React.useEffect(() => {
+        const rafId = requestAnimationFrame(() => {
+            var _a, _b;
+            if (draft.activeLevel <= 0) {
+                (_a = stepsScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ x: 0, animated: true });
+                return;
+            }
+            (_b = stepsScrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollToEnd({ animated: true });
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [draft.activeLevel]);
+    const cancelListTransitionFrame = React.useCallback(() => {
+        if (pendingListTransitionFrameRef.current == null)
+            return;
+        cancelAnimationFrame(pendingListTransitionFrameRef.current);
+        pendingListTransitionFrameRef.current = null;
+    }, []);
+    const resetListTransition = React.useCallback(() => {
+        cancelListTransitionFrame();
+        listOpacity.stopAnimation();
+        listOpacity.setValue(1);
+    }, [cancelListTransitionFrame, listOpacity]);
+    const startListTransition = React.useCallback((fromLevel, toLevel) => {
+        previousActiveLevelRef.current = toLevel;
+        if (!visible || !contentMounted || fromLevel === toLevel) {
+            resetListTransition();
+            return;
+        }
+        cancelListTransitionFrame();
+        listOpacity.stopAnimation();
+        listOpacity.setValue(LIST_FADE_START_OPACITY);
+        pendingListTransitionFrameRef.current = requestAnimationFrame(() => {
+            pendingListTransitionFrameRef.current = null;
+            react_native_1.Animated.timing(listOpacity, {
+                toValue: 1,
+                duration: LIST_FADE_DURATION,
+                easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+                useNativeDriver: true,
+            }).start();
+        });
+    }, [
+        cancelListTransitionFrame,
+        contentMounted,
+        listOpacity,
+        resetListTransition,
+        visible,
+    ]);
+    React.useEffect(() => {
+        if (!visible || !contentMounted) {
+            previousActiveLevelRef.current = draft.activeLevel;
+            resetListTransition();
+            return;
+        }
+        if (previousActiveLevelRef.current !== draft.activeLevel) {
+            previousActiveLevelRef.current = draft.activeLevel;
+            resetListTransition();
+        }
+    }, [contentMounted, draft.activeLevel, resetListTransition, visible]);
+    React.useEffect(() => {
+        return resetListTransition;
+    }, [resetListTransition]);
+    const keyExtractor = React.useCallback((item) => `${item.level}-${item.value}-${item.index}`, []);
+    const scrollActiveOptionIntoView = React.useCallback((animated) => {
+        const scrollView = optionsScrollRef.current;
+        if (!scrollView)
+            return;
+        const activeIndex = activeSelectedIndexRef.current;
+        if (activeIndex <= 0) {
+            scrollView.scrollTo({ y: 0, animated });
+            return;
+        }
+        const activeOption = currentOptionsRef.current[activeIndex];
+        if (!activeOption)
+            return;
+        const key = keyExtractor(activeOption);
+        const layoutY = optionLayoutYRef.current.get(key);
+        const viewportHeight = optionsViewportHeightRef.current;
+        const fallbackY = activeIndex * OPTION_ROW_ESTIMATED_HEIGHT;
+        const measuredY = layoutY !== null && layoutY !== void 0 ? layoutY : fallbackY;
+        const viewOffset = viewportHeight > 0 ? viewportHeight * SELECTED_OPTION_VIEW_POSITION : 0;
+        scrollView.scrollTo({
+            y: Math.max(0, measuredY - viewOffset),
+            animated,
+        });
+    }, [keyExtractor]);
+    const scheduleActiveOptionScroll = React.useCallback((animated = false) => {
+        if (!visible || !contentMounted || !pendingActiveOptionScrollRef.current)
+            return;
+        if (pendingOptionScrollFrameRef.current != null) {
+            cancelAnimationFrame(pendingOptionScrollFrameRef.current);
+        }
+        pendingOptionScrollFrameRef.current = requestAnimationFrame(() => {
+            pendingOptionScrollFrameRef.current = null;
+            if (!pendingActiveOptionScrollRef.current)
+                return;
+            pendingActiveOptionScrollRef.current = false;
+            scrollActiveOptionIntoView(animated);
+        });
+    }, [contentMounted, scrollActiveOptionIntoView, visible]);
+    React.useEffect(() => {
+        optionLayoutYRef.current.clear();
+    }, [currentOptions]);
+    React.useEffect(() => {
+        if (!visible || !contentMounted) {
+            pendingActiveOptionScrollRef.current = false;
+            return;
+        }
+        pendingActiveOptionScrollRef.current = true;
+        scheduleActiveOptionScroll(false);
+        return () => {
+            if (pendingOptionScrollFrameRef.current != null) {
+                cancelAnimationFrame(pendingOptionScrollFrameRef.current);
+                pendingOptionScrollFrameRef.current = null;
+            }
+        };
+    }, [contentMounted, draft.activeLevel, scheduleActiveOptionScroll, visible]);
+    const emitDraftChange = React.useCallback((nextDraft) => {
+        const label = buildLabel(nextDraft.labels, separator);
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            value: nextDraft.value,
+            values: nextDraft.value,
+            label,
+            labels: nextDraft.labels,
+            items: nextDraft.items,
+        });
+    }, [onChange, separator]);
+    const handleLevelPress = React.useCallback((level) => {
+        if (disabled)
+            return;
+        const prevDraft = draftRef.current;
+        if (level !== 0 && !prevDraft.items[level - 1])
+            return;
+        if (prevDraft.activeLevel === level)
+            return;
+        const nextDraft = { ...prevDraft, activeLevel: level };
+        startListTransition(prevDraft.activeLevel, nextDraft.activeLevel);
+        draftRef.current = nextDraft;
+        setDraft(nextDraft);
+    }, [disabled, startListTransition]);
+    const handleItemPress = React.useCallback((item, index, level) => {
+        if (disabled || item.disabled)
+            return;
+        const prevDraft = draftRef.current;
+        if (level !== prevDraft.activeLevel)
+            return;
+        const nextItems = prevDraft.items.slice(0, level);
+        const nextLabels = prevDraft.labels.slice(0, level);
+        const nextValue = prevDraft.value.slice(0, level);
+        nextItems[level] = item;
+        nextLabels[level] = pickText(item);
+        nextValue[level] = pickValue(item, index);
+        const nextDraft = {
+            value: nextValue,
+            labels: nextLabels,
+            items: nextItems,
+            activeLevel: hasNextLevel(item, level) ? level + 1 : level,
+        };
+        if (prevDraft.activeLevel !== nextDraft.activeLevel) {
+            startListTransition(prevDraft.activeLevel, nextDraft.activeLevel);
+        }
+        draftRef.current = nextDraft;
+        setDraft(nextDraft);
+        emitDraftChange(nextDraft);
+    }, [disabled, emitDraftChange, startListTransition]);
+    const handleCancel = React.useCallback(() => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        close();
+    }, [close, onCancel]);
+    const handleConfirm = React.useCallback(() => {
+        if (confirmDisabled)
+            return;
+        const label = buildLabel(draft.labels, separator);
+        const payload = {
+            value: draft.value,
+            values: draft.value,
+            label,
+            labels: draft.labels,
+            items: draft.items,
+        };
+        onLabelChange === null || onLabelChange === void 0 ? void 0 : onLabelChange(label);
+        if (labelProp === undefined)
+            setInnerLabel(label);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(draft.value);
+        if (!isValueControlled)
+            setInnerValue(draft.value);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(payload);
+        close();
+    }, [
+        close,
+        confirmDisabled,
+        draft.items,
+        draft.labels,
+        draft.value,
+        isValueControlled,
+        labelProp,
+        onConfirm,
+        onLabelChange,
+        onValueChange,
+        separator,
+    ]);
+    const handleSheetOpenChange = React.useCallback((nextOpen, meta) => {
+        if (!nextOpen && visible && meta.reason !== 'api') {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        }
+        setCascaderOpen(nextOpen);
+    }, [onCancel, setCascaderOpen, visible]);
+    const handleSheetDismissComplete = React.useCallback(() => {
+        if (lazyContent)
+            setContentMounted(false);
+        onDismissComplete === null || onDismissComplete === void 0 ? void 0 : onDismissComplete();
+    }, [lazyContent, onDismissComplete]);
+    const triggerNode = React.useMemo(() => (children != null ? composeTrigger(children, openPicker, disabled, effectiveCtx) : null), [children, disabled, effectiveCtx, openPicker]);
+    const renderStep = React.useCallback((level) => {
+        const selected = draft.labels[level];
+        const isActive = draft.activeLevel === level;
+        const enabled = level === 0 || !!draft.items[level - 1];
+        return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [level > 0 ? (0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "chevron-right", size: (0, zkit_tools_1.wp)(14), color: theme.colors.muted }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", disabled: !enabled || disabled, onPress: () => handleLevelPress(level), style: ({ pressed }) => [
+                        styles.stepPill,
+                        {
+                            backgroundColor: isActive ? theme.colors.secondary : theme.colors.surface,
+                            borderColor: isActive ? theme.colors.secondary : theme.colors.border,
+                            opacity: enabled ? (pressed ? 0.78 : 1) : 0.45,
+                        },
+                    ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 1, style: [
+                            styles.stepText,
+                            { color: isActive || selected ? theme.colors.onSurface : theme.colors.muted },
+                        ], children: selected || resolvedLevelLabels[level] }) })] }, `step-${level}`));
+    }, [
+        disabled,
+        draft.activeLevel,
+        draft.items,
+        draft.labels,
+        handleLevelPress,
+        resolvedLevelLabels,
+        theme.colors.border,
+        theme.colors.muted,
+        theme.colors.onSurface,
+        theme.colors.secondary,
+        theme.colors.surface,
+    ]);
+    const handleOptionLayout = React.useCallback((key, event) => {
+        optionLayoutYRef.current.set(key, event.nativeEvent.layout.y);
+        scheduleActiveOptionScroll(false);
+    }, [scheduleActiveOptionScroll]);
+    const handleOptionsContentSizeChange = React.useCallback(() => {
+        scheduleActiveOptionScroll(false);
+    }, [scheduleActiveOptionScroll]);
+    const handleOptionsViewportLayout = React.useCallback((event) => {
+        optionsViewportHeightRef.current = event.nativeEvent.layout.height;
+        scheduleActiveOptionScroll(false);
+    }, [scheduleActiveOptionScroll]);
+    const renderOption = React.useCallback((item) => {
+        const key = keyExtractor(item);
+        const selected = item.value === activeSelectedValue;
+        return ((0, jsx_runtime_1.jsx)(AddressOptionRow, { option: item, selected: selected, disabled: disabled, primaryColor: theme.colors.primary, onSurfaceColor: theme.colors.onSurface, mutedColor: theme.colors.muted, onPress: handleItemPress, onLayout: selected ? (event) => handleOptionLayout(key, event) : undefined }));
+    }, [
+        activeSelectedValue,
+        disabled,
+        handleOptionLayout,
+        handleItemPress,
+        keyExtractor,
+        theme.colors.muted,
+        theme.colors.onSurface,
+        theme.colors.primary,
+    ]);
+    const renderSeparator = React.useCallback(() => (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.separatorLine, { backgroundColor: theme.colors.border }] }), [theme.colors.border]);
+    const sheetNode = ((0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { placement: "bottom", open: visible, onOpenChange: handleSheetOpenChange, onCloseComplete: handleSheetDismissComplete, detents: detents, backgroundColor: theme.colors.surface, handle: false, draggable: false, dismissible: !disabled, nativeProps: { insetAdjustment: 'never' }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                styles.sheetInner,
+                {
+                    backgroundColor: theme.colors.surface,
+                    height: sheetHeight,
+                    paddingBottom: safeBottom,
+                },
+            ], pointerEvents: disabled ? 'none' : 'auto', children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.header, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.headerTitle, { color: theme.colors.onSurface }], numberOfLines: 1, children: title !== null && title !== void 0 ? title : t('addressCascader.title') }) }), contentMounted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: stepsScrollRef, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.stepsContent, style: styles.stepsScroll, children: LEVELS.map(renderStep) }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [styles.listFrame, { borderColor: theme.colors.border }, listAnimatedStyle], children: currentOptions.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: optionsScrollRef, contentContainerStyle: styles.listContent, keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, onContentSizeChange: handleOptionsContentSizeChange, onLayout: handleOptionsViewportLayout, showsVerticalScrollIndicator: false, style: styles.optionsScroll, children: currentOptions.map((option, index) => {
+                                    const key = keyExtractor(option);
+                                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [renderOption(option), index < currentOptions.length - 1 ? renderSeparator() : null] }, key));
+                                }) })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.emptyState, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.emptyText, { color: theme.colors.muted }], children: t('addressCascader.empty') }) })) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.lazyPlaceholder })), (0, jsx_runtime_1.jsx)(actionBar_1.PickerActionBar, { cancelText: t('picker.cancel'), confirmText: t('picker.confirm'), onCancel: handleCancel, onConfirm: handleConfirm, disabled: disabled, confirmDisabled: confirmDisabled, style: styles.footer })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerNode, sheetNode] }));
+});
+const styles = react_native_1.StyleSheet.create({
+    sheetInner: {
+        paddingHorizontal: (0, zkit_tools_1.wp)(16),
+        paddingTop: (0, zkit_tools_1.wp)(12),
+        width: '100%',
+    },
+    header: {
+        alignItems: 'center',
+        height: (0, zkit_tools_1.wp)(34),
+        justifyContent: 'center',
+    },
+    headerTitle: {
+        fontSize: (0, zkit_tools_1.sp)(16),
+        fontWeight: '600',
+    },
+    stepsScroll: {
+        alignSelf: 'stretch',
+        flexGrow: 0,
+        marginTop: (0, zkit_tools_1.wp)(10),
+        maxHeight: (0, zkit_tools_1.wp)(40),
+        width: '100%',
+    },
+    stepsContent: {
+        alignItems: 'center',
+        flexGrow: 1,
+        gap: (0, zkit_tools_1.wp)(8),
+        justifyContent: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(4),
+    },
+    stepPill: {
+        alignItems: 'center',
+        borderRadius: (0, zkit_tools_1.wp)(8),
+        borderWidth: (0, zkit_tools_1.wp)(1),
+        justifyContent: 'center',
+        maxWidth: (0, zkit_tools_1.wp)(178),
+        minHeight: (0, zkit_tools_1.wp)(34),
+        minWidth: (0, zkit_tools_1.wp)(76),
+        paddingHorizontal: (0, zkit_tools_1.wp)(11),
+    },
+    stepText: {
+        fontSize: (0, zkit_tools_1.sp)(14),
+        fontWeight: '700',
+    },
+    listFrame: {
+        borderTopWidth: react_native_1.StyleSheet.hairlineWidth,
+        flex: 1,
+        marginTop: (0, zkit_tools_1.wp)(12),
+        overflow: 'hidden',
+    },
+    optionsScroll: {
+        flex: 1,
+    },
+    listContent: {
+        paddingBottom: (0, zkit_tools_1.wp)(6),
+    },
+    optionRow: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        minHeight: (0, zkit_tools_1.wp)(56),
+        paddingHorizontal: (0, zkit_tools_1.wp)(10),
+        paddingVertical: (0, zkit_tools_1.wp)(7),
+    },
+    optionMain: {
+        flex: 1,
+        minWidth: 0,
+        paddingRight: (0, zkit_tools_1.wp)(12),
+    },
+    optionText: {
+        fontSize: (0, zkit_tools_1.sp)(16),
+        lineHeight: (0, zkit_tools_1.sp)(22),
+    },
+    optionMark: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: (0, zkit_tools_1.wp)(28),
+    },
+    separatorLine: {
+        height: react_native_1.StyleSheet.hairlineWidth,
+    },
+    emptyState: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center',
+        minHeight: (0, zkit_tools_1.wp)(180),
+    },
+    emptyText: {
+        fontSize: (0, zkit_tools_1.sp)(14),
+        fontWeight: '600',
+    },
+    lazyPlaceholder: {
+        flex: 1,
+    },
+    footer: {
+        paddingTop: (0, zkit_tools_1.wp)(12),
+    },
+});