zkit-ui 1.0.0

package/dist/ui/BetweenTime/index.js

@@ -0,0 +1,702 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BetweenTime = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const dayjs_1 = __importDefault(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+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 Button_1 = require("../Button");
+const actionBar_1 = require("../Picker/actionBar");
+const Text_1 = require("../Text");
+const WheelColumn_1 = require("../WheelColumn");
+dayjs_1.default.extend(customParseFormat_1.default);
+const ITEM_HEIGHT = WheelColumn_1.WHEEL_ITEM_HEIGHT;
+const VISIBLE_ITEMS = WheelColumn_1.WHEEL_VISIBLE_ITEMS;
+const STANDARD_INPUT_FORMATS = [
+    'YYYY',
+    'YYYY-M',
+    'YYYY-MM',
+    'YYYY-M-D',
+    'YYYY-MM-DD',
+    'YYYY-MM-DDHH',
+    'YYYY-MM-DD HH',
+    'YYYY-MM-DDHH:mm',
+    'YYYY-MM-DD HH:mm',
+    'YYYY-MM-DDHH:mm:ss',
+    'YYYY-MM-DD HH:mm:ss',
+];
+function clampNumber(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+function toIntOrNull(v) {
+    const n = Number.parseInt(v, 10);
+    return Number.isFinite(n) ? n : null;
+}
+function parseStandardDateStrict(input) {
+    if (!input)
+        return undefined;
+    const d = (0, dayjs_1.default)(input, STANDARD_INPUT_FORMATS, true);
+    if (!d.isValid()) {
+        throw new Error(`[zkit-ui][BetweenTime] Invalid date string: "${input}"`);
+    }
+    return d;
+}
+function formatByType(d, type) {
+    switch (type) {
+        case 'year':
+            return d.format('YYYY');
+        case 'month':
+            return d.format('YYYY-MM');
+        case 'day':
+            return d.format('YYYY-MM-DD');
+        case 'hour':
+            return d.format('YYYY-MM-DDHH');
+        case 'minute':
+            return d.format('YYYY-MM-DDHH:mm');
+        case 'second':
+            return d.format('YYYY-MM-DDHH:mm:ss');
+    }
+}
+function normalizeDraftByType(d, type) {
+    if (type === 'year')
+        return d.month(0).date(1).hour(0).minute(0).second(0);
+    if (type === 'month')
+        return d.date(1).hour(0).minute(0).second(0);
+    if (type === 'day')
+        return d.hour(0).minute(0).second(0);
+    if (type === 'hour')
+        return d.minute(0).second(0);
+    if (type === 'minute')
+        return d.second(0);
+    return d;
+}
+function clampToBounds(d, bounds) {
+    if (bounds.min && d.isBefore(bounds.min))
+        return bounds.min;
+    if (bounds.max && d.isAfter(bounds.max))
+        return bounds.max;
+    return d;
+}
+function resolveInitialPair(modelValue, bounds, type) {
+    const rawStart = Array.isArray(modelValue) ? modelValue[0] : undefined;
+    const rawEnd = Array.isArray(modelValue) ? modelValue[1] : undefined;
+    const min = bounds.min;
+    const max = bounds.max;
+    const now = (0, dayjs_1.default)();
+    let s = rawStart ? parseStandardDateStrict(rawStart) : undefined;
+    let e = rawEnd ? parseStandardDateStrict(rawEnd) : undefined;
+    if (!s || !e) {
+        const seed = clampToBounds(now, bounds);
+        s = s !== null && s !== void 0 ? s : seed;
+        e = e !== null && e !== void 0 ? e : seed;
+    }
+    s = normalizeDraftByType(clampToBounds(s, bounds), type);
+    e = normalizeDraftByType(clampToBounds(e, bounds), type);
+    if (s.isAfter(e)) {
+        const tmp = s;
+        s = e;
+        e = tmp;
+    }
+    if (min && max && min.isAfter(max)) {
+        throw new Error('[zkit-ui][BetweenTime] Invalid bounds: start is after end.');
+    }
+    return { start: s, end: e };
+}
+function ensureFormatSyncValueIsStandard(value) {
+    const d = (0, dayjs_1.default)(value, STANDARD_INPUT_FORMATS, true);
+    if (!d.isValid()) {
+        throw new Error(`[zkit-ui][BetweenTime] formatSyncValue requires standard output, got "${value}".`);
+    }
+}
+function getQuarterStart(d) {
+    const m = d.month(); // 0-11
+    const qStartMonth = Math.floor(m / 3) * 3;
+    return d.month(qStartMonth).date(1).hour(0).minute(0).second(0);
+}
+function getQuickRange(key, now) {
+    if (key === 'd') {
+        const t = now.startOf('day');
+        return { start: t, end: t.endOf('day') };
+    }
+    if (key === 'w') {
+        const s = now.startOf('week').startOf('day');
+        const e = now.endOf('week').endOf('day');
+        return { start: s, end: e };
+    }
+    if (key === 'm') {
+        const s = now.startOf('month').startOf('day');
+        const e = now.endOf('month').endOf('day');
+        return { start: s, end: e };
+    }
+    if (key === 'y') {
+        const s = now.startOf('year').startOf('day');
+        const e = now.endOf('year').endOf('day');
+        return { start: s, end: e };
+    }
+    if (key === 'q') {
+        const s = getQuarterStart(now).startOf('day');
+        const e = s.add(3, 'month').subtract(1, 'second').endOf('day');
+        return { start: s, end: e };
+    }
+    const n = toIntOrNull(key);
+    if (n != null && n > 0) {
+        const e = now.endOf('day');
+        const s = now.subtract(n - 1, 'day').startOf('day');
+        return { start: s, end: e };
+    }
+    return null;
+}
+function getColumnsCount(type) {
+    if (type === 'year')
+        return 1;
+    if (type === 'month')
+        return 2;
+    if (type === 'day')
+        return 3;
+    if (type === 'hour')
+        return 4;
+    if (type === 'minute')
+        return 5;
+    return 6;
+}
+function ensureBoundsValid(bounds) {
+    if (bounds.min && bounds.max && bounds.min.isAfter(bounds.max)) {
+        throw new Error('[zkit-ui][BetweenTime] Invalid bounds: start is after end.');
+    }
+}
+// 缓存常用的选项数组，避免重复创建
+const wheelOptionsCache = new Map();
+function buildWheelOptions(min, max, pad2 = false) {
+    const cacheKey = `${min}-${max}-${pad2}`;
+    const cached = wheelOptionsCache.get(cacheKey);
+    if (cached)
+        return cached;
+    const out = [];
+    for (let v = min; v <= max; v += 1) {
+        out.push({ value: v, label: pad2 ? String(v).padStart(2, '0') : String(v) });
+    }
+    wheelOptionsCache.set(cacheKey, out);
+    return out;
+}
+function resolveWheelData(d, bounds, type) {
+    var _a, _b;
+    const count = getColumnsCount(type);
+    const min = bounds.min;
+    const max = bounds.max;
+    const minYear = (_a = min === null || min === void 0 ? void 0 : min.year()) !== null && _a !== void 0 ? _a : 1970;
+    const maxYear = (_b = max === null || max === void 0 ? void 0 : max.year()) !== null && _b !== void 0 ? _b : 2099;
+    const years = buildWheelOptions(minYear, maxYear);
+    const y = clampNumber(d.year(), minYear, maxYear);
+    const mMin = y === (min === null || min === void 0 ? void 0 : min.year()) ? (min.month() + 1) : 1;
+    const mMax = y === (max === null || max === void 0 ? void 0 : max.year()) ? (max.month() + 1) : 12;
+    const months = buildWheelOptions(mMin, mMax, true);
+    const month = clampNumber(d.month() + 1, mMin, mMax);
+    const base = (0, dayjs_1.default)(`${y}-${String(month).padStart(2, '0')}-01`);
+    const dim = base.daysInMonth();
+    const isMinYM = y === (min === null || min === void 0 ? void 0 : min.year()) && month === (min.month() + 1);
+    const isMaxYM = y === (max === null || max === void 0 ? void 0 : max.year()) && month === (max.month() + 1);
+    const dMin = isMinYM ? min.date() : 1;
+    const dMax = isMaxYM ? max.date() : dim;
+    const days = buildWheelOptions(dMin, dMax, true);
+    const day = clampNumber(d.date(), dMin, dMax);
+    const sameMinYMD = min != null && y === min.year() && month === (min.month() + 1) && day === min.date();
+    const sameMaxYMD = max != null && y === max.year() && month === (max.month() + 1) && day === max.date();
+    const hMin = sameMinYMD ? min.hour() : 0;
+    const hMax = sameMaxYMD ? max.hour() : 23;
+    const hours = buildWheelOptions(hMin, hMax, true);
+    const hour = clampNumber(d.hour(), hMin, hMax);
+    const sameMinYMDH = sameMinYMD && hour === (min === null || min === void 0 ? void 0 : min.hour());
+    const sameMaxYMDH = sameMaxYMD && hour === (max === null || max === void 0 ? void 0 : max.hour());
+    const minMin = sameMinYMDH ? min.minute() : 0;
+    const minMax = sameMaxYMDH ? max.minute() : 59;
+    const minutes = buildWheelOptions(minMin, minMax, true);
+    const minute = clampNumber(d.minute(), minMin, minMax);
+    const sameMinYMDHM = sameMinYMDH && minute === (min === null || min === void 0 ? void 0 : min.minute());
+    const sameMaxYMDHM = sameMaxYMDH && minute === (max === null || max === void 0 ? void 0 : max.minute());
+    const sMin = sameMinYMDHM ? min.second() : 0;
+    const sMax = sameMaxYMDHM ? max.second() : 59;
+    const seconds = buildWheelOptions(sMin, sMax, true);
+    const all = [years, months, days, hours, minutes, seconds].slice(0, count);
+    const indices = [
+        years.findIndex((it) => it.value === y),
+        months.findIndex((it) => it.value === month),
+        days.findIndex((it) => it.value === day),
+        hours.findIndex((it) => it.value === hour),
+        minutes.findIndex((it) => it.value === minute),
+        seconds.findIndex((it) => it.value === clampNumber(d.second(), sMin, sMax)),
+    ].slice(0, count);
+    return { columns: all, indices };
+}
+function applyColumnValue(d, columnIndex, value) {
+    if (columnIndex === 0)
+        return d.year(value);
+    if (columnIndex === 1)
+        return d.month(value - 1);
+    if (columnIndex === 2)
+        return d.date(value);
+    if (columnIndex === 3)
+        return d.hour(value);
+    if (columnIndex === 4)
+        return d.minute(value);
+    return d.second(value);
+}
+function composeTrigger(children, onPress, disabled) {
+    var _a, _b, _c;
+    if (React.isValidElement(children)) {
+        const anyChild = children;
+        const prevOnPress = (_a = anyChild === null || anyChild === void 0 ? void 0 : anyChild.props) === null || _a === void 0 ? void 0 : _a.onPress;
+        if (typeof prevOnPress === 'function') {
+            return React.cloneElement(children, {
+                onPress: (...args) => {
+                    prevOnPress(...args);
+                    onPress();
+                },
+                disabled: disabled || ((_b = anyChild === null || anyChild === void 0 ? void 0 : anyChild.props) === null || _b === void 0 ? void 0 : _b.disabled),
+            });
+        }
+        return React.cloneElement(children, {
+            onPress,
+            disabled: disabled || ((_c = anyChild === null || anyChild === void 0 ? void 0 : anyChild.props) === null || _c === void 0 ? void 0 : _c.disabled),
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, disabled: disabled, children: children }));
+}
+exports.BetweenTime = React.forwardRef(function BetweenTime({ title, start, end, type = 'day', format = 'YYYY-MM-DD', formatSyncValue = false, cellUnits, quickDate, lazyContent = true, drawerSize, disabled = false, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, onDismissComplete, onCancel, onConfirm, children, }, ref) {
+    const { t } = (0, useI18n_1.useI18n)();
+    const theme = (0, useTheme_1.useTheme)();
+    const { height: screenH, width: screenW } = (0, react_native_1.useWindowDimensions)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const safeBottom = (0, actionBar_1.getPickerActionBarBottomInset)(insets.bottom);
+    const bounds = React.useMemo(() => {
+        const min = parseStandardDateStrict(start);
+        const max = parseStandardDateStrict(end);
+        const b = { min, max };
+        ensureBoundsValid(b);
+        return b;
+    }, [start, end]);
+    const [innerValue, setInnerValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+    const isValueControlled = valueProp !== undefined;
+    const value = isValueControlled ? valueProp : innerValue;
+    const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+    const isOpenControlled = openProp !== undefined;
+    const visible = isOpenControlled ? !!openProp : innerOpen;
+    const [contentMounted, setContentMounted] = React.useState(!lazyContent);
+    const detents = React.useMemo(() => {
+        if (drawerSize == null)
+            return ['auto'];
+        const n = typeof drawerSize === 'number' ? drawerSize : Number.parseFloat(drawerSize);
+        if (!Number.isFinite(n) || n <= 0)
+            return ['auto'];
+        const fraction = clampNumber(n / screenH, 0.1, 0.92);
+        return [fraction];
+    }, [drawerSize, screenH]);
+    const [activeSide, setActiveSide] = React.useState('start');
+    const [{ draftStart, draftEnd }, setDraft] = React.useState(() => {
+        const pair = resolveInitialPair(value, bounds, type);
+        return { draftStart: pair.start, draftEnd: pair.end };
+    });
+    React.useEffect(() => {
+        const pair = resolveInitialPair(value, bounds, type);
+        setDraft({ draftStart: pair.start, draftEnd: pair.end });
+    }, [bounds, type, value === null || value === void 0 ? void 0 : value[0], value === null || value === void 0 ? void 0 : value[1]]);
+    React.useEffect(() => {
+        if (visible) {
+            const pair = resolveInitialPair(value, bounds, type);
+            setDraft({ draftStart: pair.start, draftEnd: pair.end });
+            if (lazyContent && !contentMounted)
+                setContentMounted(true);
+        }
+        // 只希望在进入打开态时重置草稿，不跟随其他依赖重复触发。
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible]);
+    const defaultCellUnits = React.useMemo(() => [
+        t('betweenTime.unit.year'),
+        t('betweenTime.unit.month'),
+        t('betweenTime.unit.day'),
+        t('betweenTime.unit.hour'),
+        t('betweenTime.unit.minute'),
+        t('betweenTime.unit.second'),
+    ], [t]);
+    const getQuickLabel = React.useCallback((key) => {
+        if (key === 'd')
+            return t('betweenTime.quick.today');
+        if (key === 'w')
+            return t('betweenTime.quick.thisWeek');
+        if (key === 'm')
+            return t('betweenTime.quick.thisMonth');
+        if (key === 'y')
+            return t('betweenTime.quick.thisYear');
+        if (key === 'q')
+            return t('betweenTime.quick.thisQuarter');
+        const n = toIntOrNull(key);
+        if (n != null && n > 0)
+            return t('betweenTime.quick.recentDays', { n });
+        return key;
+    }, [t]);
+    const setPickerOpen = React.useCallback((nextOpen) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+        if (!isOpenControlled)
+            setInnerOpen(nextOpen);
+    }, [isOpenControlled, onOpenChange]);
+    const close = React.useCallback(() => {
+        setPickerOpen(false);
+    }, [setPickerOpen]);
+    const openPicker = React.useCallback(() => {
+        if (disabled)
+            return;
+        if (!visible) {
+            setPickerOpen(true);
+        }
+        const pair = resolveInitialPair(value, bounds, type);
+        setDraft({ draftStart: pair.start, draftEnd: pair.end });
+        if (lazyContent && !contentMounted) {
+            setContentMounted(true);
+        }
+    }, [bounds, contentMounted, disabled, lazyContent, setPickerOpen, type, value, visible]);
+    React.useImperativeHandle(ref, () => ({
+        open: openPicker,
+        close,
+    }), [openPicker, close]);
+    const columnsCount = React.useMemo(() => getColumnsCount(type), [type]);
+    const wheelsRef = React.useRef([]);
+    React.useEffect(() => {
+        wheelsRef.current.length = columnsCount;
+    }, [columnsCount]);
+    const resolvedCellUnits = cellUnits !== null && cellUnits !== void 0 ? cellUnits : defaultCellUnits;
+    const unitLabels = React.useMemo(() => resolvedCellUnits.slice(0, columnsCount), [resolvedCellUnits, columnsCount]);
+    const activeDraft = activeSide === 'start' ? draftStart : draftEnd;
+    const { columns, indices } = React.useMemo(() => resolveWheelData(activeDraft, bounds, type), [activeDraft, bounds, type]);
+    const columnsLayoutRef = React.useRef({ width: screenW - (0, zkit_tools_1.wp)(32) });
+    const onColumnsLayout = React.useCallback((e) => {
+        columnsLayoutRef.current = { width: e.nativeEvent.layout.width };
+    }, []);
+    const columnWidth = React.useMemo(() => {
+        const w = columnsLayoutRef.current.width;
+        return w / Math.max(1, columnsCount);
+    }, [columnsCount, screenW]);
+    const setValue = React.useCallback((next) => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        if (!isValueControlled)
+            setInnerValue(next);
+    }, [isValueControlled, onValueChange]);
+    const applyPairAndEmit = React.useCallback((nextStart, nextEnd) => {
+        const s = normalizeDraftByType(clampToBounds(nextStart, bounds), type);
+        const e = normalizeDraftByType(clampToBounds(nextEnd, bounds), type);
+        let a = s;
+        let b = e;
+        let nextActive = activeSide;
+        if (a.isAfter(b)) {
+            const tmp = a;
+            a = b;
+            b = tmp;
+            nextActive = activeSide === 'start' ? 'end' : 'start';
+        }
+        setDraft({ draftStart: a, draftEnd: b });
+        if (nextActive !== activeSide)
+            setActiveSide(nextActive);
+        const rawStart = formatByType(a, type);
+        const rawEnd = formatByType(b, type);
+        let outStart = rawStart;
+        let outEnd = rawEnd;
+        if (formatSyncValue) {
+            outStart = a.format(format);
+            outEnd = b.format(format);
+            ensureFormatSyncValueIsStandard(outStart);
+            ensureFormatSyncValueIsStandard(outEnd);
+        }
+        const nextValue = outStart && outEnd ? [outStart, outEnd] : [];
+        setValue(nextValue);
+    }, [activeSide, bounds, format, formatSyncValue, setValue, type]);
+    // iOS 原生 wheel 在减速尚未结束时，业务层未必已经拿到最新列值。
+    // 确认按钮这里会主动向每一列请求一次“以当前中心项为准”的即时结算，
+    // 然后再统一重建 start / end，避免出现“明明已经滚到新值，但确认后还是旧值”的错位。
+    const syncDraftFromWheels = React.useCallback(async () => {
+        var _a, _b;
+        let nextDraft = activeDraft;
+        for (let columnIndex = 0; columnIndex < columnsCount; columnIndex += 1) {
+            const opts = (_a = columns[columnIndex]) !== null && _a !== void 0 ? _a : [];
+            if (!opts.length)
+                break;
+            const wheel = wheelsRef.current[columnIndex];
+            const settledIndex = react_native_1.Platform.OS === 'ios'
+                ? await (wheel === null || wheel === void 0 ? void 0 : wheel.syncCurrentSelection())
+                : wheel === null || wheel === void 0 ? void 0 : wheel.settleToNearest(false);
+            const safeIndex = clampNumber((_b = settledIndex !== null && settledIndex !== void 0 ? settledIndex : indices[columnIndex]) !== null && _b !== void 0 ? _b : 0, 0, opts.length - 1);
+            const picked = opts[safeIndex];
+            if (!picked)
+                continue;
+            nextDraft = applyColumnValue(nextDraft, columnIndex, picked.value);
+        }
+        nextDraft = normalizeDraftByType(clampToBounds(nextDraft, bounds), type);
+        const startCandidate = activeSide === 'start' ? nextDraft : draftStart;
+        const endCandidate = activeSide === 'start' ? draftEnd : nextDraft;
+        const nextStart = normalizeDraftByType(clampToBounds(startCandidate, bounds), type);
+        const nextEnd = normalizeDraftByType(clampToBounds(endCandidate, bounds), type);
+        const nextPair = nextStart.isAfter(nextEnd)
+            ? { start: nextEnd, end: nextStart }
+            : { start: nextStart, end: nextEnd };
+        applyPairAndEmit(nextPair.start, nextPair.end);
+        return nextPair;
+    }, [activeDraft, activeSide, applyPairAndEmit, bounds, columns, columnsCount, draftEnd, draftStart, indices, type]);
+    const handleWheelIndexChange = React.useCallback((columnIndex, nextIndex) => {
+        const opts = columns[columnIndex];
+        const picked = opts === null || opts === void 0 ? void 0 : opts[nextIndex];
+        if (!picked)
+            return;
+        const valueNum = picked.value;
+        let nextDraft = applyColumnValue(activeDraft, columnIndex, valueNum);
+        nextDraft = clampToBounds(nextDraft, bounds);
+        nextDraft = normalizeDraftByType(nextDraft, type);
+        if (activeSide === 'start')
+            applyPairAndEmit(nextDraft, draftEnd);
+        else
+            applyPairAndEmit(draftStart, nextDraft);
+    }, [activeDraft, activeSide, applyPairAndEmit, bounds, columns, draftEnd, draftStart, type]);
+    const handleClear = React.useCallback(() => {
+        setValue([]);
+    }, [setValue]);
+    const handleCancel = React.useCallback(() => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        const pair = resolveInitialPair(value, bounds, type);
+        setDraft({ draftStart: pair.start, draftEnd: pair.end });
+        close();
+    }, [bounds, close, onCancel, type, value]);
+    const handleConfirm = React.useCallback(async () => {
+        const synced = await syncDraftFromWheels();
+        const next = [synced.start, synced.end];
+        const rawStart = formatByType(next[0], type);
+        const rawEnd = formatByType(next[1], type);
+        let outStart = rawStart;
+        let outEnd = rawEnd;
+        if (formatSyncValue) {
+            outStart = next[0].format(format);
+            outEnd = next[1].format(format);
+            ensureFormatSyncValueIsStandard(outStart);
+            ensureFormatSyncValueIsStandard(outEnd);
+        }
+        const nextValue = outStart && outEnd ? [outStart, outEnd] : [];
+        setValue(nextValue);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({ value: nextValue });
+        close();
+    }, [close, format, formatSyncValue, onConfirm, setValue, syncDraftFromWheels, type]);
+    const handleQuickPick = React.useCallback((key) => {
+        const range = getQuickRange(key, (0, dayjs_1.default)());
+        if (!range)
+            return;
+        applyPairAndEmit(range.start, range.end);
+    }, [applyPairAndEmit]);
+    const triggerNode = React.useMemo(() => children != null ? composeTrigger(children, openPicker, disabled) : null, [children, disabled, openPicker]);
+    const handleSheetOpenChange = React.useCallback((nextOpen, meta) => {
+        if (!nextOpen && visible && meta.reason !== 'api') {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            const pair = resolveInitialPair(value, bounds, type);
+            setDraft({ draftStart: pair.start, draftEnd: pair.end });
+        }
+        setPickerOpen(nextOpen);
+    }, [bounds, onCancel, setPickerOpen, type, value, visible]);
+    const handleSheetDismissComplete = React.useCallback(() => {
+        if (lazyContent)
+            setContentMounted(false);
+        onDismissComplete === null || onDismissComplete === void 0 ? void 0 : onDismissComplete();
+    }, [lazyContent, onDismissComplete]);
+    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,
+                    paddingBottom: safeBottom,
+                },
+            ], pointerEvents: disabled ? 'none' : 'auto', children: [(0, jsx_runtime_1.jsxs)(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('betweenTime.title') }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", onPress: handleClear, disabled: disabled, colors: { text: theme.colors.muted }, layout: { minHeight: (0, zkit_tools_1.wp)(32), paddingHorizontal: (0, zkit_tools_1.wp)(8), textSize: (0, zkit_tools_1.sp)(14) }, children: t('betweenTime.clear') })] }), Array.isArray(quickDate) && quickDate.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.quickRow, children: quickDate.map((k) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => handleQuickPick(k), style: ({ pressed }) => [
+                            styles.quickPill,
+                            {
+                                borderColor: `${theme.colors.primary}22`,
+                                backgroundColor: `${theme.colors.primary}14`,
+                            },
+                            pressed && { opacity: 0.8 },
+                        ], disabled: disabled, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.quickText, { color: theme.colors.primary }], children: getQuickLabel(k) }) }, k))) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.rangeRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setActiveSide('start'), style: ({ pressed }) => [
+                                styles.rangePill,
+                                activeSide === 'start'
+                                    ? { borderColor: theme.colors.primary, backgroundColor: '#FFFFFF' }
+                                    : { borderColor: theme.colors.border, backgroundColor: '#FFFFFF' },
+                                pressed && { opacity: 0.85 },
+                            ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [
+                                    styles.rangeText,
+                                    { color: activeSide === 'start' ? theme.colors.primary : theme.colors.muted },
+                                ], numberOfLines: 1, children: draftStart ? draftStart.format(format) : t('betweenTime.startTime') }) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.toText, { color: theme.colors.muted }], children: t('betweenTime.to') }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setActiveSide('end'), style: ({ pressed }) => [
+                                styles.rangePill,
+                                activeSide === 'end'
+                                    ? { borderColor: theme.colors.primary, backgroundColor: '#FFFFFF' }
+                                    : { borderColor: theme.colors.border, backgroundColor: '#FFFFFF' },
+                                pressed && { opacity: 0.85 },
+                            ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [
+                                    styles.rangeText,
+                                    { color: activeSide === 'end' ? theme.colors.primary : theme.colors.muted },
+                                ], numberOfLines: 1, children: draftEnd ? draftEnd.format(format) : t('betweenTime.endTime') }) })] }), contentMounted ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pickerArea, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.unitRow, children: unitLabels.map((u, idx) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.unitCell, { width: columnWidth }], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.unitText, { color: theme.colors.muted }], children: u }) }, `${u}-${idx}`))) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pickerWrapper, onLayout: onColumnsLayout, children: [react_native_1.Platform.OS !== 'ios' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.highlightBar, pointerEvents: "none" })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.columnsRow, children: columns.map((col, colIdx) => {
+                                        var _a, _b, _c;
+                                        return ((0, jsx_runtime_1.jsx)(WheelColumn_1.WheelColumn, { ref: (instance) => {
+                                                wheelsRef.current[colIdx] = instance;
+                                            }, options: col, value: (_c = (_b = col[Math.max(0, (_a = indices[colIdx]) !== null && _a !== void 0 ? _a : 0)]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null, onChange: (payload) => handleWheelIndexChange(colIdx, payload.index), width: columnWidth, disabled: disabled }, `col-${colIdx}-${columnsCount}`));
+                                    }) }), react_native_1.Platform.OS !== 'ios' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topMask, pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(expo_linear_gradient_1.LinearGradient, { colors: ['#FFFFFF', 'rgba(255,255,255,0)'], style: react_native_1.StyleSheet.absoluteFill }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.bottomMask, pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(expo_linear_gradient_1.LinearGradient, { colors: ['rgba(255,255,255,0)', '#FFFFFF'], style: react_native_1.StyleSheet.absoluteFill }) })] }))] })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.pickerArea, { height: WheelColumn_1.WHEEL_AREA_HEIGHT + (0, zkit_tools_1.wp)(26) }] })), (0, jsx_runtime_1.jsx)(actionBar_1.PickerActionBar, { cancelText: t('betweenTime.cancel'), confirmText: t('betweenTime.confirm'), onCancel: handleCancel, onConfirm: handleConfirm, disabled: disabled, style: styles.footer })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerNode, sheetNode] }));
+});
+const styles = react_native_1.StyleSheet.create({
+    sheetInner: {
+        width: '100%',
+        paddingHorizontal: (0, zkit_tools_1.wp)(16),
+        paddingTop: (0, zkit_tools_1.wp)(14),
+    },
+    header: {
+        height: (0, zkit_tools_1.wp)(44),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerTitle: {
+        fontSize: (0, zkit_tools_1.sp)(16),
+        fontWeight: '600',
+    },
+    quickRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: (0, zkit_tools_1.wp)(10),
+        paddingTop: (0, zkit_tools_1.wp)(8),
+        paddingBottom: (0, zkit_tools_1.wp)(12),
+    },
+    quickPill: {
+        height: (0, zkit_tools_1.wp)(28),
+        paddingHorizontal: (0, zkit_tools_1.wp)(12),
+        borderRadius: (0, zkit_tools_1.wp)(14),
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    quickText: {
+        fontSize: (0, zkit_tools_1.sp)(12),
+        fontWeight: '600',
+    },
+    rangeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: (0, zkit_tools_1.wp)(4),
+        paddingBottom: (0, zkit_tools_1.wp)(10),
+    },
+    rangePill: {
+        flex: 1,
+        height: (0, zkit_tools_1.wp)(40),
+        borderRadius: (0, zkit_tools_1.wp)(20),
+        borderWidth: (0, zkit_tools_1.wp)(1.5),
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(12),
+    },
+    rangeText: {
+        fontSize: (0, zkit_tools_1.sp)(14),
+        fontWeight: '600',
+    },
+    toText: {
+        width: (0, zkit_tools_1.wp)(28),
+        textAlign: 'center',
+        fontSize: (0, zkit_tools_1.sp)(13),
+        fontWeight: '600',
+    },
+    pickerArea: {
+        paddingTop: (0, zkit_tools_1.wp)(4),
+        paddingBottom: WheelColumn_1.WHEEL_AREA_VERTICAL_INSET * 2,
+    },
+    unitRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingBottom: (0, zkit_tools_1.wp)(6),
+    },
+    unitCell: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    unitText: {
+        fontSize: (0, zkit_tools_1.sp)(12),
+        fontWeight: '600',
+    },
+    pickerWrapper: {
+        height: ITEM_HEIGHT * VISIBLE_ITEMS,
+        position: 'relative',
+        width: '100%',
+        overflow: 'visible',
+    },
+    highlightBar: {
+        position: 'absolute',
+        top: ITEM_HEIGHT * ((VISIBLE_ITEMS - 1) / 2),
+        left: -(0, zkit_tools_1.wp)(16),
+        right: -(0, zkit_tools_1.wp)(16),
+        height: ITEM_HEIGHT,
+        backgroundColor: WheelColumn_1.WHEEL_SELECTION_BACKGROUND_COLOR,
+        zIndex: 0,
+    },
+    topMask: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: ITEM_HEIGHT * ((VISIBLE_ITEMS - 1) / 2),
+        zIndex: 2,
+    },
+    bottomMask: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: ITEM_HEIGHT * ((VISIBLE_ITEMS - 1) / 2),
+        zIndex: 2,
+    },
+    columnsRow: {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        justifyContent: 'space-between',
+        zIndex: 1,
+    },
+    footer: {
+        paddingTop: (0, zkit_tools_1.wp)(12),
+    },
+});